Refactoring and fixing problems (#317)

* fix(Map): fix design of kills widget, fix design of signatures widget - refactor a lot of code, fixed problem with tooltip blinking * fix(Map): refactor Tracking dialog, refactor Activity tracker, refactor codebase and some styles * fix(Core): don't count character passage on manual add connection * refactor(Core): improved characters tracking API * fix(Core): fixed link signature to system on 'leads to' set * fix(Map): Refactor map settings and prepared it to easier using * fix(Map): Add support new command for following update * fix(Map): Add support new command for main update * refactor(Core): Reduce map init data by using cached system static data * refactor(Core): Reduce map init data by extract signatures loading to a separate event * fix(Core): adjusted IP rate limits * fix(Map): Update design of tracking characters. Added icons for following and main. Added ability to see that character on the station or structure --------- Co-authored-by: achichenkov <aleksei.chichenkov@telleqt.ai> Co-authored-by: Dmitry Popov <dmitriypopovsamara@gmail.com>
2025-12-12 02:35:42 +00:00 · 2025-04-11 22:17:53 +03:00
parent 7da5512d45
commit d8222d83f0
126 changed files with 3372 additions and 2647 deletions
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/SystemKillsList/SystemKillsList.module.scss
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/SystemKillsList/SystemKillsList.module.scss
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/SystemKillsList/SystemKillsList.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/SystemKillsList/SystemKillsList.tsx
@@ -0,0 +1,63 @@
+import { useMemo } from 'react';
+import { DetailedKill } from '@/hooks/Mapper/types/kills';
+import { VirtualScroller } from 'primereact/virtualscroller';
+import { useSystemKillsItemTemplate } from '../hooks/useSystemKillsItemTemplate';
+import clsx from 'clsx';
+import { WithClassName } from '@/hooks/Mapper/types/common.ts';
+
+export const KILLS_ROW_HEIGHT = 40;
+
+export type SystemKillsContentProps = {
+  kills: DetailedKill[];
+  onlyOneSystem?: boolean;
+  timeRange?: number;
+  limit?: number;
+} & WithClassName;
+
+export const SystemKillsList = ({
+  kills,
+  onlyOneSystem = false,
+  timeRange = 4,
+  limit,
+  className,
+}: SystemKillsContentProps) => {
+  const processedKills = useMemo(() => {
+    if (!kills || kills.length === 0) return [];
+
+    // sort by newest first
+    const sortedKills = kills
+      .filter(k => k.kill_time)
+      .sort((a, b) => new Date(b.kill_time!).getTime() - new Date(a.kill_time!).getTime());
+
+    // filter by timeRange
+    let filteredKills = sortedKills;
+    if (timeRange !== undefined) {
+      const cutoffTime = new Date();
+      cutoffTime.setHours(cutoffTime.getHours() - timeRange);
+      filteredKills = sortedKills.filter(kill => {
+        const killTime = new Date(kill.kill_time!).getTime();
+        return killTime >= cutoffTime.getTime();
+      });
+    }
+
+    // apply limit if present
+    if (limit !== undefined) {
+      return filteredKills.slice(0, limit);
+    }
+    return filteredKills;
+  }, [kills, timeRange, limit]);
+
+  const itemTemplate = useSystemKillsItemTemplate(onlyOneSystem);
+
+  return (
+    <VirtualScroller
+      items={processedKills}
+      itemSize={KILLS_ROW_HEIGHT}
+      itemTemplate={itemTemplate}
+      className={clsx(
+        'w-full flex-1 select-none !h-full overflow-x-hidden overflow-y-auto custom-scrollbar',
+        className,
+      )}
+    />
+  );
+};
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/SystemKillsList/index.ts
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/SystemKillsList/index.ts
@@ -0,0 +1 @@
+export * from './SystemKillsList';
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/WSystemKills.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/WSystemKills.tsx
@@ -0,0 +1,109 @@
+import { useCallback, useMemo, useState } from 'react';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { Widget } from '@/hooks/Mapper/components/mapInterface/components';
+import { SystemKillsList } from './SystemKillsList';
+import { KillsHeader } from './components/SystemKillsHeader';
+import { useKillsWidgetSettings } from './hooks/useKillsWidgetSettings';
+import { useSystemKills } from './hooks/useSystemKills';
+import { KillsSettingsDialog } from './components/SystemKillsSettingsDialog';
+import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace';
+import { getSystemStaticInfo } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic';
+
+const SystemKillsContent = () => {
+  const {
+    data: { selectedSystems, isSubscriptionActive },
+    outCommand,
+  } = useMapRootState();
+
+  const [systemId] = selectedSystems || [];
+
+  const systemStaticInfo = getSystemStaticInfo(systemId)!;
+
+  const [settings] = useKillsWidgetSettings();
+  const visible = settings.showAll;
+
+  const { kills, isLoading, error } = useSystemKills({
+    systemId,
+    outCommand,
+    showAllVisible: visible,
+    sinceHours: settings.timeRange,
+  });
+
+  const isNothingSelected = !systemId && !visible;
+  const showLoading = isLoading && kills.length === 0;
+
+  const filteredKills = useMemo(() => {
+    if (!settings.whOnly || !visible) return kills;
+    return kills.filter(kill => {
+      if (!systemStaticInfo) {
+        console.warn(`System with id ${kill.solar_system_id} not found.`);
+        return false;
+      }
+      return isWormholeSpace(systemStaticInfo.system_class);
+    });
+  }, [kills, settings.whOnly, systemStaticInfo, visible]);
+
+  if (!isSubscriptionActive) {
+    return (
+      <div className="w-full h-full flex items-center justify-center">
+        <span className="select-none text-center text-stone-400/80 text-sm">
+          Kills available with &#39;Active&#39; map subscription only (contact map administrators)
+        </span>
+      </div>
+    );
+  }
+
+  if (isNothingSelected) {
+    return (
+      <div className="w-full h-full flex items-center justify-center">
+        <span className="select-none text-center text-stone-400/80 text-sm">
+          No system selected (or toggle &quot;Show all systems&quot;)
+        </span>
+      </div>
+    );
+  }
+
+  if (showLoading) {
+    return (
+      <div className="w-full h-full flex items-center justify-center">
+        <span className="select-none text-center text-stone-400/80 text-sm">Loading Kills...</span>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="w-full h-full flex items-center justify-center">
+        <span className="select-none text-center text-red-400 text-sm">{error}</span>
+      </div>
+    );
+  }
+
+  if (!filteredKills || filteredKills.length === 0) {
+    return (
+      <div className="w-full h-full flex items-center justify-center">
+        <span className="select-none text-center text-stone-400/80 text-sm">No kills found</span>
+      </div>
+    );
+  }
+
+  return <SystemKillsList kills={filteredKills} onlyOneSystem={!visible} timeRange={settings.timeRange} />;
+};
+
+export const WSystemKills = () => {
+  const [settingsDialogVisible, setSettingsDialogVisible] = useState(false);
+  const {
+    data: { selectedSystems },
+  } = useMapRootState();
+
+  const [systemId] = selectedSystems || [];
+
+  const handleOpenSettings = useCallback(() => setSettingsDialogVisible(true), []);
+
+  return (
+    <Widget label={<KillsHeader systemId={systemId} onOpenSettings={handleOpenSettings} />}>
+      <SystemKillsContent />
+      {settingsDialogVisible && <KillsSettingsDialog visible setVisible={setSettingsDialogVisible} />}
+    </Widget>
+  );
+};
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/components/KillItemTemplate.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/components/KillItemTemplate.tsx
@@ -0,0 +1,24 @@
+import { DetailedKill } from '@/hooks/Mapper/types/kills';
+import { VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
+import { KillRowDetail } from '@/hooks/Mapper/components/mapInterface/widgets/WSystemKills/components/KillRowDetail.tsx';
+import clsx from 'clsx';
+import { getSystemStaticInfo } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic';
+
+export const KillItemTemplate = (
+  onlyOneSystem: boolean,
+  kill: DetailedKill,
+  options: VirtualScrollerTemplateOptions,
+) => {
+  const systemName = getSystemStaticInfo(kill.solar_system_id)?.solar_system_name || `System ${kill.solar_system_id}`;
+
+  return (
+    <div style={{ height: `${options.props.itemSize}px` }}>
+      <KillRowDetail
+        killDetails={kill}
+        systemName={systemName}
+        onlyOneSystem={onlyOneSystem}
+        className={clsx(options.odd && 'bg-stone-800/50')}
+      />
+    </div>
+  );
+};
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/components/KillRowDetail.module.scss
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/components/KillRowDetail.module.scss
@@ -0,0 +1,30 @@
+.killRowContainer {
+  @apply flex items-center whitespace-nowrap overflow-hidden;
+  &:not(:last-child) {
+    @apply border-b border-stone-800;
+  }
+  @apply bg-transparent transition-all hover:bg-stone-900 hover:border-stone-700;
+}
+
+.killRowImage {
+  @apply border border-stone-800 rounded-[4px] object-contain;
+}
+
+.attackerCountLabel {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  font-size: 10px;
+  padding: 0 2px;
+}
+
+.attackerCountLabelCompact {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  font-size: 0.6rem;
+  line-height: 1;
+  background-color: rgba(0, 0, 0, 0.7);
+  padding: 1px 2px;
+  pointer-events: none;
+}
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/components/KillRowDetail.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/components/KillRowDetail.tsx
@@ -0,0 +1,219 @@
+import { useMemo } from 'react';
+import clsx from 'clsx';
+import { DetailedKill } from '@/hooks/Mapper/types/kills';
+import {
+  formatISK,
+  formatTimeMixed,
+  zkillLink,
+  getAttackerSubscript,
+  buildVictimImageUrls,
+  buildAttackerImageUrls,
+  getPrimaryLogoAndTooltip,
+  getAttackerPrimaryImageAndTooltip,
+} from '../helpers';
+import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit';
+import classes from './KillRowDetail.module.scss';
+import { TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
+import { WithClassName } from '@/hooks/Mapper/types/common.ts';
+
+export type CompactKillRowProps = {
+  killDetails: DetailedKill;
+  systemName: string;
+  onlyOneSystem: boolean;
+} & WithClassName;
+
+export const KillRowDetail = ({ killDetails, systemName, onlyOneSystem, className }: CompactKillRowProps) => {
+  const {
+    killmail_id = 0,
+    // Victim data
+    victim_char_name = 'Unknown Pilot',
+    victim_alliance_ticker = '',
+    victim_corp_ticker = '',
+    victim_ship_name = 'Unknown Ship',
+    victim_corp_name = '',
+    victim_alliance_name = '',
+    victim_char_id = 0,
+    victim_corp_id = 0,
+    victim_alliance_id = 0,
+    victim_ship_type_id = 0,
+    // Attacker data
+    final_blow_char_id = 0,
+    final_blow_char_name = '',
+    final_blow_alliance_ticker = '',
+    final_blow_alliance_name = '',
+    final_blow_alliance_id = 0,
+    final_blow_corp_ticker = '',
+    final_blow_corp_id = 0,
+    final_blow_corp_name = '',
+    final_blow_ship_type_id = 0,
+    kill_time = '',
+    total_value = 0,
+  } = killDetails || {};
+
+  const attackerIsNpc = final_blow_char_id === 0;
+
+  // Define victim affiliation ticker.
+  const victimAffiliationTicker = victim_alliance_ticker || victim_corp_ticker || 'No Ticker';
+
+  const killValueFormatted = total_value != null && total_value > 0 ? `${formatISK(total_value)} ISK` : null;
+  const killTimeAgo = kill_time ? formatTimeMixed(kill_time) : '0h ago';
+
+  const attackerSubscript = getAttackerSubscript(killDetails);
+
+  const { victimCorpLogoUrl, victimAllianceLogoUrl, victimShipUrl } = buildVictimImageUrls({
+    victim_char_id,
+    victim_ship_type_id,
+    victim_corp_id,
+    victim_alliance_id,
+  });
+
+  const { attackerCorpLogoUrl, attackerAllianceLogoUrl } = buildAttackerImageUrls({
+    final_blow_char_id,
+    final_blow_corp_id,
+    final_blow_alliance_id,
+  });
+
+  const { url: victimPrimaryLogoUrl, tooltip: victimPrimaryTooltip } = getPrimaryLogoAndTooltip(
+    victimAllianceLogoUrl,
+    victimCorpLogoUrl,
+    victim_alliance_name,
+    victim_corp_name,
+    'Victim',
+  );
+
+  const { url: attackerPrimaryImageUrl, tooltip: attackerPrimaryTooltip } = useMemo(
+    () =>
+      getAttackerPrimaryImageAndTooltip(
+        attackerIsNpc,
+        attackerAllianceLogoUrl,
+        attackerCorpLogoUrl,
+        final_blow_alliance_name,
+        final_blow_corp_name,
+        final_blow_ship_type_id,
+      ),
+    [
+      attackerAllianceLogoUrl,
+      attackerCorpLogoUrl,
+      attackerIsNpc,
+      final_blow_alliance_name,
+      final_blow_corp_name,
+      final_blow_ship_type_id,
+    ],
+  );
+
+  // Define attackerTicker to use the alliance ticker if available, otherwise the corp ticker.
+  const attackerTicker = attackerIsNpc ? '' : final_blow_alliance_ticker || final_blow_corp_ticker || '';
+
+  // For the attacker image link: if the attacker is not an NPC, link to the character page; otherwise, link to the kill page.
+  const attackerLink = attackerIsNpc ? zkillLink('kill', killmail_id) : zkillLink('character', final_blow_char_id);
+
+  return (
+    <div
+      className={clsx(
+        'h-10 flex items-center border-b border-stone-800',
+        'text-xs whitespace-nowrap overflow-hidden leading-none',
+        'px-1',
+        className,
+      )}
+    >
+      {/* Victim Section */}
+      <div className="flex items-center gap-1">
+        {victimShipUrl && (
+          <div className="relative shrink-0 w-8 h-8 overflow-hidden">
+            <a
+              href={zkillLink('kill', killmail_id)}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="block w-full h-full"
+            >
+              <img
+                src={victimShipUrl}
+                alt="Victim Ship"
+                className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
+              />
+            </a>
+          </div>
+        )}
+        {victimPrimaryLogoUrl && (
+          <WdTooltipWrapper content={victimPrimaryTooltip} position={TooltipPosition.top}>
+            <a
+              href={zkillLink('kill', killmail_id)}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="relative block shrink-0 w-8 h-8 overflow-hidden"
+            >
+              <img
+                src={victimPrimaryLogoUrl}
+                alt="Victim Primary Logo"
+                className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
+              />
+            </a>
+          </WdTooltipWrapper>
+        )}
+      </div>
+      <div className="flex flex-col ml-2 flex-1 min-w-0 overflow-hidden leading-[1rem]">
+        <div className="truncate text-stone-200">
+          {victim_char_name}
+          <span className="text-stone-400"> / {victimAffiliationTicker}</span>
+        </div>
+        <div className="truncate text-stone-300 flex items-center gap-1">
+          <span className="text-stone-400 overflow-hidden text-ellipsis whitespace-nowrap max-w-[140px]">
+            {victim_ship_name}
+          </span>
+          {killValueFormatted && (
+            <>
+              <span className="text-stone-400">/</span>
+              <span className="text-green-400">{killValueFormatted}</span>
+            </>
+          )}
+        </div>
+      </div>
+      <div className="flex items-center ml-auto gap-2">
+        <div className="flex flex-col items-end flex-1 min-w-0 overflow-hidden text-right leading-[1rem]">
+          {!attackerIsNpc && (final_blow_char_name || attackerTicker) && (
+            <div className="truncate text-stone-200">
+              {final_blow_char_name}
+              {!attackerIsNpc && attackerTicker && <span className="ml-1 text-stone-400">/ {attackerTicker}</span>}
+            </div>
+          )}
+          <div className="truncate text-stone-400">
+            {!onlyOneSystem && systemName ? (
+              <>
+                {systemName} / <span className="ml-1 text-red-400">{killTimeAgo}</span>
+              </>
+            ) : (
+              <span className="text-red-400">{killTimeAgo}</span>
+            )}
+          </div>
+        </div>
+        {attackerPrimaryImageUrl && (
+          <WdTooltipWrapper content={attackerPrimaryTooltip} position={TooltipPosition.top}>
+            <a
+              href={attackerLink}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="relative block shrink-0 w-8 h-8 overflow-hidden"
+            >
+              <img
+                src={attackerPrimaryImageUrl}
+                alt={attackerIsNpc ? 'NPC Ship' : 'Attacker Primary Logo'}
+                className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
+              />
+              {attackerSubscript && (
+                <span
+                  className={clsx(
+                    classes.attackerCountLabel,
+                    attackerSubscript.cssClass,
+                    'text-[0.6rem] leading-none px-[2px]',
+                  )}
+                >
+                  {attackerSubscript.label}
+                </span>
+              )}
+            </a>
+          </WdTooltipWrapper>
+        )}
+      </div>
+    </div>
+  );
+};
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/components/SystemKillsHeader.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/components/SystemKillsHeader.tsx
@@ -0,0 +1,65 @@
+import React, { useRef } from 'react';
+import {
+  LayoutEventBlocker,
+  SystemView,
+  TooltipPosition,
+  WdCheckbox,
+  WdImgButton,
+  WdTooltipWrapper,
+} from '@/hooks/Mapper/components/ui-kit';
+import { useKillsWidgetSettings } from '../hooks/useKillsWidgetSettings';
+import { PrimeIcons } from 'primereact/api';
+import useMaxWidth from '@/hooks/Mapper/hooks/useMaxWidth.ts';
+
+interface KillsHeaderProps {
+  systemId?: string;
+  onOpenSettings: () => void;
+}
+
+export const KillsHeader: React.FC<KillsHeaderProps> = ({ systemId, onOpenSettings }) => {
+  const [settings, setSettings] = useKillsWidgetSettings();
+  const { showAll } = settings;
+
+  const onToggleShowAllVisible = () => {
+    setSettings(prev => ({ ...prev, showAll: !prev.showAll }));
+  };
+
+  const headerRef = useRef<HTMLDivElement>(null);
+  const compact = useMaxWidth(headerRef, 150);
+
+  return (
+    <div className="flex w-full items-center justify-between text-xs" ref={headerRef}>
+      <div className="flex items-center gap-1">
+        <div className="text-stone-400">
+          Kills
+          {systemId && !showAll && ' in '}
+        </div>
+        {systemId && !showAll && <SystemView systemId={systemId} className="select-none text-center" hideRegion />}
+      </div>
+
+      <LayoutEventBlocker className="flex items-center gap-2 justify-end">
+        <div className="flex items-center gap-2">
+          <WdTooltipWrapper content="Show all systems" position={TooltipPosition.top}>
+            <WdCheckbox
+              size="xs"
+              labelSide="left"
+              label={compact ? 'All' : 'Show all systems'}
+              value={showAll}
+              onChange={onToggleShowAllVisible}
+              classNameLabel="whitespace-nowrap text-stone-400 hover:text-stone-200 transition duration-300"
+            />
+          </WdTooltipWrapper>
+
+          <WdImgButton
+            className={PrimeIcons.SLIDERS_H}
+            onClick={onOpenSettings}
+            tooltip={{
+              content: 'Open Kills Settings',
+              position: TooltipPosition.top,
+            }}
+          />
+        </div>
+      </LayoutEventBlocker>
+    </div>
+  );
+};
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/components/SystemKillsSettingsDialog.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/components/SystemKillsSettingsDialog.tsx
@@ -0,0 +1,171 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Dialog } from 'primereact/dialog';
+import { Button } from 'primereact/button';
+import { WdImgButton } from '@/hooks/Mapper/components/ui-kit';
+import { PrimeIcons } from 'primereact/api';
+import { useKillsWidgetSettings } from '../hooks/useKillsWidgetSettings';
+import {
+  AddSystemDialog,
+  SearchOnSubmitCallback,
+} from '@/hooks/Mapper/components/mapInterface/components/AddSystemDialog';
+import { SystemView, TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
+
+interface KillsSettingsDialogProps {
+  visible: boolean;
+  setVisible: (visible: boolean) => void;
+}
+
+export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visible, setVisible }) => {
+  const [globalSettings, setGlobalSettings] = useKillsWidgetSettings();
+  const localRef = useRef({
+    showAll: globalSettings.showAll,
+    whOnly: globalSettings.whOnly,
+    excludedSystems: globalSettings.excludedSystems || [],
+    timeRange: globalSettings.timeRange,
+  });
+
+  const [, forceRender] = useState(0);
+  const [addSystemDialogVisible, setAddSystemDialogVisible] = useState(false);
+
+  useEffect(() => {
+    if (visible) {
+      localRef.current = {
+        showAll: globalSettings.showAll,
+        whOnly: globalSettings.whOnly,
+        excludedSystems: globalSettings.excludedSystems || [],
+        timeRange: globalSettings.timeRange,
+      };
+      forceRender(n => n + 1);
+    }
+  }, [visible, globalSettings]);
+
+  const handleWHChange = useCallback((checked: boolean) => {
+    localRef.current = {
+      ...localRef.current,
+      whOnly: checked,
+    };
+    forceRender(n => n + 1);
+  }, []);
+
+  const handleTimeRangeChange = useCallback((newTimeRange: number) => {
+    localRef.current = {
+      ...localRef.current,
+      timeRange: newTimeRange,
+    };
+    forceRender(n => n + 1);
+  }, []);
+
+  const handleRemoveSystem = useCallback((sysId: number) => {
+    localRef.current = {
+      ...localRef.current,
+      excludedSystems: localRef.current.excludedSystems.filter(id => id !== sysId),
+    };
+    forceRender(n => n + 1);
+  }, []);
+
+  const handleAddSystemSubmit: SearchOnSubmitCallback = useCallback(item => {
+    if (localRef.current.excludedSystems.includes(item.value)) {
+      return;
+    }
+    localRef.current = {
+      ...localRef.current,
+      excludedSystems: [...localRef.current.excludedSystems, item.value],
+    };
+    forceRender(n => n + 1);
+  }, []);
+
+  const handleApply = useCallback(() => {
+    setGlobalSettings(prev => ({
+      ...prev,
+      ...localRef.current,
+    }));
+    setVisible(false);
+  }, [setGlobalSettings, setVisible]);
+
+  const handleHide = useCallback(() => {
+    setVisible(false);
+  }, [setVisible]);
+
+  const localData = localRef.current;
+  const excluded = localData.excludedSystems || [];
+  const timeRangeOptions = [4, 12, 24];
+
+  // Ensure timeRange is one of the valid options
+  useEffect(() => {
+    if (visible && !timeRangeOptions.includes(localData.timeRange)) {
+      // If current timeRange is not in options, set it to the default (4 hours)
+      handleTimeRangeChange(4);
+    }
+  }, [visible, localData.timeRange, handleTimeRangeChange]);
+
+  return (
+    <Dialog header="Kills Settings" visible={visible} style={{ width: '440px' }} draggable={false} onHide={handleHide}>
+      <div className="flex flex-col gap-3 p-2.5">
+        <div className="flex items-center gap-2">
+          <input
+            type="checkbox"
+            id="kills-wormhole-only-mode"
+            checked={localData.whOnly}
+            onChange={e => handleWHChange(e.target.checked)}
+          />
+          <label htmlFor="kills-wormhole-only-mode" className="cursor-pointer">
+            Only show wormhole kills
+          </label>
+        </div>
+
+        <div className="flex flex-col gap-1">
+          <span className="text-sm">Time Range:</span>
+          <div className="flex flex-wrap gap-2">
+            {timeRangeOptions.map(option => (
+              <label key={option} className="cursor-pointer flex items-center gap-1">
+                <input
+                  type="radio"
+                  name="timeRange"
+                  value={option}
+                  checked={localData.timeRange === option}
+                  onChange={() => handleTimeRangeChange(option)}
+                />
+                <span className="text-sm">{option} Hours</span>
+              </label>
+            ))}
+          </div>
+        </div>
+
+        {/* Excluded Systems */}
+        <div className="flex flex-col gap-1">
+          <div className="flex items-center justify-between">
+            <label className="text-sm text-stone-400">Excluded Systems</label>
+            <WdImgButton
+              className={PrimeIcons.PLUS_CIRCLE}
+              onClick={() => setAddSystemDialogVisible(true)}
+              tooltip={{ content: 'Add system to excluded list' }}
+            />
+          </div>
+          {excluded.length === 0 && <div className="text-stone-500 text-xs italic">No systems excluded.</div>}
+          {excluded.map(sysId => (
+            <div key={sysId} className="flex items-center justify-between border-b border-stone-600 py-1 px-1 text-xs">
+              <SystemView systemId={sysId.toString()} hideRegion />
+              <WdImgButton
+                className={PrimeIcons.TRASH}
+                onClick={() => handleRemoveSystem(sysId)}
+                tooltip={{ content: 'Remove from excluded', position: TooltipPosition.top }}
+              />
+            </div>
+          ))}
+        </div>
+
+        <div className="flex gap-2 justify-end mt-4">
+          <Button onClick={handleApply} label="Apply" outlined size="small" />
+        </div>
+      </div>
+
+      <AddSystemDialog
+        title="Add system to kills exclude list"
+        visible={addSystemDialogVisible}
+        setVisible={() => setAddSystemDialogVisible(false)}
+        onSubmit={handleAddSystemSubmit}
+        excludedSystems={excluded}
+      />
+    </Dialog>
+  );
+};
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/helpers/index.ts
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/helpers/index.ts
@@ -0,0 +1,2 @@
+export * from './linkHelpers';
+export * from './killRowUtils';
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/helpers/killRowUtils.ts
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/helpers/killRowUtils.ts
@@ -0,0 +1,47 @@
+import { DetailedKill } from '@/hooks/Mapper/types/kills';
+
+/** Returns "5m ago", "3h ago", "2.5d ago", etc. */
+export function formatTimeMixed(killTime: string): string {
+  const killDate = new Date(killTime);
+  const diffMs = Date.now() - killDate.getTime();
+  const diffHours = diffMs / (1000 * 60 * 60);
+
+  if (diffHours < 1) {
+    const mins = Math.round(diffHours * 60);
+    return `${mins}m ago`;
+  } else if (diffHours < 24) {
+    const hours = Math.round(diffHours);
+    return `${hours}h ago`;
+  } else {
+    const days = diffHours / 24;
+    const roundedDays = days.toFixed(1);
+    return `${roundedDays}d ago`;
+  }
+}
+
+/** Formats integer ISK values into k/M/B/T. */
+export function formatISK(value: number): string {
+  if (value >= 1_000_000_000_000) {
+    return `${(value / 1_000_000_000_000).toFixed(2)}T`;
+  } else if (value >= 1_000_000_000) {
+    return `${(value / 1_000_000_000).toFixed(2)}B`;
+  } else if (value >= 1_000_000) {
+    return `${(value / 1_000_000).toFixed(2)}M`;
+  } else if (value >= 1_000) {
+    return `${(value / 1_000).toFixed(2)}k`;
+  }
+  return Math.round(value).toString();
+}
+
+export function getAttackerSubscript(kill: DetailedKill) {
+  if (kill.npc) {
+    return { label: 'npc', cssClass: 'text-purple-400' };
+  }
+  const count = kill.attacker_count ?? 0;
+  if (count === 1) {
+    return { label: 'solo', cssClass: 'text-green-400' };
+  } else if (count > 1) {
+    return { label: String(count), cssClass: 'text-white' };
+  }
+  return null;
+}
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/helpers/linkHelpers.ts
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/helpers/linkHelpers.ts
@@ -0,0 +1,97 @@
+const ZKILL_URL = 'https://zkillboard.com';
+import { getEveImageUrl } from '@/hooks/Mapper/helpers';
+
+export function zkillLink(type: 'kill' | 'character' | 'corporation' | 'alliance', id?: number | null): string {
+  if (!id) return `${ZKILL_URL}`;
+  if (type === 'kill') return `${ZKILL_URL}/kill/${id}/`;
+  if (type === 'character') return `${ZKILL_URL}/character/${id}/`;
+  if (type === 'corporation') return `${ZKILL_URL}/corporation/${id}/`;
+  if (type === 'alliance') return `${ZKILL_URL}/alliance/${id}/`;
+  return `${ZKILL_URL}`;
+}
+
+export const eveImageUrl = getEveImageUrl;
+
+export function buildVictimImageUrls(args: {
+  victim_char_id?: number | null;
+  victim_ship_type_id?: number | null;
+  victim_corp_id?: number | null;
+  victim_alliance_id?: number | null;
+}) {
+  const { victim_char_id, victim_ship_type_id, victim_corp_id, victim_alliance_id } = args;
+
+  const victimPortraitUrl = eveImageUrl('characters', victim_char_id, 'portrait', 64);
+  const victimShipUrl = eveImageUrl('types', victim_ship_type_id, 'render', 64);
+  const victimCorpLogoUrl = eveImageUrl('corporations', victim_corp_id, 'logo', 32);
+  const victimAllianceLogoUrl = eveImageUrl('alliances', victim_alliance_id, 'logo', 32);
+
+  return {
+    victimPortraitUrl,
+    victimShipUrl,
+    victimCorpLogoUrl,
+    victimAllianceLogoUrl,
+  };
+}
+
+export function buildAttackerShipUrl(final_blow_ship_type_id?: number | null): string | null {
+  return eveImageUrl('types', final_blow_ship_type_id, 'render', 64);
+}
+
+export function buildAttackerImageUrls(args: {
+  final_blow_char_id?: number | null;
+  final_blow_corp_id?: number | null;
+  final_blow_alliance_id?: number | null;
+}) {
+  const { final_blow_char_id, final_blow_corp_id, final_blow_alliance_id } = args;
+
+  const attackerPortraitUrl = eveImageUrl('characters', final_blow_char_id, 'portrait', 64);
+  const attackerCorpLogoUrl = eveImageUrl('corporations', final_blow_corp_id, 'logo', 32);
+  const attackerAllianceLogoUrl = eveImageUrl('alliances', final_blow_alliance_id, 'logo', 32);
+
+  return {
+    attackerPortraitUrl,
+    attackerCorpLogoUrl,
+    attackerAllianceLogoUrl,
+  };
+}
+
+export function getPrimaryLogoAndTooltip(
+  allianceUrl: string | null,
+  corpUrl: string | null,
+  allianceName: string,
+  corpName: string,
+  fallback: string,
+) {
+  let url: string | null = null;
+  let tooltip = '';
+
+  if (allianceUrl) {
+    url = allianceUrl;
+    tooltip = allianceName || fallback;
+  } else if (corpUrl) {
+    url = corpUrl;
+    tooltip = corpName || fallback;
+  }
+
+  return { url, tooltip };
+}
+
+export function getAttackerPrimaryImageAndTooltip(
+  isNpc: boolean,
+  allianceUrl: string | null,
+  corpUrl: string | null,
+  allianceName: string,
+  corpName: string,
+  finalBlowShipTypeId: number | null,
+  npcFallback: string = 'NPC Attacker',
+) {
+  if (isNpc) {
+    const shipUrl = buildAttackerShipUrl(finalBlowShipTypeId);
+    return {
+      url: shipUrl,
+      tooltip: npcFallback,
+    };
+  }
+
+  return getPrimaryLogoAndTooltip(allianceUrl, corpUrl, allianceName, corpName, 'Attacker');
+}
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/hooks/useKillsWidgetSettings.ts
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/hooks/useKillsWidgetSettings.ts
@@ -0,0 +1,53 @@
+import { useMemo, useCallback } from 'react';
+import useLocalStorageState from 'use-local-storage-state';
+
+export interface KillsWidgetSettings {
+  showAll: boolean;
+  whOnly: boolean;
+  excludedSystems: number[];
+  version: number;
+  timeRange: number;
+}
+
+export const DEFAULT_KILLS_WIDGET_SETTINGS: KillsWidgetSettings = {
+  showAll: false,
+  whOnly: true,
+  excludedSystems: [],
+  version: 2,
+  timeRange: 4,
+};
+
+function mergeWithDefaults(settings?: Partial<KillsWidgetSettings>): KillsWidgetSettings {
+  if (!settings) {
+    return DEFAULT_KILLS_WIDGET_SETTINGS;
+  }
+
+  return {
+    ...DEFAULT_KILLS_WIDGET_SETTINGS,
+    ...settings,
+    excludedSystems: Array.isArray(settings.excludedSystems) ? settings.excludedSystems : [],
+  };
+}
+
+export function useKillsWidgetSettings() {
+  const [rawValue, setRawValue] = useLocalStorageState<KillsWidgetSettings | undefined>('kills:widget:settings');
+
+  const value = useMemo<KillsWidgetSettings>(() => {
+    return mergeWithDefaults(rawValue);
+  }, [rawValue]);
+
+  const setValue = useCallback(
+    (newVal: KillsWidgetSettings | ((prev: KillsWidgetSettings) => KillsWidgetSettings)) => {
+      setRawValue(prev => {
+        const mergedPrev = mergeWithDefaults(prev);
+
+        const nextUnmerged = typeof newVal === 'function' ? newVal(mergedPrev) : newVal;
+
+        return mergeWithDefaults(nextUnmerged);
+      });
+    },
+    [setRawValue],
+  );
+
+  return [value, setValue] as const;
+}
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/hooks/useSystemKills.ts
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/hooks/useSystemKills.ts
@@ -0,0 +1,174 @@
+import { useCallback, useMemo, useState, useEffect, useRef } from 'react';
+import debounce from 'lodash.debounce';
+import { OutCommand } from '@/hooks/Mapper/types/mapHandlers';
+import { DetailedKill } from '@/hooks/Mapper/types/kills';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { useKillsWidgetSettings } from './useKillsWidgetSettings';
+
+interface UseSystemKillsProps {
+  systemId?: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  outCommand: (payload: any) => Promise<any>;
+  showAllVisible?: boolean;
+  sinceHours?: number;
+}
+
+function combineKills(existing: DetailedKill[], incoming: DetailedKill[], sinceHours: number): DetailedKill[] {
+  const cutoff = Date.now() - sinceHours * 60 * 60 * 1000;
+  const byId: Record<string, DetailedKill> = {};
+
+  for (const kill of [...existing, ...incoming]) {
+    if (!kill.kill_time) continue;
+    const killTimeMs = new Date(kill.kill_time).valueOf();
+    if (killTimeMs >= cutoff) {
+      byId[kill.killmail_id] = kill;
+    }
+  }
+
+  return Object.values(byId);
+}
+
+export function useSystemKills({ systemId, outCommand, showAllVisible = false, sinceHours = 24 }: UseSystemKillsProps) {
+  const { data, update } = useMapRootState();
+  const { detailedKills = {}, systems = [] } = data;
+  const [settings] = useKillsWidgetSettings();
+  const excludedSystems = settings.excludedSystems;
+
+  const effectiveSinceHours = sinceHours;
+
+  const effectiveSystemIds = useMemo(() => {
+    if (showAllVisible) {
+      return systems.map(s => s.id).filter(id => !excludedSystems.includes(Number(id)));
+    }
+    return systems.map(s => s.id);
+  }, [systems, excludedSystems, showAllVisible]);
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const didFallbackFetch = useRef(Object.keys(detailedKills).length !== 0);
+
+  const mergeKillsIntoGlobal = useCallback(
+    (killsMap: Record<string, DetailedKill[]>) => {
+      update(prev => {
+        const oldMap = prev.detailedKills ?? {};
+        const updated: Record<string, DetailedKill[]> = { ...oldMap };
+
+        for (const [sid, newKills] of Object.entries(killsMap)) {
+          const existing = updated[sid] ?? [];
+          const combined = combineKills(existing, newKills, effectiveSinceHours);
+          updated[sid] = combined;
+        }
+
+        return { ...prev, detailedKills: updated };
+      });
+    },
+    [update, effectiveSinceHours],
+  );
+
+  const fetchKills = useCallback(
+    async (forceFallback = false) => {
+      setIsLoading(true);
+      setError(null);
+
+      try {
+        let eventType: OutCommand;
+        let requestData: Record<string, unknown>;
+
+        if (showAllVisible || forceFallback) {
+          eventType = OutCommand.getSystemsKills;
+          requestData = {
+            system_ids: effectiveSystemIds,
+            since_hours: effectiveSinceHours,
+          };
+        } else if (systemId) {
+          eventType = OutCommand.getSystemKills;
+          requestData = {
+            system_id: systemId,
+            since_hours: effectiveSinceHours,
+          };
+        } else {
+          setIsLoading(false);
+          return;
+        }
+
+        const resp = await outCommand({
+          type: eventType,
+          data: requestData,
+        });
+
+        if (resp?.kills) {
+          const arr = resp.kills as DetailedKill[];
+          const sid = systemId ?? 'unknown';
+          mergeKillsIntoGlobal({ [sid]: arr });
+        } else if (resp?.systems_kills) {
+          mergeKillsIntoGlobal(resp.systems_kills as Record<string, DetailedKill[]>);
+        } else {
+          console.warn('[useSystemKills] Unexpected kills response =>', resp);
+        }
+      } catch (err) {
+        console.error('[useSystemKills] Failed to fetch kills:', err);
+        setError(err instanceof Error ? err.message : 'Error fetching kills');
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [showAllVisible, systemId, outCommand, effectiveSystemIds, effectiveSinceHours, mergeKillsIntoGlobal],
+  );
+
+  const debouncedFetchKills = useMemo(
+    () =>
+      debounce(fetchKills, 500, {
+        leading: true,
+        trailing: false,
+      }),
+    [fetchKills],
+  );
+
+  const finalKills = useMemo(() => {
+    let result: DetailedKill[] = [];
+
+    if (showAllVisible) {
+      result = effectiveSystemIds.flatMap(sid => detailedKills[sid] ?? []);
+    } else if (systemId) {
+      result = detailedKills[systemId] ?? [];
+    } else if (didFallbackFetch.current) {
+      result = effectiveSystemIds.flatMap(sid => detailedKills[sid] ?? []);
+    }
+
+    return result;
+  }, [showAllVisible, systemId, effectiveSystemIds, detailedKills, didFallbackFetch]);
+
+  const effectiveIsLoading = isLoading && finalKills.length === 0;
+
+  useEffect(() => {
+    if (!systemId && !showAllVisible && !didFallbackFetch.current) {
+      didFallbackFetch.current = true;
+      debouncedFetchKills.cancel();
+      fetchKills(true);
+    }
+  }, [systemId, showAllVisible, debouncedFetchKills, fetchKills]);
+
+  useEffect(() => {
+    if (effectiveSystemIds.length === 0) return;
+
+    if (showAllVisible || systemId) {
+      // Cancel any pending debounced fetch
+      debouncedFetchKills.cancel();
+      // Fetch kills immediately
+      fetchKills();
+      return () => debouncedFetchKills.cancel();
+    }
+  }, [showAllVisible, systemId, effectiveSystemIds, debouncedFetchKills, fetchKills]);
+
+  const refetch = useCallback(() => {
+    debouncedFetchKills.cancel();
+    fetchKills();
+  }, [debouncedFetchKills, fetchKills]);
+
+  return {
+    kills: finalKills,
+    isLoading: effectiveIsLoading,
+    error,
+    refetch,
+  };
+}
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/hooks/useSystemKillsItemTemplate.ts
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/hooks/useSystemKillsItemTemplate.ts
@@ -0,0 +1,12 @@
+// useSystemKillsItemTemplate.tsx
+import { useCallback } from 'react';
+import { VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
+import { DetailedKill } from '@/hooks/Mapper/types/kills';
+import { KillItemTemplate } from '../components/KillItemTemplate';
+
+export function useSystemKillsItemTemplate(onlyOneSystem: boolean) {
+  return useCallback(
+    (kill: DetailedKill, options: VirtualScrollerTemplateOptions) => KillItemTemplate(onlyOneSystem, kill, options),
+    [onlyOneSystem],
+  );
+}
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/index.ts
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/index.ts
@@ -0,0 +1 @@
+export * from './WSystemKills';