f7af5b933d
All checks were successful
Build Frontend / build (push) Successful in 1m5s
Refactors PredictionsChart to fetch all prediction data in a single batch for instant client-side switching between horizons and simulation factors. Updates state management and effects to utilize the pre-cached batch data, reducing API calls and improving responsiveness. Minor UI text update to remove TensorFlow.js mention.
456 lines
16 KiB
TypeScript
456 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, Suspense } from "react";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import {
|
|
TrendingUp,
|
|
ShoppingCart,
|
|
Users,
|
|
Package,
|
|
DollarSign,
|
|
BarChart3,
|
|
PieChart,
|
|
Activity,
|
|
RefreshCw,
|
|
Eye,
|
|
EyeOff,
|
|
Calculator,
|
|
} from "lucide-react";
|
|
import { useToast } from "@/hooks/use-toast";
|
|
import MetricsCard from "./MetricsCard";
|
|
import {
|
|
getAnalyticsOverviewWithStore,
|
|
type AnalyticsOverview,
|
|
} from "@/lib/services/analytics-service";
|
|
import { formatGBP } from "@/utils/format";
|
|
import { MetricsCardSkeleton } from "./SkeletonLoaders";
|
|
import dynamic from "next/dynamic";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { DateRangePicker } from "@/components/ui/date-picker";
|
|
import { DateRange } from "react-day-picker";
|
|
import { addDays, startOfDay, endOfDay } from "date-fns";
|
|
import type { DateRange as ProfitDateRange } from "@/lib/services/profit-analytics-service";
|
|
import { MotionWrapper } from "@/components/ui/motion-wrapper";
|
|
import { motion } from "framer-motion";
|
|
|
|
const RevenueChart = dynamic(() => import("./RevenueChart"), {
|
|
loading: () => <ChartSkeleton />,
|
|
});
|
|
|
|
const ProductPerformanceChart = dynamic(
|
|
() => import("./ProductPerformanceChart"),
|
|
{
|
|
loading: () => <ChartSkeleton />,
|
|
},
|
|
);
|
|
|
|
const CustomerInsightsChart = dynamic(() => import("./CustomerInsightsChart"), {
|
|
loading: () => <ChartSkeleton />,
|
|
});
|
|
|
|
const OrderAnalyticsChart = dynamic(() => import("./OrderAnalyticsChart"), {
|
|
loading: () => <ChartSkeleton />,
|
|
});
|
|
|
|
const ProfitAnalyticsChart = dynamic(() => import("./ProfitAnalyticsChart"), {
|
|
loading: () => <ChartSkeleton />,
|
|
});
|
|
|
|
const GrowthAnalyticsChart = dynamic(() => import("./GrowthAnalyticsChart"), {
|
|
loading: () => <ChartSkeleton />,
|
|
});
|
|
|
|
const PredictionsChart = dynamic(() => import("./PredictionsChart"), {
|
|
loading: () => <ChartSkeleton />,
|
|
});
|
|
|
|
// Chart loading skeleton
|
|
function ChartSkeleton() {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<Skeleton className="h-6 w-48" />
|
|
<Skeleton className="h-4 w-72" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="h-80 w-full flex items-center justify-center">
|
|
<div className="flex flex-col items-center gap-2">
|
|
<BarChart3 className="h-8 w-8 text-muted-foreground animate-pulse" />
|
|
<Skeleton className="h-4 w-32" />
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
interface AnalyticsDashboardProps {
|
|
initialData: AnalyticsOverview;
|
|
}
|
|
|
|
export default function AnalyticsDashboard({
|
|
initialData,
|
|
}: AnalyticsDashboardProps) {
|
|
const [data, setData] = useState<AnalyticsOverview>(initialData);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [timeRange, setTimeRange] = useState("90");
|
|
const [hideNumbers, setHideNumbers] = useState(false);
|
|
const [profitDateRange, setProfitDateRange] = useState<DateRange | undefined>(
|
|
{
|
|
from: startOfDay(addDays(new Date(), -29)),
|
|
to: endOfDay(new Date()),
|
|
},
|
|
);
|
|
const { toast } = useToast();
|
|
|
|
// Function to mask sensitive numbers
|
|
const maskValue = (value: string): string => {
|
|
if (!hideNumbers) return value;
|
|
|
|
// For currency values (£X.XX), show £***
|
|
if (value.includes("£")) {
|
|
return "£***";
|
|
}
|
|
|
|
// For regular numbers, replace with asterisks maintaining similar length
|
|
if (value.match(/^\d/)) {
|
|
const numLength = value.replace(/[,\.]/g, "").length;
|
|
return "*".repeat(Math.min(numLength, 4));
|
|
}
|
|
|
|
return value;
|
|
};
|
|
|
|
const refreshData = async () => {
|
|
try {
|
|
setIsLoading(true);
|
|
const newData = await getAnalyticsOverviewWithStore();
|
|
setData(newData);
|
|
toast({
|
|
title: "Data refreshed",
|
|
description: "Analytics data has been updated successfully.",
|
|
});
|
|
} catch (error) {
|
|
toast({
|
|
title: "Error",
|
|
description: "Failed to refresh analytics data.",
|
|
variant: "destructive",
|
|
});
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const metrics = [
|
|
{
|
|
title: "Total Revenue",
|
|
value: maskValue(formatGBP(data.revenue.total)),
|
|
description: "All-time revenue",
|
|
icon: DollarSign,
|
|
trend: data.revenue.monthly > 0 ? ("up" as const) : ("neutral" as const),
|
|
trendValue: hideNumbers
|
|
? "Hidden"
|
|
: `${formatGBP(data.revenue.monthly)} this month`,
|
|
},
|
|
{
|
|
title: "Total Orders",
|
|
value: maskValue(data.orders.total.toLocaleString()),
|
|
description: "All-time orders",
|
|
icon: ShoppingCart,
|
|
trend: data.orders.completed > 0 ? ("up" as const) : ("neutral" as const),
|
|
trendValue: hideNumbers ? "Hidden" : `${data.orders.completed} completed`,
|
|
},
|
|
{
|
|
title: "Unique Customers",
|
|
value: maskValue(data.customers.unique.toLocaleString()),
|
|
description: "Total customers",
|
|
icon: Users,
|
|
trend: "neutral" as const,
|
|
trendValue: "Lifetime customers",
|
|
},
|
|
{
|
|
title: "Products",
|
|
value: maskValue(data.products.total.toLocaleString()),
|
|
description: "Active products",
|
|
icon: Package,
|
|
trend: "neutral" as const,
|
|
trendValue: "In your store",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="space-y-10">
|
|
{/* Header with Privacy Toggle */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h2 className="text-3xl font-bold tracking-tight">
|
|
Analytics Dashboard
|
|
</h2>
|
|
<p className="text-muted-foreground">
|
|
Overview of your store's performance and metrics.
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setHideNumbers(!hideNumbers)}
|
|
className="flex items-center gap-2"
|
|
>
|
|
{hideNumbers ? (
|
|
<>
|
|
<EyeOff className="h-4 w-4" />
|
|
Show Numbers
|
|
</>
|
|
) : (
|
|
<>
|
|
<Eye className="h-4 w-4" />
|
|
Hide Numbers
|
|
</>
|
|
)}
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={refreshData}
|
|
disabled={isLoading}
|
|
className="flex items-center gap-2"
|
|
>
|
|
<RefreshCw
|
|
className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`}
|
|
/>
|
|
Refresh
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Key Metrics Cards */}
|
|
<MotionWrapper className="space-y-10">
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 lg:gap-8">
|
|
{isLoading
|
|
? [...Array(4)].map((_, i) => <MetricsCardSkeleton key={i} />)
|
|
: metrics.map((metric) => (
|
|
<MetricsCard key={metric.title} {...metric} />
|
|
))}
|
|
</div>
|
|
|
|
{/* Completion Rate Card */}
|
|
<motion.div>
|
|
<Card className="hover:shadow-xl hover:border-indigo-500/30 transition-all duration-300">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Activity className="h-5 w-5" />
|
|
Order Completion Rate
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Percentage of orders that have been successfully completed
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{isLoading ? (
|
|
<div className="flex items-center gap-4">
|
|
<div className="h-12 w-16 bg-muted/20 rounded animate-pulse" />
|
|
<div className="flex-1">
|
|
<div className="w-full bg-muted/20 rounded-full h-2 animate-pulse" />
|
|
</div>
|
|
<div className="h-6 w-16 bg-muted/20 rounded animate-pulse" />
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center gap-4">
|
|
<div className="text-3xl font-bold">
|
|
{hideNumbers ? "**%" : `${data.orders.completionRate}%`}
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="w-full bg-secondary rounded-full h-2">
|
|
<div
|
|
className="bg-primary h-2 rounded-full transition-all duration-300"
|
|
style={{
|
|
width: hideNumbers
|
|
? "0%"
|
|
: `${data.orders.completionRate}%`,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<Badge variant="secondary">
|
|
{hideNumbers
|
|
? "** / **"
|
|
: `${data.orders.completed} / ${data.orders.total}`}
|
|
</Badge>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
|
|
{/* Time Period Selector */}
|
|
<div className="flex flex-col sm:flex-row gap-4 sm:items-center sm:justify-between">
|
|
<div>
|
|
<h3 className="text-lg font-semibold">Time Period</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
Revenue, Profit, and Orders tabs use time filtering. Products and
|
|
Customers show all-time data.
|
|
</p>
|
|
</div>
|
|
<Select value={timeRange} onValueChange={setTimeRange}>
|
|
<SelectTrigger className="w-32">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="7">Last 7 days</SelectItem>
|
|
<SelectItem value="30">Last 30 days</SelectItem>
|
|
<SelectItem value="90">Last 90 days</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* Analytics Tabs */}
|
|
<div className="space-y-8">
|
|
<Tabs defaultValue="growth" className="space-y-8">
|
|
<TabsList className="grid w-full grid-cols-2 sm:grid-cols-3 lg:grid-cols-7">
|
|
<TabsTrigger value="growth" className="flex items-center gap-2">
|
|
<Activity className="h-4 w-4" />
|
|
Growth
|
|
</TabsTrigger>
|
|
<TabsTrigger value="revenue" className="flex items-center gap-2">
|
|
<TrendingUp className="h-4 w-4" />
|
|
Revenue
|
|
</TabsTrigger>
|
|
<TabsTrigger value="profit" className="flex items-center gap-2">
|
|
<Calculator className="h-4 w-4" />
|
|
Profit
|
|
</TabsTrigger>
|
|
<TabsTrigger value="products" className="flex items-center gap-2">
|
|
<Package className="h-4 w-4" />
|
|
Products
|
|
</TabsTrigger>
|
|
<TabsTrigger value="customers" className="flex items-center gap-2">
|
|
<Users className="h-4 w-4" />
|
|
Customers
|
|
</TabsTrigger>
|
|
<TabsTrigger value="orders" className="flex items-center gap-2">
|
|
<BarChart3 className="h-4 w-4" />
|
|
Orders
|
|
</TabsTrigger>
|
|
<TabsTrigger value="predictions" className="flex items-center gap-2">
|
|
<TrendingUp className="h-4 w-4" />
|
|
Predictions
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="growth" className="space-y-6">
|
|
<motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }}>
|
|
<Suspense fallback={<ChartSkeleton />}>
|
|
<GrowthAnalyticsChart hideNumbers={hideNumbers} />
|
|
</Suspense>
|
|
</motion.div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="revenue" className="space-y-6">
|
|
<motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }}>
|
|
<Suspense fallback={<ChartSkeleton />}>
|
|
<RevenueChart timeRange={timeRange} hideNumbers={hideNumbers} />
|
|
</Suspense>
|
|
</motion.div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="profit" className="space-y-6">
|
|
<motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }}>
|
|
{/* Date Range Selector for Profit Calculator */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-lg">Date Range</CardTitle>
|
|
<CardDescription>
|
|
Select a custom date range for profit calculations
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex flex-col sm:flex-row gap-4 sm:items-center">
|
|
<DateRangePicker
|
|
dateRange={profitDateRange}
|
|
onDateRangeChange={setProfitDateRange}
|
|
placeholder="Select date range"
|
|
showPresets={true}
|
|
className="w-full sm:w-auto"
|
|
/>
|
|
{profitDateRange?.from && profitDateRange?.to && (
|
|
<div className="text-sm text-muted-foreground flex items-center">
|
|
<span>
|
|
{profitDateRange.from.toLocaleDateString()} -{" "}
|
|
{profitDateRange.to.toLocaleDateString()}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Suspense fallback={<ChartSkeleton />}>
|
|
<ProfitAnalyticsChart
|
|
dateRange={
|
|
profitDateRange?.from && profitDateRange?.to
|
|
? {
|
|
from: profitDateRange.from,
|
|
to: profitDateRange.to,
|
|
}
|
|
: undefined
|
|
}
|
|
hideNumbers={hideNumbers}
|
|
/>
|
|
</Suspense>
|
|
</motion.div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="products" className="space-y-6">
|
|
<motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }}>
|
|
<Suspense fallback={<ChartSkeleton />}>
|
|
<ProductPerformanceChart />
|
|
</Suspense>
|
|
</motion.div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="customers" className="space-y-6">
|
|
<motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }}>
|
|
<Suspense fallback={<ChartSkeleton />}>
|
|
<CustomerInsightsChart />
|
|
</Suspense>
|
|
</motion.div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="orders" className="space-y-6">
|
|
<motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }}>
|
|
<Suspense fallback={<ChartSkeleton />}>
|
|
<OrderAnalyticsChart timeRange={timeRange} />
|
|
</Suspense>
|
|
</motion.div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="predictions" className="space-y-6">
|
|
<motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }}>
|
|
<Suspense fallback={<ChartSkeleton />}>
|
|
<PredictionsChart timeRange={parseInt(timeRange)} />
|
|
</Suspense>
|
|
</motion.div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
</MotionWrapper>
|
|
</div>
|
|
);
|
|
}
|