From f76a00acd07c5b1ca566985926b0dbb69ad75b7e Mon Sep 17 00:00:00 2001
From: Antonio <tonyco97.tc@gmail.com>
Date: Thu, 12 Feb 2026 10:52:19 +0100
Subject: [PATCH] fix: better icon for userLastCalls tab

---
 .../Modules/NethVoice/LastCalls/LastCall.tsx  | 67 ++++++++++++-------
 .../NethVoice/LastCalls/LastCallsBox.tsx      |  2 +-
 tailwind.config.js                            |  8 +++
 3 files changed, 52 insertions(+), 25 deletions(-)

diff --git a/src/renderer/src/components/Modules/NethVoice/LastCalls/LastCall.tsx b/src/renderer/src/components/Modules/NethVoice/LastCalls/LastCall.tsx
index 7e8aeb4c..e6ebf2e6 100644
--- a/src/renderer/src/components/Modules/NethVoice/LastCalls/LastCall.tsx
+++ b/src/renderer/src/components/Modules/NethVoice/LastCalls/LastCall.tsx
@@ -2,7 +2,11 @@ import {
   faUserPlus as AddUserIcon,
   faUsers as BadgeIcon,
   faCircleUser,
+  faArrowLeft,
+  faXmark,
+  IconDefinition,
 } from '@fortawesome/free-solid-svg-icons'
+import { faMissed } from '@nethesis/nethesis-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Avatar, Button } from '../../../Nethesis'
 import { NumberCaller } from '../../../NumberCaller'
@@ -16,12 +20,6 @@ import { Badge } from '../../../Nethesis/Badge'
 import { useAccount } from '@renderer/hooks/useAccount'
 import { useNethlinkData } from '@renderer/store'
 import { usePhonebookModule } from '../PhonebookModule/hook/usePhonebookModule'
-import {
-  OutCallAnsweredIcon,
-  OutCallNotAnsweredIcon,
-  InCallAnsweredIcon,
-  InCallNotAnsweredIcon,
-} from '@renderer/icons'
 import classNames from 'classnames'
 
 export interface LastCallProps {
@@ -103,9 +101,7 @@ export function LastCall({
   const isFromQueue = Boolean(call.channel?.includes('from-queue'))
 
   return (
-    <div
-      className='group'
-    >
+    <div className='group'>
       <div
         className={`flex flex-grow gap-3 min-h-[72px] py-6 px-3 ${className}`}
       >
@@ -191,26 +187,49 @@ export function LastCall({
             className='flex flex-row gap-2 items-center'
             data-tooltip-id={`call_${tooltipId}`}
             data-tooltip-content={
-              call.disposition === 'NO ANSWER'
+              call.disposition === 'ANSWERED'
                 ? call.direction === 'in'
-                  ? t('History.Incoming missed')
-                  : t('History.Outgoing missed')
-                : call.direction === 'in'
                   ? t('History.Incoming answered')
                   : t('History.Outgoing answered')
+                : call.direction === 'in'
+                  ? t('History.Incoming missed')
+                  : t('History.Outgoing missed')
             }
           >
-            <div className={`h-4 w-4`}>
-              {call.disposition === 'NO ANSWER' ? (
-                call.direction === 'in' ? (
-                  <InCallNotAnsweredIcon />
-                ) : (
-                  <OutCallNotAnsweredIcon />
-                )
-              ) : call.direction === 'in' ? (
-                <InCallAnsweredIcon />
-              ) : (
-                <OutCallAnsweredIcon />
+            <div>
+              {call.direction === 'in' && (
+                <div>
+                  {call.disposition === 'ANSWERED' ? (
+                    <FontAwesomeIcon
+                      icon={faArrowLeft}
+                      className='-rotate-45 h-4 w-4 text-surfacePresenceOnline dark:text-surfacePresenceOnlineDark'
+                      aria-hidden='true'
+                    />
+                  ) : (
+                    <FontAwesomeIcon
+                      icon={faMissed as IconDefinition}
+                      className='h-4 w-4 text-surfacePresenceBusy dark:text-surfacePresenceBusyDark'
+                      aria-hidden='true'
+                    />
+                  )}
+                </div>
+              )}
+              {call.direction === 'out' && (
+                <div>
+                  {call.disposition === 'ANSWERED' ? (
+                    <FontAwesomeIcon
+                      icon={faArrowLeft}
+                      className='h-4 w-4 rotate-[135deg] text-surfacePresenceOnline dark:text-surfacePresenceOnlineDark'
+                      aria-hidden='true'
+                    />
+                  ) : (
+                    <FontAwesomeIcon
+                      icon={faXmark}
+                      className='h-4 w-4 text-surfacePresenceBusy dark:text-surfacePresenceBusyDark'
+                      aria-hidden='true'
+                    />
+                  )}
+                </div>
               )}
             </div>
             <Tooltip
diff --git a/src/renderer/src/components/Modules/NethVoice/LastCalls/LastCallsBox.tsx b/src/renderer/src/components/Modules/NethVoice/LastCalls/LastCallsBox.tsx
index 2f1a3b47..70e0e11a 100644
--- a/src/renderer/src/components/Modules/NethVoice/LastCalls/LastCallsBox.tsx
+++ b/src/renderer/src/components/Modules/NethVoice/LastCalls/LastCallsBox.tsx
@@ -117,7 +117,7 @@ export function LastCallsBox({ showContactForm }): JSX.Element {
         {preparedCalls ? (
           preparedCalls.length > 0 ? (
             preparedCalls.map((preparedCall, idx) => {
-              const callKey = preparedCall.uniqueid ?? String(idx)
+              const callKey = `${preparedCall?.uniqueid}_${idx}`
               return (
                 <div
                   className='dark:hover:bg-hoverDark hover:bg-hoverLight'
diff --git a/tailwind.config.js b/tailwind.config.js
index 62e3f1e4..a5387b62 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -96,6 +96,14 @@ export default {
         surfaceToastWarningDark: '#7C2D12',
         surfaceToastError: '#FFE4E6',
         surfaceToastErrorDark: '#7F1D1D',
+        surfacePresenceBusy: '#EF4444',
+        surfacePresenceBusyDark: '#EF4444',
+        surfacePresenceOnline: '#22C55E',
+        surfacePresenceOnlineDark: '#22C55E',
+        surfacePresenceDnd: '##030712',
+        surfacePresenceDndDark: '#030712',
+        surfacePresenceOffline: '#6B7280',
+        surfacePresenceOfflineDark: '#6B7280',
       },
       screens: {
         '3xl': '1792px',