Move view details button, restyle toggle buttons
This commit is contained in:
@@ -684,6 +684,166 @@ const SalesChart = ({
|
|||||||
</CardTitle>
|
</CardTitle>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-4">
|
<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
|
<Select
|
||||||
value={selectedTimeRange}
|
value={selectedTimeRange}
|
||||||
onValueChange={handleTimeRangeChange}
|
onValueChange={handleTimeRangeChange}
|
||||||
@@ -727,28 +887,24 @@ const SalesChart = ({
|
|||||||
<ToggleGroupItem
|
<ToggleGroupItem
|
||||||
value="revenue"
|
value="revenue"
|
||||||
aria-label="Toggle revenue"
|
aria-label="Toggle revenue"
|
||||||
className="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground"
|
|
||||||
>
|
>
|
||||||
Revenue
|
Revenue
|
||||||
</ToggleGroupItem>
|
</ToggleGroupItem>
|
||||||
<ToggleGroupItem
|
<ToggleGroupItem
|
||||||
value="orders"
|
value="orders"
|
||||||
aria-label="Toggle orders"
|
aria-label="Toggle orders"
|
||||||
className="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground"
|
|
||||||
>
|
>
|
||||||
Orders
|
Orders
|
||||||
</ToggleGroupItem>
|
</ToggleGroupItem>
|
||||||
<ToggleGroupItem
|
<ToggleGroupItem
|
||||||
value="movingAverage"
|
value="movingAverage"
|
||||||
aria-label="Toggle 7-day average"
|
aria-label="Toggle 7-day average"
|
||||||
className="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground"
|
|
||||||
>
|
>
|
||||||
7-Day Avg
|
7-Day Avg
|
||||||
</ToggleGroupItem>
|
</ToggleGroupItem>
|
||||||
<ToggleGroupItem
|
<ToggleGroupItem
|
||||||
value="avgOrderValue"
|
value="avgOrderValue"
|
||||||
aria-label="Toggle AOV"
|
aria-label="Toggle AOV"
|
||||||
className="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground"
|
|
||||||
>
|
>
|
||||||
AOV
|
AOV
|
||||||
</ToggleGroupItem>
|
</ToggleGroupItem>
|
||||||
@@ -930,173 +1086,6 @@ const SalesChart = ({
|
|||||||
</LineChart>
|
</LineChart>
|
||||||
</ResponsiveContainer>
|
</ResponsiveContainer>
|
||||||
</div>
|
</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>
|
</CardContent>
|
||||||
|
|||||||
Reference in New Issue
Block a user