+
+
+
+ );
+}
+
+export default AppLayout;
diff --git a/admin-front/src/components/ui/avatar.tsx b/admin-front/src/components/ui/avatar.tsx
new file mode 100644
index 00000000..23e88913
--- /dev/null
+++ b/admin-front/src/components/ui/avatar.tsx
@@ -0,0 +1,47 @@
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+const Avatar = React.forwardRef<
+ React.ElementRef
+
+
+
+
+
+
+
+
+
+ + Admin Plane +
+ + Tenant isolation & least privilege by default + +
+
+
+ Session TTL: 15m admin
+
+
+
+
+
+));
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes
+
+ );
+}
+
+export default AuditLogsPage;
diff --git a/admin-front/src/features/auth/AuthPage.tsx b/admin-front/src/features/auth/AuthPage.tsx
new file mode 100644
index 00000000..015bbb67
--- /dev/null
+++ b/admin-front/src/features/auth/AuthPage.tsx
@@ -0,0 +1,111 @@
+import { ArrowRight, Fingerprint, Smartphone, Sparkles } from "lucide-react";
+
+const flows = [
+ {
+ title: "Admin login",
+ description:
+ "Enforce short TTL and step-up MFA. Keep admin session separate from app session.",
+ pill: "15m TTL",
+ },
+ {
+ title: "Tenant pick",
+ description:
+ "Admin chooses target tenant before hitting APIs. Propagate X-Tenant-ID on every call.",
+ pill: "Header-ready",
+ },
+ {
+ title: "Device approval",
+ description:
+ "If app session exists and user opts in, use push/deeplink approval as MFA replacement.",
+ pill: "App session",
+ },
+];
+
+function AuthPage() {
+ return (
+
+
+
+
+
+ + Audit stream +
++ Observe admin actions per tenant +
++ ClickHouse-backed feed. Filter by tenant, actor, action, and + rate-limit status. Enforce admin-only access under /admin. +
+
+
+
+
+
+
+
+
+
+
+
+
+ {auditFilters.map((filter) => (
+
+
+
+ {auditRows.map((row) => (
+
+
+
+ ))}
+ {row.action}
+ {row.tenant}
+ {row.actor}
+
+
+ {row.result}
+
+ {row.ts}
+
+
+
+
+
+ + Guard rails +
+Tenant admin only
++ Enforce Tenant Admin middleware and admin session TTL before + surfacing any audit feed. Super Admin role can bypass tenant + filter when needed. +
+
+
+ + Export rules +
++ Rate-limit sensitive exports +
++ Keep export endpoints behind admin-only routes with ClickHouse + query limits. Log download attempts with IP, role, and tenant + scope. +
+
+
+
+
+
+ {flows.map((flow) => (
+
+
+
+
+
+ );
+}
+
+export default AuthPage;
diff --git a/admin-front/src/features/clients/ClientConsentsPage.tsx b/admin-front/src/features/clients/ClientConsentsPage.tsx
new file mode 100644
index 00000000..41995b9f
--- /dev/null
+++ b/admin-front/src/features/clients/ClientConsentsPage.tsx
@@ -0,0 +1,259 @@
+import {
+ ArrowLeft,
+ ChevronLeft,
+ ChevronRight,
+ Filter,
+ Search,
+} 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";
+import { Input } from "../../components/ui/input";
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "../../components/ui/table";
+
+const rows = [
+ {
+ initials: "JD",
+ name: "John Doe",
+ email: "john.doe@example.com",
+ scopes: ["openid", "profile", "email", "offline_access"],
+ lastAuth: "Oct 24, 2023 14:22",
+ },
+ {
+ initials: "AS",
+ name: "Alice Smith",
+ email: "alice.smith@devmail.com",
+ scopes: ["openid", "profile"],
+ lastAuth: "Oct 23, 2023 09:15",
+ },
+ {
+ initials: "RJ",
+ name: "Robert Johnson",
+ email: "r.johnson@corporate.org",
+ scopes: ["openid", "profile", "groups"],
+ lastAuth: "Oct 21, 2023 18:45",
+ },
+ {
+ initials: "ML",
+ name: "Maria Lopez",
+ email: "maria.l@provider.net",
+ scopes: ["openid", "email"],
+ lastAuth: "Oct 20, 2023 11:30",
+ },
+];
+
+function ClientConsentsPage() {
+ return (
+
+
+
+
+ + Admin auth +
+Admin auth guardrails
++ Build the admin-only login flow first, keeping app login separate. + Respect the “fallback only when user chooses” rule for SMS/email + vs app approval. +
+
+
+ IDP session placeholder
+
+
+
+
+
+ ))}
+
+ {flow.pill}
+
+ {flow.title}
++ {flow.description} +
+
+
+
+
+ + App session as MFA replacement +
++ If the admin keeps the mobile app signed in and opts in, use + push/deeplink approval instead of OTP. Otherwise fall back to + SMS/email based on user choice. +
+
+
+
+
+ + Keep admin sessions short +
++ Default admin TTL is 15 minutes. Show countdown and nudge re-auth + with step-up MFA when critical actions (rotate secret, export logs) + happen. +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default ClientConsentsPage;
diff --git a/admin-front/src/features/clients/ClientDetailsPage.tsx b/admin-front/src/features/clients/ClientDetailsPage.tsx
new file mode 100644
index 00000000..43a6b012
--- /dev/null
+++ b/admin-front/src/features/clients/ClientDetailsPage.tsx
@@ -0,0 +1,194 @@
+import { AlertCircle, Copy, Eye, Link2, Shield, Workflow } from "lucide-react";
+import { Link } from "react-router-dom";
+import { Badge } from "../../components/ui/badge";
+import { Button } from "../../components/ui/button";
+import { Card, CardContent } from "../../components/ui/card";
+import { Separator } from "../../components/ui/separator";
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableRow,
+} from "../../components/ui/table";
+
+const endpoints = [
+ {
+ label: "Discovery Endpoint",
+ value: "https://auth.acme-idp.com/.well-known/openid-configuration",
+ },
+ { label: "Issuer URL", value: "https://auth.acme-idp.com/" },
+ {
+ label: "Authorization Endpoint",
+ value: "https://auth.acme-idp.com/oauth2/authorize",
+ },
+ { label: "Token Endpoint", value: "https://auth.acme-idp.com/oauth2/token" },
+ {
+ label: "UserInfo Endpoint",
+ value: "https://auth.acme-idp.com/oauth2/userinfo",
+ },
+];
+
+function ClientDetailsPage() {
+ return (
+
+
+
+
+
+
+
+
+
+
+ + User Consent Grants +
++ OIDC Relying Party 사용자 권한을 검토·관리합니다. +
+
+ Active
+
+
+
+ Overview
+
+
+ Consent & Users
+
+
+ Settings
+
+
+
+
+
+
+
+
+ Status:
+
+
+
+
+
+
+
+ + Showing 1 to{" "} + 4 of{" "} + 1,250 users +
+
+
+
+
+
+
+
+
+
+
+ 1,250
+
+
+
+
+ 4,812
+
+
+
+
+ 3.8
+
+
+
+ + Active Grants +
++ Total Scopes Issued +
++ Avg. Scopes per User +
+
+
+ );
+}
+
+export default ClientDetailsPage;
diff --git a/admin-front/src/features/clients/ClientGeneralPage.tsx b/admin-front/src/features/clients/ClientGeneralPage.tsx
new file mode 100644
index 00000000..e881e954
--- /dev/null
+++ b/admin-front/src/features/clients/ClientGeneralPage.tsx
@@ -0,0 +1,206 @@
+import { Info, Search, Shield, Sparkles, Upload } 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";
+import { Input } from "../../components/ui/input";
+import { Label } from "../../components/ui/label";
+import { Separator } from "../../components/ui/separator";
+import { Textarea } from "../../components/ui/textarea";
+import { cn } from "../../lib/utils";
+
+const meta = {
+ clientId: "client_82910_ax99",
+ created: "2023-10-12 10:45",
+ updated: "2 hours ago",
+};
+
+function ClientGeneralPage() {
+ return (
+
+
+
+
+
+ Relying Parties
+
+ /
+ 클라이언트 상세
+
+
+
+ Active
+
+
+
+
+ + Developer Portal App +
++ OIDC 자격 증명과 엔드포인트를 관리합니다. +
+
+
+ Overview
+
+
+ Consent & Users
+
+
+ Settings
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 클라이언트 자격 증명
+
+
+
+ + Client ID +
+721948305612-oidc-client-prod
+
+
+ + Client Secret +
++ •••••••••••••••• +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ OIDC 엔드포인트
+
+
+
+
+
+
+
+
+
+
+ 보안 메모
++ 엔드포인트는 읽기 전용으로 유지하고, 비밀키 재발행/복사는 감사 + 로그와 연계하세요. +
+
+
+
+
+ + 비밀키 재발행 작업에는 관리자 세션 TTL 확인과 레이트리밋, 알림 연동을 + 권장합니다. +
+
+
+
+
+
+
+ 보안 설정
+
+ 클라이언트 유형을 선택하세요. 비밀키를 안전하게 보관할 수 없는 경우
+ Public을 선택합니다.
+
+
+
+
+
+
+
+
+ );
+}
+
+export default ClientGeneralPage;
diff --git a/admin-front/src/features/clients/ClientsPage.tsx b/admin-front/src/features/clients/ClientsPage.tsx
new file mode 100644
index 00000000..c3202799
--- /dev/null
+++ b/admin-front/src/features/clients/ClientsPage.tsx
@@ -0,0 +1,388 @@
+import {
+ Activity,
+ BookOpenText,
+ Copy,
+ Laptop,
+ Plus,
+ Search,
+ ServerCog,
+ ShieldHalf,
+} from "lucide-react";
+import { Link } from "react-router-dom";
+import {
+ Avatar,
+ AvatarFallback,
+ AvatarImage,
+} from "../../components/ui/avatar";
+import { Badge } from "../../components/ui/badge";
+import { Button } from "../../components/ui/button";
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from "../../components/ui/card";
+import { Input } from "../../components/ui/input";
+import { Separator } from "../../components/ui/separator";
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "../../components/ui/table";
+import { cn } from "../../lib/utils";
+
+const clients = [
+ {
+ name: "Customer Portal",
+ type: "Confidential",
+ clientId: "cli_481...8k2",
+ status: "Active",
+ created: "2023-10-12",
+ icon:
+
+
+
+
+
+ Applications
+
+ /
+ Customer Support Portal
+
+
+
+ + Client Details +
++ RP 설정과 메타데이터를 관리합니다. +
+
+
+ Active
+
+
+
+
+ Overview
+
+
+ Consent & Users
+
+
+ Settings
+
+
+
+
+
+
+
+
+
+
+ Application Identity
+
+
+ 앱 이름과 설명, 로고를 설정합니다. 필수 필드는 * 로 표시됩니다.
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + PNG/SVG URL을 입력하세요. +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Client ID
+
+ {meta.clientId}
+
+
+
+ Created On
+
+ {meta.created}
+
+
+
+ Last Updated
+
+ {meta.updated}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default ClientsPage;
diff --git a/admin-front/src/features/dashboard/DashboardPage.tsx b/admin-front/src/features/dashboard/DashboardPage.tsx
new file mode 100644
index 00000000..b7e692c7
--- /dev/null
+++ b/admin-front/src/features/dashboard/DashboardPage.tsx
@@ -0,0 +1,243 @@
+import {
+ Activity,
+ ArrowRight,
+ Building2,
+ CheckCircle2,
+ LineChart,
+ Radio,
+ ShieldCheck,
+ Sparkles,
+} from "lucide-react";
+
+const guardHighlights = [
+ {
+ title: "Tenant isolation",
+ body: "All admin calls expect X-Tenant-ID and are prepared for tenant-aware headers.",
+ metric: "Header guard",
+ accent: "active",
+ },
+ {
+ title: "Admin TTL",
+ body: "Session budget kept short for admins. App session vs admin session split is explicit.",
+ metric: "15m default",
+ accent: "ttl",
+ },
+ {
+ title: "Audit-first",
+ body: "Every management action should log to ClickHouse. Hooks in place for later wiring.",
+ metric: "per-action",
+ accent: "audit",
+ },
+];
+
+const stackReadiness = [
+ "React 19 + Vite 7, strict TS, Router v6 data router.",
+ "TanStack Query 5 provider ready with sane defaults.",
+ "Axios client stub with bearer + tenant header injector.",
+ "Tailwind v4 tokens tuned for admin dark plane.",
+ "React Hook Form + Zod planned for client forms.",
+ "IdP-neutral auth hook point reserved for role guard.",
+];
+
+const nextSteps = [
+ "Add IdP-neutral OIDC/OAuth auth layer and enforce admin role in RequireAuth.",
+ "Persist tenant picklist and feed X-Tenant-ID for every admin call.",
+ "Add shadcn/ui primitives for forms and tables; lock lint/format.",
+];
+
+function DashboardPage() {
+ return (
+
+
+
+
+ Relying Parties
+
+
+ OIDC 클라이언트, 인증 방식, 리다이렉트 URI,
+ 비밀키 재발행을 감사 로그와 함께 관리합니다.
+
+
+ + RP registry +
+
+
+
+
+
+
+
+
+
+ 테넌트: 선택됨
+ 관리자 세션
+
+
+ {stats.map((item) => (
+
+
+
+ {item.label}
+
+
+
+ ))}
+
+
+
+ {item.value}
+
+
+ {item.delta}
+
+
+
+
+ 클라이언트 목록
+
+
+
+
+
+
+
+ Showing 1 to 3 of 24 clients
+
+
+
+
+
+
+
+
+
+ Need help with OIDC configuration?
+
+
+ Developer guides for Confidential/Public clients,
+ redirect URIs, and auth methods.
+
+
+
+
+
+
+
+
+
+ Owner
+
+ Tenant admin on-call
+
+
+
+
+
+
+
+
+
+
+
+
+ + Docs & Examples +
++ Includes PKCE, client_secret_basic, redirect + URI validation tips. +
+
+
+ AR
+
+
+
+
+ AI Admin Bot
++ admin@brsw.kr +
+
+ Role: Tenant Admin
+ Scope: TENANT-12
+
+
+
+
+
+
+
+ {guardHighlights.map((item) => (
+
+
+
+
+
+
+
+
+ );
+}
+
+export default DashboardPage;
diff --git a/admin-front/src/index.css b/admin-front/src/index.css
new file mode 100644
index 00000000..20ef470f
--- /dev/null
+++ b/admin-front/src/index.css
@@ -0,0 +1,83 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ :root {
+ --background: 210 25% 6%;
+ --foreground: 210 35% 96%;
+ --card: 215 32% 9%;
+ --card-foreground: 210 35% 96%;
+ --popover: 215 32% 9%;
+ --popover-foreground: 210 35% 96%;
+ --primary: 209 79% 52%;
+ --primary-foreground: 210 35% 96%;
+ --secondary: 215 25% 16%;
+ --secondary-foreground: 210 35% 96%;
+ --muted: 215 15% 65%;
+ --muted-foreground: 215 15% 65%;
+ --accent: 42 95% 57%;
+ --accent-foreground: 215 25% 10%;
+ --destructive: 0 84% 60%;
+ --destructive-foreground: 210 35% 96%;
+ --border: 215 25% 24%;
+ --input: 215 25% 24%;
+ --ring: 209 79% 52%;
+ --radius: 0.75rem;
+ }
+
+ .light {
+ --background: 0 0% 98%;
+ --foreground: 223 25% 12%;
+ --card: 0 0% 100%;
+ --card-foreground: 223 25% 12%;
+ --popover: 0 0% 100%;
+ --popover-foreground: 223 25% 12%;
+ --primary: 209 79% 52%;
+ --primary-foreground: 0 0% 100%;
+ --secondary: 220 17% 94%;
+ --secondary-foreground: 223 25% 20%;
+ --muted: 223 15% 45%;
+ --muted-foreground: 223 15% 45%;
+ --accent: 40 96% 62%;
+ --accent-foreground: 223 25% 12%;
+ --destructive: 0 84% 60%;
+ --destructive-foreground: 0 0% 100%;
+ --border: 220 17% 90%;
+ --input: 220 17% 90%;
+ --ring: 209 79% 52%;
+ }
+
+ * {
+ @apply border-border;
+ }
+
+ body {
+ @apply min-h-screen bg-background font-sans text-foreground antialiased;
+ background-image: radial-gradient(
+ circle at 10% 18%,
+ rgba(54, 211, 153, 0.16),
+ transparent 28%
+ ),
+ radial-gradient(
+ circle at 78% 4%,
+ rgba(249, 168, 38, 0.14),
+ transparent 24%
+ ),
+ radial-gradient(
+ circle at 50% 90%,
+ rgba(54, 211, 153, 0.08),
+ transparent 30%
+ );
+ }
+
+ a {
+ @apply text-inherit no-underline;
+ }
+}
+
+@layer components {
+ .glass-panel {
+ @apply rounded-2xl border border-border bg-card/85 shadow-card backdrop-blur;
+ }
+}
diff --git a/admin-front/src/lib/apiClient.ts b/admin-front/src/lib/apiClient.ts
new file mode 100644
index 00000000..80927a89
--- /dev/null
+++ b/admin-front/src/lib/apiClient.ts
@@ -0,0 +1,31 @@
+import axios from "axios";
+
+const apiClient = axios.create({
+ baseURL: import.meta.env.VITE_ADMIN_API_BASE ?? "/api/admin",
+});
+
+apiClient.interceptors.request.use((config) => {
+ // TODO: IdP 중립 Auth 레이어 연동 시 세션 토큰을 주입한다.
+ const sessionToken = window.localStorage.getItem("admin_session");
+ if (sessionToken) {
+ config.headers.Authorization = `Bearer ${sessionToken}`;
+ }
+
+ // TODO: 테넌트 선택 값을 보관하고 헤더로 전달한다.
+ const tenantId = window.localStorage.getItem("admin_tenant");
+ if (tenantId) {
+ config.headers["X-Tenant-ID"] = tenantId;
+ }
+
+ return config;
+});
+
+apiClient.interceptors.response.use(
+ (response) => response,
+ (error) => {
+ // TODO: 401/403 응답 시 로그인/재인증 플로우로 리다이렉션한다.
+ return Promise.reject(error);
+ },
+);
+
+export default apiClient;
diff --git a/admin-front/src/lib/utils.ts b/admin-front/src/lib/utils.ts
new file mode 100644
index 00000000..365058ce
--- /dev/null
+++ b/admin-front/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
diff --git a/admin-front/src/main.tsx b/admin-front/src/main.tsx
new file mode 100644
index 00000000..5bc28ec7
--- /dev/null
+++ b/admin-front/src/main.tsx
@@ -0,0 +1,21 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { RouterProvider } from "react-router-dom";
+import { queryClient } from "./app/queryClient";
+import { router } from "./app/routes";
+import "./index.css";
+
+const rootElement = document.getElementById("root");
+
+if (!rootElement) {
+ throw new Error("Root element not found");
+}
+
+createRoot(rootElement).render(
+
+
+
+
+
+
+ + Build the admin plane with{" "} + tenant-aware{" "} + defaults and{" "} + + least privilege + {" "} + UX. +
++ Route, query, and styling scaffolds are in place. Use this canvas + to ship RP registry, audit exploration, and guarded login aligned + with issue #60 while keeping providers swappable. +
+
+
+ Router + Query wired
+
+
+ Admin namespace only
+
+
+ Auth hook pending
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ))}
+
+
+
+ {item.metric}
+
+
+ {item.accent}
+
+
+
+ {item.title}
+{item.body}
+
+
+
+
+
+
+
+
+ + Stack readiness +
+Matches issue #60
+
+ {stackReadiness.map((item) => (
+
+
+
+ ))}
+ {item}
+
+
+ + Next actions +
++ Ship the first guarded flows +
+
+ {nextSteps.map((item, idx) => (
+
+
+
+ ))}
+
+ {idx + 1}
+
+ {item}
+
+
+
+
+ + Ops board +
+What to prototype next
+
+
+ Audit → ClickHouse
+
+
+ RP registry
+
+
+
+
+
+
+
+
+ + RP registration funnel +
++ Visualize create → secret rotate → redirect URI edits per tenant. +
+
+
+
+
+ Admin action stream
++ Live feed of admin API calls with per-action tenant, actor, and + rate-limit outcome. +
+
+
+
+
+ Admin login journey
++ Outline SMS + app-based MFA choice and emphasize “admin session” + TTL with logout. +
+