Move view details button, restyle toggle buttons
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user