From bdabcb2ea434e98b0fe11f7ccc45f9fcf2886341 Mon Sep 17 00:00:00 2001
From: saridsa2 <s.satya.suman@globaluniversityfoundation.com>
Date: Thu, 16 Apr 2026 23:05:32 +0530
Subject: [PATCH] =?UTF-8?q?feat:=20consistent=20UI=20across=20all=20list?=
 =?UTF-8?q?=20pages=20=E2=80=94=20PhoneActionCell,=20custom=20pills,=20eye?=
 =?UTF-8?q?=20icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- PhoneActionCell: kebab always visible (SMS + WhatsApp), Call removed from menu,
  phone number always brand-colored regardless of telephony state
- LeadTable: replaced actions kebab column with eye icon (first column) for
  view activity, phone column now uses PhoneActionCell
- Worklist: React Aria Tabs replaced with custom pill buttons matching All Leads
  pattern (bg-brand-solid on selected), search lifted to call-desk.tsx header
- Appointments: underline tabs replaced with custom pills, phone in patient cell
  uses PhoneActionCell, group/row added to rows
- Patients: removed redundant HamburgerMenu column, group/row on rows
- Call Desk: search input in header row, cleaned up duplicate imports

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../call-desk/phone-action-cell.tsx           | 24 +++-----
 src/components/call-desk/worklist-panel.tsx   | 49 ++++++++--------
 src/components/leads/lead-table.tsx           | 49 +++++++---------
 src/pages/appointments-v2.tsx                 | 26 ++++++---
 src/pages/call-desk.tsx                       | 24 ++++++--
 src/pages/patients.tsx                        | 58 ++-----------------
 6 files changed, 94 insertions(+), 136 deletions(-)

diff --git a/src/components/call-desk/phone-action-cell.tsx b/src/components/call-desk/phone-action-cell.tsx
index 5642e17..e5177e3 100644
--- a/src/components/call-desk/phone-action-cell.tsx
+++ b/src/components/call-desk/phone-action-cell.tsx
@@ -74,43 +74,33 @@ export const PhoneActionCell = ({ phoneNumber, displayNumber, leadId: _leadId, o
             {/* Clickable phone number — calls directly */}
             <button
                 type="button"
-                onClick={handleCall}
+                onClick={canCall ? handleCall : undefined}
                 onTouchStart={onTouchStart}
                 onTouchEnd={onTouchEnd}
                 onContextMenu={(e) => { e.preventDefault(); setMenuOpen(true); }}
-                disabled={!canCall}
                 className={cx(
-                    'flex items-center gap-1.5 rounded-md px-1.5 py-1 text-sm transition duration-100 ease-linear',
+                    'flex items-center gap-1.5 rounded-md px-1.5 py-1 text-sm text-brand-secondary transition duration-100 ease-linear',
                     canCall
-                        ? 'cursor-pointer text-brand-secondary hover:bg-brand-primary hover:text-brand-secondary'
-                        : 'cursor-default text-tertiary',
+                        ? 'cursor-pointer hover:bg-brand-primary'
+                        : 'cursor-default',
                 )}
             >
                 <FontAwesomeIcon icon={faPhone} className="size-3" />
                 <span className="whitespace-nowrap">{displayNumber}</span>
             </button>
 
-            {/* Kebab menu trigger — desktop */}
+            {/* Kebab menu trigger — SMS + WhatsApp */}
             <button
                 type="button"
                 onClick={(e) => { e.stopPropagation(); setMenuOpen(!menuOpen); }}
-                className="flex size-6 items-center justify-center rounded-md text-fg-quaternary opacity-0 group-hover/row:opacity-100 hover:text-fg-secondary hover:bg-primary_hover transition duration-100 ease-linear"
+                className="flex size-6 items-center justify-center rounded-md text-fg-quaternary hover:text-fg-secondary hover:bg-primary_hover transition duration-100 ease-linear"
             >
                 <FontAwesomeIcon icon={faEllipsisVertical} className="size-3" />
             </button>
 
-            {/* Context menu */}
+            {/* Context menu — SMS + WhatsApp only (dial is the primary click) */}
             {menuOpen && (
                 <div className="absolute left-0 top-full z-50 mt-1 w-40 rounded-lg bg-primary shadow-lg ring-1 ring-secondary py-1">
-                    <button
-                        type="button"
-                        onClick={handleCall}
-                        disabled={!canCall}
-                        className="flex w-full items-center gap-2 px-3 py-2 text-sm text-secondary hover:bg-primary_hover disabled:text-disabled"
-                    >
-                        <FontAwesomeIcon icon={faPhone} className="size-3.5 text-fg-success-secondary" />
-                        Call
-                    </button>
                     <button
                         type="button"
                         onClick={handleSms}
diff --git a/src/components/call-desk/worklist-panel.tsx b/src/components/call-desk/worklist-panel.tsx
index 55d82a4..dac7246 100644
--- a/src/components/call-desk/worklist-panel.tsx
+++ b/src/components/call-desk/worklist-panel.tsx
@@ -1,13 +1,9 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { faPhoneArrowDown, faPhoneArrowUp, faMagnifyingGlass } from '@fortawesome/pro-duotone-svg-icons';
+import { faPhoneArrowDown, faPhoneArrowUp } from '@fortawesome/pro-duotone-svg-icons';
 import type { SortDescriptor } from 'react-aria-components';
 import { faIcon } from '@/lib/icon-wrapper';
 import { Table } from '@/components/application/table/table';
-
-const SearchLg = faIcon(faMagnifyingGlass);
 import { Badge } from '@/components/base/badges/badges';
-import { Input } from '@/components/base/input/input';
-import { Tabs, TabList, Tab } from '@/components/application/tabs/tabs';
 import { PhoneActionCell } from './phone-action-cell';
 import { formatPhone, formatTimeOnly, formatShortDate } from '@/lib/format';
 import { notify } from '@/lib/toast';
@@ -79,6 +75,9 @@ interface WorklistPanelProps {
     onSelectItem: (selection: WorklistSelection) => void;
     selectedItemId: string | null;
     onDialMissedCall?: (missedCallId: string) => void;
+    // Lifted from internal state — owned by call-desk.tsx so the search
+    // input can live in the PageHeader row alongside other controls.
+    search: string;
 }
 
 type TabKey = 'all' | 'missed' | 'leads' | 'follow-ups';
@@ -299,9 +298,8 @@ const buildRows = (missedCalls: MissedCall[], followUps: WorklistFollowUp[], lea
     return actionableRows;
 };
 
-export const WorklistPanel = ({ missedCalls, followUps, leads, loading, onSelectItem, selectedItemId, onDialMissedCall }: WorklistPanelProps) => {
+export const WorklistPanel = ({ missedCalls, followUps, leads, loading, onSelectItem, selectedItemId, onDialMissedCall, search }: WorklistPanelProps) => {
     const [tab, setTab] = useState<TabKey>('all');
-    const [search, setSearch] = useState('');
     // Missed tab always shows PENDING callbacks. Attempted/Completed/Invalid
     // sub-tabs were removed per QA feedback — pending callbacks are the only
     // ones agents need to act on from the worklist.
@@ -402,8 +400,10 @@ export const WorklistPanel = ({ missedCalls, followUps, leads, loading, onSelect
     const PAGE_SIZE = 15;
     const [page, setPage] = useState(1);
 
+    // Reset page when search changes from parent
+    useEffect(() => { setPage(1); }, [search]);
+
     const handleTabChange = useCallback((key: TabKey) => { setTab(key); setPage(1); }, []);
-    const handleSearch = useCallback((value: string) => { setSearch(value); setPage(1); }, []);
 
     const totalPages = Math.max(1, Math.ceil(filteredRows.length / PAGE_SIZE));
     const pagedRows = filteredRows.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
@@ -436,23 +436,22 @@ export const WorklistPanel = ({ missedCalls, followUps, leads, loading, onSelect
 
     return (
         <div className="flex flex-1 flex-col min-h-0 overflow-hidden">
-            {/* Filter tabs + search */}
-            <div className="flex shrink-0 items-end justify-between border-b border-secondary px-5 pt-3 pb-0.5">
-                <Tabs selectedKey={tab} onSelectionChange={(key) => handleTabChange(key as TabKey)}>
-                    <TabList items={tabItems} type="underline" size="sm">
-                        {(item) => <Tab key={item.id} id={item.id} label={item.label} badge={item.badge} />}
-                    </TabList>
-                </Tabs>
-                <div className="w-44 shrink-0">
-                    <Input
-                        placeholder="Search..."
-                        icon={SearchLg}
-                        size="sm"
-                        value={search}
-                        onChange={handleSearch}
-                        aria-label="Search worklist"
-                    />
-                </div>
+            {/* Filter pills — custom buttons matching All Leads pattern */}
+            <div className="flex shrink-0 items-center gap-1.5 px-5 py-2">
+                {tabItems.map((item) => (
+                    <button
+                        key={item.id}
+                        onClick={() => handleTabChange(item.id)}
+                        className={cx(
+                            'shrink-0 rounded-full px-3 py-1 text-xs font-medium transition duration-100 ease-linear',
+                            tab === item.id
+                                ? 'bg-brand-solid text-white'
+                                : 'bg-secondary text-tertiary hover:text-secondary hover:bg-secondary_hover',
+                        )}
+                    >
+                        {item.label}{item.badge ? ` (${item.badge})` : ''}
+                    </button>
+                ))}
             </div>
 
             {/* Missed-call sub-tabs removed per QA feedback — the Missed tab
diff --git a/src/components/leads/lead-table.tsx b/src/components/leads/lead-table.tsx
index 00f2b0b..5610790 100644
--- a/src/components/leads/lead-table.tsx
+++ b/src/components/leads/lead-table.tsx
@@ -1,17 +1,14 @@
-import type { FC } from 'react';
 import { useMemo, useState } from 'react';
 import { TableBody as AriaTableBody } from 'react-aria-components';
 import type { SortDescriptor, Selection } from 'react-aria-components';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faEllipsisVertical } from '@fortawesome/pro-duotone-svg-icons';
-
-const DotsVertical: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faEllipsisVertical} className={className} />;
+import { faEye } from '@fortawesome/pro-duotone-svg-icons';
 import { Badge } from '@/components/base/badges/badges';
-import { Button } from '@/components/base/buttons/button';
 import { Table } from '@/components/application/table/table';
 import { LeadStatusBadge } from '@/components/shared/status-badge';
 import { SourceTag } from '@/components/shared/source-tag';
 import { AgeIndicator } from '@/components/shared/age-indicator';
+import { PhoneActionCell } from '@/components/call-desk/phone-action-cell';
 import { formatPhone, formatShortDate } from '@/lib/format';
 import { cx } from '@/utils/cx';
 import type { Lead } from '@/types/entities';
@@ -97,6 +94,7 @@ export const LeadTable = ({
     }, [leads, expandedDupId]);
 
     const allColumns = [
+        { id: 'view', label: '', allowsSorting: false, defaultWidth: 40 },
         { id: 'phone', label: 'Phone', allowsSorting: true, defaultWidth: 150 },
         { id: 'name', label: 'Name', allowsSorting: true, defaultWidth: 160 },
         { id: 'email', label: 'Email', allowsSorting: false, defaultWidth: 180 },
@@ -109,11 +107,10 @@ export const LeadTable = ({
         { id: 'createdAt', label: 'Age', allowsSorting: true, defaultWidth: 80 },
         { id: 'spamScore', label: 'Spam', allowsSorting: true, defaultWidth: 70 },
         { id: 'dups', label: 'Dups', allowsSorting: false, defaultWidth: 60 },
-        { id: 'actions', label: '', allowsSorting: false, defaultWidth: 50 },
     ];
 
     const columns = visibleColumns
-        ? allColumns.filter(c => visibleColumns.has(c.id) || c.id === 'actions')
+        ? allColumns.filter(c => visibleColumns.has(c.id) || c.id === 'view')
         : allColumns;
 
     return (
@@ -145,6 +142,7 @@ export const LeadTable = ({
                         const firstName = lead.contactName?.firstName ?? '';
                         const lastName = lead.contactName?.lastName ?? '';
                         const name = `${firstName} ${lastName}`.trim() || '\u2014';
+                        const phoneRaw = lead.contactPhone?.[0]?.number ?? '';
                         const phone = lead.contactPhone?.[0]
                             ? formatPhone(lead.contactPhone[0])
                             : '\u2014';
@@ -158,6 +156,7 @@ export const LeadTable = ({
                                     id={row.id}
                                     className="bg-warning-primary"
                                 >
+                                    <Table.Cell />
                                     <Table.Cell className="pl-10">
                                         <span className="text-xs text-tertiary">{phone}</span>
                                     </Table.Cell>
@@ -191,17 +190,6 @@ export const LeadTable = ({
                                     <Table.Cell />
                                     <Table.Cell />
                                     <Table.Cell />
-                                    <Table.Cell />
-                                    <Table.Cell>
-                                        <div className="flex gap-2">
-                                            <Button size="sm" color="primary">
-                                                Merge
-                                            </Button>
-                                            <Button size="sm" color="secondary">
-                                                Keep Separate
-                                            </Button>
-                                        </div>
-                                    </Table.Cell>
                                 </Table.Row>
                             );
                         }
@@ -219,12 +207,26 @@ export const LeadTable = ({
                                 key={row.id}
                                 id={row.id}
                                 className={cx(
+                                    'group/row',
                                     isSpamRow && !isSelected && 'bg-warning-primary',
                                     isSelected && 'bg-brand-primary',
                                 )}
                             >
+                                <Table.Cell>
+                                    <button
+                                        onClick={(e) => { e.stopPropagation(); onViewActivity?.(lead); }}
+                                        className="flex size-7 items-center justify-center rounded-lg text-fg-quaternary hover:text-fg-secondary hover:bg-primary_hover transition duration-100 ease-linear"
+                                        title="View details"
+                                    >
+                                        <FontAwesomeIcon icon={faEye} className="size-3.5" />
+                                    </button>
+                                </Table.Cell>
                                 {isCol('phone') && <Table.Cell>
-                                    <span className="font-semibold text-primary">{phone}</span>
+                                    {phoneRaw ? (
+                                        <PhoneActionCell phoneNumber={phoneRaw} displayNumber={phone} />
+                                    ) : (
+                                        <span className="text-sm text-quaternary">{'\u2014'}</span>
+                                    )}
                                 </Table.Cell>}
                                 {isCol('name') && <Table.Cell>
                                     <span className="text-secondary">{name}</span>
@@ -308,15 +310,6 @@ export const LeadTable = ({
                                         <span className="text-tertiary">0</span>
                                     )}
                                 </Table.Cell>}
-                                <Table.Cell>
-                                    <Button
-                                        size="sm"
-                                        color="tertiary"
-                                        iconLeading={DotsVertical}
-                                        aria-label="Row actions"
-                                        onClick={() => onViewActivity?.(lead)}
-                                    />
-                                </Table.Cell>
                             </Table.Row>
                         );
                     }}
diff --git a/src/pages/appointments-v2.tsx b/src/pages/appointments-v2.tsx
index 786f748..5fdd616 100644
--- a/src/pages/appointments-v2.tsx
+++ b/src/pages/appointments-v2.tsx
@@ -12,7 +12,6 @@ import { Badge } from '@/components/base/badges/badges';
 import { Input } from '@/components/base/input/input';
 import { Table } from '@/components/application/table/table';
 import { PaginationCardDefault } from '@/components/application/pagination/pagination';
-import { Tabs, TabList, Tab } from '@/components/application/tabs/tabs';
 // TopBar replaced by inline header
 import { Button } from '@/components/base/buttons/button';
 import { ModalOverlay, Modal, Dialog } from '@/components/application/modals/modal';
@@ -569,11 +568,22 @@ export const AppointmentsPageV2 = () => {
                     </div>
                 }
                 tabs={
-                    <Tabs selectedKey={tab} onSelectionChange={(key) => setTab(key as StatusTab)}>
-                        <TabList items={tabItems} type="underline" size="sm">
-                            {(item) => <Tab key={item.id} id={item.id} label={item.label} badge={item.badge} />}
-                        </TabList>
-                    </Tabs>
+                    <div className="flex items-center gap-1.5">
+                        {tabItems.map((item) => (
+                            <button
+                                key={item.id}
+                                onClick={() => setTab(item.id)}
+                                className={cx(
+                                    'shrink-0 rounded-full px-3 py-1 text-xs font-medium transition duration-100 ease-linear',
+                                    tab === item.id
+                                        ? 'bg-brand-solid text-white'
+                                        : 'bg-secondary text-tertiary hover:text-secondary hover:bg-secondary_hover',
+                                )}
+                            >
+                                {item.label}{item.badge ? ` ${item.badge}` : ''}
+                            </button>
+                        ))}
+                    </div>
                 }
             />
 
@@ -611,7 +621,7 @@ export const AppointmentsPageV2 = () => {
                                         return (
                                             <Table.Row
                                                 id={appt.id}
-                                                className={cx(isSelected && 'bg-brand-primary')}
+                                                className={cx('group/row', isSelected && 'bg-brand-primary')}
                                             >
                                                 {/* Eye icon — first column */}
                                                 <Table.Cell>
@@ -628,7 +638,7 @@ export const AppointmentsPageV2 = () => {
                                                 <Table.Cell>
                                                     <div className="min-w-0">
                                                         <p className="text-sm font-medium text-primary truncate">{name}</p>
-                                                        {phone && <p className="text-xs text-tertiary">{formatPhone({ number: phone, callingCode: '+91' })}</p>}
+                                                        {phone && <PhoneActionCell phoneNumber={phone} displayNumber={formatPhone({ number: phone, callingCode: '+91' })} />}
                                                     </div>
                                                 </Table.Cell>
 
diff --git a/src/pages/call-desk.tsx b/src/pages/call-desk.tsx
index 90af3ec..6519848 100644
--- a/src/pages/call-desk.tsx
+++ b/src/pages/call-desk.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faSidebarFlip, faSidebar, faPhone, faXmark, faDeleteLeft, faFlask } from '@fortawesome/pro-duotone-svg-icons';
+import { faSidebarFlip, faSidebar, faPhone, faXmark, faDeleteLeft, faFlask, faMagnifyingGlass, faCircleInfo } from '@fortawesome/pro-duotone-svg-icons';
 import { useSetAtom } from 'jotai';
 import { sipCallStateAtom, sipCallerNumberAtom, sipCallUcidAtom, sipCallDurationAtom } from '@/state/sip-state';
 import { useAuth } from '@/providers/auth-provider';
@@ -12,12 +12,14 @@ import type { WorklistSelection } from '@/components/call-desk/worklist-panel';
 import { ContextPanel } from '@/components/call-desk/context-panel';
 import type { ContextPanelSubject } from '@/components/call-desk/context-panel';
 import { ActiveCallCard } from '@/components/call-desk/active-call-card';
+import { Input } from '@/components/base/input/input';
+import { faIcon } from '@/lib/icon-wrapper';
 
 import { apiClient } from '@/lib/api-client';
 import { notify } from '@/lib/toast';
 import { cx } from '@/utils/cx';
-import { FontAwesomeIcon as FAIcon } from '@fortawesome/react-fontawesome';
-import { faCircleInfo } from '@fortawesome/pro-duotone-svg-icons';
+
+const SearchLg = faIcon(faMagnifyingGlass);
 
 export const CallDeskPage = () => {
     const { user } = useAuth();
@@ -32,6 +34,7 @@ export const CallDeskPage = () => {
     const [diallerOpen, setDiallerOpen] = useState(false);
     const [dialNumber, setDialNumber] = useState('');
     const [dialling, setDialling] = useState(false);
+    const [search, setSearch] = useState('');
 
     // DEV: simulate incoming call
     const setSimCallState = useSetAtom(sipCallStateAtom);
@@ -174,11 +177,23 @@ export const CallDeskPage = () => {
                     <h1 className="text-lg font-bold text-primary">Call Desk</h1>
                     <span className="text-sm text-tertiary ml-1">{user.name}</span>
                     <span className="flex size-5 items-center justify-center text-fg-quaternary" title="Your active worklist — missed calls, leads, and follow-ups prioritised by SLA.">
-                        <FAIcon icon={faCircleInfo} className="size-4" />
+                        <FontAwesomeIcon icon={faCircleInfo} className="size-4" />
                     </span>
                 </div>
 
                 <div className="flex items-center gap-2">
+                    {!isInCall && (
+                        <div className="w-52">
+                            <Input
+                                placeholder="Search worklist..."
+                                icon={SearchLg}
+                                size="sm"
+                                value={search}
+                                onChange={setSearch}
+                                aria-label="Search worklist"
+                            />
+                        </div>
+                    )}
                     {import.meta.env.DEV && (!isInCall ? (
                         <button
                             onClick={startSimCall}
@@ -288,6 +303,7 @@ export const CallDeskPage = () => {
                             onSelectItem={handleSelectItem}
                             selectedItemId={selectedItemId}
                             onDialMissedCall={(id) => setActiveMissedCallId(id)}
+                            search={search}
                         />
                     )}
                 </div>
diff --git a/src/pages/patients.tsx b/src/pages/patients.tsx
index bcf16b1..8b38140 100644
--- a/src/pages/patients.tsx
+++ b/src/pages/patients.tsx
@@ -1,7 +1,7 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useMemo, useState } from 'react';
 // useNavigate removed — row click opens profile panel
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faUser, faMagnifyingGlass, faCommentDots, faMessageDots, faEllipsisVertical, faSidebarFlip, faSidebar } from '@fortawesome/pro-duotone-svg-icons';
+import { faUser, faMagnifyingGlass, faSidebarFlip, faSidebar } from '@fortawesome/pro-duotone-svg-icons';
 import { faIcon } from '@/lib/icon-wrapper';
 
 const SearchLg = faIcon(faMagnifyingGlass);
@@ -55,49 +55,6 @@ const getPatientEmail = (patient: Patient): string => {
     return patient.emails?.primaryEmail ?? '';
 };
 
-const HamburgerMenu = ({ phone }: { phone: string }) => {
-    const [open, setOpen] = useState(false);
-    const ref = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-        if (!open) return;
-        const handler = (e: MouseEvent) => {
-            if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
-        };
-        document.addEventListener('mousedown', handler);
-        return () => document.removeEventListener('mousedown', handler);
-    }, [open]);
-
-    return (
-        <div className="relative" ref={ref}>
-            <button
-                onClick={(e) => { e.stopPropagation(); setOpen(!open); }}
-                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"
-                title="More actions"
-            >
-                <FontAwesomeIcon icon={faEllipsisVertical} className="size-4" />
-            </button>
-            {open && (
-                <div className="absolute top-full right-0 mt-1 w-40 rounded-xl bg-primary shadow-xl ring-1 ring-secondary z-50 overflow-hidden py-1">
-                    <button
-                        onClick={(e) => { e.stopPropagation(); window.open(`sms:+91${phone}`, '_self'); setOpen(false); }}
-                        className="flex w-full items-center gap-2 px-3 py-2 text-xs text-primary hover:bg-primary_hover text-left"
-                    >
-                        <FontAwesomeIcon icon={faCommentDots} className="size-3.5 text-fg-quaternary" />
-                        Send SMS
-                    </button>
-                    <button
-                        onClick={(e) => { e.stopPropagation(); window.open(`https://wa.me/91${phone}`, '_blank'); setOpen(false); }}
-                        className="flex w-full items-center gap-2 px-3 py-2 text-xs text-primary hover:bg-primary_hover text-left"
-                    >
-                        <FontAwesomeIcon icon={faMessageDots} className="size-3.5 text-fg-quaternary" />
-                        WhatsApp
-                    </button>
-                </div>
-            )}
-        </div>
-    );
-};
 
 export const PatientsPage = () => {
     const { patients, loading } = useData();
@@ -178,7 +135,6 @@ export const PatientsPage = () => {
                                 <Table.Head label="EMAIL" />
                                 <Table.Head label="GENDER" />
                                 <Table.Head label="AGE" />
-                                <Table.Head label="" className="w-12" />
                             </Table.Header>
                             <Table.Body items={pagedPatients} dependencies={[selectedPatient?.id]}>
                                 {(patient) => {
@@ -192,10 +148,10 @@ export const PatientsPage = () => {
                                         : '?';
 
                                     return (
-                                        <Table.Row 
+                                        <Table.Row
                                             id={patient.id}
                                             className={cx(
-                                                'cursor-pointer',
+                                                'cursor-pointer group/row',
                                                 selectedPatient?.id === patient.id && 'bg-brand-primary'
                                             )}
                                             onAction={() => {
@@ -255,12 +211,6 @@ export const PatientsPage = () => {
                                                 </span>
                                             </Table.Cell>
 
-                                            {/* Hamburger — SMS + WhatsApp */}
-                                            <Table.Cell>
-                                                {phone ? (
-                                                    <HamburgerMenu phone={phone} />
-                                                ) : null}
-                                            </Table.Cell>
                                         </Table.Row>
                                     );
                                 }}