g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add growth analytics chart and service integration

Browse Source 
Introduces a new GrowthAnalyticsChart component and integrates growth analytics data into the dashboard. Updates analytics-service to support growth analytics API, adds types, and exposes helper functions for fetching growth analytics with store context. The dashboard UI now includes a 'Growth' tab for visualizing store growth metrics and trends.
This commit is contained in:
g
2026-01-07 03:57:31 +00:00
parent 8862aecc61
commit ce1d2d3fe8
3 changed files with 789 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
components/analytics/AnalyticsDashboard.tsx
View File

@@ -1,31 +1,46 @@
"use client"
"use client";
import { useState, useEffect, Suspense } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
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,
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import {
TrendingUp,
ShoppingCart,
Users,
Package,
DollarSign,
BarChart3,
PieChart,
Activity,
RefreshCw,
Eye,
EyeOff,
Calculator
Calculator,
} from "lucide-react";
import { useToast } from "@/hooks/use-toast";
import MetricsCard from "./MetricsCard";
import { getAnalyticsOverviewWithStore, type AnalyticsOverview } from "@/lib/services/analytics-service";
import {
getAnalyticsOverviewWithStore,
type AnalyticsOverview,
} from "@/lib/services/analytics-service";
import { formatGBP } from "@/utils/format";
import { MetricsCardSkeleton } from './SkeletonLoaders';
import dynamic from 'next/dynamic';
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";
@@ -33,24 +48,31 @@ import { addDays, startOfDay, endOfDay } from "date-fns";
import type { DateRange as ProfitDateRange } from "@/lib/services/profit-analytics-service";
// Lazy load chart components
const RevenueChart = dynamic(() => import('./RevenueChart'), {
loading: () => <ChartSkeleton />
const RevenueChart = dynamic(() => import("./RevenueChart"), {
loading: () => <ChartSkeleton />,
});
const ProductPerformanceChart = dynamic(() => import('./ProductPerformanceChart'), {
loading: () => <ChartSkeleton />
const ProductPerformanceChart = dynamic(
() => import("./ProductPerformanceChart"),
{
loading: () => <ChartSkeleton />,
},
);
const CustomerInsightsChart = dynamic(() => import("./CustomerInsightsChart"), {
loading: () => <ChartSkeleton />,
});
const CustomerInsightsChart = dynamic(() => import('./CustomerInsightsChart'), {
loading: () => <ChartSkeleton />
const OrderAnalyticsChart = dynamic(() => import("./OrderAnalyticsChart"), {
loading: () => <ChartSkeleton />,
});
const OrderAnalyticsChart = dynamic(() => import('./OrderAnalyticsChart'), {
loading: () => <ChartSkeleton />
const ProfitAnalyticsChart = dynamic(() => import("./ProfitAnalyticsChart"), {
loading: () => <ChartSkeleton />,
});
const ProfitAnalyticsChart = dynamic(() => import('./ProfitAnalyticsChart'), {
loading: () => <ChartSkeleton />
const GrowthAnalyticsChart = dynamic(() => import("./GrowthAnalyticsChart"), {
loading: () => <ChartSkeleton />,
});
// Chart loading skeleton
@@ -77,32 +99,36 @@ interface AnalyticsDashboardProps {
initialData: AnalyticsOverview;
}
export default function AnalyticsDashboard({ initialData }: AnalyticsDashboardProps) {
export default function AnalyticsDashboard({
initialData,
}: AnalyticsDashboardProps) {
const [data, setData] = useState<AnalyticsOverview>(initialData);
const [isLoading, setIsLoading] = useState(false);
const [timeRange, setTimeRange] = useState('30');
const [timeRange, setTimeRange] = useState("30");
const [hideNumbers, setHideNumbers] = useState(false);
const [profitDateRange, setProfitDateRange] = useState<DateRange | undefined>({
from: startOfDay(addDays(new Date(), -29)),
to: endOfDay(new Date())
});
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 '£***';
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));
const numLength = value.replace(/[,\.]/g, "").length;
return "*".repeat(Math.min(numLength, 4));
}
return value;
};
@@ -132,16 +158,18 @@ export default function AnalyticsDashboard({ initialData }: AnalyticsDashboardPr
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`
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`
trend: data.orders.completed > 0 ? ("up" as const) : ("neutral" as const),
trendValue: hideNumbers ? "Hidden" : `${data.orders.completed} completed`,
},
{
title: "Unique Customers",
@@ -149,7 +177,7 @@ export default function AnalyticsDashboard({ initialData }: AnalyticsDashboardPr
description: "Total customers",
icon: Users,
trend: "neutral" as const,
trendValue: "Lifetime customers"
trendValue: "Lifetime customers",
},
{
title: "Products",
@@ -157,8 +185,8 @@ export default function AnalyticsDashboard({ initialData }: AnalyticsDashboardPr
description: "Active products",
icon: Package,
trend: "neutral" as const,
trendValue: "In your store"
}
trendValue: "In your store",
},
];
return (
@@ -166,7 +194,9 @@ export default function AnalyticsDashboard({ initialData }: AnalyticsDashboardPr
{/* Header with Privacy Toggle */}
<div className="flex items-center justify-between">
<div>
<h2 className="text-3xl font-bold tracking-tight">Analytics Dashboard</h2>
<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>
@@ -197,7 +227,9 @@ export default function AnalyticsDashboard({ initialData }: AnalyticsDashboardPr
disabled={isLoading}
className="flex items-center gap-2"
>
<RefreshCw className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
<RefreshCw
className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`}
/>
Refresh
</Button>
</div>
@@ -205,15 +237,11 @@ export default function AnalyticsDashboard({ initialData }: AnalyticsDashboardPr
{/* Key Metrics Cards */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 lg:gap-6">
{isLoading ? (
[...Array(4)].map((_, i) => (
<MetricsCardSkeleton key={i} />
))
) : (
metrics.map((metric) => (
<MetricsCard key={metric.title} {...metric} />
))
)}
{isLoading
? [...Array(4)].map((_, i) => <MetricsCardSkeleton key={i} />)
: metrics.map((metric) => (
<MetricsCard key={metric.title} {...metric} />
))}
</div>
{/* Completion Rate Card */}
@@ -243,14 +271,20 @@ export default function AnalyticsDashboard({ initialData }: AnalyticsDashboardPr
</div>
<div className="flex-1">
<div className="w-full bg-secondary rounded-full h-2">
<div
<div
className="bg-primary h-2 rounded-full transition-all duration-300"
style={{ width: hideNumbers ? "0%" : `${data.orders.completionRate}%` }}
style={{
width: hideNumbers
? "0%"
: `${data.orders.completionRate}%`,
}}
/>
</div>
</div>
<Badge variant="secondary">
{hideNumbers ? "** / **" : `${data.orders.completed} / ${data.orders.total}`}
{hideNumbers
? "** / **"
: `${data.orders.completed} / ${data.orders.total}`}
</Badge>
</div>
)}
@@ -262,7 +296,8 @@ export default function AnalyticsDashboard({ initialData }: AnalyticsDashboardPr
<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.
Revenue, Profit, and Orders tabs use time filtering. Products and
Customers show all-time data.
</p>
</div>
<Select value={timeRange} onValueChange={setTimeRange}>
@@ -279,8 +314,12 @@ export default function AnalyticsDashboard({ initialData }: AnalyticsDashboardPr
{/* Analytics Tabs */}
<div className="space-y-6">
<Tabs defaultValue="revenue" className="space-y-6">
<TabsList className="grid w-full grid-cols-2 sm:grid-cols-3 lg:grid-cols-5">
<Tabs defaultValue="growth" className="space-y-6">
<TabsList className="grid w-full grid-cols-2 sm:grid-cols-3 lg:grid-cols-6">
<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
@@ -303,6 +342,12 @@ export default function AnalyticsDashboard({ initialData }: AnalyticsDashboardPr
</TabsTrigger>
</TabsList>
<TabsContent value="growth" className="space-y-6">
<Suspense fallback={<ChartSkeleton />}>
<GrowthAnalyticsChart hideNumbers={hideNumbers} />
</Suspense>
</TabsContent>
<TabsContent value="revenue" className="space-y-6">
<Suspense fallback={<ChartSkeleton />}>
<RevenueChart timeRange={timeRange} hideNumbers={hideNumbers} />
@@ -330,7 +375,8 @@ export default function AnalyticsDashboard({ initialData }: AnalyticsDashboardPr
{profitDateRange?.from && profitDateRange?.to && (
<div className="text-sm text-muted-foreground flex items-center">
<span>
{profitDateRange.from.toLocaleDateString()} - {profitDateRange.to.toLocaleDateString()}
{profitDateRange.from.toLocaleDateString()} -{" "}
{profitDateRange.to.toLocaleDateString()}
</span>
</div>
)}
@@ -338,12 +384,16 @@ export default function AnalyticsDashboard({ initialData }: AnalyticsDashboardPr
</CardContent>
</Card>
<Suspense fallback={<ChartSkeleton />}>
<ProfitAnalyticsChart
dateRange={profitDateRange?.from && profitDateRange?.to ? {
from: profitDateRange.from,
to: profitDateRange.to
} : undefined}
hideNumbers={hideNumbers}
<ProfitAnalyticsChart
dateRange={
profitDateRange?.from && profitDateRange?.to
? {
from: profitDateRange.from,
to: profitDateRange.to,
}
: undefined
}
hideNumbers={hideNumbers}
/>
</Suspense>
</TabsContent>
@@ -369,4 +419,4 @@ export default function AnalyticsDashboard({ initialData }: AnalyticsDashboardPr
</div>
</div>
);
}
}