Clean up shipped orders dialog

dashboard/src/components/dashboard/StatCards.jsx

@@ -159,7 +159,7 @@ const DetailDialog = ({
   children
 }) => (
   <Dialog open={open} onOpenChange={onOpenChange}>
-    <DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden">
+    <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
       <DialogHeader>
         <DialogTitle>{title}</DialogTitle>
       </DialogHeader>
@@ -368,7 +368,7 @@ const BrandsCategoriesDetails = ({ data }) => {
 
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-      <div className="flex flex-col h-[30vh] sm:h-[60vh]">
+      <div className="flex flex-col h-[40vh] md:h-[60vh]">
         <h3 className="text-md font-medium mb-4 flex items-center gap-2">
           <Star className="h-5 w-5 text-yellow-500" />
           Brands ({stats?.brands?.total || 0})
@@ -382,7 +382,7 @@ const BrandsCategoriesDetails = ({ data }) => {
                 <TableHead className="text-right">Revenue</TableHead>
               </TableRow>
             </TableHeader>
-            <TableBody>
+            <TableBody className="max-h-[40vh] md:max-h-[60vh] overflow-auto">
               {brandsList.map((brand) => (
                 <TableRow key={brand.name}>
                   <TableCell className="font-medium">{brand.name}</TableCell>
@@ -395,7 +395,7 @@ const BrandsCategoriesDetails = ({ data }) => {
         </div>
       </div>
 
-      <div className="flex flex-col h-[30vh] md:h-[60vh]">
+      <div className="flex flex-col h-[40vh] md:h-[60vh]">
         <h3 className="text-md font-medium mb-4 flex items-center gap-2">
           <Tags className="h-5 w-5 text-indigo-500" />
           Categories ({stats?.categories?.total || 0})
@@ -409,7 +409,7 @@ const BrandsCategoriesDetails = ({ data }) => {
                 <TableHead className="text-right">Revenue</TableHead>
               </TableRow>
             </TableHeader>
-            <TableBody>
+            <TableBody className="max-h-[40vh] md:max-h-[60vh] overflow-auto">
               {categoriesList.map((category) => (
                 <TableRow key={category.name}>
                   <TableCell className="font-medium">{category.name}</TableCell>
@@ -432,232 +432,91 @@ const ShippingDetails = ({ data }) => {
   const locations = data[0]?.shipping?.locations || {};
   const methodStats = data[0]?.shipping?.methodStats || [];
 
-  // Custom colors for the pie chart
-  const COLORS = [
-    'hsl(171.2 77.2% 53.3%)',
-    'hsl(200 95% 50%)',
-    'hsl(280 95% 60%)',
-    'hsl(340 95% 60%)',
-    'hsl(40 95% 50%)',
-    'hsl(120 95% 45%)',
-    'hsl(240 95% 60%)',
-    'hsl(30 95% 50%)',
-  ];
-
-  // Custom label renderer for pie chart
-  const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index, name }) => {
-    const RADIAN = Math.PI / 180;
-    // Extend the radius for label placement
-    const radius = outerRadius * 1.2;
-    
-    // Calculate position
-    const x = cx + radius * Math.cos(-midAngle * RADIAN);
-    const y = cy + radius * Math.sin(-midAngle * RADIAN);
-
-    // Only show label if percentage is greater than 3%
-    if (percent < 0.03) return null;
-
-    return (
-      <text
-        x={x}
-        y={y}
-        fill="currentColor"
-        textAnchor={x > cx ? 'start' : 'end'}
-        dominantBaseline="central"
-        className="text-xs font-medium"
-      >
-        {name} ({(percent * 100).toFixed(1)}%)
-      </text>
-    );
-  };
-
-  // Custom legend renderer
-  const renderLegend = (props) => {
-    const { payload } = props;
-    
-    return (
-      <div className="flex flex-wrap gap-4 justify-center mt-4">
-        {payload.map((entry, index) => (
-          <div key={`legend-${index}`} className="flex items-center gap-2">
-            <div
-              className="w-3 h-3 rounded-full"
-              style={{ backgroundColor: entry.color }}
-            />
-            <span className="text-sm">
-              {entry.value}: {((entry.payload.value / shippedCount) * 100).toFixed(1)}%
-            </span>
-          </div>
-        ))}
-      </div>
-    );
-  };
-
   return (
     <div className="space-y-8">
-      <div className="grid grid-cols-2 gap-4">
-        <StatCard
-          title="Total Shipped Orders"
-          value={shippedCount.toLocaleString()}
-          description="orders"
-          colorClass="text-teal-600 dark:text-teal-400"
-          icon={Package}
-        />
-        <StatCard
-          title="Shipping Locations"
-          value={locations.total || 0}
-          description="unique locations"
-          colorClass="text-teal-600 dark:text-teal-400"
-          icon={MapPin}
-        />
-      </div>
-
+      {/* Shipping Methods */}
       <div>
-        <h3 className="text-lg font-medium mb-4">Shipping Methods Distribution</h3>
-        <div className="h-[400px] w-full">
-          <ResponsiveContainer width="100%" height="100%">
-            <PieChart>
-              <Pie
-                data={methodStats}
-                dataKey="value"
-                nameKey="name"
-                cx="50%"
-                cy="45%"
-                outerRadius={120}
-                labelLine={false}
-                label={renderCustomizedLabel}
-              >
-                {methodStats.map((entry, index) => (
-                  <Cell
-                    key={`cell-${index}`}
-                    fill={COLORS[index % COLORS.length]}
-                  />
-                ))}
-              </Pie>
-              <Tooltip
-                formatter={(value, name) => [
-                  `${value.toLocaleString()} orders (${((value / shippedCount) * 100).toFixed(1)}%)`,
-                  name
-                ]}
-                contentStyle={{
-                  backgroundColor: 'hsl(var(--background))',
-                  border: '1px solid hsl(var(--border))',
-                  borderRadius: '0.5rem',
-                  padding: '0.5rem'
-                }}
-              />
-              <Legend
-                content={renderLegend}
-                verticalAlign="bottom"
-                align="center"
-              />
-            </PieChart>
-          </ResponsiveContainer>
+        <h3 className="text-lg font-medium mb-4 flex items-center gap-2">
+          <Package className="h-5 w-5 text-teal-500" />
+          Shipping Methods
+        </h3>
+        <div className="rounded-md border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-[50%]">Method</TableHead>
+                <TableHead className="w-[25%] text-right">Orders</TableHead>
+                <TableHead className="w-[25%] text-right">% of Total</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {methodStats.map((method) => (
+                <TableRow key={method.name}>
+                  <TableCell className="font-medium">{method.name}</TableCell>
+                  <TableCell className="text-right">{method.value.toLocaleString()}</TableCell>
+                  <TableCell className="text-right">
+                    {((method.value / shippedCount) * 100).toFixed(1)}%
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
         </div>
       </div>
 
+      {/* Countries */}
       <div>
-        <h3 className="text-lg font-medium mb-4">Shipping Locations</h3>
-        <div className="space-y-6">
-          {/* Country summary cards */}
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {locations.byCountry?.slice(0, 3).map((country) => (
-              <Card key={country.country} className="p-4">
-                <div className="flex justify-between items-start mb-2">
-                  <div>
-                    <h4 className="font-semibold">{country.country}</h4>
-                    <p className="text-sm text-muted-foreground">
-                      {country.states.length} states/regions
-                    </p>
-                  </div>
-                  <div className="text-right">
-                    <div className="font-semibold">{country.count.toLocaleString()}</div>
-                    <div className="text-sm text-muted-foreground">
-                      {country.percentage.toFixed(1)}%
-                    </div>
-                  </div>
-                </div>
-                <div className="h-2 bg-muted rounded-full overflow-hidden">
-                  <div
-                    className="h-full bg-teal-500"
-                    style={{ width: `${country.percentage}%` }}
-                  />
-                </div>
-              </Card>
-            ))}
-          </div>
+        <h3 className="text-lg font-medium mb-4 flex items-center gap-2">
+          <MapPin className="h-5 w-5 text-teal-500" />
+          Countries ({locations.byCountry?.length || 0})
+        </h3>
+        <div className="rounded-md border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-[50%]">Country</TableHead>
+                <TableHead className="w-[25%] text-right">Orders</TableHead>
+                <TableHead className="w-[25%] text-right">% of Total</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {locations.byCountry?.map((country) => (
+                <TableRow key={country.country}>
+                  <TableCell className="font-medium">{country.country}</TableCell>
+                  <TableCell className="text-right">{country.count.toLocaleString()}</TableCell>
+                  <TableCell className="text-right">{country.percentage.toFixed(1)}%</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
 
-          {/* States grid */}
-          <div className="rounded-lg border bg-card">
-            <div className="grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-border">
-              {/* Left column */}
-              <div className="p-4 space-y-3">
-                <div className="flex justify-between items-center text-sm font-medium text-muted-foreground px-2">
-                  <span>Top States</span>
-                  <span>Orders</span>
-                </div>
-                {locations.byState?.slice(0, Math.ceil(locations.byState.length / 2)).map((location) => (
-                  <div
-                    key={`${location.state}-${location.country}`}
-                    className="flex justify-between items-center p-2 hover:bg-accent rounded-lg transition-colors"
-                  >
-                    <div className="flex items-center gap-2">
-                      <span className="font-medium">{location.state}</span>
-                      <span className="text-xs text-muted-foreground">
-                        {location.country}
-                      </span>
-                    </div>
-                    <div className="flex items-center gap-3">
-                      <span className="font-medium">
-                        {location.count.toLocaleString()}
-                      </span>
-                      <span className="text-xs text-muted-foreground w-12 text-right">
-                        {location.percentage.toFixed(1)}%
-                      </span>
-                    </div>
-                  </div>
-                ))}
-              </div>
-              
-              {/* Right column */}
-              <div className="p-4 space-y-3">
-                <div className="flex justify-between items-center text-sm font-medium text-muted-foreground px-2">
-                  <span>Additional States</span>
-                  <span>Orders</span>
-                </div>
-                {locations.byState?.slice(Math.ceil(locations.byState.length / 2)).map((location) => (
-                  <div
-                    key={`${location.state}-${location.country}`}
-                    className="flex justify-between items-center p-2 hover:bg-accent rounded-lg transition-colors"
-                  >
-                    <div className="flex items-center gap-2">
-                      <span className="font-medium">{location.state}</span>
-                      <span className="text-xs text-muted-foreground">
-                        {location.country}
-                      </span>
-                    </div>
-                    <div className="flex items-center gap-3">
-                      <span className="font-medium">
-                        {location.count.toLocaleString()}
-                      </span>
-                      <span className="text-xs text-muted-foreground w-12 text-right">
-                        {location.percentage.toFixed(1)}%
-                      </span>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-
-          {/* Summary footer */}
-          <div className="flex justify-between items-center text-sm text-muted-foreground px-2">
-            <span>
-              Showing all {locations.byState?.length || 0} states across {locations.byCountry?.length || 0} countries
-            </span>
-            <span>
-              Total Orders: {shippedCount.toLocaleString()}
-            </span>
-          </div>
+      {/* States */}
+      <div>
+        <h3 className="text-lg font-medium mb-4 flex items-center gap-2">
+          <MapPin className="h-5 w-5 text-teal-500" />
+          States/Regions ({locations.byState?.length || 0})
+        </h3>
+        <div className="rounded-md border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-[50%]">State</TableHead>
+                <TableHead className="w-[25%] text-right">Orders</TableHead>
+                <TableHead className="w-[25%] text-right">% of Total</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {locations.byState?.map((state) => (
+                <TableRow key={state.state}>
+                  <TableCell className="font-medium">{state.state}</TableCell>
+                  <TableCell className="text-right">{state.count.toLocaleString()}</TableCell>
+                  <TableCell className="text-right">{state.percentage.toFixed(1)}%</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
         </div>
       </div>
     </div>
@@ -1553,7 +1412,7 @@ const StatCards = ({
       case 'brands_categories':
         return <MemoizedBrandsCategoriesDetails data={[stats]} />;
       case 'shipping':
-        return <MemoizedShippingDetails data={[stats]} />;
+        return <MemoizedShippingDetails data={[stats]} timeRange={timeRange} />;
       case 'peak_hour':
         if (!['today', 'yesterday'].includes(timeRange)) {
           return <div className="text-muted-foreground">Peak hour details are only available for single-day periods.</div>;