-
handleTabChange(key as TabKey)}>
-
- {(item) => }
-
-
-
-
-
+ {/* Filter pills — custom buttons matching All Leads pattern */}
+
+ {tabItems.map((item) => (
+
+ ))}
{/* 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 }) =>
;
+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"
>
+
{phone}
@@ -191,17 +190,6 @@ export const LeadTable = ({
-
-
-
-
-
-
-
);
}
@@ -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',
)}
>
+
+
+
{isCol('phone') &&
- {phone}
+ {phoneRaw ? (
+
+ ) : (
+ {'\u2014'}
+ )}
}
{isCol('name') &&
{name}
@@ -308,15 +310,6 @@ export const LeadTable = ({
0
)}
}
-
-
);
}}
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 = () => {
+ {tabItems.map((item) => (
+
+ ))}
+
}
/>
@@ -611,7 +621,7 @@ export const AppointmentsPageV2 = () => {
return (