refactor(design): adopt TanStack DataTable on /veeam-analysis, fill gaps

Follow-on polish for the nav-design overhaul (#9bfb575).

- /veeam-analysis migrates the bespoke TicketRow + custom pagination to
  the new DataTable using getRowCanExpand + renderSubRow. Drops ~85
  lines of fragment/colspan markup in favor of the standard pattern.

- PageHeader on the last common stragglers — /settings,
  /settings/security, /sentinelone/coverage, /sentinelone/mappings.
  Settings is reachable from the new top-bar UserMenu so it had to
  match the rest of the visual system.

- /dashboard and /status load with the new Skeleton helpers
  (SkeletonRows, SkeletonChart, SkeletonTable) so loading shells now
  approximate the post-load layout instead of a single h-NN bar.

- DESIGN.md: closed the straggler PageHeader item; deprioritized the
  hard-coded palette audit with a note that ~770 references are mostly
  semantic via the documented bg-{hue}-500/15 / text-{hue}-700 recipe.

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

DESIGN.md

@@ -311,8 +311,10 @@ below is the working backlog; expand as we go.
 ### Page shell
 - [x] ~~Adopt `PageHeader` everywhere~~ — `/dashboard`, `/status`, all
       `/admin/*` sub-pages, `/addigy-devices`, `/analyzer/ticket/[…]`,
-      `/analyzer/analysis/[…]` now use it. A handful of pages still need
-      it (kiosk, settings, sentinelone/* — low priority).
+      `/analyzer/analysis/[…]`, `/settings`, `/settings/security`,
+      `/sentinelone/coverage`, `/sentinelone/mappings` now use it. Kiosk
+      uses its own shell; the only stragglers are very small/internal
+      pages.
 - [ ] Standardize container + padding (`container mx-auto px-6 py-6`). Pages
       using `px-4`, `py-8`, `max-w-2xl` etc. should justify the deviation.
 - [ ] Standardize section spacing (`space-y-6` between cards; pick `gap-6`
@@ -363,9 +365,11 @@ below is the working backlog; expand as we go.
       scheduler heartbeats via `/api/status/workers` and `WorkerPulse`.
 
 ### Tokens & theming
-- [ ] Audit places that hard-code Tailwind palette colors (`text-orange-600`,
-      `bg-blue-500/15`) and either keep them as semantic status colors or
-      move them behind a token.
+- [-] Hard-coded Tailwind palette colors are extensive (~770 references)
+      but most are **semantic** (status reds, info blues, warning ambers
+      via the `bg-{hue}-500/15 text-{hue}-700` recipe documented above).
+      Surveyed and deprioritized — case-by-case cleanup as new work
+      touches a page.
 - [ ] Verify dark-mode contrast on status badges and chart legends; the 10%-
       opacity borders in dark mode are subtle and may need lifting.
 

app/dashboard/page.tsx

@@ -16,7 +16,7 @@ import { useEffect, useState } from 'react';
 import { PageHeader } from '@/components/navigation/page-header';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
-import { Skeleton } from '@/components/ui/skeleton';
+import { SkeletonRows, SkeletonChart } from '@/components/ui/skeleton-helpers';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { EmptyState } from '@/components/ui/empty-state';
 import { KpiCard } from '@/components/dashboard/kpi-card';
@@ -275,7 +275,7 @@ export default function DashboardPage() {
             </CardHeader>
             <CardContent>
               {!trends ? (
-                <Skeleton className="h-48" />
+                <SkeletonChart height={196} />
               ) : (
                 <QueueHeatmap data={trends.queueHeatmap} />
               )}
@@ -290,7 +290,7 @@ export default function DashboardPage() {
             </CardHeader>
             <CardContent>
               {!trends ? (
-                <Skeleton className="h-48" />
+                <SkeletonChart height={196} />
               ) : (
                 <ActiveEngineers data={trends.activeEngineers} />
               )}
@@ -309,7 +309,7 @@ export default function DashboardPage() {
             </CardHeader>
             <CardContent>
               {!trends ? (
-                <Skeleton className="h-44" />
+                <SkeletonChart height={180} />
               ) : (
                 <VolumeTrend data={trends.volumeByDay} />
               )}
@@ -324,7 +324,7 @@ export default function DashboardPage() {
             </CardHeader>
             <CardContent>
               {!trends ? (
-                <Skeleton className="h-44" />
+                <SkeletonChart height={180} />
               ) : (
                 <ResolutionTrend data={trends.resolutionByDay} />
               )}
@@ -343,7 +343,7 @@ export default function DashboardPage() {
             </CardHeader>
             <CardContent>
               {!data ? (
-                <RowSkeletons />
+                <SkeletonRows count={4} />
               ) : data.observations.length === 0 ? (
                 <EmptyState
                   icon={Activity}
@@ -384,7 +384,7 @@ export default function DashboardPage() {
             </CardHeader>
             <CardContent>
               {!data ? (
-                <RowSkeletons />
+                <SkeletonRows count={4} />
               ) : data.audits.length === 0 ? (
                 <EmptyState
                   icon={Sparkles}
@@ -435,12 +435,3 @@ export default function DashboardPage() {
   );
 }
 
-function RowSkeletons() {
-  return (
-    <div className="space-y-2">
-      <Skeleton className="h-4 w-full" />
-      <Skeleton className="h-4 w-full" />
-      <Skeleton className="h-4 w-3/4" />
-    </div>
-  );
-}

app/sentinelone/coverage/page.tsx

@@ -5,6 +5,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
+import { PageHeader } from '@/components/navigation/page-header';
 import {
   Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
 } from '@/components/ui/table';
@@ -64,19 +65,20 @@ export default function S1CoveragePage() {
   });
 
   return (
-    <div className="container mx-auto py-8 space-y-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-3xl font-bold flex items-center gap-3">
-            <Shield className="w-8 h-8 text-purple-600" />
-            SentinelOne Coverage
-          </h1>
-          <p className="text-muted-foreground mt-1">AV agent coverage and threat status per site</p>
-        </div>
+    <>
+      <PageHeader
+        title="SentinelOne coverage"
+        description="AV agent coverage and threat status per site"
+        breadcrumbs={[{ label: 'SentinelOne' }, { label: 'Coverage' }]}
+        accent
+        actions={
           <Button variant="outline" size="sm" onClick={fetchData} disabled={loading}>
-          <RefreshCw className={`w-4 h-4 mr-2 ${loading ? 'animate-spin' : ''}`} />Refresh
+            <RefreshCw className={`w-4 h-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
+            Refresh
           </Button>
-      </div>
+        }
+      />
+      <div className="container mx-auto px-6 py-6 space-y-6">
 
       {/* Summary cards */}
       {summary && (
@@ -183,5 +185,6 @@ export default function S1CoveragePage() {
         </CardContent>
       </Card>
       </div>
+    </>
   );
 }

app/sentinelone/mappings/page.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect } from 'react';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
+import { PageHeader } from '@/components/navigation/page-header';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import {
@@ -95,26 +96,26 @@ export default function S1MappingsPage() {
   };
 
   return (
-    <div className="container mx-auto py-8 space-y-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-3xl font-bold flex items-center gap-3">
-            <Shield className="w-8 h-8 text-purple-600" />
-            SentinelOne Site Mappings
-          </h1>
-          <p className="text-muted-foreground mt-2">Map SentinelOne sites to Autotask companies</p>
-        </div>
-        <div className="flex gap-2">
+    <>
+      <PageHeader
+        title="SentinelOne site mappings"
+        description="Map SentinelOne sites to Autotask companies"
+        breadcrumbs={[{ label: 'SentinelOne' }, { label: 'Mappings' }]}
+        accent
+        actions={
+          <>
             <Button onClick={handleSync} variant="outline" size="sm" disabled={syncing}>
-            {syncing
-              ? <><RefreshCw className="w-4 h-4 mr-2 animate-spin" />Syncing...</>
-              : <><RefreshCw className="w-4 h-4 mr-2" />Sync S1</>}
+              <RefreshCw className={`w-4 h-4 mr-2 ${syncing ? 'animate-spin' : ''}`} />
+              {syncing ? 'Syncing…' : 'Sync S1'}
             </Button>
             <Button onClick={fetchData} variant="outline" size="sm">
-            <RefreshCw className="w-4 h-4 mr-2" />Refresh
+              <RefreshCw className="w-4 h-4 mr-2" />
+              Refresh
             </Button>
-        </div>
-      </div>
+          </>
+        }
+      />
+      <div className="container mx-auto px-6 py-6 space-y-6">
 
       {/* Stats */}
       <div className="grid grid-cols-3 gap-4">
@@ -183,6 +184,7 @@ export default function S1MappingsPage() {
         </CardContent>
       </Card>
       </div>
+    </>
   );
 }
 

app/settings/page.tsx

@@ -1,7 +1,14 @@
 import { redirect } from "next/navigation";
 import { getSession } from "@/lib/auth-utils";
 import { ProfileForm } from "@/components/settings/profile-form";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { PageHeader } from "@/components/navigation/page-header";
 
 export default async function SettingsPage() {
   const session = await getSession();
@@ -11,25 +18,24 @@ export default async function SettingsPage() {
   }
 
   return (
-    <div className="container mx-auto py-8 px-4 max-w-2xl">
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold">Settings</h1>
-        <p className="text-muted-foreground mt-2">
-          Manage your account settings
-        </p>
-      </div>
-
+    <>
+      <PageHeader
+        title="Settings"
+        description="Manage your account settings"
+        breadcrumbs={[{ label: "Settings" }]}
+        accent
+      />
+      <div className="container mx-auto px-6 py-6 max-w-2xl">
         <Card>
           <CardHeader>
             <CardTitle>Profile</CardTitle>
-          <CardDescription>
-            Update your personal information
-          </CardDescription>
+            <CardDescription>Update your personal information</CardDescription>
           </CardHeader>
           <CardContent>
             <ProfileForm user={session.user} />
           </CardContent>
         </Card>
       </div>
+    </>
   );
 }

app/settings/security/page.tsx

@@ -2,7 +2,14 @@ import { redirect } from "next/navigation";
 import { getSession } from "@/lib/auth-utils";
 import { TwoFactorSetup } from "@/components/settings/two-factor-setup";
 import { ActiveSessions } from "@/components/settings/active-sessions";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { PageHeader } from "@/components/navigation/page-header";
 
 export default async function SecuritySettingsPage() {
   const session = await getSession();
@@ -12,21 +19,21 @@ export default async function SecuritySettingsPage() {
   }
 
   return (
-    <div className="container mx-auto py-8 px-4 max-w-2xl">
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold">Security Settings</h1>
-        <p className="text-muted-foreground mt-2">
-          Manage your security preferences
-        </p>
-      </div>
-
-      <div className="space-y-6">
+    <>
+      <PageHeader
+        title="Security"
+        description="Manage your security preferences"
+        breadcrumbs={[
+          { label: "Settings", href: "/settings" },
+          { label: "Security" },
+        ]}
+        accent
+      />
+      <div className="container mx-auto px-6 py-6 max-w-2xl space-y-6">
         <Card>
           <CardHeader>
-            <CardTitle>Two-Factor Authentication</CardTitle>
-            <CardDescription>
-              Add an extra layer of security to your account
-            </CardDescription>
+            <CardTitle>Two-factor authentication</CardTitle>
+            <CardDescription>Add an extra layer of security to your account.</CardDescription>
           </CardHeader>
           <CardContent>
             <TwoFactorSetup />
@@ -35,16 +42,14 @@ export default async function SecuritySettingsPage() {
 
         <Card>
           <CardHeader>
-            <CardTitle>Active Sessions</CardTitle>
-            <CardDescription>
-              Manage your active sessions across devices
-            </CardDescription>
+            <CardTitle>Active sessions</CardTitle>
+            <CardDescription>Manage your active sessions across devices.</CardDescription>
           </CardHeader>
           <CardContent>
             <ActiveSessions userId={session.user.id} />
           </CardContent>
         </Card>
       </div>
-    </div>
+    </>
   );
 }

app/status/page.tsx

@@ -15,6 +15,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import { Skeleton } from '@/components/ui/skeleton';
+import { SkeletonTable } from '@/components/ui/skeleton-helpers';
 import { EmptyState } from '@/components/ui/empty-state';
 import { StatusLight, type StatusLightState } from '@/components/ui/status-light';
 import { StatusBadge } from '@/components/ui/status-badge';
@@ -409,9 +410,7 @@ export default function StatusPage() {
           </CardHeader>
           <CardContent className="p-0">
             {!overview ? (
-              <div className="px-6 py-6">
-                <Skeleton className="h-32" />
-              </div>
+              <SkeletonTable rows={6} cols={5} />
             ) : overview.syncHealth.length === 0 ? (
               <div className="px-6 py-6">
                 <EmptyState

app/veeam-analysis/page.tsx

@@ -6,14 +6,7 @@ import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Progress } from '@/components/ui/progress';
 import { Skeleton } from '@/components/ui/skeleton';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
+import DataTable, { type Column } from '@/components/admin/DataTable';
 import {
   BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell,
 } from 'recharts';
@@ -140,60 +133,85 @@ function timeAgo(d: string | null) {
   return `${Math.floor(h / 24)}d ago`;
 }
 
-// ── Expandable ticket row ─────────────────────────────────────────────────────
-
-function TicketRow({ t, categoryFilter, onFilter }: {
-  t: TicketRow;
-  categoryFilter: string;
-  onFilter: (cat: string) => void;
-}) {
-  const [open, setOpen] = useState(false);
-  const catCfg = CATEGORY_CFG[t.problem_category];
+// ── Column defs + sub-row renderer ────────────────────────────────────────────
 
+const TICKET_COLUMNS: Column<TicketRow>[] = [
+  {
+    key: 'ticket_number',
+    label: 'Ticket',
+    render: (v) => <span className="num font-medium">{v}</span>,
+  },
+  {
+    key: 'company_name',
+    label: 'Client',
+    render: (v) => <span className="max-w-[140px] truncate inline-block">{v ?? '—'}</span>,
+  },
+  {
+    key: 'device_hostname',
+    label: 'Device',
+    render: (v) => <span className="num text-[11px]">{v ?? '—'}</span>,
+  },
+  {
+    key: 'problem_category',
+    label: 'Category',
+    render: (v) => {
+      const cfg = CATEGORY_CFG[v as string];
       return (
-    <>
-      <TableRow
-        className="cursor-pointer text-xs align-middle"
-        onClick={() => setOpen(o => !o)}
-      >
-        <TableCell className="w-6 pl-3">
-          {open
-            ? <ChevronDown className="h-3 w-3 text-muted-foreground" />
-            : <ChevronRight className="h-3 w-3 text-muted-foreground" />}
-        </TableCell>
-        <TableCell className="num font-medium">{t.ticket_number}</TableCell>
-        <TableCell className="max-w-[140px] truncate">{t.company_name ?? '—'}</TableCell>
-        <TableCell className="num text-[11px]">{t.device_hostname ?? '—'}</TableCell>
-        <TableCell>
         <Badge
           variant="outline"
-            style={{ borderColor: catCfg?.color, color: catCfg?.color }}
+          style={{ borderColor: cfg?.color, color: cfg?.color }}
           className="text-[10px] h-4 px-1.5 whitespace-nowrap"
         >
-            {catLabel(t.problem_category)}
+          {catLabel(v as string)}
         </Badge>
-        </TableCell>
-        <TableCell className="text-muted-foreground">{resLabel(t.resolution_type)}</TableCell>
-        <TableCell className="text-center">
-          {t.same_day_close
-            ? <CheckCircle2 className="h-3.5 w-3.5 text-emerald-500 mx-auto" />
-            : <span className="text-muted-foreground">—</span>}
-        </TableCell>
-        <TableCell className="text-right num">{parseFloat(t.hours_worked).toFixed(2)}h</TableCell>
-        <TableCell>
+      );
+    },
+  },
+  {
+    key: 'resolution_type',
+    label: 'Resolution',
+    render: (v) => <span className="text-muted-foreground">{resLabel(v as string)}</span>,
+  },
+  {
+    key: 'same_day_close',
+    label: 'Same-day',
+    render: (v) =>
+      v ? (
+        <CheckCircle2 className="h-3.5 w-3.5 text-emerald-500" />
+      ) : (
+        <span className="text-muted-foreground">—</span>
+      ),
+  },
+  {
+    key: 'hours_worked',
+    label: 'Hours',
+    render: (v) => <span className="num">{parseFloat(v as string).toFixed(2)}h</span>,
+  },
+  {
+    key: 'complexity',
+    label: 'Complexity',
+    render: (v) => (
       <Badge
         variant="outline"
-            style={{ borderColor: COMPLEXITY_COLOR[t.complexity] ?? '#6b7280', color: COMPLEXITY_COLOR[t.complexity] ?? '#6b7280' }}
+        style={{
+          borderColor: COMPLEXITY_COLOR[v as string] ?? '#6b7280',
+          color: COMPLEXITY_COLOR[v as string] ?? '#6b7280',
+        }}
         className="text-[10px] h-4 px-1.5"
       >
-            {t.complexity}
+        {v}
       </Badge>
-        </TableCell>
-        <TableCell className="text-muted-foreground num">{timeAgo(t.ticket_created_at)}</TableCell>
-      </TableRow>
-      {open && (
-        <TableRow className="bg-muted/5">
-          <TableCell colSpan={10} className="px-8 pb-3 pt-2">
+    ),
+  },
+  {
+    key: 'ticket_created_at',
+    label: 'Age',
+    render: (v) => <span className="text-muted-foreground num">{timeAgo(v as string)}</span>,
+  },
+];
+
+function renderTicketSubRow(t: TicketRow) {
+  return (
     <div className="grid grid-cols-2 gap-4 text-xs">
       <div className="space-y-1.5">
         {t.work_summary && (
@@ -211,9 +229,15 @@ function TicketRow({ t, categoryFilter, onFilter }: {
           )}
           {t.backup_completed_before_tech != null && (
             <span className="flex items-center gap-1">
-                      {t.backup_completed_before_tech
-                        ? <><CheckCircle2 className="h-3 w-3 text-green-500" /> Backup auto-completed</>
-                        : <><Wrench className="h-3 w-3" /> Tech action required</>}
+              {t.backup_completed_before_tech ? (
+                <>
+                  <CheckCircle2 className="h-3 w-3 text-emerald-500" /> Backup auto-completed
+                </>
+              ) : (
+                <>
+                  <Wrench className="h-3 w-3" /> Tech action required
+                </>
+              )}
             </span>
           )}
           {t.preventable != null && (
@@ -230,10 +254,6 @@ function TicketRow({ t, categoryFilter, onFilter }: {
         </div>
       )}
     </div>
-          </TableCell>
-        </TableRow>
-      )}
-    </>
   );
 }
 
@@ -675,60 +695,22 @@ export default function VeeamAnalysisPage() {
                   <RefreshCw className="h-3.5 w-3.5" />
                 </Button>
               </CardHeader>
-              <CardContent className="p-0">
-                <Table>
-                  <TableHeader className="bg-muted/50">
-                    <TableRow>
-                      <TableHead className="w-6" />
-                      <TableHead>Ticket</TableHead>
-                      <TableHead>Client</TableHead>
-                      <TableHead>Device</TableHead>
-                      <TableHead>Category</TableHead>
-                      <TableHead>Resolution</TableHead>
-                      <TableHead className="text-center">Same-day</TableHead>
-                      <TableHead className="text-right">Hours</TableHead>
-                      <TableHead>Complexity</TableHead>
-                      <TableHead>Age</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {data.tickets.length > 0
-                      ? data.tickets.map(t => (
-                          <TicketRow
-                            key={t.ticket_number}
-                            t={t}
-                            categoryFilter={catFilter}
-                            onFilter={handleCatFilter}
+              <CardContent className="px-0 pb-3">
+                <DataTable<TicketRow>
+                  columns={TICKET_COLUMNS}
+                  data={data.tickets}
+                  totalCount={data.total}
+                  page={page}
+                  pageSize={data.limit ?? 50}
+                  onPageChange={(next) => {
+                    setPage(next);
+                    fetchData(catFilter, next);
+                  }}
+                  emptyTitle="No analyzed tickets yet"
+                  emptyDescription="Run the analysis above to populate this list."
+                  getRowCanExpand={() => true}
+                  renderSubRow={renderTicketSubRow}
                 />
-                        ))
-                      : (
-                        <TableRow>
-                          <TableCell colSpan={10} className="px-4 py-10 text-center text-sm text-muted-foreground">
-                            No analyzed tickets yet — run the analysis above.
-                          </TableCell>
-                        </TableRow>
-                      )}
-                  </TableBody>
-                </Table>
-
-                {/* Pagination */}
-                {totalPages > 1 && (
-                  <div className="flex items-center justify-between px-4 py-3 border-t text-xs text-muted-foreground">
-                    <span>Page {page} of {totalPages}</span>
-                    <div className="flex gap-2">
-                      <Button
-                        variant="outline" size="sm"
-                        disabled={page <= 1}
-                        onClick={() => { setPage(p => p - 1); fetchData(catFilter, page - 1); }}
-                      >Previous</Button>
-                      <Button
-                        variant="outline" size="sm"
-                        disabled={page >= totalPages}
-                        onClick={() => { setPage(p => p + 1); fetchData(catFilter, page + 1); }}
-                      >Next</Button>
-                    </div>
-                  </div>
-                )}
               </CardContent>
             </Card>
           )}