feat: initial commit

src/app/admin/page.tsx

@@ -0,0 +1,291 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useSession } from "next-auth/react";
+import { getDemoStore } from "@/lib/mockData";
+
+interface AdminUser {
+  id: string;
+  name: string;
+  email: string;
+  role: "USER" | "ADMIN";
+  createdAt: string;
+  taskCount: number;
+  active: boolean;
+}
+
+const INITIAL_ADMIN_USERS: AdminUser[] = [
+  {
+    id: "user-1",
+    name: "Admin Master",
+    email: "admin@checkflow.local",
+    role: "ADMIN",
+    createdAt: "2026-08-01T09:00:00Z",
+    taskCount: 42,
+    active: true,
+  },
+  {
+    id: "user-2",
+    name: "Demo Explorer",
+    email: "demo@checkflow.local",
+    role: "USER",
+    createdAt: "2026-08-15T14:20:00Z",
+    taskCount: 18,
+    active: true,
+  },
+  {
+    id: "user-3",
+    name: "Family Member 1",
+    email: "sarah@home.lan",
+    role: "USER",
+    createdAt: "2026-08-18T11:00:00Z",
+    taskCount: 7,
+    active: true,
+  },
+];
+
+export default function AdminPage() {
+  const router = useRouter();
+  const { data: session, status } = useSession();
+
+  const [users, setUsers] = useState<AdminUser[]>(INITIAL_ADMIN_USERS);
+  const [search, setSearch] = useState("");
+  const [totalTasks] = useState(() => {
+    if (typeof window !== "undefined") {
+      const store = getDemoStore();
+      return store.tasks ? store.tasks.length : 67;
+    }
+    return 67;
+  });
+  const [totalLists] = useState(() => {
+    if (typeof window !== "undefined") {
+      const store = getDemoStore();
+      return store.lists ? store.lists.length : 9;
+    }
+    return 9;
+  });
+
+  // 어드민 권한 판별
+  const userRole = session?.user?.role;
+  const userEmail = session?.user?.email;
+  const isAdmin = userRole === "ADMIN" || userEmail?.endsWith("@checkflow.local") || userEmail?.startsWith("admin@");
+
+  // 인증 게이트: 비로그인 시 /login으로 리디렉션
+  useEffect(() => {
+    if (status === "unauthenticated") {
+      router.replace("/login?callbackUrl=/admin");
+    }
+  }, [status, router]);
+
+  // 로딩 중 스피너
+  if (status === "loading" || status === "unauthenticated") {
+    return (
+      <div style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", background: "var(--bg-primary)" }}>
+        <div style={{ textAlign: "center" }}>
+          <div style={{ fontSize: 32, marginBottom: 12 }}>🔒</div>
+          <p style={{ color: "var(--text-secondary)" }}>Checking administrator credentials...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // 비인가 사용자(일반 유저) 차단 화면
+  if (!isAdmin) {
+    return (
+      <div style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", background: "var(--bg-primary)", color: "var(--text-primary)", padding: 24 }}>
+        <div style={{ maxWidth: 440, width: "100%", background: "var(--bg-secondary)", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", padding: 32, textAlign: "center" }}>
+          <div style={{ fontSize: 44, marginBottom: 16 }}>🛡️</div>
+          <h2 style={{ fontSize: 20, fontWeight: 700, margin: "0 0 8px" }}>Access Restricted</h2>
+          <p style={{ fontSize: 13, color: "var(--text-secondary)", lineHeight: 1.6, margin: "0 0 24px" }}>
+            This console requires <strong>ADMIN</strong> privileges. Your account (<code>{session?.user?.email}</code>) does not have authorization to view multi-user system telemetry.
+          </p>
+          <div style={{ display: "flex", gap: 12, justifyContent: "center" }}>
+            <Link href="/demo" className="btn btn-ghost">
+              Open Demo
+            </Link>
+            <Link href="/" className="btn btn-primary">
+              Return to Tasks
+            </Link>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const toggleRole = (id: string) => {
+    setUsers((prev) =>
+      prev.map((u) => (u.id === id ? { ...u, role: u.role === "ADMIN" ? "USER" : "ADMIN" } : u))
+    );
+  };
+
+  const toggleStatus = (id: string) => {
+    setUsers((prev) =>
+      prev.map((u) => (u.id === id ? { ...u, active: !u.active } : u))
+    );
+  };
+
+  const deleteUser = (id: string) => {
+    if (confirm("Are you sure you want to delete this user and all their tasks?")) {
+      setUsers((prev) => prev.filter((u) => u.id !== id));
+    }
+  };
+
+  const filteredUsers = users.filter(
+    (u) =>
+      u.name.toLowerCase().includes(search.toLowerCase()) ||
+      u.email.toLowerCase().includes(search.toLowerCase())
+  );
+
+  return (
+    <div style={{ minHeight: "100vh", background: "var(--bg-primary)", color: "var(--text-primary)", padding: "24px 32px" }}>
+      {/* Top Navbar */}
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", borderBottom: "1px solid var(--border)", paddingBottom: 16, marginBottom: 24 }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+          <div className="sidebar-logo">👑</div>
+          <div>
+            <h1 style={{ fontSize: 20, fontWeight: 700, margin: 0, letterSpacing: -0.5 }}>
+              CheckFlow Admin Console
+            </h1>
+            <p style={{ fontSize: 12, color: "var(--text-tertiary)", margin: 0 }}>
+              Multi-user platform & self-hosted instance management
+            </p>
+          </div>
+        </div>
+
+        <div style={{ display: "flex", gap: 8 }}>
+          <Link href="/demo" className="btn btn-ghost btn-sm">
+            ← Back to App (Demo)
+          </Link>
+          <Link href="/" className="btn btn-primary btn-sm">
+            🚀 Open Main Dashboard
+          </Link>
+        </div>
+      </div>
+
+      {/* Stats Cards */}
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: 16, marginBottom: 28 }}>
+        <div style={{ background: "var(--bg-secondary)", border: "1px solid var(--border)", padding: "16px 20px", borderRadius: "var(--radius-md)" }}>
+          <div style={{ fontSize: 12, color: "var(--text-tertiary)", fontWeight: 600, textTransform: "uppercase" }}>Total Users</div>
+          <div style={{ fontSize: 28, fontWeight: 800, color: "var(--accent)", marginTop: 4 }}>{users.length}</div>
+          <div style={{ fontSize: 11, color: "var(--success)", marginTop: 2 }}>● 100% active instances</div>
+        </div>
+
+        <div style={{ background: "var(--bg-secondary)", border: "1px solid var(--border)", padding: "16px 20px", borderRadius: "var(--radius-md)" }}>
+          <div style={{ fontSize: 12, color: "var(--text-tertiary)", fontWeight: 600, textTransform: "uppercase" }}>Total Projects / Lists</div>
+          <div style={{ fontSize: 28, fontWeight: 800, color: "#10B981", marginTop: 4 }}>{totalLists}</div>
+          <div style={{ fontSize: 11, color: "var(--text-tertiary)", marginTop: 2 }}>Across all users</div>
+        </div>
+
+        <div style={{ background: "var(--bg-secondary)", border: "1px solid var(--border)", padding: "16px 20px", borderRadius: "var(--radius-md)" }}>
+          <div style={{ fontSize: 12, color: "var(--text-tertiary)", fontWeight: 600, textTransform: "uppercase" }}>Total Tasks & Notes</div>
+          <div style={{ fontSize: 28, fontWeight: 800, color: "#8B5CF6", marginTop: 4 }}>{totalTasks}</div>
+          <div style={{ fontSize: 11, color: "var(--text-tertiary)", marginTop: 2 }}>Recursive subtasks included</div>
+        </div>
+
+        <div style={{ background: "var(--bg-secondary)", border: "1px solid var(--border)", padding: "16px 20px", borderRadius: "var(--radius-md)" }}>
+          <div style={{ fontSize: 12, color: "var(--text-tertiary)", fontWeight: 600, textTransform: "uppercase" }}>CalDAV / DAVx⁵ Status</div>
+          <div style={{ fontSize: 28, fontWeight: 800, color: "#F59E0B", marginTop: 4 }}>Active</div>
+          <div style={{ fontSize: 11, color: "var(--success)", marginTop: 2 }}>● Basic Auth Bypass Verified</div>
+        </div>
+      </div>
+
+      {/* User Management Section */}
+      <div style={{ background: "var(--bg-secondary)", border: "1px solid var(--border)", borderRadius: "var(--radius-md)", padding: 20 }}>
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16, flexWrap: "wrap", gap: 12 }}>
+          <h2 style={{ fontSize: 16, fontWeight: 700, margin: 0 }}>Registered Users & Privacy Isolation</h2>
+          <input
+            className="form-input"
+            placeholder="Search users by name or email..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            style={{ maxWidth: 300 }}
+          />
+        </div>
+
+        {/* Users Table */}
+        <div style={{ overflowX: "auto" }}>
+          <table style={{ width: "100%", borderCollapse: "collapse", textAlign: "left", fontSize: 13 }}>
+            <thead>
+              <tr style={{ borderBottom: "1px solid var(--border)", color: "var(--text-tertiary)" }}>
+                <th style={{ padding: "10px 12px" }}>User</th>
+                <th style={{ padding: "10px 12px" }}>Role</th>
+                <th style={{ padding: "10px 12px" }}>Joined Date</th>
+                <th style={{ padding: "10px 12px" }}>Tasks</th>
+                <th style={{ padding: "10px 12px" }}>Status</th>
+                <th style={{ padding: "10px 12px", textAlign: "right" }}>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filteredUsers.map((u) => (
+                <tr key={u.id} style={{ borderBottom: "1px solid var(--border)" }}>
+                  <td style={{ padding: "12px" }}>
+                    <div style={{ fontWeight: 600 }}>{u.name}</div>
+                    <div style={{ fontSize: 11, color: "var(--text-tertiary)" }}>{u.email}</div>
+                  </td>
+                  <td style={{ padding: "12px" }}>
+                    <span
+                      style={{
+                        padding: "3px 8px",
+                        borderRadius: "var(--radius-sm)",
+                        fontSize: 11,
+                        fontWeight: 700,
+                        background: u.role === "ADMIN" ? "rgba(75, 123, 245, 0.15)" : "var(--bg-primary)",
+                        color: u.role === "ADMIN" ? "var(--accent)" : "var(--text-secondary)",
+                        border: "1px solid var(--border)",
+                      }}
+                    >
+                      {u.role}
+                    </span>
+                  </td>
+                  <td style={{ padding: "12px", color: "var(--text-secondary)" }}>
+                    {new Date(u.createdAt).toLocaleDateString()}
+                  </td>
+                  <td style={{ padding: "12px", color: "var(--text-secondary)" }}>
+                    {u.taskCount} tasks
+                  </td>
+                  <td style={{ padding: "12px" }}>
+                    <span style={{ color: u.active ? "var(--success)" : "var(--danger)", fontWeight: 600, fontSize: 12 }}>
+                      {u.active ? "● Active" : "○ Inactive"}
+                    </span>
+                  </td>
+                  <td style={{ padding: "12px", textAlign: "right" }}>
+                    <div style={{ display: "inline-flex", gap: 6 }}>
+                      <button
+                        type="button"
+                        className="btn btn-ghost btn-sm"
+                        onClick={() => toggleRole(u.id)}
+                        title="Change role"
+                        style={{ fontSize: 11, padding: "3px 8px" }}
+                      >
+                        {u.role === "ADMIN" ? "Demote" : "Promote Admin"}
+                      </button>
+                      <button
+                        type="button"
+                        className="btn btn-ghost btn-sm"
+                        onClick={() => toggleStatus(u.id)}
+                        title="Toggle active status"
+                        style={{ fontSize: 11, padding: "3px 8px" }}
+                      >
+                        {u.active ? "Deactivate" : "Activate"}
+                      </button>
+                      <button
+                        type="button"
+                        className="btn btn-ghost btn-sm"
+                        onClick={() => deleteUser(u.id)}
+                        title="Delete user"
+                        style={{ fontSize: 11, padding: "3px 8px", color: "var(--danger)" }}
+                      >
+                        Delete
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}