Fix data in refunds/cancellations charts

dashboard/src/components/dashboard/StatCards.jsx

@@ -1097,10 +1097,27 @@ const StatCards = ({
           }
         });
         const data = response.data.stats;
-        setCacheData(detailTimeRange, metric, data);
-        setDetailData(prev => ({ ...prev, [metric]: data }));
+        
+        // Transform the data to match the expected format
+        const transformedData = data.map(day => ({
+          ...day,
+          timestamp: day.timestamp,
+          refunds: metric === 'refunds' ? {
+            total: day.refunds?.total || 0,
+            count: day.refunds?.count || 0,
+            reasons: day.refunds?.reasons || {}
+          } : undefined,
+          canceledOrders: metric === 'cancellations' ? {
+            total: day.canceledOrders?.total || 0,
+            count: day.canceledOrders?.count || 0,
+            reasons: day.canceledOrders?.reasons || {}
+          } : undefined
+        }));
+
+        setCacheData(detailTimeRange, metric, transformedData);
+        setDetailData(prev => ({ ...prev, [metric]: transformedData }));
         setError(null);
-        return data;
+        return transformedData;
       }
 
       // For order range
@@ -1293,6 +1310,7 @@ const StatCards = ({
         case 'average_order':
           return <SkeletonChart type="line" />;
         case 'refunds':
+        case 'cancellations':
         case 'order_range':
         case 'pre_orders':
         case 'local_pickup':
@@ -1331,6 +1349,8 @@ const StatCards = ({
         return <MemoizedAverageOrderDetails data={cachedData} orderCount={orderCount} />;
       case 'refunds':
         return <MemoizedRefundDetails data={cachedData} />;
+      case 'cancellations':
+        return <MemoizedCancellationsDetails data={cachedData} />;
       case 'order_range':
         return <MemoizedOrderRangeDetails data={cachedData} />;
       case 'pre_orders':