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