From 4619d24e84eef5b858ab832420a25ebb454bc900 Mon Sep 17 00:00:00 2001 From: Matt Date: Sun, 22 Dec 2024 14:34:56 -0500 Subject: [PATCH] Standardize alert messages and clean up headers --- .../src/components/dashboard/EventFeed.jsx | 321 +++++++------- .../src/components/dashboard/ProductGrid.jsx | 35 +- .../src/components/dashboard/SalesChart.jsx | 407 +++++++++--------- .../src/components/dashboard/StatCards.jsx | 52 +-- 4 files changed, 406 insertions(+), 409 deletions(-) diff --git a/dashboard/src/components/dashboard/EventFeed.jsx b/dashboard/src/components/dashboard/EventFeed.jsx index 779c8f4..79b0a38 100644 --- a/dashboard/src/components/dashboard/EventFeed.jsx +++ b/dashboard/src/components/dashboard/EventFeed.jsx @@ -48,6 +48,7 @@ import { TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; +import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; const METRIC_IDS = { PLACED_ORDER: "Y8cqcF", @@ -1387,34 +1388,35 @@ const EventFeed = ({ return ( - +
{title} {lastUpdate && ( - - Last updated: {format(lastUpdate, "hh:mm a")} + + Last updated {format(lastUpdate, "h:mm a")} )}
-
- - - - - - - - - - + {!error && ( +
+ + + + + + + + + + @@ -1488,155 +1490,150 @@ const EventFeed = ({ - - - - - - - - - - -
+ + + + + + + + + + +
+ )}
- {/* Order Property Filters */} -
- {counts.orderProperties.hasPreorder > 0 && ( - handleOrderPropertyClick('hasPreorder')} - className={`${ - orderFilters.hasPreorder - ? 'bg-purple-800 text-purple-200 hover:bg-purple-700' - : 'bg-purple-100 dark:bg-purple-900/20 text-purple-800 dark:text-purple-300 hover:bg-purple-100 dark:hover:bg-purple-900/20' - } cursor-pointer`} - > - Pre-order ({counts.orderProperties.hasPreorder}) - - )} - {counts.orderProperties.localPickup > 0 && ( - handleOrderPropertyClick('localPickup')} - className={`${ - orderFilters.localPickup - ? 'bg-green-800 text-green-200 hover:bg-green-700' - : 'bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-300 hover:bg-green-100 dark:hover:bg-green-900/20' - } cursor-pointer`} - > - Local ({counts.orderProperties.localPickup}) - - )} - {counts.orderProperties.isOnHold > 0 && ( - handleOrderPropertyClick('isOnHold')} - className={`${ - orderFilters.isOnHold - ? 'bg-blue-800 text-blue-200 hover:bg-blue-700' - : 'bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-900/20' - } cursor-pointer`} - > - On Hold ({counts.orderProperties.isOnHold}) - - )} - {counts.orderProperties.onHoldReleased > 0 && ( - handleOrderPropertyClick('onHoldReleased')} - className={`${ - orderFilters.onHoldReleased - ? 'bg-green-800 text-green-200 hover:bg-green-700' - : 'bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-300 hover:bg-green-100 dark:hover:bg-green-900/20' - } cursor-pointer`} - > - Hold Released ({counts.orderProperties.onHoldReleased}) - - )} - {counts.orderProperties.hasDigiItem > 0 && ( - handleOrderPropertyClick('hasDigiItem')} - className={`${ - orderFilters.hasDigiItem - ? 'bg-indigo-800 text-indigo-200 hover:bg-indigo-700' - : 'bg-indigo-100 dark:bg-indigo-900/20 text-indigo-800 dark:text-indigo-300 hover:bg-indigo-100 dark:hover:bg-indigo-900/20' - } cursor-pointer`} - > - Digital ({counts.orderProperties.hasDigiItem}) - - )} - {counts.orderProperties.hasNotions > 0 && ( - handleOrderPropertyClick('hasNotions')} - className={`${ - orderFilters.hasNotions - ? 'bg-yellow-800 text-yellow-200 hover:bg-yellow-700' - : 'bg-yellow-100 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-300 hover:bg-yellow-100 dark:hover:bg-yellow-900/20' - } cursor-pointer`} - > - Notions ({counts.orderProperties.hasNotions}) - - )} - {counts.orderProperties.hasGiftCard > 0 && ( - handleOrderPropertyClick('hasGiftCard')} - className={`${ - orderFilters.hasGiftCard - ? 'bg-pink-800 text-pink-200 hover:bg-pink-700' - : 'bg-pink-100 dark:bg-pink-900/20 text-pink-800 dark:text-pink-300 hover:bg-pink-100 dark:hover:bg-pink-900/20' - } cursor-pointer`} - > - eGift Card ({counts.orderProperties.hasGiftCard}) - - )} - {counts.orderProperties.stillOwes > 0 && ( - handleOrderPropertyClick('stillOwes')} - className={`${ - orderFilters.stillOwes - ? 'bg-red-800 text-red-200 hover:bg-red-700' - : 'bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-300 hover:bg-red-100 dark:hover:bg-red-900/20' - } cursor-pointer`} - > - Owes ({counts.orderProperties.stillOwes}) - - )} -
+ {/* Order Property Filters - only show if not in error state */} + {!error && ( +
+ {counts.orderProperties.hasPreorder > 0 && ( + handleOrderPropertyClick('hasPreorder')} + className={`${ + orderFilters.hasPreorder + ? 'bg-purple-800 text-purple-200 hover:bg-purple-700' + : 'bg-purple-100 dark:bg-purple-900/20 text-purple-800 dark:text-purple-300 hover:bg-purple-100 dark:hover:bg-purple-900/20' + } cursor-pointer`} + > + Pre-order ({counts.orderProperties.hasPreorder}) + + )} + {counts.orderProperties.localPickup > 0 && ( + handleOrderPropertyClick('localPickup')} + className={`${ + orderFilters.localPickup + ? 'bg-green-800 text-green-200 hover:bg-green-700' + : 'bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-300 hover:bg-green-100 dark:hover:bg-green-900/20' + } cursor-pointer`} + > + Local ({counts.orderProperties.localPickup}) + + )} + {counts.orderProperties.isOnHold > 0 && ( + handleOrderPropertyClick('isOnHold')} + className={`${ + orderFilters.isOnHold + ? 'bg-blue-800 text-blue-200 hover:bg-blue-700' + : 'bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-900/20' + } cursor-pointer`} + > + On Hold ({counts.orderProperties.isOnHold}) + + )} + {counts.orderProperties.onHoldReleased > 0 && ( + handleOrderPropertyClick('onHoldReleased')} + className={`${ + orderFilters.onHoldReleased + ? 'bg-green-800 text-green-200 hover:bg-green-700' + : 'bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-300 hover:bg-green-100 dark:hover:bg-green-900/20' + } cursor-pointer`} + > + Hold Released ({counts.orderProperties.onHoldReleased}) + + )} + {counts.orderProperties.hasDigiItem > 0 && ( + handleOrderPropertyClick('hasDigiItem')} + className={`${ + orderFilters.hasDigiItem + ? 'bg-indigo-800 text-indigo-200 hover:bg-indigo-700' + : 'bg-indigo-100 dark:bg-indigo-900/20 text-indigo-800 dark:text-indigo-300 hover:bg-indigo-100 dark:hover:bg-indigo-900/20' + } cursor-pointer`} + > + Digital ({counts.orderProperties.hasDigiItem}) + + )} + {counts.orderProperties.hasNotions > 0 && ( + handleOrderPropertyClick('hasNotions')} + className={`${ + orderFilters.hasNotions + ? 'bg-yellow-800 text-yellow-200 hover:bg-yellow-700' + : 'bg-yellow-100 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-300 hover:bg-yellow-100 dark:hover:bg-yellow-900/20' + } cursor-pointer`} + > + Notions ({counts.orderProperties.hasNotions}) + + )} + {counts.orderProperties.hasGiftCard > 0 && ( + handleOrderPropertyClick('hasGiftCard')} + className={`${ + orderFilters.hasGiftCard + ? 'bg-pink-800 text-pink-200 hover:bg-pink-700' + : 'bg-pink-100 dark:bg-pink-900/20 text-pink-800 dark:text-pink-300 hover:bg-pink-100 dark:hover:bg-pink-900/20' + } cursor-pointer`} + > + eGift Card ({counts.orderProperties.hasGiftCard}) + + )} + {counts.orderProperties.stillOwes > 0 && ( + handleOrderPropertyClick('stillOwes')} + className={`${ + orderFilters.stillOwes + ? 'bg-red-800 text-red-200 hover:bg-red-700' + : 'bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-300 hover:bg-red-100 dark:hover:bg-red-900/20' + } cursor-pointer`} + > + Owes ({counts.orderProperties.stillOwes}) + + )} +
+ )} - + {loading && !events.length ? ( ) : error ? ( -
- -

- Error Loading Feed -

-

- {error} -

- -
+ + + Error + + Failed to load event feed: {error} + + ) : !filteredEvents || filteredEvents.length === 0 ? (
diff --git a/dashboard/src/components/dashboard/ProductGrid.jsx b/dashboard/src/components/dashboard/ProductGrid.jsx index f1717a9..b746bab 100644 --- a/dashboard/src/components/dashboard/ProductGrid.jsx +++ b/dashboard/src/components/dashboard/ProductGrid.jsx @@ -29,6 +29,7 @@ import { TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; +import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; const ProductGrid = ({ timeRange = "today", @@ -161,7 +162,7 @@ const ProductGrid = ({ return ( - +
{title} @@ -170,15 +171,17 @@ const ProductGrid = ({ )}
-
- - setSearchQuery(e.target.value)} - className="pl-8 h-9 w-[200px]" - /> -
+ {!error && ( +
+ + setSearchQuery(e.target.value)} + className="pl-8 h-9 w-[200px]" + /> +
+ )}
- {/* Show either skeletons or actual stats */} - {loading ? : } + {/* Show stats only if not in error state */} + {!error && (loading ? : )} + + {/* Show metric toggles only if not in error state */} + {!error && ( +
+
+ + + + +
+ + - {/* Metric Toggles */} -
-
- - -
- - - - -
+ )}
@@ -951,13 +956,13 @@ const SalesChart = ({ {showDailyTable && }
) : error ? ( -
-
- -
Error loading sales data
-
{error}
-
-
+ + + Error + + Failed to load sales data: {error} + + ) : !data.length ? (
diff --git a/dashboard/src/components/dashboard/StatCards.jsx b/dashboard/src/components/dashboard/StatCards.jsx index 61191a0..fbb6345 100644 --- a/dashboard/src/components/dashboard/StatCards.jsx +++ b/dashboard/src/components/dashboard/StatCards.jsx @@ -67,6 +67,8 @@ import { TableRow, } from "@/components/ui/table"; 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) => { if (!value || isNaN(value)) return "$0"; @@ -1401,21 +1403,13 @@ const StatCards = ({ if (!cachedData && error) { return ( -
- -

- Error Loading Data -

-

- {error} -

- -
+ + + Error + + Failed to load stats: {error} + + ); } @@ -1519,8 +1513,8 @@ const StatCards = ({ if (error) { return ( - - + +
@@ -1549,14 +1543,16 @@ const StatCards = ({
- - {/* Rest of the header content */}
-

- Error loading stats: {error} -

+ + + Error + + Failed to load stats: {error} + + ); @@ -1576,16 +1572,12 @@ const StatCards = ({
{title} - {description && ( - {description} + {lastUpdate && !loading && ( + Last updated {lastUpdate.toFormat("h:mm a")} )}
- {lastUpdate && !loading && ( - - Last updated: {lastUpdate.toFormat("hh:mm a")} - - )} +
- - {/* Rest of the header content */}