slight cleanup

components/kokonutui/content.tsx

@@ -2,9 +2,9 @@
 
 import { useState, useEffect } from "react";
 import { Package, Clock, CheckCircle, AlertTriangle } from "lucide-react";
-import OrderStats from "./order-stats"
+import OrderStats from "./order-stats";
 
-interface OrderStatsProps {
+interface OrderStatsData {
   totalOrders: number;
   pendingOrders: number;
   completedOrders: number;
@@ -13,56 +13,45 @@ interface OrderStatsProps {
 
 interface ContentProps {
   username: string;
-  orderStats: OrderStatsProps;
+  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(() => {
-    const hour = new Date().getHours();
-    if (hour < 12) {
-      setGreeting("Good morning");
-    } else if (hour < 18) {
-      setGreeting("Good afternoon");
-    } else {
-      setGreeting("Good evening");
-    }
+    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">
-      {/* 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>
+        {statsConfig.map((stat) => (
+          <OrderStats
+            key={stat.title}
+            title={stat.title}
+            value={stat.value.toLocaleString()}
+            icon={stat.icon}
+          />
+        ))}
       </div>
     </div>
   );