c31604d29a
Added 'force-dynamic' export to admin orders and status pages for dynamic rendering. Updated next.config.mjs to modularize imports for better tree-shaking and switched to Turbopack for optimal bundle sizes. Upgraded Next.js and related dependencies in package.json and package-lock.json.
208 lines
8.0 KiB
TypeScript
208 lines
8.0 KiB
TypeScript
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";
|
|
|
|
export const dynamic = 'force-dynamic';
|
|
|
|
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>
|
|
);
|
|
}
|