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>

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>
-  );
-}