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

Standardize alert messages and clean up headers

Browse Source
This commit is contained in:
Matt
2024-12-22 14:34:56 -05:00
parent 28623160ee
commit 4619d24e84
4 changed files with 406 additions and 409 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
dashboard/src/components/dashboard/EventFeed.jsx
View File

@@ -48,6 +48,7 @@ import {
TooltipProvider, TooltipProvider,
TooltipTrigger, TooltipTrigger,
} from "@/components/ui/tooltip"; } from "@/components/ui/tooltip";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
const METRIC_IDS = { const METRIC_IDS = {
PLACED_ORDER: "Y8cqcF", PLACED_ORDER: "Y8cqcF",
@@ -1387,16 +1388,17 @@ const EventFeed = ({
return ( return (
<Card className="flex flex-col h-full bg-white dark:bg-gray-900/60 backdrop-blur-sm"> <Card className="flex flex-col h-full bg-white dark:bg-gray-900/60 backdrop-blur-sm">
<CardHeader className="p-6 pb-0"> <CardHeader className="p-6">
<div className="flex justify-between items-start"> <div className="flex justify-between items-start">
<div> <div>
<CardTitle className="text-xl font-semibold text-gray-900 dark:text-gray-100">{title}</CardTitle> <CardTitle className="text-xl font-semibold text-gray-900 dark:text-gray-100">{title}</CardTitle>
{lastUpdate && ( {lastUpdate && (
<CardDescription> <CardDescription className="text-xs">
Last updated: {format(lastUpdate, "hh:mm a")} Last updated {format(lastUpdate, "h:mm a")}
</CardDescription> </CardDescription>
)} )}
</div> </div>
{!error && (
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
<TooltipProvider> <TooltipProvider>
<Tooltip> <Tooltip>
@@ -1506,10 +1508,12 @@ const EventFeed = ({
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
</div> </div>
)}
</div> </div>
{/* Order Property Filters */} {/* Order Property Filters - only show if not in error state */}
<div className="flex flex-wrap gap-2 justify-center mt-4"> {!error && (
<div className="flex flex-wrap gap-2 justify-center mt-4 pt-1">
{counts.orderProperties.hasPreorder > 0 && ( {counts.orderProperties.hasPreorder > 0 && (
<Badge <Badge
variant="secondary" variant="secondary"
@@ -1615,28 +1619,21 @@ const EventFeed = ({
</Badge> </Badge>
)} )}
</div> </div>
)}
</CardHeader> </CardHeader>
<CardContent className="p-6 pt-4 flex-1 overflow-hidden"> <CardContent className="p-6 pt-0 flex-1 overflow-hidden -mt-2">
<ScrollArea className="h-full"> <ScrollArea className="h-full">
{loading && !events.length ? ( {loading && !events.length ? (
<LoadingState /> <LoadingState />
) : error ? ( ) : error ? (
<div className="flex flex-col items-center justify-center p-6 text-center"> <Alert variant="destructive" className="mt-1" >
<AlertCircle className="w-12 h-12 text-red-500 mb-4" /> <AlertCircle className="h-4 w-4" />
<h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2"> <AlertTitle>Error</AlertTitle>
Error Loading Feed <AlertDescription>
</h3> Failed to load event feed: {error}
<p className="text-sm text-muted-foreground mb-4"> </AlertDescription>
{error} </Alert>
</p>
<button
onClick={() => fetchEvents()}
className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors"
>
Try Again
</button>
</div>
) : !filteredEvents || filteredEvents.length === 0 ? ( ) : !filteredEvents || filteredEvents.length === 0 ? (
<div className="h-full flex flex-col items-center justify-center py-16 px-4"> <div className="h-full flex flex-col items-center justify-center py-16 px-4">
<div className="bg-gray-100 dark:bg-gray-800 rounded-full p-3 mb-4"> <div className="bg-gray-100 dark:bg-gray-800 rounded-full p-3 mb-4">

17
dashboard/src/components/dashboard/ProductGrid.jsx
View File

@@ -29,6 +29,7 @@ import {
TooltipProvider, TooltipProvider,
TooltipTrigger, TooltipTrigger,
} from "@/components/ui/tooltip"; } from "@/components/ui/tooltip";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
const ProductGrid = ({ const ProductGrid = ({
timeRange = "today", timeRange = "today",
@@ -161,7 +162,7 @@ const ProductGrid = ({
return ( return (
<Card className="flex flex-col h-full bg-white dark:bg-gray-900/60 backdrop-blur-sm"> <Card className="flex flex-col h-full bg-white dark:bg-gray-900/60 backdrop-blur-sm">
<CardHeader className="p-6"> <CardHeader className="p-6 pb-4">
<div className="flex justify-between items-start"> <div className="flex justify-between items-start">
<div> <div>
<CardTitle className="text-xl font-semibold text-gray-900 dark:text-gray-100">{title}</CardTitle> <CardTitle className="text-xl font-semibold text-gray-900 dark:text-gray-100">{title}</CardTitle>
@@ -170,6 +171,7 @@ const ProductGrid = ({
)} )}
</div> </div>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
{!error && (
<div className="relative hidden sm:block"> <div className="relative hidden sm:block">
<Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" /> <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
<Input <Input
@@ -179,6 +181,7 @@ const ProductGrid = ({
className="pl-8 h-9 w-[200px]" className="pl-8 h-9 w-[200px]"
/> />
</div> </div>
)}
<Select <Select
value={selectedTimeRange} value={selectedTimeRange}
onValueChange={handleTimeRangeChange} onValueChange={handleTimeRangeChange}
@@ -203,11 +206,13 @@ const ProductGrid = ({
{loading ? ( {loading ? (
<LoadingState /> <LoadingState />
) : error ? ( ) : error ? (
<div className="flex flex-col items-center justify-center py-8 text-center"> <Alert variant="destructive" >
<AlertCircle className="h-12 w-12 text-destructive mb-4" /> <AlertCircle className="h-4 w-4" />
<p className="font-medium mb-2">Error loading products</p> <AlertTitle>Error</AlertTitle>
<p className="text-sm text-muted-foreground">{error}</p> <AlertDescription>
</div> Failed to load products: {error}
</AlertDescription>
</Alert>
) : !products?.length ? ( ) : !products?.length ? (
<div className="flex flex-col items-center justify-center py-8 text-center"> <div className="flex flex-col items-center justify-center py-8 text-center">
<Package className="h-12 w-12 text-muted-foreground mb-4" /> <Package className="h-12 w-12 text-muted-foreground mb-4" />

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

@@ -69,6 +69,7 @@ import {
CollapsibleContent, CollapsibleContent,
CollapsibleTrigger, CollapsibleTrigger,
} from "@/components/ui/collapsible"; } from "@/components/ui/collapsible";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
const METRIC_IDS = { const METRIC_IDS = {
PLACED_ORDER: "Y8cqcF", PLACED_ORDER: "Y8cqcF",
@@ -675,7 +676,7 @@ const SalesChart = ({
return ( return (
<Card className="w-full bg-white dark:bg-gray-900/60 backdrop-blur-sm"> <Card className="w-full bg-white dark:bg-gray-900/60 backdrop-blur-sm">
<CardHeader className="p-6"> <CardHeader className="p-6 pb-4">
<div className="flex flex-col space-y-2"> <div className="flex flex-col space-y-2">
<div className="flex justify-between items-start"> <div className="flex justify-between items-start">
<div> <div>
@@ -684,6 +685,7 @@ const SalesChart = ({
</CardTitle> </CardTitle>
</div> </div>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
{!error && (
<Dialog> <Dialog>
<DialogTrigger asChild> <DialogTrigger asChild>
<Button variant="outline" className="h-9"> <Button variant="outline" className="h-9">
@@ -849,6 +851,7 @@ const SalesChart = ({
</div> </div>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
)}
<Select <Select
value={selectedTimeRange} value={selectedTimeRange}
onValueChange={handleTimeRangeChange} onValueChange={handleTimeRangeChange}
@@ -867,10 +870,11 @@ const SalesChart = ({
</div> </div>
</div> </div>
{/* Show either skeletons or actual stats */} {/* Show stats only if not in error state */}
{loading ? <SkeletonStats /> : <SummaryStats stats={summaryStats} />} {!error && (loading ? <SkeletonStats /> : <SummaryStats stats={summaryStats} />)}
{/* Metric Toggles */} {/* Show metric toggles only if not in error state */}
{!error && (
<div className="flex items-center gap-2 pt-2"> <div className="flex items-center gap-2 pt-2">
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
<Button <Button
@@ -938,6 +942,7 @@ const SalesChart = ({
Compare Prev Period Compare Prev Period
</Button> </Button>
</div> </div>
)}
</div> </div>
</CardHeader> </CardHeader>
@@ -951,13 +956,13 @@ const SalesChart = ({
{showDailyTable && <SkeletonTable />} {showDailyTable && <SkeletonTable />}
</div> </div>
) : error ? ( ) : error ? (
<div className="flex items-center justify-center h-[400px] text-destructive"> <Alert variant="destructive">
<div className="text-center"> <AlertCircle className="h-4 w-4" />
<AlertCircle className="h-12 w-12 mx-auto mb-4" /> <AlertTitle>Error</AlertTitle>
<div className="font-medium mb-2">Error loading sales data</div> <AlertDescription>
<div className="text-sm text-muted-foreground">{error}</div> Failed to load sales data: {error}
</div> </AlertDescription>
</div> </Alert>
) : !data.length ? ( ) : !data.length ? (
<div className="flex items-center justify-center h-[400px] text-muted-foreground"> <div className="flex items-center justify-center h-[400px] text-muted-foreground">
<div className="text-center"> <div className="text-center">

52
dashboard/src/components/dashboard/StatCards.jsx
View File

@@ -67,6 +67,8 @@ import {
TableRow, TableRow,
} from "@/components/ui/table"; } from "@/components/ui/table";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
const formatCurrency = (value, minimumFractionDigits = 0) => { const formatCurrency = (value, minimumFractionDigits = 0) => {
if (!value || isNaN(value)) return "$0"; if (!value || isNaN(value)) return "$0";
@@ -1401,21 +1403,13 @@ const StatCards = ({
if (!cachedData && error) { if (!cachedData && error) {
return ( return (
<div className="flex flex-col items-center justify-center p-6 text-center"> <Alert variant="destructive">
<AlertCircle className="w-12 h-12 text-red-500 mb-4" /> <AlertCircle className="h-4 w-4" />
<h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2"> <AlertTitle>Error</AlertTitle>
Error Loading Data <AlertDescription>
</h3> Failed to load stats: {error}
<p className="text-sm text-muted-foreground mb-4"> </AlertDescription>
{error} </Alert>
</p>
<button
onClick={() => fetchDetailData(metric)}
className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors"
>
Try Again
</button>
</div>
); );
} }
@@ -1519,8 +1513,8 @@ const StatCards = ({
if (error) { if (error) {
return ( return (
<Card className="w-full bg-white dark:bg-gray-900/60 backdrop-blur-sm"> <Card className="w-full bg-white dark:bg-gray-900/60 backdrop-blur-sm h-full">
<CardHeader className="p-6"> <CardHeader className="p-6 pb-4">
<div className="flex flex-col space-y-2"> <div className="flex flex-col space-y-2">
<div className="flex justify-between items-start"> <div className="flex justify-between items-start">
<div> <div>
@@ -1549,14 +1543,16 @@ const StatCards = ({
</Select> </Select>
</div> </div>
</div> </div>
{/* Rest of the header content */}
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="p-6 pt-0"> <CardContent className="p-6 pt-0">
<p className="text-destructive text-center py-8"> <Alert variant="destructive">
Error loading stats: {error} <AlertCircle className="h-4 w-4" />
</p> <AlertTitle>Error</AlertTitle>
<AlertDescription>
Failed to load stats: {error}
</AlertDescription>
</Alert>
</CardContent> </CardContent>
</Card> </Card>
); );
@@ -1576,16 +1572,12 @@ const StatCards = ({
<div className="flex justify-between items-start"> <div className="flex justify-between items-start">
<div> <div>
<CardTitle className="text-xl font-semibold text-gray-900 dark:text-gray-100">{title}</CardTitle> <CardTitle className="text-xl font-semibold text-gray-900 dark:text-gray-100">{title}</CardTitle>
{description && ( {lastUpdate && !loading && (
<CardDescription className="mt-1">{description}</CardDescription> <CardDescription className="text-xs"> Last updated {lastUpdate.toFormat("h:mm a")}</CardDescription>
)} )}
</div> </div>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
{lastUpdate && !loading && (
<span className="text-sm text-muted-foreground">
Last updated: {lastUpdate.toFormat("hh:mm a")}
</span>
)}
<Select value={timeRange} onValueChange={setTimeRange}> <Select value={timeRange} onValueChange={setTimeRange}>
<SelectTrigger className="w-[130px] h-9"> <SelectTrigger className="w-[130px] h-9">
<SelectValue placeholder="Select time range" /> <SelectValue placeholder="Select time range" />
@@ -1600,8 +1592,6 @@ const StatCards = ({
</Select> </Select>
</div> </div>
</div> </div>
{/* Rest of the header content */}
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="p-6 pt-0"> <CardContent className="p-6 pt-0">