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

Fix details dialogs mobile width

Browse Source
This commit is contained in:
Matt
2024-12-30 14:22:32 -05:00
parent ecd8340785
commit f0ad4d64a2
2 changed files with 80 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dashboard/src/components/dashboard/AnalyticsDashboard.jsx
View File

@@ -302,7 +302,7 @@ export const AnalyticsDashboard = () => {
Details
</Button>
</DialogTrigger>
<DialogContent className="min-w-[600px] max-w-[90vw] w-fit max-h-[85vh] overflow-hidden flex flex-col bg-white dark:bg-gray-900/60 backdrop-blur-sm">
<DialogContent className="max-w-[95vw] w-fit max-h-[85vh] overflow-hidden flex flex-col bg-white dark:bg-gray-900/60 backdrop-blur-sm">
<DialogHeader className="flex-none">
<DialogTitle className="text-gray-900 dark:text-gray-100">Daily Details</DialogTitle>
<div className="flex items-center justify-center gap-2 pt-4">

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

@@ -530,7 +530,8 @@ const SkeletonChart = () => (
<div
className="absolute inset-0 bg-muted/50"
style={{
clipPath: "polygon(0 50%, 20% 20%, 40% 40%, 60% 30%, 80% 60%, 100% 40%, 100% 100%, 0 100%)",
clipPath:
"polygon(0 50%, 20% 20%, 40% 40%, 60% 30%, 80% 60%, 100% 40%, 100% 100%, 0 100%)",
}}
/>
</div>
@@ -540,7 +541,7 @@ const SkeletonChart = () => (
);
const SkeletonStats = () => (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2 md:gap-3">
<div className="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-2 md:gap-3">
{[...Array(4)].map((_, i) => (
<Card key={i} className="bg-white dark:bg-gray-900/60 backdrop-blur-sm">
<CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-2">
@@ -569,10 +570,7 @@ const SkeletonTable = () => (
</div>
);
const SalesChart = ({
timeRange = "last30days",
title = "Sales Overview",
}) => {
const SalesChart = ({ timeRange = "last30days", title = "Sales Overview" }) => {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
@@ -690,9 +688,11 @@ const SalesChart = ({
Details
</Button>
</DialogTrigger>
<DialogContent className="min-w-[600px] max-w-[90vw] w-fit max-h-[85vh] overflow-hidden flex flex-col bg-white dark:bg-gray-900/60 backdrop-blur-sm">
<DialogContent className="p-4 max-w-[95vw] w-fit max-h-[85vh] overflow-hidden flex flex-col bg-white dark:bg-gray-900/60 backdrop-blur-sm">
<DialogHeader className="flex-none">
<DialogTitle className="text-gray-900 dark:text-gray-100">Daily Details</DialogTitle>
<DialogTitle className="text-gray-900 dark:text-gray-100">
Daily Details
</DialogTitle>
<div className="flex items-center justify-center gap-2 pt-4">
<div className="flex flex-wrap gap-1">
<Button
@@ -720,7 +720,9 @@ const SalesChart = ({
Orders
</Button>
<Button
variant={metrics.movingAverage ? "default" : "outline"}
variant={
metrics.movingAverage ? "default" : "outline"
}
size="sm"
onClick={() =>
setMetrics((prev) => ({
@@ -732,7 +734,9 @@ const SalesChart = ({
7-Day Avg
</Button>
<Button
variant={metrics.avgOrderValue ? "default" : "outline"}
variant={
metrics.avgOrderValue ? "default" : "outline"
}
size="sm"
onClick={() =>
setMetrics((prev) => ({
@@ -761,57 +765,65 @@ const SalesChart = ({
</Button>
</div>
</DialogHeader>
<div className="flex-1 overflow-y-auto mt-6">
<div className="flex-1 overflow-auto mt-6">
<div className="rounded-lg border bg-white dark:bg-gray-900/60 backdrop-blur-sm 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">
Date
</TableHead>
{metrics.revenue && (
<>
<TableHead className="text-center whitespace-nowrap px-6 min-w-[100px]">Orders</TableHead>
<TableHead className="text-center whitespace-nowrap px-6">
Revenue
</TableHead>
{metrics.showPrevious && (
<TableHead className="text-center whitespace-nowrap px-6 min-w-[100px]">Prev Orders</TableHead>
<TableHead className="text-center whitespace-nowrap px-6">
Prev Revenue
</TableHead>
)}
</>
)}
{metrics.revenue && (
{metrics.orders && (
<>
<TableHead className="text-center whitespace-nowrap px-6 min-w-[140px]">Revenue</TableHead>
<TableHead className="text-center whitespace-nowrap px-6">
Orders
</TableHead>
{metrics.showPrevious && (
<TableHead className="text-center whitespace-nowrap px-6 min-w-[140px]">Prev Revenue</TableHead>
<TableHead className="text-center whitespace-nowrap px-6">
Prev Orders
</TableHead>
)}
</>
)}
{metrics.avgOrderValue && (
<>
<TableHead className="text-center whitespace-nowrap px-6 min-w-[120px]">AOV</TableHead>
<TableHead className="text-center whitespace-nowrap px-6">
AOV
</TableHead>
{metrics.showPrevious && (
<TableHead className="text-center whitespace-nowrap px-6 min-w-[120px]">Prev AOV</TableHead>
<TableHead className="text-center whitespace-nowrap px-6">
Prev AOV
</TableHead>
)}
</>
)}
{metrics.movingAverage && (
<TableHead className="text-center whitespace-nowrap px-6 min-w-[140px]">7-Day Avg</TableHead>
<TableHead className="text-center whitespace-nowrap px-6">
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()}
{formatXAxis(day.timestamp)}
</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">
@@ -823,6 +835,18 @@ const SalesChart = ({
</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.avgOrderValue && (
<>
@@ -869,7 +893,12 @@ const SalesChart = ({
</div>
{/* Show stats only if not in error state */}
{!error && (loading ? <SkeletonStats /> : <SummaryStats stats={summaryStats} />)}
{!error &&
(loading ? (
<SkeletonStats />
) : (
<SummaryStats stats={summaryStats} />
))}
{/* Show metric toggles only if not in error state */}
{!error && (
@@ -925,8 +954,14 @@ const SalesChart = ({
</Button>
</div>
<Separator orientation="vertical" className="h-6 hidden sm:block" />
<Separator orientation="horizontal" className="sm:hidden w-20 my-2" />
<Separator
orientation="vertical"
className="h-6 hidden sm:block"
/>
<Separator
orientation="horizontal"
className="sm:hidden w-20 my-2"
/>
<Button
variant={metrics.showPrevious ? "default" : "outline"}
@@ -955,7 +990,10 @@ const SalesChart = ({
{showDailyTable && <SkeletonTable />}
</div>
) : error ? (
<Alert variant="destructive" className="bg-white dark:bg-gray-900/60 backdrop-blur-sm">
<Alert
variant="destructive"
className="bg-white dark:bg-gray-900/60 backdrop-blur-sm"
>
<AlertCircle className="h-4 w-4" />
<AlertTitle>Error</AlertTitle>
<AlertDescription>
@@ -966,7 +1004,9 @@ const SalesChart = ({
<div className="flex items-center justify-center h-[400px] text-muted-foreground">
<div className="text-center">
<TrendingUp className="h-12 w-12 mx-auto mb-4" />
<div className="font-medium mb-2 text-gray-900 dark:text-gray-100">No sales data available</div>
<div className="font-medium mb-2 text-gray-900 dark:text-gray-100">
No sales data available
</div>
<div className="text-sm text-muted-foreground">
Try selecting a different time range
</div>