feat: admin dashboard

2026-06-16 14:50:09 +05:30
commit a70c50254e
30 changed files with 5572 additions and 0 deletions
@@ -0,0 +1,120 @@
+"use client";
+
+import * as React from "react";
+import { Search } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+
+type ListLike = {
+  loading: boolean;
+  error: string | null;
+  total: number;
+  page: number;
+  totalPages: number;
+  setPage: (p: number) => void;
+};
+
+/**
+ * Shared chrome for every admin list page: a title with a live total, an
+ * optional debounced search box, an optional toolbar (filters/tabs), the
+ * table (children), and a pagination footer. Keeps the resource pages tiny.
+ */
+export function ListShell({
+  title,
+  total,
+  searchPlaceholder,
+  onQueryChange,
+  toolbar,
+  list,
+  children,
+}: {
+  title: string;
+  total: number;
+  searchPlaceholder?: string;
+  onQueryChange?: (q: string) => void;
+  toolbar?: React.ReactNode;
+  list: ListLike;
+  children: React.ReactNode;
+}) {
+  const [raw, setRaw] = React.useState("");
+
+  // Debounce search input → parent query (300ms).
+  React.useEffect(() => {
+    if (!onQueryChange) return;
+    const t = setTimeout(() => onQueryChange(raw.trim()), 300);
+    return () => clearTimeout(t);
+  }, [raw, onQueryChange]);
+
+  return (
+    <div className="space-y-5">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <h1 className="text-2xl font-semibold text-foreground">
+          {title}
+          <span className="ml-2 text-sm font-normal text-muted-foreground">
+            {total.toLocaleString()}
+          </span>
+        </h1>
+        {toolbar}
+      </div>
+
+      {onQueryChange ? (
+        <div className="relative max-w-md">
+          <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            value={raw}
+            onChange={(e) => setRaw(e.target.value)}
+            placeholder={searchPlaceholder ?? "Search…"}
+            className="pl-9"
+          />
+        </div>
+      ) : null}
+
+      {list.error ? (
+        <p className="text-sm text-destructive">{list.error}</p>
+      ) : null}
+
+      <div className={list.loading ? "opacity-60 transition-opacity" : ""}>
+        {children}
+      </div>
+
+      <div className="flex items-center justify-between text-sm text-muted-foreground">
+        <span>
+          Page {list.page} of {list.totalPages}
+          {list.loading ? " · loading…" : ""}
+        </span>
+        <div className="flex gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={list.page <= 1 || list.loading}
+            onClick={() => list.setPage(list.page - 1)}
+          >
+            Previous
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={list.page >= list.totalPages || list.loading}
+            onClick={() => list.setPage(list.page + 1)}
+          >
+            Next
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** Centered empty-state row spanning the table. */
+export function EmptyRow({ cols, label }: { cols: number; label: string }) {
+  return (
+    <tr>
+      <td
+        colSpan={cols}
+        className="px-4 py-10 text-center text-sm text-muted-foreground"
+      >
+        {label}
+      </td>
+    </tr>
+  );
+}