Standardize sort/toggle buttons
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -694,56 +694,62 @@ 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) => {
|
||||
<div className="flex flex-wrap gap-1">
|
||||
<Button
|
||||
variant={metrics.revenue ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
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: !prev.revenue,
|
||||
}))
|
||||
}
|
||||
>
|
||||
Revenue
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem
|
||||
value="orders"
|
||||
aria-label="Toggle orders"
|
||||
</Button>
|
||||
<Button
|
||||
variant={metrics.orders ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setMetrics((prev) => ({
|
||||
...prev,
|
||||
orders: !prev.orders,
|
||||
}))
|
||||
}
|
||||
>
|
||||
Orders
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem
|
||||
value="movingAverage"
|
||||
aria-label="Toggle 7-day average"
|
||||
</Button>
|
||||
<Button
|
||||
variant={metrics.movingAverage ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setMetrics((prev) => ({
|
||||
...prev,
|
||||
movingAverage: !prev.movingAverage,
|
||||
}))
|
||||
}
|
||||
>
|
||||
7-Day Avg
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem
|
||||
value="avgOrderValue"
|
||||
aria-label="Toggle AOV"
|
||||
</Button>
|
||||
<Button
|
||||
variant={metrics.avgOrderValue ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setMetrics((prev) => ({
|
||||
...prev,
|
||||
avgOrderValue: !prev.avgOrderValue,
|
||||
}))
|
||||
}
|
||||
>
|
||||
AOV
|
||||
</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Separator orientation="vertical" className="h-6" />
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant={metrics.showPrevious ? "outline" : "primary"}
|
||||
variant={metrics.showPrevious ? "default" : "outline"}
|
||||
size="sm"
|
||||
className="h-8"
|
||||
onClick={() =>
|
||||
setMetrics((prev) => ({
|
||||
...prev,
|
||||
@@ -754,7 +760,6 @@ const SalesChart = ({
|
||||
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">
|
||||
@@ -867,56 +872,62 @@ 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) => {
|
||||
<div className="flex flex-wrap gap-1">
|
||||
<Button
|
||||
variant={metrics.revenue ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
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: !prev.revenue,
|
||||
}))
|
||||
}
|
||||
>
|
||||
Revenue
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem
|
||||
value="orders"
|
||||
aria-label="Toggle orders"
|
||||
</Button>
|
||||
<Button
|
||||
variant={metrics.orders ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setMetrics((prev) => ({
|
||||
...prev,
|
||||
orders: !prev.orders,
|
||||
}))
|
||||
}
|
||||
>
|
||||
Orders
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem
|
||||
value="movingAverage"
|
||||
aria-label="Toggle 7-day average"
|
||||
</Button>
|
||||
<Button
|
||||
variant={metrics.movingAverage ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setMetrics((prev) => ({
|
||||
...prev,
|
||||
movingAverage: !prev.movingAverage,
|
||||
}))
|
||||
}
|
||||
>
|
||||
7-Day Avg
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem
|
||||
value="avgOrderValue"
|
||||
aria-label="Toggle AOV"
|
||||
</Button>
|
||||
<Button
|
||||
variant={metrics.avgOrderValue ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setMetrics((prev) => ({
|
||||
...prev,
|
||||
avgOrderValue: !prev.avgOrderValue,
|
||||
}))
|
||||
}
|
||||
>
|
||||
AOV
|
||||
</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Separator orientation="vertical" className="h-6" />
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant={metrics.showPrevious ? "outline" : "primary"}
|
||||
variant={metrics.showPrevious ? "default" : "outline"}
|
||||
size="sm"
|
||||
className="h-8"
|
||||
onClick={() =>
|
||||
setMetrics((prev) => ({
|
||||
...prev,
|
||||
@@ -928,7 +939,6 @@ const SalesChart = ({
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="p-6 pt-0">
|
||||
|
||||
Reference in New Issue
Block a user