From 68c437a0833f37ab50a6d5e4786c237a40530598 Mon Sep 17 00:00:00 2001
From: Matt <mattskent@gmail.com>
Date: Sat, 21 Dec 2024 17:25:43 -0500
Subject: [PATCH] Move view details button, restyle toggle buttons

---
 .../src/components/dashboard/SalesChart.jsx   | 331 +++++++++---------
 1 file changed, 160 insertions(+), 171 deletions(-)

diff --git a/dashboard/src/components/dashboard/SalesChart.jsx b/dashboard/src/components/dashboard/SalesChart.jsx
index 559c86c..6fde004 100644
--- a/dashboard/src/components/dashboard/SalesChart.jsx
+++ b/dashboard/src/components/dashboard/SalesChart.jsx
@@ -684,6 +684,166 @@ const SalesChart = ({
               </CardTitle>
             </div>
             <div className="flex items-center gap-4">
+              <Dialog>
+                <DialogTrigger asChild>
+                  <Button variant="outline" className="h-9">
+                    View Details
+                  </Button>
+                </DialogTrigger>
+                <DialogContent className="min-w-[600px] max-w-[90vw] w-fit max-h-[85vh] overflow-hidden flex flex-col">
+                  <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">
+                        <Button
+                          variant={metrics.showPrevious ? "outline" : "primary"}
+                          size="sm"
+                          className="h-8"
+                          onClick={() =>
+                            setMetrics((prev) => ({
+                              ...prev,
+                              showPrevious: !prev.showPrevious,
+                            }))
+                          }
+                        >
+                          Compare Prev Period
+                        </Button>
+                      </div>
+                    </div>
+                  </DialogHeader>
+                  <div className="flex-1 overflow-y-auto mt-6">
+                    <div className="rounded-lg border bg-card w-full">
+                      <Table className="w-full">
+                        <TableHeader>
+                          <TableRow>
+                            <TableHead className="text-center whitespace-nowrap px-6 w-[120px]">Date</TableHead>
+                            {metrics.orders && (
+                              <>
+                                <TableHead className="text-center whitespace-nowrap px-6 min-w-[100px]">Orders</TableHead>
+                                {metrics.showPrevious && (
+                                  <TableHead className="text-center whitespace-nowrap px-6 min-w-[100px]">Prev Orders</TableHead>
+                                )}
+                              </>
+                            )}
+                            {metrics.revenue && (
+                              <>
+                                <TableHead className="text-center whitespace-nowrap px-6 min-w-[140px]">Revenue</TableHead>
+                                {metrics.showPrevious && (
+                                  <TableHead className="text-center whitespace-nowrap px-6 min-w-[140px]">Prev Revenue</TableHead>
+                                )}
+                              </>
+                            )}
+                            {metrics.avgOrderValue && (
+                              <>
+                                <TableHead className="text-center whitespace-nowrap px-6 min-w-[120px]">AOV</TableHead>
+                                {metrics.showPrevious && (
+                                  <TableHead className="text-center whitespace-nowrap px-6 min-w-[120px]">Prev AOV</TableHead>
+                                )}
+                              </>
+                            )}
+                            {metrics.movingAverage && (
+                              <TableHead className="text-center whitespace-nowrap px-6 min-w-[140px]">7-Day Avg</TableHead>
+                            )}
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {data.map((day) => (
+                            <TableRow key={day.timestamp}>
+                              <TableCell className="text-center whitespace-nowrap px-6">{formatXAxis(day.timestamp)}</TableCell>
+                              {metrics.orders && (
+                                <>
+                                  <TableCell className="text-center whitespace-nowrap px-6">
+                                    {day.orders.toLocaleString()}
+                                  </TableCell>
+                                  {metrics.showPrevious && (
+                                    <TableCell className="text-center whitespace-nowrap px-6">
+                                      {day.prevOrders.toLocaleString()}
+                                    </TableCell>
+                                  )}
+                                </>
+                              )}
+                              {metrics.revenue && (
+                                <>
+                                  <TableCell className="text-center whitespace-nowrap px-6">
+                                    {formatCurrency(day.revenue)}
+                                  </TableCell>
+                                  {metrics.showPrevious && (
+                                    <TableCell className="text-center whitespace-nowrap px-6">
+                                      {formatCurrency(day.prevRevenue)}
+                                    </TableCell>
+                                  )}
+                                </>
+                              )}
+                              {metrics.avgOrderValue && (
+                                <>
+                                  <TableCell className="text-center whitespace-nowrap px-6">
+                                    {formatCurrency(day.avgOrderValue)}
+                                  </TableCell>
+                                  {metrics.showPrevious && (
+                                    <TableCell className="text-center whitespace-nowrap px-6">
+                                      {formatCurrency(day.prevAvgOrderValue)}
+                                    </TableCell>
+                                  )}
+                                </>
+                              )}
+                              {metrics.movingAverage && (
+                                <TableCell className="text-center whitespace-nowrap px-6">
+                                  {formatCurrency(day.movingAverage)}
+                                </TableCell>
+                              )}
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    </div>
+                  </div>
+                </DialogContent>
+              </Dialog>
               <Select
                 value={selectedTimeRange}
                 onValueChange={handleTimeRangeChange}
@@ -727,28 +887,24 @@ const SalesChart = ({
               <ToggleGroupItem
                 value="revenue"
                 aria-label="Toggle revenue"
-                className="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground"
               >
                 Revenue
               </ToggleGroupItem>
               <ToggleGroupItem
                 value="orders"
                 aria-label="Toggle orders"
-                className="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground"
               >
                 Orders
               </ToggleGroupItem>
               <ToggleGroupItem
                 value="movingAverage"
                 aria-label="Toggle 7-day average"
-                className="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground"
               >
                 7-Day Avg
               </ToggleGroupItem>
               <ToggleGroupItem
                 value="avgOrderValue"
                 aria-label="Toggle AOV"
-                className="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground"
               >
                 AOV
               </ToggleGroupItem>
@@ -930,173 +1086,6 @@ const SalesChart = ({
                 </LineChart>
               </ResponsiveContainer>
             </div>
-
-            <div className="mt-4 flex justify-end">
-              <Dialog>
-                <DialogTrigger asChild>
-                  <Button variant="outline" className="h-9">
-                    View Details
-                  </Button>
-                </DialogTrigger>
-                <DialogContent className="min-w-[600px] max-w-[90vw] w-fit max-h-[85vh] overflow-hidden flex flex-col">
-                  <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"
-                          className="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground"
-                        >
-                          Revenue
-                        </ToggleGroupItem>
-                        <ToggleGroupItem
-                          value="orders"
-                          aria-label="Toggle orders"
-                          className="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground"
-                        >
-                          Orders
-                        </ToggleGroupItem>
-                        <ToggleGroupItem
-                          value="movingAverage"
-                          aria-label="Toggle 7-day average"
-                          className="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground"
-                        >
-                          7-Day Avg
-                        </ToggleGroupItem>
-                        <ToggleGroupItem
-                          value="avgOrderValue"
-                          aria-label="Toggle AOV"
-                          className="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground"
-                        >
-                          AOV
-                        </ToggleGroupItem>
-                      </ToggleGroup>
-
-                      <Separator orientation="vertical" className="h-6" />
-
-                      <div className="flex items-center gap-2">
-                        <Button
-                          variant={metrics.showPrevious ? "outline" : "primary"}
-                          size="sm"
-                          className="h-8"
-                          onClick={() =>
-                            setMetrics((prev) => ({
-                              ...prev,
-                              showPrevious: !prev.showPrevious,
-                            }))
-                          }
-                        >
-                          Compare Prev Period
-                        </Button>
-                      </div>
-                    </div>
-                  </DialogHeader>
-                  <div className="flex-1 overflow-y-auto mt-6">
-                    <div className="rounded-lg border bg-card w-full">
-                      <Table className="w-full">
-                        <TableHeader>
-                          <TableRow>
-                            <TableHead className="text-center whitespace-nowrap px-6 w-[120px]">Date</TableHead>
-                            {metrics.orders && (
-                              <>
-                                <TableHead className="text-center whitespace-nowrap px-6 min-w-[100px]">Orders</TableHead>
-                                {metrics.showPrevious && (
-                                  <TableHead className="text-center whitespace-nowrap px-6 min-w-[100px]">Prev Orders</TableHead>
-                                )}
-                              </>
-                            )}
-                            {metrics.revenue && (
-                              <>
-                                <TableHead className="text-center whitespace-nowrap px-6 min-w-[140px]">Revenue</TableHead>
-                                {metrics.showPrevious && (
-                                  <TableHead className="text-center whitespace-nowrap px-6 min-w-[140px]">Prev Revenue</TableHead>
-                                )}
-                              </>
-                            )}
-                            {metrics.avgOrderValue && (
-                              <>
-                                <TableHead className="text-center whitespace-nowrap px-6 min-w-[120px]">AOV</TableHead>
-                                {metrics.showPrevious && (
-                                  <TableHead className="text-center whitespace-nowrap px-6 min-w-[120px]">Prev AOV</TableHead>
-                                )}
-                              </>
-                            )}
-                            {metrics.movingAverage && (
-                              <TableHead className="text-center whitespace-nowrap px-6 min-w-[140px]">7-Day Avg</TableHead>
-                            )}
-                          </TableRow>
-                        </TableHeader>
-                        <TableBody>
-                          {data.map((day) => (
-                            <TableRow key={day.timestamp}>
-                              <TableCell className="text-center whitespace-nowrap px-6">{formatXAxis(day.timestamp)}</TableCell>
-                              {metrics.orders && (
-                                <>
-                                  <TableCell className="text-center whitespace-nowrap px-6">
-                                    {day.orders.toLocaleString()}
-                                  </TableCell>
-                                  {metrics.showPrevious && (
-                                    <TableCell className="text-center whitespace-nowrap px-6">
-                                      {day.prevOrders.toLocaleString()}
-                                    </TableCell>
-                                  )}
-                                </>
-                              )}
-                              {metrics.revenue && (
-                                <>
-                                  <TableCell className="text-center whitespace-nowrap px-6">
-                                    {formatCurrency(day.revenue)}
-                                  </TableCell>
-                                  {metrics.showPrevious && (
-                                    <TableCell className="text-center whitespace-nowrap px-6">
-                                      {formatCurrency(day.prevRevenue)}
-                                    </TableCell>
-                                  )}
-                                </>
-                              )}
-                              {metrics.avgOrderValue && (
-                                <>
-                                  <TableCell className="text-center whitespace-nowrap px-6">
-                                    {formatCurrency(day.avgOrderValue)}
-                                  </TableCell>
-                                  {metrics.showPrevious && (
-                                    <TableCell className="text-center whitespace-nowrap px-6">
-                                      {formatCurrency(day.prevAvgOrderValue)}
-                                    </TableCell>
-                                  )}
-                                </>
-                              )}
-                              {metrics.movingAverage && (
-                                <TableCell className="text-center whitespace-nowrap px-6">
-                                  {formatCurrency(day.movingAverage)}
-                                </TableCell>
-                              )}
-                            </TableRow>
-                          ))}
-                        </TableBody>
-                      </Table>
-                    </div>
-                  </div>
-                </DialogContent>
-              </Dialog>
-            </div>
           </>
         )}
       </CardContent>