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.
This commit is contained in:
NotII
61
components/admin/BanUserCard.tsx
Normal file
61
components/admin/BanUserCard.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
62
components/admin/InviteVendorCard.tsx
Normal file
62
components/admin/InviteVendorCard.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
74
components/admin/RecentOrdersCard.tsx
Normal file
74
components/admin/RecentOrdersCard.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user