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

fix

Browse Source
This commit is contained in:
NotII
2025-07-01 01:49:49 +01:00
parent 20ae136e37
commit 18e87721e2
8 changed files with 458 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
components/analytics/AnalyticsDashboardSkeleton.tsx Normal file
View File

@@ -0,0 +1,204 @@
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 { MetricsCardSkeleton } from './SkeletonLoaders';
import {
TrendingUp,
Package,
Users,
BarChart3,
Activity
} from "lucide-react";
export default function AnalyticsDashboardSkeleton() {
return (
<div className="space-y-6">
{/* Key Metrics Cards */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{[...Array(4)].map((_, i) => (
<MetricsCardSkeleton key={i} />
))}
</div>
{/* Completion Rate Card */}
<Card>
<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>
<div className="flex items-center gap-4">
<Skeleton className="h-12 w-16" />
<div className="flex-1">
<Skeleton className="w-full h-2 rounded-full" />
</div>
<Skeleton className="h-6 w-16" />
</div>
</CardContent>
</Card>
{/* Analytics Tabs */}
<div className="space-y-6">
<Tabs defaultValue="revenue" className="space-y-6">
<TabsList className="grid w-full grid-cols-4">
<TabsTrigger value="revenue" className="flex items-center gap-2">
<TrendingUp className="h-4 w-4" />
Revenue
</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>
</TabsList>
<TabsContent value="revenue" className="space-y-6">
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<TrendingUp className="h-5 w-5" />
Revenue Trends
</CardTitle>
<CardDescription>
Revenue performance over the selected time period
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-6">
{/* Chart area */}
<div className="h-64 bg-muted/20 rounded-md animate-pulse" />
{/* Summary stats */}
<div className="grid grid-cols-3 gap-4 pt-4 border-t">
{[...Array(3)].map((_, i) => (
<div key={i} className="text-center space-y-2">
<Skeleton className="h-8 w-20 mx-auto" />
<Skeleton className="h-4 w-24 mx-auto" />
</div>
))}
</div>
</div>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="products" className="space-y-6">
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Package className="h-5 w-5" />
Product Performance
</CardTitle>
<CardDescription>
Top performing products by revenue and sales
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
{/* Table header */}
<div className="grid grid-cols-5 gap-4">
{[...Array(5)].map((_, i) => (
<Skeleton key={i} className="h-4 w-full" />
))}
</div>
{/* Table rows */}
{[...Array(8)].map((_, rowIndex) => (
<div key={rowIndex} className="grid grid-cols-5 gap-4">
{[...Array(5)].map((_, colIndex) => (
<div key={colIndex} className="flex items-center gap-3">
{colIndex === 0 && (
<Skeleton className="h-10 w-10 rounded" />
)}
<Skeleton className="h-4 flex-1" />
</div>
))}
</div>
))}
</div>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="customers" className="space-y-6">
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Users className="h-5 w-5" />
Customer Insights
</CardTitle>
<CardDescription>
Customer segmentation and behavior analysis
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-6">
{/* Customer segments */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
{[...Array(4)].map((_, i) => (
<div key={i} className="text-center space-y-2">
<Skeleton className="h-8 w-16 mx-auto" />
<Skeleton className="h-4 w-20 mx-auto" />
</div>
))}
</div>
{/* Top customers table */}
<div className="space-y-4">
<Skeleton className="h-6 w-32" />
{[...Array(5)].map((_, i) => (
<div key={i} className="flex items-center justify-between p-4 border rounded-lg">
<div className="space-y-2">
<Skeleton className="h-4 w-24" />
<Skeleton className="h-3 w-16" />
</div>
<div className="text-right space-y-2">
<Skeleton className="h-4 w-16" />
<Skeleton className="h-3 w-12" />
</div>
</div>
))}
</div>
</div>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="orders" className="space-y-6">
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<BarChart3 className="h-5 w-5" />
Order Analytics
</CardTitle>
<CardDescription>
Order status distribution and trends
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-6">
{/* Chart area */}
<div className="h-64 bg-muted/20 rounded-md animate-pulse" />
</div>
</CardContent>
</Card>
</TabsContent>
</Tabs>
</div>
</div>
);
}