From c789b69b54f1f3a59366bb029d230a318803eb08 Mon Sep 17 00:00:00 2001
From: DanSylvest <cublakhan257@gmail.com>
Date: Sat, 13 Sep 2025 19:17:00 +0300
Subject: [PATCH] fix(Map): Update lifetime design and buttons

---
 assets/.eslintrc.cjs                          | 23 +++++++
 .../hooks/useTagMenu/useTagMenu.tsx           | 11 ++--
 .../ContextMenuConnection.tsx                 |  6 +-
 .../LifetimeActionsWrapper.tsx                | 12 ++++
 .../AddSystemDialog/AddSystemDialog.tsx       |  7 ++-
 .../PingsInterface/PingsInterface.tsx         |  4 +-
 .../SystemCustomLabelDialog.tsx               |  5 +-
 .../SystemPingDialog/SystemPingDialog.tsx     |  5 +-
 .../SystemSettingsDialog.tsx                  |  5 +-
 .../RoutesSettingsDialog.tsx                  | 10 ++-
 .../SystemSignatureSettingsDialog.tsx         |  4 +-
 .../SystemStructuresDialog.tsx                | 32 +++++-----
 .../components/SystemKillsSettingsDialog.tsx  |  6 +-
 .../MapSettings/components/AdminSettings.tsx  |  4 +-
 .../MapSettings/components/CommonSettings.tsx |  5 +-
 .../components/DefaultSettings.tsx            |  4 +-
 .../MapSettings/components/ServerSettings.tsx |  4 +-
 .../components/WidgetsSettings.tsx            |  5 +-
 .../components/OldSettingsDialog.tsx          |  8 +--
 .../SignatureSettings/SignatureSettings.tsx   | 26 ++++----
 .../SignatureEOLCheckbox.tsx                  | 24 --------
 .../components/SignatureEOLCheckbox/index.ts  |  1 -
 .../SignatureGroupContentWormholes.tsx        | 10 +--
 .../components/SignatureLifetimeSelect.tsx    | 27 ++++++++
 .../SignatureSettings/components/index.ts     |  1 +
 .../Mapper/components/ui-kit/WdButton.tsx     |  7 +++
 .../WdLifetimeSelector.tsx}                   | 61 ++++++++++++-------
 .../Mapper/components/ui-kit/constants.ts     |  6 ++
 .../hooks/Mapper/components/ui-kit/index.ts   |  2 +
 assets/js/hooks/Mapper/types/connection.ts    |  2 +-
 30 files changed, 193 insertions(+), 134 deletions(-)
 create mode 100644 assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/LifetimeActionsWrapper.tsx
 delete mode 100644 assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureEOLCheckbox/SignatureEOLCheckbox.tsx
 delete mode 100644 assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureEOLCheckbox/index.ts
 create mode 100644 assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureLifetimeSelect.tsx
 create mode 100644 assets/js/hooks/Mapper/components/ui-kit/WdButton.tsx
 rename assets/js/hooks/Mapper/components/{map/components/ContextMenuConnection/LifetimeActions.tsx => ui-kit/WdLifetimeSelector.tsx} (54%)
 create mode 100644 assets/js/hooks/Mapper/components/ui-kit/constants.ts

diff --git a/assets/.eslintrc.cjs b/assets/.eslintrc.cjs
index e19b7830..086eadf6 100644
--- a/assets/.eslintrc.cjs
+++ b/assets/.eslintrc.cjs
@@ -18,5 +18,28 @@ module.exports = {
     'react/react-in-jsx-scope': 'off',
     '@typescript-eslint/ban-ts-comment': 'off',
     "linebreak-style": "off",
+    "no-restricted-imports": [
+      "error",
+      {
+        "paths": [
+          {
+            "name": "primereact/button",
+            "importNames": ["Button"],
+            "message": "Use WdButton instead Button"
+          }
+        ]
+      }
+    ],
+    "react/forbid-elements": [
+      "error",
+      {
+        "forbid": [
+          {
+            "element": "Button",
+            "message": "Use WdButton instead Button"
+          }
+        ]
+      }
+    ]
   },
 };
diff --git a/assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/hooks/useTagMenu/useTagMenu.tsx b/assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/hooks/useTagMenu/useTagMenu.tsx
index 4670b7d3..3cb804d5 100644
--- a/assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/hooks/useTagMenu/useTagMenu.tsx
+++ b/assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/hooks/useTagMenu/useTagMenu.tsx
@@ -5,8 +5,7 @@ import { SolarSystemRawType } from '@/hooks/Mapper/types';
 import { getSystemById } from '@/hooks/Mapper/helpers';
 import clsx from 'clsx';
 import { GRADIENT_MENU_ACTIVE_CLASSES } from '@/hooks/Mapper/constants.ts';
-import { LayoutEventBlocker } from '@/hooks/Mapper/components/ui-kit';
-import { Button } from 'primereact/button';
+import { LayoutEventBlocker, WdButton } from '@/hooks/Mapper/components/ui-kit';
 
 const AVAILABLE_TAGS = [
   'A',
@@ -61,7 +60,7 @@ export const useTagMenu = (
               <LayoutEventBlocker className="flex flex-col gap-1 w-[200px] h-full px-2">
                 <div className="grid grid-cols-[auto_auto_auto_auto_auto_auto] gap-1">
                   {AVAILABLE_TAGS.map(x => (
-                    <Button
+                    <WdButton
                       outlined={system?.tag !== x}
                       severity="warning"
                       key={x}
@@ -71,9 +70,9 @@ export const useTagMenu = (
                       onClick={() => system?.tag !== x && onSystemTag(x)}
                     >
                       {x}
-                    </Button>
+                    </WdButton>
                   ))}
-                  <Button
+                  <WdButton
                     disabled={!isSelectedTag}
                     icon="pi pi-ban"
                     size="small"
@@ -81,7 +80,7 @@ export const useTagMenu = (
                     outlined
                     severity="help"
                     onClick={() => onSystemTag()}
-                  ></Button>
+                  ></WdButton>
                 </div>
               </LayoutEventBlocker>
             );
diff --git a/assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/ContextMenuConnection.tsx b/assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/ContextMenuConnection.tsx
index e2443eea..1e971252 100644
--- a/assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/ContextMenuConnection.tsx
+++ b/assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/ContextMenuConnection.tsx
@@ -14,7 +14,7 @@ import {
   SHIP_SIZES_SIZE,
 } from '@/hooks/Mapper/components/map/constants.ts';
 import { Edge } from 'reactflow';
-import { LifetimeActions } from '@/hooks/Mapper/components/map/components/ContextMenuConnection/LifetimeActions.tsx';
+import { LifetimeActionsWrapper } from '@/hooks/Mapper/components/map/components/ContextMenuConnection/LifetimeActionsWrapper.tsx';
 
 export interface ContextMenuConnectionProps {
   contextMenuRef: RefObject<ContextMenu>;
@@ -51,7 +51,9 @@ export const ContextMenuConnection: React.FC<ContextMenuConnectionProps> = ({
             {
               className: clsx(classes.FastActions, '!h-[54px]'),
               template: () => {
-                return <LifetimeActions lifetime={edge.data?.time_status} onChangeLifetime={onChangeTimeState} />;
+                return (
+                  <LifetimeActionsWrapper lifetime={edge.data?.time_status} onChangeLifetime={onChangeTimeState} />
+                );
               },
             },
             {
diff --git a/assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/LifetimeActionsWrapper.tsx b/assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/LifetimeActionsWrapper.tsx
new file mode 100644
index 00000000..c671faa1
--- /dev/null
+++ b/assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/LifetimeActionsWrapper.tsx
@@ -0,0 +1,12 @@
+import { LayoutEventBlocker } from '@/hooks/Mapper/components/ui-kit';
+import { WdLifetimeSelector, WdLifetimeSelectorProps } from '@/hooks/Mapper/components/ui-kit/WdLifetimeSelector.tsx';
+
+export const LifetimeActionsWrapper = (props: WdLifetimeSelectorProps) => {
+  return (
+    <LayoutEventBlocker className="flex flex-col gap-1 w-[100%] h-full px-2 pt-[4px]">
+      <div className="text-[12px] text-stone-500 font-semibold">Life time:</div>
+
+      <WdLifetimeSelector {...props} />
+    </LayoutEventBlocker>
+  );
+};
diff --git a/assets/js/hooks/Mapper/components/mapInterface/components/AddSystemDialog/AddSystemDialog.tsx b/assets/js/hooks/Mapper/components/mapInterface/components/AddSystemDialog/AddSystemDialog.tsx
index 28ebc302..0497efb7 100644
--- a/assets/js/hooks/Mapper/components/mapInterface/components/AddSystemDialog/AddSystemDialog.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/components/AddSystemDialog/AddSystemDialog.tsx
@@ -1,11 +1,10 @@
 import { Dialog } from 'primereact/dialog';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { useCallback, useRef, useState } from 'react';
-import { Button } from 'primereact/button';
 import { IconField } from 'primereact/iconfield';
 import { AutoComplete } from 'primereact/autocomplete';
 import { OutCommand, SearchSystemItem } from '@/hooks/Mapper/types';
-import { SystemViewStandalone, WHClassView, WHEffectView } from '@/hooks/Mapper/components/ui-kit';
+import { SystemViewStandalone, WdButton, WHClassView, WHEffectView } from '@/hooks/Mapper/components/ui-kit';
 import classes from './AddSystemDialog.module.scss';
 
 import clsx from 'clsx';
@@ -34,6 +33,7 @@ export const AddSystemDialog = ({
     data: { wormholesData },
   } = useMapRootState();
 
+  // TODO fix it
   const inputRef = useRef<any>();
   const onShow = useCallback(() => {
     inputRef.current?.focus();
@@ -62,6 +62,7 @@ export const AddSystemDialog = ({
             },
           });
 
+          // TODO fix it
           let prepared = (result.systems as SearchSystemItem[]).sort((a, b) => {
             const amatch = a.label.indexOf(query);
             const bmatch = b.label.indexOf(query);
@@ -189,7 +190,7 @@ export const AddSystemDialog = ({
         </div>
 
         <div className="flex gap-2 justify-end">
-          <Button
+          <WdButton
             onClick={handleSubmit}
             outlined
             disabled={!selectedItem || selectedItem.length !== 1}
diff --git a/assets/js/hooks/Mapper/components/mapInterface/components/PingsInterface/PingsInterface.tsx b/assets/js/hooks/Mapper/components/mapInterface/components/PingsInterface/PingsInterface.tsx
index 48760525..1b14ba55 100644
--- a/assets/js/hooks/Mapper/components/mapInterface/components/PingsInterface/PingsInterface.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/components/PingsInterface/PingsInterface.tsx
@@ -4,6 +4,7 @@ import {
   SystemView,
   TimeAgo,
   TooltipPosition,
+  WdButton,
   WdImgButton,
   WdImgButtonTooltip,
 } from '@/hooks/Mapper/components/ui-kit';
@@ -13,7 +14,6 @@ import { PingsPlacement } from '@/hooks/Mapper/mapRootProvider/types.ts';
 import { Commands, OutCommand, PingType } from '@/hooks/Mapper/types';
 import clsx from 'clsx';
 import { PrimeIcons } from 'primereact/api';
-import { Button } from 'primereact/button';
 import { ConfirmPopup } from 'primereact/confirmpopup';
 import { Toast } from 'primereact/toast';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
@@ -256,7 +256,7 @@ export const PingsInterface = ({ hasLeftOffset }: PingsInterfaceProps) => {
         )}
       ></Toast>
 
-      <Button
+      <WdButton
         icon="pi pi-bell"
         severity="warning"
         aria-label="Notification"
diff --git a/assets/js/hooks/Mapper/components/mapInterface/components/SystemCustomLabelDialog/SystemCustomLabelDialog.tsx b/assets/js/hooks/Mapper/components/mapInterface/components/SystemCustomLabelDialog/SystemCustomLabelDialog.tsx
index 5a137842..bd206e9a 100644
--- a/assets/js/hooks/Mapper/components/mapInterface/components/SystemCustomLabelDialog/SystemCustomLabelDialog.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/components/SystemCustomLabelDialog/SystemCustomLabelDialog.tsx
@@ -3,11 +3,10 @@ import { Dialog } from 'primereact/dialog';
 import { getSystemById } from '@/hooks/Mapper/helpers';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Button } from 'primereact/button';
 import { OutCommand } from '@/hooks/Mapper/types';
 import { IconField } from 'primereact/iconfield';
 import { LabelsManager } from '@/hooks/Mapper/utils/labelsManager.ts';
-import { WdImageSize, WdImgButton, TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
+import { TooltipPosition, WdButton, WdImageSize, WdImgButton } from '@/hooks/Mapper/components/ui-kit';
 
 interface SystemCustomLabelDialog {
   systemId: string;
@@ -126,7 +125,7 @@ export const SystemCustomLabelDialog = ({ systemId, visible, setVisible }: Syste
           </div>
 
           <div className="flex gap-2 justify-end">
-            <Button onClick={handleSave} outlined size="small" label="Save"></Button>
+            <WdButton onClick={handleSave} outlined size="small" label="Save"></WdButton>
           </div>
         </div>
       </form>
diff --git a/assets/js/hooks/Mapper/components/mapInterface/components/SystemPingDialog/SystemPingDialog.tsx b/assets/js/hooks/Mapper/components/mapInterface/components/SystemPingDialog/SystemPingDialog.tsx
index b14e74a1..19d6fdea 100644
--- a/assets/js/hooks/Mapper/components/mapInterface/components/SystemPingDialog/SystemPingDialog.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/components/SystemPingDialog/SystemPingDialog.tsx
@@ -2,10 +2,9 @@ import { InputTextarea } from 'primereact/inputtextarea';
 import { Dialog } from 'primereact/dialog';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { useCallback, useRef, useState } from 'react';
-import { Button } from 'primereact/button';
 import { OutCommand } from '@/hooks/Mapper/types';
 import { PingType } from '@/hooks/Mapper/types/ping.ts';
-import { SystemView } from '@/hooks/Mapper/components/ui-kit';
+import { SystemView, WdButton } from '@/hooks/Mapper/components/ui-kit';
 import clsx from 'clsx';
 
 const PING_TITLES = {
@@ -92,7 +91,7 @@ export const SystemPingDialog = ({ systemId, type, visible, setVisible }: System
           </div>
 
           <div className="flex gap-2 justify-end">
-            <Button onClick={handleSave} size="small" severity="danger" label="Ping!"></Button>
+            <WdButton onClick={handleSave} size="small" severity="danger" label="Ping!" />
           </div>
         </div>
       </form>
diff --git a/assets/js/hooks/Mapper/components/mapInterface/components/SystemSettingsDialog/SystemSettingsDialog.tsx b/assets/js/hooks/Mapper/components/mapInterface/components/SystemSettingsDialog/SystemSettingsDialog.tsx
index 2b2faf00..b6a7cc42 100644
--- a/assets/js/hooks/Mapper/components/mapInterface/components/SystemSettingsDialog/SystemSettingsDialog.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/components/SystemSettingsDialog/SystemSettingsDialog.tsx
@@ -5,10 +5,9 @@ import { getSystemById } from '@/hooks/Mapper/helpers';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { useMapGetOption } from '@/hooks/Mapper/mapRootProvider/hooks/api';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Button } from 'primereact/button';
 import { OutCommand } from '@/hooks/Mapper/types';
 import { IconField } from 'primereact/iconfield';
-import { TooltipPosition, WdImageSize, WdImgButton } from '@/hooks/Mapper/components/ui-kit';
+import { TooltipPosition, WdButton, WdImageSize, WdImgButton } from '@/hooks/Mapper/components/ui-kit';
 import { LabelsManager } from '@/hooks/Mapper/utils/labelsManager.ts';
 import { getSystemStaticInfo } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic';
 
@@ -226,7 +225,7 @@ export const SystemSettingsDialog = ({ systemId, visible, setVisible }: SystemSe
           </div>
 
           <div className="flex gap-2 justify-end">
-            <Button onClick={handleSave} outlined size="small" label="Save"></Button>
+            <WdButton onClick={handleSave} outlined size="small" label="Save" />
           </div>
         </div>
       </form>
diff --git a/assets/js/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesSettingsDialog/RoutesSettingsDialog.tsx b/assets/js/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesSettingsDialog/RoutesSettingsDialog.tsx
index 412691c0..2cd4ef2e 100644
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesSettingsDialog/RoutesSettingsDialog.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesSettingsDialog/RoutesSettingsDialog.tsx
@@ -1,11 +1,9 @@
 import { Dialog } from 'primereact/dialog';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Button } from 'primereact/button';
-import {
-  RoutesType,
-  useRouteProvider,
-} from '@/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesProvider.tsx';
+import { useRouteProvider } from '@/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesProvider.tsx';
 import { PrettySwitchbox } from '@/hooks/Mapper/components/mapRootContent/components/MapSettings/components';
+import { WdButton } from '@/hooks/Mapper/components/ui-kit';
+import { RoutesType } from '@/hooks/Mapper/mapRootProvider/types.ts';
 
 interface RoutesSettingsDialog {
   visible: boolean;
@@ -83,7 +81,7 @@ export const RoutesSettingsDialog = ({ visible, setVisible }: RoutesSettingsDial
         </div>
 
         <div className="flex gap-2 justify-end">
-          <Button onClick={handleSave} outlined size="small" label="Apply"></Button>
+          <WdButton onClick={handleSave} outlined size="small" label="Apply"></WdButton>
         </div>
       </div>
     </Dialog>
diff --git a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog/SystemSignatureSettingsDialog.tsx b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog/SystemSignatureSettingsDialog.tsx
index 782fdbdc..6c841420 100644
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog/SystemSignatureSettingsDialog.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog/SystemSignatureSettingsDialog.tsx
@@ -1,6 +1,5 @@
 import { Dialog } from 'primereact/dialog';
 import { useCallback, useState } from 'react';
-import { Button } from 'primereact/button';
 import { TabPanel, TabView } from 'primereact/tabview';
 import { PrettySwitchbox } from '@/hooks/Mapper/components/mapRootContent/components/MapSettings/components';
 import { Dropdown } from 'primereact/dropdown';
@@ -10,6 +9,7 @@ import {
   SIGNATURE_SETTINGS,
 } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
 import { SignatureSettingsType } from '@/hooks/Mapper/constants/signatures.ts';
+import { WdButton } from '@/hooks/Mapper/components/ui-kit';
 
 interface SystemSignatureSettingsDialogProps {
   settings: SignatureSettingsType;
@@ -92,7 +92,7 @@ export const SystemSignatureSettingsDialog = ({
         </div>
 
         <div className="flex gap-2 justify-end">
-          <Button onClick={handleSave} outlined size="small" label="Save"></Button>
+          <WdButton onClick={handleSave} outlined size="small" label="Save" />
         </div>
       </div>
     </Dialog>
diff --git a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemStructures/SystemStructuresDialog/SystemStructuresDialog.tsx b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemStructures/SystemStructuresDialog/SystemStructuresDialog.tsx
index 81f334b4..597ba637 100644
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemStructures/SystemStructuresDialog/SystemStructuresDialog.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/SystemStructures/SystemStructuresDialog/SystemStructuresDialog.tsx
@@ -1,13 +1,13 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Dialog } from 'primereact/dialog';
-import { Button } from 'primereact/button';
 import { AutoComplete } from 'primereact/autocomplete';
 import { Calendar } from 'primereact/calendar';
 import clsx from 'clsx';
 
-import { StructureItem, StructureStatus, statusesRequiringTimer, formatToISO } from '../helpers';
+import { formatToISO, statusesRequiringTimer, StructureItem, StructureStatus } from '../helpers';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { OutCommand } from '@/hooks/Mapper/types';
+import { WdButton } from '@/hooks/Mapper/components/ui-kit';
 
 interface StructuresEditDialogProps {
   visible: boolean;
@@ -54,14 +54,13 @@ export const SystemStructuresDialog: React.FC<StructuresEditDialogProps> = ({
 
       // If user typed more text but we have partial match in prevResults
       if (newQuery.startsWith(prevQuery) && prevResults.length > 0) {
-        const filtered = prevResults.filter(item =>
-          item.label.toLowerCase().includes(newQuery.toLowerCase()),
-        );
+        const filtered = prevResults.filter(item => item.label.toLowerCase().includes(newQuery.toLowerCase()));
         setOwnerSuggestions(filtered);
         return;
       }
 
       try {
+        // TODO fix it
         const { results = [] } = await outCommand({
           type: OutCommand.getCorporationNames,
           data: { search: newQuery },
@@ -96,9 +95,7 @@ export const SystemStructuresDialog: React.FC<StructuresEditDialogProps> = ({
   // when user picks a corp from auto-complete
   const handleSelectOwner = (selected: { label: string; value: string }) => {
     setOwnerInput(selected.label);
-    setEditData(prev =>
-      prev ? { ...prev, ownerName: selected.label, ownerId: selected.value } : null,
-    );
+    setEditData(prev => (prev ? { ...prev, ownerName: selected.label, ownerId: selected.value } : null));
   };
 
   const handleStatusChange = (val: string) => {
@@ -125,6 +122,7 @@ export const SystemStructuresDialog: React.FC<StructuresEditDialogProps> = ({
     // fetch corporation ticker if we have an ownerId
     if (editData.ownerId) {
       try {
+        // TODO fix it
         const { ticker } = await outCommand({
           type: OutCommand.getCorporationTicker,
           data: { corp_id: editData.ownerId },
@@ -157,11 +155,7 @@ export const SystemStructuresDialog: React.FC<StructuresEditDialogProps> = ({
       <div className="flex flex-col gap-2 text-[14px]">
         <label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center">
           <span>Type:</span>
-          <input
-            readOnly
-            className="p-inputtext p-component cursor-not-allowed"
-            value={editData.structureType ?? ''}
-          />
+          <input readOnly className="p-inputtext p-component cursor-not-allowed" value={editData.structureType ?? ''} />
         </label>
         <label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center">
           <span>Name:</span>
@@ -204,10 +198,12 @@ export const SystemStructuresDialog: React.FC<StructuresEditDialogProps> = ({
 
         {statusesRequiringTimer.includes(editData.status) && (
           <label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center">
-            <span>Timer <br /> (Eve Time):</span>
+            <span>
+              Timer <br /> (Eve Time):
+            </span>
             <Calendar
               value={editData.endTime ? new Date(editData.endTime) : undefined}
-              onChange={(e) => handleChange('endTime', e.value ?? '')}
+              onChange={e => handleChange('endTime', e.value ?? '')}
               showTime
               hourFormat="24"
               dateFormat="yy-mm-dd"
@@ -227,8 +223,8 @@ export const SystemStructuresDialog: React.FC<StructuresEditDialogProps> = ({
       </div>
 
       <div className="flex justify-end items-center gap-2 mt-4">
-        <Button label="Delete" severity="danger" className="p-button-sm" onClick={handleDeleteClick} />
-        <Button label="Save" className="p-button-sm" onClick={handleSaveClick} />
+        <WdButton label="Delete" severity="danger" className="p-button-sm" onClick={handleDeleteClick} />
+        <WdButton label="Save" className="p-button-sm" onClick={handleSaveClick} />
       </div>
     </Dialog>
   );
diff --git a/assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/components/SystemKillsSettingsDialog.tsx b/assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/components/SystemKillsSettingsDialog.tsx
index 3eea5fb9..3275a9ac 100644
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/components/SystemKillsSettingsDialog.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/WSystemKills/components/SystemKillsSettingsDialog.tsx
@@ -1,13 +1,11 @@
 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 { SystemView, TooltipPosition, WdButton, WdImgButton } from '@/hooks/Mapper/components/ui-kit';
 import { PrimeIcons } from 'primereact/api';
 import {
   AddSystemDialog,
   SearchOnSubmitCallback,
 } from '@/hooks/Mapper/components/mapInterface/components/AddSystemDialog';
-import { SystemView, TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 
 interface KillsSettingsDialogProps {
@@ -158,7 +156,7 @@ export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visibl
         </div>
 
         <div className="flex gap-2 justify-end mt-4">
-          <Button onClick={handleApply} label="Apply" outlined size="small" />
+          <WdButton onClick={handleApply} label="Apply" outlined size="small" />
         </div>
       </div>
 
diff --git a/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/components/AdminSettings.tsx b/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/components/AdminSettings.tsx
index ab60c5fb..93bb6ce0 100644
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/components/AdminSettings.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/components/AdminSettings.tsx
@@ -1,7 +1,6 @@
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Toast } from 'primereact/toast';
-import { Button } from 'primereact/button';
 import { callToastError, callToastSuccess, callToastWarn } from '@/hooks/Mapper/helpers';
 import { OutCommand } from '@/hooks/Mapper/types';
 import { ConfirmPopup } from 'primereact/confirmpopup';
@@ -10,6 +9,7 @@ import { MapUserSettings, RemoteAdminSettingsResponse } from '@/hooks/Mapper/map
 import { parseMapUserSettings } from '@/hooks/Mapper/components/helpers';
 import fastDeepEqual from 'fast-deep-equal';
 import { useDetectSettingsChanged } from '@/hooks/Mapper/components/hooks';
+import { WdButton } from '@/hooks/Mapper/components/ui-kit';
 
 export const AdminSettings = () => {
   const {
@@ -92,7 +92,7 @@ export const AdminSettings = () => {
     <div className="w-full h-full flex flex-col gap-5">
       <div className="flex flex-col gap-1">
         <div>
-          <Button
+          <WdButton
             // @ts-ignore
             ref={cfRef}
             onClick={cfShow}
diff --git a/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/components/CommonSettings.tsx b/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/components/CommonSettings.tsx
index 74a51761..de7fa746 100644
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/components/CommonSettings.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/components/CommonSettings.tsx
@@ -7,8 +7,7 @@ import {
 import { useMapSettings } from '@/hooks/Mapper/components/mapRootContent/components/MapSettings/MapSettingsProvider.tsx';
 import { SettingsListItem } from '@/hooks/Mapper/components/mapRootContent/components/MapSettings/types.ts';
 import { useCallback } from 'react';
-import { Button } from 'primereact/button';
-import { TooltipPosition, WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit';
+import { TooltipPosition, WdButton, WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit';
 import { ConfirmPopup } from 'primereact/confirmpopup';
 import { useConfirmPopup } from '@/hooks/Mapper/hooks';
 
@@ -42,7 +41,7 @@ export const CommonSettings = () => {
       <div className="grid grid-cols-[1fr_auto]">
         <div />
         <WdTooltipWrapper content="This dangerous action. And can not be undone" position={TooltipPosition.top}>
-          <Button
+          <WdButton
             // @ts-ignore
             ref={cfRef}
             className="py-[4px]"
diff --git a/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/components/DefaultSettings.tsx b/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/components/DefaultSettings.tsx
index b554a48f..a454270d 100644
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/components/DefaultSettings.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/components/DefaultSettings.tsx
@@ -1,10 +1,10 @@
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { useCallback, useRef, useState } from 'react';
 import { Toast } from 'primereact/toast';
-import { Button } from 'primereact/button';
 import { OutCommand } from '@/hooks/Mapper/types';
 import { Divider } from 'primereact/divider';
 import { callToastError, callToastSuccess, callToastWarn } from '@/hooks/Mapper/helpers';
+import { WdButton } from '@/hooks/Mapper/components/ui-kit';
 
 type SaveDefaultSettingsReturn = { success: boolean; error: string };
 
@@ -65,7 +65,7 @@ export const DefaultSettings = () => {
 
         <div className="flex flex-col gap-1">
           <div>
-            <Button
+            <WdButton
               onClick={handleSaveAsDefault}
               icon="pi pi-save"
               size="small"
diff --git a/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/components/ServerSettings.tsx b/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/components/ServerSettings.tsx
index b1ea9182..40931f21 100644
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/components/ServerSettings.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/components/ServerSettings.tsx
@@ -2,13 +2,13 @@ import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Toast } from 'primereact/toast';
 import { parseMapUserSettings } from '@/hooks/Mapper/components/helpers';
-import { Button } from 'primereact/button';
 import { OutCommand } from '@/hooks/Mapper/types';
 import { createDefaultWidgetSettings } from '@/hooks/Mapper/mapRootProvider/helpers/createDefaultWidgetSettings.ts';
 import { callToastSuccess } from '@/hooks/Mapper/helpers';
 import { ConfirmPopup } from 'primereact/confirmpopup';
 import { useConfirmPopup } from '@/hooks/Mapper/hooks';
 import { RemoteAdminSettingsResponse } from '@/hooks/Mapper/mapRootProvider/types.ts';
+import { WdButton } from '@/hooks/Mapper/components/ui-kit';
 
 export const ServerSettings = () => {
   const {
@@ -64,7 +64,7 @@ export const ServerSettings = () => {
     <div className="w-full h-full flex flex-col gap-5">
       <div className="flex flex-col gap-1">
         <div>
-          <Button
+          <WdButton
             // @ts-ignore
             ref={cfRef}
             onClick={cfShow}
diff --git a/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/components/WidgetsSettings.tsx b/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/components/WidgetsSettings.tsx
index ac6151c9..02f1d0cf 100644
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/components/WidgetsSettings.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/components/WidgetsSettings.tsx
@@ -2,8 +2,7 @@ import { PrettySwitchbox } from '@/hooks/Mapper/components/mapRootContent/compon
 import { WIDGETS_CHECKBOXES_PROPS, WidgetsIds } from '@/hooks/Mapper/components/mapInterface/constants.tsx';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { useCallback } from 'react';
-
-import { Button } from 'primereact/button';
+import { WdButton } from '@/hooks/Mapper/components/ui-kit';
 
 export interface WidgetsSettingsProps {}
 
@@ -33,7 +32,7 @@ export const WidgetsSettings = ({}: WidgetsSettingsProps) => {
 
       <div className="grid grid-cols-[1fr_auto]">
         <div />
-        <Button className="py-[4px]" onClick={resetWidgets} outlined size="small" label="Reset Widgets"></Button>
+        <WdButton className="py-[4px]" onClick={resetWidgets} outlined size="small" label="Reset Widgets" />
       </div>
     </div>
   );
diff --git a/assets/js/hooks/Mapper/components/mapRootContent/components/OldSettingsDialog.tsx b/assets/js/hooks/Mapper/components/mapRootContent/components/OldSettingsDialog.tsx
index e886c653..7fdfc14c 100644
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/OldSettingsDialog.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/OldSettingsDialog.tsx
@@ -11,11 +11,11 @@ import {
 } from '@/hooks/Mapper/mapRootProvider/constants.ts';
 import { MapUserSettings } from '@/hooks/Mapper/mapRootProvider/types.ts';
 import { saveTextFile } from '@/hooks/Mapper/utils';
-import { Button } from 'primereact/button';
 import { ConfirmPopup } from 'primereact/confirmpopup';
 import { Dialog } from 'primereact/dialog';
 import { Toast } from 'primereact/toast';
 import { useCallback, useRef } from 'react';
+import { WdButton } from '@/hooks/Mapper/components/ui-kit';
 
 const createSettings = function <T>(lsSettings: string | null, defaultValues: T) {
   return {
@@ -139,7 +139,7 @@ export const OldSettingsDialog = () => {
         className="w-[640px] h-[400px] text-text-color min-h-0"
         footer={
           <div className="flex items-center justify-end">
-            <Button
+            <WdButton
               // @ts-ignore
               ref={cfRef}
               onClick={cfShow}
@@ -168,7 +168,7 @@ export const OldSettingsDialog = () => {
           <div className="h-[30px]"></div>
 
           <div className="flex items-center gap-3">
-            <Button
+            <WdButton
               onClick={handleExportClipboard}
               icon="pi pi-copy"
               size="small"
@@ -176,7 +176,7 @@ export const OldSettingsDialog = () => {
               label="Export to Clipboard"
             />
 
-            <Button
+            <WdButton
               onClick={handleExportAsFile}
               icon="pi pi-download"
               size="small"
diff --git a/assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/SignatureSettings.tsx b/assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/SignatureSettings.tsx
index eacd9369..0efbd1ad 100644
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/SignatureSettings.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/SignatureSettings.tsx
@@ -1,6 +1,6 @@
 import { Dialog } from 'primereact/dialog';
 import { useCallback, useEffect } from 'react';
-import { OutCommand, SignatureGroup, SystemSignature } from '@/hooks/Mapper/types';
+import { OutCommand, SignatureGroup, SystemSignature, TimeStatus } from '@/hooks/Mapper/types';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 import {
   SignatureGroupContent,
@@ -8,10 +8,14 @@ import {
 } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components';
 import { InputText } from 'primereact/inputtext';
 import { SystemsSettingsProvider } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings/Provider.tsx';
-import { Button } from 'primereact/button';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+import { WdButton } from '@/hooks/Mapper/components/ui-kit';
 
-type SystemSignaturePrepared = Omit<SystemSignature, 'linked_system'> & { linked_system: string };
+type SystemSignaturePrepared = Omit<SystemSignature, 'linked_system'> & {
+  linked_system: string;
+  k162Type: string;
+  time_status: TimeStatus;
+};
 
 export interface MapSettingsProps {
   systemId: string;
@@ -53,10 +57,8 @@ export const SignatureSettings = ({ systemId, show, onHide, signatureData }: Map
           out = {
             ...out,
             custom_info: JSON.stringify({
-              // TODO: need fix
               k162Type: values.k162Type,
-              // TODO: need fix
-              isEOL: values.isEOL,
+              time_status: values.time_status,
             }),
           };
 
@@ -135,18 +137,17 @@ export const SignatureSettings = ({ systemId, show, onHide, signatureData }: Map
     const { linked_system, custom_info, ...rest } = signatureData;
 
     let k162Type = null;
-    let isEOL = false;
+    let time_status = TimeStatus._24h;
     if (custom_info) {
       const customInfo = JSON.parse(custom_info);
       k162Type = customInfo.k162Type;
-      isEOL = customInfo.isEOL;
+      time_status = customInfo.time_status;
     }
 
     signatureForm.reset({
       linked_system: linked_system?.solar_system_id.toString() ?? undefined,
-      // TODO: need fix
       k162Type: k162Type,
-      isEOL: isEOL,
+      time_status: time_status,
       ...rest,
     });
   }, [signatureForm, signatureData]);
@@ -156,6 +157,7 @@ export const SignatureSettings = ({ systemId, show, onHide, signatureData }: Map
       header={`Signature Edit [${signatureData?.eve_id}]`}
       visible={show}
       draggable={false}
+      resizable={false}
       style={{ width: '390px' }}
       onShow={handleShow}
       onHide={() => {
@@ -190,8 +192,8 @@ export const SignatureSettings = ({ systemId, show, onHide, signatureData }: Map
                 </label>
               </div>
 
-              <div className="flex gap-2 justify-end">
-                <Button onClick={handleSave} outlined size="small" label="Save"></Button>
+              <div className="flex gap-2 justify-end px-[0.75rem] pb-[0.5rem]">
+                <WdButton type="submit" outlined size="small" label="Save" />
               </div>
             </div>
           </form>
diff --git a/assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureEOLCheckbox/SignatureEOLCheckbox.tsx b/assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureEOLCheckbox/SignatureEOLCheckbox.tsx
deleted file mode 100644
index add3286f..00000000
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureEOLCheckbox/SignatureEOLCheckbox.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { InputSwitch } from 'primereact/inputswitch';
-import { Controller, useFormContext } from 'react-hook-form';
-import { SystemSignature } from '@/hooks/Mapper/types';
-
-export interface SignatureEOLCheckboxProps {
-  name: string;
-  defaultValue?: boolean;
-}
-
-export const SignatureEOLCheckbox = ({ name, defaultValue = false }: SignatureEOLCheckboxProps) => {
-  const { control } = useFormContext<SystemSignature>();
-
-  return (
-    <Controller
-      // @ts-ignore
-      name={name}
-      control={control}
-      defaultValue={defaultValue}
-      render={({ field }) => {
-        return <InputSwitch className="my-1" checked={!!field.value} onChange={e => field.onChange(e.value)} />;
-      }}
-    />
-  );
-};
diff --git a/assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureEOLCheckbox/index.ts b/assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureEOLCheckbox/index.ts
deleted file mode 100644
index e5af02cd..00000000
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureEOLCheckbox/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './SignatureEOLCheckbox.tsx';
diff --git a/assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureGroupContentWormholes.tsx b/assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureGroupContentWormholes.tsx
index 1590cfb8..0109832c 100644
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureGroupContentWormholes.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureGroupContentWormholes.tsx
@@ -3,7 +3,7 @@ import { SystemSignature } from '@/hooks/Mapper/types';
 import { SignatureWormholeTypeSelect } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureWormholeTypeSelect';
 import { SignatureK162TypeSelect } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureK162TypeSelect';
 import { SignatureLeadsToSelect } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureLeadsToSelect';
-import { SignatureEOLCheckbox } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureEOLCheckbox';
+import { SignatureLifetimeSelect } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureLifetimeSelect.tsx';
 import { SignatureTempName } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureTempName.tsx';
 
 export const SignatureGroupContentWormholes = () => {
@@ -29,10 +29,10 @@ export const SignatureGroupContentWormholes = () => {
         <SignatureLeadsToSelect name="linked_system" />
       </label>
 
-      <label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center text-[14px]">
-        <span>EOL:</span>
-        <SignatureEOLCheckbox name="isEOL" />
-      </label>
+      <div className="grid grid-cols-[100px_250px_1fr] gap-2 items-center text-[14px]">
+        <span>Lifetime:</span>
+        <SignatureLifetimeSelect name="time_status" />
+      </div>
 
       <label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center text-[14px]">
         <span>Temp. Name:</span>
diff --git a/assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureLifetimeSelect.tsx b/assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureLifetimeSelect.tsx
new file mode 100644
index 00000000..8367568b
--- /dev/null
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureLifetimeSelect.tsx
@@ -0,0 +1,27 @@
+import { Controller, useFormContext } from 'react-hook-form';
+import { SystemSignature } from '@/hooks/Mapper/types';
+import { WdLifetimeSelector } from '@/hooks/Mapper/components/ui-kit/WdLifetimeSelector.tsx';
+
+export interface SignatureEOLCheckboxProps {
+  name: string;
+  defaultValue?: boolean;
+}
+
+export const SignatureLifetimeSelect = ({ name, defaultValue = false }: SignatureEOLCheckboxProps) => {
+  const { control } = useFormContext<SystemSignature>();
+
+  return (
+    <div className="my-1">
+      <Controller
+        // @ts-ignore
+        name={name}
+        control={control}
+        defaultValue={defaultValue}
+        render={({ field }) => {
+          // @ts-ignore
+          return <WdLifetimeSelector lifetime={field.value} onChangeLifetime={e => field.onChange(e)} />;
+        }}
+      />
+    </div>
+  );
+};
diff --git a/assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/index.ts b/assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/index.ts
index f06487f6..a8c209ab 100644
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/index.ts
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/index.ts
@@ -1,3 +1,4 @@
 export * from './SignatureGroupSelect';
 export * from './SignatureGroupContent';
 export * from './SignatureK162TypeSelect';
+export * from './SignatureLifetimeSelect';
diff --git a/assets/js/hooks/Mapper/components/ui-kit/WdButton.tsx b/assets/js/hooks/Mapper/components/ui-kit/WdButton.tsx
new file mode 100644
index 00000000..56b78f01
--- /dev/null
+++ b/assets/js/hooks/Mapper/components/ui-kit/WdButton.tsx
@@ -0,0 +1,7 @@
+// eslint-disable-next-line no-restricted-imports
+import { Button, ButtonProps } from 'primereact/button';
+
+export const WdButton = ({ type = 'button', ...props }: ButtonProps) => {
+  // eslint-disable-next-line react/forbid-elements
+  return <Button {...props} type={type} />;
+};
diff --git a/assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/LifetimeActions.tsx b/assets/js/hooks/Mapper/components/ui-kit/WdLifetimeSelector.tsx
similarity index 54%
rename from assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/LifetimeActions.tsx
rename to assets/js/hooks/Mapper/components/ui-kit/WdLifetimeSelector.tsx
index e345dfe5..b4190330 100644
--- a/assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/LifetimeActions.tsx
+++ b/assets/js/hooks/Mapper/components/ui-kit/WdLifetimeSelector.tsx
@@ -1,7 +1,7 @@
-import { LayoutEventBlocker } from '@/hooks/Mapper/components/ui-kit';
-import { Button } from 'primereact/button';
 import clsx from 'clsx';
 import { TimeStatus } from '@/hooks/Mapper/types';
+import { WdButton } from '@/hooks/Mapper/components/ui-kit/WdButton.tsx';
+import { BUILT_IN_TOOLTIP_OPTIONS } from './constants.ts';
 
 const LIFE_TIME = [
   {
@@ -9,58 +9,74 @@ const LIFE_TIME = [
     label: '1H',
     className: 'bg-purple-400 hover:!bg-purple-400',
     inactiveClassName: 'bg-purple-400/30',
+    description: 'Less than one 1 hours remaining',
   },
   {
     id: TimeStatus._4h,
     label: '4H',
     className: 'bg-purple-300 hover:!bg-purple-300',
     inactiveClassName: 'bg-purple-300/30',
+    description: 'Less than one 4 hours remaining',
   },
   {
     id: TimeStatus._4h30m,
     label: '4.5H',
     className: 'bg-indigo-300 hover:!bg-indigo-300',
     inactiveClassName: 'bg-indigo-300/30',
+    description: 'Less than one 4.5 hours remaining. All small holes have such lifetime.',
   },
+  // TODO: we will skip it.
+  // {
+  //   id: TimeStatus._12h,
+  //   label: '12H',
+  //   className: 'bg-orange-300 hover:!bg-orange-300',
+  //   inactiveClassName: 'bg-orange-400/30',
+  //   description: 'Less than one 12 hours remaining. C729 hole have such lifetime.',
+  // },
   {
-    id: TimeStatus._8h,
+    id: TimeStatus._16h,
     label: '16H',
     className: 'bg-orange-300 hover:!bg-orange-300',
     inactiveClassName: 'bg-orange-400/30',
-  },
-  {
-    id: TimeStatus._16h,
-    label: '24H',
-    className: 'bg-orange-300 hover:!bg-orange-300',
-    inactiveClassName: 'bg-orange-400/30',
+    description: 'Less than one 16 hours remaining',
   },
   {
     id: TimeStatus._24h,
+    label: '24H',
+    className: 'bg-orange-300 hover:!bg-orange-300',
+    inactiveClassName: 'bg-orange-400/30',
+    description: 'Less than one 24 hours remaining',
+  },
+  {
+    id: TimeStatus._48h,
     label: '48H',
     className: 'bg-orange-300 hover:!bg-orange-300',
     inactiveClassName: 'bg-orange-400/30',
+    description: 'Less than one 24 hours remaining. Related only with C6. B041, B520, U319, C391.',
   },
 ];
 
-// const active = 1;
-
-interface LifetimeActionsProps {
+export interface WdLifetimeSelectorProps {
   lifetime?: TimeStatus;
   onChangeLifetime(lifetime: TimeStatus): void;
+  className?: string;
 }
 
-export const LifetimeActions = ({ lifetime = TimeStatus._24h, onChangeLifetime }: LifetimeActionsProps) => {
+export const WdLifetimeSelector = ({
+  lifetime = TimeStatus._24h,
+  onChangeLifetime,
+  className,
+}: WdLifetimeSelectorProps) => {
   return (
-    <LayoutEventBlocker className="flex flex-col gap-1 w-[100%] h-full px-2 pt-[4px]">
-      <div className="text-[12px] text-stone-500 font-semibold">Life time:</div>
-
-      <div className="grid grid-cols-[1fr_1fr_1fr_1fr_1fr_1fr] gap-1">
+    <form>
+      <div className={clsx('grid grid-cols-[1fr_1fr_1fr_1fr_1fr_1fr] gap-1', className)}>
         {LIFE_TIME.map(x => (
-          <Button
-            outlined={false}
-            // severity="help"
+          <WdButton
             key={x.id}
+            outlined={false}
             value={x.label}
+            tooltip={x.description}
+            tooltipOptions={BUILT_IN_TOOLTIP_OPTIONS}
             size="small"
             className={clsx(
               `py-[1px] justify-center min-w-auto w-auto border-0 text-[12px] font-bold leading-[20px]`,
@@ -68,12 +84,11 @@ export const LifetimeActions = ({ lifetime = TimeStatus._24h, onChangeLifetime }
               x.className,
             )}
             onClick={() => onChangeLifetime(x.id)}
-            // onClick={() => system?.tag !== x && onSystemTag(x)}
           >
             {x.label}
-          </Button>
+          </WdButton>
         ))}
       </div>
-    </LayoutEventBlocker>
+    </form>
   );
 };
diff --git a/assets/js/hooks/Mapper/components/ui-kit/constants.ts b/assets/js/hooks/Mapper/components/ui-kit/constants.ts
new file mode 100644
index 00000000..7bf785b7
--- /dev/null
+++ b/assets/js/hooks/Mapper/components/ui-kit/constants.ts
@@ -0,0 +1,6 @@
+export const BUILT_IN_TOOLTIP_OPTIONS = {
+  mouseTrack: true,
+  mouseTrackLeft: 10,
+  className:
+    'rounded-[3px] bg-stone-900/90 px-1 py-1 [&_.p-tooltip-text]:!text-stone-300 text-[13px] [&_.p-tooltip-text]:!p-1',
+};
diff --git a/assets/js/hooks/Mapper/components/ui-kit/index.ts b/assets/js/hooks/Mapper/components/ui-kit/index.ts
index 6c70ff28..b470a3fb 100644
--- a/assets/js/hooks/Mapper/components/ui-kit/index.ts
+++ b/assets/js/hooks/Mapper/components/ui-kit/index.ts
@@ -21,3 +21,5 @@ export * from './LoadingWrapper';
 export * from './WdMenuItem';
 export * from './MenuItemWithInfo';
 export * from './MarkdownTextViewer.tsx';
+export * from './WdButton.tsx';
+export * from './constants.ts';
diff --git a/assets/js/hooks/Mapper/types/connection.ts b/assets/js/hooks/Mapper/types/connection.ts
index 47deae75..287cf8c0 100644
--- a/assets/js/hooks/Mapper/types/connection.ts
+++ b/assets/js/hooks/Mapper/types/connection.ts
@@ -14,8 +14,8 @@ export enum TimeStatus {
   _1h,
   _4h,
   _4h30m,
-  _8h,
   _16h,
+  _12h,
   _24h,
   _48h,
 }