Add admin dashboard pages and restructure admin route
Introduces new admin dashboard pages for alerts, bans, invites, orders, settings, status, and vendors under app/dashboard/admin/. Moves the main admin page to the new dashboard structure and adds a shared admin layout. Updates sidebar configuration and adds supporting components and hooks for admin features.
This commit is contained in:
NotII
205
app/dashboard/admin/orders/page.tsx
Normal file
205
app/dashboard/admin/orders/page.tsx
Normal file
@@ -0,0 +1,205 @@
|
||||
import React from "react";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Package, AlertTriangle } from "lucide-react";
|
||||
import { fetchServer } from "@/lib/api";
|
||||
import OrdersTable from "@/components/admin/OrdersTable";
|
||||
|
||||
interface Order {
|
||||
orderId: string | number;
|
||||
userId: string;
|
||||
total: number;
|
||||
createdAt: string;
|
||||
status: string;
|
||||
items: Array<{
|
||||
name: string;
|
||||
quantity: number;
|
||||
}>;
|
||||
vendorUsername?: string;
|
||||
}
|
||||
|
||||
interface SystemStats {
|
||||
vendors: number;
|
||||
orders: number;
|
||||
products: number;
|
||||
chats: number;
|
||||
}
|
||||
|
||||
|
||||
export default async function AdminOrdersPage() {
|
||||
let orders: Order[] = [];
|
||||
let systemStats: SystemStats | null = null;
|
||||
let error: string | null = null;
|
||||
|
||||
try {
|
||||
const [ordersData, statsData] = await Promise.all([
|
||||
fetchServer<Order[]>("/admin/recent-orders"),
|
||||
fetchServer<SystemStats>("/admin/stats")
|
||||
]);
|
||||
orders = ordersData;
|
||||
systemStats = statsData;
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch data:", err);
|
||||
error = "Failed to load data";
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold tracking-tight">Recent Orders</h1>
|
||||
<p className="text-sm text-muted-foreground mt-1">Monitor and manage platform orders</p>
|
||||
</div>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-center text-red-500">
|
||||
<p>{error}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
const acknowledgedOrders = orders.filter(o => o.status === 'acknowledged');
|
||||
const paidOrders = orders.filter(o => o.status === 'paid');
|
||||
const completedOrders = orders.filter(o => o.status === 'completed');
|
||||
const cancelledOrders = orders.filter(o => o.status === 'cancelled');
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold tracking-tight">Recent Orders</h1>
|
||||
<p className="text-sm text-muted-foreground mt-1">Monitor and manage platform orders</p>
|
||||
</div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="grid gap-4 md:grid-cols-4">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Total Orders</CardTitle>
|
||||
<Package className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{systemStats?.orders || 0}</div>
|
||||
<p className="text-xs text-muted-foreground">All platform orders</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Acknowledged</CardTitle>
|
||||
<AlertTriangle className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{acknowledgedOrders.length}</div>
|
||||
<p className="text-xs text-muted-foreground">Vendor accepted</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Paid</CardTitle>
|
||||
<Package className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{paidOrders.length}</div>
|
||||
<p className="text-xs text-muted-foreground">Payment received</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Completed</CardTitle>
|
||||
<Package className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{completedOrders.length}</div>
|
||||
<p className="text-xs text-muted-foreground">Successfully delivered</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Orders Table with Pagination */}
|
||||
<OrdersTable orders={orders} />
|
||||
|
||||
{/* Order Analytics */}
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Order Status Distribution</CardTitle>
|
||||
<CardDescription>Breakdown of recent orders by status</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-3 h-3 bg-purple-500 rounded-full"></div>
|
||||
<span className="text-sm">Acknowledged</span>
|
||||
</div>
|
||||
<span className="text-sm font-medium">
|
||||
{orders.length > 0 ? Math.round((acknowledgedOrders.length / orders.length) * 100) : 0}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-3 h-3 bg-emerald-500 rounded-full"></div>
|
||||
<span className="text-sm">Paid</span>
|
||||
</div>
|
||||
<span className="text-sm font-medium">
|
||||
{orders.length > 0 ? Math.round((paidOrders.length / orders.length) * 100) : 0}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-3 h-3 bg-green-500 rounded-full"></div>
|
||||
<span className="text-sm">Completed</span>
|
||||
</div>
|
||||
<span className="text-sm font-medium">
|
||||
{orders.length > 0 ? Math.round((completedOrders.length / orders.length) * 100) : 0}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-3 h-3 bg-red-500 rounded-full"></div>
|
||||
<span className="text-sm">Cancelled</span>
|
||||
</div>
|
||||
<span className="text-sm font-medium">
|
||||
{orders.length > 0 ? Math.round((cancelledOrders.length / orders.length) * 100) : 0}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Order Summary</CardTitle>
|
||||
<CardDescription>Recent order activity breakdown</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm">Total Recent Orders</span>
|
||||
<span className="text-sm font-medium">{orders.length}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm">Acknowledged</span>
|
||||
<span className="text-sm font-medium">{acknowledgedOrders.length}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm">Paid</span>
|
||||
<span className="text-sm font-medium">{paidOrders.length}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm">Completed</span>
|
||||
<span className="text-sm font-medium">{completedOrders.length}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm">Cancelled</span>
|
||||
<span className="text-sm font-medium">{cancelledOrders.length}</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user