From 01b86459a31ef0db1b2369263a0db151b7a15c99 Mon Sep 17 00:00:00 2001
From: Matt <mattskent@gmail.com>
Date: Sun, 22 Dec 2024 15:15:06 -0500
Subject: [PATCH] Improve shipping locations table

---
 .../src/components/dashboard/StatCards.jsx    | 119 ++++++++++++++----
 1 file changed, 98 insertions(+), 21 deletions(-)

diff --git a/dashboard/src/components/dashboard/StatCards.jsx b/dashboard/src/components/dashboard/StatCards.jsx
index 5514af1..4b5d8c3 100644
--- a/dashboard/src/components/dashboard/StatCards.jsx
+++ b/dashboard/src/components/dashboard/StatCards.jsx
@@ -629,30 +629,107 @@ const ShippingDetails = ({ data }) => {
 
       <div>
         <h3 className="text-lg font-medium mb-4">Shipping Locations</h3>
-        <div className="max-h-[400px] overflow-y-auto pr-2">
-          <div className="space-y-2">
-            {locations.byState?.map((location) => (
-              <div
-                key={location.state}
-                className="flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-800 rounded-lg"
-              >
-                <div>
-                  <span className="font-medium">{location.state}</span>
-                  <span className="text-sm text-muted-foreground ml-2">
-                    {location.country}
-                  </span>
+        <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="text-sm">
-                  <span className="font-medium">
-                    {location.count.toLocaleString()}
-                  </span>
-                  <span className="text-muted-foreground ml-2">
-                    ({location.percentage.toFixed(1)}%)
-                  </span>
+                <div className="h-2 bg-muted rounded-full overflow-hidden">
+                  <div
+                    className="h-full bg-teal-500"
+                    style={{ width: `${country.percentage}%` }}
+                  />
                 </div>
-              </div>
+              </Card>
             ))}
           </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>
         </div>
       </div>
     </div>
@@ -1299,7 +1376,7 @@ const StatCards = ({
     } finally {
       setDetailDataLoading(prev => ({ ...prev, [metric]: false }));
     }
-  }, [timeRange, startDate, endDate, shouldUseLast30Days, setCacheData, getCacheData]);
+  }, [timeRange, startDate, endDate]);
   // Corrected preloadDetailData function
   const preloadDetailData = useCallback(() => {
     const metrics = [