From 5ccfa9bca8f5a07fc2a8ff701e999d68ace3e021 Mon Sep 17 00:00:00 2001 From: saridsa2 Date: Sat, 21 Mar 2026 12:24:54 +0530 Subject: [PATCH] refactor: patients page icon-only actions, remove Patients from CC agent nav - Replace text buttons with icon-only (eye, SMS, WhatsApp, call) - Remove Patients tab from CC agent sidebar (CC works with leads, not patients) - Fix icon wrapper prop forwarding cleanup Co-Authored-By: Claude Opus 4.6 (1M context) --- .../call-desk/click-to-call-button.tsx | 2 +- src/components/layout/sidebar.tsx | 1 - src/pages/patients.tsx | 45 +++++++++++++------ src/styles/globals.css | 6 +-- src/styles/theme.css | 8 ++-- 5 files changed, 38 insertions(+), 24 deletions(-) diff --git a/src/components/call-desk/click-to-call-button.tsx b/src/components/call-desk/click-to-call-button.tsx index a081e1e..3c8904d 100644 --- a/src/components/call-desk/click-to-call-button.tsx +++ b/src/components/call-desk/click-to-call-button.tsx @@ -4,7 +4,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faPhone } from '@fortawesome/pro-duotone-svg-icons'; import { useSetAtom } from 'jotai'; -const Phone01: FC<{ className?: string }> = ({ className }) => ; +const Phone01: FC<{ className?: string } & Record> = ({ className, ...rest }) => ; import { Button } from '@/components/base/buttons/button'; import { useSip } from '@/providers/sip-provider'; import { sipCallStateAtom, sipCallerNumberAtom, sipCallUcidAtom } from '@/state/sip-state'; diff --git a/src/components/layout/sidebar.tsx b/src/components/layout/sidebar.tsx index 6e5aa4c..2eff330 100644 --- a/src/components/layout/sidebar.tsx +++ b/src/components/layout/sidebar.tsx @@ -65,7 +65,6 @@ const getNavSections = (role: string): NavSection[] => { return [ { label: 'Call Center', items: [ { label: 'Call Desk', href: '/', icon: IconPhone }, - { label: 'Patients', href: '/patients', icon: IconHospitalUser }, { label: 'Call History', href: '/call-history', icon: IconClockRewind }, ]}, ]; diff --git a/src/pages/patients.tsx b/src/pages/patients.tsx index 63e7396..aa9a688 100644 --- a/src/pages/patients.tsx +++ b/src/pages/patients.tsx @@ -1,13 +1,13 @@ import { useMemo, useState } from 'react'; import { useNavigate } from 'react-router'; -import type { FC } from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faUser, faMagnifyingGlass } from '@fortawesome/pro-duotone-svg-icons'; +import { faUser, faMagnifyingGlass, faEye, faCommentDots, faMessageDots } from '@fortawesome/pro-duotone-svg-icons'; +import { faIcon } from '@/lib/icon-wrapper'; -const SearchLg: FC<{ className?: string }> = ({ className }) => ; +const SearchLg = faIcon(faMagnifyingGlass); import { Avatar } from '@/components/base/avatar/avatar'; import { Badge } from '@/components/base/badges/badges'; -import { Button } from '@/components/base/buttons/button'; +// Button removed — actions are icon-only now import { Input } from '@/components/base/input/input'; import { Table, TableCard } from '@/components/application/table/table'; import { TopBar } from '@/components/layout/top-bar'; @@ -226,20 +226,37 @@ export const PatientsPage = () => { {/* Actions */} -
+
{phone && ( - + <> + + + + )} - + +
diff --git a/src/styles/globals.css b/src/styles/globals.css index c5bad04..749bd7d 100755 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -29,11 +29,9 @@ transition-timing-function: inherit; } -/* FontAwesome duotone icon colors — uses brand tokens */ +/* FontAwesome duotone — icons inherit color from parent via currentColor. + Secondary layer opacity controls the duotone effect. */ :root { - --fa-primary-color: var(--color-fg-brand-primary); - --fa-secondary-color: var(--color-fg-brand-secondary); - --fa-primary-opacity: 1; --fa-secondary-opacity: 0.4; } diff --git a/src/styles/theme.css b/src/styles/theme.css index 3fbe8aa..9cf83fb 100644 --- a/src/styles/theme.css +++ b/src/styles/theme.css @@ -769,8 +769,8 @@ --color-avatar-styles-bg-neutral: rgb(224 224 224); --color-button-destructive-primary-icon: var(--color-error-300); --color-button-destructive-primary-icon_hover: var(--color-error-200); - --color-button-primary-icon: var(--color-brand-300); - --color-button-primary-icon_hover: var(--color-brand-200); + --color-button-primary-icon: var(--color-white); + --color-button-primary-icon_hover: var(--color-white); --color-featured-icon-light-fg-brand: var(--color-brand-600); --color-featured-icon-light-fg-error: var(--color-error-600); --color-featured-icon-light-fg-gray: var(--color-gray-500); @@ -1190,8 +1190,8 @@ --color-avatar-styles-bg-neutral: rgb(224 224 224 / 1); --color-button-destructive-primary-icon: var(--color-error-300); --color-button-destructive-primary-icon_hover: var(--color-error-200); - --color-button-primary-icon: var(--color-brand-300); - --color-button-primary-icon_hover: var(--color-brand-200); + --color-button-primary-icon: var(--color-white); + --color-button-primary-icon_hover: var(--color-white); --color-featured-icon-light-fg-brand: var(--color-brand-200); --color-featured-icon-light-fg-error: var(--color-error-200); --color-featured-icon-light-fg-gray: var(--color-gray-200);