141 lines
4.4 KiB
TypeScript
141 lines
4.4 KiB
TypeScript
import Dashboard from "@/components/dashboard/dashboard";
|
|
import { fetchServer } from '@/lib/api';
|
|
import { performance } from 'perf_hooks';
|
|
import { Info, GitCommit, User, Zap } from 'lucide-react';
|
|
import packageJson from '../../package.json';
|
|
import { getGitInfo, getShortGitHash } from '@/lib/utils/git';
|
|
import { Suspense } from 'react';
|
|
import dynamic from 'next/dynamic';
|
|
import { Skeleton } from '@/components/ui/skeleton';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
|
|
// Lazy load the Content component
|
|
const Content = dynamic(() => import("@/components/dashboard/content"), {
|
|
loading: () => <DashboardContentSkeleton />
|
|
});
|
|
|
|
// Loading skeleton for the dashboard content
|
|
function DashboardContentSkeleton() {
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Header skeleton */}
|
|
<div>
|
|
<Skeleton className="h-8 w-64 mb-2" />
|
|
<Skeleton className="h-4 w-96" />
|
|
</div>
|
|
|
|
{/* Stats cards skeleton */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{[...Array(4)].map((_, i) => (
|
|
<Card key={i}>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<Skeleton className="h-4 w-20" />
|
|
<Skeleton className="h-5 w-5 rounded" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Skeleton className="h-7 w-16 mb-1" />
|
|
<Skeleton className="h-3 w-24" />
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
|
|
{/* Best selling products skeleton */}
|
|
<Card>
|
|
<CardHeader>
|
|
<Skeleton className="h-6 w-48" />
|
|
<Skeleton className="h-4 w-72" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
{[...Array(5)].map((_, i) => (
|
|
<div key={i} className="flex items-center gap-4">
|
|
<Skeleton className="h-12 w-12 rounded-md" />
|
|
<div className="space-y-2">
|
|
<Skeleton className="h-4 w-40" />
|
|
<Skeleton className="h-4 w-20" />
|
|
</div>
|
|
<div className="ml-auto text-right">
|
|
<Skeleton className="h-4 w-16 ml-auto" />
|
|
<Skeleton className="h-4 w-16 ml-auto mt-2" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ✅ Corrected Vendor Type
|
|
interface Vendor {
|
|
_id: string;
|
|
username: string;
|
|
storeId: string;
|
|
pgpKey: string;
|
|
__v: number;
|
|
}
|
|
|
|
interface User {
|
|
vendor: Vendor;
|
|
}
|
|
|
|
interface OrderStats {
|
|
totalOrders: number;
|
|
pendingOrders: number;
|
|
completedOrders: number;
|
|
cancelledOrders: number;
|
|
}
|
|
|
|
export default async function DashboardPage() {
|
|
const startTime = performance.now();
|
|
|
|
const [userResponse, orderStats] = await Promise.all([
|
|
fetchServer<User>("/auth/me"),
|
|
fetchServer<OrderStats>("/orders/stats")
|
|
]);
|
|
|
|
// Get git info using the new utility
|
|
const gitInfo = getGitInfo();
|
|
|
|
const endTime = performance.now();
|
|
const generationTime = (endTime - startTime).toFixed(2);
|
|
const panelVersion = packageJson.version;
|
|
const commitHash = gitInfo.hash;
|
|
|
|
const vendor = userResponse.vendor;
|
|
|
|
return (
|
|
<Dashboard>
|
|
<Suspense fallback={<DashboardContentSkeleton />}>
|
|
<Content username={vendor.username} orderStats={orderStats} />
|
|
</Suspense>
|
|
<div className="fixed bottom-2 right-2 text-xs text-muted-foreground bg-background/80 backdrop-blur-sm px-2 py-1 rounded border border-border/50 z-50 flex items-center space-x-2">
|
|
<div className="flex items-center gap-1">
|
|
<Info size={12} className="text-muted-foreground/80" />
|
|
<span>v{panelVersion}</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-1">
|
|
<User size={12} className="text-muted-foreground/80" />
|
|
<span>{vendor.username}</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-1">
|
|
<GitCommit size={12} className="text-muted-foreground/80" />
|
|
<span>{commitHash}</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-1">
|
|
<Zap size={12} className="text-amber-500" />
|
|
<span>Generated in {generationTime}ms</span>
|
|
</div>
|
|
|
|
<span className="px-1.5 py-0.5 text-xs rounded-sm bg-emerald-500/20 text-emerald-300">
|
|
{process.env.NODE_ENV || 'development'}
|
|
</span>
|
|
</div>
|
|
</Dashboard>
|
|
);
|
|
} |