@codaijs/keel 0.1.0

package/sails/admin-dashboard/files/backend/routes/admin.ts

@@ -0,0 +1,243 @@
+import { Router, type Request, type Response } from "express";
+import { eq, like, or, sql, desc, count } from "drizzle-orm";
+import { db } from "../db/index.js";
+import { users, sessions } from "../db/schema/index.js";
+import { requireAuth } from "../middleware/auth.js";
+import { requireAdmin } from "../middleware/admin.js";
+
+const router = Router();
+
+// All routes require authentication + admin privileges
+router.use(requireAuth);
+router.use(requireAdmin);
+
+// ---------------------------------------------------------------------------
+// GET /users — list all users (paginated, searchable)
+// ---------------------------------------------------------------------------
+
+router.get("/users", async (req: Request, res: Response) => {
+  try {
+    const page = Math.max(1, parseInt(req.query.page as string) || 1);
+    const limit = Math.min(100, Math.max(1, parseInt(req.query.limit as string) || 20));
+    const search = (req.query.search as string) || "";
+    const offset = (page - 1) * limit;
+
+    // Escape LIKE metacharacters to prevent SQL injection via pattern matching
+    const escapedSearch = search
+      .replace(/%/g, "\\%")
+      .replace(/_/g, "\\_");
+
+    const whereClause = escapedSearch
+      ? or(
+          like(users.email, `%${escapedSearch}%`),
+          like(users.name, `%${escapedSearch}%`),
+        )
+      : undefined;
+
+    const [userRows, totalResult] = await Promise.all([
+      db
+        .select({
+          id: users.id,
+          name: users.name,
+          email: users.email,
+          emailVerified: users.emailVerified,
+          image: users.image,
+          createdAt: users.createdAt,
+          updatedAt: users.updatedAt,
+        })
+        .from(users)
+        .where(whereClause)
+        .orderBy(desc(users.createdAt))
+        .limit(limit)
+        .offset(offset),
+      db
+        .select({ count: count() })
+        .from(users)
+        .where(whereClause),
+    ]);
+
+    const total = totalResult[0]?.count ?? 0;
+
+    res.json({
+      users: userRows,
+      pagination: {
+        page,
+        limit,
+        total,
+        totalPages: Math.ceil(total / limit),
+      },
+    });
+  } catch (error) {
+    console.error("Error listing users:", error);
+    res.status(500).json({ error: "Failed to list users" });
+  }
+});
+
+// ---------------------------------------------------------------------------
+// GET /users/:id — get user details
+// ---------------------------------------------------------------------------
+
+router.get("/users/:id", async (req: Request, res: Response) => {
+  try {
+    const user = await db.query.users.findFirst({
+      where: eq(users.id, req.params.id),
+    });
+
+    if (!user) {
+      res.status(404).json({ error: "User not found" });
+      return;
+    }
+
+    // Count active sessions for this user
+    const sessionResult = await db
+      .select({ count: count() })
+      .from(sessions)
+      .where(eq(sessions.userId, user.id));
+
+    res.json({
+      user: {
+        id: user.id,
+        name: user.name,
+        email: user.email,
+        emailVerified: user.emailVerified,
+        image: user.image,
+        createdAt: user.createdAt,
+        updatedAt: user.updatedAt,
+      },
+      activeSessions: sessionResult[0]?.count ?? 0,
+    });
+  } catch (error) {
+    console.error("Error fetching user:", error);
+    res.status(500).json({ error: "Failed to fetch user" });
+  }
+});
+
+// ---------------------------------------------------------------------------
+// PATCH /users/:id — update user (name, emailVerified, etc.)
+// ---------------------------------------------------------------------------
+
+router.patch("/users/:id", async (req: Request, res: Response) => {
+  try {
+    const { name, emailVerified } = req.body as {
+      name?: string;
+      emailVerified?: boolean;
+    };
+
+    const existing = await db.query.users.findFirst({
+      where: eq(users.id, req.params.id),
+    });
+
+    if (!existing) {
+      res.status(404).json({ error: "User not found" });
+      return;
+    }
+
+    const updates: Record<string, unknown> = {};
+    if (typeof name === "string") updates.name = name;
+    if (typeof emailVerified === "boolean") updates.emailVerified = emailVerified;
+
+    if (Object.keys(updates).length === 0) {
+      res.status(400).json({ error: "No valid fields to update" });
+      return;
+    }
+
+    updates.updatedAt = new Date();
+
+    const [updated] = await db
+      .update(users)
+      .set(updates)
+      .where(eq(users.id, req.params.id))
+      .returning();
+
+    res.json({ user: updated });
+  } catch (error) {
+    console.error("Error updating user:", error);
+    res.status(500).json({ error: "Failed to update user" });
+  }
+});
+
+// ---------------------------------------------------------------------------
+// DELETE /users/:id — delete a user
+// ---------------------------------------------------------------------------
+
+router.delete("/users/:id", async (req: Request, res: Response) => {
+  try {
+    // Prevent self-deletion
+    if (req.params.id === req.user!.id) {
+      res.status(400).json({ error: "Cannot delete your own account from admin panel" });
+      return;
+    }
+
+    const existing = await db.query.users.findFirst({
+      where: eq(users.id, req.params.id),
+    });
+
+    if (!existing) {
+      res.status(404).json({ error: "User not found" });
+      return;
+    }
+
+    await db.delete(users).where(eq(users.id, req.params.id));
+
+    res.json({ message: "User deleted successfully" });
+  } catch (error) {
+    console.error("Error deleting user:", error);
+    res.status(500).json({ error: "Failed to delete user" });
+  }
+});
+
+// ---------------------------------------------------------------------------
+// GET /stats — dashboard statistics
+// ---------------------------------------------------------------------------
+
+router.get("/stats", async (_req: Request, res: Response) => {
+  try {
+    const now = new Date();
+    const sevenDaysAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
+    const thirtyDaysAgo = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
+
+    const [
+      totalUsersResult,
+      newUsersWeekResult,
+      newUsersMonthResult,
+      activeSessionsResult,
+      signupsByDayResult,
+    ] = await Promise.all([
+      db.select({ count: count() }).from(users),
+      db
+        .select({ count: count() })
+        .from(users)
+        .where(sql`${users.createdAt} >= ${sevenDaysAgo}`),
+      db
+        .select({ count: count() })
+        .from(users)
+        .where(sql`${users.createdAt} >= ${thirtyDaysAgo}`),
+      db
+        .select({ count: count() })
+        .from(sessions)
+        .where(sql`${sessions.expiresAt} > ${now}`),
+      db
+        .select({
+          date: sql<string>`DATE(${users.createdAt})`.as("date"),
+          count: count(),
+        })
+        .from(users)
+        .where(sql`${users.createdAt} >= ${thirtyDaysAgo}`)
+        .groupBy(sql`DATE(${users.createdAt})`)
+        .orderBy(sql`DATE(${users.createdAt})`),
+    ]);
+
+    res.json({
+      totalUsers: totalUsersResult[0]?.count ?? 0,
+      newUsersWeek: newUsersWeekResult[0]?.count ?? 0,
+      newUsersMonth: newUsersMonthResult[0]?.count ?? 0,
+      activeSessions: activeSessionsResult[0]?.count ?? 0,
+      signupsByDay: signupsByDayResult,
+    });
+  } catch (error) {
+    console.error("Error fetching stats:", error);
+    res.status(500).json({ error: "Failed to fetch stats" });
+  }
+});
+
+export default router;

package/sails/admin-dashboard/files/frontend/components/admin/StatsCard.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from "react";
+
+interface StatsCardProps {
+  icon: ReactNode;
+  label: string;
+  value: string | number;
+  trend?: {
+    value: number;
+    label: string;
+  };
+}
+
+export default function StatsCard({ icon, label, value, trend }: StatsCardProps) {
+  return (
+    <div className="rounded-xl border border-keel-gray-800 bg-keel-gray-900 p-6">
+      <div className="flex items-center gap-3">
+        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-keel-blue/10 text-keel-blue">
+          {icon}
+        </div>
+        <div className="min-w-0 flex-1">
+          <p className="text-sm font-medium text-keel-gray-400">{label}</p>
+          <p className="text-2xl font-bold text-white">{value}</p>
+        </div>
+      </div>
+      {trend && (
+        <div className="mt-3 flex items-center gap-1.5">
+          <span
+            className={`text-sm font-medium ${
+              trend.value >= 0 ? "text-green-400" : "text-red-400"
+            }`}
+          >
+            {trend.value >= 0 ? "+" : ""}
+            {trend.value}
+          </span>
+          <span className="text-xs text-keel-gray-400">{trend.label}</span>
+        </div>
+      )}
+    </div>
+  );
+}

package/sails/admin-dashboard/files/frontend/components/admin/UsersTable.tsx

@@ -0,0 +1,240 @@
+import { useState, useCallback } from "react";
+import { useNavigate } from "react-router";
+import type { AdminUser, Pagination } from "@/hooks/useAdmin.js";
+
+interface UsersTableProps {
+  users: AdminUser[];
+  pagination: Pagination | null;
+  isLoading: boolean;
+  search: string;
+  onSearchChange: (search: string) => void;
+  onPageChange: (page: number) => void;
+}
+
+type SortField = "name" | "email" | "createdAt" | "emailVerified";
+type SortDir = "asc" | "desc";
+
+export default function UsersTable({
+  users,
+  pagination,
+  isLoading,
+  search,
+  onSearchChange,
+  onPageChange,
+}: UsersTableProps) {
+  const navigate = useNavigate();
+  const [sortField, setSortField] = useState<SortField>("createdAt");
+  const [sortDir, setSortDir] = useState<SortDir>("desc");
+
+  const handleSort = useCallback(
+    (field: SortField) => {
+      if (sortField === field) {
+        setSortDir((d) => (d === "asc" ? "desc" : "asc"));
+      } else {
+        setSortField(field);
+        setSortDir("asc");
+      }
+    },
+    [sortField],
+  );
+
+  const sorted = [...users].sort((a, b) => {
+    let cmp = 0;
+    switch (sortField) {
+      case "name":
+        cmp = a.name.localeCompare(b.name);
+        break;
+      case "email":
+        cmp = a.email.localeCompare(b.email);
+        break;
+      case "createdAt":
+        cmp = new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
+        break;
+      case "emailVerified":
+        cmp = Number(a.emailVerified) - Number(b.emailVerified);
+        break;
+    }
+    return sortDir === "asc" ? cmp : -cmp;
+  });
+
+  const SortIcon = ({ field }: { field: SortField }) => {
+    if (sortField !== field) {
+      return (
+        <svg className="ml-1 inline h-3 w-3 text-keel-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
+        </svg>
+      );
+    }
+    return (
+      <svg className="ml-1 inline h-3 w-3 text-keel-blue" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d={sortDir === "asc" ? "M5 15l7-7 7 7" : "M19 9l-7 7-7-7"}
+        />
+      </svg>
+    );
+  };
+
+  return (
+    <div className="rounded-xl border border-keel-gray-800 bg-keel-gray-900">
+      {/* Search */}
+      <div className="border-b border-keel-gray-800 p-4">
+        <div className="relative">
+          <svg
+            className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-keel-gray-400"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+            />
+          </svg>
+          <input
+            type="text"
+            placeholder="Search users by name or email..."
+            value={search}
+            onChange={(e) => onSearchChange(e.target.value)}
+            className="w-full rounded-lg border border-keel-gray-800 bg-keel-gray-950 py-2 pl-10 pr-4 text-sm text-white placeholder-keel-gray-400 focus:border-keel-blue focus:outline-none focus:ring-1 focus:ring-keel-blue"
+          />
+        </div>
+      </div>
+
+      {/* Table */}
+      <div className="overflow-x-auto">
+        <table className="w-full">
+          <thead>
+            <tr className="border-b border-keel-gray-800 text-left text-xs font-medium uppercase tracking-wider text-keel-gray-400">
+              <th
+                className="cursor-pointer px-4 py-3 hover:text-keel-gray-200"
+                onClick={() => handleSort("name")}
+              >
+                Name <SortIcon field="name" />
+              </th>
+              <th
+                className="cursor-pointer px-4 py-3 hover:text-keel-gray-200"
+                onClick={() => handleSort("email")}
+              >
+                Email <SortIcon field="email" />
+              </th>
+              <th
+                className="cursor-pointer px-4 py-3 hover:text-keel-gray-200"
+                onClick={() => handleSort("emailVerified")}
+              >
+                Verified <SortIcon field="emailVerified" />
+              </th>
+              <th
+                className="cursor-pointer px-4 py-3 hover:text-keel-gray-200"
+                onClick={() => handleSort("createdAt")}
+              >
+                Created <SortIcon field="createdAt" />
+              </th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-keel-gray-800">
+            {isLoading ? (
+              <tr>
+                <td colSpan={4} className="px-4 py-8 text-center">
+                  <div className="flex items-center justify-center gap-2">
+                    <div className="h-4 w-4 animate-spin rounded-full border-2 border-keel-gray-800 border-t-keel-blue" />
+                    <span className="text-sm text-keel-gray-400">Loading users...</span>
+                  </div>
+                </td>
+              </tr>
+            ) : sorted.length === 0 ? (
+              <tr>
+                <td colSpan={4} className="px-4 py-8 text-center text-sm text-keel-gray-400">
+                  No users found.
+                </td>
+              </tr>
+            ) : (
+              sorted.map((user) => (
+                <tr
+                  key={user.id}
+                  onClick={() => navigate(`/admin/users/${user.id}`)}
+                  className="cursor-pointer transition-colors hover:bg-keel-gray-800/50"
+                >
+                  <td className="px-4 py-3">
+                    <div className="flex items-center gap-3">
+                      {user.image ? (
+                        <img
+                          src={user.image}
+                          alt={user.name}
+                          className="h-8 w-8 rounded-full object-cover"
+                        />
+                      ) : (
+                        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-keel-blue/20 text-xs font-semibold text-keel-blue">
+                          {user.name.charAt(0).toUpperCase()}
+                        </div>
+                      )}
+                      <span className="text-sm font-medium text-white">
+                        {user.name}
+                      </span>
+                    </div>
+                  </td>
+                  <td className="px-4 py-3 text-sm text-keel-gray-400">
+                    {user.email}
+                  </td>
+                  <td className="px-4 py-3">
+                    {user.emailVerified ? (
+                      <span className="inline-flex items-center rounded-full bg-green-500/10 px-2 py-0.5 text-xs font-medium text-green-400">
+                        Verified
+                      </span>
+                    ) : (
+                      <span className="inline-flex items-center rounded-full bg-yellow-500/10 px-2 py-0.5 text-xs font-medium text-yellow-400">
+                        Pending
+                      </span>
+                    )}
+                  </td>
+                  <td className="px-4 py-3 text-sm text-keel-gray-400">
+                    {new Date(user.createdAt).toLocaleDateString()}
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Pagination */}
+      {pagination && pagination.totalPages > 1 && (
+        <div className="flex items-center justify-between border-t border-keel-gray-800 px-4 py-3">
+          <p className="text-sm text-keel-gray-400">
+            Showing{" "}
+            <span className="font-medium text-white">
+              {(pagination.page - 1) * pagination.limit + 1}
+            </span>{" "}
+            to{" "}
+            <span className="font-medium text-white">
+              {Math.min(pagination.page * pagination.limit, pagination.total)}
+            </span>{" "}
+            of{" "}
+            <span className="font-medium text-white">{pagination.total}</span>{" "}
+            users
+          </p>
+          <div className="flex gap-2">
+            <button
+              onClick={() => onPageChange(pagination.page - 1)}
+              disabled={pagination.page <= 1}
+              className="rounded-lg border border-keel-gray-800 px-3 py-1.5 text-sm text-keel-gray-400 transition-colors hover:border-keel-gray-400 hover:text-white disabled:cursor-not-allowed disabled:opacity-40"
+            >
+              Previous
+            </button>
+            <button
+              onClick={() => onPageChange(pagination.page + 1)}
+              disabled={pagination.page >= pagination.totalPages}
+              className="rounded-lg border border-keel-gray-800 px-3 py-1.5 text-sm text-keel-gray-400 transition-colors hover:border-keel-gray-400 hover:text-white disabled:cursor-not-allowed disabled:opacity-40"
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/sails/admin-dashboard/files/frontend/hooks/useAdmin.ts

@@ -0,0 +1,149 @@
+import { useState, useEffect, useCallback } from "react";
+import { apiGet, apiPatch, apiDelete } from "@/lib/api.js";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface AdminUser {
+  id: string;
+  name: string;
+  email: string;
+  emailVerified: boolean;
+  image: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface Pagination {
+  page: number;
+  limit: number;
+  total: number;
+  totalPages: number;
+}
+
+export interface UsersResponse {
+  users: AdminUser[];
+  pagination: Pagination;
+}
+
+export interface UserDetailResponse {
+  user: AdminUser;
+  activeSessions: number;
+}
+
+export interface DashboardStats {
+  totalUsers: number;
+  newUsersWeek: number;
+  newUsersMonth: number;
+  activeSessions: number;
+  signupsByDay: Array<{ date: string; count: number }>;
+}
+
+// ---------------------------------------------------------------------------
+// API functions
+// ---------------------------------------------------------------------------
+
+export async function fetchUsers(
+  page = 1,
+  search = "",
+  limit = 20,
+): Promise<UsersResponse> {
+  const params = new URLSearchParams({
+    page: String(page),
+    limit: String(limit),
+  });
+  if (search) params.set("search", search);
+  return apiGet<UsersResponse>(`/api/admin/users?${params.toString()}`);
+}
+
+export async function fetchUser(id: string): Promise<UserDetailResponse> {
+  return apiGet<UserDetailResponse>(`/api/admin/users/${id}`);
+}
+
+export async function updateUser(
+  id: string,
+  data: { name?: string; emailVerified?: boolean },
+): Promise<{ user: AdminUser }> {
+  return apiPatch<{ user: AdminUser }>(`/api/admin/users/${id}`, data);
+}
+
+export async function deleteUser(
+  id: string,
+): Promise<{ message: string }> {
+  return apiDelete<{ message: string }>(`/api/admin/users/${id}`);
+}
+
+export async function fetchStats(): Promise<DashboardStats> {
+  return apiGet<DashboardStats>("/api/admin/stats");
+}
+
+// ---------------------------------------------------------------------------
+// Hook: useAdminStats
+// ---------------------------------------------------------------------------
+
+export function useAdminStats() {
+  const [stats, setStats] = useState<DashboardStats | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  const load = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const data = await fetchStats();
+      setStats(data);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Failed to load stats"));
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  return { stats, isLoading, error, refetch: load };
+}
+
+// ---------------------------------------------------------------------------
+// Hook: useAdminUsers
+// ---------------------------------------------------------------------------
+
+export function useAdminUsers(initialPage = 1, initialSearch = "") {
+  const [usersData, setUsersData] = useState<UsersResponse | null>(null);
+  const [page, setPage] = useState(initialPage);
+  const [search, setSearch] = useState(initialSearch);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  const load = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const data = await fetchUsers(page, search);
+      setUsersData(data);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Failed to load users"));
+    } finally {
+      setIsLoading(false);
+    }
+  }, [page, search]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  return {
+    users: usersData?.users ?? [],
+    pagination: usersData?.pagination ?? null,
+    isLoading,
+    error,
+    page,
+    search,
+    setPage,
+    setSearch,
+    refetch: load,
+  };
+}