Fix preorder/local/hold

dashboard/src/components/dashboard/StatCards.jsx

@@ -532,7 +532,6 @@ const ShippingDetails = ({ data }) => {
 const OrderTypeDetails = ({ data, type }) => {
   if (!data?.length) return <div className="text-muted-foreground">No data available for the selected time range.</div>;
 
-  // Access the correct daily data using the 'type' prop
   const timeSeriesData = data.map(day => ({
     timestamp: day.timestamp,
     count: day.count,
@@ -540,31 +539,16 @@ const OrderTypeDetails = ({ data, type }) => {
     percentage: day.percentage
   }));
 
-  const typeLabels = {
-    'pre_orders': 'Pre-Orders',
-    'local_pickup': 'Local Pickup',
-    'on_hold': 'On Hold'
+  const typeColors = {
+    'pre_orders': 'hsl(47.9 95.8% 53.1%)', // Yellow for pre-orders
+    'local_pickup': 'hsl(192.2 70.1% 51.4%)', // Cyan for local pickup
+    'on_hold': 'hsl(346.8 77.2% 49.8%)' // Red for on hold
   };
 
+  const color = typeColors[type];
+
   return (
     <div className="space-y-8">
-      <div className="grid grid-cols-2 gap-4">
-        <StatCard
-          title={`Total ${typeLabels[type]}`}
-          value={data[0]?.totalOrders?.toLocaleString() || 0}
-          description={`${data[0]?.percentage?.toFixed(1) || 0}% of all orders`}
-          colorClass="text-blue-600 dark:text-blue-400"
-          icon={ShoppingCart}
-        />
-        <StatCard
-          title="Total Value"
-          value={formatCurrency(data[0]?.value || 0)}
-          description={`Avg: ${formatCurrency((data[0]?.value || 0) / (data[0]?.count || 1))}`}
-          colorClass="text-green-600 dark:text-green-400"
-          icon={DollarSign}
-        />
-      </div>
-
       <div>
         <h3 className="text-lg font-medium mb-4">Daily Order Count</h3>
         <TimeSeriesChart
@@ -572,7 +556,7 @@ const OrderTypeDetails = ({ data, type }) => {
           dataKey="count"
           name="Orders"
           type="bar"
-          color="hsl(221.2 83.2% 53.3%)"
+          color={color}
         />
       </div>
 
@@ -582,7 +566,7 @@ const OrderTypeDetails = ({ data, type }) => {
           data={timeSeriesData}
           dataKey="value"
           name="Value"
-          color="hsl(142.1 76.2% 36.3%)"
+          color={color}
           valueFormatter={(value) => formatCurrency(value)}
         />
       </div>
@@ -593,7 +577,7 @@ const OrderTypeDetails = ({ data, type }) => {
           data={timeSeriesData}
           dataKey="percentage"
           name="Percentage"
-          color="hsl(262.1 83.3% 57.8%)"
+          color={color}
           valueFormatter={(value) => `${value.toFixed(1)}%`}
         />
       </div>
@@ -1622,7 +1606,7 @@ const StatCards = ({
 
           <StatCard
             title="Pre-Orders"
-            value={stats?.orderTypes?.preOrders?.percentage?.toFixed(1) || '0'}
+            value={((stats?.orderTypes?.preOrders?.count / stats?.orderCount) * 100)?.toFixed(1) || '0'}
             valueSuffix="%"
             description={`${stats?.orderTypes?.preOrders?.count || 0} orders`}
             colorClass="text-yellow-600 dark:text-yellow-400"
@@ -1634,7 +1618,7 @@ const StatCards = ({
 
           <StatCard
             title="Local Pickup"
-            value={stats?.orderTypes?.localPickup?.percentage?.toFixed(1) || '0'}
+            value={((stats?.orderTypes?.localPickup?.count / stats?.orderCount) * 100)?.toFixed(1) || '0'}
             valueSuffix="%"
             description={`${stats?.orderTypes?.localPickup?.count || 0} orders`}
             colorClass="text-cyan-600 dark:text-cyan-400"
@@ -1646,7 +1630,7 @@ const StatCards = ({
 
           <StatCard
             title="On Hold"
-            value={stats?.orderTypes?.heldItems?.percentage?.toFixed(1) || '0'}
+            value={((stats?.orderTypes?.heldItems?.count / stats?.orderCount) * 100)?.toFixed(1) || '0'}
             valueSuffix="%"
             description={`${stats?.orderTypes?.heldItems?.count || 0} orders`}
             colorClass="text-red-600 dark:text-red-400"