Standardize alert messages and clean up headers
This commit is contained in:
@@ -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 (
|
||||
<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>
|
||||
<CardTitle className="text-xl font-semibold text-gray-900 dark:text-gray-100">{title}</CardTitle>
|
||||
{lastUpdate && (
|
||||
<CardDescription>
|
||||
Last updated: {format(lastUpdate, "hh:mm a")}
|
||||
<CardDescription className="text-xs">
|
||||
Last updated {format(lastUpdate, "h:mm a")}
|
||||
</CardDescription>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant={activeEventTypes[METRIC_IDS.PLACED_ORDER] ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => handleEventTypeClick(METRIC_IDS.PLACED_ORDER)}
|
||||
className="h-8 w-8 p-0"
|
||||
>
|
||||
<Package className="h-4 w-4" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<EventTypeTooltipContent />
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
{!error && (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant={activeEventTypes[METRIC_IDS.PLACED_ORDER] ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => handleEventTypeClick(METRIC_IDS.PLACED_ORDER)}
|
||||
className="h-8 w-8 p-0"
|
||||
>
|
||||
<Package className="h-4 w-4" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<EventTypeTooltipContent />
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
@@ -1488,155 +1490,150 @@ const EventFeed = ({
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant={activeEventTypes[METRIC_IDS.NEW_BLOG_POST] ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => handleEventTypeClick(METRIC_IDS.NEW_BLOG_POST)}
|
||||
className="h-8 w-8 p-0"
|
||||
>
|
||||
<FileText className="h-4 w-4" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<EventTypeTooltipContent />
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant={activeEventTypes[METRIC_IDS.NEW_BLOG_POST] ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => handleEventTypeClick(METRIC_IDS.NEW_BLOG_POST)}
|
||||
className="h-8 w-8 p-0"
|
||||
>
|
||||
<FileText className="h-4 w-4" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<EventTypeTooltipContent />
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Order Property Filters */}
|
||||
<div className="flex flex-wrap gap-2 justify-center mt-4">
|
||||
{counts.orderProperties.hasPreorder > 0 && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
onClick={() => 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})
|
||||
</Badge>
|
||||
)}
|
||||
{counts.orderProperties.localPickup > 0 && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
onClick={() => 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})
|
||||
</Badge>
|
||||
)}
|
||||
{counts.orderProperties.isOnHold > 0 && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
onClick={() => 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})
|
||||
</Badge>
|
||||
)}
|
||||
{counts.orderProperties.onHoldReleased > 0 && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
onClick={() => 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})
|
||||
</Badge>
|
||||
)}
|
||||
{counts.orderProperties.hasDigiItem > 0 && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
onClick={() => 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})
|
||||
</Badge>
|
||||
)}
|
||||
{counts.orderProperties.hasNotions > 0 && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
onClick={() => 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})
|
||||
</Badge>
|
||||
)}
|
||||
{counts.orderProperties.hasGiftCard > 0 && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
onClick={() => 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})
|
||||
</Badge>
|
||||
)}
|
||||
{counts.orderProperties.stillOwes > 0 && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
onClick={() => 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})
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{/* Order Property Filters - only show if not in error state */}
|
||||
{!error && (
|
||||
<div className="flex flex-wrap gap-2 justify-center mt-4 pt-1">
|
||||
{counts.orderProperties.hasPreorder > 0 && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
onClick={() => 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})
|
||||
</Badge>
|
||||
)}
|
||||
{counts.orderProperties.localPickup > 0 && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
onClick={() => 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})
|
||||
</Badge>
|
||||
)}
|
||||
{counts.orderProperties.isOnHold > 0 && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
onClick={() => 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})
|
||||
</Badge>
|
||||
)}
|
||||
{counts.orderProperties.onHoldReleased > 0 && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
onClick={() => 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})
|
||||
</Badge>
|
||||
)}
|
||||
{counts.orderProperties.hasDigiItem > 0 && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
onClick={() => 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})
|
||||
</Badge>
|
||||
)}
|
||||
{counts.orderProperties.hasNotions > 0 && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
onClick={() => 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})
|
||||
</Badge>
|
||||
)}
|
||||
{counts.orderProperties.hasGiftCard > 0 && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
onClick={() => 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})
|
||||
</Badge>
|
||||
)}
|
||||
{counts.orderProperties.stillOwes > 0 && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
onClick={() => 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})
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</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">
|
||||
{loading && !events.length ? (
|
||||
<LoadingState />
|
||||
) : error ? (
|
||||
<div className="flex flex-col items-center justify-center p-6 text-center">
|
||||
<AlertCircle className="w-12 h-12 text-red-500 mb-4" />
|
||||
<h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">
|
||||
Error Loading Feed
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground mb-4">
|
||||
{error}
|
||||
</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>
|
||||
<Alert variant="destructive" className="mt-1" >
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertTitle>Error</AlertTitle>
|
||||
<AlertDescription>
|
||||
Failed to load event feed: {error}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
) : !filteredEvents || filteredEvents.length === 0 ? (
|
||||
<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">
|
||||
|
||||
@@ -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 (
|
||||
<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>
|
||||
<CardTitle className="text-xl font-semibold text-gray-900 dark:text-gray-100">{title}</CardTitle>
|
||||
@@ -170,15 +171,17 @@ const ProductGrid = ({
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="relative hidden sm:block">
|
||||
<Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search products..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-8 h-9 w-[200px]"
|
||||
/>
|
||||
</div>
|
||||
{!error && (
|
||||
<div className="relative hidden sm:block">
|
||||
<Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search products..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-8 h-9 w-[200px]"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<Select
|
||||
value={selectedTimeRange}
|
||||
onValueChange={handleTimeRangeChange}
|
||||
@@ -203,11 +206,13 @@ const ProductGrid = ({
|
||||
{loading ? (
|
||||
<LoadingState />
|
||||
) : error ? (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-center">
|
||||
<AlertCircle className="h-12 w-12 text-destructive mb-4" />
|
||||
<p className="font-medium mb-2">Error loading products</p>
|
||||
<p className="text-sm text-muted-foreground">{error}</p>
|
||||
</div>
|
||||
<Alert variant="destructive" >
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertTitle>Error</AlertTitle>
|
||||
<AlertDescription>
|
||||
Failed to load products: {error}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
) : !products?.length ? (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-center">
|
||||
<Package className="h-12 w-12 text-muted-foreground mb-4" />
|
||||
|
||||
@@ -69,6 +69,7 @@ import {
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "@/components/ui/collapsible";
|
||||
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
||||
|
||||
const METRIC_IDS = {
|
||||
PLACED_ORDER: "Y8cqcF",
|
||||
@@ -675,7 +676,7 @@ const SalesChart = ({
|
||||
|
||||
return (
|
||||
<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 justify-between items-start">
|
||||
<div>
|
||||
@@ -684,171 +685,173 @@ 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">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{!error && (
|
||||
<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">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
<Button
|
||||
variant={metrics.revenue ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setMetrics((prev) => ({
|
||||
...prev,
|
||||
revenue: !prev.revenue,
|
||||
}))
|
||||
}
|
||||
>
|
||||
Revenue
|
||||
</Button>
|
||||
<Button
|
||||
variant={metrics.orders ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setMetrics((prev) => ({
|
||||
...prev,
|
||||
orders: !prev.orders,
|
||||
}))
|
||||
}
|
||||
>
|
||||
Orders
|
||||
</Button>
|
||||
<Button
|
||||
variant={metrics.movingAverage ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setMetrics((prev) => ({
|
||||
...prev,
|
||||
movingAverage: !prev.movingAverage,
|
||||
}))
|
||||
}
|
||||
>
|
||||
7-Day Avg
|
||||
</Button>
|
||||
<Button
|
||||
variant={metrics.avgOrderValue ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setMetrics((prev) => ({
|
||||
...prev,
|
||||
avgOrderValue: !prev.avgOrderValue,
|
||||
}))
|
||||
}
|
||||
>
|
||||
AOV
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Separator orientation="vertical" className="h-6" />
|
||||
|
||||
<Button
|
||||
variant={metrics.revenue ? "default" : "outline"}
|
||||
variant={metrics.showPrevious ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setMetrics((prev) => ({
|
||||
...prev,
|
||||
revenue: !prev.revenue,
|
||||
showPrevious: !prev.showPrevious,
|
||||
}))
|
||||
}
|
||||
>
|
||||
Revenue
|
||||
</Button>
|
||||
<Button
|
||||
variant={metrics.orders ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setMetrics((prev) => ({
|
||||
...prev,
|
||||
orders: !prev.orders,
|
||||
}))
|
||||
}
|
||||
>
|
||||
Orders
|
||||
</Button>
|
||||
<Button
|
||||
variant={metrics.movingAverage ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setMetrics((prev) => ({
|
||||
...prev,
|
||||
movingAverage: !prev.movingAverage,
|
||||
}))
|
||||
}
|
||||
>
|
||||
7-Day Avg
|
||||
</Button>
|
||||
<Button
|
||||
variant={metrics.avgOrderValue ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setMetrics((prev) => ({
|
||||
...prev,
|
||||
avgOrderValue: !prev.avgOrderValue,
|
||||
}))
|
||||
}
|
||||
>
|
||||
AOV
|
||||
Compare Prev Period
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Separator orientation="vertical" className="h-6" />
|
||||
|
||||
<Button
|
||||
variant={metrics.showPrevious ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setMetrics((prev) => ({
|
||||
...prev,
|
||||
showPrevious: !prev.showPrevious,
|
||||
}))
|
||||
}
|
||||
>
|
||||
Compare Prev Period
|
||||
</Button>
|
||||
</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>
|
||||
</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 && (
|
||||
<>
|
||||
<TableCell className="text-center whitespace-nowrap px-6">
|
||||
{day.orders.toLocaleString()}
|
||||
</TableCell>
|
||||
<TableHead className="text-center whitespace-nowrap px-6 min-w-[100px]">Orders</TableHead>
|
||||
{metrics.showPrevious && (
|
||||
<TableCell className="text-center whitespace-nowrap px-6">
|
||||
{day.prevOrders.toLocaleString()}
|
||||
</TableCell>
|
||||
<TableHead className="text-center whitespace-nowrap px-6 min-w-[100px]">Prev Orders</TableHead>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{metrics.revenue && (
|
||||
<>
|
||||
<TableCell className="text-center whitespace-nowrap px-6">
|
||||
{formatCurrency(day.revenue)}
|
||||
</TableCell>
|
||||
<TableHead className="text-center whitespace-nowrap px-6 min-w-[140px]">Revenue</TableHead>
|
||||
{metrics.showPrevious && (
|
||||
<TableCell className="text-center whitespace-nowrap px-6">
|
||||
{formatCurrency(day.prevRevenue)}
|
||||
</TableCell>
|
||||
<TableHead className="text-center whitespace-nowrap px-6 min-w-[140px]">Prev Revenue</TableHead>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{metrics.avgOrderValue && (
|
||||
<>
|
||||
<TableCell className="text-center whitespace-nowrap px-6">
|
||||
{formatCurrency(day.avgOrderValue)}
|
||||
</TableCell>
|
||||
<TableHead className="text-center whitespace-nowrap px-6 min-w-[120px]">AOV</TableHead>
|
||||
{metrics.showPrevious && (
|
||||
<TableCell className="text-center whitespace-nowrap px-6">
|
||||
{formatCurrency(day.prevAvgOrderValue)}
|
||||
</TableCell>
|
||||
<TableHead className="text-center whitespace-nowrap px-6 min-w-[120px]">Prev AOV</TableHead>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{metrics.movingAverage && (
|
||||
<TableCell className="text-center whitespace-nowrap px-6">
|
||||
{formatCurrency(day.movingAverage)}
|
||||
</TableCell>
|
||||
<TableHead className="text-center whitespace-nowrap px-6 min-w-[140px]">7-Day Avg</TableHead>
|
||||
)}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</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>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)}
|
||||
<Select
|
||||
value={selectedTimeRange}
|
||||
onValueChange={handleTimeRangeChange}
|
||||
@@ -867,77 +870,79 @@ const SalesChart = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Show either skeletons or actual stats */}
|
||||
{loading ? <SkeletonStats /> : <SummaryStats stats={summaryStats} />}
|
||||
{/* Show stats only if not in error state */}
|
||||
{!error && (loading ? <SkeletonStats /> : <SummaryStats stats={summaryStats} />)}
|
||||
|
||||
{/* Show metric toggles only if not in error state */}
|
||||
{!error && (
|
||||
<div className="flex items-center gap-2 pt-2">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
<Button
|
||||
variant={metrics.revenue ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setMetrics((prev) => ({
|
||||
...prev,
|
||||
revenue: !prev.revenue,
|
||||
}))
|
||||
}
|
||||
>
|
||||
Revenue
|
||||
</Button>
|
||||
<Button
|
||||
variant={metrics.orders ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setMetrics((prev) => ({
|
||||
...prev,
|
||||
orders: !prev.orders,
|
||||
}))
|
||||
}
|
||||
>
|
||||
Orders
|
||||
</Button>
|
||||
<Button
|
||||
variant={metrics.movingAverage ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setMetrics((prev) => ({
|
||||
...prev,
|
||||
movingAverage: !prev.movingAverage,
|
||||
}))
|
||||
}
|
||||
>
|
||||
7-Day Avg
|
||||
</Button>
|
||||
<Button
|
||||
variant={metrics.avgOrderValue ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setMetrics((prev) => ({
|
||||
...prev,
|
||||
avgOrderValue: !prev.avgOrderValue,
|
||||
}))
|
||||
}
|
||||
>
|
||||
AOV
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Separator orientation="vertical" className="h-6" />
|
||||
|
||||
{/* Metric Toggles */}
|
||||
<div className="flex items-center gap-2 pt-2">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
<Button
|
||||
variant={metrics.revenue ? "default" : "outline"}
|
||||
variant={metrics.showPrevious ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setMetrics((prev) => ({
|
||||
...prev,
|
||||
revenue: !prev.revenue,
|
||||
showPrevious: !prev.showPrevious,
|
||||
}))
|
||||
}
|
||||
>
|
||||
Revenue
|
||||
</Button>
|
||||
<Button
|
||||
variant={metrics.orders ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setMetrics((prev) => ({
|
||||
...prev,
|
||||
orders: !prev.orders,
|
||||
}))
|
||||
}
|
||||
>
|
||||
Orders
|
||||
</Button>
|
||||
<Button
|
||||
variant={metrics.movingAverage ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setMetrics((prev) => ({
|
||||
...prev,
|
||||
movingAverage: !prev.movingAverage,
|
||||
}))
|
||||
}
|
||||
>
|
||||
7-Day Avg
|
||||
</Button>
|
||||
<Button
|
||||
variant={metrics.avgOrderValue ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setMetrics((prev) => ({
|
||||
...prev,
|
||||
avgOrderValue: !prev.avgOrderValue,
|
||||
}))
|
||||
}
|
||||
>
|
||||
AOV
|
||||
Compare Prev Period
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Separator orientation="vertical" className="h-6" />
|
||||
|
||||
<Button
|
||||
variant={metrics.showPrevious ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setMetrics((prev) => ({
|
||||
...prev,
|
||||
showPrevious: !prev.showPrevious,
|
||||
}))
|
||||
}
|
||||
>
|
||||
Compare Prev Period
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
@@ -951,13 +956,13 @@ const SalesChart = ({
|
||||
{showDailyTable && <SkeletonTable />}
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="flex items-center justify-center h-[400px] text-destructive">
|
||||
<div className="text-center">
|
||||
<AlertCircle className="h-12 w-12 mx-auto mb-4" />
|
||||
<div className="font-medium mb-2">Error loading sales data</div>
|
||||
<div className="text-sm text-muted-foreground">{error}</div>
|
||||
</div>
|
||||
</div>
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertTitle>Error</AlertTitle>
|
||||
<AlertDescription>
|
||||
Failed to load sales data: {error}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
) : !data.length ? (
|
||||
<div className="flex items-center justify-center h-[400px] text-muted-foreground">
|
||||
<div className="text-center">
|
||||
|
||||
@@ -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 (
|
||||
<div className="flex flex-col items-center justify-center p-6 text-center">
|
||||
<AlertCircle className="w-12 h-12 text-red-500 mb-4" />
|
||||
<h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">
|
||||
Error Loading Data
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground mb-4">
|
||||
{error}
|
||||
</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>
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertTitle>Error</AlertTitle>
|
||||
<AlertDescription>
|
||||
Failed to load stats: {error}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1519,8 +1513,8 @@ const StatCards = ({
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Card className="w-full bg-white dark:bg-gray-900/60 backdrop-blur-sm">
|
||||
<CardHeader className="p-6">
|
||||
<Card className="w-full bg-white dark:bg-gray-900/60 backdrop-blur-sm h-full">
|
||||
<CardHeader className="p-6 pb-4">
|
||||
<div className="flex flex-col space-y-2">
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
@@ -1549,14 +1543,16 @@ const StatCards = ({
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Rest of the header content */}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-6 pt-0">
|
||||
<p className="text-destructive text-center py-8">
|
||||
Error loading stats: {error}
|
||||
</p>
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertTitle>Error</AlertTitle>
|
||||
<AlertDescription>
|
||||
Failed to load stats: {error}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
@@ -1576,16 +1572,12 @@ const StatCards = ({
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<CardTitle className="text-xl font-semibold text-gray-900 dark:text-gray-100">{title}</CardTitle>
|
||||
{description && (
|
||||
<CardDescription className="mt-1">{description}</CardDescription>
|
||||
{lastUpdate && !loading && (
|
||||
<CardDescription className="text-xs"> Last updated {lastUpdate.toFormat("h:mm a")}</CardDescription>
|
||||
)}
|
||||
</div>
|
||||
<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}>
|
||||
<SelectTrigger className="w-[130px] h-9">
|
||||
<SelectValue placeholder="Select time range" />
|
||||
@@ -1600,8 +1592,6 @@ const StatCards = ({
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Rest of the header content */}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-6 pt-0">
|
||||
|
||||
Reference in New Issue
Block a user