샘플 adminfront, devfront 구성. ory-keto-migrate 오류 해결

adminfront/src/features/overview/GlobalOverviewPage.tsx

@@ -0,0 +1,170 @@
+import {
+  Activity,
+  ArrowUpRight,
+  Box,
+  Database,
+  ShieldCheck,
+  Users,
+} from "lucide-react";
+import { Link } from "react-router-dom";
+import { Badge } from "../../components/ui/badge";
+import { Button } from "../../components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../components/ui/card";
+
+const summaryCards = [
+  {
+    label: "Total Tenants",
+    value: "-",
+    hint: "Tenant-aware core",
+    icon: Users,
+  },
+  {
+    label: "OIDC Clients",
+    value: "-",
+    hint: "Hydra registry",
+    icon: ShieldCheck,
+  },
+  {
+    label: "Audit Events (24h)",
+    value: "-",
+    hint: "ClickHouse stream",
+    icon: Activity,
+  },
+  {
+    label: "Policy Gate",
+    value: "Planned",
+    hint: "Keto + Admin checks",
+    icon: Database,
+  },
+];
+
+function GlobalOverviewPage() {
+  return (
+    <div className="space-y-10">
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div className="space-y-2">
+          <p className="text-xs uppercase tracking-[0.2em] text-[var(--color-muted)]">
+            Global Overview
+          </p>
+          <h2 className="text-3xl font-semibold">
+            Tenant-independent control plane
+          </h2>
+          <p className="text-sm text-[var(--color-muted)]">
+            모든 테넌트 공통 지표와 정책 상태를 한 곳에서 확인합니다.
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Badge variant="muted">IDP: Ory primary</Badge>
+          <Badge variant="muted">Fallback: Descope</Badge>
+        </div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+        {summaryCards.map(({ label, value, hint, icon: Icon }) => (
+          <Card key={label} className="bg-[var(--color-panel)]">
+            <CardHeader className="flex flex-row items-center justify-between pb-2">
+              <CardDescription>{label}</CardDescription>
+              <div className="rounded-full border border-[var(--color-border)] p-2 text-[var(--color-muted)]">
+                <Icon size={16} />
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-semibold">{value}</div>
+              <p className="mt-1 text-xs text-[var(--color-muted)]">{hint}</p>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-[1.4fr,1fr]">
+        <Card className="bg-[var(--color-panel)]">
+          <CardHeader>
+            <CardTitle className="text-xl">Admin playbook</CardTitle>
+            <CardDescription>
+              운영 정책, 레이트리밋, 감사 로그의 기본 룰을 요약합니다.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3 text-sm text-[var(--color-muted)]">
+            <div className="flex items-start gap-3">
+              <div className="mt-1 rounded-full border border-[var(--color-border)] p-2">
+                <ShieldCheck size={14} />
+              </div>
+              <div>
+                <p className="font-semibold text-foreground">
+                  Backend-only IDP access
+                </p>
+                <p>
+                  모든 IDP 호출은 backend를 통해서만 수행하며, Hydra/Kratos
+                  admin 포트는 외부에 노출하지 않습니다.
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3">
+              <div className="mt-1 rounded-full border border-[var(--color-border)] p-2">
+                <Box size={14} />
+              </div>
+              <div>
+                <p className="font-semibold text-foreground">
+                  Tenant isolation
+                </p>
+                <p>
+                  Tenant 헤더와 감사 로그 규칙을 기본 적용하며, 향후 Keto
+                  정책으로 확장 예정입니다.
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-[var(--color-panel)]">
+          <CardHeader>
+            <CardTitle className="text-xl">빠른 이동</CardTitle>
+            <CardDescription>
+              주요 운영 화면으로 바로 이동합니다.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <Button
+              asChild
+              className="w-full justify-between"
+              variant="outline"
+            >
+              <Link to="/tenants/new">
+                테넌트 추가
+                <ArrowUpRight size={16} />
+              </Link>
+            </Button>
+            <Button
+              asChild
+              className="w-full justify-between"
+              variant="outline"
+            >
+              <Link to="/audit-logs">
+                감사 로그 보기
+                <ArrowUpRight size={16} />
+              </Link>
+            </Button>
+            <Button
+              asChild
+              className="w-full justify-between"
+              variant="outline"
+            >
+              <Link to="/dashboard">
+                테넌트 대시보드
+                <ArrowUpRight size={16} />
+              </Link>
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
+
+export default GlobalOverviewPage;