feat: data table improvements — SLA column, pagination, column resize, ordinal dates

- Call Recordings: pagination (15/page), column toggle, sortable SLA/duration/date, ordinal dates, SSE refresh
- Missed Calls: full rewrite matching data table pattern (pagination, column toggle, sort, SLA from entity)
- Call History: SLA column from entity field
- Table component: ResizableTableContainer + ColumnResizer for all tables
- Date formatting: formatDateOrdinal utility (1st April, 2nd March, etc.)
- SLA reads from platform call.sla field (seeded for 200 records)
- AI button long-press triggers OTP-gated cache clear for re-analysis

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

src/pages/call-history.tsx

@@ -19,6 +19,8 @@ import { Select } from '@/components/base/select/select';
 import { TopBar } from '@/components/layout/top-bar';
 import { ClickToCallButton } from '@/components/call-desk/click-to-call-button';
 import { formatShortDate, formatPhone } from '@/lib/format';
+import { computeSlaStatus } from '@/lib/scoring';
+import { cx } from '@/utils/cx';
 import { useData } from '@/providers/data-provider';
 import { PaginationCardDefault } from '@/components/application/pagination/pagination';
 import type { Call, CallDirection, CallDisposition } from '@/types/entities';
@@ -66,6 +68,12 @@ const DirectionIcon: FC<{ direction: CallDirection | null; status: Call['callSta
     return <FontAwesomeIcon icon={faPhoneArrowDown} className="size-4 text-fg-success-secondary" />;
 };
 
+const getCallSla = (call: Call): { percent: number; status: 'low' | 'medium' | 'high' | 'critical' } | null => {
+    if (call.sla == null) return null;
+    const percent = Math.round(call.sla);
+    return { percent, status: computeSlaStatus(percent) };
+};
+
 const RecordingPlayer: FC<{ url: string }> = ({ url }) => {
     const audioRef = useRef<HTMLAudioElement>(null);
     const [isPlaying, setIsPlaying] = useState(false);
@@ -221,6 +229,7 @@ export const CallHistoryPage = () => {
                                 <Table.Head label="PHONE" />
                                 <Table.Head label="DURATION" className="w-24" />
                                 <Table.Head label="OUTCOME" />
+                                <Table.Head label="SLA" className="w-24" />
                                 <Table.Head label="AGENT" />
                                 <Table.Head label="RECORDING" className="w-24" />
                                 <Table.Head label="TIME" />
@@ -262,6 +271,24 @@ export const CallHistoryPage = () => {
                                                     <span className="text-sm text-quaternary">{'\u2014'}</span>
                                                 )}
                                             </Table.Cell>
+                                            <Table.Cell>
+                                                {(() => {
+                                                    const sla = getCallSla(call);
+                                                    if (!sla) return <span className="text-xs text-quaternary">—</span>;
+                                                    return (
+                                                        <span className="inline-flex items-center gap-1.5 text-xs font-medium">
+                                                            <span className={cx(
+                                                                'size-2 rounded-full',
+                                                                sla.status === 'low' && 'bg-success-solid',
+                                                                sla.status === 'medium' && 'bg-warning-solid',
+                                                                sla.status === 'high' && 'bg-error-solid',
+                                                                sla.status === 'critical' && 'bg-error-solid animate-pulse',
+                                                            )} />
+                                                            <span className="text-secondary">{sla.percent}%</span>
+                                                        </span>
+                                                    );
+                                                })()}
+                                            </Table.Cell>
                                             <Table.Cell>
                                                 <span className="text-sm text-secondary">
                                                     {call.agentName ?? '\u2014'}