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

Refactor UI imports and update component paths
Some checks failed
Build Frontend / build (push) Failing after 7s
Details

Browse Source 
Replaces imports from 'components/ui' with 'components/common' across the app and dashboard pages, and updates model and API imports to use new paths under 'lib'. Removes redundant authentication checks from several dashboard pages. Adds new dashboard components and utility files, and reorganizes hooks and services into the 'lib' directory for improved structure.
This commit is contained in:
g
2026-01-13 05:02:13 +00:00
parent a6e6cd0757
commit fe01f31538
173 changed files with 1512 additions and 867 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
components/analytics/AnalyticsDashboard.tsx
View File

@@ -7,17 +7,17 @@ import {
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";
} from "@/components/common/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/common/tabs";
import { Badge } from "@/components/common/badge";
import { Button } from "@/components/common/button";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
} from "@/components/common/select";
import {
TrendingUp,
ShoppingCart,
@@ -32,21 +32,21 @@ import {
EyeOff,
Calculator,
} from "lucide-react";
import { useToast } from "@/hooks/use-toast";
import { useToast } from "@/lib/hooks/use-toast";
import MetricsCard from "./MetricsCard";
import {
getAnalyticsOverviewWithStore,
type AnalyticsOverview,
} from "@/lib/services/analytics-service";
import { formatGBP } from "@/utils/format";
import { formatGBP, formatNumber } from "@/lib/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 { Skeleton } from "@/components/common/skeleton";
import { DateRangePicker } from "@/components/common/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 { MotionWrapper } from "@/components/common/motion-wrapper";
import { motion } from "framer-motion";
const RevenueChart = dynamic(() => import("./RevenueChart"), {
@@ -170,7 +170,7 @@ export default function AnalyticsDashboard({
},
{
title: "Total Orders",
value: maskValue(data.orders.total.toLocaleString()),
value: maskValue(formatNumber(data.orders.total)),
description: "All-time orders",
icon: ShoppingCart,
trend: data.orders.completed > 0 ? ("up" as const) : ("neutral" as const),
@@ -178,7 +178,7 @@ export default function AnalyticsDashboard({
},
{
title: "Unique Customers",
value: maskValue(data.customers.unique.toLocaleString()),
value: maskValue(formatNumber(data.customers.unique)),
description: "Total customers",
icon: Users,
trend: "neutral" as const,
@@ -186,7 +186,7 @@ export default function AnalyticsDashboard({
},
{
title: "Products",
value: maskValue(data.products.total.toLocaleString()),
value: maskValue(formatNumber(data.products.total)),
description: "Active products",
icon: Package,
trend: "neutral" as const,
@@ -451,3 +451,5 @@ export default function AnalyticsDashboard({
</div>
);
}

8
components/analytics/AnalyticsDashboardSkeleton.tsx
View File

@@ -1,6 +1,6 @@
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/common/card";
import { Skeleton } from "@/components/common/skeleton";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/common/tabs";
import { MetricsCardSkeleton } from './SkeletonLoaders';
import {
TrendingUp,
@@ -201,4 +201,4 @@ export default function AnalyticsDashboardSkeleton() {
</div>
</div>
);
}
}

17
components/analytics/CustomerInsightsChart.tsx
View File

@@ -1,15 +1,15 @@
"use client"
import { useState, useEffect } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { useToast } from "@/hooks/use-toast";
import { Skeleton } from "@/components/ui/skeleton";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/common/card";
import { Badge } from "@/components/common/badge";
import { Button } from "@/components/common/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/common/select";
import { useToast } from "@/lib/hooks/use-toast";
import { Skeleton } from "@/components/common/skeleton";
import { Users, Crown, UserPlus, UserCheck, Star, ChevronLeft, ChevronRight } from "lucide-react";
import { getCustomerInsightsWithStore, type CustomerInsights } from "@/lib/services/analytics-service";
import { formatGBP } from "@/utils/format";
import { formatGBP } from "@/lib/utils/format";
import { CustomerInsightsSkeleton } from './SkeletonLoaders';
export default function CustomerInsightsChart() {
@@ -305,4 +305,5 @@ export default function CustomerInsightsChart() {
</Card>
</div>
);
}
}

47
components/analytics/GrowthAnalyticsChart.tsx
View File

@@ -7,9 +7,9 @@ import {
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { useToast } from "@/hooks/use-toast";
} from "@/components/common/card";
import { Button } from "@/components/common/button";
import { useToast } from "@/lib/hooks/use-toast";
import { RefreshCw } from "lucide-react";
import {
getGrowthAnalyticsWithStore,
@@ -26,6 +26,7 @@ import {
ResponsiveContainer,
Area,
} from "recharts";
import { formatGBP, formatNumber } from "@/lib/utils/format";
interface GrowthAnalyticsChartProps {
hideNumbers?: boolean;
@@ -63,14 +64,6 @@ export default function GrowthAnalyticsChart({
fetchGrowthData();
};
const formatCurrency = (value: number) => {
if (hideNumbers) return "£***";
return new Intl.NumberFormat("en-GB", {
style: "currency",
currency: "GBP",
maximumFractionDigits: 0,
}).format(value);
};
return (
<div className="space-y-6">
@@ -115,9 +108,7 @@ export default function GrowthAnalyticsChart({
Total Orders
</div>
<div className="text-2xl font-bold">
{hideNumbers
? "***"
: growthData.cumulative.orders.toLocaleString()}
{hideNumbers ? "***" : formatNumber(growthData.cumulative.orders)}
</div>
</CardContent>
</Card>
@@ -127,7 +118,7 @@ export default function GrowthAnalyticsChart({
Total Revenue
</div>
<div className="text-2xl font-bold text-green-600">
{formatCurrency(growthData.cumulative.revenue)}
{hideNumbers ? "£***" : formatGBP(growthData.cumulative.revenue)}
</div>
</CardContent>
</Card>
@@ -137,9 +128,7 @@ export default function GrowthAnalyticsChart({
Customers
</div>
<div className="text-2xl font-bold">
{hideNumbers
? "***"
: growthData.cumulative.customers.toLocaleString()}
{hideNumbers ? "***" : formatNumber(growthData.cumulative.customers)}
</div>
</CardContent>
</Card>
@@ -149,9 +138,7 @@ export default function GrowthAnalyticsChart({
Products
</div>
<div className="text-2xl font-bold">
{hideNumbers
? "***"
: growthData.cumulative.products.toLocaleString()}
{hideNumbers ? "***" : formatNumber(growthData.cumulative.products)}
</div>
</CardContent>
</Card>
@@ -161,7 +148,7 @@ export default function GrowthAnalyticsChart({
Avg Order Value
</div>
<div className="text-2xl font-bold">
{formatCurrency(growthData.cumulative.avgOrderValue)}
{hideNumbers ? "£***" : formatGBP(growthData.cumulative.avgOrderValue)}
</div>
</CardContent>
</Card>
@@ -236,16 +223,16 @@ export default function GrowthAnalyticsChart({
Orders:{" "}
{hideNumbers
? "***"
: data.orders.toLocaleString()}
: formatNumber(data.orders)}
</p>
<p className="text-sm text-green-600">
Revenue: {formatCurrency(data.revenue)}
Revenue: {hideNumbers ? "£***" : formatGBP(data.revenue)}
</p>
<p className="text-sm text-purple-600">
Customers:{" "}
{hideNumbers
? "***"
: data.customers.toLocaleString()}
: formatNumber(data.customers)}
</p>
{data.newCustomers !== undefined && (
<p className="text-sm text-cyan-600">
@@ -327,16 +314,16 @@ export default function GrowthAnalyticsChart({
)}
</td>
<td className="text-right p-2">
{hideNumbers ? "***" : month.orders.toLocaleString()}
{hideNumbers ? "***" : formatNumber(month.orders)}
</td>
<td className="text-right p-2 text-green-600">
{formatCurrency(month.revenue)}
{hideNumbers ? "£***" : formatGBP(month.revenue)}
</td>
<td className="text-right p-2">
{hideNumbers ? "***" : month.customers.toLocaleString()}
{hideNumbers ? "***" : formatNumber(month.customers)}
</td>
<td className="text-right p-2">
{formatCurrency(month.avgOrderValue)}
{hideNumbers ? "£***" : formatGBP(month.avgOrderValue)}
</td>
<td className="text-right p-2">
{hideNumbers ? "***" : (month.newCustomers ?? 0)}
@@ -352,3 +339,5 @@ export default function GrowthAnalyticsChart({
</div>
);
}

4
components/analytics/MetricsCard.tsx
View File

@@ -1,6 +1,6 @@
"use client"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/common/card";
import { TrendingUp, TrendingDown, Minus } from "lucide-react";
import { LucideIcon } from "lucide-react";
import { motion } from "framer-motion";
@@ -112,4 +112,4 @@ export default function MetricsCard({
</Card>
</motion.div>
);
}
}

13
components/analytics/OrderAnalyticsChart.tsx
View File

@@ -1,13 +1,13 @@
"use client"
import { useState, useEffect } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { useToast } from "@/hooks/use-toast";
import { Skeleton } from "@/components/ui/skeleton";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/common/card";
import { Badge } from "@/components/common/badge";
import { useToast } from "@/lib/hooks/use-toast";
import { Skeleton } from "@/components/common/skeleton";
import { BarChart3, Clock, CheckCircle, XCircle, AlertCircle, AlertTriangle } from "lucide-react";
import { getOrderAnalyticsWithStore, type OrderAnalytics } from "@/lib/services/analytics-service";
import { formatGBP } from "@/utils/format";
import { formatGBP } from "@/lib/utils/format";
import { ChartSkeleton } from './SkeletonLoaders';
interface OrderAnalyticsChartProps {
@@ -201,4 +201,5 @@ export default function OrderAnalyticsChart({ timeRange }: OrderAnalyticsChartPr
</CardContent>
</Card>
);
}
}

24
components/analytics/PredictionsChart.tsx
View File

@@ -7,16 +7,16 @@ import {
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
} from "@/components/common/card";
import { Badge } from "@/components/common/badge";
import { Button } from "@/components/common/button";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
} from "@/components/common/select";
import {
TrendingUp,
TrendingDown,
@@ -32,8 +32,8 @@ import {
Info,
Download,
} from "lucide-react";
import { useToast } from "@/hooks/use-toast";
import { Skeleton } from "@/components/ui/skeleton";
import { useToast } from "@/lib/hooks/use-toast";
import { Skeleton } from "@/components/common/skeleton";
import CountUp from "react-countup";
import {
getPredictionsOverviewWithStore,
@@ -41,7 +41,7 @@ import {
type PredictionsOverview,
type StockPredictionsResponse,
} from "@/lib/services/analytics-service";
import { formatGBP } from "@/utils/format";
import { formatGBP } from "@/lib/utils/format";
import {
Table,
TableBody,
@@ -49,7 +49,7 @@ import {
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
} from "@/components/common/table";
import { format } from "date-fns";
import {
AreaChart,
@@ -65,9 +65,9 @@ import {
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Slider } from "@/components/ui/slider";
} from "@/components/common/tooltip";
import { Alert, AlertDescription, AlertTitle } from "@/components/common/alert";
import { Slider } from "@/components/common/slider";
interface PredictionsChartProps {
timeRange?: number;
@@ -933,3 +933,5 @@ export default function PredictionsChart({
</Card >
);
}

23
components/analytics/ProductPerformanceChart.tsx
View File

@@ -1,14 +1,14 @@
"use client"
import { useState, useEffect } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { useToast } from "@/hooks/use-toast";
import { Skeleton } from "@/components/ui/skeleton";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/common/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/common/table";
import { Badge } from "@/components/common/badge";
import { useToast } from "@/lib/hooks/use-toast";
import { Skeleton } from "@/components/common/skeleton";
import { Package } from "lucide-react";
import { getProductPerformanceWithStore, type ProductPerformance } from "@/lib/services/analytics-service";
import { formatGBP } from "@/utils/format";
import { formatGBP, formatNumber } from "@/lib/utils/format";
import { TableSkeleton } from './SkeletonLoaders';
export default function ProductPerformanceChart() {
@@ -123,10 +123,10 @@ export default function ProductPerformanceChart() {
<TableRow key={product.productId}>
<TableCell>
<div className="flex items-center gap-3">
<div
<div
className="h-10 w-10 bg-cover bg-center rounded border flex-shrink-0"
style={{
backgroundImage: product.image
style={{
backgroundImage: product.image
? `url(/api/products/${product.productId}/image)`
: 'none'
}}
@@ -137,7 +137,7 @@ export default function ProductPerformanceChart() {
</div>
</TableCell>
<TableCell className="text-right font-medium">
{parseInt(product.totalSold.toFixed(0)).toLocaleString()} {product.unitType}
{formatNumber(parseInt(product.totalSold.toFixed(0)))} {product.unitType}
</TableCell>
<TableCell className="text-right font-medium text-green-600">
{formatGBP(product.totalRevenue)}
@@ -155,4 +155,5 @@ export default function ProductPerformanceChart() {
</CardContent>
</Card>
);
}
}

14
components/analytics/ProfitAnalyticsChart.tsx
View File

@@ -1,9 +1,9 @@
"use client"
import { useState, useEffect } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/common/card";
import { Badge } from "@/components/common/badge";
import { Alert, AlertDescription } from "@/components/common/alert";
import {
TrendingUp,
TrendingDown,
@@ -14,10 +14,10 @@ import {
AlertTriangle,
Package
} from "lucide-react";
import { useToast } from "@/hooks/use-toast";
import { formatGBP } from "@/utils/format";
import { useToast } from "@/lib/hooks/use-toast";
import { formatGBP } from "@/lib/utils/format";
import { getProfitOverview, type ProfitOverview, type DateRange } from "@/lib/services/profit-analytics-service";
import { Skeleton } from "@/components/ui/skeleton";
import { Skeleton } from "@/components/common/skeleton";
interface ProfitAnalyticsChartProps {
timeRange?: string;
@@ -379,3 +379,5 @@ export default function ProfitAnalyticsChart({ timeRange, dateRange, hideNumbers
</div>
);
}

11
components/analytics/RevenueChart.tsx
View File

@@ -1,12 +1,12 @@
"use client"
import { useState, useEffect } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { useToast } from "@/hooks/use-toast";
import { Skeleton } from "@/components/ui/skeleton";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/common/card";
import { useToast } from "@/lib/hooks/use-toast";
import { Skeleton } from "@/components/common/skeleton";
import { TrendingUp, DollarSign } from "lucide-react";
import { getRevenueTrendsWithStore, type RevenueData } from "@/lib/services/analytics-service";
import { formatGBP } from "@/utils/format";
import { formatGBP } from "@/lib/utils/format";
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from 'recharts';
import { ChartSkeleton } from './SkeletonLoaders';
@@ -239,4 +239,5 @@ export default function RevenueChart({ timeRange, hideNumbers = false }: Revenue
</CardContent>
</Card>
);
}
}

6
components/analytics/SkeletonLoaders.tsx
View File

@@ -1,5 +1,5 @@
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/common/card";
import { Skeleton } from "@/components/common/skeleton";
// Chart skeleton for revenue trends and order analytics
export function ChartSkeleton({
@@ -167,4 +167,4 @@ export function MetricsCardSkeleton() {
</CardContent>
</Card>
);
}
}

13
components/analytics/StoreSelector.tsx
View File

@@ -2,12 +2,12 @@
import { useState, useEffect } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/common/button";
import { Input } from "@/components/common/input";
import { Label } from "@/components/common/label";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/common/card";
import { Store, Search } from "lucide-react";
import { useToast } from "@/hooks/use-toast";
import { useToast } from "@/lib/hooks/use-toast";
export default function StoreSelector() {
const [storeId, setStoreId] = useState('');
@@ -111,4 +111,5 @@ export default function StoreSelector() {
</CardContent>
</Card>
);
}
}