Standardize sort/toggle buttons
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -694,66 +694,71 @@ 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"
|
|
||||||
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
|
<Button
|
||||||
variant={metrics.showPrevious ? "outline" : "primary"}
|
variant={metrics.revenue ? "default" : "outline"}
|
||||||
size="sm"
|
size="sm"
|
||||||
className="h-8"
|
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
setMetrics((prev) => ({
|
setMetrics((prev) => ({
|
||||||
...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>
|
</Button>
|
||||||
</div>
|
</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>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
<div className="flex-1 overflow-y-auto mt-6">
|
<div className="flex-1 overflow-y-auto mt-6">
|
||||||
@@ -867,66 +872,71 @@ 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"
|
|
||||||
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
|
<Button
|
||||||
variant={metrics.showPrevious ? "outline" : "primary"}
|
variant={metrics.revenue ? "default" : "outline"}
|
||||||
size="sm"
|
size="sm"
|
||||||
className="h-8"
|
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
setMetrics((prev) => ({
|
setMetrics((prev) => ({
|
||||||
...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>
|
</Button>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
|
|||||||
Reference in New Issue
Block a user