helix-admin/helix-engage
1
0
Fork 0
mirror of https://dev.azure.com/globalhealthx/EMR/_git/helix-engage synced 2026-04-11 18:28:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: patients page icon-only actions, remove Patients from CC agent nav

Browse Source 
- 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) <noreply@anthropic.com>
This commit is contained in:
saridsa2
2026-03-21 12:24:54 +05:30
parent 631acf63dc
commit 5ccfa9bca8
5 changed files with 38 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/call-desk/click-to-call-button.tsx
View File

@@ -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 }) => <FontAwesomeIcon icon={faPhone} className={className} />;
const Phone01: FC<{ className?: string } & Record<string, any>> = ({ className, ...rest }) => <FontAwesomeIcon icon={faPhone} className={className} {...rest} />;
import { Button } from '@/components/base/buttons/button';
import { useSip } from '@/providers/sip-provider';
import { sipCallStateAtom, sipCallerNumberAtom, sipCallUcidAtom } from '@/state/sip-state';

1
src/components/layout/sidebar.tsx
View File

@@ -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 },
]},
];

45
src/pages/patients.tsx
View File

@@ -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 }) => <FontAwesomeIcon icon={faMagnifyingGlass} className={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 */}
<Table.Cell>
<div className="flex items-center gap-2">
<div className="flex items-center gap-1">
{phone && (
<ClickToCallButton
phoneNumber={phone}
size="sm"
/>
<>
<ClickToCallButton
phoneNumber={phone}
size="sm"
label=""
/>
<button
onClick={() => window.open(`sms:+91${phone}`, '_self')}
title="SMS"
className="flex size-8 items-center justify-center rounded-lg text-fg-quaternary hover:text-fg-brand-secondary hover:bg-primary_hover transition duration-100 ease-linear"
>
<FontAwesomeIcon icon={faCommentDots} className="size-4" />
</button>
<button
onClick={() => window.open(`https://wa.me/91${phone}`, '_blank')}
title="WhatsApp"
className="flex size-8 items-center justify-center rounded-lg text-fg-quaternary hover:text-[#25D366] hover:bg-primary_hover transition duration-100 ease-linear"
>
<FontAwesomeIcon icon={faMessageDots} className="size-4" />
</button>
</>
)}
<Button
size="sm"
color="link-color"
<button
onClick={() => navigate(`/patient/${patient.id}`)}
title="View patient"
className="flex size-8 items-center justify-center rounded-lg text-fg-quaternary hover:text-fg-secondary hover:bg-primary_hover transition duration-100 ease-linear"
>
View
</Button>
<FontAwesomeIcon icon={faEye} className="size-4" />
</button>
</div>
</Table.Cell>
</Table.Row>

6
src/styles/globals.css
View File

@@ -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;
}

8
src/styles/theme.css
View File

@@ -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);