From 56abb5e188afe0561d0471f99e8ac361406015b7 Mon Sep 17 00:00:00 2001
From: Matt <mattskent@gmail.com>
Date: Sat, 21 Dec 2024 19:25:00 -0500
Subject: [PATCH] Standardize sort/toggle buttons

---
 .../src/components/dashboard/ProductGrid.jsx  |  48 ++--
 .../src/components/dashboard/SalesChart.jsx   | 210 +++++++++---------
 2 files changed, 126 insertions(+), 132 deletions(-)

diff --git a/dashboard/src/components/dashboard/ProductGrid.jsx b/dashboard/src/components/dashboard/ProductGrid.jsx
index 1ba74d8..f1717a9 100644
--- a/dashboard/src/components/dashboard/ProductGrid.jsx
+++ b/dashboard/src/components/dashboard/ProductGrid.jsx
@@ -222,56 +222,40 @@ const ProductGrid = ({
                     <tr className="hover:bg-transparent">
                       <th className="p-1.5 text-left font-medium sticky top-0 bg-white dark:bg-background z-10 w-[50px] min-w-[50px] border-b" />
                       <th className="p-1.5 text-left font-medium sticky top-0 bg-white dark:bg-background z-10 min-w-[200px] border-b">
-                        <button
+                        <Button
+                          variant={sorting.column === "name" ? "default" : "ghost"}
                           onClick={() => handleSort("name")}
-                          className={cn(
-                            "inline-flex items-center justify-start w-full px-2 py-1 text-sm font-medium transition-colors rounded-md",
-                            sorting.column === "name"
-                              ? "bg-primary text-primary-foreground"
-                              : "hover:bg-accent hover:text-accent-foreground"
-                          )}
+                          className="w-full justify-start h-8"
                         >
                           Product
-                        </button>
+                        </Button>
                       </th>
                       <th className="p-1.5 font-medium text-center sticky top-0 bg-white dark:bg-background z-10 border-b">
-                        <button
+                        <Button
+                          variant={sorting.column === "totalQuantity" ? "default" : "ghost"}
                           onClick={() => handleSort("totalQuantity")}
-                          className={cn(
-                            "inline-flex items-center justify-center w-full px-2 py-1 text-sm font-medium transition-colors rounded-md",
-                            sorting.column === "totalQuantity"
-                              ? "bg-primary text-primary-foreground"
-                              : "hover:bg-accent hover:text-accent-foreground"
-                          )}
+                          className="w-full justify-center h-8"
                         >
                           Sold
-                        </button>
+                        </Button>
                       </th>
                       <th className="p-1.5 font-medium text-center sticky top-0 bg-white dark:bg-background z-10 border-b">
-                        <button
+                        <Button
+                          variant={sorting.column === "totalRevenue" ? "default" : "ghost"}
                           onClick={() => handleSort("totalRevenue")}
-                          className={cn(
-                            "inline-flex items-center justify-center w-full px-2 py-1 text-sm font-medium transition-colors rounded-md",
-                            sorting.column === "totalRevenue"
-                              ? "bg-primary text-primary-foreground"
-                              : "hover:bg-accent hover:text-accent-foreground"
-                          )}
+                          className="w-full justify-center h-8"
                         >
                           Rev
-                        </button>
+                        </Button>
                       </th>
                       <th className="p-1.5 font-medium text-center sticky top-0 bg-white dark:bg-background z-10 border-b">
-                        <button
+                        <Button
+                          variant={sorting.column === "orderCount" ? "default" : "ghost"}
                           onClick={() => handleSort("orderCount")}
-                          className={cn(
-                            "inline-flex items-center justify-center w-full px-2 py-1 text-sm font-medium transition-colors rounded-md",
-                            sorting.column === "orderCount"
-                              ? "bg-primary text-primary-foreground"
-                              : "hover:bg-accent hover:text-accent-foreground"
-                          )}
+                          className="w-full justify-center h-8"
                         >
                           Orders
-                        </button>
+                        </Button>
                       </th>
                     </tr>
                   </thead>
diff --git a/dashboard/src/components/dashboard/SalesChart.jsx b/dashboard/src/components/dashboard/SalesChart.jsx
index db4d112..b12243f 100644
--- a/dashboard/src/components/dashboard/SalesChart.jsx
+++ b/dashboard/src/components/dashboard/SalesChart.jsx
@@ -694,66 +694,71 @@ const SalesChart = ({
                   <DialogHeader className="flex-none">
                     <DialogTitle>Daily Details</DialogTitle>
                     <div className="flex items-center justify-center gap-2 pt-4">
-                      <ToggleGroup
-                        type="multiple"
-                        variant="outline"
-                        className="flex-wrap justify-start"
-                        value={Object.entries(metrics)
-                          .filter(([key, value]) => value && key !== "showPrevious")
-                          .map(([key]) => key)}
-                        onValueChange={(values) => {
-                          setMetrics((prev) => ({
-                            ...prev,
-                            revenue: values.includes("revenue"),
-                            orders: values.includes("orders"),
-                            movingAverage: values.includes("movingAverage"),
-                            avgOrderValue: values.includes("avgOrderValue"),
-                          }));
-                        }}
-                      >
-                        <ToggleGroupItem
-                          value="revenue"
-                          aria-label="Toggle revenue"
-                        >
-                          Revenue
-                        </ToggleGroupItem>
-                        <ToggleGroupItem
-                          value="orders"
-                          aria-label="Toggle orders"
-                        >
-                          Orders
-                        </ToggleGroupItem>
-                        <ToggleGroupItem
-                          value="movingAverage"
-                          aria-label="Toggle 7-day average"
-                        >
-                          7-Day Avg
-                        </ToggleGroupItem>
-                        <ToggleGroupItem
-                          value="avgOrderValue"
-                          aria-label="Toggle AOV"
-                        >
-                          AOV
-                        </ToggleGroupItem>
-                      </ToggleGroup>
-
-                      <Separator orientation="vertical" className="h-6" />
-
-                      <div className="flex items-center gap-2">
+                      <div className="flex flex-wrap gap-1">
                         <Button
-                          variant={metrics.showPrevious ? "outline" : "primary"}
+                          variant={metrics.revenue ? "default" : "outline"}
                           size="sm"
-                          className="h-8"
                           onClick={() =>
                             setMetrics((prev) => ({
                               ...prev,
-                              showPrevious: !prev.showPrevious,
+                              revenue: !prev.revenue,
                             }))
                           }
                         >
-                          Compare Prev Period
+                          Revenue
+                        </Button>
+                        <Button
+                          variant={metrics.orders ? "default" : "outline"}
+                          size="sm"
+                          onClick={() =>
+                            setMetrics((prev) => ({
+                              ...prev,
+                              orders: !prev.orders,
+                            }))
+                          }
+                        >
+                          Orders
+                        </Button>
+                        <Button
+                          variant={metrics.movingAverage ? "default" : "outline"}
+                          size="sm"
+                          onClick={() =>
+                            setMetrics((prev) => ({
+                              ...prev,
+                              movingAverage: !prev.movingAverage,
+                            }))
+                          }
+                        >
+                          7-Day Avg
+                        </Button>
+                        <Button
+                          variant={metrics.avgOrderValue ? "default" : "outline"}
+                          size="sm"
+                          onClick={() =>
+                            setMetrics((prev) => ({
+                              ...prev,
+                              avgOrderValue: !prev.avgOrderValue,
+                            }))
+                          }
+                        >
+                          AOV
                         </Button>
                       </div>
+
+                      <Separator orientation="vertical" className="h-6" />
+
+                      <Button
+                        variant={metrics.showPrevious ? "default" : "outline"}
+                        size="sm"
+                        onClick={() =>
+                          setMetrics((prev) => ({
+                            ...prev,
+                            showPrevious: !prev.showPrevious,
+                          }))
+                        }
+                      >
+                        Compare Prev Period
+                      </Button>
                     </div>
                   </DialogHeader>
                   <div className="flex-1 overflow-y-auto mt-6">
@@ -867,66 +872,71 @@ const SalesChart = ({
 
           {/* Metric Toggles */}
           <div className="flex items-center gap-2 pt-2">
-            <ToggleGroup
-              type="multiple"
-              variant="outline"
-              className="flex-wrap justify-start"
-              value={Object.entries(metrics)
-                .filter(([key, value]) => value && key !== "showPrevious")
-                .map(([key]) => key)}
-              onValueChange={(values) => {
-                setMetrics((prev) => ({
-                  ...prev,
-                  revenue: values.includes("revenue"),
-                  orders: values.includes("orders"),
-                  movingAverage: values.includes("movingAverage"),
-                  avgOrderValue: values.includes("avgOrderValue"),
-                }));
-              }}
-            >
-              <ToggleGroupItem
-                value="revenue"
-                aria-label="Toggle revenue"
-              >
-                Revenue
-              </ToggleGroupItem>
-              <ToggleGroupItem
-                value="orders"
-                aria-label="Toggle orders"
-              >
-                Orders
-              </ToggleGroupItem>
-              <ToggleGroupItem
-                value="movingAverage"
-                aria-label="Toggle 7-day average"
-              >
-                7-Day Avg
-              </ToggleGroupItem>
-              <ToggleGroupItem
-                value="avgOrderValue"
-                aria-label="Toggle AOV"
-              >
-                AOV
-              </ToggleGroupItem>
-            </ToggleGroup>
-
-            <Separator orientation="vertical" className="h-6" />
-
-            <div className="flex items-center gap-2">
+            <div className="flex flex-wrap gap-1">
               <Button
-                variant={metrics.showPrevious ? "outline" : "primary"}
+                variant={metrics.revenue ? "default" : "outline"}
                 size="sm"
-                className="h-8"
                 onClick={() =>
                   setMetrics((prev) => ({
                     ...prev,
-                    showPrevious: !prev.showPrevious,
+                    revenue: !prev.revenue,
                   }))
                 }
               >
-                Compare Prev Period
+                Revenue
+              </Button>
+              <Button
+                variant={metrics.orders ? "default" : "outline"}
+                size="sm"
+                onClick={() =>
+                  setMetrics((prev) => ({
+                    ...prev,
+                    orders: !prev.orders,
+                  }))
+                }
+              >
+                Orders
+              </Button>
+              <Button
+                variant={metrics.movingAverage ? "default" : "outline"}
+                size="sm"
+                onClick={() =>
+                  setMetrics((prev) => ({
+                    ...prev,
+                    movingAverage: !prev.movingAverage,
+                  }))
+                }
+              >
+                7-Day Avg
+              </Button>
+              <Button
+                variant={metrics.avgOrderValue ? "default" : "outline"}
+                size="sm"
+                onClick={() =>
+                  setMetrics((prev) => ({
+                    ...prev,
+                    avgOrderValue: !prev.avgOrderValue,
+                  }))
+                }
+              >
+                AOV
               </Button>
             </div>
+
+            <Separator orientation="vertical" className="h-6" />
+
+            <Button
+              variant={metrics.showPrevious ? "default" : "outline"}
+              size="sm"
+              onClick={() =>
+                setMetrics((prev) => ({
+                  ...prev,
+                  showPrevious: !prev.showPrevious,
+                }))
+              }
+            >
+              Compare Prev Period
+            </Button>
           </div>
         </div>
       </CardHeader>