g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

admin
All checks were successful
Build Frontend / build (push) Successful in 1m6s
Details

Browse Source
This commit is contained in:
g
2026-01-12 07:52:36 +00:00
parent e9737c8b24
commit 3ffb64cf9a
2 changed files with 339 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
app/dashboard/admin/orders/page.tsx
View File

@@ -1,8 +1,9 @@
import React from "react"; import React from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Package, AlertTriangle } from "lucide-react"; import { Package, AlertTriangle, CheckCircle2, XCircle, DollarSign } from "lucide-react";
import { fetchServer } from "@/lib/api"; import { fetchServer } from "@/lib/api";
import OrdersTable from "@/components/admin/OrdersTable"; import OrdersTable from "@/components/admin/OrdersTable";
import { MotionWrapper } from "@/components/ui/motion-wrapper";
export const dynamic = 'force-dynamic'; export const dynamic = 'force-dynamic';
@@ -26,7 +27,6 @@ interface SystemStats {
chats: number; chats: number;
} }
export default async function AdminOrdersPage() { export default async function AdminOrdersPage() {
let orders: Order[] = []; let orders: Order[] = [];
let systemStats: SystemStats | null = null; let systemStats: SystemStats | null = null;
@@ -46,14 +46,14 @@ export default async function AdminOrdersPage() {
if (error) { if (error) {
return ( return (
<div className="space-y-6"> <div className="space-y-6 p-1">
<div> <div>
<h1 className="text-2xl font-semibold tracking-tight">Recent Orders</h1> <h1 className="text-3xl font-bold tracking-tight">Recent Orders</h1>
<p className="text-sm text-muted-foreground mt-1">Monitor and manage platform orders</p> <p className="text-muted-foreground mt-2">Monitor and manage platform orders</p>
</div> </div>
<Card> <Card className="border-destructive/50 bg-destructive/10">
<CardContent className="pt-6"> <CardContent className="pt-6">
<div className="text-center text-red-500"> <div className="text-center text-destructive">
<p>{error}</p> <p>{error}</p>
</div> </div>
</CardContent> </CardContent>
@@ -62,146 +62,182 @@ export default async function AdminOrdersPage() {
); );
} }
const acknowledgedOrders = orders.filter(o => o.status === 'acknowledged'); const acknowledgedOrders = orders.filter(o => o.status === 'acknowledged');
const paidOrders = orders.filter(o => o.status === 'paid'); const paidOrders = orders.filter(o => o.status === 'paid');
const completedOrders = orders.filter(o => o.status === 'completed'); const completedOrders = orders.filter(o => o.status === 'completed');
const cancelledOrders = orders.filter(o => o.status === 'cancelled'); const cancelledOrders = orders.filter(o => o.status === 'cancelled');
return ( return (
<div className="space-y-6"> <div className="space-y-8 p-1">
<div> <div>
<h1 className="text-2xl font-semibold tracking-tight">Recent Orders</h1> <h1 className="text-3xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-foreground to-foreground/70">
<p className="text-sm text-muted-foreground mt-1">Monitor and manage platform orders</p> Recent Orders
</h1>
<p className="text-muted-foreground mt-2 text-lg">
Monitor and manage platform transaction activity
</p>
</div> </div>
<MotionWrapper>
<div className="space-y-8">
{/* Stats Cards */} {/* Stats Cards */}
<div className="grid gap-4 md:grid-cols-4"> <div className="grid gap-4 md:grid-cols-4">
<Card> <Card className="bg-background/50 backdrop-blur-sm border-border/40 shadow-sm hover:shadow-md transition-all duration-300">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Total Orders</CardTitle> <CardTitle className="text-sm font-medium text-muted-foreground">Total Orders</CardTitle>
<Package className="h-4 w-4 text-muted-foreground" /> <div className="p-2 rounded-lg bg-primary/10">
<Package className="h-4 w-4 text-primary" />
</div>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold">{systemStats?.orders || 0}</div> <div className="text-2xl font-bold">{systemStats?.orders || 0}</div>
<p className="text-xs text-muted-foreground">All platform orders</p> <div className="flex items-center mt-1">
<div className="h-1.5 w-1.5 rounded-full bg-primary mr-2" />
<p className="text-xs text-muted-foreground">Lifetime volume</p>
</div>
</CardContent> </CardContent>
</Card> </Card>
<Card>
<Card className="bg-background/50 backdrop-blur-sm border-border/40 shadow-sm hover:shadow-md transition-all duration-300">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Acknowledged</CardTitle> <CardTitle className="text-sm font-medium text-muted-foreground">Acknowledged</CardTitle>
<AlertTriangle className="h-4 w-4 text-muted-foreground" /> <div className="p-2 rounded-lg bg-purple-500/10">
<AlertTriangle className="h-4 w-4 text-purple-500" />
</div>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold">{acknowledgedOrders.length}</div> <div className="text-2xl font-bold">{acknowledgedOrders.length}</div>
<p className="text-xs text-muted-foreground">Vendor accepted</p> <div className="flex items-center mt-1">
<div className="h-1.5 w-1.5 rounded-full bg-purple-500 mr-2" />
<p className="text-xs text-muted-foreground">Vendor pending</p>
</div>
</CardContent> </CardContent>
</Card> </Card>
<Card>
<Card className="bg-background/50 backdrop-blur-sm border-border/40 shadow-sm hover:shadow-md transition-all duration-300">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Paid</CardTitle> <CardTitle className="text-sm font-medium text-muted-foreground">Paid</CardTitle>
<Package className="h-4 w-4 text-muted-foreground" /> <div className="p-2 rounded-lg bg-emerald-500/10">
<DollarSign className="h-4 w-4 text-emerald-500" />
</div>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold">{paidOrders.length}</div> <div className="text-2xl font-bold">{paidOrders.length}</div>
<p className="text-xs text-muted-foreground">Payment received</p> <div className="flex items-center mt-1">
<div className="h-1.5 w-1.5 rounded-full bg-emerald-500 mr-2" />
<p className="text-xs text-muted-foreground">Processing</p>
</div>
</CardContent> </CardContent>
</Card> </Card>
<Card>
<Card className="bg-background/50 backdrop-blur-sm border-border/40 shadow-sm hover:shadow-md transition-all duration-300">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Completed</CardTitle> <CardTitle className="text-sm font-medium text-muted-foreground">Completed</CardTitle>
<Package className="h-4 w-4 text-muted-foreground" /> <div className="p-2 rounded-lg bg-blue-500/10">
<CheckCircle2 className="h-4 w-4 text-blue-500" />
</div>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold">{completedOrders.length}</div> <div className="text-2xl font-bold">{completedOrders.length}</div>
<p className="text-xs text-muted-foreground">Successfully delivered</p> <div className="flex items-center mt-1">
<div className="h-1.5 w-1.5 rounded-full bg-blue-500 mr-2" />
<p className="text-xs text-muted-foreground">Delivered</p>
</div>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
{/* Orders Table with Pagination */} {/* Orders Table with Pagination */}
<div className="bg-background/50 backdrop-blur-sm rounded-xl border border-border/40 overflow-hidden shadow-sm">
<OrdersTable orders={orders} /> <OrdersTable orders={orders} />
</div>
{/* Order Analytics */} {/* Order Analytics */}
<div className="grid gap-6 md:grid-cols-2"> <div className="grid gap-6 md:grid-cols-2">
<Card> <Card className="bg-background/50 backdrop-blur-sm border-border/40 shadow-sm">
<CardHeader> <CardHeader>
<CardTitle>Order Status Distribution</CardTitle> <CardTitle>Status Distribution</CardTitle>
<CardDescription>Breakdown of recent orders by status</CardDescription> <CardDescription>Breakdown of active orders</CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between p-2 rounded-lg hover:bg-muted/30 transition-colors">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-3">
<div className="w-3 h-3 bg-purple-500 rounded-full"></div> <div className="w-2 h-12 bg-purple-500 rounded-full"></div>
<span className="text-sm">Acknowledged</span> <div>
<p className="font-medium text-sm">Acknowledged</p>
<p className="text-xs text-muted-foreground">Waiting for shipment</p>
</div> </div>
<span className="text-sm font-medium"> </div>
<span className="font-bold">
{orders.length > 0 ? Math.round((acknowledgedOrders.length / orders.length) * 100) : 0}% {orders.length > 0 ? Math.round((acknowledgedOrders.length / orders.length) * 100) : 0}%
</span> </span>
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between p-2 rounded-lg hover:bg-muted/30 transition-colors">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-3">
<div className="w-3 h-3 bg-emerald-500 rounded-full"></div> <div className="w-2 h-12 bg-emerald-500 rounded-full"></div>
<span className="text-sm">Paid</span> <div>
<p className="font-medium text-sm">Paid</p>
<p className="text-xs text-muted-foreground">Payment confirmed</p>
</div> </div>
<span className="text-sm font-medium"> </div>
<span className="font-bold">
{orders.length > 0 ? Math.round((paidOrders.length / orders.length) * 100) : 0}% {orders.length > 0 ? Math.round((paidOrders.length / orders.length) * 100) : 0}%
</span> </span>
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between p-2 rounded-lg hover:bg-muted/30 transition-colors">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-3">
<div className="w-3 h-3 bg-green-500 rounded-full"></div> <div className="w-2 h-12 bg-blue-500 rounded-full"></div>
<span className="text-sm">Completed</span> <div>
<p className="font-medium text-sm">Completed</p>
<p className="text-xs text-muted-foreground">Successfully concluded</p>
</div> </div>
<span className="text-sm font-medium"> </div>
<span className="font-bold">
{orders.length > 0 ? Math.round((completedOrders.length / orders.length) * 100) : 0}% {orders.length > 0 ? Math.round((completedOrders.length / orders.length) * 100) : 0}%
</span> </span>
</div> </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> </div>
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card className="bg-background/50 backdrop-blur-sm border-border/40 shadow-sm">
<CardHeader> <CardHeader>
<CardTitle>Order Summary</CardTitle> <CardTitle>Activity Summary</CardTitle>
<CardDescription>Recent order activity breakdown</CardDescription> <CardDescription>Recent volume breakdown</CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="space-y-4"> <div className="space-y-6">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between pb-4 border-b border-border/40">
<span className="text-sm">Total Recent Orders</span> <span className="text-sm text-muted-foreground">Total Displayed Orders</span>
<span className="text-sm font-medium">{orders.length}</span> <span className="text-xl font-bold">{orders.length}</span>
</div> </div>
<div className="flex items-center justify-between"> <div className="grid grid-cols-2 gap-4">
<span className="text-sm">Acknowledged</span> <div className="space-y-1">
<span className="text-sm font-medium">{acknowledgedOrders.length}</span> <span className="text-xs uppercase text-muted-foreground tracking-wider">Active</span>
<p className="text-lg font-semibold">{acknowledgedOrders.length + paidOrders.length}</p>
</div> </div>
<div className="flex items-center justify-between"> <div className="space-y-1">
<span className="text-sm">Paid</span> <span className="text-xs uppercase text-muted-foreground tracking-wider">Finished</span>
<span className="text-sm font-medium">{paidOrders.length}</span> <p className="text-lg font-semibold">{completedOrders.length}</p>
</div> </div>
<div className="flex items-center justify-between"> <div className="space-y-1">
<span className="text-sm">Completed</span> <span className="text-xs uppercase text-muted-foreground tracking-wider">Voided</span>
<span className="text-sm font-medium">{completedOrders.length}</span> <p className="text-lg font-semibold text-destructive">{cancelledOrders.length}</p>
</div>
<div className="space-y-1">
<span className="text-xs uppercase text-muted-foreground tracking-wider">Success Rate</span>
<p className="text-lg font-semibold text-green-500">
{orders.length > 0 ? Math.round((completedOrders.length / (orders.length - (acknowledgedOrders.length + paidOrders.length))) * 100) || 100 : 0}%
</p>
</div> </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>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
</div> </div>
</MotionWrapper>
</div>
); );
} }

181
app/dashboard/admin/status/page.tsx
View File

@@ -1,9 +1,10 @@
import React from "react"; import React from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Server, Database, Cpu, HardDrive, Activity } from "lucide-react"; import { Server, Database, Cpu, HardDrive, Activity, Zap } from "lucide-react";
import { fetchServer } from "@/lib/api"; import { fetchServer } from "@/lib/api";
import SystemStatusCard from "@/components/admin/SystemStatusCard"; import SystemStatusCard from "@/components/admin/SystemStatusCard";
import { MotionWrapper } from "@/components/ui/motion-wrapper";
export const dynamic = 'force-dynamic'; export const dynamic = 'force-dynamic';
@@ -35,17 +36,19 @@ export default async function AdminStatusPage() {
console.error("Failed to fetch system status:", err); console.error("Failed to fetch system status:", err);
error = "Failed to load system status"; error = "Failed to load system status";
} }
if (error) { if (error) {
return ( return (
<div className="space-y-6"> <div className="space-y-8 p-1">
<div> <div>
<h1 className="text-2xl font-semibold tracking-tight">System Status</h1> <h1 className="text-3xl font-bold tracking-tight">System Status</h1>
<p className="text-sm text-muted-foreground mt-1">Monitor system health and performance metrics</p> <p className="text-muted-foreground mt-2">Monitor system health and real-time performance metrics</p>
</div> </div>
<Card> <Card className="border-destructive/50 bg-destructive/10">
<CardContent className="pt-6"> <CardContent className="pt-6">
<div className="text-center text-red-500"> <div className="flex items-center gap-3 text-destructive">
<p>{error}</p> <Activity className="h-5 w-5" />
<p className="font-medium">{error}</p>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
@@ -71,112 +74,172 @@ export default async function AdminStatusPage() {
Math.round((systemStatus.memory.heapUsed / systemStatus.memory.heapTotal) * 100) : 0; Math.round((systemStatus.memory.heapUsed / systemStatus.memory.heapTotal) * 100) : 0;
return ( return (
<div className="space-y-6"> <div className="space-y-8 p-1">
<div> <div>
<h1 className="text-2xl font-semibold tracking-tight">System Status</h1> <h1 className="text-3xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-foreground to-foreground/70">
<p className="text-sm text-muted-foreground mt-1">Monitor system health and performance metrics</p> System Status
</h1>
<p className="text-muted-foreground mt-2 text-lg">
Monitor system health and real-time performance metrics
</p>
</div> </div>
<MotionWrapper>
<div className="space-y-8">
<SystemStatusCard /> <SystemStatusCard />
<div className="grid gap-4 lg:gap-6 sm:grid-cols-2 lg:grid-cols-3"> <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
{/* Server Status */} {/* Server Status */}
<Card> <Card className="bg-background/50 backdrop-blur-sm border-border/40 shadow-sm hover:shadow-md transition-all duration-300">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Server Status</CardTitle> <CardTitle className="text-sm font-medium text-muted-foreground">Server Uptime</CardTitle>
<Server className="h-4 w-4 text-muted-foreground" /> <div className="p-2 rounded-lg bg-green-500/10">
<Server className="h-4 w-4 text-green-500" />
</div>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Badge variant="default" className="bg-green-500">Online</Badge> <span className="text-2xl font-bold">
<span className="text-sm text-muted-foreground">
{systemStatus ? formatUptime(systemStatus.uptimeSeconds) : 'N/A'} {systemStatus ? formatUptime(systemStatus.uptimeSeconds) : 'N/A'}
</span> </span>
</div> </div>
<p className="text-xs text-muted-foreground mt-2"> <div className="flex items-center mt-2 space-x-2">
Last checked: {new Date().toLocaleTimeString()} <Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
</p> Online
</Badge>
<span className="text-xs text-muted-foreground">
Checked: {new Date().toLocaleTimeString()}
</span>
</div>
</CardContent> </CardContent>
</Card> </Card>
{/* Database Status */} {/* Database Status */}
<Card> <Card className="bg-background/50 backdrop-blur-sm border-border/40 shadow-sm hover:shadow-md transition-all duration-300">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Database</CardTitle> <CardTitle className="text-sm font-medium text-muted-foreground">Database Health</CardTitle>
<Database className="h-4 w-4 text-muted-foreground" /> <div className="p-2 rounded-lg bg-blue-500/10">
<Database className="h-4 w-4 text-blue-500" />
</div>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Badge variant="default" className="bg-green-500">Connected</Badge> <span className="text-2xl font-bold">
<span className="text-sm text-muted-foreground"> {systemStatus ? `${(systemStatus.counts.vendors + systemStatus.counts.orders + systemStatus.counts.products).toLocaleString()}` : '0'}
{systemStatus ? `${systemStatus.counts.vendors + systemStatus.counts.orders + systemStatus.counts.products} records` : 'N/A'} </span>
<span className="text-sm text-muted-foreground self-end mb-1">records</span>
</div>
<div className="flex items-center mt-2 space-x-2">
<Badge variant="outline" className="bg-blue-500/10 text-blue-500 border-blue-500/20">
Connected
</Badge>
<span className="text-xs text-muted-foreground">
4 active collections
</span> </span>
</div> </div>
<p className="text-xs text-muted-foreground mt-2">
Total collections: 4
</p>
</CardContent> </CardContent>
</Card> </Card>
{/* Memory Usage */} {/* Memory Usage */}
<Card> <Card className="bg-background/50 backdrop-blur-sm border-border/40 shadow-sm hover:shadow-md transition-all duration-300">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Memory</CardTitle> <CardTitle className="text-sm font-medium text-muted-foreground">Memory Usage</CardTitle>
<HardDrive className="h-4 w-4 text-muted-foreground" /> <div className="p-2 rounded-lg bg-purple-500/10">
<HardDrive className="h-4 w-4 text-purple-500" />
</div>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Badge variant={memoryUsagePercent > 80 ? "destructive" : memoryUsagePercent > 60 ? "secondary" : "outline"}> <span className="text-2xl font-bold">
{memoryUsagePercent}%
</Badge>
<span className="text-sm text-muted-foreground">
{systemStatus ? formatBytes(systemStatus.memory.heapUsed) : 'N/A'} {systemStatus ? formatBytes(systemStatus.memory.heapUsed) : 'N/A'}
</span> </span>
<span className="text-sm text-muted-foreground self-end mb-1">used</span>
</div> </div>
<p className="text-xs text-muted-foreground mt-2"> <div className="flex items-center mt-2 space-x-2">
<Badge variant="outline" className={`
${memoryUsagePercent > 80 ? 'bg-red-500/10 text-red-500 border-red-500/20' :
memoryUsagePercent > 60 ? 'bg-yellow-500/10 text-yellow-500 border-yellow-500/20' :
'bg-purple-500/10 text-purple-500 border-purple-500/20'}
`}>
{memoryUsagePercent}% Load
</Badge>
<span className="text-xs text-muted-foreground">
Total: {systemStatus ? formatBytes(systemStatus.memory.heapTotal) : 'N/A'} Total: {systemStatus ? formatBytes(systemStatus.memory.heapTotal) : 'N/A'}
</p> </span>
</div>
</CardContent> </CardContent>
</Card> </Card>
{/* Platform Stats */} {/* Platform Stats */}
<Card> <Card className="bg-background/50 backdrop-blur-sm border-border/40 shadow-sm hover:shadow-md transition-all duration-300">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Platform Stats</CardTitle> <CardTitle className="text-sm font-medium text-muted-foreground">Platform Activity</CardTitle>
<Activity className="h-4 w-4 text-muted-foreground" /> <div className="p-2 rounded-lg bg-orange-500/10">
<Activity className="h-4 w-4 text-orange-500" />
</div>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Badge variant="default" className="bg-green-500">Active</Badge> <span className="text-2xl font-bold">
<span className="text-sm text-muted-foreground"> {systemStatus ? systemStatus.counts.vendors : '0'}
{systemStatus ? `${systemStatus.counts.vendors} vendors` : 'N/A'} </span>
<span className="text-sm text-muted-foreground self-end mb-1">Active Vendors</span>
</div>
<div className="flex items-center mt-2 space-x-2">
<Badge variant="outline" className="bg-orange-500/10 text-orange-500 border-orange-500/20">
Live
</Badge>
<span className="text-xs text-muted-foreground">
{systemStatus ? `${systemStatus.counts.orders} orders` : '0 orders'}
</span> </span>
</div> </div>
<p className="text-xs text-muted-foreground mt-2">
{systemStatus ? `${systemStatus.counts.orders} orders, ${systemStatus.counts.products} products` : 'N/A'}
</p>
</CardContent> </CardContent>
</Card> </Card>
{/* Node.js Version */} {/* Runtime Info */}
<Card> <Card className="bg-background/50 backdrop-blur-sm border-border/40 shadow-sm hover:shadow-md transition-all duration-300 md:col-span-2 lg:col-span-2">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Runtime</CardTitle> <CardTitle className="text-sm font-medium text-muted-foreground">Runtime Environment</CardTitle>
<Activity className="h-4 w-4 text-muted-foreground" /> <div className="p-2 rounded-lg bg-zinc-500/10">
<Cpu className="h-4 w-4 text-zinc-500" />
</div>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="flex items-center space-x-2"> <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<Badge variant="outline"> <div className="flex items-center gap-4">
{systemStatus ? `Node ${systemStatus.versions.node}` : 'N/A'} <div>
</Badge> <p className="text-2xl font-bold">Node.js</p>
<span className="text-sm text-muted-foreground">Runtime</span> <p className="text-xs text-muted-foreground mt-1">Runtime</p>
</div>
<Badge variant="secondary" className="text-sm h-7">
{systemStatus ? `v${systemStatus.versions.node}` : 'N/A'}
</Badge>
</div>
<div className="h-8 w-px bg-border/50 hidden sm:block" />
<div className="flex items-center gap-4">
<div>
<p className="text-2xl font-bold">V8</p>
<p className="text-xs text-muted-foreground mt-1">Engine</p>
</div>
<Badge variant="secondary" className="text-sm h-7">
{systemStatus ? systemStatus.versions.v8 : 'N/A'}
</Badge>
</div>
<div className="h-8 w-px bg-border/50 hidden sm:block" />
<div className="flex items-center gap-2 text-sm text-muted-foreground bg-muted/30 px-3 py-1.5 rounded-md">
<Zap className="h-3.5 w-3.5 text-yellow-500" />
<span>Performance Optimized</span>
</div>
</div> </div>
<p className="text-xs text-muted-foreground mt-2">
{systemStatus ? `V8: ${systemStatus.versions.v8}` : 'N/A'}
</p>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
</div> </div>
</MotionWrapper>
</div>
); );
} }