Add admin dashboard and middleware protection

Introduces an admin dashboard page with cards for inviting vendors, banning users, and viewing recent orders. Adds middleware logic to restrict /admin routes to the 'admin1' user and updates route matching. Also updates git-info.json with latest commit metadata.

app/admin/page.tsx

@@ -0,0 +1,74 @@
+export const dynamic = "force-dynamic";
+
+import InviteVendorCard from "@/components/admin/InviteVendorCard";
+import BanUserCard from "@/components/admin/BanUserCard";
+import RecentOrdersCard from "@/components/admin/RecentOrdersCard";
+
+export default function AdminPage() {
+  return (
+    <div className="p-6 space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold tracking-tight">Admin</h1>
+        <p className="text-sm text-muted-foreground mt-1">Restricted area. Only admin1 can access.</p>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        <a href="#" className="group rounded-lg border border-border/60 bg-background p-4 hover:bg-muted/40 transition-colors">
+          <div className="flex items-start justify-between">
+            <div>
+              <h2 className="font-medium">System status</h2>
+              <p className="text-sm text-muted-foreground mt-1">Uptime, versions, environment</p>
+            </div>
+            <span className="text-xs px-2 py-0.5 rounded bg-emerald-500/15 text-emerald-400">OK</span>
+          </div>
+        </a>
+
+        <a href="#" className="group rounded-lg border border-border/60 bg-background p-4 hover:bg-muted/40 transition-colors">
+          <div className="flex items-start justify-between">
+            <div>
+              <h2 className="font-medium">Logs</h2>
+              <p className="text-sm text-muted-foreground mt-1">View recent errors and warnings</p>
+            </div>
+            <span className="text-xs px-2 py-0.5 rounded bg-amber-500/15 text-amber-400">New</span>
+          </div>
+        </a>
+
+        <InviteVendorCard />
+        <BanUserCard />
+        <RecentOrdersCard />
+
+        <a href="#" className="group rounded-lg border border-border/60 bg-background p-4 hover:bg-muted/40 transition-colors">
+          <div className="flex items-start justify-between">
+            <div>
+              <h2 className="font-medium">Broadcast</h2>
+              <p className="text-sm text-muted-foreground mt-1">Send a message to users</p>
+            </div>
+            <span className="text-xs px-2 py-0.5 rounded bg-fuchsia-500/15 text-fuchsia-400">Tools</span>
+          </div>
+        </a>
+
+        <a href="#" className="group rounded-lg border border-border/60 bg-background p-4 hover:bg-muted/40 transition-colors">
+          <div className="flex items-start justify-between">
+            <div>
+              <h2 className="font-medium">Config</h2>
+              <p className="text-sm text-muted-foreground mt-1">Feature flags and settings</p>
+            </div>
+            <span className="text-xs px-2 py-0.5 rounded bg-indigo-500/15 text-indigo-400">Edit</span>
+          </div>
+        </a>
+
+        <a href="#" className="group rounded-lg border border-border/60 bg-background p-4 hover:bg-muted/40 transition-colors">
+          <div className="flex items-start justify-between">
+            <div>
+              <h2 className="font-medium">Payments</h2>
+              <p className="text-sm text-muted-foreground mt-1">Gateways and webhooks</p>
+            </div>
+            <span className="text-xs px-2 py-0.5 rounded bg-teal-500/15 text-teal-400">Setup</span>
+          </div>
+        </a>
+      </div>
+    </div>
+  );
+}
+
+

components/admin/BanUserCard.tsx

@@ -0,0 +1,61 @@
+"use client";
+import { useState } from "react";
+import { fetchClient } from "@/lib/api-client";
+
+export default function BanUserCard() {
+  const [telegramUserId, setTelegramUserId] = useState("");
+  const [reason, setReason] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState<string | null>(null);
+
+  async function handleBan(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setMessage(null);
+    try {
+      await fetchClient("/admin/ban", {
+        method: "POST",
+        body: { telegramUserId, reason }
+      });
+      setMessage("User banned");
+      setTelegramUserId("");
+      setReason("");
+    } catch (e: any) {
+      setMessage(e?.message || "Failed to ban user");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="rounded-lg border border-border/60 bg-background p-4">
+      <h2 className="font-medium">Ban User</h2>
+      <p className="text-sm text-muted-foreground mt-1">Block abusive users by Telegram ID</p>
+      <form onSubmit={handleBan} className="mt-4 space-y-3">
+        <input
+          className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm"
+          placeholder="Telegram user ID"
+          value={telegramUserId}
+          onChange={(e) => setTelegramUserId(e.target.value)}
+          required
+        />
+        <input
+          className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm"
+          placeholder="Reason (optional)"
+          value={reason}
+          onChange={(e) => setReason(e.target.value)}
+        />
+        <button
+          type="submit"
+          className="inline-flex items-center rounded-md bg-destructive px-3 py-2 text-sm text-destructive-foreground disabled:opacity-60"
+          disabled={loading}
+        >
+          {loading ? "Banning..." : "Ban User"}
+        </button>
+        {message && <p className="text-xs text-muted-foreground">{message}</p>}
+      </form>
+    </div>
+  );
+}
+
+

components/admin/InviteVendorCard.tsx

@@ -0,0 +1,62 @@
+"use client";
+import { useState } from "react";
+import { fetchClient } from "@/lib/api-client";
+
+export default function InviteVendorCard() {
+  const [username, setUsername] = useState("");
+  const [email, setEmail] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState<string | null>(null);
+
+  async function handleInvite(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setMessage(null);
+    try {
+      await fetchClient("/admin/invitations", {
+        method: "POST",
+        body: { username, email }
+      });
+      setMessage("Invitation sent");
+      setUsername("");
+      setEmail("");
+    } catch (e: any) {
+      setMessage(e?.message || "Failed to send invitation");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="rounded-lg border border-border/60 bg-background p-4">
+      <h2 className="font-medium">Invite Vendor</h2>
+      <p className="text-sm text-muted-foreground mt-1">Generate and send an invite</p>
+      <form onSubmit={handleInvite} className="mt-4 space-y-3">
+        <input
+          className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm"
+          placeholder="Vendor username"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+          required
+        />
+        <input
+          className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm"
+          placeholder="Email (optional)"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          type="email"
+        />
+        <button
+          type="submit"
+          className="inline-flex items-center rounded-md bg-primary px-3 py-2 text-sm text-primary-foreground disabled:opacity-60"
+          disabled={loading}
+        >
+          {loading ? "Sending..." : "Send Invite"}
+        </button>
+        {message && <p className="text-xs text-muted-foreground">{message}</p>}
+      </form>
+    </div>
+  );
+}
+
+

components/admin/RecentOrdersCard.tsx

@@ -0,0 +1,74 @@
+"use client";
+import { useEffect, useState } from "react";
+import { fetchClient } from "@/lib/api-client";
+
+interface OrderItem {
+  name: string;
+  quantity: number;
+}
+
+interface Order {
+  orderId: number | string;
+  userId: number;
+  total: number;
+  createdAt: string;
+  items?: OrderItem[];
+}
+
+export default function RecentOrdersCard() {
+  const [orders, setOrders] = useState<Order[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let mounted = true;
+    (async () => {
+      try {
+        const data = await fetchClient<Order[]>("/admin/recent-orders");
+        if (mounted) setOrders(data);
+      } catch (e: any) {
+        if (mounted) setError(e?.message || "Failed to load orders");
+      } finally {
+        if (mounted) setLoading(false);
+      }
+    })();
+    return () => { mounted = false; };
+  }, []);
+
+  return (
+    <div className="rounded-lg border border-border/60 bg-background p-4">
+      <h2 className="font-medium">Recent Orders</h2>
+      <p className="text-sm text-muted-foreground mt-1">Last 10 orders across stores</p>
+      {loading ? (
+        <p className="text-sm text-muted-foreground mt-3">Loading...</p>
+      ) : error ? (
+        <p className="text-sm text-muted-foreground mt-3">{error}</p>
+      ) : orders.length === 0 ? (
+        <p className="text-sm text-muted-foreground mt-3">No recent orders</p>
+      ) : (
+        <div className="mt-3 space-y-3">
+          {orders.slice(0, 10).map((o) => (
+            <div key={String(o.orderId)} className="rounded border border-border/50 p-3">
+              <div className="flex items-center justify-between text-sm">
+                <div className="font-medium">Order #{o.orderId}</div>
+                <div className="text-muted-foreground">{new Date(o.createdAt).toLocaleString()}</div>
+              </div>
+              <div className="mt-1 text-xs text-muted-foreground">
+                User: {o.userId} · Total: {o.total}
+              </div>
+              {o.items && o.items.length > 0 && (
+                <ul className="mt-2 text-xs list-disc pl-4 text-muted-foreground">
+                  {o.items.map((it, idx) => (
+                    <li key={idx}>{it.name} × {it.quantity}</li>
+                  ))}
+                </ul>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+

middleware.ts

@@ -52,7 +52,23 @@ export async function middleware(req: NextRequest) {
       return NextResponse.redirect(new URL("/auth/login", req.url));
     }
 
-    console.log("Middleware: Auth check successful, proceeding to dashboard");
+    console.log("Middleware: Auth check successful");
+
+    // Admin-only protection for /admin routes
+    const pathname = new URL(req.url).pathname;
+    if (pathname.startsWith('/admin')) {
+      try {
+        const user = await res.json();
+        const username = user?.vendor?.username;
+        if (username !== 'admin1') {
+          console.log("Middleware: Non-admin attempted to access /admin, redirecting");
+          return NextResponse.redirect(new URL("/dashboard", req.url));
+        }
+      } catch (e) {
+        console.log("Middleware: Failed to parse user for admin check, redirecting to login");
+        return NextResponse.redirect(new URL("/auth/login", req.url));
+      }
+    }
   } catch (error) {
     console.error("Authentication validation failed:", error);
     return NextResponse.redirect(new URL("/auth/login", req.url));
@@ -62,5 +78,5 @@ export async function middleware(req: NextRequest) {
 }
 
 export const config = {
-  matcher: ["/dashboard/:path*"],
+  matcher: ["/dashboard/:path*", "/admin/:path*"],
 };

public/git-info.json

@@ -1,4 +1,4 @@
 {
-  "commitHash": "864e1e9",
-  "buildTime": "2025-10-10T00:32:58.696Z"
+  "commitHash": "72821e5",
+  "buildTime": "2025-10-15T16:14:23.964Z"
 }