feat: admin dashboard

components/ui/button.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+type Variant = "primary" | "outline" | "ghost" | "destructive";
+type Size = "sm" | "md";
+
+const variants: Record<Variant, string> = {
+  primary: "bg-primary text-primary-foreground hover:opacity-90",
+  outline: "border border-border bg-card text-foreground hover:bg-muted",
+  ghost: "text-foreground hover:bg-muted",
+  destructive: "bg-destructive text-destructive-foreground hover:opacity-90",
+};
+const sizes: Record<Size, string> = {
+  sm: "h-8 px-3 text-xs",
+  md: "h-10 px-4 text-sm",
+};
+
+export function Button({
+  variant = "primary",
+  size = "md",
+  className,
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: Variant;
+  size?: Size;
+}) {
+  return (
+    <button
+      className={cn(
+        "inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors outline-none",
+        "focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:pointer-events-none",
+        variants[variant],
+        sizes[size],
+        className,
+      )}
+      {...props}
+    />
+  );
+}

components/ui/input.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export const Input = React.forwardRef<
+  HTMLInputElement,
+  React.InputHTMLAttributes<HTMLInputElement>
+>(function Input({ className, ...props }, ref) {
+  return (
+    <input
+      ref={ref}
+      className={cn(
+        "h-10 w-full rounded-lg border border-input bg-card px-3 text-sm text-foreground",
+        "placeholder:text-muted-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+export const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>
+>(function Textarea({ className, ...props }, ref) {
+  return (
+    <textarea
+      ref={ref}
+      className={cn(
+        "w-full rounded-lg border border-input bg-card px-3 py-2 text-sm text-foreground",
+        "placeholder:text-muted-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+});

components/ui/modal.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import * as React from "react";
+import { X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+/** A minimal centered modal dialog. Closes on overlay click and Escape. */
+export function Modal({
+  open,
+  onClose,
+  title,
+  children,
+}: {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  children: React.ReactNode;
+}) {
+  React.useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
+      onClick={onClose}
+    >
+      <div
+        className="w-full max-w-lg rounded-2xl border border-border bg-card shadow-xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between border-b border-border px-5 py-4">
+          <h2 className="text-base font-semibold text-foreground">{title}</h2>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onClose}
+            aria-label="Close"
+            className="size-8 px-0"
+          >
+            <X className="size-4" />
+          </Button>
+        </div>
+        <div className="px-5 py-4">{children}</div>
+      </div>
+    </div>
+  );
+}

components/ui/table.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export function Table({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="overflow-x-auto rounded-xl border border-border bg-card">
+      <table className="w-full border-collapse text-sm">{children}</table>
+    </div>
+  );
+}
+
+export function THead({ children }: { children: React.ReactNode }) {
+  return (
+    <thead className="border-b border-border bg-muted/50 text-left text-xs uppercase tracking-wide text-muted-foreground">
+      {children}
+    </thead>
+  );
+}
+
+export function TH({
+  children,
+  className,
+}: {
+  children?: React.ReactNode;
+  className?: string;
+}) {
+  return <th className={cn("px-4 py-3 font-medium", className)}>{children}</th>;
+}
+
+export function TR({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <tr className={cn("border-b border-border last:border-0 align-top", className)}>
+      {children}
+    </tr>
+  );
+}
+
+export function TD({
+  children,
+  className,
+}: {
+  children?: React.ReactNode;
+  className?: string;
+}) {
+  return <td className={cn("px-4 py-3 text-foreground", className)}>{children}</td>;
+}