matt/dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Standardize sort/toggle buttons

Browse Source
This commit is contained in:
Matt
2024-12-21 19:25:00 -05:00
parent 9e331e3265
commit 56abb5e188
2 changed files with 126 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
dashboard/src/components/dashboard/ProductGrid.jsx
View File

@@ -222,56 +222,40 @@ const ProductGrid = ({
<tr className="hover:bg-transparent"> <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 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"> <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")} onClick={() => handleSort("name")}
className={cn( className="w-full justify-start h-8"
"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"
)}
> >
Product Product
</button> </Button>
</th> </th>
<th className="p-1.5 font-medium text-center sticky top-0 bg-white dark:bg-background z-10 border-b"> <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")} onClick={() => handleSort("totalQuantity")}
className={cn( className="w-full justify-center h-8"
"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"
)}
> >
Sold Sold
</button> </Button>
</th> </th>
<th className="p-1.5 font-medium text-center sticky top-0 bg-white dark:bg-background z-10 border-b"> <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")} onClick={() => handleSort("totalRevenue")}
className={cn( className="w-full justify-center h-8"
"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"
)}
> >
Rev Rev
</button> </Button>
</th> </th>
<th className="p-1.5 font-medium text-center sticky top-0 bg-white dark:bg-background z-10 border-b"> <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")} onClick={() => handleSort("orderCount")}
className={cn( className="w-full justify-center h-8"
"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"
)}
> >
Orders Orders
</button> </Button>
</th> </th>
</tr> </tr>
</thead> </thead>

154
dashboard/src/components/dashboard/SalesChart.jsx
View File

@@ -694,56 +694,62 @@ const SalesChart = ({
<DialogHeader className="flex-none"> <DialogHeader className="flex-none">
<DialogTitle>Daily Details</DialogTitle> <DialogTitle>Daily Details</DialogTitle>
<div className="flex items-center justify-center gap-2 pt-4"> <div className="flex items-center justify-center gap-2 pt-4">
<ToggleGroup <div className="flex flex-wrap gap-1">
type="multiple" <Button
variant="outline" variant={metrics.revenue ? "default" : "outline"}
className="flex-wrap justify-start" size="sm"
value={Object.entries(metrics) onClick={() =>
.filter(([key, value]) => value && key !== "showPrevious")
.map(([key]) => key)}
onValueChange={(values) => {
setMetrics((prev) => ({ setMetrics((prev) => ({
...prev, ...prev,
revenue: values.includes("revenue"), revenue: !prev.revenue,
orders: values.includes("orders"), }))
movingAverage: values.includes("movingAverage"), }
avgOrderValue: values.includes("avgOrderValue"),
}));
}}
>
<ToggleGroupItem
value="revenue"
aria-label="Toggle revenue"
> >
Revenue Revenue
</ToggleGroupItem> </Button>
<ToggleGroupItem <Button
value="orders" variant={metrics.orders ? "default" : "outline"}
aria-label="Toggle orders" size="sm"
onClick={() =>
setMetrics((prev) => ({
...prev,
orders: !prev.orders,
}))
}
> >
Orders Orders
</ToggleGroupItem> </Button>
<ToggleGroupItem <Button
value="movingAverage" variant={metrics.movingAverage ? "default" : "outline"}
aria-label="Toggle 7-day average" size="sm"
onClick={() =>
setMetrics((prev) => ({
...prev,
movingAverage: !prev.movingAverage,
}))
}
> >
7-Day Avg 7-Day Avg
</ToggleGroupItem> </Button>
<ToggleGroupItem <Button
value="avgOrderValue" variant={metrics.avgOrderValue ? "default" : "outline"}
aria-label="Toggle AOV" size="sm"
onClick={() =>
setMetrics((prev) => ({
...prev,
avgOrderValue: !prev.avgOrderValue,
}))
}
> >
AOV AOV
</ToggleGroupItem> </Button>
</ToggleGroup> </div>
<Separator orientation="vertical" className="h-6" /> <Separator orientation="vertical" className="h-6" />
<div className="flex items-center gap-2">
<Button <Button
variant={metrics.showPrevious ? "outline" : "primary"} variant={metrics.showPrevious ? "default" : "outline"}
size="sm" size="sm"
className="h-8"
onClick={() => onClick={() =>
setMetrics((prev) => ({ setMetrics((prev) => ({
...prev, ...prev,
@@ -754,7 +760,6 @@ const SalesChart = ({
Compare Prev Period Compare Prev Period
</Button> </Button>
</div> </div>
</div>
</DialogHeader> </DialogHeader>
<div className="flex-1 overflow-y-auto mt-6"> <div className="flex-1 overflow-y-auto mt-6">
<div className="rounded-lg border bg-card w-full"> <div className="rounded-lg border bg-card w-full">
@@ -867,56 +872,62 @@ const SalesChart = ({
{/* Metric Toggles */} {/* Metric Toggles */}
<div className="flex items-center gap-2 pt-2"> <div className="flex items-center gap-2 pt-2">
<ToggleGroup <div className="flex flex-wrap gap-1">
type="multiple" <Button
variant="outline" variant={metrics.revenue ? "default" : "outline"}
className="flex-wrap justify-start" size="sm"
value={Object.entries(metrics) onClick={() =>
.filter(([key, value]) => value && key !== "showPrevious")
.map(([key]) => key)}
onValueChange={(values) => {
setMetrics((prev) => ({ setMetrics((prev) => ({
...prev, ...prev,
revenue: values.includes("revenue"), revenue: !prev.revenue,
orders: values.includes("orders"), }))
movingAverage: values.includes("movingAverage"), }
avgOrderValue: values.includes("avgOrderValue"),
}));
}}
>
<ToggleGroupItem
value="revenue"
aria-label="Toggle revenue"
> >
Revenue Revenue
</ToggleGroupItem> </Button>
<ToggleGroupItem <Button
value="orders" variant={metrics.orders ? "default" : "outline"}
aria-label="Toggle orders" size="sm"
onClick={() =>
setMetrics((prev) => ({
...prev,
orders: !prev.orders,
}))
}
> >
Orders Orders
</ToggleGroupItem> </Button>
<ToggleGroupItem <Button
value="movingAverage" variant={metrics.movingAverage ? "default" : "outline"}
aria-label="Toggle 7-day average" size="sm"
onClick={() =>
setMetrics((prev) => ({
...prev,
movingAverage: !prev.movingAverage,
}))
}
> >
7-Day Avg 7-Day Avg
</ToggleGroupItem> </Button>
<ToggleGroupItem <Button
value="avgOrderValue" variant={metrics.avgOrderValue ? "default" : "outline"}
aria-label="Toggle AOV" size="sm"
onClick={() =>
setMetrics((prev) => ({
...prev,
avgOrderValue: !prev.avgOrderValue,
}))
}
> >
AOV AOV
</ToggleGroupItem> </Button>
</ToggleGroup> </div>
<Separator orientation="vertical" className="h-6" /> <Separator orientation="vertical" className="h-6" />
<div className="flex items-center gap-2">
<Button <Button
variant={metrics.showPrevious ? "outline" : "primary"} variant={metrics.showPrevious ? "default" : "outline"}
size="sm" size="sm"
className="h-8"
onClick={() => onClick={() =>
setMetrics((prev) => ({ setMetrics((prev) => ({
...prev, ...prev,
@@ -928,7 +939,6 @@ const SalesChart = ({
</Button> </Button>
</div> </div>
</div> </div>
</div>
</CardHeader> </CardHeader>
<CardContent className="p-6 pt-0"> <CardContent className="p-6 pt-0">