refactor(admin): split email-templates page.tsx into colocated components

Extract tabs nav, templates grid, editor split view, settings form,
logs table, and data-loading/actions hook into _components/ and
_hooks/. page.tsx reduced from 816 to 88 LOC.

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

admin-compliance/app/sdk/email-templates/_components/TemplateCard.tsx

@@ -0,0 +1,49 @@
+'use client'
+
+import { CATEGORIES, EmailTemplate, STATUS_BADGE } from '../_types'
+
+interface TemplateCardProps {
+  template: EmailTemplate
+  onEdit: () => void
+}
+
+export function TemplateCard({ template, onEdit }: TemplateCardProps) {
+  const cat = CATEGORIES[template.category] || CATEGORIES.general
+  const version = template.latest_version
+  const status = version ? (STATUS_BADGE[version.status] || STATUS_BADGE.draft) : STATUS_BADGE.draft
+
+  return (
+    <div
+      className="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer"
+      onClick={onEdit}
+    >
+      <div className="flex items-start justify-between mb-2">
+        <div>
+          <h3 className="font-medium text-gray-900 text-sm">{template.name}</h3>
+          <span className={`inline-block mt-1 px-2 py-0.5 rounded text-xs ${cat.bgColor} ${cat.color}`}>
+            {cat.label}
+          </span>
+        </div>
+        <span className={`px-2 py-0.5 rounded text-xs ${status.color}`}>{status.label}</span>
+      </div>
+      {template.description && (
+        <p className="text-xs text-gray-500 mt-2 line-clamp-2">{template.description}</p>
+      )}
+      <div className="mt-3 flex flex-wrap gap-1">
+        {(template.variables || []).slice(0, 4).map(v => (
+          <span key={v} className="px-1.5 py-0.5 bg-gray-50 text-gray-500 rounded text-xs font-mono">
+            {`{{${v}}}`}
+          </span>
+        ))}
+        {(template.variables || []).length > 4 && (
+          <span className="text-xs text-gray-400">+{template.variables.length - 4}</span>
+        )}
+      </div>
+      {version && (
+        <div className="mt-3 text-xs text-gray-400">
+          v{version.version} &middot; {version.created_at ? new Date(version.created_at).toLocaleDateString('de-DE') : ''}
+        </div>
+      )}
+    </div>
+  )
+}