refactor(admin): split dsr page.tsx into colocated components

Extract TabNavigation, StatCard, RequestCard, FilterBar, DSRCreateModal,
DSRDetailPanel, DSRHeaderActions, and banner components (LoadingSpinner,
SettingsTab, OverdueAlert, DeadlineInfoBox, EmptyState) into _components/
so page.tsx drops from 1019 to 247 LOC (under the 300 soft target).

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

admin-compliance/app/sdk/dsr/_components/StatCard.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import React from 'react'
+
+export function StatCard({
+  label,
+  value,
+  color = 'gray',
+  icon,
+  trend
+}: {
+  label: string
+  value: number | string
+  color?: 'gray' | 'blue' | 'yellow' | 'red' | 'green' | 'purple'
+  icon?: React.ReactNode
+  trend?: { value: number; label: string }
+}) {
+  const colorClasses = {
+    gray: 'border-gray-200 text-gray-900',
+    blue: 'border-blue-200 text-blue-600',
+    yellow: 'border-yellow-200 text-yellow-600',
+    red: 'border-red-200 text-red-600',
+    green: 'border-green-200 text-green-600',
+    purple: 'border-purple-200 text-purple-600'
+  }
+
+  return (
+    <div className={`bg-white rounded-xl border ${colorClasses[color]} p-6`}>
+      <div className="flex items-start justify-between">
+        <div>
+          <div className={`text-sm ${color === 'gray' ? 'text-gray-500' : `text-${color}-600`}`}>
+            {label}
+          </div>
+          <div className={`text-3xl font-bold mt-1 ${colorClasses[color].split(' ')[1]}`}>
+            {value}
+          </div>
+          {trend && (
+            <div className={`text-xs mt-1 ${trend.value >= 0 ? 'text-green-600' : 'text-red-600'}`}>
+              {trend.value >= 0 ? '+' : ''}{trend.value} {trend.label}
+            </div>
+          )}
+        </div>
+        {icon && (
+          <div className={`w-10 h-10 rounded-lg flex items-center justify-center bg-${color}-50`}>
+            {icon}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}