feat: dashboard restructure, integrations, settings, UI fixes

Dashboard:
- Split into components (kpi-cards, agent-table, missed-queue)
- Add collapsible AI panel on right (same pattern as Call Desk)
- Add tabs: Agent Performance | Missed Queue | Campaigns
- Date range filter in header

Integrations page:
- Ozonetel (connected), WhatsApp, Facebook, Google, Instagram, Website, Email
- Status badges, config details, webhook URL with copy button

Settings page:
- Employee table from workspaceMembers GraphQL query
- Name, email, roles, status, reset password action

Fixes:
- Fix CALLS_QUERY: callerNumber needs { primaryPhoneNumber }, recordingUrl → recording { primaryLinkUrl }
- Remove duplicate AI Assistant header
- Remove Follow-ups from CC agent sidebar (already in worklist tabs)
- Remove global search from TopBar (decorative, unused)
- Slim down TopBar height
- Fix search/table gap in worklist
- Add brand border to active nav item

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/dashboard/agent-table.tsx

@@ -0,0 +1,106 @@
+import { useMemo } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faUserHeadset } from '@fortawesome/pro-duotone-svg-icons';
+import { Avatar } from '@/components/base/avatar/avatar';
+import { Badge } from '@/components/base/badges/badges';
+import { Table, TableCard } from '@/components/application/table/table';
+import { getInitials } from '@/lib/format';
+import type { Call } from '@/types/entities';
+
+const formatDuration = (seconds: number): string => {
+    if (seconds < 60) return `${seconds}s`;
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return secs > 0 ? `${mins}m ${secs}s` : `${mins}m`;
+};
+
+const formatPercent = (value: number): string => {
+    if (isNaN(value) || !isFinite(value)) return '0%';
+    return `${Math.round(value)}%`;
+};
+
+interface AgentTableProps {
+    calls: Call[];
+}
+
+export const AgentTable = ({ calls }: AgentTableProps) => {
+    const agents = useMemo(() => {
+        const agentMap = new Map<string, Call[]>();
+        for (const call of calls) {
+            const agent = call.agentName ?? 'Unknown';
+            if (!agentMap.has(agent)) agentMap.set(agent, []);
+            agentMap.get(agent)!.push(call);
+        }
+
+        return Array.from(agentMap.entries()).map(([name, agentCalls]) => {
+            const inbound = agentCalls.filter((c) => c.callDirection === 'INBOUND').length;
+            const outbound = agentCalls.filter((c) => c.callDirection === 'OUTBOUND').length;
+            const missed = agentCalls.filter((c) => c.callStatus === 'MISSED').length;
+            const total = agentCalls.length;
+            const completedCalls = agentCalls.filter((c) => (c.durationSeconds ?? 0) > 0);
+            const totalDuration = completedCalls.reduce((sum, c) => sum + (c.durationSeconds ?? 0), 0);
+            const avgHandle = completedCalls.length > 0 ? Math.round(totalDuration / completedCalls.length) : 0;
+            const booked = agentCalls.filter((c) => c.disposition === 'APPOINTMENT_BOOKED').length;
+            const conversion = total > 0 ? (booked / total) * 100 : 0;
+            const nameParts = name.split(' ');
+
+            return {
+                id: name,
+                name,
+                initials: getInitials(nameParts[0] ?? '', nameParts[1] ?? ''),
+                inbound, outbound, missed, total, avgHandle, conversion,
+            };
+        }).sort((a, b) => b.total - a.total);
+    }, [calls]);
+
+    if (agents.length === 0) {
+        return (
+            <TableCard.Root size="sm">
+                <TableCard.Header title="Agent Performance" description="Call metrics by agent" />
+                <div className="flex flex-col items-center justify-center py-12 gap-2">
+                    <FontAwesomeIcon icon={faUserHeadset} className="size-8 text-fg-quaternary" />
+                    <p className="text-sm text-tertiary">No agent data available</p>
+                </div>
+            </TableCard.Root>
+        );
+    }
+
+    return (
+        <TableCard.Root size="sm">
+            <TableCard.Header title="Agent Performance" badge={agents.length} description="Call metrics by agent" />
+            <Table>
+                <Table.Header>
+                    <Table.Head label="AGENT" />
+                    <Table.Head label="IN" />
+                    <Table.Head label="OUT" />
+                    <Table.Head label="MISSED" />
+                    <Table.Head label="AVG HANDLE" />
+                    <Table.Head label="CONVERSION" />
+                </Table.Header>
+                <Table.Body items={agents}>
+                    {(agent) => (
+                        <Table.Row id={agent.id}>
+                            <Table.Cell>
+                                <div className="flex items-center gap-2">
+                                    <Avatar size="xs" initials={agent.initials} />
+                                    <span className="text-sm font-medium text-primary">{agent.name}</span>
+                                </div>
+                            </Table.Cell>
+                            <Table.Cell><span className="text-sm text-success-primary">{agent.inbound}</span></Table.Cell>
+                            <Table.Cell><span className="text-sm text-brand-secondary">{agent.outbound}</span></Table.Cell>
+                            <Table.Cell>
+                                {agent.missed > 0 ? <Badge size="sm" color="error">{agent.missed}</Badge> : <span className="text-sm text-tertiary">0</span>}
+                            </Table.Cell>
+                            <Table.Cell><span className="text-sm text-secondary">{formatDuration(agent.avgHandle)}</span></Table.Cell>
+                            <Table.Cell>
+                                <Badge size="sm" color={agent.conversion >= 30 ? 'success' : agent.conversion >= 15 ? 'warning' : 'gray'}>
+                                    {formatPercent(agent.conversion)}
+                                </Badge>
+                            </Table.Cell>
+                        </Table.Row>
+                    )}
+                </Table.Body>
+            </Table>
+        </TableCard.Root>
+    );
+};