69 lines
1.8 KiB
TypeScript
69 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { Package, Clock, CheckCircle, AlertTriangle } from "lucide-react";
|
|
import OrderStats from "./order-stats"
|
|
|
|
interface OrderStatsProps {
|
|
totalOrders: number;
|
|
pendingOrders: number;
|
|
completedOrders: number;
|
|
cancelledOrders: number;
|
|
}
|
|
|
|
interface ContentProps {
|
|
username: string;
|
|
orderStats: OrderStatsProps;
|
|
}
|
|
|
|
export default function Content({ username, orderStats }: ContentProps) {
|
|
const [greeting, setGreeting] = useState("");
|
|
|
|
useEffect(() => {
|
|
const hour = new Date().getHours();
|
|
if (hour < 12) {
|
|
setGreeting("Good morning");
|
|
} else if (hour < 18) {
|
|
setGreeting("Good afternoon");
|
|
} else {
|
|
setGreeting("Good evening");
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Dynamic Greeting */}
|
|
<h1 className="text-2xl font-semibold text-gray-900 dark:text-white">
|
|
{greeting}, {username}!
|
|
</h1>
|
|
|
|
{/* Order Stats */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<OrderStats
|
|
title="Total Orders"
|
|
value={orderStats.totalOrders.toLocaleString()}
|
|
icon={Package}
|
|
/>
|
|
<OrderStats
|
|
title="Completed Orders"
|
|
value={orderStats.completedOrders.toLocaleString()}
|
|
icon={CheckCircle}
|
|
/>
|
|
<OrderStats
|
|
title="Pending Orders"
|
|
value={orderStats.pendingOrders.toLocaleString()}
|
|
icon={Clock}
|
|
/>
|
|
<OrderStats
|
|
title="Cancelled Orders"
|
|
value={orderStats.cancelledOrders.toLocaleString()}
|
|
icon={AlertTriangle}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<div className="lg:col-span-2"></div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |