+
+ Connected
+
+ {connectionStatus.message}
+
+
+ ) : error ? (
+
+ Connection Failed
+ {error}
+
+ ) : (
+
+
+ {/* Order Count */}
+ {connectionStatus?.success && (
+ Connection Status
+ {connectionStatus?.success ? ( +
+ Testing connection...
+
+ )}
+
+
+
+ {data && (
+
+ )}
+
+
+ )}
+
+ Total Orders in Database
+
+
+ {data.orderCount?.toLocaleString()}
+
+
+ Last updated: {new Date(data.timestamp).toLocaleTimeString()}
+
+ {value}
+ {subtitle && (
+ {subtitle}
+ )} +{label}
+ {payload.map((entry, index) => ( ++ {`${entry.name}: ${entry.value}`} +
+ ))} +
+
+
+
+);
+
+const SkeletonTable = ({ rows = 5 }) => (
+
+
+
+ {type === "bar" ? (
+
+
+ {[...Array(24)].map((_, i) => (
+
+ ))}
+
+ ) : (
+
+ {[...Array(5)].map((_, i) => (
+
+ ))}
+
+
+ )}
+
+ Error loading call data: {error}
+
+
+
+
+
+
+
+ {/* Metric Cards */}
+
+
+
+ );
+};
+
+export default AircallDashboard;
diff --git a/inventory/src/components/dashboard/AnalyticsDashboard.jsx b/inventory/src/components/dashboard/AnalyticsDashboard.jsx
new file mode 100644
index 0000000..9ee54bc
--- /dev/null
+++ b/inventory/src/components/dashboard/AnalyticsDashboard.jsx
@@ -0,0 +1,597 @@
+import React, { useState, useEffect } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/dashboard/ui/card";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/dashboard/ui/select";
+import { Button } from "@/components/dashboard/ui/button";
+import { Separator } from "@/components/dashboard/ui/separator";
+import {
+ LineChart,
+ Line,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ Legend,
+ ResponsiveContainer,
+ ReferenceLine,
+} from "recharts";
+import { Loader2, TrendingUp, AlertCircle } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "@/components/dashboard/ui/alert";
+import { Skeleton } from "@/components/dashboard/ui/skeleton";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/dashboard/ui/dialog";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/dashboard/ui/table";
+
+// Add helper function for currency formatting
+const formatCurrency = (value, useFractionDigits = true) => {
+ if (typeof value !== "number") return "$0.00";
+ const roundedValue = parseFloat(value.toFixed(useFractionDigits ? 2 : 0));
+ return new Intl.NumberFormat("en-US", {
+ style: "currency",
+ currency: "USD",
+ minimumFractionDigits: useFractionDigits ? 2 : 0,
+ maximumFractionDigits: useFractionDigits ? 2 : 0,
+ }).format(roundedValue);
+};
+
+// Add skeleton components
+const SkeletonChart = () => (
+
+
+
+ Calls
+
+
+
+
+ {isLoading ? (
+ [...Array(4)].map((_, i) => (
+
+
+ Total Calls
+
+
+
+
+ Answer Rate
+
+
+
+
+ Peak Hour
+
+
+
+
+ Avg Duration
+
+
+
+
+
+
+
+
+
+
+
+ ) : null}
+
+
+ {/* Charts and Tables Section */}
+ {metrics.total}
+
+
+
+ ↑ {metrics.by_direction.inbound} inbound
+
+
+ ↓ {metrics.by_direction.outbound} outbound
+
+
+ {`${((metrics.by_status.answered / metrics.total) * 100).toFixed(1)}%`}
+
+
+
+
+ {metrics.by_status.answered} answered
+
+
+ {metrics.by_status.missed} missed
+
+
+ {metrics?.by_hour ? new Date(2000, 0, 1, metrics.by_hour.indexOf(Math.max(...metrics.by_hour))).toLocaleString('en-US', { hour: 'numeric', hour12: true }).toUpperCase() : 'N/A'}
+
+
+ Busiest Agent: {sortedAgents[0]?.name || "N/A"}
+
+
+
+
+ {formatDuration(metrics.average_duration)}
+
+
+ {metrics?.daily_data?.length > 0
+ ? `${Math.round(metrics.total / metrics.daily_data.length)} calls/day`
+ : "N/A"}
+
+
+
+ Duration Distribution
+ {metrics?.duration_distribution?.map((d, i) => ( +
+ {d.range}
+ {d.count} calls
+
+ ))}
+
+ {/* Charts Row */}
+
+
+ {/* Daily Call Volume */}
+
+
+ Daily Call Volume
+
+
+ {isLoading ? (
+
+
+
+
+ )}
+
+
+
+ {/* Hourly Distribution */}
+
+
+ Hourly Distribution
+
+
+ {isLoading ? (
+
+
+
+
+ )}
+
+
+
+
+ {/* Tables Row */}
+
+ {/* Agent Performance */}
+
+
+ Agent Performance
+
+
+ {isLoading ? (
+
+
+
+ {/* Missed Call Reasons Table */}
+
+
+ Missed Call Reasons
+
+
+ {isLoading ? (
+
+
+
+
+ setAgentSort({ key, direction })}
+ />
+
+ )}
+
+
+
+
+ )}
+
+
+);
+
+const SkeletonStats = () => (
+
+
+
+ {/* Grid lines */}
+ {[...Array(5)].map((_, i) => (
+
+ ))}
+ {/* Y-axis labels */}
+
+
+ {[...Array(5)].map((_, i) => (
+
+ {/* X-axis labels */}
+
+ {[...Array(6)].map((_, i) => (
+
+ {/* Chart line */}
+
+
+
+
+
+
+ {[...Array(4)].map((_, i) => (
+
+
+
+
+
+
+ ))}
+
+);
+
+const SkeletonButtons = () => (
+
+ {[...Array(4)].map((_, i) => (
+
+);
+
+// Add StatCard component
+const StatCard = ({
+ title,
+ value,
+ description,
+ trend,
+ trendValue,
+ colorClass = "text-gray-900 dark:text-gray-100",
+}) => (
+ {value}
+ {description && (
+ {description}
+ )}
+ + {label instanceof Date ? label.toLocaleDateString() : label} +
+
+ {payload.map((entry, index) => (
+
+
+ {entry.name}:
+
+ {entry.value.toLocaleString()}
+
+
+ ))}
+
+
+
+
+
+ {loading ? (
+
+
+ Analytics Overview
+
+
+
+ {loading ? (
+
+
+
+ ) : null}
+
+
+
+
+
+
+
+
+
+
+
+ ) : (
+
+
+ No analytics data available
+
+ Try selecting a different time range
+
+
+
+
+
+
+
+ )}
+
+
+ );
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {forecast && (
+
+
+
+ High
+ {Math.round(weather.main.temp_max)}°F
+
+
+
+
+ Low
+ {Math.round(weather.main.temp_min)}°F
+
+
+
+
+ Humidity
+ {weather.main.humidity}%
+
+
+
+
+ Wind
+ {Math.round(weather.wind.speed)} mph
+
+
+
+
+ Sunrise
+ {formatTime(weather.sys?.sunrise)}
+
+
+
+
+ Sunset
+ {formatTime(weather.sys?.sunset)}
+
+
+
+ )}
+
+ {forecast.map((day, index) => {
+ const forecastTime = new Date(day.dt * 1000);
+ const isNight = forecastTime.getHours() >= 18 || forecastTime.getHours() < 6;
+ return (
+
+
+ );
+ })}
+
+
+
+ {forecastTime.toLocaleDateString('en-US', { weekday: 'short' })}
+
+ {getWeatherIcon(day.weather[0].id, forecastTime, true)}
+
+
+
+ {Math.round(day.main.temp_max)}°
+
+
+ {Math.round(day.main.temp_min)}°
+
+
+
+ {day.rain?.['3h'] > 0 && (
+
+
+
+ )}
+ {day.snow?.['3h'] > 0 && (
+
+
+ )}
+ {!day.rain?.['3h'] && !day.snow?.['3h'] && (
+
+
+ )}
+
+ {/* Time Display */}
+
+
+
+
+
+ {/* Date and Weather Display */}
+
+
+
+
+
+ );
+};
+
+export default DateTimeWeatherDisplay;
\ No newline at end of file
diff --git a/inventory/src/components/dashboard/EventFeed.jsx b/inventory/src/components/dashboard/EventFeed.jsx
new file mode 100644
index 0000000..1d2211c
--- /dev/null
+++ b/inventory/src/components/dashboard/EventFeed.jsx
@@ -0,0 +1,1622 @@
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import axios from "axios";
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from "@/components/dashboard/ui/card";
+import { Badge } from "@/components/dashboard/ui/badge";
+import { ScrollArea } from "@/components/dashboard/ui/scroll-area";
+import {
+ Package,
+ Truck,
+ UserPlus,
+ XCircle,
+ DollarSign,
+ ChevronRight,
+ Tag,
+ Box,
+ Activity,
+ RefreshCcw,
+ FileText,
+ AlertCircle,
+} from "lucide-react";
+import { format } from "date-fns";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from "@/components/dashboard/ui/dialog";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/dashboard/ui/select";
+import { Skeleton } from "@/components/dashboard/ui/skeleton";
+import { Button } from "@/components/dashboard/ui/button";
+import { Separator } from "@/components/dashboard/ui/separator";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "@/components/dashboard/ui/tooltip";
+import { Alert, AlertDescription, AlertTitle } from "@/components/dashboard/ui/alert";
+
+const METRIC_IDS = {
+ PLACED_ORDER: "Y8cqcF",
+ SHIPPED_ORDER: "VExpdL",
+ ACCOUNT_CREATED: "TeeypV",
+ CANCELED_ORDER: "YjVMNg",
+ NEW_BLOG_POST: "YcxeDr",
+ PAYMENT_REFUNDED: "R7XUYh",
+};
+
+const EVENT_ICONS = {
+ [METRIC_IDS.PLACED_ORDER]: Package,
+ [METRIC_IDS.SHIPPED_ORDER]: Truck,
+ [METRIC_IDS.ACCOUNT_CREATED]: UserPlus,
+ [METRIC_IDS.CANCELED_ORDER]: XCircle,
+ [METRIC_IDS.PAYMENT_REFUNDED]: DollarSign,
+ [METRIC_IDS.NEW_BLOG_POST]: FileText,
+};
+
+const EVENT_TYPES = {
+ [METRIC_IDS.PLACED_ORDER]: {
+ label: "Order Placed",
+ color: "bg-green-500 dark:bg-green-600",
+ textColor: "text-green-600 dark:text-green-400",
+ },
+ [METRIC_IDS.SHIPPED_ORDER]: {
+ label: "Order Shipped",
+ color: "bg-blue-500 dark:bg-blue-600",
+ textColor: "text-blue-600 dark:text-blue-400",
+ },
+ [METRIC_IDS.ACCOUNT_CREATED]: {
+ label: "New Account",
+ color: "bg-purple-500 dark:bg-purple-600",
+ textColor: "text-purple-600 dark:text-purple-400",
+ },
+ [METRIC_IDS.CANCELED_ORDER]: {
+ label: "Order Canceled",
+ color: "bg-red-500 dark:bg-red-600",
+ textColor: "text-red-600 dark:text-red-400",
+ },
+ [METRIC_IDS.PAYMENT_REFUNDED]: {
+ label: "Payment Refunded",
+ color: "bg-orange-500 dark:bg-orange-600",
+ textColor: "text-orange-600 dark:text-orange-400",
+ },
+ [METRIC_IDS.NEW_BLOG_POST]: {
+ label: "New Blog Post",
+ color: "bg-indigo-500 dark:bg-indigo-600",
+ textColor: "text-indigo-600 dark:text-indigo-400",
+ },
+};
+
+// Helper Functions
+const formatCurrency = (amount) => {
+ // Convert to number if it's a string
+ const num = typeof amount === "string" ? parseFloat(amount) : amount;
+ // Handle negative numbers
+ const absNum = Math.abs(num);
+ // Format to 2 decimal places and add negative sign if needed
+ return `${num < 0 ? "-" : ""}$${absNum.toFixed(2)}`;
+};
+
+const toTitleCase = (str) => {
+ if (!str) return "";
+ return str
+ .toLowerCase()
+ .split(" ")
+ .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+ .join(" ");
+};
+
+const formatShipMethod = (method) => {
+ if (!method) return "Standard Shipping";
+ return method
+ .replace("usps_", "USPS ")
+ .replace("ups_", "UPS ")
+ .replace("fedex_", "FedEx ")
+ .replace(/_/g, " ")
+ .split(" ")
+ .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+ .join(" ");
+};
+
+const formatShipMethodSimple = (method) => {
+ if (!method) return "Digital";
+ if (method.includes("usps")) return "USPS";
+ if (method.includes("fedex")) return "FedEx";
+ if (method.includes("ups")) return "UPS";
+ return "Standard";
+};
+
+// Loading State Component
+const LoadingState = () => (
+
+
+
+ {hours}
+ :
+ {minutes}
+ {ampm}
+
+
+
+
+
+
+
+ {weather?.main && (
+
+
+ = 18 || datetime.getHours() < 6
+ ),
+ "flex items-center justify-center cursor-pointer hover:brightness-110 transition-all relative backdrop-blur-sm"
+ )}>
+
+
+ {weather.alerts && (
+
+
+
+ {weather.alerts && (
+
+
+ {weather.alerts[0].event}
+
+
+ )}
+
+
+ )}
+
+
+ {/* Calendar Display */}
+
+
+ {dateInfo.day}
+
+
+ {dateInfo.weekday}
+
+
+
+ {getWeatherIcon(weather.weather[0]?.id, datetime)}
+
+ {Math.round(weather.main.temp)}°
+
+
+
+
+ )}
+
+ {[...Array(8)].map((_, i) => (
+
+);
+
+// Empty State Component
+const EmptyState = () => (
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+// Shared Components
+const OrderStatusTags = ({ details }) => (
+
+
+ + No activity yet today +
++ Recent activity will appear here as it happens +
+
+ {details.HasPreorder && (
+
+ Includes Pre-order
+
+ )}
+ {details.LocalPickup && (
+
+ Local Pickup
+
+ )}
+ {details.IsOnHold && (
+
+ On Hold
+
+ )}
+ {details.HasDigiItem && (
+
+ Digital Items
+
+ )}
+ {details.HasNotions && (
+
+ Includes Notions
+
+ )}
+ {details.HasDigitalGC && (
+
+ Gift Card
+
+ )}
+ {details.StillOwes && (
+
+ Payment Due
+
+ )}
+
+);
+
+const ProductCard = ({ product }) => (
+
+
+);
+
+const PromotionalInfo = ({ details }) => {
+ if (!details?.PromosUsedReg?.length && !details?.PointsDiscount) return null;
+
+ return (
+
+
+
+
+
+
+ + {product.ProductName || "Unnamed Product"} +
+ {product.ItemStatus === "Pre-Order" && ( + + Pre-order + + )} +
+ {product.Brand && (
+
+
+
+ )}
+ {product.SKU && (
+
+
+ )}
+
+
+
+ {formatCurrency(product.ItemPrice)}
+
+
+ Qty: {product.Quantity || product.QuantityOrdered || 1}
+
+ {product.RowTotal && (
+
+ Total: {formatCurrency(product.RowTotal)}
+
+ )}
+
+
+ );
+};
+
+const OrderSummary = ({ details }) => (
+ + Savings Applied +
+
+ {Array.isArray(details.PromosUsedReg) &&
+ details.PromosUsedReg.map(([code, amount], index) => (
+
+
+
+ {code}
+
+
+ -{formatCurrency(amount)}
+
+
+ ))}
+ {details.PointsDiscount > 0 && (
+
+
+ Points Discount
+
+
+ -{formatCurrency(details.PointsDiscount)}
+
+
+ )}
+
+
+);
+
+const ShippingInfo = ({ details }) => (
+
+
+
+
+
+ + Subtotal +
+
+
+
+
+ Items ({details.Items?.length || 0})
+
+ {formatCurrency(details.Subtotal)}
+
+ {details.PointsDiscount > 0 && (
+
+ Points Discount
+ -{formatCurrency(details.PointsDiscount)}
+
+ )}
+ {details.TotalDiscounts > 0 && (
+
+ Discounts
+ -{formatCurrency(details.TotalDiscounts)}
+
+ )}
+
+
+ + Shipping +
+
+
+
+ Shipping Cost
+ {formatCurrency(details.ShippingTotal)}
+
+ {details.SalesTax > 0 && (
+
+ Sales Tax
+ {formatCurrency(details.SalesTax)}
+
+ )}
+
+
+
+
+
+
+ Total
+ {details.TotalSavings > 0 && (
+
+
+ {formatCurrency(details.TotalAmount)}
+
+
+ You saved {formatCurrency(details.TotalSavings)}
+
+ )}
+
+
+);
+
+const CustomTooltip = ({ active, payload, label }) => {
+ if (active && payload && payload.length) {
+ const date = new Date(label);
+ const formattedDate = date.toLocaleDateString('en-US', {
+ weekday: 'short',
+ month: 'short',
+ day: 'numeric',
+ year: 'numeric'
+ });
+
+ // Group metrics by type (current vs previous)
+ const currentMetrics = payload.filter(p => !p.dataKey.toLowerCase().includes('prev'));
+ const previousMetrics = payload.filter(p => p.dataKey.toLowerCase().includes('prev'));
+
+ return (
+
+
+ {details.TrackingNumber && (
+ + Shipping Address +
+
+
+
+ {details.ShippingName || "Customer"}
+
+ {details.ShippingStreet1}
+ {details.ShippingStreet2 && {details.ShippingStreet2}
}
+
+ {details.ShippingCity}, {details.ShippingState} {details.ShippingZip}
+
+ {details.ShippingCountry !== "US" && (
+ {details.ShippingCountry}
+ )}
+
+
+ )}
+ + Tracking Information +
+
+
+
+ {formatShipMethod(details.ShipMethod)}
+
+
+ {details.TrackingNumber}
+
+ {formattedDate}
+ +
+ {currentMetrics.map((entry, index) => {
+ const value = entry.dataKey.toLowerCase().includes('revenue') ||
+ entry.dataKey === 'avgOrderValue' ||
+ entry.dataKey === 'movingAverage' ||
+ entry.dataKey === 'aovMovingAverage'
+ ? formatCurrency(entry.value)
+ : entry.value.toLocaleString();
+
+ return (
+
+
+ {previousMetrics.length > 0 && (
+ <>
+
+
+
+ {entry.name}:
+
+ {value}
+
+ );
+ })}
+
+
+
+ )}
+ Previous Period
+ {previousMetrics.map((entry, index) => { + const value = entry.dataKey.toLowerCase().includes('revenue') || + entry.dataKey.includes('avgOrderValue') + ? formatCurrency(entry.value) + : entry.value.toLocaleString(); + + return ( +
+
+ {entry.name.replace('Previous ', '')}:
+
+ {value}
+
+ );
+ })}
+
+
+ );
+
+ return (
+
+
+
+ {counts.eventTypes[METRIC_IDS.PLACED_ORDER].toLocaleString()}
+
+
+
+
+
+ {counts.eventTypes[METRIC_IDS.SHIPPED_ORDER].toLocaleString()}
+
+
+
+
+
+ {counts.eventTypes[METRIC_IDS.ACCOUNT_CREATED].toLocaleString()}
+
+
+
+
+
+ {counts.eventTypes[METRIC_IDS.CANCELED_ORDER].toLocaleString()}
+
+
+
+
+
+ {counts.eventTypes[METRIC_IDS.PAYMENT_REFUNDED].toLocaleString()}
+
+
+
+
+
+ {counts.eventTypes[METRIC_IDS.NEW_BLOG_POST].toLocaleString()}
+
+
+
+
+
+ {/* Order Property Filters - update styling */}
+ {!error && (
+
+ {title}
+ {lastUpdate && (
+
+ Last updated {format(lastUpdate, "h:mm a")}
+
+ )}
+
+ {!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 rounded-md`}
+ >
+ 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 rounded-md`}
+ >
+ 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 rounded-md`}
+ >
+ 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 rounded-md`}
+ >
+ 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 rounded-md`}
+ >
+ 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 rounded-md`}
+ >
+ 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 rounded-md`}
+ >
+ 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 rounded-md`}
+ >
+ Owes ({counts.orderProperties.stillOwes})
+
+ )}
+
+ )}
+
+ {filteredEvents.map((event) => (
+
+ )}
+
+
+
+ {loading ? (
+ <>
+
+ {!loading && Icon && (
+
+
+
+ ) : (
+ <>
+ {title}
+
+
+
+ )}
+ + {typeof value === "number" + ? value.toLocaleString() + suffix + : value} +
+ {delta !== undefined && delta !== 0 && ( +
+ {delta > 0 ? (
+
+ )}
+
+
+
+
+
+
+
+ {error}
+
+
+
+ + Customer Service +
+
+
+
+
+ {/* Message & Response Metrics */}
+ {loading ? (
+ [...Array(7)].map((_, i) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {/* Channel Distribution */}
+
+
+
+
+ {loading ? (
+
+
+ )}
+
+
+
+ {/* Agent Performance */}
+
+
+
+
+ {loading ? (
+
+
+ )}
+
+
+
+ + Channel Distribution +
++ Agent Performance +
+
+
+ );
+
+ const formatDate = (date) =>
+ date.toLocaleDateString("en-US", {
+ weekday: "short",
+ year: "numeric",
+ month: "short",
+ day: "numeric",
+ });
+
+ const formatTimeDisplay = (date) => {
+ const hours = date.getHours();
+ const minutes = String(date.getMinutes()).padStart(2, "0");
+ const seconds = String(date.getSeconds()).padStart(2, "0");
+ const period = hours >= 12 ? "PM" : "AM";
+ const displayHours = hours % 12 || 12;
+ return `${displayHours}:${minutes}:${seconds} ${period}`;
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {forecast && (
+
+
+
+ High
+ {Math.round(weather.main.temp_max)}°F
+
+
+
+
+ Low
+ {Math.round(weather.main.temp_min)}°F
+
+
+
+
+ Humidity
+ {weather.main.humidity}%
+
+
+
+
+ Wind
+ {Math.round(weather.wind.speed)} mph
+
+
+
+
+ Sunrise
+ {formatTime(weather.sys?.sunrise)}
+
+
+
+
+ Sunset
+ {formatTime(weather.sys?.sunset)}
+
+
+
+ )}
+
+ {forecast.map((day, index) => (
+
+
+ ))}
+
+
+
+ {new Date(day.dt * 1000).toLocaleDateString('en-US', { weekday: 'short' })}
+
+ {getWeatherIcon(day.weather[0].id, new Date(day.dt * 1000), true)}
+
+
+
+ {Math.round(day.main.temp_max)}°
+
+
+ {Math.round(day.main.temp_min)}°
+
+
+
+ {day.rain?.['3h'] > 0 && (
+
+
+
+ )}
+ {day.snow?.['3h'] > 0 && (
+
+
+ )}
+ {!day.rain?.['3h'] && !day.snow?.['3h'] && (
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ + Store Status +
+
+ {weather?.main && (
+ <>
+
+
+
+
+
+
+ {weather.alerts && (
+
+
+ {weather.alerts[0].event}
+
+
+ )}
+
+
+
+
+ )}
+
+
+ {getWeatherIcon(weather.weather[0]?.id, currentTime)}
+
+
+
+ {weather.alerts && (
+ + {Math.round(weather.main.temp)}° F +
+
+
+
+
+
+ + {formatDate(currentTime)} +
+
+
+
+
+ + {formatTimeDisplay(currentTime)} +
+|
+ |
+
+ |
+
+ |
+
+ |
+
+ |
+
+ |
+
|---|---|---|---|---|---|
|
+
+
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+ {description}
+
+);
+
+// MetricCell component for displaying campaign metrics
+const MetricCell = ({
+ value,
+ count,
+ isMonetary = false,
+ showConversionRate = false,
+ totalRecipients = 0,
+ isSMS = false,
+ hideForSMS = false,
+}) => {
+ if (isSMS && hideForSMS) {
+ return (
+ N/A
+ -
+
+ {isMonetary ? formatCurrency(value) : formatRate(value, isSMS, hideForSMS)}
+
+
+ {count?.toLocaleString() || 0} {count === 1 ? "recipient" : "recipients"}
+ {showConversionRate &&
+ totalRecipients > 0 &&
+ ` (${((count / totalRecipients) * 100).toFixed(2)}%)`}
+
+
+
+
+
+
+
+
+
+
+
+ Klaviyo Campaigns
+
+
+
+
+
+
+
+
+
+
+ | + + | ++ + | ++ + | ++ + | ++ + | ++ + | +
|---|---|---|---|---|---|
|
+
+ {campaign.name?.includes("_Blog") ? (
+
+
+ {campaign.name}
+
+
+ {campaign.subject}
+
+
+ {campaign.send_time
+ ? DateTime.fromISO(campaign.send_time).toLocaleString(DateTime.DATETIME_MED)
+ : "No date"}
+
+ |
+
+
+
+
+ {Icon && (
+ {label}
+{displayValue}
+
+ {formattedValue}
+
+ {(label || sublabel) && (
+
+ {label || sublabel}
+
+ )}
+
+
+ );
+ }
+ return {name};
+};
+
+const getObjectiveAction = (campaignObjective) => {
+ const objectiveMap = {
+ OUTCOME_AWARENESS: { action_type: "impressions", label: "Impressions" },
+ OUTCOME_ENGAGEMENT: { action_type: "post_engagement", label: "Post Engagements" },
+ OUTCOME_TRAFFIC: { action_type: "link_click", label: "Link Clicks" },
+ OUTCOME_LEADS: { action_type: "lead", label: "Leads" },
+ OUTCOME_SALES: { action_type: "purchase", label: "Purchases" },
+ MESSAGES: { action_type: "messages", label: "Messages" },
+ };
+
+ return objectiveMap[campaignObjective] || { action_type: "link_click", label: "Link Clicks" };
+};
+
+const calculateBudget = (campaign) => {
+ if (campaign.daily_budget) {
+ return { value: campaign.daily_budget / 100, type: "day" };
+ }
+ if (campaign.lifetime_budget) {
+ return { value: campaign.lifetime_budget / 100, type: "lifetime" };
+ }
+
+ const adsets = campaign.adsets?.data || [];
+ const dailyTotal = adsets.reduce((sum, adset) => sum + (adset.daily_budget || 0), 0);
+ const lifetimeTotal = adsets.reduce((sum, adset) => sum + (adset.lifetime_budget || 0), 0);
+
+ if (dailyTotal > 0) return { value: dailyTotal / 100, type: "day" };
+ if (lifetimeTotal > 0) return { value: lifetimeTotal / 100, type: "lifetime" };
+
+ return { value: 0, type: "day" };
+};
+
+const processMetrics = (campaign) => {
+ const insights = campaign.insights?.data?.[0] || {};
+ const spend = parseFloat(insights.spend || 0);
+ const impressions = parseInt(insights.impressions || 0);
+ const clicks = parseInt(insights.clicks || 0);
+ const reach = parseInt(insights.reach || 0);
+ const cpc = parseFloat(insights.cpc || 0);
+ const ctr = parseFloat(insights.ctr || 0);
+ const cpm = parseFloat(insights.cpm || 0);
+ const frequency = parseFloat(insights.frequency || 0);
+
+ // Purchase value and total purchases
+ const purchaseValue = (insights.action_values || [])
+ .filter(({ action_type }) => action_type === "purchase")
+ .reduce((sum, { value }) => sum + parseFloat(value || 0), 0);
+
+ const totalPurchases = (insights.actions || [])
+ .filter(({ action_type }) => action_type === "purchase")
+ .reduce((sum, { value }) => sum + parseInt(value || 0), 0);
+
+ // Aggregate unique actions
+ const actionMap = new Map();
+ (insights.actions || []).forEach(({ action_type, value }) => {
+ const currentValue = actionMap.get(action_type) || 0;
+ actionMap.set(action_type, currentValue + parseInt(value || 0));
+ });
+
+ const actions = Array.from(actionMap.entries()).map(([action_type, value]) => ({
+ action_type,
+ value,
+ }));
+
+ // Map of cost per action
+ const costPerActionMap = new Map();
+ (insights.cost_per_action_type || []).forEach(({ action_type, value }) => {
+ costPerActionMap.set(action_type, parseFloat(value || 0));
+ });
+
+ // Total post engagements
+ const totalPostEngagements = actionMap.get("post_engagement") || 0;
+
+ return {
+ spend,
+ impressions,
+ clicks,
+ reach,
+ frequency,
+ ctr,
+ cpm,
+ cpc,
+ actions,
+ costPerActionMap,
+ purchaseValue,
+ totalPurchases,
+ totalPostEngagements,
+ };
+};
+
+const processCampaignData = (campaign) => {
+ const metrics = processMetrics(campaign);
+ const budget = calculateBudget(campaign);
+ const { action_type, label } = getObjectiveAction(campaign.objective);
+
+ // Get cost per result from costPerActionMap
+ const costPerResult = metrics.costPerActionMap.get(action_type) || 0;
+
+ return {
+ id: campaign.id,
+ name: campaign.name,
+ status: campaign.status,
+ objective: label,
+ objectiveActionType: action_type,
+ budget: budget.value,
+ budgetType: budget.type,
+ metrics: {
+ ...metrics,
+ costPerResult,
+ },
+ };
+};
+
+const SkeletonMetricCard = () => (
+
+
+
+
+
+
+
+
+
+
+
+);
+
+const MetaCampaigns = () => {
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [campaigns, setCampaigns] = useState([]);
+ const [timeframe, setTimeframe] = useState("7");
+ const [summaryMetrics, setSummaryMetrics] = useState(null);
+ const [sortConfig, setSortConfig] = useState({
+ key: "spend",
+ direction: "desc",
+ });
+
+ const handleSort = (key) => {
+ setSortConfig((prev) => ({
+ key,
+ direction: prev.key === key && prev.direction === "desc" ? "asc" : "desc",
+ }));
+ };
+
+ const computeDateRange = (timeframe) => {
+ // Create date in Eastern Time
+ const now = new Date();
+ const easternTime = new Date(
+ now.toLocaleString("en-US", { timeZone: "America/New_York" })
+ );
+ easternTime.setHours(0, 0, 0, 0); // Set to start of day
+
+ let sinceDate, untilDate;
+
+ if (timeframe === "today") {
+ // For today, both dates should be the current date in Eastern Time
+ sinceDate = untilDate = new Date(easternTime);
+ } else {
+ // For other periods, calculate the date range
+ untilDate = new Date(easternTime);
+ untilDate.setDate(untilDate.getDate() - 1); // Yesterday
+
+ sinceDate = new Date(untilDate);
+ sinceDate.setDate(sinceDate.getDate() - parseInt(timeframe) + 1);
+ }
+
+ return {
+ since: sinceDate.toISOString().split("T")[0],
+ until: untilDate.toISOString().split("T")[0],
+ };
+ };
+
+ useEffect(() => {
+ const fetchMetaAdsData = async () => {
+ try {
+ setLoading(true);
+ setError(null);
+
+ const { since, until } = computeDateRange(timeframe);
+
+ const [campaignData, accountInsights] = await Promise.all([
+ fetch(`/api/meta/campaigns?since=${since}&until=${until}`),
+ fetch(`/api/meta/account-insights?since=${since}&until=${until}`)
+ ]);
+
+ const [campaignsJson, accountJson] = await Promise.all([
+ campaignData.json(),
+ accountInsights.json()
+ ]);
+
+ // Process campaigns with the new processing logic
+ const processedCampaigns = campaignsJson.map(processCampaignData);
+ const activeCampaigns = processedCampaigns.filter(c => c.metrics.spend > 0);
+ setCampaigns(activeCampaigns);
+
+ if (activeCampaigns.length > 0) {
+ const totalSpend = activeCampaigns.reduce((sum, camp) => sum + camp.metrics.spend, 0);
+ const totalImpressions = activeCampaigns.reduce((sum, camp) => sum + camp.metrics.impressions, 0);
+ const totalReach = activeCampaigns.reduce((sum, camp) => sum + camp.metrics.reach, 0);
+ const totalPurchases = activeCampaigns.reduce((sum, camp) => sum + camp.metrics.totalPurchases, 0);
+ const totalPurchaseValue = activeCampaigns.reduce((sum, camp) => sum + camp.metrics.purchaseValue, 0);
+ const totalLinkClicks = activeCampaigns.reduce((sum, camp) => sum + camp.metrics.clicks, 0);
+ const totalPostEngagements = activeCampaigns.reduce((sum, camp) => sum + camp.metrics.totalPostEngagements, 0);
+
+ const numCampaigns = activeCampaigns.length;
+ const avgFrequency = activeCampaigns.reduce((sum, camp) => sum + camp.metrics.frequency, 0) / numCampaigns;
+ const avgCpm = activeCampaigns.reduce((sum, camp) => sum + camp.metrics.cpm, 0) / numCampaigns;
+ const avgCtr = activeCampaigns.reduce((sum, camp) => sum + camp.metrics.ctr, 0) / numCampaigns;
+ const avgCpc = activeCampaigns.reduce((sum, camp) => sum + camp.metrics.cpc, 0) / numCampaigns;
+
+ setSummaryMetrics({
+ totalSpend,
+ totalPurchaseValue,
+ totalLinkClicks,
+ totalImpressions,
+ totalReach,
+ totalPurchases,
+ avgFrequency,
+ avgCpm,
+ avgCtr,
+ avgCpc,
+ totalPostEngagements,
+ totalCampaigns: numCampaigns,
+ });
+ }
+ } catch (err) {
+ console.error("Meta Ads fetch error:", err);
+ setError(`Failed to fetch Meta Ads data: ${err.message}`);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchMetaAdsData();
+ }, [timeframe]);
+
+ // Sort campaigns
+ const sortedCampaigns = [...campaigns].sort((a, b) => {
+ const direction = sortConfig.direction === "desc" ? -1 : 1;
+
+ switch (sortConfig.key) {
+ case "date":
+ // Add date sorting using campaign ID (Meta IDs are chronological)
+ return direction * (parseInt(b.id) - parseInt(a.id));
+ case "spend":
+ return direction * ((a.metrics.spend || 0) - (b.metrics.spend || 0));
+ case "reach":
+ return direction * ((a.metrics.reach || 0) - (b.metrics.reach || 0));
+ case "impressions":
+ return direction * ((a.metrics.impressions || 0) - (b.metrics.impressions || 0));
+ case "cpm":
+ return direction * ((a.metrics.cpm || 0) - (b.metrics.cpm || 0));
+ case "ctr":
+ return direction * ((a.metrics.ctr || 0) - (b.metrics.ctr || 0));
+ case "results":
+ return direction * ((getActionValue(a, a.objectiveActionType) || 0) - (getActionValue(b, b.objectiveActionType) || 0));
+ case "value":
+ return direction * ((a.metrics.purchaseValue || 0) - (b.metrics.purchaseValue || 0));
+ case "engagements":
+ return direction * ((a.metrics.totalPostEngagements || 0) - (b.metrics.totalPostEngagements || 0));
+ default:
+ return 0;
+ }
+ });
+
+ if (loading) {
+ return (
+ |
+ |
+ {[...Array(8)].map((_, i) => (
+
+ |
+ ))}
+
|---|---|
|
+
+
+
+
+ |
+ {[...Array(8)].map((_, colIndex) => (
+
+
+
+ |
+ ))}
+
+
+ Meta Ads Performance
+
+
+
+
+ {[...Array(12)].map((_, i) => (
+
+
+ {error}
+
+
+
+ Meta Ads Performance
+
+
+
+
+ {[
+ {
+ label: "Active Campaigns",
+ value: summaryMetrics?.totalCampaigns,
+ options: { icon: Target, iconColor: "text-purple-500" },
+ },
+ {
+ label: "Total Spend",
+ value: summaryMetrics?.totalSpend,
+ options: { isMonetary: true, decimalPlaces: 0, icon: DollarSign, iconColor: "text-green-500" },
+ },
+ {
+ label: "Total Reach",
+ value: summaryMetrics?.totalReach,
+ options: { icon: Users, iconColor: "text-blue-500" },
+ },
+ {
+ label: "Total Impressions",
+ value: summaryMetrics?.totalImpressions,
+ options: { icon: Eye, iconColor: "text-indigo-500" },
+ },
+ {
+ label: "Avg Frequency",
+ value: summaryMetrics?.avgFrequency,
+ options: { decimalPlaces: 2, icon: Repeat, iconColor: "text-cyan-500" },
+ },
+ {
+ label: "Total Engagements",
+ value: summaryMetrics?.totalPostEngagements,
+ options: { icon: MessageCircle, iconColor: "text-pink-500" },
+ },
+ {
+ label: "Avg CPM",
+ value: summaryMetrics?.avgCpm,
+ options: { isMonetary: true, decimalPlaces: 2, icon: DollarSign, iconColor: "text-emerald-500" },
+ },
+ {
+ label: "Avg CTR",
+ value: summaryMetrics?.avgCtr,
+ options: { isPercentage: true, decimalPlaces: 2, icon: BarChart, iconColor: "text-orange-500" },
+ },
+ {
+ label: "Avg CPC",
+ value: summaryMetrics?.avgCpc,
+ options: { isMonetary: true, decimalPlaces: 2, icon: MousePointer, iconColor: "text-rose-500" },
+ },
+ {
+ label: "Total Link Clicks",
+ value: summaryMetrics?.totalLinkClicks,
+ options: { icon: MousePointer, iconColor: "text-amber-500" },
+ },
+ {
+ label: "Total Purchases",
+ value: summaryMetrics?.totalPurchases,
+ options: { icon: ShoppingCart, iconColor: "text-teal-500" },
+ },
+ {
+ label: "Purchase Value",
+ value: summaryMetrics?.totalPurchaseValue,
+ options: { isMonetary: true, decimalPlaces: 0, icon: DollarSign, iconColor: "text-lime-500" },
+ },
+ ].map((card) => (
+
+
+ {summaryCard(card.label, card.value, card.options)}
+
+ ))}
+ | + + | ++ + | ++ + | ++ + | ++ + | ++ + | ++ + | ++ + | ++ + | +
|---|---|---|---|---|---|---|---|---|
|
+
+
+
+
+
+ {campaign.objective}
+
+ |
+
+
+ {[...Array(6)].map((_, i) => (
+
+
+
+
+
+
+ ))}
+
+);
+
+// Empty State Component
+const EmptyState = () => (
+
+
+
+
+
+
+
+
+
+
+
+ + No recent activity +
+
+
+ {eventType.label}
+
+ {event.datetime && (
+
+ {format(new Date(event.datetime), "h:mm a")}
+
+ )}
+
+
+
+
+
+ {details.ShippingName}
+
+
+
+ {(details.IsOnHold || details.OnHoldReleased || details.StillOwes || details.LocalPickup || details.HasPreorder || details.HasNotions || details.OnlyDigitalGC || details.HasDigitalGC || details.HasDigiItem || details.OnlyDigiItem) && (
+
+ #{details.OrderId} • {formatCurrency(details.TotalAmount)}
+
+
+ {details.IsOnHold && (
+
+ On Hold
+
+ )}
+ {details.OnHoldReleased && (
+
+ Hold Released
+
+ )}
+ {details.StillOwes && (
+
+ Owes
+
+ )}
+ {details.LocalPickup && (
+
+ Local
+
+ )}
+ {details.HasPreorder && (
+
+ Pre-order
+
+ )}
+ {details.HasNotions && (
+
+ Notions
+
+ )}
+ {(details.OnlyDigitalGC || details.HasDigitalGC) && (
+
+ eGift Card
+
+ )}
+ {(details.HasDigiItem || details.OnlyDigiItem) && (
+
+ Digital
+
+ )}
+
+ )}
+
+ )}
+
+ {event.metric_id === METRIC_IDS.SHIPPED_ORDER && (
+ <>
+
+ {details.ShippingName}
+
+
+
+ {event.event_properties?.ShippedBy && (
+
+ #{details.OrderId} • {formatShipMethodSimple(details.ShipMethod)}
+
+
+ Shipped by {event.event_properties.ShippedBy}
+
+ )}
+
+ )}
+
+ {event.metric_id === METRIC_IDS.ACCOUNT_CREATED && (
+ <>
+
+ {details.FirstName} {details.LastName}
+
+
+ {details.EmailAddress}
+
+
+ )}
+
+ {event.metric_id === METRIC_IDS.CANCELED_ORDER && (
+ <>
+
+ {details.ShippingName}
+
+
+
+
+ #{details.OrderId} • {formatCurrency(details.TotalAmount)}
+
+
+ {details.CancelReason}
+
+
+ )}
+
+ {event.metric_id === METRIC_IDS.PAYMENT_REFUNDED && (
+ <>
+
+ {details.ShippingName}
+
+
+
+
+ #{details.FromOrder} • {formatCurrency(details.PaymentAmount)}
+
+
+ via {details.PaymentName}
+
+
+ )}
+
+ {event.metric_id === METRIC_IDS.NEW_BLOG_POST && (
+ <>
+
+ {details.title}
+
+
+ {details.description}
+
+
+ )}
+
+
+
+
+ );
+};
+
+export default MiniEventFeed;
+
+// Helper Functions
+const formatCurrency = (amount) => {
+ // Convert to number if it's a string
+ const num = typeof amount === "string" ? parseFloat(amount) : amount;
+ // Handle negative numbers
+ const absNum = Math.abs(num);
+ // Format to 2 decimal places and add negative sign if needed
+ return `${num < 0 ? "-" : ""}$${absNum.toFixed(2)}`;
+};
+
+const formatShipMethodSimple = (method) => {
+ if (!method) return "Digital";
+ if (method.includes("usps")) return "USPS";
+ if (method.includes("fedex")) return "FedEx";
+ if (method.includes("ups")) return "UPS";
+ return "Standard";
+};
\ No newline at end of file
diff --git a/inventory/src/components/dashboard/MiniRealtimeAnalytics.jsx b/inventory/src/components/dashboard/MiniRealtimeAnalytics.jsx
new file mode 100644
index 0000000..64ed37f
--- /dev/null
+++ b/inventory/src/components/dashboard/MiniRealtimeAnalytics.jsx
@@ -0,0 +1,256 @@
+import React, { useState, useEffect } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/dashboard/ui/card";
+import {
+ BarChart,
+ Bar,
+ XAxis,
+ YAxis,
+ Tooltip,
+ ResponsiveContainer,
+} from "recharts";
+import { AlertTriangle, Users, Activity } from "lucide-react";
+import { Alert, AlertDescription } from "@/components/dashboard/ui/alert";
+import { format } from "date-fns";
+import {
+ summaryCard,
+ SkeletonSummaryCard,
+ SkeletonBarChart,
+ processBasicData,
+} from "./RealtimeAnalytics";
+import { Skeleton } from "@/components/dashboard/ui/skeleton";
+
+const SkeletonCard = ({ colorScheme = "sky" }) => (
+
+ {showLeftArrow && (
+
+ )}
+ {showRightArrow && (
+
+ )}
+
+
+
+
+ {loading && !events.length ? (
+
+ Error
+
+ Failed to load event feed: {error}
+
+
+ ) : !events || events.length === 0 ? (
+
+
+
+ ) : (
+ [...events].reverse().map((event) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+ {/* Grid lines */}
+ {[...Array(5)].map((_, i) => (
+
+ ))}
+ {/* Y-axis labels */}
+
+
+ {[...Array(5)].map((_, i) => (
+
+ {/* X-axis labels */}
+
+ {[...Array(6)].map((_, i) => (
+
+ {/* Bars */}
+
+ {[...Array(24)].map((_, i) => (
+
+ ))}
+
+
+
+
+
+
+
+ );
+ };
+
+ return renderContent();
+};
+
+export default MiniRealtimeAnalytics;
\ No newline at end of file
diff --git a/inventory/src/components/dashboard/MiniSalesChart.jsx b/inventory/src/components/dashboard/MiniSalesChart.jsx
new file mode 100644
index 0000000..7c9f27c
--- /dev/null
+++ b/inventory/src/components/dashboard/MiniSalesChart.jsx
@@ -0,0 +1,487 @@
+import React, { useState, useEffect, useCallback, memo } from "react";
+import axios from "axios";
+import { acotService } from "@/services/dashboard/acotService";
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from "@/components/dashboard/ui/card";
+import {
+ LineChart,
+ Line,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ ResponsiveContainer,
+} from "recharts";
+import { DateTime } from "luxon";
+import { Skeleton } from "@/components/dashboard/ui/skeleton";
+import { Alert, AlertDescription, AlertTitle } from "@/components/dashboard/ui/alert";
+import { AlertCircle, TrendingUp, DollarSign, ShoppingCart, Truck, PiggyBank, ArrowUp,ArrowDown, Banknote, Package } from "lucide-react";
+import { formatCurrency, CustomTooltip, processData, StatCard } from "./SalesChart.jsx";
+
+const SkeletonChart = () => (
+
+ {summaryCard(
+ "Last 30 Minutes",
+ "Active users",
+ basicData.last30MinUsers,
+ {
+ colorClass: "text-sky-200",
+ titleClass: "text-sky-100 font-bold text-md",
+ descriptionClass: "pt-2 text-sky-200 text-md font-semibold",
+ background: "h-[150px] pt-2 bg-gradient-to-br from-sky-900 to-sky-800",
+ icon: Users,
+ iconColor: "text-sky-900",
+ iconBackground: "bg-sky-300"
+ }
+ )}
+ {summaryCard(
+ "Last 5 Minutes",
+ "Active users",
+ basicData.last5MinUsers,
+ {
+ colorClass: "text-sky-200",
+ titleClass: "text-sky-100 font-bold text-md",
+ descriptionClass: "pt-2 text-sky-200 text-md font-semibold",
+ background: "h-[150px] pt-2 bg-gradient-to-br from-sky-900 to-sky-800",
+ icon: Activity,
+ iconColor: "text-sky-900",
+ iconBackground: "bg-sky-300"
+ }
+ )}
+
+
+
+
+
+ value + "m"}
+ className="text-xs"
+ tick={{ fill: "#e0f2fe" }}
+ />
+ {
+ if (active && payload && payload.length) {
+ return (
+
+
+
+
+ );
+ }
+ return null;
+ }}
+ />
+
+
+
+ + {payload[0].payload.timestamp} +
+
+
+ Active Users:
+
+
+ {payload[0].value}
+
+
+
+
+);
+
+const MiniStatCard = memo(({
+ title,
+ value,
+ icon: Icon,
+ colorClass,
+ iconColor,
+ iconBackground,
+ background,
+ previousValue,
+ trend,
+ trendValue,
+ onClick,
+ active = true,
+ titleClass = "text-sm font-bold text-gray-100",
+ descriptionClass = "text-sm font-semibold text-gray-200"
+}) => (
+
+ {/* Grid lines */}
+ {[...Array(5)].map((_, i) => (
+
+ ))}
+ {/* Y-axis labels */}
+
+
+ {[...Array(5)].map((_, i) => (
+
+ {/* X-axis labels */}
+
+ {[...Array(6)].map((_, i) => (
+
+ {/* Chart lines */}
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+ {value}
+
+
+ Prev: {previousValue}
+ {trend && (
+
+ {trend === "up" ? (
+
+
+
+
+
+
+
+
+
+
+
+ {/* Stat Cards */}
+
+
+
+
+
+ );
+ }
+
+ return (
+
+
+
+ {/* Chart Card */}
+
+ {/* Stat Cards */}
+
+
+
+
+
+ );
+};
+
+export default MiniSalesChart;
\ No newline at end of file
diff --git a/inventory/src/components/dashboard/MiniStatCards.jsx b/inventory/src/components/dashboard/MiniStatCards.jsx
new file mode 100644
index 0000000..e22ea66
--- /dev/null
+++ b/inventory/src/components/dashboard/MiniStatCards.jsx
@@ -0,0 +1,747 @@
+import React, { useState, useEffect, useCallback, memo } from "react";
+import axios from "axios";
+import { acotService } from "@/services/dashboard/acotService";
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from "@/components/dashboard/ui/card";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/dashboard/ui/select";
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/dashboard/ui/dialog";
+import { DateTime } from "luxon";
+import { TIME_RANGES } from "@/lib/dashboard/constants";
+import { Alert, AlertDescription, AlertTitle } from "@/components/dashboard/ui/alert";
+import {
+ DollarSign,
+ ShoppingCart,
+ Package,
+ AlertCircle,
+ CircleDollarSign,
+ Loader2,
+} from "lucide-react";
+import { Skeleton } from "@/components/dashboard/ui/skeleton";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger,
+ TooltipProvider,
+} from "@/components/dashboard/ui/tooltip";
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@/components/dashboard/ui/table";
+
+// Import the detail view components and utilities from StatCards
+import {
+ RevenueDetails,
+ OrdersDetails,
+ AverageOrderDetails,
+ ShippingDetails,
+ StatCard,
+ DetailDialog,
+ formatCurrency,
+ formatPercentage,
+ SkeletonCard,
+} from "./StatCards";
+
+// Mini skeleton components
+const MiniSkeletonChart = ({ type = "line" }) => (
+
+ {loading ? (
+ <>
+ = summaryStats.prevRevenue ? "up" : "down")
+ : (summaryStats.totalRevenue >= summaryStats.prevRevenue ? "up" : "down")
+ }
+ trendValue={
+ summaryStats.periodProgress < 100
+ ? `${Math.abs(Math.round(((projection?.projectedRevenue || summaryStats.totalRevenue) - summaryStats.prevRevenue) / summaryStats.prevRevenue * 100))}%`
+ : `${Math.abs(Math.round(((summaryStats.totalRevenue - summaryStats.prevRevenue) / summaryStats.prevRevenue) * 100))}%`
+ }
+ colorClass="text-emerald-300"
+ titleClass="text-emerald-300 font-bold text-md"
+ descriptionClass="text-emerald-300 text-md font-semibold pb-1"
+ icon={PiggyBank}
+ iconColor="text-emerald-900"
+ iconBackground="bg-emerald-300"
+ onClick={() => toggleMetric('revenue')}
+ active={visibleMetrics.revenue}
+ />
+ = summaryStats.prevOrders ? "up" : "down")
+ : (summaryStats.totalOrders >= summaryStats.prevOrders ? "up" : "down")
+ }
+ trendValue={
+ summaryStats.periodProgress < 100
+ ? `${Math.abs(Math.round(((Math.round(summaryStats.totalOrders * (100 / summaryStats.periodProgress))) - summaryStats.prevOrders) / summaryStats.prevOrders * 100))}%`
+ : `${Math.abs(Math.round(((summaryStats.totalOrders - summaryStats.prevOrders) / summaryStats.prevOrders) * 100))}%`
+ }
+ colorClass="text-blue-300"
+ titleClass="text-blue-300 font-bold text-md"
+ descriptionClass="text-blue-300 text-md font-semibold pb-1"
+ icon={Truck}
+ iconColor="text-blue-900"
+ iconBackground="bg-blue-300"
+ onClick={() => toggleMetric('orders')}
+ active={visibleMetrics.orders}
+ />
+
+ )}
+
+
+ {/* Chart Card */}
+
+ {loading ? (
+
+
+ formatCurrency(value, false)}
+ className="text-xs"
+ tick={{ fill: "#f5f5f4" }}
+ />
+ )}
+ {visibleMetrics.orders && (
+ {
+ if (active && payload && payload.length) {
+ const timestamp = new Date(payload[0].payload.timestamp);
+ return (
+
+
+
+
+ );
+ }
+ return null;
+ }}
+ />
+ {visibleMetrics.revenue && (
+
+
+ )}
+
+
+ {/* Grid lines */}
+ {[...Array(5)].map((_, i) => (
+
+ ))}
+ {/* Y-axis labels */}
+
+ ) : (
+
+ {[...Array(5)].map((_, i) => (
+
+ {/* X-axis labels */}
+
+ {[...Array(6)].map((_, i) => (
+
+ {/* Chart lines */}
+
+
+
+
+
+ + {timestamp.toLocaleDateString([], { + weekday: "short", + month: "short", + day: "numeric" + })} +
+ {payload + .filter(entry => visibleMetrics[entry.dataKey]) + .map((entry, index) => ( +
+
+ {entry.name}:
+
+
+ {entry.dataKey === 'revenue'
+ ? formatCurrency(entry.value)
+ : entry.value.toLocaleString()}
+
+
+ ))}
+
+
+);
+
+const MiniSkeletonTable = ({ rows = 8, colorScheme = "orange" }) => (
+
+ {/* Grid lines */}
+ {[...Array(5)].map((_, i) => (
+
+ ))}
+ {/* Y-axis labels */}
+
+
+ {[...Array(5)].map((_, i) => (
+
+ {/* X-axis labels */}
+
+ {[...Array(6)].map((_, i) => (
+
+ {type === "bar" ? (
+
+ {[...Array(24)].map((_, i) => (
+
+ ))}
+
+ ) : (
+
+
+ )}
+
+
+
+
+
+
+
+);
+
+const MiniStatCards = ({
+ timeRange: initialTimeRange = "today",
+ startDate,
+ endDate,
+ title = "Quick Stats",
+ description = "",
+ compact = false,
+}) => {
+ const [stats, setStats] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [lastUpdate, setLastUpdate] = useState(null);
+ const [timeRange, setTimeRange] = useState(initialTimeRange);
+ const [selectedMetric, setSelectedMetric] = useState(null);
+ const [detailDataLoading, setDetailDataLoading] = useState({});
+ const [detailData, setDetailData] = useState({});
+ const [projection, setProjection] = useState(null);
+ const [projectionLoading, setProjectionLoading] = useState(false);
+
+ // Reuse the trend calculation functions
+ const calculateTrend = useCallback((current, previous) => {
+ if (!current || !previous) return null;
+ const trend = current >= previous ? "up" : "down";
+ const diff = Math.abs(current - previous);
+ const percentage = (diff / previous) * 100;
+
+ return {
+ trend,
+ value: percentage,
+ current,
+ previous,
+ };
+ }, []);
+
+ const calculateRevenueTrend = useCallback(() => {
+ if (!stats?.prevPeriodRevenue && stats?.prevPeriodRevenue !== 0) return null;
+
+ // If period is complete, use actual revenue
+ // If period is incomplete, use smart projection when available, fallback to simple projection
+ const currentRevenue = stats.periodProgress < 100
+ ? (projection?.projectedRevenue || stats.projectedRevenue)
+ : stats.revenue;
+ const prevRevenue = stats.prevPeriodRevenue; // Previous period's total revenue
+
+ console.log('[MiniStatCards RevenueTrend Debug]', {
+ periodProgress: stats.periodProgress,
+ currentRevenue,
+ smartProjection: projection?.projectedRevenue,
+ simpleProjection: stats.projectedRevenue,
+ actualRevenue: stats.revenue,
+ prevRevenue,
+ isProjected: stats.periodProgress < 100
+ });
+
+ if (!currentRevenue || !prevRevenue) return null;
+
+ // Calculate absolute difference percentage
+ const trend = currentRevenue >= prevRevenue ? "up" : "down";
+ const diff = Math.abs(currentRevenue - prevRevenue);
+ const percentage = (diff / prevRevenue) * 100;
+
+ console.log('[MiniStatCards RevenueTrend Result]', {
+ trend,
+ percentage,
+ calculation: `(|${currentRevenue} - ${prevRevenue}| / ${prevRevenue}) * 100 = ${percentage}%`
+ });
+
+ return {
+ trend,
+ value: percentage,
+ current: currentRevenue,
+ previous: prevRevenue,
+ };
+ }, [stats, projection]);
+
+ const calculateOrderTrend = useCallback(() => {
+ if (!stats?.prevPeriodOrders) return null;
+ return calculateTrend(stats.orderCount, stats.prevPeriodOrders);
+ }, [stats, calculateTrend]);
+
+ const calculateAOVTrend = useCallback(() => {
+ if (!stats?.prevPeriodAOV) return null;
+ return calculateTrend(stats.averageOrderValue, stats.prevPeriodAOV);
+ }, [stats, calculateTrend]);
+
+ // Initial load effect
+ useEffect(() => {
+ let isMounted = true;
+
+ const loadData = async () => {
+ try {
+ setLoading(true);
+ setStats(null);
+
+ const params =
+ timeRange === "custom" ? { startDate, endDate } : { timeRange };
+ const response = await acotService.getStats(params);
+
+ if (!isMounted) return;
+
+ setStats(response.stats);
+ setLastUpdate(DateTime.now().setZone("America/New_York"));
+ setError(null);
+ } catch (error) {
+ console.error("Error loading data:", error);
+ if (isMounted) {
+ setError(error.message);
+ }
+ } finally {
+ if (isMounted) {
+ setLoading(false);
+ }
+ }
+ };
+
+ loadData();
+ return () => {
+ isMounted = false;
+ };
+ }, [timeRange, startDate, endDate]);
+
+ // Load smart projection separately
+ useEffect(() => {
+ let isMounted = true;
+
+ const loadProjection = async () => {
+ if (!stats?.periodProgress || stats.periodProgress >= 100) return;
+
+ try {
+ setProjectionLoading(true);
+ const params =
+ timeRange === "custom" ? { startDate, endDate } : { timeRange };
+ const response = await acotService.getProjection(params);
+
+ if (!isMounted) return;
+ setProjection(response);
+ } catch (error) {
+ console.error("Error loading projection:", error);
+ } finally {
+ if (isMounted) {
+ setProjectionLoading(false);
+ }
+ }
+ };
+
+ loadProjection();
+ return () => {
+ isMounted = false;
+ };
+ }, [timeRange, startDate, endDate, stats?.periodProgress]);
+
+ // Auto-refresh for 'today' view
+ useEffect(() => {
+ if (timeRange !== "today") return;
+
+ const interval = setInterval(async () => {
+ try {
+ const [statsResponse, projectionResponse] = await Promise.all([
+ acotService.getStats({ timeRange: "today" }),
+ acotService.getProjection({ timeRange: "today" }),
+ ]);
+
+ setStats(statsResponse.stats);
+ setProjection(projectionResponse);
+ setLastUpdate(DateTime.now().setZone("America/New_York"));
+ } catch (error) {
+ console.error("Error auto-refreshing stats:", error);
+ }
+ }, 60000);
+
+ return () => clearInterval(interval);
+ }, [timeRange]);
+
+ // Add function to fetch detail data
+ const fetchDetailData = useCallback(
+ async (metric) => {
+ if (detailData[metric]) return;
+
+ setDetailDataLoading((prev) => ({ ...prev, [metric]: true }));
+ try {
+ const response = await acotService.getStatsDetails({
+ timeRange: "last30days",
+ metric,
+ daily: true,
+ });
+
+ setDetailData((prev) => ({ ...prev, [metric]: response.stats }));
+ } catch (error) {
+ console.error(`Error fetching detail data for ${metric}:`, error);
+ } finally {
+ setDetailDataLoading((prev) => ({ ...prev, [metric]: false }));
+ }
+ },
+ [detailData]
+ );
+
+ // Add effect to load detail data when metric is selected
+ useEffect(() => {
+ if (selectedMetric) {
+ fetchDetailData(selectedMetric);
+ }
+ }, [selectedMetric, fetchDetailData]);
+
+ // Add preload effect with throttling
+ useEffect(() => {
+ // Preload detail data with throttling to avoid overwhelming the server
+ const preloadData = async () => {
+ const metrics = ["revenue", "orders", "average_order", "shipping"];
+ for (const metric of metrics) {
+ try {
+ await fetchDetailData(metric);
+ // Small delay between requests
+ await new Promise(resolve => setTimeout(resolve, 25));
+ } catch (error) {
+ console.error(`Error preloading ${metric}:`, error);
+ }
+ }
+ };
+
+ preloadData();
+ }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+ if (loading && !stats) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Proj:
+ {projectionLoading ? (
+
+ ) : null
+ }
+ progress={stats?.periodProgress < 100 ? stats.periodProgress : undefined}
+ trend={projectionLoading && stats?.periodProgress < 100 ? undefined : revenueTrend?.trend}
+ trendValue={
+ projectionLoading && stats?.periodProgress < 100 ? (
+
+
+ ) : (
+ formatCurrency(
+ projection?.projectedRevenue || stats.projectedRevenue
+ )
+ )}
+
+
+ ) : revenueTrend?.value ? (
+ formatPercentage(revenueTrend.value)
+ ) : null
+ }
+ colorClass="text-emerald-200"
+ titleClass="text-emerald-100 font-bold text-md"
+ descriptionClass="text-emerald-200 text-md font-semibold"
+ icon={DollarSign}
+ iconColor="text-emerald-900"
+ iconBackground="bg-emerald-300"
+ onDetailsClick={() => setSelectedMetric("revenue")}
+ isLoading={loading || !stats}
+ variant="mini"
+ background="h-[150px] bg-gradient-to-br from-emerald-900 to-emerald-800"
+ />
+
+
+
+
+
+
+
+ );
+};
+
+export default Navigation;
diff --git a/inventory/src/components/dashboard/PinProtection.jsx b/inventory/src/components/dashboard/PinProtection.jsx
new file mode 100644
index 0000000..f911717
--- /dev/null
+++ b/inventory/src/components/dashboard/PinProtection.jsx
@@ -0,0 +1,203 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import {
+ InputOTP,
+ InputOTPGroup,
+ InputOTPSlot,
+} from "@/components/dashboard/ui/input-otp"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/dashboard/ui/card";
+import { Button } from "@/components/dashboard/ui/button";
+import { Lock, Delete } from "lucide-react";
+import { useToast } from "@/hooks/use-toast";
+
+const MAX_ATTEMPTS = 3;
+const LOCKOUT_DURATION = 5 * 60 * 1000; // 5 minutes in milliseconds
+
+const PinProtection = ({ onSuccess }) => {
+ const [pin, setPin] = useState("");
+ const [attempts, setAttempts] = useState(() => {
+ return parseInt(localStorage.getItem('pinAttempts') || '0');
+ });
+ const [lockoutTime, setLockoutTime] = useState(() => {
+ const lastAttempt = localStorage.getItem('lastAttemptTime');
+ if (!lastAttempt) return 0;
+
+ const timeSinceLastAttempt = Date.now() - parseInt(lastAttempt);
+ if (timeSinceLastAttempt < LOCKOUT_DURATION) {
+ return LOCKOUT_DURATION - timeSinceLastAttempt;
+ }
+ return 0;
+ });
+ const { toast } = useToast();
+
+ useEffect(() => {
+ let timer;
+ if (lockoutTime > 0) {
+ timer = setInterval(() => {
+ setLockoutTime(prev => {
+ const newTime = prev - 1000;
+ if (newTime <= 0) {
+ localStorage.removeItem('pinAttempts');
+ localStorage.removeItem('lastAttemptTime');
+ return 0;
+ }
+ return newTime;
+ });
+ }, 1000);
+ }
+ return () => clearInterval(timer);
+ }, [lockoutTime]);
+
+ const handleComplete = useCallback((value) => {
+ if (lockoutTime > 0) {
+ return;
+ }
+
+ const newAttempts = attempts + 1;
+ setAttempts(newAttempts);
+ localStorage.setItem('pinAttempts', newAttempts.toString());
+ localStorage.setItem('lastAttemptTime', Date.now().toString());
+
+ if (newAttempts >= MAX_ATTEMPTS) {
+ setLockoutTime(LOCKOUT_DURATION);
+ toast({
+ title: "Too many attempts",
+ description: `Please try again in ${Math.ceil(LOCKOUT_DURATION / 60000)} minutes`,
+ variant: "destructive",
+ });
+ setPin("");
+ return;
+ }
+
+ if (value === "123456") {
+ toast({
+ title: "Success",
+ description: "PIN accepted",
+ });
+ // Reset attempts on success
+ setAttempts(0);
+ localStorage.removeItem('pinAttempts');
+ localStorage.removeItem('lastAttemptTime');
+ onSuccess();
+ } else {
+ toast({
+ title: "Error",
+ description: `Incorrect PIN. ${MAX_ATTEMPTS - newAttempts} attempts remaining`,
+ variant: "destructive",
+ });
+ setPin("");
+ }
+ }, [attempts, lockoutTime, onSuccess, toast]);
+
+ const handleKeyPress = (value) => {
+ if (pin.length < 6) {
+ const newPin = pin + value;
+ setPin(newPin);
+ if (newPin.length === 6) {
+ handleComplete(newPin);
+ }
+ }
+ };
+
+ const handleDelete = () => {
+ setPin(prev => prev.slice(0, -1));
+ };
+
+ const renderKeypad = () => {
+ const keys = [
+ [1, 2, 3],
+ [4, 5, 6],
+ [7, 8, 9],
+ ['clear', 0, 'delete']
+ ];
+
+ return keys.map((row, rowIndex) => (
+
+
+
+
+
+ {sections.map(({ id, label, responsiveIds }) => (
+
+ ))}
+
+
+
+
+
+ {row.map((key, index) => {
+ if (key === 'delete') {
+ return (
+
+ );
+ }
+ if (key === 'clear') {
+ return (
+
+ );
+ }
+ return (
+
+ );
+ })}
+
+ ));
+ };
+
+ // Create masked version of PIN
+ const maskedPin = pin.replace(/./g, '•');
+
+ return (
+
+
+
+ Enter PIN
+
+ {lockoutTime > 0 ? (
+ `Too many attempts. Try again in ${Math.ceil(lockoutTime / 60000)} minutes`
+ ) : (
+ "Enter your PIN to access the display"
+ )}
+
+
+
+
+
+
+ );
+};
+
+export default PinProtection;
\ No newline at end of file
diff --git a/inventory/src/components/dashboard/ProductGrid.jsx b/inventory/src/components/dashboard/ProductGrid.jsx
new file mode 100644
index 0000000..0ebdc2d
--- /dev/null
+++ b/inventory/src/components/dashboard/ProductGrid.jsx
@@ -0,0 +1,401 @@
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import { acotService } from "@/services/dashboard/acotService";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/dashboard/ui/card";
+import { ScrollArea } from "@/components/dashboard/ui/scroll-area";
+import { Loader2, ArrowUpDown, AlertCircle, Package, Settings2, Search, X } from "lucide-react";
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@/components/dashboard/ui/table";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/dashboard/ui/select";
+import { Input } from "@/components/dashboard/ui/input";
+import { Button } from "@/components/dashboard/ui/button";
+import { TIME_RANGES } from "@/lib/dashboard/constants";
+import { cn } from "@/lib/utils";
+import { Skeleton } from "@/components/dashboard/ui/skeleton";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "@/components/dashboard/ui/tooltip";
+import { Alert, AlertDescription, AlertTitle } from "@/components/dashboard/ui/alert";
+
+const ProductGrid = ({
+ timeRange = "today",
+ onTimeRangeChange,
+ title = "Top Products",
+ description
+}) => {
+ const [products, setProducts] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [selectedTimeRange, setSelectedTimeRange] = useState(timeRange);
+ const [sorting, setSorting] = useState({
+ column: "totalQuantity",
+ direction: "desc",
+ });
+ const [searchQuery, setSearchQuery] = useState("");
+ const [isSearchVisible, setIsSearchVisible] = useState(false);
+
+ useEffect(() => {
+ fetchProducts();
+ }, [selectedTimeRange]);
+
+ const fetchProducts = async () => {
+ try {
+ setLoading(true);
+ setError(null);
+
+ const response = await acotService.getProducts({ timeRange: selectedTimeRange });
+ setProducts(response.stats.products.list || []);
+ } catch (error) {
+ console.error("Error fetching products:", error);
+ setError(error.message);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const handleTimeRangeChange = (value) => {
+ setSelectedTimeRange(value);
+ if (onTimeRangeChange) {
+ onTimeRangeChange(value);
+ }
+ };
+
+ const handleSort = (column) => {
+ setSorting((prev) => ({
+ column,
+ direction:
+ prev.column === column && prev.direction === "desc" ? "asc" : "desc",
+ }));
+ };
+
+ const sortedProducts = [...products].sort((a, b) => {
+ const direction = sorting.direction === "desc" ? -1 : 1;
+ const aValue = a[sorting.column];
+ const bValue = b[sorting.column];
+
+ if (typeof aValue === "number") {
+ return (aValue - bValue) * direction;
+ }
+ return String(aValue).localeCompare(String(bValue)) * direction;
+ });
+
+ const filteredProducts = sortedProducts.filter(product =>
+ product.name.toLowerCase().includes(searchQuery.toLowerCase())
+ );
+
+ const SkeletonProduct = () => (
+
+
+
+
+
+ {[0,1,2,3,4,5].map((index) => (
+
+
+
+
+
+ {renderKeypad()}
+
+
+
+
+
+ );
+
+ if (loading) {
+ return (
+
+
+
+
+
+ | + | + + | ++ + | ++ + | ++ + | +
|---|
+
+
+
+
+
+
+ {description && (
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ {isSearchVisible && !error && (
+
+ {title}
+ {description && (
+ {description}
+ )}
+
+
+ {!error && (
+
+ )}
+
+
+
+
+ )}
+
+ {error ? (
+
+ Error
+
+ Failed to load products: {error}
+
+
+ ) : !products?.length ? (
+
+
+
+ ) : (
+ No product data available
+Try selecting a different time range
+
+
+ )}
+
+
+
+
+
+ | + | + + | ++ + | ++ + | ++ + | +
|---|---|---|---|---|
|
+ {product.ImgThumb && (
+ |
+
+
+
+ {product.name} + |
+ + {product.totalQuantity} + | ++ ${product.totalRevenue.toFixed(2)} + | ++ {product.orderCount} + | +
+
+
+ )}
+
+
+
+
+
+ {value.toLocaleString()}
+
+
+ {sublabel}
+
+
+
+);
+
+export const SkeletonTable = () => (
+
+ {/* Grid lines */}
+ {[...Array(5)].map((_, i) => (
+
+ ))}
+ {/* Y-axis labels */}
+
+
+ {[...Array(5)].map((_, i) => (
+
+ {/* X-axis labels */}
+
+ {[...Array(6)].map((_, i) => (
+
+ {/* Bars */}
+
+ {[...Array(30)].map((_, i) => (
+
+ ))}
+
+
+
+
+
+);
+
+export const processBasicData = (data) => {
+ const last30MinUsers = parseInt(
+ data.userResponse?.rows?.[0]?.metricValues?.[0]?.value || 0
+ );
+ const last5MinUsers = parseInt(
+ data.fiveMinResponse?.rows?.[0]?.metricValues?.[0]?.value || 0
+ );
+
+ const byMinute = Array.from({ length: 30 }, (_, i) => {
+ const matchingRow = data.timeSeriesResponse?.rows?.find(
+ (row) => parseInt(row.dimensionValues[0].value) === i
+ );
+ const users = matchingRow
+ ? parseInt(matchingRow.metricValues[0].value)
+ : 0;
+ const timestamp = new Date(Date.now() - i * 60000);
+ return {
+ minute: -i,
+ users,
+ timestamp: timestamp.toLocaleTimeString([], {
+ hour: "2-digit",
+ minute: "2-digit",
+ }),
+ };
+ }).reverse();
+
+ const tokenQuota = data.quotaInfo
+ ? {
+ projectHourly: data.quotaInfo.projectHourly || {},
+ daily: data.quotaInfo.daily || {},
+ serverErrors: data.quotaInfo.serverErrors || {},
+ thresholdedRequests: data.quotaInfo.thresholdedRequests || {},
+ }
+ : null;
+
+ return {
+ last30MinUsers,
+ last5MinUsers,
+ byMinute,
+ tokenQuota,
+ lastUpdated: new Date().toISOString(),
+ };
+};
+
+export const QuotaInfo = ({ tokenQuota }) => {
+ if (!tokenQuota || typeof tokenQuota !== "object") return null;
+
+ const {
+ projectHourly = {},
+ daily = {},
+ serverErrors = {},
+ thresholdedRequests = {},
+ } = tokenQuota;
+
+ const {
+ remaining: projectHourlyRemaining = 0,
+ consumed: projectHourlyConsumed = 0,
+ } = projectHourly;
+
+ const { remaining: dailyRemaining = 0, consumed: dailyConsumed = 0 } = daily;
+
+ const { remaining: errorsRemaining = 10, consumed: errorsConsumed = 0 } =
+ serverErrors;
+
+ const {
+ remaining: thresholdRemaining = 120,
+ consumed: thresholdConsumed = 0,
+ } = thresholdedRequests;
+
+ const hourlyPercentage = ((projectHourlyRemaining / 14000) * 100).toFixed(1);
+ const dailyPercentage = ((dailyRemaining / 200000) * 100).toFixed(1);
+ const errorPercentage = ((errorsRemaining / 10) * 100).toFixed(1);
+ const thresholdPercentage = ((thresholdRemaining / 120) * 100).toFixed(1);
+
+ const getStatusColor = (percentage) => {
+ const numericPercentage = parseFloat(percentage);
+ if (isNaN(numericPercentage) || numericPercentage < 20)
+ return "text-red-500 dark:text-red-400";
+ if (numericPercentage < 40) return "text-yellow-500 dark:text-yellow-400";
+ return "text-green-500 dark:text-green-400";
+ };
+
+ return (
+ <>
+
+ Quota:
+
+ {hourlyPercentage}%
+
+
+
+
+
+
+ );
+};
+
+export const RealtimeAnalytics = () => {
+ const [basicData, setBasicData] = useState({
+ last30MinUsers: 0,
+ last5MinUsers: 0,
+ byMinute: [],
+ tokenQuota: null,
+ lastUpdated: null,
+ });
+
+ const [detailedData, setDetailedData] = useState({
+ currentPages: [],
+ sources: [],
+ recentEvents: [],
+ lastUpdated: null,
+ });
+ const [loading, setLoading] = useState(true);
+ const [isPaused, setIsPaused] = useState(false);
+ const [error, setError] = useState(null);
+
+ const processDetailedData = (data) => {
+ return {
+ currentPages:
+ data.pageResponse?.rows?.map((row) => ({
+ path: row.dimensionValues[0].value,
+ activeUsers: parseInt(row.metricValues[0].value),
+ })) || [],
+
+ sources:
+ data.sourceResponse?.rows?.map((row) => ({
+ source: row.dimensionValues[0].value,
+ activeUsers: parseInt(row.metricValues[0].value),
+ })) || [],
+
+ recentEvents:
+ data.eventResponse?.rows
+ ?.filter(
+ (row) =>
+ !["session_start", "(other)"].includes(
+ row.dimensionValues[0].value
+ )
+ )
+ .map((row) => ({
+ event: row.dimensionValues[0].value,
+ count: parseInt(row.metricValues[0].value),
+ })) || [],
+ lastUpdated: new Date().toISOString(),
+ };
+ };
+
+ useEffect(() => {
+ let basicInterval;
+ let detailedInterval;
+
+ const fetchBasicData = async () => {
+ if (isPaused) return;
+ try {
+ const response = await fetch("/api/dashboard-analytics/realtime/basic", {
+ credentials: "include",
+ });
+
+ if (!response.ok) {
+ throw new Error("Failed to fetch basic realtime data");
+ }
+
+ const result = await response.json();
+ const processed = processBasicData(result.data);
+ setBasicData(processed);
+ setError(null);
+ } catch (error) {
+ console.error("Error details:", {
+ message: error.message,
+ stack: error.stack,
+ response: error.response,
+ });
+ if (error.message === "QUOTA_EXCEEDED") {
+ setError("Quota exceeded. Analytics paused until manually resumed.");
+ setIsPaused(true);
+ } else {
+ setError("Failed to fetch analytics data");
+ }
+ }
+ };
+
+ const fetchDetailedData = async () => {
+ if (isPaused) return;
+ try {
+ const response = await fetch("/api/dashboard-analytics/realtime/detailed", {
+ credentials: "include",
+ });
+
+ if (!response.ok) {
+ throw new Error("Failed to fetch detailed realtime data");
+ }
+
+ const result = await response.json();
+ const processed = processDetailedData(result.data);
+ setDetailedData(processed);
+ } catch (error) {
+ console.error("Failed to fetch detailed realtime data:", error);
+ if (error.message === "QUOTA_EXCEEDED") {
+ setError("Quota exceeded. Analytics paused until manually resumed.");
+ setIsPaused(true);
+ } else {
+ setError("Failed to fetch analytics data");
+ }
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ // Initial fetches
+ fetchBasicData();
+ fetchDetailedData();
+
+ // Set up intervals
+ basicInterval = setInterval(fetchBasicData, 30000); // 30 seconds
+ detailedInterval = setInterval(fetchDetailedData, 300000); // 5 minutes
+
+ return () => {
+ clearInterval(basicInterval);
+ clearInterval(detailedInterval);
+ };
+ }, [isPaused]);
+
+ const togglePause = () => {
+ setIsPaused(!isPaused);
+ };
+
+ if (loading && !basicData && !detailedData) {
+ return (
+
+
+
+
+
+ Project Hourly
+
+
+ {projectHourlyRemaining.toLocaleString()} / 14,000 remaining
+
+
+
+
+ Daily
+
+
+ {dailyRemaining.toLocaleString()} / 200,000 remaining
+
+
+
+
+ Server Errors
+
+
+ {errorsConsumed} / 10 used this hour
+
+
+
+
+ Thresholded Requests
+
+
+ {thresholdConsumed} / 120 used this hour
+
+
+
+ Real-Time Analytics
+
+
+
+
+
+
+
+
+ {[...Array(3)].map((_, i) => (
+
+
+
+ Real-Time Analytics
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Last updated:{" "}
+ {format(new Date(basicData.lastUpdated), "h:mm a")}
+
+
+ {summaryCard(
+ "Last 30 minutes",
+ "Active users",
+ basicData.last30MinUsers,
+ { colorClass: METRIC_COLORS.activeUsers.className }
+ )}
+ {summaryCard(
+ "Last 5 minutes",
+ "Active users",
+ basicData.last5MinUsers,
+ { colorClass: METRIC_COLORS.activeUsers.className }
+ )}
+
+
+
+
+
+ value + "m"}
+ className="text-xs"
+ tick={{ fill: "currentColor" }}
+ />
+ {
+ if (active && payload && payload.length) {
+ const timestamp = new Date(
+ Date.now() + payload[0].payload.minute * 60000
+ );
+ return (
+
+
+
+
+ );
+ }
+ return null;
+ }}
+ />
+
+
+
+ + {format(timestamp, "h:mm a")} +
+
+
+ Active Users:
+
+
+ {payload[0].value.toLocaleString()}
+
+
+
+
+
+
+
+
+
+
+
+ {valuePrefix}
+ {value}
+ {valueSuffix}
+
+ {description && (
+ {description}
+ )}
+ {formattedDate}
+ {payload.map((entry, index) => { + const value = entry.dataKey.toLowerCase().includes('revenue') || entry.dataKey === 'avgOrderValue' + ? formatCurrency(entry.value) + : entry.value.toLocaleString(); + + return ( +
+ {entry.name}:
+ {value}
+
+ );
+ })}
+
+
+ );
+});
+
+SummaryStats.displayName = "SummaryStats";
+
+// Add these skeleton components near the top of the file
+const SkeletonChart = () => (
+
+
+);
+
+const SkeletonStats = () => (
+
+
+
+ {/* Grid lines */}
+ {[...Array(6)].map((_, i) => (
+
+ ))}
+ {/* Y-axis labels */}
+
+
+ {[...Array(6)].map((_, i) => (
+
+ {/* X-axis labels */}
+
+ {[...Array(7)].map((_, i) => (
+
+ {/* Chart line */}
+
+
+
+
+ {[...Array(4)].map((_, i) => (
+
+
+
+
+
+
+ ))}
+
+);
+
+const SkeletonTable = () => (
+
+
+);
+
+const SalesChart = ({ timeRange = "last30days", title = "Sales Overview" }) => {
+ const [data, setData] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [selectedTimeRange, setSelectedTimeRange] = useState(timeRange);
+ const [showDailyTable, setShowDailyTable] = useState(false);
+ const [metrics, setMetrics] = useState({
+ revenue: true,
+ orders: true,
+ avgOrderValue: false,
+ movingAverage: true,
+ showPrevious: false,
+ });
+ const [summaryStats, setSummaryStats] = useState({});
+ const [projection, setProjection] = useState(null);
+ const [projectionLoading, setProjectionLoading] = useState(false);
+
+ // Add function to fetch projection
+ const fetchProjection = useCallback(async (params) => {
+ if (!params) return;
+
+ try {
+ setProjectionLoading(true);
+ const response = await acotService.getProjection(params);
+ setProjection(response);
+ } catch (error) {
+ console.error("Error loading projection:", error);
+ } finally {
+ setProjectionLoading(false);
+ }
+ }, []);
+
+ // Fetch data function
+ const fetchData = useCallback(async (params) => {
+ try {
+ setLoading(true);
+ setError(null);
+
+ // Fetch data
+ const response = await acotService.getStatsDetails({
+ ...params,
+ metric: "revenue",
+ daily: true,
+ });
+
+ if (!response.stats) {
+ throw new Error("Invalid response format");
+ }
+
+ // Process the data
+ const currentStats = Array.isArray(response.stats)
+ ? response.stats
+ : [];
+
+ // Process the data directly without remapping
+ const processedData = processData(currentStats);
+ const stats = calculateSummaryStats(processedData);
+
+ setData(processedData);
+ setSummaryStats(stats);
+ setError(null);
+
+ // Fetch projection if needed
+ if (stats.periodProgress < 100) {
+ fetchProjection(params);
+ }
+ } catch (error) {
+ console.error("Error fetching data:", error);
+ setError(error.message);
+ } finally {
+ setLoading(false);
+ }
+ }, [fetchProjection]);
+
+ // Handle time range change
+ const handleTimeRangeChange = useCallback(
+ (value) => {
+ setSelectedTimeRange(value);
+ fetchData({ timeRange: value });
+ },
+ [fetchData]
+ );
+
+ // Initial load and auto-refresh effect
+ useEffect(() => {
+ let intervalId = null;
+
+ // Initial fetch
+ fetchData({ timeRange: selectedTimeRange });
+
+ // Set up auto-refresh only for 'today' view
+ if (selectedTimeRange === "today") {
+ intervalId = setInterval(() => {
+ fetchData({ timeRange: "today" });
+ }, 60000);
+ }
+
+ return () => {
+ if (intervalId) {
+ clearInterval(intervalId);
+ }
+ };
+ }, [selectedTimeRange, fetchData]);
+
+ const formatXAxis = (value) => {
+ if (!value) return "";
+ const date = new Date(value);
+ return date.toLocaleDateString([], { month: "short", day: "numeric" });
+ };
+
+ const averageRevenue =
+ data.length > 0
+ ? data.reduce((sum, day) => sum + day.revenue, 0) / data.length
+ : 0;
+
+ return (
+
+ {[...Array(7)].map((_, i) => (
+
+
+
+ ))}
+
+
+
+
+
+ {/* Show stats only if not in error state */}
+ {!error &&
+ (loading ? (
+
+
+ {title}
+
+
+
+ {!error && (
+
+ )}
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ ) : error ? (
+
+
+ {showDailyTable &&
+
+ ) : (
+ <>
+
+
+
+ No sales data available
+
+
+ Try selecting a different time range
+
+
+
+
+ formatCurrency(value, false)}
+ className="text-xs text-muted-foreground"
+ tick={{ fill: "currentColor" }}
+ />
+ value.toLocaleString()}
+ className="text-xs text-muted-foreground"
+ tick={{ fill: "currentColor" }}
+ />
+
+
+
+
+ )}
+
+
+
+ DateTime.fromISO(value).toFormat("LLL d")}
+ className="text-xs"
+ />
+ {
+ if (!active || !payload?.length) return null;
+ return (
+
+
+
+ );
+};
+
+const DetailDialog = ({ open, onOpenChange, title, children }) => (
+
+);
+
+// Detail view components
+const RevenueDetails = ({ data }) => {
+ if (!data?.length)
+ return (
+
+
+ );
+ }}
+ />
+
+ {keys.map((key, index) => (
+ + {DateTime.fromISO(label).toFormat("LLL d")} +
+ {payload.map((entry, i) => ( ++ {entry.name}: {valueFormatter(entry.value)} +
+ ))} +
+ No data available for the selected time range.
+
+ );
+
+ // Ensure we have daily data points and they're properly formatted
+ const chartData = data
+ .map((day) => ({
+ timestamp: DateTime.fromISO(day.timestamp).toFormat("yyyy-MM-dd"),
+ revenue: parseFloat(day.revenue || 0),
+ orders: parseInt(day.orders || 0),
+ date: DateTime.fromISO(day.timestamp).toFormat("LLL d"),
+ }))
+ .sort(
+ (a, b) => DateTime.fromISO(a.timestamp) - DateTime.fromISO(b.timestamp)
+ );
+
+ return (
+
+ No data available for the selected time range.
+
+ );
+
+ return (
+ <>
+
+ ({
+ hour: formatHour(hour),
+ orders: count,
+ }))}
+ dataKey="orders"
+ name="Orders"
+ type="bar"
+ color="
+ "
+ />
+
+ )}
+
+ );
+};
+
+// Add additional chart components
+const BarList = ({ data, valueFormatter = (v) => v }) => (
+ Hourly Distribution
+
+ {data.map((item, i) => (
+
+);
+
+const StatGrid = ({ stats }) => (
+
+
+ ))}
+
+ {item.name}
+ {valueFormatter(item.value)}
+
+
+
+
+
+ {stats.map((stat, i) => (
+
+
+ ))}
+
+);
+
+// Add detail view components
+const AverageOrderDetails = ({ data, orderCount }) => {
+ if (!data?.length)
+ return (
+ {stat.label}
+ {stat.value}
+ {stat.description && (
+
+ {stat.description}
+
+ )}
+
+ No data available for the selected time range.
+
+ );
+
+ return (
+
+ No data available for the selected time range.
+
+ );
+
+ const cancelData = data[0]?.canceledOrders || {
+ total: 0,
+ count: 0,
+ reasons: {},
+ items: [],
+ };
+ const timeSeriesData = data.map((day) => ({
+ timestamp: day.timestamp,
+ total: day.canceledOrders?.total || 0,
+ count: day.canceledOrders?.count || 0,
+ }));
+
+ const reasonData = Object.entries(cancelData.reasons || {})
+ .map(([reason, count]) => ({
+ reason,
+ count,
+ }))
+ .sort((a, b) => b.count - a.count);
+
+ return (
+
+
+ );
+};
+
+const BrandsCategoriesDetails = ({ data }) => {
+ if (!data?.length)
+ return (
+
+ formatCurrency(value)}
+ />
+
+
+ Daily Cancellation Amount
+
+
+
+ {reasonData.length > 0 && (
+ Daily Cancellation Count
+
+
+ )}
+ Cancellation Reasons
+
+
+
+
+
+ No data available for the selected time range.
+
+ );
+
+ const stats = data[0];
+ const brandsList = stats?.brands?.list || [];
+ const categoriesList = stats?.categories?.list || [];
+
+ return (
+
+
+ );
+};
+
+const ShippingDetails = ({ data }) => {
+ if (!data?.length)
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ No data available for the selected time range.
+
+ );
+
+ const shippedCount = data[0]?.shipping?.shippedCount || 0;
+ const locations = data[0]?.shipping?.locations || {};
+ const methodStats = data[0]?.shipping?.methodStats || [];
+
+ // Shipping method name mappings
+ const shippingMethodNames = {
+ usps_ground_advantage: "USPS Ground Advantage",
+ usps_priority: "USPS Priority",
+ Unknown: "Digital",
+ fedex_ieconomy: "FedEx Intl Economy",
+ fedex_homedelivery: "FedEx Ground",
+ fedex_ground: "FedEx Ground",
+ fedex_iground: "FedEx Intl Ground",
+ fedex_2day: "FedEx 2 Day",
+ };
+
+ return (
+
+ {/* Shipping Methods */}
+
+ );
+};
+
+const OrderTypeDetails = ({ data, type }) => {
+ if (!data?.length)
+ return (
+
+
+
+
+
+ {/* Countries */}
+
+
+
+
+
+
+
+
+
+
+
+ {/* States */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ No data available for the selected time range.
+
+ );
+
+ const timeSeriesData = data.map((day) => ({
+ timestamp: day.timestamp,
+ count: day.count,
+ value: day.value,
+ percentage: day.percentage,
+ }));
+
+ const typeColors = {
+ pre_orders: "hsl(47.9 95.8% 53.1%)", // Yellow for pre-orders
+ local_pickup: "hsl(192.2 70.1% 51.4%)", // Cyan for local pickup
+ on_hold: "hsl(346.8 77.2% 49.8%)", // Red for on hold
+ };
+
+ const color = typeColors[type];
+
+ return (
+
+
+ );
+};
+
+const PeakHourDetails = ({ data }) => {
+ if (!data?.length)
+ return (
+
+
+
+ Daily Order Count
+
+ formatCurrency(value)}
+ />
+
+
+ Daily Value
+
+ `${value.toFixed(1)}%`}
+ />
+
+ Percentage of Orders
+
+ No data available for the selected time range.
+
+ );
+
+ const hourlyData =
+ data[0]?.hourlyOrders?.map((count, hour) => ({
+ timestamp: hour, // Use raw hour number for x-axis
+ orders: count,
+ })) || [];
+
+ return (
+
+
+
+ {
+ const date = new Date();
+ date.setHours(hour, 0, 0);
+ return date.toLocaleString("en-US", {
+ hour: "numeric",
+ hour12: true,
+ });
+ }}
+ className="text-xs"
+ />
+ {
+ if (!active || !payload?.length) return null;
+ const date = new Date();
+ date.setHours(label, 0, 0);
+ const time = date.toLocaleString("en-US", {
+ hour: "numeric",
+ hour12: true,
+ });
+ return (
+
+
+
+ );
+};
+
+const RefundDetails = ({ data }) => {
+ if (!data?.length)
+ return (
+
+
+ );
+ }}
+ />
+ {time}
+Orders: {payload[0].value}
+
+ No data available for the selected time range.
+
+ );
+
+ const refundData = data[0]?.refunds || { total: 0, count: 0, reasons: {} };
+ const timeSeriesData = data.map((day) => ({
+ timestamp: day.timestamp,
+ total: day.refunds?.total || 0,
+ count: day.refunds?.count || 0,
+ }));
+
+ const reasonData = Object.entries(refundData.reasons || {})
+ .map(([reason, count]) => ({
+ reason,
+ count,
+ }))
+ .sort((a, b) => b.count - a.count);
+
+ return (
+
+
+ );
+};
+
+const OrderRangeDetails = ({ data }) => {
+ if (!data?.length)
+ return (
+
+ formatCurrency(value)}
+ />
+
+
+ Daily Refund Amount
+
+
+
+ {reasonData.length > 0 && (
+ Daily Refund Count
+
+
+ )}
+ Refund Reasons
+
+
+
+
+
+ No data available for the selected time range.
+
+ );
+
+ // Get the data from the entire period
+ const allData = data.reduce((acc, day) => {
+ // Initialize distribution data structure if not exists
+ if (!acc.orderValueDistribution) {
+ acc.orderValueDistribution =
+ day.orderValueDistribution?.map((range) => ({
+ ...range,
+ count: 0,
+ total: 0,
+ })) || [];
+ }
+
+ // Aggregate distribution data
+ day.orderValueDistribution?.forEach((range, index) => {
+ if (acc.orderValueDistribution[index]) {
+ acc.orderValueDistribution[index].count += range.count;
+ acc.orderValueDistribution[index].total += range.total;
+ }
+ });
+
+ // Track total orders for percentage calculation
+ acc.totalOrders = (acc.totalOrders || 0) + (day.orders || 0);
+
+ return acc;
+ }, {});
+
+ const timeSeriesData = data.map((day) => ({
+ timestamp: day.timestamp,
+ largest: day.orderValueRange?.largest || 0,
+ smallest: day.orderValueRange?.smallest || 0,
+ average: day.averageOrderValue || 0,
+ }));
+
+ // Transform distribution data using aggregated values
+ const formattedDistributionData =
+ allData.orderValueDistribution?.map((range) => {
+ const totalRevenue = allData.orderValueDistribution.reduce(
+ (sum, r) => sum + (r.total || 0),
+ 0
+ );
+ return {
+ range:
+ range.max === "Infinity"
+ ? `$${range.min}+`
+ : `$${range.min}-${range.max}`,
+ count: range.count,
+ total: range.total,
+ percentage: ((range.count / (allData.totalOrders || 1)) * 100).toFixed(
+ 1
+ ),
+ revenuePercentage: ((range.total / (totalRevenue || 1)) * 100).toFixed(
+ 1
+ ),
+ };
+ }) || [];
+
+ return (
+
+
+ );
+};
+
+const StatCard = ({
+ title,
+ value,
+ description,
+ trend,
+ trendValue,
+ valuePrefix = "",
+ valueSuffix = "",
+ trendPrefix = "",
+ trendSuffix = "",
+ className = "",
+ colorClass = "text-gray-900 dark:text-gray-100",
+ titleClass,
+ descriptionClass,
+ icon: Icon,
+ iconColor = "text-gray-500",
+ iconBackground,
+ onClick,
+ info,
+ onDetailsClick,
+ isLoading = false,
+ progress,
+ variant = "default",
+ background
+}) => {
+ const variants = {
+ default: "bg-white dark:bg-gray-900/60",
+ mini: background || "bg-gradient-to-br from-gray-800 to-gray-900 backdrop-blur-md"
+ };
+
+ const titleVariants = {
+ default: "text-sm font-medium text-gray-600 dark:text-gray-300",
+ mini: titleClass || "text-sm font-bold text-gray-100"
+ };
+
+ const valueVariants = {
+ default: "text-2xl font-bold",
+ mini: "text-3xl font-extrabold"
+ };
+
+ const descriptionVariants = {
+ default: "text-sm text-muted-foreground",
+ mini: descriptionClass || "text-sm font-semibold text-gray-200"
+ };
+
+ const trendColorVariants = {
+ default: {
+ up: "text-emerald-600 dark:text-emerald-400",
+ down: "text-rose-600 dark:text-rose-400"
+ },
+ mini: {
+ up: "text-emerald-900",
+ down: "text-rose-900"
+ }
+ };
+
+ const iconVariants = {
+ default: iconColor,
+ mini: iconColor || colorClass
+ };
+
+ return (
+
+ formatCurrency(value)}
+ />
+
+
+ Order Value Range
+
+ formatCurrency(value)}
+ />
+
+
+ {formattedDistributionData.length > 0 && (
+ Average Order Value
+
+
+ )}
+ Order Value Distribution
+
+
+
+
+
+
+
+ `${value}%`}
+ />
+ {
+ if (!active || !payload?.length) return null;
+ const data = payload[0].payload;
+ return (
+
+
+
+
+
+ );
+ }}
+ />
+ {data.range}
++ Orders: {data.count.toLocaleString()} +
++ Revenue: {formatCurrency(data.total)} +
++ % of Orders: {data.percentage}% +
++ % of Revenue: {data.revenuePercentage}% +
+
+
+ {title}
+
+ {info && (
+
+ {Icon && (
+
+ {variant === 'mini' && iconBackground && (
+
+ )}
+
+ )}
+
+
+ )}
+
+
+
+ {valuePrefix}
+ {value}
+ {valueSuffix}
+
+ {description && (
+
+ {description}
+ {trend && (
+
+ {trend === "up" ? (
+
+ )}
+
+
+
+
+
+
+
+
+);
+
+const SkeletonTable = ({ rows = 8 }) => (
+
+ {/* Grid lines */}
+ {[...Array(5)].map((_, i) => (
+
+ ))}
+ {/* Y-axis labels */}
+
+
+ {[...Array(5)].map((_, i) => (
+
+ {/* X-axis labels */}
+
+ {[...Array(6)].map((_, i) => (
+
+ {type === "bar" ? (
+
+ {[...Array(24)].map((_, i) => (
+
+ ))}
+
+ ) : (
+
+
+ )}
+
+
+
+
+
+
+
+);
+
+const SummaryStats = memo(({ stats = {}, projection = null, projectionLoading = false }) => {
+ const {
+ totalRevenue = 0,
+ totalOrders = 0,
+ avgOrderValue = 0,
+ bestDay = null,
+ prevRevenue = 0,
+ prevOrders = 0,
+ prevAvgOrderValue = 0,
+ periodProgress = 100
+ } = stats;
+
+ // Calculate projected values when period is incomplete
+ const currentRevenue = periodProgress < 100 ? (projection?.projectedRevenue || totalRevenue) : totalRevenue;
+ const revenueTrend = currentRevenue >= prevRevenue ? "up" : "down";
+ const revenueDiff = Math.abs(currentRevenue - prevRevenue);
+ const revenuePercentage = (revenueDiff / prevRevenue) * 100;
+
+ // Calculate order trends
+ const currentOrders = periodProgress < 100 ? Math.round(totalOrders * (100 / periodProgress)) : totalOrders;
+ const ordersTrend = currentOrders >= prevOrders ? "up" : "down";
+ const ordersDiff = Math.abs(currentOrders - prevOrders);
+ const ordersPercentage = (ordersDiff / prevOrders) * 100;
+
+ // Calculate AOV trends
+ const currentAOV = currentOrders ? currentRevenue / currentOrders : avgOrderValue;
+ const aovTrend = currentAOV >= prevAvgOrderValue ? "up" : "down";
+ const aovDiff = Math.abs(currentAOV - prevAvgOrderValue);
+ const aovPercentage = (aovDiff / prevAvgOrderValue) * 100;
+
+ return (
+
+
+ );
+});
+
+const StatCards = ({
+ timeRange: initialTimeRange = "today",
+ startDate,
+ endDate,
+ title = "Sales Dashboard",
+ description = "",
+}) => {
+ const [stats, setStats] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [lastUpdate, setLastUpdate] = useState(null);
+ const [timeRange, setTimeRange] = useState(initialTimeRange);
+ const [selectedMetric, setSelectedMetric] = useState(null);
+ const [dateRange, setDateRange] = useState(null);
+ const [detailDataLoading, setDetailDataLoading] = useState({});
+ const [detailData, setDetailData] = useState({});
+ const [isInitialLoad, setIsInitialLoad] = useState(true);
+ const [projection, setProjection] = useState(null);
+ const [projectionLoading, setProjectionLoading] = useState(false);
+ const { setCacheData, getCacheData, clearCache } = useDataCache();
+
+ // Function to determine if we should use last30days for trend charts
+ const shouldUseLast30Days = useCallback(
+ (metric) => {
+ if (["brands_categories", "shipping"].includes(metric)) {
+ return false;
+ }
+ const shortPeriods = [
+ "today",
+ "yesterday",
+ "last7days",
+ "thisWeek",
+ "lastWeek",
+ ];
+ return shortPeriods.includes(timeRange);
+ },
+ [timeRange]
+ );
+
+ // Function to fetch detail data for a specific metric
+ const fetchDetailData = useCallback(
+ async (metric, orderType) => {
+ const detailTimeRange = shouldUseLast30Days(metric)
+ ? "last30days"
+ : timeRange;
+ const cachedData = getCacheData(detailTimeRange, metric);
+
+ if (cachedData) {
+ console.log(`Using cached data for ${metric}`);
+ setDetailData((prev) => ({ ...prev, [metric]: cachedData }));
+ return cachedData;
+ }
+
+ console.log(`Fetching detail data for ${metric}`);
+ setDetailDataLoading((prev) => ({ ...prev, [metric]: true }));
+
+ try {
+ const params = {
+ ...(timeRange === "custom"
+ ? { startDate, endDate }
+ : { timeRange: detailTimeRange }),
+ metric,
+ daily: true,
+ };
+
+ // For metrics that need the full stats
+ if (["shipping", "brands_categories"].includes(metric)) {
+ const response = await acotService.getStats(params);
+ const data = [response.stats];
+ setCacheData(detailTimeRange, metric, data);
+ setDetailData((prev) => ({ ...prev, [metric]: data }));
+ setError(null);
+ return data;
+ }
+
+ // For order types (pre_orders, local_pickup, on_hold)
+ if (["pre_orders", "local_pickup", "on_hold"].includes(metric)) {
+ const response = await acotService.getStatsDetails({
+ ...params,
+ orderType: orderType,
+ });
+ const data = response.stats;
+ setCacheData(detailTimeRange, metric, data);
+ setDetailData((prev) => ({ ...prev, [metric]: data }));
+ setError(null);
+ return data;
+ }
+
+ // For refunds and cancellations
+ if (["refunds", "cancellations"].includes(metric)) {
+ const response = await acotService.getStatsDetails({
+ ...params,
+ eventType:
+ metric === "refunds" ? "PAYMENT_REFUNDED" : "CANCELED_ORDER",
+ });
+ const data = response.stats;
+
+ // Transform the data to match the expected format
+ const transformedData = data.map((day) => ({
+ ...day,
+ timestamp: day.timestamp,
+ refunds:
+ metric === "refunds"
+ ? {
+ total: day.refunds?.total || 0,
+ count: day.refunds?.count || 0,
+ reasons: day.refunds?.reasons || {},
+ }
+ : undefined,
+ canceledOrders:
+ metric === "cancellations"
+ ? {
+ total: day.canceledOrders?.total || 0,
+ count: day.canceledOrders?.count || 0,
+ reasons: day.canceledOrders?.reasons || {},
+ }
+ : undefined,
+ }));
+
+ setCacheData(detailTimeRange, metric, transformedData);
+ setDetailData((prev) => ({ ...prev, [metric]: transformedData }));
+ setError(null);
+ return transformedData;
+ }
+
+ // For order range
+ if (metric === "order_range") {
+ const response = await acotService.getStatsDetails({
+ ...params,
+ eventType: "PLACED_ORDER",
+ });
+ const data = response.stats;
+ console.log("Fetched order range data:", data);
+ setCacheData(detailTimeRange, metric, data);
+ setDetailData((prev) => ({ ...prev, [metric]: data }));
+ setError(null);
+ return data;
+ }
+
+ // For all other metrics
+ const response = await acotService.getStatsDetails(params);
+ const data = response.stats;
+ setCacheData(detailTimeRange, metric, data);
+ setDetailData((prev) => ({ ...prev, [metric]: data }));
+ setError(null);
+ return data;
+ } catch (error) {
+ console.error(`Error fetching detail data for ${metric}:`, error);
+ setError(error.response?.data?.error || error.message);
+ return null;
+ } finally {
+ setDetailDataLoading((prev) => ({ ...prev, [metric]: false }));
+ }
+ },
+ [
+ timeRange,
+ startDate,
+ endDate,
+ shouldUseLast30Days,
+ setCacheData,
+ getCacheData,
+ ]
+ );
+
+ // Throttled preloadDetailData function to avoid overwhelming the server
+ const preloadDetailData = useCallback(async () => {
+ const metrics = [
+ "revenue",
+ "orders",
+ "average_order",
+ "refunds",
+ "cancellations",
+ "order_range",
+ "pre_orders",
+ "local_pickup",
+ "on_hold",
+ ];
+
+ // Process metrics in batches of 3 to avoid overwhelming the connection pool
+ const batchSize = 3;
+ for (let i = 0; i < metrics.length; i += batchSize) {
+ const batch = metrics.slice(i, i + batchSize);
+ try {
+ await Promise.all(
+ batch.map((metric) => fetchDetailData(metric, metric))
+ );
+ // Small delay between batches to prevent overwhelming the server
+ if (i + batchSize < metrics.length) {
+ await new Promise(resolve => setTimeout(resolve, 50));
+ }
+ } catch (error) {
+ console.error(`Error during detail data preload batch ${i / batchSize + 1}:`, error);
+ }
+ }
+ }, [fetchDetailData]);
+
+ // Move trend calculation functions inside the component
+ const calculateTrend = useCallback((current, previous) => {
+ if (!current || !previous) return null;
+ const trend = current >= previous ? "up" : "down";
+ const diff = Math.abs(current - previous);
+ const percentage = (diff / previous) * 100;
+
+ return {
+ trend,
+ value: percentage,
+ current,
+ previous,
+ };
+ }, []);
+
+ const calculateRevenueTrend = useCallback(() => {
+ if (!stats?.prevPeriodRevenue && stats?.prevPeriodRevenue !== 0) return null;
+
+ // If period is complete, use actual revenue
+ // If period is incomplete, use smart projection when available, fallback to simple projection
+ const currentRevenue = stats.periodProgress < 100
+ ? (projection?.projectedRevenue || stats.projectedRevenue)
+ : stats.revenue;
+ const prevRevenue = stats.prevPeriodRevenue; // Previous period's total revenue
+
+ console.log('[RevenueTrend Debug]', {
+ periodProgress: stats.periodProgress,
+ currentRevenue,
+ smartProjection: projection?.projectedRevenue,
+ simpleProjection: stats.projectedRevenue,
+ actualRevenue: stats.revenue,
+ prevRevenue,
+ isProjected: stats.periodProgress < 100
+ });
+
+ if (!currentRevenue || !prevRevenue) return null;
+
+ // Calculate absolute difference percentage
+ const trend = currentRevenue >= prevRevenue ? "up" : "down";
+ const diff = Math.abs(currentRevenue - prevRevenue);
+ const percentage = (diff / prevRevenue) * 100;
+
+ console.log('[RevenueTrend Result]', {
+ trend,
+ percentage,
+ calculation: `(|${currentRevenue} - ${prevRevenue}| / ${prevRevenue}) * 100 = ${percentage}%`
+ });
+
+ return {
+ trend,
+ value: percentage,
+ current: currentRevenue,
+ previous: prevRevenue,
+ };
+ }, [stats, projection]);
+
+ const calculateOrderTrend = useCallback(() => {
+ if (!stats?.prevPeriodOrders) return null;
+ return calculateTrend(stats.orderCount, stats.prevPeriodOrders);
+ }, [stats, calculateTrend]);
+
+ const calculateAOVTrend = useCallback(() => {
+ if (!stats?.prevPeriodAOV) return null;
+ return calculateTrend(stats.averageOrderValue, stats.prevPeriodAOV);
+ }, [stats, calculateTrend]);
+
+ // Initial load effect
+ useEffect(() => {
+ let isMounted = true;
+
+ const loadData = async () => {
+ try {
+ setLoading(true);
+ setStats(null);
+
+ const params =
+ timeRange === "custom" ? { startDate, endDate } : { timeRange };
+
+ const response = await acotService.getStats(params);
+
+ if (!isMounted) return;
+
+ setDateRange(response.timeRange);
+ setStats(response.stats);
+ setLastUpdate(DateTime.now().setZone("America/New_York"));
+ setError(null);
+
+ // Start preloading detail data
+ preloadDetailData();
+ } catch (error) {
+ console.error("Error loading data:", error);
+ if (isMounted) {
+ setError(error.message);
+ }
+ } finally {
+ if (isMounted) {
+ setLoading(false);
+ setIsInitialLoad(false);
+ }
+ }
+ };
+
+ loadData();
+ return () => {
+ isMounted = false;
+ };
+ }, [timeRange, startDate, endDate]);
+
+ // Load smart projection separately
+ useEffect(() => {
+ let isMounted = true;
+
+ const loadProjection = async () => {
+ if (!stats?.periodProgress || stats.periodProgress >= 100) return;
+
+ try {
+ setProjectionLoading(true);
+ const params =
+ timeRange === "custom" ? { startDate, endDate } : { timeRange };
+
+ const response = await acotService.getProjection(params);
+
+ if (!isMounted) return;
+ setProjection(response);
+ } catch (error) {
+ console.error("Error loading projection:", error);
+ } finally {
+ if (isMounted) {
+ setProjectionLoading(false);
+ }
+ }
+ };
+
+ loadProjection();
+ return () => {
+ isMounted = false;
+ };
+ }, [timeRange, startDate, endDate, stats?.periodProgress]);
+
+ // Auto-refresh for 'today' view
+ useEffect(() => {
+ if (timeRange !== "today") return;
+
+ const interval = setInterval(async () => {
+ try {
+ const [statsResponse, projectionResponse] = await Promise.all([
+ acotService.getStats({ timeRange: "today" }),
+ acotService.getProjection({ timeRange: "today" }),
+ ]);
+
+ setStats(statsResponse.stats);
+ setProjection(projectionResponse);
+ setLastUpdate(DateTime.now().setZone("America/New_York"));
+ } catch (error) {
+ console.error("Error auto-refreshing stats:", error);
+ }
+ }, 60000);
+
+ return () => clearInterval(interval);
+ }, [timeRange]);
+
+ // Modified AsyncDetailView component
+ const AsyncDetailView = memo(({ metric, type, orderCount }) => {
+ const detailTimeRange = shouldUseLast30Days(metric)
+ ? "last30days"
+ : timeRange;
+ const cachedData =
+ detailData[metric] || getCacheData(detailTimeRange, metric);
+ const isLoading = detailDataLoading[metric];
+ const isOrderTypeMetric = [
+ "pre_orders",
+ "local_pickup",
+ "on_hold",
+ ].includes(metric);
+
+ useEffect(() => {
+ let isMounted = true;
+
+ const loadData = async () => {
+ if (!cachedData && !isLoading) {
+ // Pass type only for order type metrics
+ const data = await fetchDetailData(
+ metric,
+ isOrderTypeMetric ? metric : undefined
+ );
+ if (!isMounted) return;
+ // The state updates are handled in fetchDetailData
+ }
+ };
+
+ loadData();
+ return () => {
+ isMounted = false;
+ };
+ }, [metric, timeRange, isOrderTypeMetric]); // Depend on isOrderTypeMetric
+
+ if (isLoading || (!cachedData && !error)) {
+ switch (metric) {
+ case "revenue":
+ case "orders":
+ case "average_order":
+ return Loading...
;
+ }
+ }
+
+ if (!cachedData && error) {
+ return (
+
+ No data available for the selected time range.
+
+ );
+
+ switch (metric) {
+ case "revenue":
+ return Invalid metric selected.
+ );
+ }
+ });
+
+ AsyncDetailView.displayName = "AsyncDetailView";
+
+ // Modified getDetailComponent to use memoized components
+ const getDetailComponent = useCallback(() => {
+ if (!selectedMetric || !stats) {
+ return (
+
+ No data available for the selected time range.
+
+ );
+ }
+
+ const data = detailData[selectedMetric];
+ const isLoading = detailDataLoading[selectedMetric];
+ const isOrderTypeMetric = [
+ "pre_orders",
+ "local_pickup",
+ "on_hold",
+ ].includes(selectedMetric);
+
+ if (isLoading) {
+ return
+ Peak hour details are only available for single-day periods.
+
+ );
+ }
+ return Invalid metric selected.
+ );
+ }
+ }, [selectedMetric, stats, timeRange, detailData, detailDataLoading]);
+
+ if (loading && !stats) {
+ return (
+
+
+
+
+
+
+ {title}
+
+ {description && (
+
+ {description}
+
+ )}
+
+
+
+
+ {[...Array(12)].map((_, i) => (
+
+
+
+
+
+
+
+ {title}
+
+ {description && (
+
+ {description}
+
+ )}
+
+
+ {lastUpdate && !loading && (
+
+ Last updated: {lastUpdate.toFormat("hh:mm a")}
+
+ )}
+
+
+
+
+
+
+
+
+ {title}
+
+ {lastUpdate && !loading && (
+
+ Last updated {lastUpdate.toFormat("h:mm a")}
+ {projection?.confidence > 0 && !projectionLoading && (
+
+
+
+
+ (
+
+ {Math.round(projection.confidence * 100)}%
+
+ )
+
+
+
+
+
+
+ )}
+
+ )}
+
+
+ Confidence level of revenue projection based on historical data patterns
+
+
+
+
+
+
+ }
+ progress={
+ stats?.periodProgress < 100 ? stats.periodProgress : undefined
+ }
+ trend={projectionLoading && stats?.periodProgress < 100 ? undefined : revenueTrend?.trend}
+ trendValue={
+ projectionLoading && stats?.periodProgress < 100 ? (
+
+ {stats?.periodProgress < 100 ? (
+
+
+ Proj:
+ Projected:
+ {projectionLoading ? (
+
+ ) : (
+
+
+ ) : (
+ formatCurrency(
+ projection?.projectedRevenue || stats.projectedRevenue
+ )
+ )}
+
+ Prev:
+ Previous:
+ {formatCurrency(stats.prevPeriodRevenue || 0)}
+
+ )}
+
+
+ ) : revenueTrend?.value ? (
+ Previous Period: {formatCurrency(stats.prevPeriodRevenue || 0)}
+
+
+);
+
+const SkeletonTable = () => (
+
+ {[...Array(5)].map((_, i) => (
+
+ ))}
+
+
+ {[...Array(5)].map((_, i) => (
+
+
+ {[...Array(3)].map((_, i) => (
+
+
+
+
+
+);
+
+const ResponseFeed = ({ responses, title, renderSummary }) => (
+
+ {responses.items.map((response) => (
+
+
+ {renderSummary(response)}
+
+ ))}
+
+
+ );
+ }}
+ />
+);
+
+const WinbackFeed = ({ responses }) => (
+
+
+ {textAnswer && (
+
+ {response.hidden?.email ? (
+
+ {response.hidden?.name || "Anonymous"}
+
+ ) : (
+
+ {response.hidden?.name || "Anonymous"}
+
+ )}
+
+ {answer?.boolean ? "Yes" : "No"}
+
+
+
+ "{textAnswer}"
+ )}
+
+
+ );
+ }}
+ />
+);
+
+const TypeformDashboard = () => {
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [formData, setFormData] = useState({
+ form1: { responses: null, hasMore: false, lastToken: null },
+ form2: { responses: null, hasMore: false, lastToken: null },
+ });
+
+ const fetchResponses = async (formId, before = null) => {
+ const params = { page_size: 1000 };
+ if (before) params.before = before;
+
+ const response = await axios.get(
+ `/api/typeform/forms/${formId}/responses`,
+ { params }
+ );
+ return response.data;
+ };
+
+ useEffect(() => {
+ const fetchFormData = async () => {
+ try {
+ setLoading(true);
+ setError(null);
+
+ const forms = [FORM_IDS.FORM_1, FORM_IDS.FORM_2];
+ const results = await Promise.all(
+ forms.map(async (formId) => {
+ const responses = await fetchResponses(formId);
+ const hasMore = responses.items.length === 1000;
+ const lastToken = hasMore
+ ? responses.items[responses.items.length - 1].token
+ : null;
+
+ return {
+ responses,
+ hasMore,
+ lastToken,
+ };
+ })
+ );
+
+ setFormData({
+ form1: results[0],
+ form2: results[1],
+ });
+ } catch (err) {
+ console.error("Error fetching Typeform data:", err);
+ setError("Failed to load form data. Please try again later.");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchFormData();
+ }, []);
+
+ const calculateMetrics = () => {
+ if (!formData.form1.responses || !formData.form2.responses) return null;
+
+ const form1Responses = formData.form1.responses.items;
+ const form2Responses = formData.form2.responses.items;
+
+ // Product Relevance metrics
+ const yesResponses = form1Responses.filter((r) =>
+ r.answers?.some((a) => a.type === "boolean" && a.boolean === true)
+ ).length;
+ const totalForm1 = form1Responses.length;
+ const yesPercentage = Math.round((yesResponses / totalForm1) * 100) || 0;
+
+ // Winback Survey metrics
+ const likelihoodAnswers = form2Responses
+ .map((r) => r.answers?.find((a) => a.type === "number"))
+ .filter(Boolean)
+ .map((a) => a.number);
+ const averageLikelihood = likelihoodAnswers.length
+ ? Math.round(
+ (likelihoodAnswers.reduce((a, b) => a + b, 0) /
+ likelihoodAnswers.length) *
+ 10
+ ) / 10
+ : 0;
+
+ // Get reasons for not ordering (only predefined choices)
+ const reasonsMap = new Map();
+ form2Responses.forEach((response) => {
+ const reasonsAnswer = response.answers?.find((a) => a.type === "choices");
+ if (reasonsAnswer?.choices?.labels) {
+ reasonsAnswer.choices.labels.forEach((label) => {
+ reasonsMap.set(label, (reasonsMap.get(label) || 0) + 1);
+ });
+ }
+ });
+
+ const sortedReasons = Array.from(reasonsMap.entries())
+ .sort(([, a], [, b]) => b - a)
+ .map(([label, count]) => ({
+ reason: label,
+ count,
+ percentage: Math.round((count / form2Responses.length) * 100),
+ }));
+
+ return {
+ productRelevance: {
+ yesPercentage,
+ yesCount: yesResponses,
+ noCount: totalForm1 - yesResponses,
+ },
+ winback: {
+ averageRating: averageLikelihood,
+ reasons: sortedReasons,
+ },
+ };
+ };
+
+ const metrics = loading ? null : calculateMetrics();
+
+ // Find the newest response across both forms
+ const getNewestResponse = () => {
+ if (
+ !formData.form1.responses?.items?.length &&
+ !formData.form2.responses?.items?.length
+ )
+ return null;
+
+ const form1Latest = formData.form1.responses?.items[0]?.submitted_at;
+ const form2Latest = formData.form2.responses?.items[0]?.submitted_at;
+
+ if (!form1Latest) return form2Latest;
+ if (!form2Latest) return form1Latest;
+
+ return new Date(form1Latest) > new Date(form2Latest)
+ ? form1Latest
+ : form2Latest;
+ };
+
+ const newestResponse = getNewestResponse();
+
+ if (error) {
+ return (
+
+
+
+ {response.hidden?.email ? (
+
+ {response.hidden?.name || "Anonymous"}
+
+ ) : (
+
+ {response.hidden?.name || "Anonymous"}
+
+ )}
+
+ {likelihoodAnswer?.number}/5
+
+
+
+
+ {(reasonsAnswer?.choices?.labels || []).map((label, idx) => (
+
+ {label}
+
+ ))}
+ {reasonsAnswer?.choices?.other && (
+
+ {reasonsAnswer.choices.other}
+
+ )}
+
+ {feedbackAnswer?.text && (
+
+ {feedbackAnswer.text}
+
+ )}
+
+ {error}
+
+
+
+ Customer Surveys
+
+ {newestResponse && (
+
+ + Newest response:{" "} + {format(new Date(newestResponse), "MMM d, h:mm a")} +
+ )} +
+
+ ) : (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ How likely are you to place another order with us?
+
+
+ {metrics.winback.averageRating}
+
+ /5 avg
+
+
+
+
+
+
+ {
+ return value === "1"
+ ? "Not at all"
+ : value === "5"
+ ? "Extremely"
+ : "";
+ }}
+ textAnchor="middle"
+ interval={0}
+ height={50}
+ className="text-muted-foreground text-xs md:text-sm"
+ />
+ {
+ if (payload && payload.length) {
+ const { rating, count } = payload[0].payload;
+ return (
+
+
+
+
+ );
+ }
+ return null;
+ }}
+ />
+
+ {likelihoodCounts.map((_, index) => (
+ |
+ ))}
+
+
+
+
+
+ {rating} Rating: {count} responses
+
+
+
+ Were the suggested products in this email relevant to you?
+
+
+
+
+ {metrics.productRelevance.yesPercentage}% Relevant
+
+
+
+
+
+ {
+ if (payload && payload.length) {
+ const yesCount = payload[0].payload.yes;
+ const noCount = payload[0].payload.no;
+ const total = yesCount + noCount;
+ const yesPercent = Math.round(
+ (yesCount / total) * 100
+ );
+ const noPercent = Math.round(
+ (noCount / total) * 100
+ );
+ return (
+
+
+
+
+ );
+ }
+ return null;
+ }}
+ />
+
+
+ {metrics.productRelevance.yesPercentage}%
+
+
+
+
+
+
+
+
+
+ Yes:
+
+
+ {yesCount} ({yesPercent}%)
+
+
+
+
+ No:
+
+
+ {noCount} ({noPercent}%)
+
+
+
+
+ Yes: {metrics.productRelevance.yesCount}
+ No: {metrics.productRelevance.noCount}
+
+
+
+ )}
+
+
+
+
+ Reasons for Not Ordering
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+const SkeletonPieChart = () => (
+
+
+);
+
+const SkeletonTabs = () => (
+
+
+
+
+ {[...Array(3)].map((_, i) => (
+
+
+
+ ))}
+
+
+);
+
+export const UserBehaviorDashboard = () => {
+ const [data, setData] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [timeRange, setTimeRange] = useState("30");
+
+ const processPageData = (data) => {
+ if (!data?.rows) {
+ console.log("No rows in page data");
+ return [];
+ }
+
+ return data.rows.map((row) => ({
+ path: row.dimensionValues[0].value || "Unknown",
+ pageViews: parseInt(row.metricValues[0].value || 0),
+ avgSessionDuration: parseFloat(row.metricValues[1].value || 0),
+ bounceRate: parseFloat(row.metricValues[2].value || 0) * 100,
+ engagedSessions: parseInt(row.metricValues[3].value || 0),
+ }));
+ };
+
+ const processDeviceData = (data) => {
+ if (!data?.rows) {
+ console.log("No rows in device data");
+ return [];
+ }
+
+ return data.rows
+ .filter((row) => {
+ const device = (row.dimensionValues[0].value || "").toLowerCase();
+ return ["desktop", "mobile", "tablet"].includes(device);
+ })
+ .map((row) => {
+ const device = row.dimensionValues[0].value || "Unknown";
+ return {
+ device: device.charAt(0).toUpperCase() + device.slice(1).toLowerCase(),
+ pageViews: parseInt(row.metricValues[0].value || 0),
+ sessions: parseInt(row.metricValues[1].value || 0),
+ };
+ })
+ .sort((a, b) => b.pageViews - a.pageViews);
+ };
+
+ const processSourceData = (data) => {
+ if (!data?.rows) {
+ console.log("No rows in source data");
+ return [];
+ }
+
+ return data.rows.map((row) => ({
+ source: row.dimensionValues[0].value || "Unknown",
+ sessions: parseInt(row.metricValues[0].value || 0),
+ conversions: parseInt(row.metricValues[1].value || 0),
+ }));
+ };
+
+ useEffect(() => {
+ const fetchData = async () => {
+ setLoading(true);
+ try {
+ const response = await fetch(
+ `/api/dashboard-analytics/user-behavior?timeRange=${timeRange}`,
+ {
+ credentials: "include",
+ }
+ );
+
+ if (!response.ok) {
+ throw new Error("Failed to fetch user behavior");
+ }
+
+ const result = await response.json();
+ console.log("Raw user behavior response:", result);
+
+ if (!result?.success) {
+ throw new Error("Invalid response structure");
+ }
+
+ // Handle both data structures
+ const rawData = result.data?.data || result.data;
+
+ // Try to access the data differently based on the structure
+ const pageResponse = rawData?.pageResponse || rawData?.reports?.[0];
+ const deviceResponse = rawData?.deviceResponse || rawData?.reports?.[1];
+ const sourceResponse = rawData?.sourceResponse || rawData?.reports?.[2];
+
+ console.log("Extracted responses:", {
+ pageResponse,
+ deviceResponse,
+ sourceResponse,
+ });
+
+ const processed = {
+ success: true,
+ data: {
+ pageData: {
+ pageData: processPageData(pageResponse),
+ deviceData: processDeviceData(deviceResponse),
+ },
+ sourceData: processSourceData(sourceResponse),
+ },
+ };
+
+ console.log("Final processed data:", processed);
+ setData(processed);
+ } catch (error) {
+ console.error("Failed to fetch behavior data:", error);
+ } finally {
+ setLoading(false);
+ }
+ };
+ fetchData();
+ }, [timeRange]);
+
+ if (loading) {
+ return (
+
+ {[...Array(3)].map((_, i) => (
+
+
+
+ User Behavior Analysis
+
+
+ + {data.device} +
++ {data.pageViews.toLocaleString()} views ({percentage}%) +
++ {data.sessions.toLocaleString()} sessions ({sessionPercentage}%) +
+
+
+ User Behavior Analysis
+
+
+
+
+
+
+
+ `${name} ${(percent * 100).toFixed(1)}%`
+ }
+ >
+ {deviceData.map((entry, index) => (
+ |
+ ))}
+
+
+
+
+
+
+ {children}
+
+
+