feat: integrate orgfront and expose internal ids

orgfront/src/components/common/ForbiddenMessage.tsx

@@ -0,0 +1,51 @@
+import { ShieldAlert } from "lucide-react";
+import { useAuth } from "react-oidc-context";
+import { t } from "../../lib/i18n";
+import { resolveProfileRole } from "../../lib/role";
+
+interface Props {
+  resourceToken: "audit" | "clients";
+}
+
+export function ForbiddenMessage({ resourceToken }: Props) {
+  const auth = useAuth();
+  const rawProfile = auth.user?.profile as Record<string, unknown> | undefined;
+  const role = resolveProfileRole(rawProfile);
+
+  let explanation = t(
+    "msg.dev.forbidden.default",
+    "해당 리소스에 접근할 권한이 없습니다. 관리자에게 문의하세요.",
+  );
+
+  if (role === "rp_admin") {
+    explanation = t(
+      "msg.dev.forbidden.rp_admin",
+      "RP 관리자는 담당 앱의 리소스만 조회할 수 있습니다.",
+    );
+  } else if (role === "tenant_admin") {
+    explanation = t(
+      "msg.dev.forbidden.tenant_admin",
+      "테넌트 관리자 권한이 올바르게 설정되지 않았거나 만료되었습니다.",
+    );
+  } else if (role === "user" || role === "tenant_member") {
+    explanation = t(
+      "msg.dev.forbidden.user",
+      "일반 사용자는 관리자 화면에 접근할 수 없습니다.",
+    );
+  }
+
+  const title = t("msg.dev.forbidden.title", "{{resource}} 접근 권한 없음", {
+    resource:
+      resourceToken === "audit"
+        ? t("ui.dev.audit.title", "Audit Logs")
+        : t("ui.dev.clients.registry.subtitle", "연동 앱"),
+  });
+
+  return (
+    <div className="flex flex-col items-center justify-center p-12 text-center text-red-500/90 gap-3">
+      <ShieldAlert className="h-10 w-10 text-red-500/80 mb-2" />
+      <h3 className="text-xl font-bold text-foreground">{title}</h3>
+      <p className="text-sm text-muted-foreground max-w-md">{explanation}</p>
+    </div>
+  );
+}

orgfront/src/components/common/LanguageSelector.tsx

@@ -0,0 +1,53 @@
+import { useState } from "react";
+import { t } from "../../lib/i18n";
+
+const LOCALE_STORAGE_KEY = "locale";
+const SUPPORTED_LOCALES = ["ko", "en"] as const;
+
+type Locale = (typeof SUPPORTED_LOCALES)[number];
+
+function resolveLocale(): Locale {
+  if (typeof window === "undefined") {
+    return "ko";
+  }
+
+  const stored = window.localStorage.getItem(LOCALE_STORAGE_KEY);
+  if (stored === "ko" || stored === "en") {
+    return stored;
+  }
+
+  const pathLocale = window.location.pathname.split("/")[1];
+  if (pathLocale === "ko" || pathLocale === "en") {
+    return pathLocale;
+  }
+
+  const browserLang = window.navigator.language.toLowerCase();
+  return browserLang.startsWith("ko") ? "ko" : "en";
+}
+
+function LanguageSelector() {
+  const [locale, setLocale] = useState<Locale>(resolveLocale());
+
+  const handleChange = (next: Locale) => {
+    if (next === locale) {
+      return;
+    }
+    window.localStorage.setItem(LOCALE_STORAGE_KEY, next);
+    setLocale(next);
+    window.location.reload();
+  };
+
+  return (
+    <select
+      value={locale}
+      onChange={(event) => handleChange(event.target.value as Locale)}
+      className="rounded-full border border-border bg-transparent px-3 py-2 text-sm text-muted-foreground transition hover:bg-muted/20"
+      aria-label={t("ui.common.language", "언어")}
+    >
+      <option value="ko">{t("ui.common.language_ko", "한국어")}</option>
+      <option value="en">{t("ui.common.language_en", "English")}</option>
+    </select>
+  );
+}
+
+export default LanguageSelector;

orgfront/src/components/layout/AppLayout.tsx

@@ -0,0 +1,567 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+  BadgeCheck,
+  ChevronDown,
+  LogOut,
+  Moon,
+  NotebookTabs,
+  ShieldHalf,
+  Sun,
+  User as UserIcon,
+} from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { useAuth } from "react-oidc-context";
+import { NavLink, Outlet, useLocation, useNavigate } from "react-router-dom";
+import { fetchMe } from "../../features/auth/authApi";
+import { t } from "../../lib/i18n";
+import { resolveProfileRole } from "../../lib/role";
+import {
+  shouldAttemptSlidingSessionRenew,
+  shouldAttemptUnlimitedSessionRenew,
+} from "../../lib/sessionSliding";
+import LanguageSelector from "../common/LanguageSelector";
+import { Toaster } from "../ui/toaster";
+
+const navItems = [
+  {
+    labelKey: "ui.dev.nav.clients",
+    labelFallback: "Clients",
+    to: "/clients",
+    icon: ShieldHalf,
+  },
+  {
+    labelKey: "ui.dev.nav.audit_logs",
+    labelFallback: "Audit Logs",
+    to: "/audit-logs",
+    icon: NotebookTabs,
+  },
+];
+
+function AppLayout() {
+  const auth = useAuth();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const profileMenuRef = useRef<HTMLDivElement>(null);
+  const isRenewInFlightRef = useRef(false);
+  const lastRenewAttemptAtRef = useRef(0);
+  const lastVisitedRouteRef = useRef<string | null>(null);
+  const [theme, setTheme] = useState<"light" | "dark">(() => {
+    const stored = window.localStorage.getItem("admin_theme");
+    return stored === "dark" ? "dark" : "light";
+  });
+  const [isProfileMenuOpen, setIsProfileMenuOpen] = useState(false);
+  const [isSessionExpiryEnabled, setIsSessionExpiryEnabled] = useState(() => {
+    const stored = window.localStorage.getItem("baron_session_expiry_enabled");
+    return stored !== "false";
+  });
+  const [nowMs, setNowMs] = useState(() => Date.now());
+
+  const hasAccessToken = Boolean(auth.user?.access_token);
+  const { data: profile } = useQuery({
+    queryKey: ["userMe"],
+    queryFn: fetchMe,
+    enabled: hasAccessToken,
+  });
+
+  const handleLogout = () => {
+    if (window.confirm(t("msg.dev.logout_confirm", "로그아웃 하시겠습니까?"))) {
+      auth.removeUser();
+      navigate("/login");
+    }
+  };
+
+  useEffect(() => {
+    const root = document.documentElement;
+    root.classList.remove("light", "dark");
+    if (theme === "light") {
+      root.classList.add("light");
+    } else {
+      root.classList.add("dark");
+    }
+    window.localStorage.setItem("admin_theme", theme);
+  }, [theme]);
+
+  useEffect(() => {
+    const timer = window.setInterval(() => {
+      setNowMs(Date.now());
+    }, 1000);
+    return () => {
+      window.clearInterval(timer);
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        profileMenuRef.current &&
+        !profileMenuRef.current.contains(event.target as Node)
+      ) {
+        setIsProfileMenuOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  useEffect(() => {
+    const maybeRenewSession = async () => {
+      const now = Date.now();
+      if (
+        !shouldAttemptSlidingSessionRenew({
+          expiresAtSec: auth.user?.expires_at,
+          nowMs: now,
+          isEnabled: isSessionExpiryEnabled,
+          isAuthenticated: auth.isAuthenticated,
+          isLoading: auth.isLoading,
+          isRenewInFlight: isRenewInFlightRef.current,
+          lastAttemptAtMs: lastRenewAttemptAtRef.current,
+        })
+      ) {
+        return;
+      }
+
+      isRenewInFlightRef.current = true;
+      lastRenewAttemptAtRef.current = now;
+
+      try {
+        await auth.signinSilent();
+      } catch (error) {
+        console.error("세션 자동 연장에 실패했습니다.", error);
+      } finally {
+        isRenewInFlightRef.current = false;
+      }
+    };
+
+    const handleUserAction = () => {
+      void maybeRenewSession();
+    };
+
+    window.addEventListener("pointerdown", handleUserAction);
+    window.addEventListener("keydown", handleUserAction);
+
+    return () => {
+      window.removeEventListener("pointerdown", handleUserAction);
+      window.removeEventListener("keydown", handleUserAction);
+    };
+  }, [
+    auth,
+    auth.isAuthenticated,
+    auth.isLoading,
+    auth.user?.expires_at,
+    isSessionExpiryEnabled,
+  ]);
+
+  useEffect(() => {
+    const maybeKeepSessionAlive = async () => {
+      const now = Date.now();
+      if (
+        !shouldAttemptUnlimitedSessionRenew({
+          expiresAtSec: auth.user?.expires_at,
+          nowMs: now,
+          isEnabled: isSessionExpiryEnabled,
+          isAuthenticated: auth.isAuthenticated,
+          isLoading: auth.isLoading,
+          isRenewInFlight: isRenewInFlightRef.current,
+          lastAttemptAtMs: lastRenewAttemptAtRef.current,
+        })
+      ) {
+        return;
+      }
+
+      isRenewInFlightRef.current = true;
+      lastRenewAttemptAtRef.current = now;
+
+      try {
+        await auth.signinSilent();
+      } catch (error) {
+        console.error("세션 무제한 유지 갱신에 실패했습니다.", error);
+      } finally {
+        isRenewInFlightRef.current = false;
+      }
+    };
+
+    const timer = window.setInterval(() => {
+      void maybeKeepSessionAlive();
+    }, 30_000);
+
+    void maybeKeepSessionAlive();
+
+    return () => {
+      window.clearInterval(timer);
+    };
+  }, [
+    auth,
+    auth.isAuthenticated,
+    auth.isLoading,
+    auth.user?.expires_at,
+    isSessionExpiryEnabled,
+  ]);
+
+  useEffect(() => {
+    const routeKey = `${location.pathname}${location.search}${location.hash}`;
+    if (lastVisitedRouteRef.current === null) {
+      lastVisitedRouteRef.current = routeKey;
+      return;
+    }
+
+    if (lastVisitedRouteRef.current === routeKey) {
+      return;
+    }
+
+    lastVisitedRouteRef.current = routeKey;
+
+    const now = Date.now();
+    if (
+      !shouldAttemptSlidingSessionRenew({
+        expiresAtSec: auth.user?.expires_at,
+        nowMs: now,
+        isEnabled: isSessionExpiryEnabled,
+        isAuthenticated: auth.isAuthenticated,
+        isLoading: auth.isLoading,
+        isRenewInFlight: isRenewInFlightRef.current,
+        lastAttemptAtMs: lastRenewAttemptAtRef.current,
+      })
+    ) {
+      return;
+    }
+
+    isRenewInFlightRef.current = true;
+    lastRenewAttemptAtRef.current = now;
+
+    void auth
+      .signinSilent()
+      .catch((error) => {
+        console.error("세션 자동 연장에 실패했습니다.", error);
+      })
+      .finally(() => {
+        isRenewInFlightRef.current = false;
+      });
+  }, [
+    auth,
+    auth.isAuthenticated,
+    auth.isLoading,
+    auth.user?.expires_at,
+    isSessionExpiryEnabled,
+    location.hash,
+    location.pathname,
+    location.search,
+  ]);
+
+  const toggleTheme = () => {
+    setTheme((prev) => (prev === "light" ? "dark" : "light"));
+  };
+
+  const profileName =
+    profile?.name?.trim() ||
+    auth.user?.profile?.name?.toString().trim() ||
+    auth.user?.profile?.preferred_username?.toString().trim() ||
+    auth.user?.profile?.nickname?.toString().trim() ||
+    t("ui.dev.profile.unknown_name", "Unknown User");
+  const profileEmail =
+    profile?.email?.trim() ||
+    auth.user?.profile?.email?.toString().trim() ||
+    t("ui.dev.profile.unknown_email", "unknown@example.com");
+  const profileInitial = profileName.charAt(0).toUpperCase();
+  const currentRole = resolveProfileRole(
+    auth.user?.profile as Record<string, unknown> | undefined,
+  );
+  const displayRoleKey = profile?.role || currentRole;
+
+  const isDevConsoleAllowed = [
+    "super_admin",
+    "tenant_admin",
+    "rp_admin",
+  ].includes(currentRole);
+  const expiresAtSec = auth.user?.expires_at;
+  const remainingMs =
+    typeof expiresAtSec === "number" ? expiresAtSec * 1000 - nowMs : null;
+  const remainingTotalSec =
+    remainingMs !== null ? Math.max(0, Math.floor(remainingMs / 1000)) : null;
+  const remainingMinutes =
+    remainingTotalSec !== null ? Math.floor(remainingTotalSec / 60) : null;
+  const remainingSeconds =
+    remainingTotalSec !== null ? remainingTotalSec % 60 : null;
+
+  let sessionToneClass =
+    "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300";
+  let sessionText = t("ui.dev.session.active", "세션 활성");
+
+  if (remainingMs === null) {
+    sessionToneClass = "border-border bg-card text-muted-foreground";
+    sessionText = t("ui.dev.session.unknown", "알 수 없음");
+  } else if (remainingMs <= 0) {
+    sessionToneClass =
+      "border-rose-500/30 bg-rose-500/10 text-rose-700 dark:text-rose-300";
+    sessionText = t("ui.dev.session.expired", "세션 만료");
+  } else if (
+    remainingMinutes !== null &&
+    remainingSeconds !== null &&
+    remainingMinutes <= 5
+  ) {
+    sessionToneClass =
+      "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300";
+    sessionText = t(
+      "ui.dev.session.expiring",
+      "만료 임박: {{minutes}}분 {{seconds}}초 남음",
+      {
+        minutes: remainingMinutes,
+        seconds: remainingSeconds,
+      },
+    );
+  } else {
+    sessionText = t(
+      "ui.dev.session.remaining",
+      "만료 예정: {{minutes}}분 {{seconds}}초 남음",
+      {
+        minutes: remainingMinutes ?? 0,
+        seconds: remainingSeconds ?? 0,
+      },
+    );
+  }
+
+  const handleSessionExpiryToggle = () => {
+    setIsSessionExpiryEnabled((prev) => {
+      const next = !prev;
+      window.localStorage.setItem("baron_session_expiry_enabled", String(next));
+      return next;
+    });
+  };
+
+  return (
+    <div className="grid min-h-screen bg-background text-foreground md:grid-cols-[240px,1fr]">
+      <aside className="flex flex-col justify-between border-b border-border bg-card md:sticky md:top-0 md:h-screen md:border-b-0 md:border-r md:bg-card md:backdrop-blur">
+        <div>
+          <div className="flex items-center justify-between px-5 py-4 md:block md:space-y-6 md:py-6">
+            <div className="flex items-center gap-3 md:flex-col md:items-start">
+              <div className="grid h-11 w-11 place-items-center rounded-xl bg-primary/15 text-primary shadow-[0_12px_30px_rgba(54,211,153,0.22)]">
+                <ShieldHalf size={20} />
+              </div>
+              <div>
+                <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">
+                  {t("ui.dev.brand", "Baron 로그인")}
+                </p>
+                <h1 className="text-lg font-semibold">
+                  {t("ui.dev.console_title", "Developer Console")}
+                </h1>
+              </div>
+            </div>
+            <div className="hidden rounded-full border border-border px-3 py-2 text-xs text-muted-foreground md:inline-flex md:items-center md:gap-2">
+              <BadgeCheck size={14} />
+              {t("ui.dev.scope_badge", "Scoped to /dev")}
+            </div>
+          </div>
+          <nav className="px-2 pb-4 md:px-3 md:pb-8">
+            <div className="flex flex-wrap gap-2 px-3 pb-4 text-[11px] text-muted-foreground md:flex-col md:items-start">
+              <span className="rounded-full border border-border px-3 py-1">
+                {t("ui.dev.env_badge", "Env: dev")}
+              </span>
+            </div>
+            <div className="flex flex-col gap-1">
+              {isDevConsoleAllowed &&
+                navItems.map(({ labelKey, labelFallback, to, icon: Icon }) => (
+                  <NavLink
+                    key={to}
+                    to={to}
+                    className={({ isActive }) =>
+                      [
+                        "flex items-center gap-3 rounded-xl px-3 py-3 text-sm transition",
+                        isActive
+                          ? "bg-primary/10 text-primary shadow-[0_12px_40px_rgba(54,211,153,0.18)]"
+                          : "text-muted-foreground hover:bg-muted/10 hover:text-foreground",
+                      ].join(" ")
+                    }
+                  >
+                    <Icon size={18} />
+                    <span>{t(labelKey, labelFallback)}</span>
+                  </NavLink>
+                ))}
+            </div>
+          </nav>
+        </div>
+
+        <div>
+          <div className="border-t border-border/50 px-3 pt-4">
+            <button
+              type="button"
+              onClick={handleLogout}
+              className="flex w-full items-center gap-3 rounded-xl px-3 py-3 text-sm text-muted-foreground transition hover:bg-destructive/10 hover:text-destructive"
+            >
+              <LogOut size={18} />
+              <span>{t("ui.dev.nav.logout", "Logout")}</span>
+            </button>
+          </div>
+          <div className="hidden space-y-2 px-5 pb-6 pt-2 text-xs text-[var(--color-muted)] md:block">
+            <p>{t("msg.dev.sidebar.notice", "Developer Console")}</p>
+            <p>
+              {t(
+                "msg.dev.sidebar.notice_detail",
+                "Register and manage client applications.",
+              )}
+            </p>
+          </div>
+        </div>
+      </aside>
+
+      <div className="relative">
+        <header className="sticky top-0 z-20 border-b border-border bg-background/90 backdrop-blur">
+          <div className="flex items-center justify-between px-5 py-4 md:px-8">
+            <div className="flex flex-col gap-1">
+              <p className="text-xs uppercase tracking-[0.22em] text-muted-foreground">
+                {t("ui.dev.header.plane", "Dev Plane")}
+              </p>
+              <span className="text-lg font-semibold">
+                {t("ui.dev.header.subtitle", "Manage your applications")}
+              </span>
+            </div>
+            <div className="flex items-center gap-2 text-sm">
+              <LanguageSelector />
+              <button
+                type="button"
+                onClick={toggleTheme}
+                className="inline-flex items-center gap-2 rounded-full border border-border px-3 py-2 text-muted-foreground transition hover:bg-muted/20"
+                aria-label={t("ui.common.theme_toggle", "테마 전환")}
+              >
+                {theme === "light" ? <Sun size={16} /> : <Moon size={16} />}
+                {theme === "light"
+                  ? t("ui.common.theme_light", "Light")
+                  : t("ui.common.theme_dark", "Dark")}
+              </button>
+              {isSessionExpiryEnabled ? (
+                <span
+                  className={[
+                    "hidden rounded-full border px-3 py-2 text-xs font-medium md:inline-flex",
+                    sessionToneClass,
+                  ].join(" ")}
+                >
+                  {sessionText}
+                </span>
+              ) : null}
+              <div className="relative" ref={profileMenuRef}>
+                <button
+                  type="button"
+                  onClick={() => setIsProfileMenuOpen((prev) => !prev)}
+                  className="inline-flex items-center gap-3 rounded-full border border-border bg-card px-3 py-2 transition hover:bg-muted/20"
+                  aria-haspopup="menu"
+                  aria-expanded={isProfileMenuOpen}
+                  aria-label={t("ui.dev.profile.menu_aria", "계정 메뉴 열기")}
+                >
+                  <div className="grid h-8 w-8 place-items-center rounded-full bg-primary/15 text-xs font-semibold text-primary">
+                    {profileInitial}
+                  </div>
+                  <div className="hidden min-w-0 text-left md:block">
+                    <p className="truncate text-xs font-medium text-foreground">
+                      {profileName}
+                    </p>
+                    <p className="truncate text-[11px] text-muted-foreground">
+                      {profileEmail}
+                    </p>
+                  </div>
+                  <ChevronDown
+                    size={14}
+                    className={`transition-transform duration-200 ${isProfileMenuOpen ? "rotate-180" : ""}`}
+                  />
+                </button>
+                {isProfileMenuOpen ? (
+                  <div
+                    role="menu"
+                    className="absolute right-0 z-30 mt-2 w-72 rounded-xl border border-border bg-card p-3 shadow-xl"
+                  >
+                    <p className="text-xs uppercase tracking-[0.16em] text-muted-foreground">
+                      {t("ui.dev.profile.menu_title", "Account")}
+                    </p>
+                    <div className="mt-2 flex flex-col gap-2 rounded-lg border border-border px-3 py-3">
+                      <div>
+                        <p className="truncate text-sm font-semibold text-foreground">
+                          {profileName}
+                        </p>
+                        <p className="truncate text-xs text-muted-foreground">
+                          {profileEmail}
+                        </p>
+                      </div>
+                      <div className="flex items-center pt-1">
+                        <span className="inline-flex items-center rounded-full bg-sky-500/10 px-2.5 py-1 text-[10px] font-semibold text-sky-700 dark:text-sky-300">
+                          {t(
+                            `ui.admin.role.${displayRoleKey}`,
+                            displayRoleKey.toUpperCase(),
+                          )}
+                        </span>
+                      </div>
+                    </div>
+
+                    <div className="mt-2 rounded-lg border border-border px-3 py-3">
+                      <div className="flex items-center justify-between gap-3">
+                        <div>
+                          <p className="text-sm font-medium text-foreground">
+                            {t("ui.dev.session.auto_extend", "세션 만료 관리")}
+                          </p>
+                          <p className="text-xs text-muted-foreground">
+                            {isSessionExpiryEnabled
+                              ? sessionText
+                              : t(
+                                  "ui.dev.session.disabled",
+                                  "세션 만료 비활성화",
+                                )}
+                          </p>
+                        </div>
+                        <button
+                          type="button"
+                          role="switch"
+                          aria-checked={isSessionExpiryEnabled}
+                          onClick={handleSessionExpiryToggle}
+                          className={[
+                            "relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition",
+                            isSessionExpiryEnabled ? "bg-primary" : "bg-muted",
+                          ].join(" ")}
+                        >
+                          <span
+                            className={[
+                              "inline-block h-5 w-5 rounded-full bg-white transition",
+                              isSessionExpiryEnabled
+                                ? "translate-x-5"
+                                : "translate-x-1",
+                            ].join(" ")}
+                          />
+                        </button>
+                      </div>
+                    </div>
+
+                    <button
+                      type="button"
+                      role="menuitem"
+                      className="mt-2 flex w-full items-center gap-2 rounded-lg border border-border px-3 py-2 text-left text-sm text-foreground transition hover:bg-muted/20"
+                      onClick={() => {
+                        navigate("/profile");
+                        setIsProfileMenuOpen(false);
+                      }}
+                    >
+                      <UserIcon size={16} className="text-muted-foreground" />
+                      <span>{t("ui.dev.profile.title", "내 정보")}</span>
+                    </button>
+                    <button
+                      type="button"
+                      role="menuitem"
+                      className="mt-2 flex w-full items-center gap-2 rounded-lg border border-border px-3 py-2 text-left text-sm text-muted-foreground transition hover:bg-destructive/10 hover:text-destructive"
+                      onClick={handleLogout}
+                    >
+                      <LogOut size={16} />
+                      <span>{t("ui.dev.nav.logout", "Logout")}</span>
+                    </button>
+                  </div>
+                ) : null}
+              </div>
+            </div>
+          </div>
+        </header>
+        <main className="px-5 py-6 md:px-10 md:py-10">
+          <Outlet />
+        </main>
+      </div>
+      <Toaster />
+    </div>
+  );
+}
+
+export default AppLayout;

orgfront/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<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className,
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted text-sm font-semibold text-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };

orgfront/src/components/ui/badge.tsx

@@ -0,0 +1,39 @@
+import { type VariantProps, cva } from "class-variance-authority";
+import type * as React from "react";
+import { cn } from "../../lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        outline: "text-foreground",
+        muted: "border-border bg-secondary/60 text-muted-foreground",
+        success:
+          "border-transparent bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300",
+        warning:
+          "border-transparent bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-200",
+        info: "border-transparent bg-blue-500 text-white hover:bg-blue-500/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };

orgfront/src/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import { Slot } from "@radix-ui/react-slot";
+import { type VariantProps, cva } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ring-offset-background",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        muted: "bg-muted text-muted-foreground hover:bg-muted/80",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-6 text-base",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

orgfront/src/components/ui/card.tsx

@@ -0,0 +1,72 @@
+import type * as React from "react";
+import { cn } from "../../lib/utils";
+
+function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "rounded-2xl border border-border bg-card/90 text-card-foreground shadow-card",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("flex flex-col space-y-1.5 p-6", className)}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h3
+      className={cn("text-lg font-semibold leading-none", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) {
+  return (
+    <p className={cn("text-sm text-muted-foreground", className)} {...props} />
+  );
+}
+
+function CardContent({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("p-6 pt-0", className)} {...props} />;
+}
+
+function CardFooter({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn("flex items-center p-6 pt-0", className)} {...props} />
+  );
+}
+
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+};

orgfront/src/components/ui/copy-button.tsx

@@ -0,0 +1,75 @@
+import { Check, Copy } from "lucide-react";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { Button, type ButtonProps } from "./button";
+
+interface CopyButtonProps extends ButtonProps {
+  value: string;
+  onCopy?: () => void;
+}
+
+export function CopyButton({
+  value,
+  onCopy,
+  className,
+  variant = "secondary",
+  size = "icon",
+  ...props
+}: CopyButtonProps) {
+  const [hasCopied, setHasCopied] = React.useState(false);
+
+  React.useEffect(() => {
+    if (hasCopied) {
+      const timer = setTimeout(() => setHasCopied(false), 1500);
+      return () => clearTimeout(timer);
+    }
+  }, [hasCopied]);
+
+  const copyToClipboard = async () => {
+    try {
+      if (navigator.clipboard && window.isSecureContext) {
+        await navigator.clipboard.writeText(value);
+      } else {
+        // Fallback for non-secure contexts (HTTP) or missing navigator.clipboard
+        const textArea = document.createElement("textarea");
+        textArea.value = value;
+        textArea.style.position = "fixed";
+        textArea.style.left = "-9999px";
+        textArea.style.top = "0";
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+        try {
+          const successful = document.execCommand("copy");
+          if (!successful) throw new Error("execCommand copy failed");
+        } catch (err) {
+          console.error("Fallback: Oops, unable to copy", err);
+          throw err;
+        } finally {
+          document.body.removeChild(textArea);
+        }
+      }
+      setHasCopied(true);
+      if (onCopy) onCopy();
+    } catch (err) {
+      console.error("Failed to copy text: ", err);
+    }
+  };
+
+  return (
+    <Button
+      size={size}
+      variant={variant}
+      className={cn("relative z-10", className)}
+      onClick={copyToClipboard}
+      {...props}
+    >
+      <span className="sr-only">Copy</span>
+      {hasCopied ? (
+        <Check className="h-4 w-4 text-emerald-500 transition-all scale-110" />
+      ) : (
+        <Copy className="h-4 w-4 transition-all" />
+      )}
+    </Button>
+  );
+}

orgfront/src/components/ui/input.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = "Input";
+
+export { Input };

orgfront/src/components/ui/label.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+const Label = React.forwardRef<
+  HTMLLabelElement,
+  React.LabelHTMLAttributes<HTMLLabelElement>
+>(({ className, ...props }, ref) => (
+  <label
+    ref={ref}
+    className={cn(
+      "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      className,
+    )}
+    {...props}
+  />
+));
+Label.displayName = "Label";
+
+export { Label };

orgfront/src/components/ui/scroll-area.tsx

@@ -0,0 +1,44 @@
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent",
+      orientation === "horizontal" && "h-2.5 border-t border-t-transparent",
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };

orgfront/src/components/ui/separator.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+const Separator = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("shrink-0 bg-border", "h-px w-full", className)}
+    {...props}
+  />
+));
+Separator.displayName = "Separator";
+
+export { Separator };

orgfront/src/components/ui/switch.tsx

@@ -0,0 +1,26 @@
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-5 w-10 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent bg-input transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted/50",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };

orgfront/src/components/ui/table.tsx

@@ -0,0 +1,113 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+));
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn("bg-muted/50 font-medium text-foreground", className)}
+    {...props}
+  />
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/30 data-[state=selected]:bg-muted",
+      className,
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-6 text-left text-xs font-bold uppercase tracking-[0.08em] text-muted-foreground align-middle",
+      className,
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-6 align-middle text-sm", className)}
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+TableCaption.displayName = "TableCaption";
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};

orgfront/src/components/ui/textarea.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-lg border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };

orgfront/src/components/ui/toaster.tsx

@@ -0,0 +1,35 @@
+import { AlertCircle, CheckCircle2, Info } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { useToastState } from "./use-toast";
+
+export function Toaster() {
+  const toasts = useToastState();
+
+  if (toasts.length === 0) return null;
+
+  return (
+    <div className="fixed bottom-4 right-4 z-[100] flex flex-col gap-2 w-full max-w-[320px]">
+      {toasts.map((t) => (
+        <div
+          key={t.id}
+          className={cn(
+            "flex items-center gap-3 rounded-lg border p-4 shadow-lg animate-in slide-in-from-right-full duration-300",
+            t.type === "success" &&
+              "bg-emerald-50 border-emerald-200 text-emerald-800 dark:bg-emerald-950 dark:border-emerald-800 dark:text-emerald-200",
+            t.type === "error" &&
+              "bg-rose-50 border-rose-200 text-rose-800 dark:bg-rose-950 dark:border-rose-800 dark:text-rose-200",
+            t.type === "info" &&
+              "bg-blue-50 border-blue-200 text-blue-800 dark:bg-blue-950 dark:border-blue-800 dark:text-blue-200",
+          )}
+        >
+          {t.type === "success" && (
+            <CheckCircle2 className="h-5 w-5 shrink-0" />
+          )}
+          {t.type === "error" && <AlertCircle className="h-5 w-5 shrink-0" />}
+          {t.type === "info" && <Info className="h-5 w-5 shrink-0" />}
+          <p className="text-sm font-medium leading-none">{t.message}</p>
+        </div>
+      ))}
+    </div>
+  );
+}

orgfront/src/components/ui/use-toast.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+
+type ToastType = "success" | "error" | "info";
+
+interface Toast {
+  id: string;
+  message: string;
+  type: ToastType;
+}
+
+let subscribers: ((toasts: Toast[]) => void)[] = [];
+let toasts: Toast[] = [];
+
+const notify = () => {
+  for (const sub of subscribers) {
+    sub(toasts);
+  }
+};
+
+export const toast = (message: string, type: ToastType = "success") => {
+  const id = Math.random().toString(36).substring(2, 9);
+  toasts = [...toasts, { id, message, type }];
+  notify();
+
+  setTimeout(() => {
+    toasts = toasts.filter((t) => t.id !== id);
+    notify();
+  }, 3000);
+};
+
+export const useToastState = () => {
+  const [state, setState] = React.useState<Toast[]>(toasts);
+
+  React.useEffect(() => {
+    subscribers.push(setState);
+    return () => {
+      subscribers = subscribers.filter((sub) => sub !== setState);
+    };
+  }, []);
+
+  return state;
+};