Enhance analytics charts with interactivity and skeletons

Added interactive active segment highlighting to the customer segments pie chart and improved the monthly revenue/orders chart with gradient areas and labeled axes. Replaced loading spinners with ChartSkeleton components for a more consistent loading state. Refactored SkeletonLoaders to accept className and improved code style.

app/auth/login/components/LoginForm.tsx

@@ -4,9 +4,9 @@
 import { useState, useEffect, useRef } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import Link from "next/link";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
+import { Button } from "@/components/common/button";
+import { Input } from "@/components/common/input";
+import { Label } from "@/components/common/label";
 import { toast } from "sonner";
 import { Loader2, ArrowRight } from "lucide-react";
 import { motion } from "framer-motion";
@@ -186,4 +186,4 @@ export default function LoginForm() {
       </div>
     </motion.div>
   );
-} 
+} 

app/auth/login/page.tsx

@@ -1,6 +1,7 @@
 "use client"
 
-import React, { Suspense, lazy } from "react";
+import React, { Suspense, lazy, useEffect } from "react";
+import { useRouter } from "next/navigation";
 
 
 // Use lazy loading for the form component
@@ -30,6 +31,10 @@ function LoginLoading() {
 
 // Main page component
 export default function LoginPage() {
+  const router = useRouter();
+
+  // Removed prefetch to avoid middleware redirects when unauthenticated
+
   return (
     <div className="relative flex items-center justify-center min-h-screen overflow-hidden">
       <AuthBackground />

app/auth/register/page.tsx

@@ -4,12 +4,12 @@ import { useState } from "react";
 import { useRouter } from "next/navigation";
 import Image from "next/image";
 import Link from "next/link";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
+import { Button } from "@/components/common/button";
+import { Input } from "@/components/common/input";
+import { Label } from "@/components/common/label";
 import { Loader2, ArrowRight } from "lucide-react";
 import { motion } from "framer-motion";
-import { toast } from "@/hooks/use-toast";
+import { toast } from "@/lib/hooks/use-toast";
 
 // Matches LoginPage background
 const AuthBackground = () => (
@@ -164,3 +164,5 @@ export default function RegisterPage() {
     </div>
   );
 }
+
+

app/auth/reset-password/page.tsx

@@ -2,11 +2,11 @@
 import { useState, useEffect, Suspense } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import Link from "next/link";
-import { fetchClient } from "@/lib/api-client";
+import { fetchClient } from "@/lib/api/api-client";
 import { toast } from "sonner";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
+import { Button } from "@/components/common/button";
+import { Input } from "@/components/common/input";
+import { Label } from "@/components/common/label";
 import { Loader2 } from "lucide-react";
 
 interface Vendor {
@@ -193,3 +193,5 @@ export default function ResetPasswordPage() {
     </Suspense>
   );
 }
+
+

app/dashboard/admin/ban/page.tsx

@@ -1,18 +1,18 @@
 "use client";
 
 import React, { useState, useEffect } from "react";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Badge } from "@/components/ui/badge";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/common/card";
+import { Button } from "@/components/common/button";
+import { Input } from "@/components/common/input";
+import { Label } from "@/components/common/label";
+import { Textarea } from "@/components/common/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/common/select";
+import { Badge } from "@/components/common/badge";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/common/table";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/common/alert-dialog";
 import { UserX, Shield, Search, Ban, Unlock, Loader2 } from "lucide-react";
-import { fetchClient } from "@/lib/api-client";
-import { useToast } from "@/hooks/use-toast";
+import { fetchClient } from "@/lib/api/api-client";
+import { useToast } from "@/lib/hooks/use-toast";
 
 interface BlockedUser {
   _id: string;
@@ -445,4 +445,5 @@ export default function AdminBanPage() {
       </Card>
     </div>
   );
-}
+}
+

app/dashboard/admin/invite/page.tsx

@@ -1,13 +1,13 @@
 "use client";
 
 import React from "react";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/common/card";
+import { Button } from "@/components/common/button";
+import { Input } from "@/components/common/input";
+import { Label } from "@/components/common/label";
+import { Textarea } from "@/components/common/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/common/select";
+import { Badge } from "@/components/common/badge";
 import { UserPlus, Mail, Copy, Check } from "lucide-react";
 import { useState } from "react";
 import Link from "next/link";
@@ -206,3 +206,4 @@ export default function AdminInvitePage() {
     </div>
   );
 }
+

app/dashboard/admin/orders/page.tsx

@@ -1,8 +1,9 @@
 import React from "react";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Package, AlertTriangle } from "lucide-react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/common/card";
+import { Package, AlertTriangle, CheckCircle2, XCircle, DollarSign } from "lucide-react";
 import { fetchServer } from "@/lib/api";
 import OrdersTable from "@/components/admin/OrdersTable";
+import { MotionWrapper } from "@/components/common/motion-wrapper";
 
 export const dynamic = 'force-dynamic';
 
@@ -26,7 +27,6 @@ interface SystemStats {
   chats: number;
 }
 
-
 export default async function AdminOrdersPage() {
   let orders: Order[] = [];
   let systemStats: SystemStats | null = null;
@@ -46,14 +46,14 @@ export default async function AdminOrdersPage() {
 
   if (error) {
     return (
-      <div className="space-y-6">
+      <div className="space-y-6 p-1">
         <div>
-          <h1 className="text-2xl font-semibold tracking-tight">Recent Orders</h1>
-          <p className="text-sm text-muted-foreground mt-1">Monitor and manage platform orders</p>
+          <h1 className="text-3xl font-bold tracking-tight">Recent Orders</h1>
+          <p className="text-muted-foreground mt-2">Monitor and manage platform orders</p>
         </div>
-        <Card>
+        <Card className="border-destructive/50 bg-destructive/10">
           <CardContent className="pt-6">
-            <div className="text-center text-red-500">
+            <div className="text-center text-destructive">
               <p>{error}</p>
             </div>
           </CardContent>
@@ -62,146 +62,184 @@ export default async function AdminOrdersPage() {
     );
   }
 
-  
   const acknowledgedOrders = orders.filter(o => o.status === 'acknowledged');
   const paidOrders = orders.filter(o => o.status === 'paid');
   const completedOrders = orders.filter(o => o.status === 'completed');
   const cancelledOrders = orders.filter(o => o.status === 'cancelled');
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-8 p-1">
       <div>
-        <h1 className="text-2xl font-semibold tracking-tight">Recent Orders</h1>
-        <p className="text-sm text-muted-foreground mt-1">Monitor and manage platform orders</p>
+        <h1 className="text-3xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-foreground to-foreground/70">
+          Recent Orders
+        </h1>
+        <p className="text-muted-foreground mt-2 text-lg">
+          Monitor and manage platform transaction activity
+        </p>
       </div>
 
-      {/* Stats Cards */}
-      <div className="grid gap-4 md:grid-cols-4">
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Total Orders</CardTitle>
-            <Package className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{systemStats?.orders || 0}</div>
-            <p className="text-xs text-muted-foreground">All platform orders</p>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Acknowledged</CardTitle>
-            <AlertTriangle className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{acknowledgedOrders.length}</div>
-            <p className="text-xs text-muted-foreground">Vendor accepted</p>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Paid</CardTitle>
-            <Package className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{paidOrders.length}</div>
-            <p className="text-xs text-muted-foreground">Payment received</p>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Completed</CardTitle>
-            <Package className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{completedOrders.length}</div>
-            <p className="text-xs text-muted-foreground">Successfully delivered</p>
-          </CardContent>
-        </Card>
-      </div>
+      <MotionWrapper>
+        <div className="space-y-8">
+          {/* Stats Cards */}
+          <div className="grid gap-4 md:grid-cols-4">
+            <Card className="bg-background/50 backdrop-blur-sm border-border/40 shadow-sm hover:shadow-md transition-all duration-300">
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium text-muted-foreground">Total Orders</CardTitle>
+                <div className="p-2 rounded-lg bg-primary/10">
+                  <Package className="h-4 w-4 text-primary" />
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">{systemStats?.orders || 0}</div>
+                <div className="flex items-center mt-1">
+                  <div className="h-1.5 w-1.5 rounded-full bg-primary mr-2" />
+                  <p className="text-xs text-muted-foreground">Lifetime volume</p>
+                </div>
+              </CardContent>
+            </Card>
 
-      {/* Orders Table with Pagination */}
-      <OrdersTable orders={orders} />
+            <Card className="bg-background/50 backdrop-blur-sm border-border/40 shadow-sm hover:shadow-md transition-all duration-300">
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium text-muted-foreground">Acknowledged</CardTitle>
+                <div className="p-2 rounded-lg bg-purple-500/10">
+                  <AlertTriangle className="h-4 w-4 text-purple-500" />
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">{acknowledgedOrders.length}</div>
+                <div className="flex items-center mt-1">
+                  <div className="h-1.5 w-1.5 rounded-full bg-purple-500 mr-2" />
+                  <p className="text-xs text-muted-foreground">Vendor pending</p>
+                </div>
+              </CardContent>
+            </Card>
 
-      {/* Order Analytics */}
-      <div className="grid gap-6 md:grid-cols-2">
-        <Card>
-          <CardHeader>
-            <CardTitle>Order Status Distribution</CardTitle>
-            <CardDescription>Breakdown of recent orders by status</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-4">
-              <div className="flex items-center justify-between">
-                <div className="flex items-center space-x-2">
-                  <div className="w-3 h-3 bg-purple-500 rounded-full"></div>
-                  <span className="text-sm">Acknowledged</span>
+            <Card className="bg-background/50 backdrop-blur-sm border-border/40 shadow-sm hover:shadow-md transition-all duration-300">
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium text-muted-foreground">Paid</CardTitle>
+                <div className="p-2 rounded-lg bg-emerald-500/10">
+                  <DollarSign className="h-4 w-4 text-emerald-500" />
                 </div>
-                <span className="text-sm font-medium">
-                  {orders.length > 0 ? Math.round((acknowledgedOrders.length / orders.length) * 100) : 0}%
-                </span>
-              </div>
-              <div className="flex items-center justify-between">
-                <div className="flex items-center space-x-2">
-                  <div className="w-3 h-3 bg-emerald-500 rounded-full"></div>
-                  <span className="text-sm">Paid</span>
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">{paidOrders.length}</div>
+                <div className="flex items-center mt-1">
+                  <div className="h-1.5 w-1.5 rounded-full bg-emerald-500 mr-2" />
+                  <p className="text-xs text-muted-foreground">Processing</p>
                 </div>
-                <span className="text-sm font-medium">
-                  {orders.length > 0 ? Math.round((paidOrders.length / orders.length) * 100) : 0}%
-                </span>
-              </div>
-              <div className="flex items-center justify-between">
-                <div className="flex items-center space-x-2">
-                  <div className="w-3 h-3 bg-green-500 rounded-full"></div>
-                  <span className="text-sm">Completed</span>
-                </div>
-                <span className="text-sm font-medium">
-                  {orders.length > 0 ? Math.round((completedOrders.length / orders.length) * 100) : 0}%
-                </span>
-              </div>
-              <div className="flex items-center justify-between">
-                <div className="flex items-center space-x-2">
-                  <div className="w-3 h-3 bg-red-500 rounded-full"></div>
-                  <span className="text-sm">Cancelled</span>
-                </div>
-                <span className="text-sm font-medium">
-                  {orders.length > 0 ? Math.round((cancelledOrders.length / orders.length) * 100) : 0}%
-                </span>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
+              </CardContent>
+            </Card>
 
-        <Card>
-          <CardHeader>
-            <CardTitle>Order Summary</CardTitle>
-            <CardDescription>Recent order activity breakdown</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-4">
-              <div className="flex items-center justify-between">
-                <span className="text-sm">Total Recent Orders</span>
-                <span className="text-sm font-medium">{orders.length}</span>
-              </div>
-              <div className="flex items-center justify-between">
-                <span className="text-sm">Acknowledged</span>
-                <span className="text-sm font-medium">{acknowledgedOrders.length}</span>
-              </div>
-              <div className="flex items-center justify-between">
-                <span className="text-sm">Paid</span>
-                <span className="text-sm font-medium">{paidOrders.length}</span>
-              </div>
-              <div className="flex items-center justify-between">
-                <span className="text-sm">Completed</span>
-                <span className="text-sm font-medium">{completedOrders.length}</span>
-              </div>
-              <div className="flex items-center justify-between">
-                <span className="text-sm">Cancelled</span>
-                <span className="text-sm font-medium">{cancelledOrders.length}</span>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
+            <Card className="bg-background/50 backdrop-blur-sm border-border/40 shadow-sm hover:shadow-md transition-all duration-300">
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium text-muted-foreground">Completed</CardTitle>
+                <div className="p-2 rounded-lg bg-blue-500/10">
+                  <CheckCircle2 className="h-4 w-4 text-blue-500" />
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">{completedOrders.length}</div>
+                <div className="flex items-center mt-1">
+                  <div className="h-1.5 w-1.5 rounded-full bg-blue-500 mr-2" />
+                  <p className="text-xs text-muted-foreground">Delivered</p>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Orders Table with Pagination */}
+          <div className="bg-background/50 backdrop-blur-sm rounded-xl border border-border/40 overflow-hidden shadow-sm">
+            <OrdersTable orders={orders} />
+          </div>
+
+          {/* Order Analytics */}
+          <div className="grid gap-6 md:grid-cols-2">
+            <Card className="bg-background/50 backdrop-blur-sm border-border/40 shadow-sm">
+              <CardHeader>
+                <CardTitle>Status Distribution</CardTitle>
+                <CardDescription>Breakdown of active orders</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between p-2 rounded-lg hover:bg-muted/30 transition-colors">
+                    <div className="flex items-center space-x-3">
+                      <div className="w-2 h-12 bg-purple-500 rounded-full"></div>
+                      <div>
+                        <p className="font-medium text-sm">Acknowledged</p>
+                        <p className="text-xs text-muted-foreground">Waiting for shipment</p>
+                      </div>
+                    </div>
+                    <span className="font-bold">
+                      {orders.length > 0 ? Math.round((acknowledgedOrders.length / orders.length) * 100) : 0}%
+                    </span>
+                  </div>
+                  <div className="flex items-center justify-between p-2 rounded-lg hover:bg-muted/30 transition-colors">
+                    <div className="flex items-center space-x-3">
+                      <div className="w-2 h-12 bg-emerald-500 rounded-full"></div>
+                      <div>
+                        <p className="font-medium text-sm">Paid</p>
+                        <p className="text-xs text-muted-foreground">Payment confirmed</p>
+                      </div>
+                    </div>
+                    <span className="font-bold">
+                      {orders.length > 0 ? Math.round((paidOrders.length / orders.length) * 100) : 0}%
+                    </span>
+                  </div>
+                  <div className="flex items-center justify-between p-2 rounded-lg hover:bg-muted/30 transition-colors">
+                    <div className="flex items-center space-x-3">
+                      <div className="w-2 h-12 bg-blue-500 rounded-full"></div>
+                      <div>
+                        <p className="font-medium text-sm">Completed</p>
+                        <p className="text-xs text-muted-foreground">Successfully concluded</p>
+                      </div>
+                    </div>
+                    <span className="font-bold">
+                      {orders.length > 0 ? Math.round((completedOrders.length / orders.length) * 100) : 0}%
+                    </span>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card className="bg-background/50 backdrop-blur-sm border-border/40 shadow-sm">
+              <CardHeader>
+                <CardTitle>Activity Summary</CardTitle>
+                <CardDescription>Recent volume breakdown</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-6">
+                  <div className="flex items-center justify-between pb-4 border-b border-border/40">
+                    <span className="text-sm text-muted-foreground">Total Displayed Orders</span>
+                    <span className="text-xl font-bold">{orders.length}</span>
+                  </div>
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="space-y-1">
+                      <span className="text-xs uppercase text-muted-foreground tracking-wider">Active</span>
+                      <p className="text-lg font-semibold">{acknowledgedOrders.length + paidOrders.length}</p>
+                    </div>
+                    <div className="space-y-1">
+                      <span className="text-xs uppercase text-muted-foreground tracking-wider">Finished</span>
+                      <p className="text-lg font-semibold">{completedOrders.length}</p>
+                    </div>
+                    <div className="space-y-1">
+                      <span className="text-xs uppercase text-muted-foreground tracking-wider">Voided</span>
+                      <p className="text-lg font-semibold text-destructive">{cancelledOrders.length}</p>
+                    </div>
+                    <div className="space-y-1">
+                      <span className="text-xs uppercase text-muted-foreground tracking-wider">Success Rate</span>
+                      <p className="text-lg font-semibold text-green-500">
+                        {orders.length > 0 ? Math.round((completedOrders.length / (orders.length - (acknowledgedOrders.length + paidOrders.length))) * 100) || 100 : 0}%
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </MotionWrapper>
     </div>
   );
 }
+
+

app/dashboard/admin/page.tsx

@@ -2,12 +2,12 @@
 export const dynamic = "force-dynamic";
 
 import React, { Suspense, lazy, useState, useEffect, Component, ReactNode } from "react";
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/common/button";
 import Link from "next/link";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/common/tabs";
+import { Skeleton } from "@/components/common/skeleton";
+import { Card, CardContent, CardHeader } from "@/components/common/card";
+import { Alert, AlertDescription, AlertTitle } from "@/components/common/alert";
 import { AlertCircle, RefreshCw } from "lucide-react";
 
 // Error Boundary Component
@@ -37,7 +37,7 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
 
   componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
     console.error(`Error loading ${this.props.componentName || 'component'}:`, error, errorInfo);
-    
+
     // Log to error tracking service if available
     if (typeof window !== 'undefined' && (window as any).gtag) {
       (window as any).gtag('event', 'exception', {
@@ -105,31 +105,31 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
 }
 
 // Lazy load admin components with error handling
-const AdminAnalytics = lazy(() => 
+const AdminAnalytics = lazy(() =>
   import("@/components/admin/AdminAnalytics").catch((err) => {
     console.error("Failed to load AdminAnalytics:", err);
     throw err;
   })
 );
-const InviteVendorCard = lazy(() => 
+const InviteVendorCard = lazy(() =>
   import("@/components/admin/InviteVendorCard").catch((err) => {
     console.error("Failed to load InviteVendorCard:", err);
     throw err;
   })
 );
-const BanUserCard = lazy(() => 
+const BanUserCard = lazy(() =>
   import("@/components/admin/BanUserCard").catch((err) => {
     console.error("Failed to load BanUserCard:", err);
     throw err;
   })
 );
-const InvitationsListCard = lazy(() => 
+const InvitationsListCard = lazy(() =>
   import("@/components/admin/InvitationsListCard").catch((err) => {
     console.error("Failed to load InvitationsListCard:", err);
     throw err;
   })
 );
-const VendorsCard = lazy(() => 
+const VendorsCard = lazy(() =>
   import("@/components/admin/VendorsCard").catch((err) => {
     console.error("Failed to load VendorsCard:", err);
     throw err;
@@ -139,7 +139,7 @@ const VendorsCard = lazy(() =>
 // Loading skeleton with timeout warning
 function AdminComponentSkeleton({ showSlowWarning = false }: { showSlowWarning?: boolean }) {
   return (
-    <div 
+    <div
       className="space-y-6 animate-in fade-in duration-500 relative"
       role="status"
       aria-label="Loading analytics dashboard"
@@ -156,7 +156,7 @@ function AdminComponentSkeleton({ showSlowWarning = false }: { showSlowWarning?:
       )}
       {/* Subtle loading indicator */}
       <div className="absolute top-0 left-0 right-0 h-1 bg-muted overflow-hidden rounded-full">
-        <div className="h-full bg-primary w-1/3 animate-[shimmer_2s_ease-in-out_infinite]" 
+        <div className="h-full bg-primary w-1/3 animate-[shimmer_2s_ease-in-out_infinite]"
           style={{
             background: 'linear-gradient(90deg, transparent, hsl(var(--primary)), transparent)',
             backgroundSize: '200% 100%',
@@ -164,7 +164,7 @@ function AdminComponentSkeleton({ showSlowWarning = false }: { showSlowWarning?:
           }}
         />
       </div>
-      
+
       {/* Header skeleton */}
       <div className="flex justify-between items-center">
         <div className="space-y-2">
@@ -181,9 +181,9 @@ function AdminComponentSkeleton({ showSlowWarning = false }: { showSlowWarning?:
       {/* Metric cards grid skeleton */}
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
         {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
-          <Card 
-            key={i} 
-            className="overflow-hidden animate-in fade-in slide-in-from-bottom-4"
+          <Card
+            key={i}
+            className="overflow-hidden animate-in fade-in slide-in-from-bottom-4 border-border/40 bg-background/50 backdrop-blur-sm shadow-sm"
             style={{
               animationDelay: `${i * 50}ms`,
               animationDuration: '400ms',
@@ -227,14 +227,14 @@ function AdminComponentSkeleton({ showSlowWarning = false }: { showSlowWarning?:
 }
 
 // Suspense wrapper with timeout
-function SuspenseWithTimeout({ 
-  children, 
-  fallback, 
+function SuspenseWithTimeout({
+  children,
+  fallback,
   timeout = 5000,
-  timeoutFallback 
-}: { 
-  children: ReactNode; 
-  fallback: ReactNode; 
+  timeoutFallback
+}: {
+  children: ReactNode;
+  fallback: ReactNode;
   timeout?: number;
   timeoutFallback?: ReactNode;
 }) {
@@ -258,7 +258,7 @@ function SuspenseWithTimeout({
 // Loading skeleton for management cards
 function ManagementCardsSkeleton({ showSlowWarning = false }: { showSlowWarning?: boolean }) {
   return (
-    <div 
+    <div
       className="grid gap-4 lg:gap-6 sm:grid-cols-2 lg:grid-cols-3 items-stretch relative"
       role="status"
       aria-label="Loading management tools"
@@ -277,7 +277,7 @@ function ManagementCardsSkeleton({ showSlowWarning = false }: { showSlowWarning?
       )}
       {/* Subtle loading indicator */}
       <div className="absolute -top-6 left-0 right-0 h-1 bg-muted overflow-hidden rounded-full">
-        <div className="h-full bg-primary w-1/3" 
+        <div className="h-full bg-primary w-1/3"
           style={{
             background: 'linear-gradient(90deg, transparent, hsl(var(--primary)), transparent)',
             backgroundSize: '200% 100%',
@@ -286,9 +286,9 @@ function ManagementCardsSkeleton({ showSlowWarning = false }: { showSlowWarning?
         />
       </div>
       {[1, 2, 3, 4].map((i) => (
-        <Card 
-          key={i} 
-          className="overflow-hidden animate-in fade-in slide-in-from-bottom-4"
+        <Card
+          key={i}
+          className="overflow-hidden animate-in fade-in slide-in-from-bottom-4 border-border/40 bg-background/50 backdrop-blur-sm shadow-sm"
           style={{
             animationDelay: `${i * 75}ms`,
             animationDuration: '400ms',
@@ -311,8 +311,8 @@ function ManagementCardsSkeleton({ showSlowWarning = false }: { showSlowWarning?
               /* List items skeleton for list cards */
               <>
                 {[1, 2, 3].map((j) => (
-                  <div 
-                    key={j} 
+                  <div
+                    key={j}
                     className="space-y-2 p-3 rounded border border-border/50 animate-in fade-in"
                     style={{
                       animationDelay: `${(i - 2) * 75 + j * 50}ms`,
@@ -345,9 +345,9 @@ export default function AdminPage() {
   const prefetchTabComponents = (tab: string) => {
     // Avoid prefetching if already done
     if (prefetchedTabs.has(tab)) return;
-    
+
     const startTime = performance.now();
-    
+
     if (tab === "analytics") {
       // Prefetch analytics component
       import("@/components/admin/AdminAnalytics")
@@ -355,7 +355,7 @@ export default function AdminPage() {
           const loadTime = performance.now() - startTime;
           console.log(`[Performance] AdminAnalytics prefetched in ${loadTime.toFixed(2)}ms`);
         })
-        .catch(() => {});
+        .catch(() => { });
     } else if (tab === "management") {
       // Prefetch management components
       Promise.all([
@@ -368,9 +368,9 @@ export default function AdminPage() {
           const loadTime = performance.now() - startTime;
           console.log(`[Performance] Management components prefetched in ${loadTime.toFixed(2)}ms`);
         })
-        .catch(() => {});
+        .catch(() => { });
     }
-    
+
     setPrefetchedTabs(prev => new Set(prev).add(tab));
   };
 
@@ -392,29 +392,31 @@ export default function AdminPage() {
 
   return (
     <div className="space-y-6">
-      <div className="flex items-center justify-between">
+      <div className="flex items-center justify-between animate-in fade-in slide-in-from-top-2 duration-300">
         <div>
-          <h1 className="text-2xl font-semibold tracking-tight">Admin Dashboard</h1>
+          <h1 className="text-2xl font-semibold tracking-tight text-foreground">Admin Dashboard</h1>
           <p className="text-sm text-muted-foreground mt-1">Platform analytics and vendor management</p>
         </div>
-        <Button asChild variant="outline" size="sm">
+        <Button asChild variant="outline" size="sm" className="border-border/50 bg-background/50 backdrop-blur-sm hover:bg-background/80 transition-all">
           <Link href="/dashboard">Back to Dashboard</Link>
         </Button>
       </div>
 
       <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
-        <TabsList>
-          <TabsTrigger 
+        <TabsList className="bg-muted/20 p-1 border border-border/40 backdrop-blur-sm h-auto">
+          <TabsTrigger
             value="analytics"
             onMouseEnter={() => handleTabHover("analytics")}
             onFocus={() => handleTabFocus("analytics")}
+            className="data-[state=active]:bg-background/80 data-[state=active]:backdrop-blur-sm data-[state=active]:text-foreground data-[state=active]:shadow-sm px-6 py-2 transition-all"
           >
             Analytics
           </TabsTrigger>
-          <TabsTrigger 
+          <TabsTrigger
             value="management"
             onMouseEnter={() => handleTabHover("management")}
             onFocus={() => handleTabFocus("management")}
+            className="data-[state=active]:bg-background/80 data-[state=active]:backdrop-blur-sm data-[state=active]:text-foreground data-[state=active]:shadow-sm px-6 py-2 transition-all"
           >
             Management
           </TabsTrigger>
@@ -422,7 +424,7 @@ export default function AdminPage() {
 
         <TabsContent value="analytics" className="space-y-6 relative">
           <ErrorBoundary componentName="Analytics Dashboard">
-            <SuspenseWithTimeout 
+            <SuspenseWithTimeout
               fallback={<AdminComponentSkeleton />}
               timeout={5000}
               timeoutFallback={<AdminComponentSkeleton showSlowWarning={true} />}
@@ -436,7 +438,7 @@ export default function AdminPage() {
 
         <TabsContent value="management" className="space-y-6 relative">
           <ErrorBoundary componentName="Management Tools">
-            <SuspenseWithTimeout 
+            <SuspenseWithTimeout
               fallback={<ManagementCardsSkeleton />}
               timeout={5000}
               timeoutFallback={<ManagementCardsSkeleton showSlowWarning={true} />}
@@ -464,3 +466,4 @@ export default function AdminPage() {
 }
 
 
+

app/dashboard/admin/status/page.tsx

@@ -1,9 +1,10 @@
 import React from "react";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { Server, Database, Cpu, HardDrive, Activity } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/common/card";
+import { Badge } from "@/components/common/badge";
+import { Server, Database, Cpu, HardDrive, Activity, Zap } from "lucide-react";
 import { fetchServer } from "@/lib/api";
 import SystemStatusCard from "@/components/admin/SystemStatusCard";
+import { MotionWrapper } from "@/components/common/motion-wrapper";
 
 export const dynamic = 'force-dynamic';
 
@@ -35,17 +36,19 @@ export default async function AdminStatusPage() {
     console.error("Failed to fetch system status:", err);
     error = "Failed to load system status";
   }
+
   if (error) {
     return (
-      <div className="space-y-6">
+      <div className="space-y-8 p-1">
         <div>
-          <h1 className="text-2xl font-semibold tracking-tight">System Status</h1>
-          <p className="text-sm text-muted-foreground mt-1">Monitor system health and performance metrics</p>
+          <h1 className="text-3xl font-bold tracking-tight">System Status</h1>
+          <p className="text-muted-foreground mt-2">Monitor system health and real-time performance metrics</p>
         </div>
-        <Card>
+        <Card className="border-destructive/50 bg-destructive/10">
           <CardContent className="pt-6">
-            <div className="text-center text-red-500">
-              <p>{error}</p>
+            <div className="flex items-center gap-3 text-destructive">
+              <Activity className="h-5 w-5" />
+              <p className="font-medium">{error}</p>
             </div>
           </CardContent>
         </Card>
@@ -67,116 +70,178 @@ export default async function AdminStatusPage() {
     return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + ' ' + sizes[i];
   };
 
-  const memoryUsagePercent = systemStatus ? 
+  const memoryUsagePercent = systemStatus ?
     Math.round((systemStatus.memory.heapUsed / systemStatus.memory.heapTotal) * 100) : 0;
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-8 p-1">
       <div>
-        <h1 className="text-2xl font-semibold tracking-tight">System Status</h1>
-        <p className="text-sm text-muted-foreground mt-1">Monitor system health and performance metrics</p>
+        <h1 className="text-3xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-foreground to-foreground/70">
+          System Status
+        </h1>
+        <p className="text-muted-foreground mt-2 text-lg">
+          Monitor system health and real-time performance metrics
+        </p>
       </div>
 
-      <SystemStatusCard />
+      <MotionWrapper>
+        <div className="space-y-8">
+          <SystemStatusCard />
 
-      <div className="grid gap-4 lg:gap-6 sm:grid-cols-2 lg:grid-cols-3">
-        {/* Server Status */}
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Server Status</CardTitle>
-            <Server className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="flex items-center space-x-2">
-              <Badge variant="default" className="bg-green-500">Online</Badge>
-              <span className="text-sm text-muted-foreground">
-                {systemStatus ? formatUptime(systemStatus.uptimeSeconds) : 'N/A'}
-              </span>
-            </div>
-            <p className="text-xs text-muted-foreground mt-2">
-              Last checked: {new Date().toLocaleTimeString()}
-            </p>
-          </CardContent>
-        </Card>
+          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+            {/* Server Status */}
+            <Card className="bg-background/50 backdrop-blur-sm border-border/40 shadow-sm hover:shadow-md transition-all duration-300">
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium text-muted-foreground">Server Uptime</CardTitle>
+                <div className="p-2 rounded-lg bg-green-500/10">
+                  <Server className="h-4 w-4 text-green-500" />
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="flex items-center space-x-2">
+                  <span className="text-2xl font-bold">
+                    {systemStatus ? formatUptime(systemStatus.uptimeSeconds) : 'N/A'}
+                  </span>
+                </div>
+                <div className="flex items-center mt-2 space-x-2">
+                  <Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
+                    Online
+                  </Badge>
+                  <span className="text-xs text-muted-foreground">
+                    Checked: {new Date().toLocaleTimeString()}
+                  </span>
+                </div>
+              </CardContent>
+            </Card>
 
-        {/* Database Status */}
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Database</CardTitle>
-            <Database className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="flex items-center space-x-2">
-              <Badge variant="default" className="bg-green-500">Connected</Badge>
-              <span className="text-sm text-muted-foreground">
-                {systemStatus ? `${systemStatus.counts.vendors + systemStatus.counts.orders + systemStatus.counts.products} records` : 'N/A'}
-              </span>
-            </div>
-            <p className="text-xs text-muted-foreground mt-2">
-              Total collections: 4
-            </p>
-          </CardContent>
-        </Card>
+            {/* Database Status */}
+            <Card className="bg-background/50 backdrop-blur-sm border-border/40 shadow-sm hover:shadow-md transition-all duration-300">
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium text-muted-foreground">Database Health</CardTitle>
+                <div className="p-2 rounded-lg bg-blue-500/10">
+                  <Database className="h-4 w-4 text-blue-500" />
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="flex items-center space-x-2">
+                  <span className="text-2xl font-bold">
+                    {systemStatus ? `${(systemStatus.counts.vendors + systemStatus.counts.orders + systemStatus.counts.products).toLocaleString()}` : '0'}
+                  </span>
+                  <span className="text-sm text-muted-foreground self-end mb-1">records</span>
+                </div>
+                <div className="flex items-center mt-2 space-x-2">
+                  <Badge variant="outline" className="bg-blue-500/10 text-blue-500 border-blue-500/20">
+                    Connected
+                  </Badge>
+                  <span className="text-xs text-muted-foreground">
+                    4 active collections
+                  </span>
+                </div>
+              </CardContent>
+            </Card>
 
-        {/* Memory Usage */}
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Memory</CardTitle>
-            <HardDrive className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="flex items-center space-x-2">
-              <Badge variant={memoryUsagePercent > 80 ? "destructive" : memoryUsagePercent > 60 ? "secondary" : "outline"}>
-                {memoryUsagePercent}%
-              </Badge>
-              <span className="text-sm text-muted-foreground">
-                {systemStatus ? formatBytes(systemStatus.memory.heapUsed) : 'N/A'}
-              </span>
-            </div>
-            <p className="text-xs text-muted-foreground mt-2">
-              Total: {systemStatus ? formatBytes(systemStatus.memory.heapTotal) : 'N/A'}
-            </p>
-          </CardContent>
-        </Card>
+            {/* Memory Usage */}
+            <Card className="bg-background/50 backdrop-blur-sm border-border/40 shadow-sm hover:shadow-md transition-all duration-300">
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium text-muted-foreground">Memory Usage</CardTitle>
+                <div className="p-2 rounded-lg bg-purple-500/10">
+                  <HardDrive className="h-4 w-4 text-purple-500" />
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="flex items-center space-x-2">
+                  <span className="text-2xl font-bold">
+                    {systemStatus ? formatBytes(systemStatus.memory.heapUsed) : 'N/A'}
+                  </span>
+                  <span className="text-sm text-muted-foreground self-end mb-1">used</span>
+                </div>
+                <div className="flex items-center mt-2 space-x-2">
+                  <Badge variant="outline" className={`
+                    ${memoryUsagePercent > 80 ? 'bg-red-500/10 text-red-500 border-red-500/20' :
+                      memoryUsagePercent > 60 ? 'bg-yellow-500/10 text-yellow-500 border-yellow-500/20' :
+                        'bg-purple-500/10 text-purple-500 border-purple-500/20'}
+                  `}>
+                    {memoryUsagePercent}% Load
+                  </Badge>
+                  <span className="text-xs text-muted-foreground">
+                    Total: {systemStatus ? formatBytes(systemStatus.memory.heapTotal) : 'N/A'}
+                  </span>
+                </div>
+              </CardContent>
+            </Card>
 
-        {/* Platform Stats */}
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Platform Stats</CardTitle>
-            <Activity className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="flex items-center space-x-2">
-              <Badge variant="default" className="bg-green-500">Active</Badge>
-              <span className="text-sm text-muted-foreground">
-                {systemStatus ? `${systemStatus.counts.vendors} vendors` : 'N/A'}
-              </span>
-            </div>
-            <p className="text-xs text-muted-foreground mt-2">
-              {systemStatus ? `${systemStatus.counts.orders} orders, ${systemStatus.counts.products} products` : 'N/A'}
-            </p>
-          </CardContent>
-        </Card>
+            {/* Platform Stats */}
+            <Card className="bg-background/50 backdrop-blur-sm border-border/40 shadow-sm hover:shadow-md transition-all duration-300">
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium text-muted-foreground">Platform Activity</CardTitle>
+                <div className="p-2 rounded-lg bg-orange-500/10">
+                  <Activity className="h-4 w-4 text-orange-500" />
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="flex items-center space-x-2">
+                  <span className="text-2xl font-bold">
+                    {systemStatus ? systemStatus.counts.vendors : '0'}
+                  </span>
+                  <span className="text-sm text-muted-foreground self-end mb-1">Active Vendors</span>
+                </div>
+                <div className="flex items-center mt-2 space-x-2">
+                  <Badge variant="outline" className="bg-orange-500/10 text-orange-500 border-orange-500/20">
+                    Live
+                  </Badge>
+                  <span className="text-xs text-muted-foreground">
+                    {systemStatus ? `${systemStatus.counts.orders} orders` : '0 orders'}
+                  </span>
+                </div>
+              </CardContent>
+            </Card>
 
-        {/* Node.js Version */}
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Runtime</CardTitle>
-            <Activity className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="flex items-center space-x-2">
-              <Badge variant="outline">
-                {systemStatus ? `Node ${systemStatus.versions.node}` : 'N/A'}
-              </Badge>
-              <span className="text-sm text-muted-foreground">Runtime</span>
-            </div>
-            <p className="text-xs text-muted-foreground mt-2">
-              {systemStatus ? `V8: ${systemStatus.versions.v8}` : 'N/A'}
-            </p>
-          </CardContent>
-        </Card>
-      </div>
+            {/* Runtime Info */}
+            <Card className="bg-background/50 backdrop-blur-sm border-border/40 shadow-sm hover:shadow-md transition-all duration-300 md:col-span-2 lg:col-span-2">
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium text-muted-foreground">Runtime Environment</CardTitle>
+                <div className="p-2 rounded-lg bg-zinc-500/10">
+                  <Cpu className="h-4 w-4 text-zinc-500" />
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                  <div className="flex items-center gap-4">
+                    <div>
+                      <p className="text-2xl font-bold">Node.js</p>
+                      <p className="text-xs text-muted-foreground mt-1">Runtime</p>
+                    </div>
+                    <Badge variant="secondary" className="text-sm h-7">
+                      {systemStatus ? `v${systemStatus.versions.node}` : 'N/A'}
+                    </Badge>
+                  </div>
+
+                  <div className="h-8 w-px bg-border/50 hidden sm:block" />
+
+                  <div className="flex items-center gap-4">
+                    <div>
+                      <p className="text-2xl font-bold">V8</p>
+                      <p className="text-xs text-muted-foreground mt-1">Engine</p>
+                    </div>
+                    <Badge variant="secondary" className="text-sm h-7">
+                      {systemStatus ? systemStatus.versions.v8 : 'N/A'}
+                    </Badge>
+                  </div>
+
+                  <div className="h-8 w-px bg-border/50 hidden sm:block" />
+
+                  <div className="flex items-center gap-2 text-sm text-muted-foreground bg-muted/30 px-3 py-1.5 rounded-md">
+                    <Zap className="h-3.5 w-3.5 text-yellow-500" />
+                    <span>Performance Optimized</span>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </MotionWrapper>
     </div>
   );
 }
+
+

app/dashboard/admin/users/page.tsx

@@ -1,15 +1,16 @@
 "use client";
 
 import React, { 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 { Input } from "@/components/ui/input";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
-import { Search, Ban, UserCheck, Package, DollarSign, Loader2, Repeat } from "lucide-react";
-import { fetchClient } from "@/lib/api-client";
-import { useToast } from "@/hooks/use-toast";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/common/card";
+import { Badge } from "@/components/common/badge";
+import { Button } from "@/components/common/button";
+import { Input } from "@/components/common/input";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/common/table";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/common/tooltip";
+import { Search, Ban, UserCheck, Package, DollarSign, Loader2, Repeat, Users, ShoppingBag, CreditCard, UserX } from "lucide-react";
+import { fetchClient } from "@/lib/api/api-client";
+import { useToast } from "@/lib/hooks/use-toast";
+import { motion, AnimatePresence } from "framer-motion";
 
 interface TelegramUser {
   telegramUserId: string;
@@ -49,6 +50,14 @@ export default function AdminUsersPage() {
   const { toast } = useToast();
   const [loading, setLoading] = useState(true);
   const [users, setUsers] = useState<TelegramUser[]>([]);
+  // State for browser detection
+  // Browser detection
+  const [isFirefox, setIsFirefox] = useState(false);
+
+  useEffect(() => {
+    const ua = navigator.userAgent.toLowerCase();
+    setIsFirefox(ua.includes("firefox") && !ua.includes("chrome"));
+  }, []);
   const [searchQuery, setSearchQuery] = useState("");
   const [page, setPage] = useState(1);
   const [pagination, setPagination] = useState<PaginationResponse['pagination'] | null>(null);
@@ -88,123 +97,86 @@ export default function AdminUsersPage() {
   const totalSpent = users.reduce((sum, u) => sum + u.totalSpent, 0);
   const totalOrders = users.reduce((sum, u) => sum + u.totalOrders, 0);
 
+  const stats = [
+    {
+      title: "Total Users",
+      value: users.length,
+      description: "Registered users",
+      icon: Users,
+    },
+    {
+      title: "Users with Orders",
+      value: usersWithOrders.length,
+      description: `${users.length > 0 ? Math.round((usersWithOrders.length / users.length) * 100) : 0}% conversion rate`,
+      icon: ShoppingBag,
+    },
+    {
+      title: "Total Revenue",
+      value: formatCurrency(totalSpent),
+      description: `${totalOrders} total orders`,
+      icon: DollarSign,
+    },
+    {
+      title: "Returning",
+      value: returningCustomers.length,
+      description: `${usersWithOrders.length > 0 ? Math.round((returningCustomers.length / usersWithOrders.length) * 100) : 0}% of customers`,
+      icon: Repeat,
+    },
+    {
+      title: "Blocked",
+      value: blockedUsers.length,
+      description: `${users.length > 0 ? Math.round((blockedUsers.length / users.length) * 100) : 0}% blocked rate`,
+      icon: UserX,
+    },
+  ];
+
   return (
-    <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-semibold tracking-tight">Telegram Users</h1>
-        <p className="text-sm text-muted-foreground mt-1">Manage Telegram user accounts and view statistics</p>
+    <div className="space-y-6 animate-in fade-in duration-500">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold tracking-tight text-foreground">Telegram Users</h1>
+          <p className="text-sm text-muted-foreground mt-1">Manage Telegram user accounts and view statistics</p>
+        </div>
       </div>
 
       {/* Stats Cards */}
       <div className="grid gap-4 md:grid-cols-5">
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Total Users</CardTitle>
-          </CardHeader>
-          <CardContent>
-            {loading ? (
-              <div className="flex items-center justify-center py-4">
-                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-              </div>
-            ) : (
-              <>
-                <div className="text-2xl font-bold">{users.length}</div>
-                <p className="text-xs text-muted-foreground">Registered users</p>
-              </>
-            )}
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Users with Orders</CardTitle>
-          </CardHeader>
-          <CardContent>
-            {loading ? (
-              <div className="flex items-center justify-center py-4">
-                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-              </div>
-            ) : (
-              <>
-                <div className="text-2xl font-bold">{usersWithOrders.length}</div>
-                <p className="text-xs text-muted-foreground">
-                  {users.length > 0 ? Math.round((usersWithOrders.length / users.length) * 100) : 0}% conversion rate
-                </p>
-              </>
-            )}
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
-          </CardHeader>
-          <CardContent>
-            {loading ? (
-              <div className="flex items-center justify-center py-4">
-                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-              </div>
-            ) : (
-              <>
-                <div className="text-2xl font-bold">{formatCurrency(totalSpent)}</div>
-                <p className="text-xs text-muted-foreground">{totalOrders} total orders</p>
-              </>
-            )}
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Returning Customers</CardTitle>
-            <Repeat className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            {loading ? (
-              <div className="flex items-center justify-center py-4">
-                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-              </div>
-            ) : (
-              <>
-                <div className="text-2xl font-bold">{returningCustomers.length}</div>
-                <p className="text-xs text-muted-foreground">
-                  {usersWithOrders.length > 0 ? Math.round((returningCustomers.length / usersWithOrders.length) * 100) : 0}% of customers
-                </p>
-              </>
-            )}
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Blocked Users</CardTitle>
-          </CardHeader>
-          <CardContent>
-            {loading ? (
-              <div className="flex items-center justify-center py-4">
-                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-              </div>
-            ) : (
-              <>
-                <div className="text-2xl font-bold">{blockedUsers.length}</div>
-                <p className="text-xs text-muted-foreground">
-                  {users.length > 0 ? Math.round((blockedUsers.length / users.length) * 100) : 0}% blocked rate
-                </p>
-              </>
-            )}
-          </CardContent>
-        </Card>
+        {stats.map((stat, i) => (
+          <Card key={i} className="border-border/40 bg-background/50 backdrop-blur-sm shadow-sm overflow-hidden">
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">{stat.title}</CardTitle>
+              <stat.icon className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              {loading ? (
+                <div className="h-12 flex items-center">
+                  <Loader2 className="h-4 w-4 animate-spin text-muted-foreground/50" />
+                </div>
+              ) : (
+                <div className="animate-in fade-in slide-in-from-bottom-2 duration-500" style={{ animationDelay: `${i * 100}ms` }}>
+                  <div className="text-2xl font-bold">{stat.value}</div>
+                  <p className="text-xs text-muted-foreground">{stat.description}</p>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        ))}
       </div>
 
       {/* Search and Filters */}
-      <Card>
-        <CardHeader>
-          <div className="flex items-center justify-between">
+      <Card className="border-border/40 bg-background/50 backdrop-blur-sm shadow-sm">
+        <CardHeader className="pb-4">
+          <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
             <div>
-              <CardTitle>User Management</CardTitle>
+              <CardTitle className="text-lg font-medium">User Management</CardTitle>
               <CardDescription>View and manage all Telegram user accounts</CardDescription>
             </div>
             <div className="flex items-center space-x-2">
               <div className="relative">
-                <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
-                <Input 
-                  placeholder="Search users..." 
-                  className="pl-8 w-64" 
+                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+                <Input
+                  placeholder="Search users..."
+                  className="pl-9 w-64 bg-background/50 border-border/50 focus:bg-background transition-colors"
                   value={searchQuery}
                   onChange={(e) => {
                     setSearchQuery(e.target.value);
@@ -216,19 +188,11 @@ export default function AdminUsersPage() {
           </div>
         </CardHeader>
         <CardContent>
-          {loading ? (
-            <div className="flex items-center justify-center py-12">
-              <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-            </div>
-          ) : users.length === 0 ? (
-            <div className="text-center py-8 text-muted-foreground">
-              {searchQuery ? "No users found matching your search" : "No users found"}
-            </div>
-          ) : (
+          <div className="rounded-md border border-border/50 overflow-hidden">
             <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>User ID</TableHead>
+              <TableHeader className="bg-muted/30">
+                <TableRow className="border-border/50 hover:bg-transparent">
+                  <TableHead className="w-[100px]">User ID</TableHead>
                   <TableHead>Username</TableHead>
                   <TableHead>Orders</TableHead>
                   <TableHead>Total Spent</TableHead>
@@ -239,88 +203,103 @@ export default function AdminUsersPage() {
                 </TableRow>
               </TableHeader>
               <TableBody>
-                {users.map((user) => (
-                  <TableRow key={user.telegramUserId}>
-                    <TableCell>
-                      <div className="font-mono text-sm">{user.telegramUserId}</div>
-                    </TableCell>
-                    <TableCell>
-                      <div className="font-medium">
-                        {user.telegramUsername !== "Unknown" ? `@${user.telegramUsername}` : "Unknown"}
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      <div className="flex items-center space-x-2">
-                        <Package className="h-4 w-4 text-muted-foreground" />
-                        <span>{user.totalOrders}</span>
-                        {user.completedOrders > 0 && (
-                          <Badge variant="secondary" className="text-xs">
-                            {user.completedOrders} completed
-                          </Badge>
-                        )}
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      <div className="flex items-center space-x-1">
-                        <DollarSign className="h-4 w-4 text-muted-foreground" />
-                        <span className="font-medium">{formatCurrency(user.totalSpent)}</span>
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      {user.isBlocked ? (
-                        <TooltipProvider>
-                          <Tooltip>
-                            <TooltipTrigger asChild>
-                              <Badge variant="destructive">
-                                <Ban className="h-3 w-3 mr-1" />
-                                Blocked
-                              </Badge>
-                            </TooltipTrigger>
-                            {user.blockedReason && (
-                              <TooltipContent>
-                                <p className="max-w-xs">{user.blockedReason}</p>
-                              </TooltipContent>
+                <AnimatePresence mode="popLayout">
+                  {loading ? (
+                    <TableRow>
+                      <TableCell colSpan={8} className="h-24 text-center">
+                        <div className="flex items-center justify-center gap-2 text-muted-foreground">
+                          <Loader2 className="h-4 w-4 animate-spin" />
+                          Loading users...
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ) : users.length > 0 ? (
+                    users.map((user, index) => (
+                      <motion.tr
+                        key={user.telegramUserId}
+                        initial={{ opacity: 0, y: 10 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        exit={{ opacity: 0 }}
+                        transition={{ duration: 0.2, delay: index * 0.03 }}
+                        className={`group border-b border-border/50 transition-colors ${user.isBlocked ? "bg-destructive/5 hover:bg-destructive/10" : "hover:bg-muted/40"}`}
+                      >
+                        <TableCell className="font-mono text-xs">{user.telegramUserId}</TableCell>
+                        <TableCell>
+                          <div className="flex items-center gap-2">
+                            <span className="font-medium">@{user.telegramUsername || "Unknown"}</span>
+                            {user.isBlocked && (
+                              <Badge variant="destructive" className="h-5 px-1.5 text-[10px]">Blocked</Badge>
                             )}
-                          </Tooltip>
-                        </TooltipProvider>
-                      ) : user.totalOrders > 0 ? (
-                        <Badge variant="default">Active</Badge>
-                      ) : (
-                        <Badge variant="secondary">No Orders</Badge>
-                      )}
-                    </TableCell>
-                    <TableCell>
-                      {user.firstOrderDate 
-                        ? new Date(user.firstOrderDate).toLocaleDateString() 
-                        : 'N/A'}
-                    </TableCell>
-                    <TableCell>
-                      {user.lastOrderDate 
-                        ? new Date(user.lastOrderDate).toLocaleDateString() 
-                        : 'N/A'}
-                    </TableCell>
-                    <TableCell className="text-right">
-                      <div className="flex items-center justify-end space-x-2">
-                        {!user.isBlocked ? (
-                          <Button variant="outline" size="sm">
-                            <Ban className="h-4 w-4" />
-                          </Button>
-                        ) : (
-                          <Button variant="outline" size="sm">
-                            <UserCheck className="h-4 w-4" />
-                          </Button>
-                        )}
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ))}
+                          </div>
+                        </TableCell>
+                        <TableCell>{user.totalOrders}</TableCell>
+                        <TableCell>{formatCurrency(user.totalSpent)}</TableCell>
+                        <TableCell>
+                          <div className="flex flex-col gap-1 text-xs">
+                            <span className="text-emerald-500">{user.completedOrders} Completed</span>
+                            <span className="text-muted-foreground">{user.paidOrders - user.completedOrders} Pending</span>
+                          </div>
+                        </TableCell>
+                        <TableCell className="text-xs text-muted-foreground">
+                          {user.firstOrderDate ? new Date(user.firstOrderDate).toLocaleDateString() : "-"}
+                        </TableCell>
+                        <TableCell className="text-xs text-muted-foreground">
+                          {user.lastOrderDate ? new Date(user.lastOrderDate).toLocaleDateString() : "-"}
+                        </TableCell>
+                        <TableCell className="text-right">
+                          <div className="flex justify-end gap-1">
+                            {user.isBlocked ? (
+                              <TooltipProvider>
+                                <Tooltip>
+                                  <TooltipTrigger asChild>
+                                    <Button size="sm" variant="outline" className="h-8 border-emerald-500/20 text-emerald-500 hover:bg-emerald-500/10 hover:text-emerald-400">
+                                      <UserCheck className="h-4 w-4 mr-1" />
+                                      Unblock
+                                    </Button>
+                                  </TooltipTrigger>
+                                  <TooltipContent>
+                                    <p>Unblock this user</p>
+                                  </TooltipContent>
+                                </Tooltip>
+                              </TooltipProvider>
+                            ) : (
+                              <TooltipProvider>
+                                <Tooltip>
+                                  <TooltipTrigger asChild>
+                                    <Button size="sm" variant="outline" className="h-8 border-destructive/20 text-destructive hover:bg-destructive/10 hover:text-destructive">
+                                      <Ban className="h-4 w-4 mr-1" />
+                                      Block
+                                    </Button>
+                                  </TooltipTrigger>
+                                  <TooltipContent>
+                                    <p>Block access to the store</p>
+                                  </TooltipContent>
+                                </Tooltip>
+                              </TooltipProvider>
+                            )}
+                          </div>
+                        </TableCell>
+                      </motion.tr>
+                    ))
+                  ) : (
+                    <TableRow>
+                      <TableCell colSpan={8} className="h-32 text-center text-muted-foreground">
+                        <div className="flex flex-col items-center justify-center gap-2">
+                          <Users className="h-8 w-8 opacity-20" />
+                          <p>No users found</p>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </AnimatePresence>
               </TableBody>
             </Table>
-          )}
+          </div>
+
           {pagination && pagination.totalPages > 1 && (
-            <div className="mt-4 flex items-center justify-between">
+            <div className="mt-4 flex items-center justify-between border-t border-border/50 pt-4">
               <div className="text-sm text-muted-foreground">
-                Showing page {pagination.page} of {pagination.totalPages} ({pagination.total} total users)
+                Showing page <span className="font-medium text-foreground">{pagination.page}</span> of {pagination.totalPages}
               </div>
               <div className="flex gap-2">
                 <Button
@@ -328,6 +307,7 @@ export default function AdminUsersPage() {
                   size="sm"
                   onClick={() => setPage(p => Math.max(1, p - 1))}
                   disabled={!pagination.hasPrevPage}
+                  className="h-8"
                 >
                   Previous
                 </Button>
@@ -336,6 +316,7 @@ export default function AdminUsersPage() {
                   size="sm"
                   onClick={() => setPage(p => p + 1)}
                   disabled={!pagination.hasNextPage}
+                  className="h-8"
                 >
                   Next
                 </Button>
@@ -347,3 +328,5 @@ export default function AdminUsersPage() {
     </div>
   );
 }
+
+

app/dashboard/admin/vendors/page.tsx

@@ -1,14 +1,25 @@
 "use client";
 
 import React, { useState, useEffect, useCallback } 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 { Input } from "@/components/ui/input";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { Search, MoreHorizontal, UserCheck, UserX, Mail, Loader2 } from "lucide-react";
-import { fetchClient } from "@/lib/api-client";
-import { useToast } from "@/hooks/use-toast";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/common/card";
+import { Badge } from "@/components/common/badge";
+import { Button } from "@/components/common/button";
+import { Input } from "@/components/common/input";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/common/table";
+import { Search, MoreHorizontal, UserCheck, UserX, Mail, Loader2, Store, Shield, ShieldAlert, Clock, Calendar, Pencil, Plus } from "lucide-react";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/common/dialog";
+import { Label } from "@/components/common/label";
+import { fetchClient } from "@/lib/api/api-client";
+import { useToast } from "@/lib/hooks/use-toast";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/common/dropdown-menu";
 
 interface Vendor {
   _id: string;
@@ -37,9 +48,73 @@ export default function AdminVendorsPage() {
   const { toast } = useToast();
   const [loading, setLoading] = useState(true);
   const [vendors, setVendors] = useState<Vendor[]>([]);
+  // State for browser detection
+  const [isFirefox, setIsFirefox] = useState(false);
+
+  useEffect(() => {
+    const ua = navigator.userAgent.toLowerCase();
+    setIsFirefox(ua.includes("firefox") && !ua.includes("chrome"));
+  }, []);
   const [page, setPage] = useState(1);
   const [pagination, setPagination] = useState<PaginationResponse['pagination'] | null>(null);
   const [searchQuery, setSearchQuery] = useState("");
+  const [isEditStoreOpen, setIsEditStoreOpen] = useState(false);
+  const [editingVendor, setEditingVendor] = useState<Vendor | null>(null);
+  const [newStoreId, setNewStoreId] = useState("");
+  const [updating, setUpdating] = useState(false);
+
+  const handleToggleStatus = async (vendor: Vendor) => {
+    try {
+      await fetchClient(`/admin/vendors/${vendor._id}/status`, {
+        method: 'PATCH',
+        body: { isActive: !vendor.isActive }
+      });
+      toast({
+        title: "Success",
+        description: `Vendor ${vendor.isActive ? 'suspended' : 'activated'} successfully`,
+      });
+      fetchVendors();
+    } catch (error: any) {
+      toast({
+        title: "Error",
+        description: error.message || "Failed to update vendor status",
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handleEditStore = (vendor: Vendor) => {
+    setEditingVendor(vendor);
+    setNewStoreId(vendor.storeId || "");
+    setIsEditStoreOpen(true);
+  };
+
+  const saveStoreId = async () => {
+    if (!editingVendor) return;
+
+    try {
+      setUpdating(true);
+      await fetchClient(`/admin/vendors/${editingVendor._id}/store-id`, {
+        method: 'PUT',
+        body: { storeId: newStoreId }
+      });
+
+      toast({
+        title: "Success",
+        description: "Store ID updated successfully",
+      });
+      setIsEditStoreOpen(false);
+      fetchVendors(); // Refresh list
+    } catch (error: any) {
+      toast({
+        title: "Error",
+        description: error.message || "Failed to update store ID",
+        variant: "destructive",
+      });
+    } finally {
+      setUpdating(false);
+    }
+  };
 
   const fetchVendors = useCallback(async () => {
     try {
@@ -68,10 +143,10 @@ export default function AdminVendorsPage() {
   }, [fetchVendors]);
 
   const filteredVendors = searchQuery.trim()
-    ? vendors.filter(v => 
-        v.username.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        (v.storeId && v.storeId.toString().toLowerCase().includes(searchQuery.toLowerCase()))
-      )
+    ? vendors.filter(v =>
+      v.username.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      (v.storeId && v.storeId.toString().toLowerCase().includes(searchQuery.toLowerCase()))
+    )
     : vendors;
 
   const activeVendors = vendors.filter(v => v.isActive);
@@ -79,177 +154,422 @@ export default function AdminVendorsPage() {
   const adminVendors = vendors.filter(v => v.isAdmin);
   const totalVendors = pagination?.total || vendors.length;
 
+  const stats = [
+    {
+      title: "Total Vendors",
+      value: totalVendors,
+      description: "Registered vendors",
+      icon: Store,
+    },
+    {
+      title: "Active Vendors",
+      value: activeVendors.length,
+      description: `${vendors.length > 0 ? Math.round((activeVendors.length / vendors.length) * 100) : 0}% active rate`,
+      icon: UserCheck,
+    },
+    {
+      title: "Suspended",
+      value: suspendedVendors.length,
+      description: `${vendors.length > 0 ? Math.round((suspendedVendors.length / vendors.length) * 100) : 0}% suspension rate`,
+      icon: UserX,
+    },
+    {
+      title: "Admin Users",
+      value: adminVendors.length,
+      description: "Administrative access",
+      icon: ShieldAlert,
+    },
+  ];
+
   return (
-    <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-semibold tracking-tight">All Vendors</h1>
-        <p className="text-sm text-muted-foreground mt-1">Manage vendor accounts and permissions</p>
+    <div className="space-y-6 animate-in fade-in duration-500">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold tracking-tight text-foreground">All Vendors</h1>
+          <p className="text-sm text-muted-foreground mt-1">Manage vendor accounts and permissions</p>
+        </div>
       </div>
 
       {/* Stats Cards */}
       <div className="grid gap-4 md:grid-cols-4">
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Total Vendors</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{totalVendors}</div>
-            <p className="text-xs text-muted-foreground">Registered vendors</p>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Active Vendors</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{activeVendors.length}</div>
-            <p className="text-xs text-muted-foreground">
-              {vendors.length > 0 ? Math.round((activeVendors.length / vendors.length) * 100) : 0}% active rate
-            </p>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Suspended</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{suspendedVendors.length}</div>
-            <p className="text-xs text-muted-foreground">
-              {vendors.length > 0 ? Math.round((suspendedVendors.length / vendors.length) * 100) : 0}% suspension rate
-            </p>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Admin Users</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{adminVendors.length}</div>
-            <p className="text-xs text-muted-foreground">Administrative access</p>
-          </CardContent>
-        </Card>
+        {stats.map((stat, i) => (
+          <Card key={i} className="border-border/40 bg-background/50 backdrop-blur-sm shadow-sm overflow-hidden">
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">{stat.title}</CardTitle>
+              <stat.icon className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="animate-in fade-in slide-in-from-bottom-2 duration-500" style={{ animationDelay: `${i * 100}ms` }}>
+                <div className="text-2xl font-bold">{stat.value}</div>
+                <p className="text-xs text-muted-foreground">{stat.description}</p>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
       </div>
 
       {/* Search and Filters */}
-      <Card>
-        <CardHeader>
-          <div className="flex items-center justify-between">
+      <Card className="border-border/40 bg-background/50 backdrop-blur-sm shadow-sm">
+        <CardHeader className="pb-4">
+          <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
             <div>
-              <CardTitle>Vendor Management</CardTitle>
+              <CardTitle className="text-lg font-medium">Vendor Management</CardTitle>
               <CardDescription>View and manage all vendor accounts</CardDescription>
             </div>
             <div className="flex items-center space-x-2">
               <div className="relative">
-                <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
-                <Input 
-                  placeholder="Search vendors..." 
-                  className="pl-8 w-64"
+                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+                <Input
+                  placeholder="Search vendors..."
+                  className="pl-9 w-64 bg-background/50 border-border/50 focus:bg-background transition-colors"
                   value={searchQuery}
                   onChange={(e) => setSearchQuery(e.target.value)}
                 />
               </div>
-              <Button variant="outline" size="sm">
+              <Button variant="outline" size="sm" className="bg-background/50 border-border/50 hover:bg-background transition-colors">
                 <Mail className="h-4 w-4 mr-2" />
-                Send Message
+                Message
               </Button>
             </div>
           </div>
         </CardHeader>
         <CardContent>
-          {loading ? (
-            <div className="flex items-center justify-center py-8">
-              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-            </div>
-          ) : filteredVendors.length === 0 ? (
-            <div className="text-center py-8 text-muted-foreground">
-              {searchQuery.trim() ? "No vendors found matching your search" : "No vendors found"}
-            </div>
-          ) : (
-            <>
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>Vendor</TableHead>
-                    <TableHead>Store</TableHead>
-                    <TableHead>Status</TableHead>
-                    <TableHead>Join Date</TableHead>
-                    <TableHead>Last Login</TableHead>
-                    <TableHead className="text-right">Actions</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {filteredVendors.map((vendor) => (
-                    <TableRow key={vendor._id}>
-                      <TableCell>
-                        <div className="font-medium">{vendor.username}</div>
-                      </TableCell>
-                      <TableCell>{vendor.storeId || 'No store'}</TableCell>
-                      <TableCell>
-                        <div className="flex flex-col space-y-1">
-                          <Badge 
-                            variant={vendor.isActive ? "default" : "destructive"}
-                          >
-                            {vendor.isActive ? "active" : "suspended"}
-                          </Badge>
-                          {vendor.isAdmin && (
-                            <Badge variant="secondary" className="text-xs">
-                              Admin
-                            </Badge>
-                          )}
-                        </div>
-                      </TableCell>
-                      <TableCell>
-                        {vendor.createdAt ? new Date(vendor.createdAt).toLocaleDateString() : 'N/A'}
-                      </TableCell>
-                      <TableCell>
-                        {vendor.lastLogin ? new Date(vendor.lastLogin).toLocaleDateString() : 'Never'}
-                      </TableCell>
-                      <TableCell className="text-right">
-                        <div className="flex items-center justify-end space-x-2">
-                          <Button variant="outline" size="sm">
-                            <UserCheck className="h-4 w-4" />
-                          </Button>
-                          <Button variant="outline" size="sm">
-                            <UserX className="h-4 w-4" />
-                          </Button>
-                          <Button variant="outline" size="sm">
-                            <MoreHorizontal className="h-4 w-4" />
-                          </Button>
+          <div className="rounded-md border border-border/50 overflow-hidden">
+            <Table>
+              <TableHeader className="bg-muted/30">
+                <TableRow className="border-border/50 hover:bg-transparent">
+                  <TableHead>Vendor</TableHead>
+                  <TableHead>Store</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead>Join Date</TableHead>
+                  <TableHead>Last Login</TableHead>
+                  <TableHead className="text-right">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {isFirefox ? (
+                  loading ? (
+                    <TableRow>
+                      <TableCell colSpan={6} className="h-32 text-center">
+                        <div className="flex flex-col items-center justify-center gap-2 text-muted-foreground">
+                          <Loader2 className="h-8 w-8 animate-spin opacity-25" />
+                          <p>Loading vendors...</p>
                         </div>
                       </TableCell>
                     </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-              {pagination && pagination.totalPages > 1 && (
-                <div className="mt-4 flex items-center justify-between text-sm text-muted-foreground">
-                  <span>
-                    Page {pagination.page} of {pagination.totalPages} ({pagination.total} total)
-                  </span>
-                  <div className="flex gap-2">
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={() => setPage(p => Math.max(1, p - 1))}
-                      disabled={!pagination.hasPrevPage || loading}
-                    >
-                      Previous
-                    </Button>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={() => setPage(p => p + 1)}
-                      disabled={!pagination.hasNextPage || loading}
-                    >
-                      Next
-                    </Button>
-                  </div>
-                </div>
-              )}
-            </>
+                  ) : filteredVendors.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={6} className="h-32 text-center text-muted-foreground">
+                        {searchQuery.trim() ? "No vendors found matching your search" : "No vendors found"}
+                      </TableCell>
+                    </TableRow>
+                  ) : (
+                    filteredVendors.map((vendor, index) => (
+                      <motion.tr
+                        key={vendor._id}
+                        initial={{ opacity: 0, y: 10 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ duration: 0.2, delay: index * 0.03 }}
+                        className="group hover:bg-muted/40 border-b border-border/50 transition-colors"
+                      >
+                        <TableCell>
+                          <div className="font-medium flex items-center gap-2">
+                            <div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold text-xs">
+                              {vendor.username.substring(0, 2).toUpperCase()}
+                            </div>
+                            {vendor.username}
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          {vendor.storeId ? (
+                            <div className="flex items-center gap-2 group/store">
+                              <span className="font-mono text-xs">{vendor.storeId}</span>
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="h-6 w-6 opacity-0 group-hover/store:opacity-100 transition-opacity"
+                                onClick={() => handleEditStore(vendor)}
+                              >
+                                <Pencil className="h-3 w-3" />
+                              </Button>
+                            </div>
+                          ) : (
+                            <div className="flex items-center gap-2">
+                              <span className="text-muted-foreground italic text-xs">No store</span>
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="h-6 w-6 text-muted-foreground hover:text-primary"
+                                onClick={() => handleEditStore(vendor)}
+                              >
+                                <Plus className="h-3 w-3" />
+                              </Button>
+                            </div>
+                          )}
+                        </TableCell>
+                        <TableCell>
+                          <div className="flex items-center gap-2">
+                            <Badge
+                              variant={vendor.isActive ? "default" : "destructive"}
+                              className={vendor.isActive ? "bg-green-600 hover:bg-green-700" : ""}
+                            >
+                              {vendor.isActive ? "Active" : "Suspended"}
+                            </Badge>
+                            {vendor.isAdmin && (
+                              <Badge variant="outline" className="border-blue-200 text-blue-700 bg-blue-50 dark:bg-blue-900/20 dark:text-blue-400 dark:border-blue-900">
+                                <Shield className="h-3 w-3 mr-1" />
+                                Admin
+                              </Badge>
+                            )}
+                          </div>
+                        </TableCell>
+                        <TableCell className="text-sm text-muted-foreground">
+                          <div className="flex items-center gap-1.5">
+                            <Calendar className="h-3.5 w-3.5 opacity-70" />
+                            {vendor.createdAt ? new Date(vendor.createdAt).toLocaleDateString() : 'N/A'}
+                          </div>
+                        </TableCell>
+                        <TableCell className="text-sm text-muted-foreground">
+                          <div className="flex items-center gap-1.5">
+                            <Clock className="h-3.5 w-3.5 opacity-70" />
+                            {vendor.lastLogin ? new Date(vendor.lastLogin).toLocaleDateString() : 'Never'}
+                          </div>
+                        </TableCell>
+                        <TableCell className="text-right">
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                              <Button variant="ghost" className="h-8 w-8 p-0">
+                                <span className="sr-only">Open menu</span>
+                                <MoreHorizontal className="h-4 w-4" />
+                              </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end">
+                              <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                              <DropdownMenuItem
+                                onClick={() => navigator.clipboard.writeText(vendor._id)}
+                              >
+                                Copy Vendor ID
+                              </DropdownMenuItem>
+                              <DropdownMenuSeparator />
+                              <DropdownMenuItem
+                                className={vendor.isActive ? "text-red-600" : "text-green-600"}
+                                onClick={() => handleToggleStatus(vendor)}
+                              >
+                                {vendor.isActive ? (
+                                  <>
+                                    <UserX className="mr-2 h-4 w-4" />
+                                    Suspend Vendor
+                                  </>
+                                ) : (
+                                  <>
+                                    <UserCheck className="mr-2 h-4 w-4" />
+                                    Activate Vendor
+                                  </>
+                                )}
+                              </DropdownMenuItem>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        </TableCell>
+                      </motion.tr>
+                    ))
+                  )
+                ) : (
+                  <AnimatePresence mode="popLayout">
+                    {loading ? (
+                      <TableRow>
+                        <TableCell colSpan={6} className="h-32 text-center">
+                          <div className="flex flex-col items-center justify-center gap-2 text-muted-foreground">
+                            <Loader2 className="h-8 w-8 animate-spin opacity-25" />
+                            <p>Loading vendors...</p>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    ) : filteredVendors.length === 0 ? (
+                      <TableRow>
+                        <TableCell colSpan={6} className="h-32 text-center text-muted-foreground">
+                          {searchQuery.trim() ? "No vendors found matching your search" : "No vendors found"}
+                        </TableCell>
+                      </TableRow>
+                    ) : (
+                      filteredVendors.map((vendor, index) => (
+                        <motion.tr
+                          key={vendor._id}
+                          initial={{ opacity: 0, y: 10 }}
+                          animate={{ opacity: 1, y: 0 }}
+                          exit={{ opacity: 0 }}
+                          transition={{ duration: 0.2, delay: index * 0.03 }}
+                          className="group hover:bg-muted/40 border-b border-border/50 transition-colors"
+                        >
+                          <TableCell>
+                            <div className="font-medium flex items-center gap-2">
+                              <div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold text-xs">
+                                {vendor.username.substring(0, 2).toUpperCase()}
+                              </div>
+                              {vendor.username}
+                            </div>
+                          </TableCell>
+                          <TableCell>
+                            {vendor.storeId ? (
+                              <div className="flex items-center gap-2 group/store">
+                                <span className="font-mono text-xs">{vendor.storeId}</span>
+                                <Button
+                                  variant="ghost"
+                                  size="icon"
+                                  className="h-6 w-6 opacity-0 group-hover/store:opacity-100 transition-opacity"
+                                  onClick={() => handleEditStore(vendor)}
+                                >
+                                  <Pencil className="h-3 w-3" />
+                                </Button>
+                              </div>
+                            ) : (
+                              <div className="flex items-center gap-2">
+                                <span className="text-muted-foreground italic text-xs">No store</span>
+                                <Button
+                                  variant="ghost"
+                                  size="icon"
+                                  className="h-6 w-6 text-muted-foreground hover:text-primary"
+                                  onClick={() => handleEditStore(vendor)}
+                                >
+                                  <Plus className="h-3 w-3" />
+                                </Button>
+                              </div>
+                            )}
+                          </TableCell>
+                          <TableCell>
+                            <div className="flex items-center gap-2">
+                              <Badge
+                                variant={vendor.isActive ? "default" : "destructive"}
+                                className={vendor.isActive ? "bg-green-600 hover:bg-green-700" : ""}
+                              >
+                                {vendor.isActive ? "Active" : "Suspended"}
+                              </Badge>
+                              {vendor.isAdmin && (
+                                <Badge variant="outline" className="border-blue-200 text-blue-700 bg-blue-50 dark:bg-blue-900/20 dark:text-blue-400 dark:border-blue-900">
+                                  <Shield className="h-3 w-3 mr-1" />
+                                  Admin
+                                </Badge>
+                              )}
+                            </div>
+                          </TableCell>
+                          <TableCell className="text-sm text-muted-foreground">
+                            <div className="flex items-center gap-1.5">
+                              <Calendar className="h-3.5 w-3.5 opacity-70" />
+                              {vendor.createdAt ? new Date(vendor.createdAt).toLocaleDateString() : 'N/A'}
+                            </div>
+                          </TableCell>
+                          <TableCell className="text-sm text-muted-foreground">
+                            <div className="flex items-center gap-1.5">
+                              <Clock className="h-3.5 w-3.5 opacity-70" />
+                              {vendor.lastLogin ? new Date(vendor.lastLogin).toLocaleDateString() : 'Never'}
+                            </div>
+                          </TableCell>
+                          <TableCell className="text-right">
+                            <DropdownMenu>
+                              <DropdownMenuTrigger asChild>
+                                <Button variant="ghost" className="h-8 w-8 p-0">
+                                  <span className="sr-only">Open menu</span>
+                                  <MoreHorizontal className="h-4 w-4" />
+                                </Button>
+                              </DropdownMenuTrigger>
+                              <DropdownMenuContent align="end">
+                                <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                                <DropdownMenuItem
+                                  onClick={() => navigator.clipboard.writeText(vendor._id)}
+                                >
+                                  Copy Vendor ID
+                                </DropdownMenuItem>
+                                <DropdownMenuSeparator />
+                                <DropdownMenuItem
+                                  className={vendor.isActive ? "text-red-600" : "text-green-600"}
+                                  onClick={() => handleToggleStatus(vendor)}
+                                >
+                                  {vendor.isActive ? (
+                                    <>
+                                      <UserX className="mr-2 h-4 w-4" />
+                                      Suspend Vendor
+                                    </>
+                                  ) : (
+                                    <>
+                                      <UserCheck className="mr-2 h-4 w-4" />
+                                      Activate Vendor
+                                    </>
+                                  )}
+                                </DropdownMenuItem>
+                              </DropdownMenuContent>
+                            </DropdownMenu>
+                          </TableCell>
+                        </motion.tr>
+                      ))
+                    )}
+                  </AnimatePresence>
+                )}
+              </TableBody>
+            </Table>
+          </div>
+          {pagination && pagination.totalPages > 1 && (
+            <div className="mt-4 flex items-center justify-between border-t border-border/50 pt-4 text-sm text-muted-foreground">
+              <span>
+                Page <span className="font-medium text-foreground">{pagination.page}</span> of {pagination.totalPages}
+              </span>
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setPage(p => Math.max(1, p - 1))}
+                  disabled={!pagination.hasPrevPage || loading}
+                  className="h-8"
+                >
+                  Previous
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setPage(p => p + 1)}
+                  disabled={!pagination.hasNextPage || loading}
+                  className="h-8"
+                >
+                  Next
+                </Button>
+              </div>
+            </div>
           )}
         </CardContent>
       </Card>
-    </div>
+
+      <Dialog open={isEditStoreOpen} onOpenChange={setIsEditStoreOpen}>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>Update Vendor Store</DialogTitle>
+            <DialogDescription>
+              Enter the Store ID to assign to vendor <span className="font-semibold text-foreground">{editingVendor?.username}</span>.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-4 py-4">
+            <div className="grid gap-2">
+              <Label htmlFor="storeId">Store ID</Label>
+              <Input
+                id="storeId"
+                value={newStoreId}
+                onChange={(e) => setNewStoreId(e.target.value)}
+                placeholder="Enter 24-character Store ID"
+                className="col-span-3 font-mono"
+              />
+              <p className="text-xs text-muted-foreground">
+                Ensure the Store ID corresponds to an existing store in the system.
+              </p>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsEditStoreOpen(false)} disabled={updating}>Cancel</Button>
+            <Button onClick={saveStoreId} disabled={updating || !newStoreId || newStoreId.length < 24}>
+              {updating && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              Save Changes
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div >
   );
 }
+
+

app/dashboard/analytics/loading.tsx

@@ -1,5 +1,5 @@
-import { Skeleton } from "@/components/ui/skeleton";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Skeleton } from "@/components/common/skeleton";
+import { Card, CardContent, CardHeader } from "@/components/common/card";
 import Layout from "@/components/layout/layout";
 import { SnowLoader } from "@/components/snow-loader";
 
@@ -61,4 +61,4 @@ export default function AnalyticsLoading() {
       </div>
     </Layout>
   );
-} 
+} 

app/dashboard/analytics/page.tsx

@@ -5,7 +5,7 @@ import Dashboard from "@/components/dashboard/dashboard";
 import AnalyticsDashboard from '@/components/analytics/AnalyticsDashboard';
 import AnalyticsDashboardSkeleton from '@/components/analytics/AnalyticsDashboardSkeleton';
 import StoreSelector from '@/components/analytics/StoreSelector';
-import { getAnalyticsOverviewServer } from '@/lib/server-api';
+import { getAnalyticsOverviewServer } from '@/lib/api/server-api';
 import { fetchServer } from '@/lib/api';
 import { performance } from 'perf_hooks';
 import { Info, GitCommit, User, Zap, BarChart3 } from 'lucide-react';
@@ -34,14 +34,14 @@ export default async function AnalyticsPage({
 
   // Await searchParams as required by Next.js 15+
   const resolvedSearchParams = await searchParams;
-  
+
   // Check for storeId in query parameters (for staff users)
   const storeId = resolvedSearchParams?.storeId;
-  
+
   // Check for storeId in cookies (alternative method for staff users)
   const cookieStore = await cookies();
   const cookieStoreId = cookieStore.get('storeId')?.value;
-  
+
   // Use query parameter first, then cookie, then undefined (for vendors)
   const finalStoreId = storeId || cookieStoreId;
 
@@ -73,7 +73,7 @@ export default async function AnalyticsPage({
 
         <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" /> 
+            <Info size={12} className="text-muted-foreground/80" />
             <span>v{panelVersion}</span>
           </div>
 
@@ -100,12 +100,12 @@ export default async function AnalyticsPage({
     );
   } catch (error) {
     console.error('Error fetching analytics data:', error);
-    
+
     // If it's a 401/403 error, redirect to login
     if (error instanceof Error && error.message.includes('401')) {
-      redirect('/login');
+      redirect('/auth/login');
     }
-    
+
     // If it's a 400 error (missing storeId for staff), show store selector
     if (error instanceof Error && error.message.includes('400')) {
       return (
@@ -122,7 +122,7 @@ export default async function AnalyticsPage({
         </Dashboard>
       );
     }
-    
+
     // For other errors, show a fallback
     return (
       <Dashboard>
@@ -142,4 +142,4 @@ export default async function AnalyticsPage({
       </Dashboard>
     );
   }
-} 
+} 

app/dashboard/balance/page.tsx

@@ -2,8 +2,8 @@
 
 import { useState } from "react";
 import Dashboard from "@/components/dashboard/dashboard";
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/common/card";
+import { Button } from "@/components/common/button";
 import { Wallet, Bitcoin, Coins, DollarSign, ArrowUpRight } from "lucide-react";
 import { toast } from "sonner";
 
@@ -166,3 +166,4 @@ export default function BalancePage() {
   );
 }
 
+

app/dashboard/categories/page.tsx

@@ -2,8 +2,8 @@
 
 import { useState, useEffect, useRef } from "react";
 import Layout from "@/components/layout/layout";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
+import { Button } from "@/components/common/button";
+import { Input } from "@/components/common/input";
 import { Plus, Pencil, Trash2, ChevronRight, ChevronDown, MoveVertical, FolderTree } from "lucide-react";
 import { toast } from "sonner";
 import {
@@ -12,7 +12,7 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select";
+} from "@/components/common/select";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -22,10 +22,11 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
+} from "@/components/common/alert-dialog";
 import { apiRequest } from "@/lib/api";
-import type { Category } from "@/models/categories";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import type { Category } from "@/lib/models/categories";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/common/card";
+import { motion, AnimatePresence } from "framer-motion";
 
 // Drag and Drop imports
 import { DndProvider, useDrag, useDrop, DropTargetMonitor } from 'react-dnd';
@@ -49,14 +50,15 @@ export default function CategoriesPage() {
   const [editingCategory, setEditingCategory] = useState<Category | null>(null);
   const [categoryToDelete, setCategoryToDelete] = useState<Category | null>(null);
   const [expanded, setExpanded] = useState<Record<string, boolean>>({});
+  const [loading, setLoading] = useState(true);
 
   // Get root categories sorted by order
   const rootCategories = categories
     .filter(cat => !cat.parentId)
     .sort((a, b) => (a.order || 0) - (b.order || 0));
-  
+
   // Get subcategories sorted by order
-  const getSubcategories = (parentId: string) => 
+  const getSubcategories = (parentId: string) =>
     categories
       .filter(cat => cat.parentId === parentId)
       .sort((a, b) => (a.order || 0) - (b.order || 0));
@@ -67,10 +69,13 @@ export default function CategoriesPage() {
 
   const fetchCategories = async () => {
     try {
+      setLoading(true);
       const fetchedCategories = await apiRequest("/categories", "GET");
       setCategories(fetchedCategories);
     } catch (error) {
       toast.error("Failed to fetch categories");
+    } finally {
+      setLoading(false);
     }
   };
 
@@ -82,13 +87,13 @@ export default function CategoriesPage() {
 
     try {
       // Find the highest order in the selected parent group
-      const siblings = selectedParentId 
+      const siblings = selectedParentId
         ? categories.filter(cat => cat.parentId === selectedParentId)
         : categories.filter(cat => !cat.parentId);
-      
-      const maxOrder = siblings.reduce((max, cat) => 
+
+      const maxOrder = siblings.reduce((max, cat) =>
         Math.max(max, cat.order || 0), 0);
-      
+
       const response = await apiRequest("/categories", "POST", {
         name: newCategoryName,
         parentId: selectedParentId || undefined,
@@ -110,7 +115,7 @@ export default function CategoriesPage() {
         name: newName,
       });
 
-      setCategories(categories.map(cat => 
+      setCategories(categories.map(cat =>
         cat._id === categoryId ? { ...cat, name: newName } : cat
       ));
       setEditingCategory(null);
@@ -138,55 +143,55 @@ export default function CategoriesPage() {
     // Create new array with updated orders
     const dragIndex = categories.findIndex(cat => cat._id === dragId);
     const hoverIndex = categories.findIndex(cat => cat._id === hoverId);
-    
+
     if (dragIndex === -1 || hoverIndex === -1) return;
-    
+
     const draggedCategory = categories[dragIndex];
-    
+
     // Make sure we're only reordering within the same parent group
     if (draggedCategory.parentId !== parentId) return;
-    
+
     // Create a copy for reordering
     const updatedCategories = [...categories];
-    
+
     // Get only categories with the same parent for reordering
     const siblingCategories = updatedCategories
       .filter(cat => cat.parentId === parentId)
       .sort((a, b) => (a.order || 0) - (b.order || 0));
-    
+
     // Remove the dragged category from its position
     const draggedItem = siblingCategories.find(cat => cat._id === dragId);
     if (!draggedItem) return;
-    
+
     const filteredSiblings = siblingCategories.filter(cat => cat._id !== dragId);
-    
+
     // Find where to insert the dragged item
     const hoverItem = siblingCategories.find(cat => cat._id === hoverId);
     if (!hoverItem) return;
-    
+
     const hoverPos = filteredSiblings.findIndex(cat => cat._id === hoverId);
-    
+
     // Insert the dragged item at the new position
     filteredSiblings.splice(hoverPos, 0, draggedItem);
-    
+
     // Update the order for all siblings
     filteredSiblings.forEach((cat, index) => {
       cat.order = index;
     });
-    
+
     // Update the categories state
     setCategories(updatedCategories.map(cat => {
       const updatedCat = filteredSiblings.find(c => c._id === cat._id);
       return updatedCat || cat;
     }));
-    
+
     // Save the new order to the server using bulk update
     try {
       const categoriesToUpdate = filteredSiblings.map(cat => ({
         _id: cat._id,
         order: cat.order
       }));
-      
+
       await apiRequest("/categories/bulk-order", "PUT", {
         categories: categoriesToUpdate
       });
@@ -210,9 +215,9 @@ export default function CategoriesPage() {
     const hasSubcategories = subcategories.length > 0;
     const isEditing = editingCategory?._id === category._id;
     const isExpanded = expanded[category._id];
-    
+
     const ref = useRef<HTMLDivElement>(null);
-    
+
     // Set up drag
     const [{ isDragging }, drag] = useDrag({
       type: ItemTypes.CATEGORY,
@@ -221,7 +226,7 @@ export default function CategoriesPage() {
         isDragging: monitor.isDragging(),
       }),
     });
-    
+
     // Set up drop
     const [{ handlerId, isOver }, drop] = useDrop<DragItem, void, { handlerId: string | symbol | null; isOver: boolean }>({
       accept: ItemTypes.CATEGORY,
@@ -231,56 +236,64 @@ export default function CategoriesPage() {
       }),
       hover(item: DragItem, monitor) {
         if (!ref.current) return;
-        
+
         const dragId = item.id;
         const hoverId = category._id;
-        
+
         // Don't replace items with themselves
         if (dragId === hoverId) return;
-        
+
         // Only allow reordering within the same parent
         if (item.parentId !== category.parentId) return;
-        
+
         moveCategory(dragId, hoverId, category.parentId);
       },
     });
-    
+
     // Connect the drag and drop refs
     drag(drop(ref));
-    
+
     return (
-      <div key={category._id} className="space-y-1">
-        <div 
+      <motion.div
+        key={category._id}
+        initial={{ opacity: 0, y: 5 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0 }}
+        className="space-y-1"
+      >
+        <div
           ref={ref}
-          className={`group flex items-center p-2 rounded-md transition-colors
-            ${isEditing ? 'bg-gray-100 dark:bg-gray-800' : ''}
-            ${isOver ? 'bg-gray-100 dark:bg-gray-800' : 'hover:bg-gray-100 dark:hover:bg-gray-800'}
-            ${isDragging ? 'opacity-50' : 'opacity-100'}`}
+          className={`group flex items-center p-3 rounded-xl transition-all duration-200 border mb-2
+            ${isEditing ? 'bg-indigo-500/10 border-indigo-500/30' : ''}
+            ${isOver ? 'bg-indigo-500/20 border-indigo-500/50 scale-[1.02]' : 'bg-black/40 border-white/5 hover:bg-black/60 hover:border-white/10 hover:shadow-lg'}
+            ${isDragging ? 'opacity-30' : 'opacity-100'} backdrop-blur-sm`}
           style={{ marginLeft: `${level * 24}px` }}
           data-handler-id={handlerId}
         >
-          <div className="cursor-grab mr-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
+          <div className="cursor-grab mr-2 text-muted-foreground/40 hover:text-muted-foreground transition-colors">
             <MoveVertical className="h-4 w-4" />
           </div>
-          
-          {hasSubcategories && (
-            <button 
+
+          {hasSubcategories ? (
+            <button
               onClick={() => toggleExpand(category._id)}
-              className="mr-1 focus:outline-none"
+              className="mr-1 focus:outline-none p-0.5 rounded-sm hover:bg-muted text-muted-foreground transition-colors"
             >
-              {isExpanded ? 
-                <ChevronDown className="h-4 w-4 text-muted-foreground" /> : 
-                <ChevronRight className="h-4 w-4 text-muted-foreground" />
+              {isExpanded ?
+                <ChevronDown className="h-4 w-4" /> :
+                <ChevronRight className="h-4 w-4" />
               }
             </button>
+          ) : (
+            <div className="w-6 h-5" /> // Spacer
           )}
-          
+
           <div className="flex-1 flex items-center space-x-2">
             {isEditing ? (
               <Input
                 value={editingCategory?.name || ""}
                 onChange={(e) => setEditingCategory(prev => prev ? { ...prev, name: e.target.value } : prev)}
-                className="h-8 max-w-[200px]"
+                className="h-8 max-w-[200px] border-primary/30 focus-visible:ring-primary/20"
                 autoFocus
                 onKeyDown={(e) => {
                   if (e.key === 'Enter' && editingCategory) {
@@ -300,7 +313,7 @@ export default function CategoriesPage() {
                 <Button
                   size="sm"
                   variant="ghost"
-                  className="h-8 px-2 text-green-600 hover:text-green-700 hover:bg-green-50"
+                  className="h-8 px-2 text-green-600 hover:text-green-700 hover:bg-green-500/10"
                   onClick={() => editingCategory && handleUpdateCategory(category._id, editingCategory.name)}
                 >
                   Save
@@ -317,83 +330,107 @@ export default function CategoriesPage() {
             ) : (
               <>
                 <Button
-                  size="sm"
+                  size="icon"
                   variant="ghost"
-                  className="h-8 w-8 p-0 text-blue-500 hover:text-blue-600 hover:bg-blue-50"
+                  className="h-8 w-8 text-muted-foreground hover:text-primary hover:bg-primary/10 transition-colors"
                   onClick={() => setEditingCategory(category)}
                 >
-                  <Pencil className="h-4 w-4" />
+                  <Pencil className="h-3.5 w-3.5" />
                 </Button>
                 <Button
-                  size="sm"
+                  size="icon"
                   variant="ghost"
-                  className="h-8 w-8 p-0 text-red-500 hover:text-red-600 hover:bg-red-50"
+                  className="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors"
                   onClick={() => setCategoryToDelete(category)}
                 >
-                  <Trash2 className="h-4 w-4" />
+                  <Trash2 className="h-3.5 w-3.5" />
                 </Button>
               </>
             )}
           </div>
         </div>
-        {isExpanded && subcategories.map(subcat => 
-          <CategoryItem key={subcat._id} category={subcat} level={level + 1} />
-        )}
-      </div>
+        <AnimatePresence>
+          {isExpanded && hasSubcategories && (
+            <motion.div
+              initial={{ opacity: 0, height: 0 }}
+              animate={{ opacity: 1, height: "auto" }}
+              exit={{ opacity: 0, height: 0 }}
+              transition={{ duration: 0.2 }}
+            >
+              {subcategories.map(subcat =>
+                <CategoryItem key={subcat._id} category={subcat} level={level + 1} />
+              )}
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </motion.div>
     );
   };
 
   return (
     <Layout>
-      <div className="space-y-6">
+      <div className="space-y-8 animate-in fade-in duration-500">
         <div className="flex items-center justify-between">
-          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white flex items-center">
-            <FolderTree className="mr-2 h-6 w-6" />
-            Categories
-          </h1>
+          <div>
+            <h1 className="text-2xl font-semibold text-foreground flex items-center">
+              <FolderTree className="mr-3 h-6 w-6 text-primary" />
+              Categories
+            </h1>
+            <p className="text-muted-foreground text-sm mt-1">
+              Manage your product categories and hierarchy
+            </p>
+          </div>
         </div>
 
-        <div className="grid grid-cols-1 lg:grid-cols-3 xl:grid-cols-5 gap-4 lg:gap-6">
-          {/* Add Category Card - Takes up 2 columns */}
-          <Card className="lg:col-span-2">
-            <CardHeader>
-              <CardTitle className="text-lg font-medium">Add New Category</CardTitle>
+        <div className="grid grid-cols-1 lg:grid-cols-3 xl:grid-cols-5 gap-6 lg:gap-8">
+          {/* Add Category Card */}
+          <Card className="lg:col-span-2 border-white/10 bg-black/40 backdrop-blur-xl shadow-xl h-fit sticky top-6 rounded-xl overflow-hidden">
+            <CardHeader className="bg-white/[0.02] border-b border-white/5 pb-4">
+              <CardTitle className="text-lg font-bold flex items-center text-white">
+                <div className="p-2 mr-3 rounded-lg bg-indigo-500/10 border border-indigo-500/20">
+                  <Plus className="h-4 w-4 text-indigo-400" />
+                </div>
+                Add New Category
+              </CardTitle>
+              <CardDescription className="text-zinc-400">
+                Create a new category or subcategory
+              </CardDescription>
             </CardHeader>
-            <CardContent>
+            <CardContent className="pt-6">
               <div className="space-y-4">
                 <div className="space-y-2">
-                  <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+                  <label className="text-sm font-medium leading-none text-zinc-300">
                     Category Name
                   </label>
                   <Input
                     value={newCategoryName}
                     onChange={(e) => setNewCategoryName(e.target.value)}
-                    placeholder="Enter category name"
-                    className="h-9"
+                    placeholder="e.g. Electronics, Clothing..."
+                    className="h-10 border-white/10 bg-black/20 focus:bg-black/40 transition-colors text-white placeholder:text-zinc-600"
                   />
                 </div>
                 <div className="space-y-2">
-                  <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+                  <label className="text-sm font-medium leading-none text-zinc-300">
                     Parent Category
                   </label>
                   <Select
                     value={selectedParentId || "none"}
                     onValueChange={setSelectedParentId}
                   >
-                    <SelectTrigger className="h-9">
+                    <SelectTrigger className="h-10 border-white/10 bg-black/20 focus:bg-black/40 transition-colors text-white">
                       <SelectValue placeholder="Select parent category" />
                     </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="none">No parent (root category)</SelectItem>
+                    <SelectContent className="bg-zinc-900 border-white/10 text-white">
+                      <SelectItem value="none" className="focus:bg-zinc-800">No parent (root category)</SelectItem>
                       {categories.map((cat) => (
-                        <SelectItem key={cat._id} value={cat._id}>
+                        <SelectItem key={cat._id} value={cat._id} className="focus:bg-zinc-800">
                           {cat.name}
                         </SelectItem>
                       ))}
                     </SelectContent>
                   </Select>
                 </div>
-                <Button onClick={handleAddCategory} className="w-full">
+                <Button onClick={handleAddCategory} className="w-full mt-2 bg-indigo-600 hover:bg-indigo-700 text-white border-0" size="lg">
                   <Plus className="h-4 w-4 mr-2" />
                   Add Category
                 </Button>
@@ -401,48 +438,61 @@ export default function CategoriesPage() {
             </CardContent>
           </Card>
 
-          {/* Category List Card - Takes up 3 columns */}
-          <Card className="lg:col-span-3">
-            <CardHeader>
-              <CardTitle className="text-lg font-medium">Category List</CardTitle>
+          {/* Category List Card */}
+          <Card className="lg:col-span-3 border-none bg-transparent shadow-none">
+            <CardHeader className="pl-0 pt-0 pb-4">
+              <CardTitle className="text-lg font-bold text-white">Structure</CardTitle>
+              <CardDescription className="text-zinc-400">
+                Drag and drop to reorder categories
+              </CardDescription>
             </CardHeader>
-            <CardContent>
+            <CardContent className="p-0">
               <DndProvider backend={HTML5Backend}>
-                <div className="space-y-1">
-                  {rootCategories.length === 0 ? (
-                    <p className="text-sm text-muted-foreground text-center py-4">
-                      No categories yet. Add your first category above.
-                    </p>
+                <div className="space-y-2 min-h-[300px]">
+                  {loading ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground animate-pulse">
+                      <FolderTree className="h-10 w-10 mb-3 opacity-20" />
+                      <p>Loading categories...</p>
+                    </div>
+                  ) : rootCategories.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-muted-foreground border-2 border-dashed border-border/40 rounded-xl bg-muted/20">
+                      <FolderTree className="h-10 w-10 mb-3 opacity-20" />
+                      <p>No categories yet</p>
+                      <p className="text-xs opacity-60 mt-1">Add your first category to get started</p>
+                    </div>
                   ) : (
-                    rootCategories.map(category => (
-                      <CategoryItem key={category._id} category={category} />
-                    ))
+                    <div className="space-y-1">
+                      {rootCategories.map(category => (
+                        <CategoryItem key={category._id} category={category} />
+                      ))}
+                    </div>
                   )}
                 </div>
               </DndProvider>
             </CardContent>
           </Card>
         </div>
-        
+
         {/* Delete Confirmation Dialog */}
-        {categoryToDelete && (
-          <AlertDialog open={!!categoryToDelete} onOpenChange={() => setCategoryToDelete(null)}>
-            <AlertDialogContent>
-              <AlertDialogHeader>
-                <AlertDialogTitle>Are you sure?</AlertDialogTitle>
-                <AlertDialogDescription>
-                  This will permanently delete the category "{categoryToDelete.name}".
-                  This action cannot be undone.
-                </AlertDialogDescription>
-              </AlertDialogHeader>
-              <AlertDialogFooter>
-                <AlertDialogCancel>Cancel</AlertDialogCancel>
-                <AlertDialogAction onClick={handleDeleteConfirm}>Delete</AlertDialogAction>
-              </AlertDialogFooter>
-            </AlertDialogContent>
-          </AlertDialog>
-        )}
+        <AlertDialog open={!!categoryToDelete} onOpenChange={() => setCategoryToDelete(null)}>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+              <AlertDialogDescription>
+                This will permanently delete the category <span className="font-medium text-foreground">"{categoryToDelete?.name}"</span>.
+                This action cannot be undone.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <AlertDialogAction onClick={handleDeleteConfirm} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
+                Delete Category
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
       </div>
     </Layout>
   );
-} 
+} 
+

app/dashboard/chats/[id]/loading.tsx

@@ -1,6 +1,6 @@
 import Layout from "@/components/layout/layout";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/common/card";
+import { Skeleton } from "@/components/common/skeleton";
 import { Loader2 } from "lucide-react";
 import { SnowLoader } from "@/components/snow-loader";
 

app/dashboard/chats/[id]/page.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Metadata } from "next";
 import dynamic from "next/dynamic";
-import { Skeleton } from "@/components/ui/skeleton";
+import { Skeleton } from "@/components/common/skeleton";
 import Dashboard from "@/components/dashboard/dashboard";
 
 export const metadata: Metadata = {

app/dashboard/chats/new/page.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Metadata, Viewport } from "next";
 import dynamic from "next/dynamic";
-import { Skeleton } from "@/components/ui/skeleton";
+import { Skeleton } from "@/components/common/skeleton";
 import Dashboard from "@/components/dashboard/dashboard";
 
 export const metadata: Metadata = {
@@ -42,4 +42,4 @@ export default function NewChatPage() {
       </div>
     </Dashboard>
   );
-} 
+} 

app/dashboard/chats/page.tsx

@@ -5,10 +5,10 @@ import { useRouter } from "next/navigation";
 import Dashboard from "@/components/dashboard/dashboard";
 import { MessageCircle, AlertCircle, RefreshCw } from "lucide-react";
 import dynamic from "next/dynamic";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/common/skeleton";
+import { Card, CardContent, CardHeader } from "@/components/common/card";
+import { Alert, AlertDescription, AlertTitle } from "@/components/common/alert";
+import { Button } from "@/components/common/button";
 
 // Error Boundary Component
 interface ErrorBoundaryState {
@@ -95,7 +95,7 @@ function ChatTableSkeleton() {
     <Card className="animate-in fade-in duration-500 relative">
       {/* Subtle loading indicator */}
       <div className="absolute top-0 left-0 right-0 h-1 bg-muted overflow-hidden rounded-t-lg">
-        <div className="h-full bg-primary w-1/3" 
+        <div className="h-full bg-primary w-1/3"
           style={{
             background: 'linear-gradient(90deg, transparent, hsl(var(--primary)), transparent)',
             backgroundSize: '200% 100%',
@@ -103,7 +103,7 @@ function ChatTableSkeleton() {
           }}
         />
       </div>
-      
+
       <CardHeader>
         <div className="flex items-center justify-between">
           <Skeleton className="h-6 w-32" />
@@ -115,8 +115,8 @@ function ChatTableSkeleton() {
           <div className="border-b p-4">
             <div className="flex items-center gap-4">
               {['Customer', 'Last Message', 'Date', 'Status', 'Actions'].map((header, i) => (
-                <Skeleton 
-                  key={i} 
+                <Skeleton
+                  key={i}
                   className="h-4 w-20 flex-1 animate-in fade-in"
                   style={{
                     animationDelay: `${i * 50}ms`,
@@ -127,10 +127,10 @@ function ChatTableSkeleton() {
               ))}
             </div>
           </div>
-          
+
           {[...Array(6)].map((_, i) => (
-            <div 
-              key={i} 
+            <div
+              key={i}
               className="border-b last:border-b-0 p-4 animate-in fade-in"
               style={{
                 animationDelay: `${300 + i * 50}ms`,
@@ -163,19 +163,6 @@ function ChatTableSkeleton() {
 }
 
 export default function ChatsPage() {
-  const router = useRouter();
-
-  useEffect(() => {
-    const authToken = document.cookie
-      .split("; ")
-      .find((row) => row.startsWith("Authorization="))
-      ?.split("=")[1];
-
-    if (!authToken) {
-      router.push("/login");
-    }
-  }, [router]);
-
   return (
     <Dashboard>
       <div className="space-y-6">
@@ -185,7 +172,7 @@ export default function ChatsPage() {
             Customer Chats
           </h1>
         </div>
-        
+
         <ErrorBoundary componentName="Chat Table">
           <Suspense fallback={<ChatTableSkeleton />}>
             <ChatTable />
@@ -194,4 +181,4 @@ export default function ChatsPage() {
       </div>
     </Dashboard>
   );
-} 
+} 

app/dashboard/dashboard-content-wrapper.tsx

@@ -1,11 +1,13 @@
 "use client";
 
 import { Component, ReactNode, useState, useEffect, Suspense } from "react";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
+import { Alert, AlertDescription, AlertTitle } from "@/components/common/alert";
+import { Button } from "@/components/common/button";
 import { AlertCircle, RefreshCw } from "lucide-react";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Skeleton } from "@/components/common/skeleton";
+import { Card, CardContent, CardHeader } from "@/components/common/card";
+import { useRouter } from "next/navigation";
+import { sidebarConfig } from "@/config/sidebar";
 
 // Error Boundary Component
 interface ErrorBoundaryState {
@@ -91,14 +93,14 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
 }
 
 // Suspense wrapper with timeout
-function SuspenseWithTimeout({ 
-  children, 
-  fallback, 
+function SuspenseWithTimeout({
+  children,
+  fallback,
   timeout = 5000,
-  timeoutFallback 
-}: { 
-  children: ReactNode; 
-  fallback: ReactNode; 
+  timeoutFallback
+}: {
+  children: ReactNode;
+  fallback: ReactNode;
   timeout?: number;
   timeoutFallback?: ReactNode;
 }) {
@@ -157,7 +159,7 @@ function DashboardContentSkeletonWithWarning() {
 // Import the skeleton from the page
 function DashboardContentSkeleton() {
   return (
-    <div 
+    <div
       className="space-y-6 animate-in fade-in duration-500 relative"
       role="status"
       aria-label="Loading dashboard content"
@@ -165,7 +167,7 @@ function DashboardContentSkeleton() {
     >
       {/* Subtle loading indicator */}
       <div className="absolute top-0 left-0 right-0 h-1 bg-muted overflow-hidden rounded-full">
-        <div className="h-full bg-primary w-1/3" 
+        <div className="h-full bg-primary w-1/3"
           style={{
             background: 'linear-gradient(90deg, transparent, hsl(var(--primary)), transparent)',
             backgroundSize: '200% 100%',
@@ -183,7 +185,7 @@ function DashboardContentSkeleton() {
       {/* Stats cards skeleton */}
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 lg:gap-6">
         {[...Array(4)].map((_, i) => (
-          <Card 
+          <Card
             key={i}
             className="animate-in fade-in slide-in-from-bottom-4"
             style={{
@@ -219,8 +221,8 @@ function DashboardContentSkeleton() {
         <CardContent>
           <div className="space-y-4">
             {[...Array(5)].map((_, i) => (
-              <div 
-                key={i} 
+              <div
+                key={i}
                 className="flex items-center gap-4 animate-in fade-in"
                 style={{
                   animationDelay: `${400 + i * 50}ms`,
@@ -247,9 +249,29 @@ function DashboardContentSkeleton() {
 }
 
 export default function DashboardContentWrapper({ children }: { children: ReactNode }) {
+  const router = useRouter();
+
+  useEffect(() => {
+    // Prefetch main dashboard routes for snappier navigation
+    const prefetchRoutes = async () => {
+      // Small delay to prioritize initial page load
+      await new Promise(resolve => setTimeout(resolve, 2000));
+
+      sidebarConfig.forEach(section => {
+        section.items.forEach(item => {
+          if (item.href && item.href !== "/dashboard") {
+            router.prefetch(item.href);
+          }
+        });
+      });
+    };
+
+    prefetchRoutes();
+  }, [router]);
+
   return (
     <ErrorBoundary componentName="Dashboard Content">
-      <SuspenseWithTimeout 
+      <SuspenseWithTimeout
         fallback={<DashboardContentSkeleton />}
         timeout={5000}
         timeoutFallback={<DashboardContentSkeletonWithWarning />}
@@ -260,3 +282,4 @@ export default function DashboardContentWrapper({ children }: { children: ReactN
   );
 }
 
+

app/dashboard/loading.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-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";
 import Layout from "@/components/layout/layout";
 import { Loader2 } from "lucide-react";
 import { SnowLoader } from "@/components/snow-loader";
@@ -77,4 +77,4 @@ export default function DashboardLoading() {
       </div>
     </Layout>
   );
-} 
+} 

app/dashboard/orders/[id]/loading.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/common/card";
+import { Skeleton } from "@/components/common/skeleton";
 import Layout from "@/components/layout/layout";
 import { Loader2 } from "lucide-react";
 import { SnowLoader } from "@/components/snow-loader";

app/dashboard/orders/[id]/page.tsx

@@ -4,10 +4,10 @@ import { fetchData } from '@/lib/api';
 import { clientFetch } from '@/lib/api';
 import { useEffect, useState } from "react";
 import { useParams } from "next/navigation";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/common/button";
+import { Input } from "@/components/common/input";
+import { Label } from "@/components/common/label";
+import { Textarea } from "@/components/common/textarea";
 import {
   Table,
   TableBody,
@@ -15,13 +15,13 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table";
+} from "@/components/common/table";
 import {
   Card,
   CardContent,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card";
+} from "@/components/common/card";
 import { Clipboard, Truck, Package, ArrowRight, ChevronDown, AlertTriangle, Copy, Loader2, RefreshCw, MessageCircle } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
@@ -36,9 +36,11 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
   AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
+} from "@/components/common/alert-dialog";
 import Layout from "@/components/layout/layout";
-import { cacheUtils } from '@/lib/api-client';
+import { cacheUtils } from '@/lib/api/api-client';
+import OrderTimeline from "@/components/orders/order-timeline";
+import { motion, AnimatePresence } from "framer-motion";
 
 interface Order {
   orderId: string;
@@ -170,7 +172,7 @@ export default function OrderDetailsPage() {
     authToken: string
   ): Promise<Record<string, string>> => {
     const productNamesMap: Record<string, string> = {};
-    
+
     // Process each product ID independently
     const fetchPromises = productIds.map(async (id) => {
       try {
@@ -184,10 +186,10 @@ export default function OrderDetailsPage() {
         productNamesMap[id] = "Unknown Product (Deleted)";
       }
     });
-    
+
     // Wait for all fetch operations to complete (successful or failed)
     await Promise.all(fetchPromises);
-    
+
     return productNamesMap;
   };
 
@@ -195,38 +197,38 @@ export default function OrderDetailsPage() {
     try {
       // Add a loading state to give feedback
       const loadingToast = toast.loading("Marking order as paid...");
-      
+
       // Log the request for debugging
       console.log(`Sending request to /orders/${orderId}/status with clientFetch`);
       console.log("Request payload:", { status: "paid" });
-      
+
       // Use clientFetch which handles API URL and auth token automatically
       const response = await clientFetch(`/orders/${orderId}/status`, {
         method: "PUT",
         body: JSON.stringify({ status: "paid" }),
       });
-      
+
       // Log the response
       console.log("API response:", response);
 
       toast.dismiss(loadingToast);
-      
+
       if (response && response.message === "Order status updated successfully") {
         // Update both states
         setIsPaid(true);
-        setOrder((prevOrder) => (prevOrder ? { 
-          ...prevOrder, 
+        setOrder((prevOrder) => (prevOrder ? {
+          ...prevOrder,
           status: "paid",
           // Clear underpayment flags when marking as paid
           underpaid: false,
           underpaymentAmount: 0
         } : null));
-        
+
         // Invalidate order cache to ensure fresh data everywhere
         cacheUtils.invalidateOrderData(orderId as string);
-        
+
         toast.success("Order marked as paid successfully");
-        
+
         // Refresh order data to get latest status
         setTimeout(() => {
           setRefreshTrigger(prev => prev + 1);
@@ -240,14 +242,14 @@ export default function OrderDetailsPage() {
       }
     } catch (error: any) {
       console.error("Failed to mark order as paid:", error);
-      
+
       // More detailed error handling
       let errorMessage = "Failed to mark order as paid";
-      
+
       if (error.message) {
         errorMessage += `: ${error.message}`;
       }
-      
+
       if (error.response) {
         try {
           const errorData = await error.response.json();
@@ -259,7 +261,7 @@ export default function OrderDetailsPage() {
           console.error("Could not parse error response:", e);
         }
       }
-      
+
       toast.error(errorMessage);
     }
   };
@@ -317,7 +319,7 @@ export default function OrderDetailsPage() {
         ...prevOrder,
         trackingNumber: trackingNumber
       } : null);
-      
+
       toast.success("Tracking number added successfully!");
     } catch (err: any) {
       console.error("Failed to add tracking number:", err);
@@ -330,7 +332,7 @@ export default function OrderDetailsPage() {
   const handleMarkAsAcknowledged = async () => {
     try {
       setIsAcknowledging(true);
-      
+
       // Use clientFetch which handles API URL and auth token automatically
       const response = await clientFetch(`/orders/${orderId}/status`, {
         method: "PUT",
@@ -382,7 +384,7 @@ export default function OrderDetailsPage() {
   const handleCancelOrder = async () => {
     try {
       setIsCancelling(true);
-      
+
       // Use clientFetch which handles API URL and auth token automatically
       const response = await clientFetch(`/orders/${orderId}/status`, {
         method: "PUT",
@@ -429,10 +431,10 @@ export default function OrderDetailsPage() {
         const productIds = data.order.products.map((product) => product.productId);
         const productNamesMap = await fetchProductNames(productIds, authToken);
         setProductNames(productNamesMap);
-        
+
         setTimeout(() => {
           setProductNames(prev => {
-            const newMap = {...prev};
+            const newMap = { ...prev };
             productIds.forEach(id => {
               if (!newMap[id] || newMap[id] === "Loading...") {
                 newMap[id] = "Unknown Product (Deleted)";
@@ -440,7 +442,7 @@ export default function OrderDetailsPage() {
             });
             return newMap;
           });
-        }, 3000); 
+        }, 3000);
 
         if (data.order.status === "paid") {
           setIsPaid(true);
@@ -460,7 +462,7 @@ export default function OrderDetailsPage() {
     const fetchAdjacentOrders = async () => {
       try {
         const authToken = document.cookie.split("Authorization=")[1];
-        
+
         if (!order?.orderId) return;
 
         // Get the current numerical orderId
@@ -470,7 +472,7 @@ export default function OrderDetailsPage() {
         // Use the new optimized backend endpoint to get adjacent orders
         const adjacentOrdersUrl = `${process.env.NEXT_PUBLIC_API_URL}/orders/adjacent/${currentOrderId}`;
         console.log('Fetching adjacent orders:', adjacentOrdersUrl);
-        
+
         const adjacentOrdersRes = await fetchData(
           adjacentOrdersUrl,
           {
@@ -488,17 +490,17 @@ export default function OrderDetailsPage() {
 
         // Set the next and previous order IDs
         const { newer, older } = adjacentOrdersRes;
-        
+
         // Set IDs for navigation
         setPrevOrderId(newer?._id || null);
         setNextOrderId(older?._id || null);
-        
+
         if (newer) {
           console.log(`Newer order: ${newer.orderId} (ID: ${newer._id})`);
         } else {
           console.log('No newer order found');
         }
-        
+
         if (older) {
           console.log(`Older order: ${older.orderId} (ID: ${older._id})`);
         } else {
@@ -544,7 +546,7 @@ export default function OrderDetailsPage() {
         ...prevOrder,
         trackingNumber: trackingNumber
       } : null);
-      
+
       toast.success("Tracking number updated successfully!");
       setTrackingNumber(""); // Clear the input
     } catch (err: any) {
@@ -569,11 +571,11 @@ export default function OrderDetailsPage() {
 
     try {
       const lines = [];
-      
+
       // Order number
       lines.push(`Order Number: ${order.orderId}`);
       lines.push('');
-      
+
       // Order details
       lines.push('Order Details:');
       if (order.products && order.products.length > 0) {
@@ -582,30 +584,30 @@ export default function OrderDetailsPage() {
           lines.push(`  - ${productName} (Qty: ${product.quantity} @ £${product.pricePerUnit.toFixed(2)} = £${product.totalItemPrice.toFixed(2)})`);
         });
       }
-      
+
       // Shipping
       if (order.shippingMethod) {
         lines.push(`  - Shipping: ${order.shippingMethod.type} (£${order.shippingMethod.price.toFixed(2)})`);
       }
-      
+
       // Discount
       if (order.discountAmount && order.discountAmount > 0) {
         lines.push(`  - Discount: -£${order.discountAmount.toFixed(2)}${order.promotionCode ? ` (Promo: ${order.promotionCode})` : ''}`);
       }
-      
+
       // Subtotal if different from total
       if (order.subtotalBeforeDiscount && order.subtotalBeforeDiscount !== order.totalPrice) {
         lines.push(`  - Subtotal: £${order.subtotalBeforeDiscount.toFixed(2)}`);
       }
-      
+
       // Total
       lines.push(`  - Total: £${order.totalPrice.toFixed(2)}`);
       lines.push('');
-      
+
       // Address
       lines.push('Address:');
       lines.push(order.pgpAddress || 'N/A');
-      
+
       const textToCopy = lines.join('\n');
       await navigator.clipboard.writeText(textToCopy);
       toast.success("Order data copied to clipboard!");
@@ -618,28 +620,28 @@ export default function OrderDetailsPage() {
   // Helper function to check if order is underpaid
   const isOrderUnderpaid = (order: Order | null) => {
     // More robust check - only show underpaid if status is NOT paid and underpayment exists
-    return order?.underpaid === true && 
-           order?.underpaymentAmount && 
-           order.underpaymentAmount > 0 &&
-           order.status !== "paid" &&
-           order.status !== "completed" &&
-           order.status !== "shipped";
+    return order?.underpaid === true &&
+      order?.underpaymentAmount &&
+      order.underpaymentAmount > 0 &&
+      order.status !== "paid" &&
+      order.status !== "completed" &&
+      order.status !== "shipped";
   };
 
   // Helper function to get underpaid information
   const getUnderpaidInfo = (order: Order | null) => {
     if (!isOrderUnderpaid(order)) return null;
-    
+
     const received = order?.lastBalanceReceived || 0;
     const required = order?.cryptoTotal || 0;
     const missing = order?.underpaymentAmount || 0;
-    
+
     // Calculate LTC to GBP exchange rate from order data
     const ltcToGbpRate = required > 0 ? (order?.totalPrice || 0) / required : 0;
     const receivedGbp = received * ltcToGbpRate;
     const requiredGbp = order?.totalPrice || 0;
     const missingGbp = missing * ltcToGbpRate;
-    
+
     return {
       received,
       required,
@@ -772,7 +774,7 @@ export default function OrderDetailsPage() {
                   <p className="font-semibold">{underpaidInfo.percentage}% paid</p>
                 </div>
               </div>
-              
+
               {order?.paymentAddress && (
                 <div className="pt-3 border-t border-red-200 dark:border-red-800">
                   <p className="text-sm text-muted-foreground mb-2">Payment Address:</p>
@@ -791,10 +793,26 @@ export default function OrderDetailsPage() {
             </CardContent>
           </Card>
         )}
+        {/* Order Timeline */}
+        <Card className="border-border/40 bg-background/50 backdrop-blur-sm shadow-sm overflow-hidden">
+          <CardHeader className="pb-0">
+            <CardTitle className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">Order Lifecycle</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <OrderTimeline
+              status={order?.status || ''}
+              orderDate={order?.orderDate || ''}
+              paidAt={order?.paidAt}
+            />
+          </CardContent>
+        </Card>
 
-
-
-        <div className="grid grid-cols-3 gap-6">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.4 }}
+          className="grid grid-cols-3 gap-6"
+        >
           {/* Left Column - Order Details */}
           <div className="col-span-2 space-y-6">
             {/* Products Card */}
@@ -929,7 +947,7 @@ export default function OrderDetailsPage() {
                       <div className="flex items-center justify-between">
                         <span className="text-zinc-400">Customer Since</span>
                         <span className="font-medium">
-                          {customerInsights.firstOrder ? 
+                          {customerInsights.firstOrder ?
                             new Date(customerInsights.firstOrder).toLocaleDateString('en-GB', {
                               day: '2-digit',
                               month: 'short',
@@ -1092,34 +1110,34 @@ export default function OrderDetailsPage() {
                 )}
 
                 {/* Cancel Order Button */}
-                {order?.status !== "cancelled" && 
-                 order?.status !== "completed" && 
-                 order?.status !== "shipped" && (
-                  <AlertDialog>
-                    <AlertDialogTrigger asChild>
-                      <Button variant="destructive" className="w-full">
-                        Cancel Order
-                      </Button>
-                    </AlertDialogTrigger>
-                    <AlertDialogContent>
-                      <AlertDialogHeader>
-                        <AlertDialogTitle>Cancel Order</AlertDialogTitle>
-                        <AlertDialogDescription>
-                          Are you sure you want to cancel this order? This action cannot be undone.
-                        </AlertDialogDescription>
-                      </AlertDialogHeader>
-                      <AlertDialogFooter>
-                        <AlertDialogCancel>Cancel</AlertDialogCancel>
-                        <AlertDialogAction
-                          onClick={handleCancelOrder}
-                          className="bg-red-500 hover:bg-red-600"
-                        >
-                          Confirm Cancel
-                        </AlertDialogAction>
-                      </AlertDialogFooter>
-                    </AlertDialogContent>
-                  </AlertDialog>
-                )}
+                {order?.status !== "cancelled" &&
+                  order?.status !== "completed" &&
+                  order?.status !== "shipped" && (
+                    <AlertDialog>
+                      <AlertDialogTrigger asChild>
+                        <Button variant="destructive" className="w-full">
+                          Cancel Order
+                        </Button>
+                      </AlertDialogTrigger>
+                      <AlertDialogContent>
+                        <AlertDialogHeader>
+                          <AlertDialogTitle>Cancel Order</AlertDialogTitle>
+                          <AlertDialogDescription>
+                            Are you sure you want to cancel this order? This action cannot be undone.
+                          </AlertDialogDescription>
+                        </AlertDialogHeader>
+                        <AlertDialogFooter>
+                          <AlertDialogCancel>Cancel</AlertDialogCancel>
+                          <AlertDialogAction
+                            onClick={handleCancelOrder}
+                            className="bg-red-500 hover:bg-red-600"
+                          >
+                            Confirm Cancel
+                          </AlertDialogAction>
+                        </AlertDialogFooter>
+                      </AlertDialogContent>
+                    </AlertDialog>
+                  )}
 
                 {/* No Actions Available Message */}
                 {(order?.status === "completed" || order?.status === "cancelled") && (
@@ -1168,11 +1186,10 @@ export default function OrderDetailsPage() {
                     {[...Array(5)].map((_, i) => (
                       <svg
                         key={i}
-                        className={`w-4 h-4 ${
-                          i < (order?.review?.stars || 0)
+                        className={`w-4 h-4 ${i < (order?.review?.stars || 0)
                             ? "text-yellow-400"
                             : "text-zinc-600"
-                        }`}
+                          }`}
                         fill="currentColor"
                         viewBox="0 0 20 20"
                       >
@@ -1198,10 +1215,10 @@ export default function OrderDetailsPage() {
               </Card>
             )}
           </div>
-        </div>
-
-        {/* Shipping Dialog removed; use inline tracking input above */}
+        </motion.div>
       </div>
+
+      {/* Shipping Dialog removed; use inline tracking input above */}
     </Layout>
   );
-} 
+}

app/dashboard/orders/page.tsx

@@ -5,10 +5,10 @@ import { useRouter } from "next/navigation";
 import Dashboard from "@/components/dashboard/dashboard";
 import { Package, AlertCircle, RefreshCw } from "lucide-react";
 import dynamic from "next/dynamic";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/common/skeleton";
+import { Card, CardContent, CardHeader } from "@/components/common/card";
+import { Alert, AlertDescription, AlertTitle } from "@/components/common/alert";
+import { Button } from "@/components/common/button";
 
 // Error Boundary Component
 interface ErrorBoundaryState {
@@ -95,7 +95,7 @@ function OrderTableSkeleton() {
     <Card className="animate-in fade-in duration-500 relative">
       {/* Subtle loading indicator */}
       <div className="absolute top-0 left-0 right-0 h-1 bg-muted overflow-hidden rounded-t-lg">
-        <div className="h-full bg-primary w-1/3" 
+        <div className="h-full bg-primary w-1/3"
           style={{
             background: 'linear-gradient(90deg, transparent, hsl(var(--primary)), transparent)',
             backgroundSize: '200% 100%',
@@ -103,7 +103,7 @@ function OrderTableSkeleton() {
           }}
         />
       </div>
-      
+
       <CardHeader>
         <div className="flex items-center justify-between">
           <Skeleton className="h-6 w-32" />
@@ -119,8 +119,8 @@ function OrderTableSkeleton() {
           <div className="border-b p-4">
             <div className="flex items-center gap-4">
               {['Order ID', 'Customer', 'Status', 'Total', 'Date', 'Actions'].map((header, i) => (
-                <Skeleton 
-                  key={i} 
+                <Skeleton
+                  key={i}
                   className="h-4 w-20 flex-1 animate-in fade-in"
                   style={{
                     animationDelay: `${i * 50}ms`,
@@ -131,11 +131,11 @@ function OrderTableSkeleton() {
               ))}
             </div>
           </div>
-          
+
           {/* Table rows skeleton */}
           {[...Array(8)].map((_, i) => (
-            <div 
-              key={i} 
+            <div
+              key={i}
               className="border-b last:border-b-0 p-4 animate-in fade-in"
               style={{
                 animationDelay: `${300 + i * 50}ms`,
@@ -163,19 +163,6 @@ function OrderTableSkeleton() {
 }
 
 export default function OrdersPage() {
-  const router = useRouter();
-
-  useEffect(() => {
-    const authToken = document.cookie
-      .split("; ")
-      .find((row) => row.startsWith("Authorization="))
-      ?.split("=")[1];
-
-    if (!authToken) {
-      router.push("/login");
-    }
-  }, [router]);
-
   return (
     <Dashboard>
       <div className="space-y-6">
@@ -194,4 +181,4 @@ export default function OrdersPage() {
       </div>
     </Dashboard>
   );
-}
+}

app/dashboard/page.tsx

@@ -6,8 +6,8 @@ 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';
+import { Skeleton } from '@/components/common/skeleton';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/common/card';
 import DashboardContentWrapper from './dashboard-content-wrapper';
 
 // Loading skeleton for the dashboard content
@@ -182,4 +182,5 @@ export default async function DashboardPage() {
       </div>
     </Dashboard>
   );
-}
+}
+

app/dashboard/products/page.tsx

@@ -3,16 +3,16 @@
 import { useState, useEffect, ChangeEvent, Suspense } from "react";
 import { useRouter } from "next/navigation";
 import Layout from "@/components/layout/layout";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Product } from "@/models/products";
+import { Button } from "@/components/common/button";
+import { Input } from "@/components/common/input";
+import { Product } from "@/lib/models/products";
 import { Plus, Upload, Search, RefreshCw, Package2 } from "lucide-react";
 import { clientFetch } from "@/lib/api";
-import { Category } from "@/models/categories";
+import { Category } from "@/lib/models/categories";
 import { toast } from "sonner";
 import dynamic from "next/dynamic";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Skeleton } from "@/components/common/skeleton";
+import { Card, CardContent, CardHeader } from "@/components/common/card";
 
 // Lazy load heavy components with error handling
 const ProductTable = dynamic(() => import("@/components/tables/product-table").catch((err) => {
@@ -45,7 +45,7 @@ const ProfitAnalysisModal = dynamic(() => import("@/components/modals/profit-ana
 
 function ProductTableSkeleton() {
   return (
-    <Card className="animate-in fade-in duration-500">
+    <Card className="animate-in fade-in duration-500 border-border/40 bg-background/50 backdrop-blur-sm shadow-sm">
       <CardHeader>
         <div className="flex items-center justify-between">
           <Skeleton className="h-6 w-32" />
@@ -60,8 +60,8 @@ function ProductTableSkeleton() {
           <div className="border-b p-4">
             <div className="flex items-center gap-4">
               {['Product', 'Category', 'Price', 'Stock', 'Status', 'Actions'].map((header, i) => (
-                <Skeleton 
-                  key={i} 
+                <Skeleton
+                  key={i}
                   className="h-4 w-20 flex-1 animate-in fade-in"
                   style={{
                     animationDelay: `${i * 50}ms`,
@@ -72,10 +72,10 @@ function ProductTableSkeleton() {
               ))}
             </div>
           </div>
-          
+
           {[...Array(8)].map((_, i) => (
-            <div 
-              key={i} 
+            <div
+              key={i}
               className="border-b last:border-b-0 p-4 animate-in fade-in"
               style={{
                 animationDelay: `${300 + i * 50}ms`,
@@ -152,24 +152,14 @@ export default function ProductsPage() {
   const [importModalOpen, setImportModalOpen] = useState(false);
   const [addProductOpen, setAddProductOpen] = useState(false);
   const [profitAnalysisOpen, setProfitAnalysisOpen] = useState(false);
-  const [selectedProductForAnalysis, setSelectedProductForAnalysis] = useState<{id: string, name: string} | null>(null);
+  const [selectedProductForAnalysis, setSelectedProductForAnalysis] = useState<{ id: string, name: string } | null>(null);
 
   // Fetch products and categories
   useEffect(() => {
-    const authToken = document.cookie
-      .split("; ")
-      .find((row) => row.startsWith("Authorization="))
-      ?.split("=")[1];
-
-    if (!authToken) {
-      router.push("/login");
-      return;
-    }
-
     const fetchDataAsync = async () => {
       try {
         setLoading(true);
-        
+
         const [fetchedProducts, fetchedCategories] = await Promise.all([
           clientFetch('/products'),
           clientFetch('/categories'),
@@ -194,7 +184,7 @@ export default function ProductsPage() {
     };
 
     fetchDataAsync();
-  }, [router]);
+  }, []);
 
   const handleAddTier = () => {
     setProductData((prev) => ({
@@ -210,7 +200,7 @@ export default function ProductsPage() {
     }));
   };
 
-    // Handle input changes
+  // Handle input changes
   const handleChange = (
     e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
   ) => setProductData({ ...productData, [e.target.name]: e.target.value });
@@ -226,7 +216,7 @@ export default function ProductsPage() {
     setProductData({ ...productData, pricing: updatedPricing });
   };
 
-  
+
   const handleSaveProduct = async (data: Product, file?: File | null) => {
     try {
       setLoading(true);
@@ -247,7 +237,7 @@ export default function ProductsPage() {
       // Save the product data
       const endpoint = editing ? `/products/${data._id}` : "/products";
       const method = editing ? "PUT" : "POST";
-      
+
       const productResponse = await clientFetch(endpoint, {
         method,
         headers: {
@@ -259,10 +249,10 @@ export default function ProductsPage() {
       // If there's a new image to upload
       if (file) {
         const imageEndpoint = `/products/${productResponse._id || data._id}/image`;
-        
+
         const formData = new FormData();
         formData.append("file", file);
-        
+
         await fetch(`${process.env.NEXT_PUBLIC_API_URL}${imageEndpoint}`, {
           method: "PUT",
           headers: {
@@ -279,10 +269,10 @@ export default function ProductsPage() {
       // Refresh products list
       const fetchedProducts = await clientFetch('/products');
       setProducts(fetchedProducts);
-      
+
       setModalOpen(false);
       setLoading(false);
-      
+
       toast.success(
         editing ? "Product updated successfully" : "Product added successfully"
       );
@@ -296,18 +286,18 @@ export default function ProductsPage() {
   // Handle delete product
   const handleDeleteProduct = async (productId: string) => {
     if (!confirm("Are you sure you want to delete this product?")) return;
-    
+
     try {
       setLoading(true);
-      
+
       await clientFetch(`/products/${productId}`, {
         method: "DELETE",
       });
-      
+
       // Refresh products list
       const fetchedProducts = await clientFetch('/products');
       setProducts(fetchedProducts);
-      
+
       toast.success("Product deleted successfully");
       setLoading(false);
     } catch (error) {
@@ -323,9 +313,9 @@ export default function ProductsPage() {
       ...product,
       pricing: product.pricing
         ? product.pricing.map((tier) => ({
-            minQuantity: tier.minQuantity,
-            pricePerUnit: tier.pricePerUnit,
-          }))
+          minQuantity: tier.minQuantity,
+          pricePerUnit: tier.pricePerUnit,
+        }))
         : [{ minQuantity: 1, pricePerUnit: 0 }],
       costPerUnit: product.costPerUnit || 0,
     });
@@ -343,16 +333,16 @@ export default function ProductsPage() {
       image: null, // Clear image so user can upload a new one
       pricing: product.pricing
         ? product.pricing.map((tier) => ({
-            minQuantity: tier.minQuantity,
-            pricePerUnit: tier.pricePerUnit,
-          }))
+          minQuantity: tier.minQuantity,
+          pricePerUnit: tier.pricePerUnit,
+        }))
         : [{ minQuantity: 1, pricePerUnit: 0 }],
       costPerUnit: product.costPerUnit || 0,
       // Reset stock to defaults for cloned product
       currentStock: 0,
       stockStatus: 'out_of_stock' as const,
     };
-    
+
     setProductData(clonedProduct);
     setEditing(false); // Set to false so it creates a new product
     setAddProductOpen(true);
@@ -390,19 +380,19 @@ export default function ProductsPage() {
   // Filter products based on search term
   const filteredProducts = products.filter(product => {
     if (!searchTerm) return true;
-    
+
     const searchLower = searchTerm.toLowerCase();
-    
+
     // Search in product name
     if (product.name.toLowerCase().includes(searchLower)) return true;
-    
+
     // Search in product description if it exists
     if (product.description && product.description.toLowerCase().includes(searchLower)) return true;
-    
+
     // Search in category name
     const categoryName = getCategoryNameById(product.category).toLowerCase();
     if (categoryName.includes(searchLower)) return true;
-    
+
     return false;
   });
 
@@ -437,19 +427,19 @@ export default function ProductsPage() {
   const handleToggleEnabled = async (productId: string, enabled: boolean) => {
     try {
       setLoading(true);
-      
+
       await clientFetch(`/products/${productId}`, {
         method: "PATCH",
         body: JSON.stringify({ enabled }),
       });
-      
+
       // Update the local state
-      setProducts(products.map(product => 
-        product._id === productId 
-          ? { ...product, enabled } 
+      setProducts(products.map(product =>
+        product._id === productId
+          ? { ...product, enabled }
           : product
       ));
-      
+
       toast.success(`Product ${enabled ? 'enabled' : 'disabled'} successfully`);
       setLoading(false);
     } catch (error) {
@@ -489,9 +479,9 @@ export default function ProductsPage() {
               )}
             </div>
             <div className="flex gap-2">
-              <Button 
-                onClick={() => setImportModalOpen(true)} 
-                variant="outline" 
+              <Button
+                onClick={() => setImportModalOpen(true)}
+                variant="outline"
                 className="gap-2 flex-1 sm:flex-none"
               >
                 <Upload className="h-4 w-4" />
@@ -552,3 +542,5 @@ export default function ProductsPage() {
     </Layout>
   );
 }
+
+

app/dashboard/shipping/page.tsx

@@ -4,8 +4,8 @@ import { useState, useEffect, ChangeEvent, Suspense } from "react";
 import { useRouter } from "next/navigation";
 import Layout from "@/components/layout/layout";
 import { Edit, Plus, Trash, Truck } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Skeleton } from "@/components/ui/skeleton";
+import { Button } from "@/components/common/button";
+import { Skeleton } from "@/components/common/skeleton";
 import {
   fetchShippingMethods,
   addShippingMethod,
@@ -15,7 +15,7 @@ import {
   ShippingData
 } from "@/lib/services/shipping-service";
 import dynamic from "next/dynamic";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Card, CardContent, CardHeader } from "@/components/common/card";
 
 // Lazy load components with error handling
 const ShippingModal = dynamic(() => import("@/components/modals/shipping-modal").then(mod => ({ default: mod.ShippingModal })).catch((err) => {
@@ -54,10 +54,10 @@ const ShippingTable = dynamic(() => import("@/components/tables/shipping-table")
 // Loading skeleton for shipping table
 function ShippingTableSkeleton() {
   return (
-    <Card className="animate-in fade-in duration-500 relative">
+    <Card className="animate-in fade-in duration-500 relative border-border/40 bg-background/50 backdrop-blur-sm shadow-sm">
       {/* Subtle loading indicator */}
       <div className="absolute top-0 left-0 right-0 h-1 bg-muted overflow-hidden rounded-t-lg">
-        <div className="h-full bg-primary w-1/3" 
+        <div className="h-full bg-primary w-1/3"
           style={{
             background: 'linear-gradient(90deg, transparent, hsl(var(--primary)), transparent)',
             backgroundSize: '200% 100%',
@@ -65,7 +65,7 @@ function ShippingTableSkeleton() {
           }}
         />
       </div>
-      
+
       <CardHeader>
         <div className="flex items-center justify-between">
           <Skeleton className="h-6 w-32" />
@@ -77,8 +77,8 @@ function ShippingTableSkeleton() {
           <div className="border-b p-4">
             <div className="flex items-center gap-4">
               {['Method Name', 'Price', 'Actions'].map((header, i) => (
-                <Skeleton 
-                  key={i} 
+                <Skeleton
+                  key={i}
                   className="h-4 w-20 flex-1 animate-in fade-in"
                   style={{
                     animationDelay: `${i * 50}ms`,
@@ -89,10 +89,10 @@ function ShippingTableSkeleton() {
               ))}
             </div>
           </div>
-          
+
           {[...Array(4)].map((_, i) => (
-            <div 
-              key={i} 
+            <div
+              key={i}
               className="border-b last:border-b-0 p-4 animate-in fade-in"
               style={{
                 animationDelay: `${200 + i * 50}ms`,
@@ -142,11 +142,6 @@ export default function ShippingPage() {
           .find((row) => row.startsWith("Authorization="))
           ?.split("=")[1];
 
-        if (!authToken) {
-          router.push("/login");
-          return;
-        }
-
         const fetchedMethods: ShippingMethod[] = await fetchShippingMethods(
           authToken
         );
@@ -180,12 +175,12 @@ export default function ShippingPage() {
         .split("; ")
         .find((row) => row.startsWith("Authorization="))
         ?.split("=")[1];
-        
+
       if (!authToken) {
         console.error("No auth token found");
         return;
       }
-      
+
       console.log("Sending request to add shipping method:", newShipping);
       const response = await addShippingMethod(
         newShipping,
@@ -196,10 +191,10 @@ export default function ShippingPage() {
       // Close modal and reset form before refreshing to avoid UI delays
       setModalOpen(false);
       setNewShipping({ name: "", price: 0 });
-      
+
       // Refresh the list after adding
       refreshShippingMethods();
-      
+
       console.log("Shipping method added successfully");
     } catch (error) {
       console.error("Error adding shipping method:", error);
@@ -218,12 +213,12 @@ export default function ShippingPage() {
         .split("; ")
         .find((row) => row.startsWith("Authorization="))
         ?.split("=")[1];
-        
+
       if (!authToken) {
         console.error("No auth token found");
         return;
       }
-      
+
       await updateShippingMethod(
         newShipping._id,
         newShipping,
@@ -234,10 +229,10 @@ export default function ShippingPage() {
       setModalOpen(false);
       setNewShipping({ name: "", price: 0 });
       setEditing(false);
-      
+
       // Refresh the list after updating
       refreshShippingMethods();
-      
+
       console.log("Shipping method updated successfully");
     } catch (error) {
       console.error("Error updating shipping method:", error);
@@ -317,4 +312,4 @@ export default function ShippingPage() {
       />
     </Layout>
   );
-}
+}

app/dashboard/stock/page.tsx

@@ -3,22 +3,26 @@
 import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import Layout from "@/components/layout/layout";
-import { Button } from "@/components/ui/button";
-import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/components/ui/table";
-import { Input } from "@/components/ui/input";
-import { Switch } from "@/components/ui/switch";
-import { 
-  DropdownMenu, 
-  DropdownMenuContent, 
-  DropdownMenuItem, 
-  DropdownMenuTrigger 
-} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/common/button";
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/components/common/table";
+import { Input } from "@/components/common/input";
+import { Switch } from "@/components/common/switch";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/common/card";
+import { Badge } from "@/components/common/badge";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuLabel,
+  DropdownMenuSeparator
+} from "@/components/common/dropdown-menu";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/components/ui/popover";
-import { 
+} from "@/components/common/popover";
+import {
   AlertDialog,
   AlertDialogAction,
   AlertDialogCancel,
@@ -28,14 +32,15 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
   AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
-import { Product } from "@/models/products";
-import { Package, RefreshCw, ChevronDown, CheckSquare, XSquare, Boxes, Download, Calendar } from "lucide-react";
+} from "@/components/common/alert-dialog";
+import { Product } from "@/lib/models/products";
+import { Package, RefreshCw, ChevronDown, CheckSquare, XSquare, Boxes, Download, Calendar, Search, Filter, Save, X, Edit2 } from "lucide-react";
 import { clientFetch } from "@/lib/api";
 import { toast } from "sonner";
-import { DatePicker, DateRangePicker, DateRangeDisplay, MonthPicker } from "@/components/ui/date-picker";
+import { DatePicker, DateRangePicker, DateRangeDisplay, MonthPicker } from "@/components/common/date-picker";
 import { DateRange } from "react-day-picker";
 import { addDays, startOfDay, endOfDay, format, isSameDay } from "date-fns";
+import { motion, AnimatePresence } from "framer-motion";
 
 interface StockData {
   currentStock: number;
@@ -55,7 +60,7 @@ export default function StockManagementPage() {
   const [selectedProducts, setSelectedProducts] = useState<string[]>([]);
   const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState(false);
   const [bulkAction, setBulkAction] = useState<'enable' | 'disable' | null>(null);
-  
+
   // Export state
   const [exportDate, setExportDate] = useState<string>(new Date().toISOString().split('T')[0]);
   const [exportDateRange, setExportDateRange] = useState<DateRange | undefined>({
@@ -67,22 +72,12 @@ export default function StockManagementPage() {
   const [isExporting, setIsExporting] = useState<boolean>(false);
 
   useEffect(() => {
-    const authToken = document.cookie
-      .split("; ")
-      .find((row) => row.startsWith("Authorization="))
-      ?.split("=")[1];
-
-    if (!authToken) {
-      router.push("/login");
-      return;
-    }
-
     const fetchDataAsync = async () => {
       try {
         const response = await clientFetch<Product[]>('api/products');
         const fetchedProducts = response || [];
         setProducts(fetchedProducts);
-        
+
         // Initialize stock values
         const initialStockValues: Record<string, number> = {};
         fetchedProducts.forEach((product: Product) => {
@@ -91,7 +86,7 @@ export default function StockManagementPage() {
           }
         });
         setStockValues(initialStockValues);
-        
+
         setLoading(false);
       } catch (error) {
         console.error("Error fetching products:", error);
@@ -100,7 +95,7 @@ export default function StockManagementPage() {
     };
 
     fetchDataAsync();
-  }, [router]);
+  }, []);
 
   const handleEditStock = (productId: string) => {
     setEditingStock({
@@ -114,7 +109,7 @@ export default function StockManagementPage() {
 
     try {
       const newStockValue = stockValues[product._id] || 0;
-      
+
       const stockData: StockData = {
         currentStock: newStockValue,
         stockTracking: product.stockTracking || false,
@@ -165,14 +160,14 @@ export default function StockManagementPage() {
     try {
       // Toggle the stock tracking status
       const newTrackingStatus = !product.stockTracking;
-      
+
       // For enabling tracking, we need to ensure there's a stock value
       const stockData: StockData = {
         stockTracking: newTrackingStatus,
         currentStock: product.currentStock || 0,
         lowStockThreshold: product.lowStockThreshold || 10,
       };
-      
+
       // Update stock tracking status
       await clientFetch(`api/stock/${product._id}`, {
         method: 'PUT',
@@ -212,7 +207,7 @@ export default function StockManagementPage() {
 
     try {
       const productsToUpdate = products.filter(p => selectedProducts.includes(p._id || ''));
-      
+
       await Promise.all(productsToUpdate.map(async (product) => {
         if (!product._id) return;
 
@@ -254,7 +249,7 @@ export default function StockManagementPage() {
   };
 
   const toggleSelectProduct = (productId: string) => {
-    setSelectedProducts(prev => 
+    setSelectedProducts(prev =>
       prev.includes(productId)
         ? prev.filter(id => id !== productId)
         : [...prev, productId]
@@ -262,7 +257,7 @@ export default function StockManagementPage() {
   };
 
   const toggleSelectAll = () => {
-    setSelectedProducts(prev => 
+    setSelectedProducts(prev =>
       prev.length === products.length
         ? []
         : products.map(p => p._id || '')
@@ -280,7 +275,7 @@ export default function StockManagementPage() {
           response = await clientFetch(`/api/analytics/daily-stock-report?date=${exportDate}`);
           filename = `daily-stock-report-${exportDate}.csv`;
           break;
-        
+
         case 'weekly':
           if (!exportDateRange?.from) {
             toast.error('Please select a date range for weekly report');
@@ -290,14 +285,14 @@ export default function StockManagementPage() {
           response = await clientFetch(`/api/analytics/weekly-stock-report?weekStart=${weekStart}`);
           filename = `weekly-stock-report-${weekStart}.csv`;
           break;
-        
+
         case 'monthly':
           const year = selectedMonth.getFullYear();
           const month = selectedMonth.getMonth() + 1;
           response = await clientFetch(`/api/analytics/monthly-stock-report?year=${year}&month=${month}`);
           filename = `monthly-stock-report-${year}-${month.toString().padStart(2, '0')}.csv`;
           break;
-        
+
         case 'custom':
           if (!exportDateRange?.from || !exportDateRange?.to) {
             toast.error('Please select a date range for custom report');
@@ -308,12 +303,12 @@ export default function StockManagementPage() {
           response = await clientFetch(`/api/analytics/daily-stock-report?startDate=${startDate}&endDate=${endDate}`);
           filename = `custom-stock-report-${startDate}-to-${endDate}.csv`;
           break;
-        
+
         default:
           toast.error('Invalid report type');
           return;
       }
-      
+
       if (!response || !response.products) {
         throw new Error('No data received from server');
       }
@@ -348,19 +343,19 @@ export default function StockManagementPage() {
       const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' });
       const link = document.createElement('a');
       const url = URL.createObjectURL(blob);
-      
+
       link.setAttribute('href', url);
       link.setAttribute('download', filename);
       link.style.visibility = 'hidden';
-      
+
       document.body.appendChild(link);
       link.click();
       document.body.removeChild(link);
 
       const periodText = reportType === 'daily' ? exportDate :
-                        reportType === 'weekly' ? `week starting ${format(exportDateRange?.from || new Date(), 'MMM dd')}` :
-                        reportType === 'monthly' ? `${response.monthName || 'current month'}` :
-                        `${format(exportDateRange?.from || new Date(), 'MMM dd')} to ${format(exportDateRange?.to || new Date(), 'MMM dd')}`;
+        reportType === 'weekly' ? `week starting ${format(exportDateRange?.from || new Date(), 'MMM dd')}` :
+          reportType === 'monthly' ? `${response.monthName || 'current month'}` :
+            `${format(exportDateRange?.from || new Date(), 'MMM dd')} to ${format(exportDateRange?.to || new Date(), 'MMM dd')}`;
 
       toast.success(`${reportType.charAt(0).toUpperCase() + reportType.slice(1)} stock report for ${periodText} exported successfully`);
     } catch (error) {
@@ -379,9 +374,29 @@ export default function StockManagementPage() {
     return 'In stock';
   };
 
+  const getStatusBadgeVariant = (status: string) => {
+    switch (status) {
+      case 'Out of stock': return 'destructive';
+      case 'Low stock': return 'warning'; // Custom variant or use secondary/outline
+      case 'In stock': return 'default'; // often maps to primary which might be blue/black
+      default: return 'secondary';
+    }
+  };
+
+  // Helper for badging - if your Badge component doesn't support 'warning' directly, use className overrides
+  const StatusBadge = ({ status }: { status: string }) => {
+    let styles = "font-medium border-transparent shadow-none";
+    if (status === 'Out of stock') styles += " bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400";
+    else if (status === 'Low stock') styles += " bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-400";
+    else if (status === 'In stock') styles += " bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400";
+    else styles += " bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400";
+
+    return <Badge className={styles} variant="outline">{status}</Badge>;
+  };
+
   const filteredProducts = products.filter(product => {
     if (!searchTerm) return true;
-    
+
     const searchLower = searchTerm.toLowerCase();
     return (
       product.name.toLowerCase().includes(searchLower) ||
@@ -392,31 +407,39 @@ export default function StockManagementPage() {
 
   return (
     <Layout>
-      <div className="space-y-6">
-        <div className="flex items-center justify-between">
-          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white flex items-center">
-            <Boxes className="mr-2 h-6 w-6" />
-            Stock Management
-          </h1>
-          <div className="flex items-center gap-3">
-            <Input
-              type="search"
-              placeholder="Search products..."
-              className="w-64"
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-            />
-            
-            {/* Report Type Selector */}
+      <div className="space-y-6 animate-in fade-in duration-500">
+        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+          <div>
+            <h1 className="text-2xl font-semibold text-foreground flex items-center gap-2">
+              <Boxes className="h-6 w-6 text-primary" />
+              Stock Management
+            </h1>
+            <p className="text-muted-foreground text-sm mt-1">
+              Track inventory levels and manage stock status
+            </p>
+          </div>
+
+          <div className="flex flex-col sm:flex-row items-start sm:items-center gap-2">
+            <div className="relative">
+              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+              <Input
+                type="search"
+                placeholder="Search products..."
+                className="pl-9 w-full sm:w-64 bg-background/50 border-border/50 focus:bg-background transition-colors"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+              />
+            </div>
+
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button variant="outline" className="gap-2">
-                  <Calendar className="h-4 w-4" />
-                  {reportType.charAt(0).toUpperCase() + reportType.slice(1)} Report
-                  <ChevronDown className="h-4 w-4" />
+                <Button variant="outline" size="icon" className="h-10 w-10 border-border/50 bg-background/50">
+                  <Filter className="h-4 w-4 text-muted-foreground" />
                 </Button>
               </DropdownMenuTrigger>
-              <DropdownMenuContent>
+              <DropdownMenuContent align="end">
+                <DropdownMenuLabel>Filter Reports</DropdownMenuLabel>
+                <DropdownMenuSeparator />
                 <DropdownMenuItem onClick={() => setReportType('daily')}>
                   Daily Report
                 </DropdownMenuItem>
@@ -433,51 +456,53 @@ export default function StockManagementPage() {
             </DropdownMenu>
 
             {/* Date Selection based on report type */}
-            {reportType === 'daily' && (
-              <DatePicker
-                date={exportDate ? new Date(exportDate) : undefined}
-                onDateChange={(date) => setExportDate(date ? date.toISOString().split('T')[0] : '')}
-                placeholder="Select export date"
-                className="w-auto"
-              />
-            )}
+            <div className="hidden sm:block">
+              {reportType === 'daily' && (
+                <DatePicker
+                  date={exportDate ? new Date(exportDate) : undefined}
+                  onDateChange={(date) => setExportDate(date ? date.toISOString().split('T')[0] : '')}
+                  placeholder="Select export date"
+                  className="w-auto border-border/50 bg-background/50"
+                />
+              )}
 
-            {(reportType === 'weekly' || reportType === 'custom') && (
-              <DateRangePicker
-                dateRange={exportDateRange}
-                onDateRangeChange={setExportDateRange}
-                placeholder="Select date range"
-                className="w-auto"
-              />
-            )}
+              {(reportType === 'weekly' || reportType === 'custom') && (
+                <DateRangePicker
+                  dateRange={exportDateRange}
+                  onDateRangeChange={setExportDateRange}
+                  placeholder="Select date range"
+                  className="w-auto border-border/50 bg-background/50"
+                />
+              )}
 
-            {reportType === 'monthly' && (
-              <MonthPicker
-                selectedMonth={selectedMonth}
-                onMonthChange={(date) => setSelectedMonth(date || new Date())}
-                placeholder="Select month"
-                className="w-auto"
-              />
-            )}
+              {reportType === 'monthly' && (
+                <MonthPicker
+                  selectedMonth={selectedMonth}
+                  onMonthChange={(date) => setSelectedMonth(date || new Date())}
+                  placeholder="Select month"
+                  className="w-auto border-border/50 bg-background/50"
+                />
+              )}
+            </div>
 
             <Button
               variant="outline"
               onClick={handleExportStock}
               disabled={isExporting}
-              className="gap-2"
+              className="gap-2 border-border/50 bg-background/50 hover:bg-background transition-colors"
             >
               {isExporting ? (
                 <RefreshCw className="h-4 w-4 animate-spin" />
               ) : (
                 <Download className="h-4 w-4" />
               )}
-              {isExporting ? 'Exporting...' : 'Export CSV'}
+              Export
             </Button>
 
             {selectedProducts.length > 0 && (
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <Button variant="outline" className="gap-2">
+                  <Button variant="default" className="gap-2">
                     <Package className="h-4 w-4" />
                     Bulk Actions
                     <ChevronDown className="h-4 w-4" />
@@ -486,11 +511,11 @@ export default function StockManagementPage() {
                 <DropdownMenuContent align="end">
                   <DropdownMenuItem onClick={() => handleBulkAction('enable')}>
                     <CheckSquare className="h-4 w-4 mr-2" />
-                    Enable Stock Tracking
+                    Enable Tracking
                   </DropdownMenuItem>
                   <DropdownMenuItem onClick={() => handleBulkAction('disable')}>
                     <XSquare className="h-4 w-4 mr-2" />
-                    Disable Stock Tracking
+                    Disable Tracking
                   </DropdownMenuItem>
                 </DropdownMenuContent>
               </DropdownMenu>
@@ -498,90 +523,140 @@ export default function StockManagementPage() {
           </div>
         </div>
 
-        <div className="rounded-md border">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead className="w-12">
-                  <input
-                    type="checkbox"
-                    checked={selectedProducts.length === products.length}
-                    onChange={toggleSelectAll}
-                    className="rounded border-gray-300"
-                  />
-                </TableHead>
-                <TableHead>Product</TableHead>
-                <TableHead>Stock Status</TableHead>
-                <TableHead>Current Stock</TableHead>
-                <TableHead>Track Stock</TableHead>
-                <TableHead className="text-right">Actions</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {loading ? (
-                <TableRow>
-                  <TableCell colSpan={6} className="text-center py-8">
-                    <RefreshCw className="h-6 w-6 animate-spin inline-block" />
-                    <span className="ml-2">Loading products...</span>
-                  </TableCell>
-                </TableRow>
-              ) : filteredProducts.length === 0 ? (
-                <TableRow>
-                  <TableCell colSpan={6} className="text-center py-8">
-                    No products found
-                  </TableCell>
-                </TableRow>
-              ) : (
-                filteredProducts.map((product) => (
-                  <TableRow key={product._id}>
-                    <TableCell>
+        <Card className="border-border/40 bg-background/50 backdrop-blur-sm shadow-sm overflow-hidden">
+          <CardHeader className="py-4 px-6 border-b border-border/50 bg-muted/30 flex flex-row items-center justify-between">
+            <div>
+              <CardTitle className="text-lg font-medium">Inventory Data</CardTitle>
+              <CardDescription>Manage stock levels and tracking for {products.length} products</CardDescription>
+            </div>
+            <div className="text-xs text-muted-foreground bg-background/50 px-3 py-1 rounded-full border border-border/50">
+              {filteredProducts.length} items
+            </div>
+          </CardHeader>
+          <CardContent className="p-0">
+            <div className="overflow-x-auto">
+              <Table>
+                <TableHeader className="bg-muted/50">
+                  <TableRow className="border-border/50 hover:bg-transparent">
+                    <TableHead className="w-12 pl-6">
                       <input
                         type="checkbox"
-                        checked={selectedProducts.includes(product._id || '')}
-                        onChange={() => toggleSelectProduct(product._id || '')}
-                        className="rounded border-gray-300"
+                        checked={selectedProducts.length === products.length && products.length > 0}
+                        onChange={toggleSelectAll}
+                        className="rounded border-gray-300 dark:border-zinc-700 bg-background focus:ring-primary/20"
                       />
-                    </TableCell>
-                    <TableCell>{product.name}</TableCell>
-                    <TableCell>{getStockStatus(product)}</TableCell>
-                    <TableCell>
-                      {editingStock[product._id || ''] ? (
-                        <div className="flex items-center gap-2">
-                          <Input
-                            type="number"
-                            value={stockValues[product._id || ''] || 0}
-                            onChange={(e) => handleStockChange(product._id || '', parseInt(e.target.value) || 0)}
-                            className="w-24"
-                          />
-                          <Button size="sm" onClick={() => handleSaveStock(product)}>Save</Button>
-                        </div>
-                      ) : (
-                        <span>{product.currentStock || 0}</span>
-                      )}
-                    </TableCell>
-                    <TableCell>
-                      <Switch
-                        checked={product.stockTracking || false}
-                        onCheckedChange={() => handleToggleStockTracking(product)}
-                      />
-                    </TableCell>
-                    <TableCell className="text-right">
-                      {!editingStock[product._id || ''] && (
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          onClick={() => handleEditStock(product._id || '')}
-                        >
-                          Edit Stock
-                        </Button>
-                      )}
-                    </TableCell>
+                    </TableHead>
+                    <TableHead>Product</TableHead>
+                    <TableHead>Status</TableHead>
+                    <TableHead>Current Stock</TableHead>
+                    <TableHead>Tracking</TableHead>
+                    <TableHead className="text-right pr-6">Actions</TableHead>
                   </TableRow>
-                ))
-              )}
-            </TableBody>
-          </Table>
-        </div>
+                </TableHeader>
+                <TableBody>
+                  <AnimatePresence mode="popLayout">
+                    {loading ? (
+                      <TableRow>
+                        <TableCell colSpan={6} className="text-center py-12">
+                          <div className="flex flex-col items-center justify-center gap-3 text-muted-foreground">
+                            <RefreshCw className="h-8 w-8 animate-spin opacity-20" />
+                            <p>Loading products...</p>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    ) : filteredProducts.length === 0 ? (
+                      <TableRow>
+                        <TableCell colSpan={6} className="text-center py-12">
+                          <div className="flex flex-col items-center justify-center gap-3 text-muted-foreground">
+                            <Boxes className="h-10 w-10 opacity-20" />
+                            <p>No products found matching your search</p>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    ) : (
+                      filteredProducts.map((product, index) => (
+                        <motion.tr
+                          key={product._id}
+                          initial={{ opacity: 0, scale: 0.98 }}
+                          animate={{ opacity: 1, scale: 1 }}
+                          transition={{ duration: 0.2, delay: index * 0.03 }}
+                          className="group hover:bg-muted/40 border-b border-border/50 transition-colors"
+                        >
+                          <TableCell className="pl-6">
+                            <input
+                              type="checkbox"
+                              checked={selectedProducts.includes(product._id || '')}
+                              onChange={() => toggleSelectProduct(product._id || '')}
+                              className="rounded border-gray-300 dark:border-zinc-700 bg-background focus:ring-primary/20"
+                            />
+                          </TableCell>
+                          <TableCell className="font-medium">{product.name}</TableCell>
+                          <TableCell>
+                            <StatusBadge status={getStockStatus(product)} />
+                          </TableCell>
+                          <TableCell>
+                            {editingStock[product._id || ''] ? (
+                              <div className="flex items-center gap-2">
+                                <Input
+                                  type="number"
+                                  value={stockValues[product._id || ''] || 0}
+                                  onChange={(e) => handleStockChange(product._id || '', parseInt(e.target.value) || 0)}
+                                  className="w-20 h-8 font-mono bg-background"
+                                />
+                              </div>
+                            ) : (
+                              <span className="font-mono text-sm">{product.currentStock || 0}</span>
+                            )}
+                          </TableCell>
+                          <TableCell>
+                            <Switch
+                              checked={product.stockTracking || false}
+                              onCheckedChange={() => handleToggleStockTracking(product)}
+                              className="data-[state=checked]:bg-primary"
+                            />
+                          </TableCell>
+                          <TableCell className="text-right pr-6">
+                            <div className="flex justify-end gap-1">
+                              {editingStock[product._id || ''] ? (
+                                <>
+                                  <Button
+                                    size="icon"
+                                    variant="ghost"
+                                    className="h-8 w-8 text-green-600 hover:text-green-700 hover:bg-green-100 dark:hover:bg-green-900/20"
+                                    onClick={() => handleSaveStock(product)}
+                                  >
+                                    <Save className="h-4 w-4" />
+                                  </Button>
+                                  <Button
+                                    size="icon"
+                                    variant="ghost"
+                                    className="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
+                                    onClick={() => setEditingStock({ ...editingStock, [product._id || '']: false })}
+                                  >
+                                    <X className="h-4 w-4" />
+                                  </Button>
+                                </>
+                              ) : (
+                                <Button
+                                  variant="ghost"
+                                  size="icon"
+                                  className="h-8 w-8 text-muted-foreground hover:text-primary hover:bg-primary/10"
+                                  onClick={() => handleEditStock(product._id || '')}
+                                >
+                                  <Edit2 className="h-4 w-4" />
+                                </Button>
+                              )}
+                            </div>
+                          </TableCell>
+                        </motion.tr>
+                      ))
+                    )}
+                  </AnimatePresence>
+                </TableBody>
+              </Table>
+            </div>
+          </CardContent>
+        </Card>
       </div>
 
       <AlertDialog open={isConfirmDialogOpen} onOpenChange={setIsConfirmDialogOpen}>
@@ -589,15 +664,18 @@ export default function StockManagementPage() {
           <AlertDialogHeader>
             <AlertDialogTitle>Confirm Bulk Action</AlertDialogTitle>
             <AlertDialogDescription>
-              Are you sure you want to {bulkAction} stock tracking for {selectedProducts.length} selected products?
+              Are you sure you want to {bulkAction} stock tracking for <span className="font-medium text-foreground">{selectedProducts.length}</span> selected products?
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel onClick={() => setBulkAction(null)}>Cancel</AlertDialogCancel>
-            <AlertDialogAction onClick={executeBulkAction}>Continue</AlertDialogAction>
+            <AlertDialogAction onClick={executeBulkAction} className="bg-primary text-primary-foreground">
+              Continue
+            </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
     </Layout>
   );
-} 
+} 
+

app/dashboard/storefront/page.tsx

@@ -3,23 +3,27 @@
 import { useState, useEffect, ChangeEvent } from "react";
 import { useRouter } from "next/navigation";
 import Layout from "@/components/layout/layout";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import { Save, Send, Key, MessageSquare, Shield, Globe, Wallet } from "lucide-react";
+import { Button } from "@/components/common/button";
+import { Input } from "@/components/common/input";
+import { Textarea } from "@/components/common/textarea";
+import { Save, Send, Key, MessageSquare, Shield, Globe, Wallet, RefreshCw } from "lucide-react";
 import { apiRequest } from "@/lib/api";
 import { toast } from "sonner";
 import BroadcastDialog from "@/components/modals/broadcast-dialog";
 import Dashboard from "@/components/dashboard/dashboard";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/common/card";
+import { Label } from "@/components/common/label";
+import { Badge } from "@/components/common/badge";
+import { motion, AnimatePresence } from "framer-motion";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+} from "@/components/common/select";
+import { Switch } from "@/components/common/switch";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/common/tooltip";
 
 const SHIPPING_REGIONS = [
   { value: "UK", label: "United Kingdom", emoji: "🇬🇧" },
@@ -102,16 +106,6 @@ export default function StorefrontPage() {
   const [saving, setSaving] = useState<boolean>(false);
 
   useEffect(() => {
-    const authToken = document.cookie
-      .split("; ")
-      .find((row) => row.startsWith("Authorization="))
-      ?.split("=")[1];
-
-    if (!authToken) {
-      router.push("/login");
-      return;
-    }
-
     const fetchStorefront = async () => {
       try {
         setLoading(true);
@@ -166,251 +160,300 @@ export default function StorefrontPage() {
   return (
     <Dashboard>
       <div className="space-y-6">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-6">
-            <h1 className="text-2xl font-semibold text-gray-900 dark:text-white flex items-center">
-              <Globe className="mr-2 h-6 w-6" />
-              Storefront Settings
-            </h1>
-            <div className="flex items-center gap-2">
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <div className="flex items-center gap-2">
-                      <Switch
-                        checked={storefront.isEnabled}
-                        onCheckedChange={(checked) =>
-                          setStorefront((prev) => ({
-                            ...prev,
-                            isEnabled: checked,
-                          }))
-                        }
-                      />
-                      <span className={`text-sm font-medium ${storefront.isEnabled ? 'text-emerald-400' : 'text-zinc-400'}`}>
-                        {storefront.isEnabled ? 'Store Open' : 'Store Closed'}
-                      </span>
-                    </div>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>{storefront.isEnabled ? 'Click to close store' : 'Click to open store'}</p>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
+        <div className="flex items-center justify-between mb-8">
+          <div className="flex items-center gap-4">
+            <div className="p-3 rounded-xl bg-primary/10 text-primary">
+              <Globe className="h-8 w-8" />
+            </div>
+            <div>
+              <h1 className="text-3xl font-bold tracking-tight text-foreground">
+                Storefront Settings
+              </h1>
+              <p className="text-muted-foreground">
+                Manage your shop's appearance, policies, and configuration
+              </p>
             </div>
           </div>
-          <div className="flex gap-2">
+          <div className="flex gap-3">
             <Button
               variant="outline"
               onClick={() => setBroadcastOpen(true)}
-              className="gap-2"
-              size="sm"
+              className="gap-2 h-10"
             >
               <Send className="h-4 w-4" />
               Broadcast
             </Button>
-            <Button 
-              onClick={saveStorefront} 
+            <Button
+              onClick={saveStorefront}
               disabled={saving}
-              className="gap-2"
-              size="sm"
+              className="gap-2 h-10 min-w-[120px]"
             >
-              <Save className="h-4 w-4" />
+              {saving ? <RefreshCw className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
               {saving ? "Saving..." : "Save Changes"}
             </Button>
           </div>
         </div>
 
-        <div className="grid grid-cols-1 xl:grid-cols-2 gap-4 lg:gap-6">
-          {/* Security Settings */}
-          <div className="space-y-3">
-            <div className="bg-[#0F0F12] rounded-lg p-4 border border-zinc-800">
-              <div className="flex items-center gap-2 mb-3">
-                <Shield className="h-4 w-4 text-purple-400" />
-                <h2 className="text-base font-medium text-zinc-100">
-                  Security
-                </h2>
-              </div>
-              <div className="space-y-3">
-                <div>
-                  <label className="text-xs font-medium mb-1 block text-zinc-400">PGP Public Key</label>
-                  <Textarea
-                    value={storefront.pgpKey}
-                    onChange={(e) => setStorefront(prev => ({ ...prev, pgpKey: e.target.value }))}
-                    placeholder="Enter your PGP public key"
-                    className="font-mono text-sm h-24 bg-[#1C1C1C] border-zinc-800 resize-none"
-                  />
-                </div>
-                <div>
-                  <label className="text-xs font-medium mb-1 block text-zinc-400">Telegram Bot Token</label>
-                  <Input  
-                    type="password"
-                    value={storefront.telegramToken}
-                    onChange={(e) => setStorefront(prev => ({ ...prev, telegramToken: e.target.value }))}
-                    placeholder="Enter your Telegram bot token"
-                    className="bg-[#1C1C1C] border-zinc-800 h-8 text-sm"
-                  />
-                </div>
-              </div>
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* Main Column */}
+          <div className="lg:col-span-2 space-y-6">
+
+            {/* Store Status Card */}
+            <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }}>
+              <Card className="border-border/40 bg-background/50 backdrop-blur-sm shadow-sm overflow-hidden relative">
+                <div className={`absolute top-0 left-0 w-1 h-full ${storefront.isEnabled ? 'bg-emerald-500' : 'bg-destructive'}`} />
+                <CardHeader className="pb-3">
+                  <div className="flex items-center justify-between">
+                    <div className="space-y-1">
+                      <CardTitle>Store Status</CardTitle>
+                      <CardDescription>Control your store's visibility to customers</CardDescription>
+                    </div>
+                    <Badge variant={storefront.isEnabled ? "default" : "destructive"} className="h-6">
+                      {storefront.isEnabled ? "Open for Business" : "Store Closed"}
+                    </Badge>
+                  </div>
+                </CardHeader>
+                <CardContent className="pb-6">
+                  <div className="flex items-center gap-4 p-4 rounded-lg bg-card border border-border/50">
+                    <Switch
+                      checked={storefront.isEnabled}
+                      onCheckedChange={(checked) =>
+                        setStorefront((prev) => ({
+                          ...prev,
+                          isEnabled: checked,
+                        }))
+                      }
+                      className="data-[state=checked]:bg-emerald-500"
+                    />
+                    <div>
+                      <h4 className="font-medium text-sm">
+                        {storefront.isEnabled ? 'Your store is currently online' : 'Your store is currently offline'}
+                      </h4>
+                      <p className="text-xs text-muted-foreground">
+                        {storefront.isEnabled
+                          ? 'Customers can browse listings and place orders normally.'
+                          : 'Customers will see a maintenance page. No new orders can be placed.'}
+                      </p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </motion.div>
+
+            {/* Welcome & Policy */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.1 }}>
+                <Card className="h-full border-border/40 bg-background/50 backdrop-blur-sm shadow-sm">
+                  <CardHeader>
+                    <CardTitle className="flex items-center gap-2 text-lg">
+                      <MessageSquare className="h-4 w-4 text-primary" />
+                      Welcome Message
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <Textarea
+                      value={storefront.welcomeMessage}
+                      onChange={(e) => setStorefront(prev => ({ ...prev, welcomeMessage: e.target.value }))}
+                      placeholder="Enter the welcome message for new customers..."
+                      className="min-h-[180px] bg-background/50 border-border/50 resize-none focus:ring-primary/20"
+                    />
+                  </CardContent>
+                </Card>
+              </motion.div>
+
+              <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.2 }}>
+                <Card className="h-full border-border/40 bg-background/50 backdrop-blur-sm shadow-sm">
+                  <CardHeader>
+                    <CardTitle className="flex items-center gap-2 text-lg">
+                      <Shield className="h-4 w-4 text-orange-400" />
+                      Store Policy
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <Textarea
+                      value={storefront.storePolicy}
+                      onChange={(e) => setStorefront(prev => ({ ...prev, storePolicy: e.target.value }))}
+                      placeholder="Enter your store's policies, terms, and conditions..."
+                      className="min-h-[180px] bg-background/50 border-border/50 resize-none focus:ring-primary/20"
+                    />
+                  </CardContent>
+                </Card>
+              </motion.div>
             </div>
 
-            {/* Shipping Settings */}
-            <div className="bg-[#0F0F12] rounded-lg p-4 border border-zinc-800">
-              <div className="flex items-center gap-2 mb-3">
-                <Globe className="h-4 w-4 text-blue-400" />
-                <h2 className="text-base font-medium text-zinc-100">
-                  Shipping
-                </h2>
-              </div>
-              <div className="grid grid-cols-2 gap-3">
-                <div>
-                  <label className="text-xs font-medium mb-1 block text-zinc-400">Ships From</label>
-                  <Select
-                    value={storefront.shipsFrom}
-                    onValueChange={(value) =>
-                      setStorefront((prev) => ({ ...prev, shipsFrom: value as any }))
-                    }
-                  >
-                    <SelectTrigger className="bg-[#1C1C1C] border-zinc-800 h-8 text-sm">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {SHIPPING_REGIONS.map((region) => (
-                        <SelectItem key={region.value} value={region.value}>
-                          {region.emoji} {region.label}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div>
-                  <label className="text-xs font-medium mb-1 block text-zinc-400">Ships To</label>
-                  <Select
-                    value={storefront.shipsTo}
-                    onValueChange={(value) =>
-                      setStorefront((prev) => ({ ...prev, shipsTo: value as any }))
-                    }
-                  >
-                    <SelectTrigger className="bg-[#1C1C1C] border-zinc-800 h-8 text-sm">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {SHIPPING_REGIONS.map((region) => (
-                        <SelectItem key={region.value} value={region.value}>
-                          {region.emoji} {region.label}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-              </div>
-            </div>
+            {/* Security Settings */}
+            <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.3 }}>
+              <Card className="border-border/40 bg-background/50 backdrop-blur-sm shadow-sm">
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2">
+                    <Key className="h-5 w-5 text-purple-400" />
+                    Security Configuration
+                  </CardTitle>
+                  <CardDescription>Manage keys and access tokens for your store security</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-6">
+                  <div className="grid grid-cols-1 gap-4">
+                    <div className="space-y-2">
+                      <Label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">PGP Public Key</Label>
+                      <Textarea
+                        value={storefront.pgpKey}
+                        onChange={(e) => setStorefront(prev => ({ ...prev, pgpKey: e.target.value }))}
+                        placeholder="-----BEGIN PGP PUBLIC KEY BLOCK-----..."
+                        className="font-mono text-xs h-32 bg-zinc-950/50 border-zinc-800/50 resize-none"
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Telegram Bot Token</Label>
+                      <div className="relative">
+                        <Input
+                          type="password"
+                          value={storefront.telegramToken}
+                          onChange={(e) => setStorefront(prev => ({ ...prev, telegramToken: e.target.value }))}
+                          placeholder="123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11"
+                          className="bg-background/50 border-border/50 font-mono text-sm pl-10"
+                        />
+                        <div className="absolute left-3 top-2.5 text-muted-foreground">
+                          <Shield className="h-4 w-4" />
+                        </div>
+                      </div>
+                      <p className="text-[10px] text-muted-foreground">Used for notifications and bot integration.</p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </motion.div>
           </div>
 
-          {/* Messaging and Payments */}
-          <div className="space-y-3">
-            <div className="bg-[#0F0F12] rounded-lg p-4 border border-zinc-800">
-              <div className="flex items-center gap-2 mb-3">
-                <MessageSquare className="h-4 w-4 text-emerald-400" />
-                <h2 className="text-base font-medium text-zinc-100">
-                  Welcome Message
-                </h2>
-              </div>
-              <Textarea
-                value={storefront.welcomeMessage}
-                onChange={(e) => setStorefront(prev => ({ ...prev, welcomeMessage: e.target.value }))}
-                placeholder="Enter the welcome message for new customers"
-                className="h-36 bg-[#1C1C1C] border-zinc-800 text-sm resize-none"
-              />
-            </div>
-
-            <div className="bg-[#0F0F12] rounded-lg p-4 border border-zinc-800">
-              <div className="flex items-center gap-2 mb-3">
-                <Shield className="h-4 w-4 text-orange-400" />
-                <h2 className="text-base font-medium text-zinc-100">
-                  Store Policy
-                </h2>
-              </div>
-              <Textarea
-                value={storefront.storePolicy}
-                onChange={(e) => setStorefront(prev => ({ ...prev, storePolicy: e.target.value }))}
-                placeholder="Enter your store's policies, terms, and conditions"
-                className="h-48 bg-[#1C1C1C] border-zinc-800 text-sm resize-none"
-              />
-            </div>
-
-            <div className="bg-[#0F0F12] rounded-lg p-4 border border-zinc-800">
-              <div className="flex items-center gap-2 mb-3">
-                <Wallet className="h-4 w-4 text-yellow-400" />
-                <h2 className="text-base font-medium text-zinc-100">
-                  Payment Methods
-                </h2>
-              </div>
-              <div className="space-y-2">
-                {WALLET_OPTIONS.map((wallet) => (
-                  <div key={wallet.id} className="space-y-1.5">
-                    <div className="flex items-center justify-between">
-                      <label className="text-xs font-medium flex items-center gap-2 text-zinc-400">
-                        <span>{wallet.emoji}</span>
-                        {wallet.name}
-                        {wallet.comingSoon && (
-                          <span className="text-[10px] bg-purple-900/50 text-purple-400 px-1.5 py-0.5 rounded">
-                            Coming Soon
-                          </span>
-                        )}
-                      </label>
-                      <TooltipProvider>
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <div>
-                              <Switch
-                                checked={storefront.enabledWallets[wallet.id]}
-                                onCheckedChange={(checked) =>
-                                  setStorefront((prev) => ({
-                                    ...prev,
-                                    enabledWallets: {
-                                      ...prev.enabledWallets,
-                                      [wallet.id]: checked,
-                                    },
-                                  }))
-                                }
-                                disabled={wallet.disabled}
-                              />
-                            </div>
-                          </TooltipTrigger>
-                          {wallet.disabled && (
-                            <TooltipContent>
-                              <p>Coming soon</p>
-                            </TooltipContent>
-                          )}
-                        </Tooltip>
-                      </TooltipProvider>
-                    </div>
-                    {storefront.enabledWallets[wallet.id] && !wallet.disabled && (
-                      <Input
-                        value={storefront.wallets[wallet.id]}
-                        onChange={(e) =>
-                          setStorefront((prev) => ({
-                            ...prev,
-                            wallets: {
-                              ...prev.wallets,
-                              [wallet.id]: e.target.value,
-                            },
-                          }))
-                        }
-                        placeholder={wallet.placeholder}
-                        className="font-mono text-sm h-8 bg-[#1C1C1C] border-zinc-800"
-                      />
-                    )}
+          {/* Sidebar Column */}
+          <div className="space-y-6">
+            {/* Shipping Settings */}
+            <motion.div initial={{ opacity: 0, x: 10 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.4 }}>
+              <Card className="border-border/40 bg-background/50 backdrop-blur-sm shadow-sm">
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2 text-lg">
+                    <Globe className="h-4 w-4 text-blue-400" />
+                    Shipping & Logistics
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div className="space-y-2">
+                    <Label>Ships From</Label>
+                    <Select
+                      value={storefront.shipsFrom}
+                      onValueChange={(value) =>
+                        setStorefront((prev) => ({ ...prev, shipsFrom: value as any }))
+                      }
+                    >
+                      <SelectTrigger className="bg-background/50 border-border/50">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {SHIPPING_REGIONS.map((region) => (
+                          <SelectItem key={region.value} value={region.value}>
+                            <span className="flex items-center gap-2">
+                              <span className="text-lg">{region.emoji}</span>
+                              {region.label}
+                            </span>
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
                   </div>
-                ))}
-              </div>
-            </div>
+                  <div className="space-y-2">
+                    <Label>Ships To</Label>
+                    <Select
+                      value={storefront.shipsTo}
+                      onValueChange={(value) =>
+                        setStorefront((prev) => ({ ...prev, shipsTo: value as any }))
+                      }
+                    >
+                      <SelectTrigger className="bg-background/50 border-border/50">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {SHIPPING_REGIONS.map((region) => (
+                          <SelectItem key={region.value} value={region.value}>
+                            <span className="flex items-center gap-2">
+                              <span className="text-lg">{region.emoji}</span>
+                              {region.label}
+                            </span>
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </CardContent>
+              </Card>
+            </motion.div>
+
+            {/* Payment Methods */}
+            <motion.div initial={{ opacity: 0, x: 10 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.5 }}>
+              <Card className="border-border/40 bg-background/50 backdrop-blur-sm shadow-sm">
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2 text-lg">
+                    <Wallet className="h-4 w-4 text-yellow-500" />
+                    Crypto Wallets
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  {WALLET_OPTIONS.map((wallet) => (
+                    <div key={wallet.id} className="p-3 rounded-lg border border-border/50 bg-card/30 hover:bg-card/50 transition-colors">
+                      <div className="flex items-center justify-between mb-3">
+                        <label className="text-sm font-medium flex items-center gap-2">
+                          <span className="text-lg">{wallet.emoji}</span>
+                          {wallet.name}
+                        </label>
+                        <div className="flex items-center gap-2">
+                          {wallet.comingSoon && (
+                            <Badge variant="secondary" className="text-[10px] h-5">Soon</Badge>
+                          )}
+                          <Switch
+                            checked={storefront.enabledWallets[wallet.id]}
+                            onCheckedChange={(checked) =>
+                              setStorefront((prev) => ({
+                                ...prev,
+                                enabledWallets: {
+                                  ...prev.enabledWallets,
+                                  [wallet.id]: checked,
+                                },
+                              }))
+                            }
+                            disabled={wallet.disabled}
+                            className="scale-90"
+                          />
+                        </div>
+                      </div>
+                      {storefront.enabledWallets[wallet.id] && !wallet.disabled && (
+                        <motion.div initial={{ height: 0, opacity: 0 }} animate={{ height: 'auto', opacity: 1 }}>
+                          <Input
+                            value={storefront.wallets[wallet.id]}
+                            onChange={(e) =>
+                              setStorefront((prev) => ({
+                                ...prev,
+                                wallets: {
+                                  ...prev.wallets,
+                                  [wallet.id]: e.target.value,
+                                },
+                              }))
+                            }
+                            placeholder={wallet.placeholder}
+                            className="font-mono text-xs h-9 bg-background/50"
+                          />
+                        </motion.div>
+                      )}
+                    </div>
+                  ))}
+                </CardContent>
+              </Card>
+            </motion.div>
           </div>
         </div>
       </div>
 
       <BroadcastDialog open={broadcastOpen} setOpen={setBroadcastOpen} />
-      
-    </Dashboard>
+
+    </Dashboard >
   );
 }
+
+

app/globals.css

@@ -10,17 +10,18 @@ body {
   .text-balance {
     text-wrap: balance;
   }
-  
+
   /* Shimmer animation for loading indicators */
   @keyframes shimmer {
     0% {
       background-position: -200% 0;
     }
+
     100% {
       background-position: 200% 0;
     }
   }
-  
+
   /* Accessibility improvements */
   .sr-only {
     position: absolute;
@@ -33,164 +34,182 @@ body {
     white-space: nowrap;
     border: 0;
   }
-  
+
   /* Better focus states for keyboard navigation */
   .focus-visible:focus-visible {
     outline: 2px solid hsl(var(--ring));
     outline-offset: 2px;
   }
-  
+
   /* Improved touch targets for mobile/Chromebook */
   .touch-target {
     min-height: 44px;
     min-width: 44px;
   }
-  
+
   /* Better contrast for Chromebook displays */
   @media (prefers-contrast: high) {
     .border-input {
       border-color: hsl(var(--foreground));
     }
   }
-  
+
   /* Chromebook and touch device optimizations */
   @media (pointer: coarse) {
     .touch-target {
       min-height: 48px;
       min-width: 48px;
     }
-    
+
     /* Larger touch targets for interactive elements */
-    button, input, textarea, [role="button"] {
+    button,
+    input,
+    textarea,
+    [role="button"] {
       min-height: 44px;
     }
   }
-  
+
   /* Better focus indicators for keyboard navigation */
   .focus-visible:focus-visible {
     outline: 2px solid hsl(var(--ring));
     outline-offset: 2px;
     box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
   }
-  
+
   /* Improved scrolling for touch devices */
   .overflow-y-auto {
     -webkit-overflow-scrolling: touch;
     scroll-behavior: smooth;
   }
-  
+
   /* Enhanced contrast for better visibility */
   .text-muted-foreground {
     color: hsl(var(--muted-foreground) / 0.8);
   }
-  
+
   /* Better button contrast */
   button:not(:disabled):hover {
     filter: brightness(1.05);
   }
-  
+
   /* Improved focus visibility */
-  input:focus, textarea:focus, button:focus {
+  input:focus,
+  textarea:focus,
+  button:focus {
     outline: 2px solid hsl(var(--ring));
     outline-offset: 2px;
   }
-  
+
   /* Better message bubble contrast */
   .bg-primary {
     background-color: hsl(var(--primary) / 0.9);
   }
-  
+
   /* Chromebook-specific optimizations */
   @media screen and (max-width: 1366px) and (min-resolution: 1.5dppx) {
+
     /* Chromebook display optimizations */
     .text-sm {
       font-size: 0.875rem;
       line-height: 1.25rem;
     }
-    
+
     .text-base {
       font-size: 1rem;
       line-height: 1.5rem;
     }
-    
+
     /* Better touch targets for Chromebooks */
-    button, input, textarea, [role="button"], [role="tab"] {
+    button,
+    input,
+    textarea,
+    [role="button"],
+    [role="tab"] {
       min-height: 48px;
       min-width: 48px;
     }
-    
+
     /* Improved spacing for Chromebook screens */
-    .space-y-2 > * + * {
+    .space-y-2>*+* {
       margin-top: 0.75rem;
     }
-    
-    .space-y-4 > * + * {
+
+    .space-y-4>*+* {
       margin-top: 1.25rem;
     }
   }
-  
+
   /* Chromebook touch screen optimizations */
   @media (pointer: coarse) and (hover: none) {
+
     /* Larger touch targets */
     .touch-target {
       min-height: 52px;
       min-width: 52px;
     }
-    
+
     /* Better spacing for touch interactions */
-    .space-y-2 > * + * {
+    .space-y-2>*+* {
       margin-top: 1rem;
     }
-    
+
     /* Improved button padding */
     button {
       padding: 0.75rem 1rem;
     }
-    
+
     /* Better input field sizing */
-    input, textarea {
+    input,
+    textarea {
       padding: 0.875rem;
       font-size: 1rem;
     }
-    
+
     /* Enhanced focus states for touch */
-    button:focus-visible, input:focus-visible, textarea:focus-visible {
+    button:focus-visible,
+    input:focus-visible,
+    textarea:focus-visible {
       outline: 3px solid hsl(var(--ring));
       outline-offset: 2px;
     }
   }
-  
+
   /* Chromebook keyboard navigation improvements */
   @media (hover: hover) and (pointer: fine) {
+
     /* Better hover states for mouse/trackpad */
     button:hover:not(:disabled) {
       transform: translateY(-1px);
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     }
-    
+
     /* Improved focus indicators */
-    button:focus-visible, input:focus-visible, textarea:focus-visible {
+    button:focus-visible,
+    input:focus-visible,
+    textarea:focus-visible {
       outline: 2px solid hsl(var(--ring));
       outline-offset: 2px;
       box-shadow: 0 0 0 4px hsl(var(--ring) / 0.2);
     }
   }
-  
+
   /* Chromebook display scaling fixes */
   @media screen and (min-resolution: 1.5dppx) {
+
     /* Prevent text from being too small on high-DPI displays */
     html {
       -webkit-text-size-adjust: 100%;
       text-size-adjust: 100%;
     }
-    
+
     /* Better font rendering */
     body {
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
     }
   }
-  
+
   /* Chromebook scrolling improvements */
   .overflow-y-auto {
     -webkit-overflow-scrolling: touch;
@@ -198,14 +217,14 @@ body {
     /* Better momentum scrolling for Chromebooks */
     overscroll-behavior: contain;
   }
-  
+
   /* Chromebook chat interface optimizations */
   .chat-message {
     /* Better message bubble sizing for touch */
     min-height: 44px;
     padding: 0.75rem;
   }
-  
+
   /* Chromebook form optimizations */
   .form-input {
     /* Better input field sizing for Chromebooks */
@@ -213,7 +232,7 @@ body {
     font-size: 1rem;
     padding: 0.75rem 1rem;
   }
-  
+
   /* Chromebook button optimizations */
   .btn-chromebook {
     min-height: 48px;
@@ -222,17 +241,17 @@ body {
     font-size: 1rem;
     border-radius: 0.5rem;
   }
-  
+
   /* Enhanced keyboard focus indicators for Chromebooks */
   .keyboard-focus {
     outline: 3px solid hsl(var(--ring));
     outline-offset: 2px;
     box-shadow: 0 0 0 4px hsl(var(--ring) / 0.3);
   }
-  
+
   /* Better focus management for Chromebook keyboard navigation */
-  button:focus-visible, 
-  input:focus-visible, 
+  button:focus-visible,
+  input:focus-visible,
   textarea:focus-visible,
   [role="button"]:focus-visible,
   [role="tab"]:focus-visible {
@@ -240,22 +259,31 @@ body {
     outline-offset: 2px;
     box-shadow: 0 0 0 4px hsl(var(--ring) / 0.3);
   }
-  
+
   /* Chromebook-specific focus ring */
   @media (prefers-reduced-motion: no-preference) {
     .keyboard-focus {
       transition: outline 0.2s ease, box-shadow 0.2s ease;
     }
   }
-  
+
   .bg-muted {
     background-color: hsl(var(--muted) / 0.8);
   }
 
   /* Christmas-themed animations */
   @keyframes twinkle {
-    0%, 100% { opacity: 1; transform: scale(1); }
-    50% { opacity: 0.3; transform: scale(0.8); }
+
+    0%,
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    50% {
+      opacity: 0.3;
+      transform: scale(0.8);
+    }
   }
 
   @keyframes snowflake {
@@ -263,6 +291,7 @@ body {
       transform: translateY(-100vh) rotate(0deg);
       opacity: 1;
     }
+
     100% {
       transform: translateY(100vh) rotate(360deg);
       opacity: 0;
@@ -270,20 +299,26 @@ body {
   }
 
   @keyframes sparkle {
-    0%, 100% { 
+
+    0%,
+    100% {
       opacity: 0;
       transform: scale(0) rotate(0deg);
     }
-    50% { 
+
+    50% {
       opacity: 1;
       transform: scale(1) rotate(180deg);
     }
   }
 
   @keyframes glow {
-    0%, 100% {
+
+    0%,
+    100% {
       box-shadow: 0 0 5px hsl(var(--christmas-red)), 0 0 10px hsl(var(--christmas-red)), 0 0 15px hsl(var(--christmas-red));
     }
+
     50% {
       box-shadow: 0 0 10px hsl(var(--christmas-green)), 0 0 20px hsl(var(--christmas-green)), 0 0 30px hsl(var(--christmas-green));
     }
@@ -312,19 +347,19 @@ body {
 
   /* Subtle Christmas gradient backgrounds */
   .christmas-gradient {
-    background: linear-gradient(135deg, 
-      hsl(var(--christmas-red) / 0.1) 0%, 
-      hsl(var(--christmas-green) / 0.1) 50%, 
-      hsl(var(--christmas-gold) / 0.1) 100%);
+    background: linear-gradient(135deg,
+        hsl(var(--christmas-red) / 0.1) 0%,
+        hsl(var(--christmas-green) / 0.1) 50%,
+        hsl(var(--christmas-gold) / 0.1) 100%);
   }
 
   /* Christmas-themed borders */
   .christmas-border {
     border: 2px solid;
-    border-image: linear-gradient(45deg, 
-      hsl(var(--christmas-red)), 
-      hsl(var(--christmas-green)), 
-      hsl(var(--christmas-gold))) 1;
+    border-image: linear-gradient(45deg,
+        hsl(var(--christmas-red)),
+        hsl(var(--christmas-green)),
+        hsl(var(--christmas-gold))) 1;
   }
 
   /* Christmas-themed styles - only active in December */
@@ -342,7 +377,7 @@ body {
     left: 0;
     width: 100%;
     height: 100%;
-    background-image: 
+    background-image:
       radial-gradient(circle at 20% 50%, hsl(var(--christmas-red) / 0.03) 0%, transparent 50%),
       radial-gradient(circle at 80% 80%, hsl(var(--christmas-green) / 0.03) 0%, transparent 50%),
       radial-gradient(circle at 40% 20%, hsl(var(--christmas-gold) / 0.03) 0%, transparent 50%);
@@ -360,9 +395,9 @@ body {
   /* Using more specific selector to avoid Turbopack CSS parsing issues */
   .christmas-theme button[class*="bg-primary"]:hover,
   .christmas-theme [class*="bg-primary"]:hover {
-    background: linear-gradient(135deg, 
-      hsl(var(--christmas-red)), 
-      hsl(var(--christmas-green)));
+    background: linear-gradient(135deg,
+        hsl(var(--christmas-red)),
+        hsl(var(--christmas-green)));
     transition: background 0.3s ease;
   }
 
@@ -376,6 +411,42 @@ body {
   .christmas-theme *:focus-visible {
     outline-color: hsl(var(--christmas-red));
   }
+
+  /* Premium UI Utilities */
+  .glass-morphism {
+    @apply bg-background/60 backdrop-blur-md border border-border/50;
+  }
+
+  .dark .glass-morphism {
+    @apply bg-black/40 backdrop-blur-xl border-white/5;
+  }
+
+  .premium-card {
+    @apply transition-all duration-300;
+  }
+
+  .premium-card:hover {
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
+    border-color: hsl(var(--primary) / 0.2);
+  }
+
+  .dark .premium-card {
+    @apply bg-card;
+  }
+
+  .dark .premium-card:hover {
+    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
+    border-color: hsl(var(--primary) / 0.2);
+  }
+
+  .text-gradient {
+    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-primary/60;
+  }
+
+  .bg-gradient-premium {
+    background: radial-gradient(circle at top left, hsl(var(--primary) / 0.05), transparent),
+      radial-gradient(circle at bottom right, hsl(var(--primary) / 0.02), transparent);
+  }
 }
 
 @layer base {
@@ -410,26 +481,27 @@ body {
     --christmas-green: 142 76% 36%;
     --christmas-gold: 43 96% 56%;
   }
+
   .dark {
-    --background: 0 0% 3.9%;
+    --background: 240 10% 2%;
     --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
+    --card: 240 10% 3%;
     --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
+    --popover: 240 10% 2%;
     --popover-foreground: 0 0% 98%;
     --primary: 0 0% 98%;
     --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
+    --secondary: 240 4% 10%;
     --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
+    --muted: 240 4% 10%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 4% 10%;
     --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
+    --border: 240 4% 12%;
+    --input: 240 4% 12%;
+    --ring: 240 5% 83.1%;
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;
@@ -464,7 +536,8 @@ body {
   * {
     @apply border-border;
   }
+
   body {
     @apply bg-background text-foreground;
   }
-}
+}

app/not-found.tsx

@@ -1,6 +1,6 @@
 import { Metadata, Viewport } from "next";
 import Link from "next/link";
-import { buttonVariants } from "@/components/ui/button";
+import { buttonVariants } from "@/components/common/button";
 import { ArrowLeft } from "lucide-react";
 
 export const metadata: Metadata = {
@@ -38,3 +38,4 @@ export default function NotFound() {
     </div>
   );
 }
+

app/page.tsx

@@ -1,77 +1,43 @@
-import { getPlatformStatsServer } from "@/lib/server-api";
-import { HomeNavbar } from "@/components/home-navbar";
-import { Suspense } from "react";
-import { Shield, LineChart, Zap, ArrowRight, CheckCircle2, Sparkles } from "lucide-react";
-import { Button } from "@/components/ui/button";
+import { getPlatformStatsServer } from "@/lib/api/server-api";
+import { HomeNavbar } from "@/components/layout/home-navbar";
+import { Shield, LineChart, Zap, ArrowRight, Sparkles } from "lucide-react";
+import { Button } from "@/components/common/button";
 import Link from "next/link";
 import { AnimatedStatsSection } from "@/components/animated-stats-section";
-import { isDecember } from "@/lib/utils/christmas";
-import { MotionWrapper } from "@/components/ui/motion-wrapper";
+import { MotionWrapper } from "@/components/common/motion-wrapper";
 
 export const dynamic = 'force-dynamic';
 
-const PY_20 = 20;
-const PY_32 = 32;
-const PX_6 = 6;
-const PX_10 = 10;
-
-function formatNumberValue(num: number): string {
-  return new Intl.NumberFormat().format(Math.round(num));
-}
-
-// Format currency
-function formatCurrencyValue(amount: number): string {
-  return new Intl.NumberFormat('en-GB', {
-    style: 'currency',
-    currency: 'GBP',
-    maximumFractionDigits: 0
-  }).format(amount);
-}
-
-// This is a server component
 export default async function Home() {
   try {
     const stats = await getPlatformStatsServer();
-    const isDec = isDecember();
 
     return (
-      <div className={`flex flex-col min-h-screen bg-black text-white ${isDec ? 'christmas-theme' : ''}`}>
-        <div className={`absolute inset-0 bg-gradient-to-br pointer-events-none scale-100 ${isDec
-          ? 'from-red-500/10 via-green-500/5 to-transparent'
-          : 'from-[#D53F8C]/10 via-[#D53F8C]/3 to-transparent'
-          }`} />
+      <div className="relative flex flex-col min-h-screen bg-black text-white">
+        <div className="absolute inset-0 bg-gradient-to-br from-indigo-500/10 via-purple-500/5 to-transparent pointer-events-none scale-100" />
         <HomeNavbar />
 
         {/* Hero Section */}
         <section className="relative overflow-hidden">
           <div className="relative flex flex-col items-center px-4 py-20 md:py-32 mx-auto max-w-7xl">
             <div className="flex flex-col items-center text-center space-y-6 max-w-3xl">
-              <div className={`inline-flex items-center px-4 py-2 rounded-full border mb-4 ${isDec
-                ? 'bg-red-500/10 border-red-500/20'
-                : 'bg-[#D53F8C]/10 border-[#D53F8C]/20'
-                }`}>
-                <Sparkles className={`h-4 w-4 mr-2 ${isDec ? 'text-red-400' : 'text-[#D53F8C]'}`} />
-                <span className={`text-sm font-medium ${isDec ? 'text-red-400' : 'text-[#D53F8C]'}`}>
+              <div className="inline-flex items-center px-4 py-2 rounded-full border border-indigo-500/20 bg-indigo-500/10 mb-4">
+                <Sparkles className="h-4 w-4 mr-2 text-indigo-400" />
+                <span className="text-sm font-medium text-indigo-400">
                   Secure Crypto Payments
                 </span>
               </div>
               <h1 className="text-4xl md:text-6xl font-bold tracking-tight">
-                The Future of <span className={isDec ? 'text-red-400' : 'text-[#D53F8C]'}>E-commerce</span> Management
+                The Future of <span className="text-indigo-500">E-commerce</span> Management
               </h1>
               <p className="text-lg md:text-xl text-zinc-400 max-w-2xl">
-                {isDec
-                  ? 'Spread joy this holiday season with our all-in-one platform. Secure payments, order tracking, and analytics wrapped up in one beautiful package. 🎄'
-                  : 'Streamline your online business with our all-in-one platform. Secure payments, order tracking, and analytics in one place.'
-                }
+                Streamline your online business with our all-in-one platform. Secure payments, order tracking, and analytics in one place.
               </p>
               <div className="flex flex-col sm:flex-row gap-4 mt-4">
                 <Link href="/dashboard">
                   <Button
                     size="lg"
-                    className={`gap-2 text-white border-0 h-12 px-8 ${isDec
-                      ? 'bg-gradient-to-r from-red-500 to-green-500 hover:from-red-600 hover:to-green-600'
-                      : 'bg-[#D53F8C] hover:bg-[#B83280]'
-                      }`}
+                    className="gap-2 text-white border-0 h-12 px-8 bg-indigo-600 hover:bg-indigo-700"
                   >
                     Get Started
                     <ArrowRight className="h-4 w-4" />
@@ -103,35 +69,21 @@ export default async function Home() {
                     title: "Lightning Fast",
                     description: "Optimized for speed with real-time updates and instant notifications."
                   }
-                ].map((feature, i) => {
-                  const christmasColors = ['from-red-500/5', 'from-green-500/5', 'from-yellow-500/5'];
-                  const christmasBorders = ['border-red-500/30', 'border-green-500/30', 'border-yellow-500/30'];
-                  const christmasIcons = ['text-red-400', 'text-green-400', 'text-yellow-400'];
-                  const christmasBgs = ['bg-red-500/10', 'bg-green-500/10', 'bg-yellow-500/10'];
-
-                  return (
-                    <div
-                      key={i}
-                      className={`group relative overflow-hidden rounded-xl bg-gradient-to-b p-6 border transition-all duration-300 hover:scale-[1.02] hover:shadow-lg ${isDec
-                        ? `from-zinc-800/30 to-transparent ${christmasBorders[i % 3]}`
-                        : 'from-zinc-800/30 to-transparent border-zinc-800'
-                        }`}
-                    >
-                      <div
-                        className={`absolute inset-0 bg-gradient-to-b to-transparent opacity-0 group-hover:opacity-100 transition-opacity ${isDec ? christmasColors[i % 3] : 'from-[#D53F8C]/5'
-                          }`}
-                      />
-                      <div className="relative">
-                        <div className={`h-12 w-12 flex items-center justify-center rounded-lg mb-4 ${isDec ? christmasBgs[i % 3] : 'bg-[#D53F8C]/10'
-                          }`}>
-                          <feature.icon className={`h-6 w-6 ${isDec ? christmasIcons[i % 3] : 'text-[#D53F8C]'}`} />
-                        </div>
-                        <h3 className="text-lg font-semibold text-white mb-2">{feature.title}</h3>
-                        <p className="text-sm text-zinc-400">{feature.description}</p>
+                ].map((feature, i) => (
+                  <div
+                    key={i}
+                    className="group relative overflow-hidden rounded-xl bg-gradient-to-b from-zinc-800/30 to-transparent p-6 border border-zinc-800 transition-all duration-300 hover:scale-[1.02] hover:shadow-lg"
+                  >
+                    <div className="absolute inset-0 bg-gradient-to-b from-indigo-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
+                    <div className="relative">
+                      <div className="h-12 w-12 flex items-center justify-center rounded-lg mb-4 bg-indigo-500/10">
+                        <feature.icon className="h-6 w-6 text-indigo-500" />
                       </div>
+                      <h3 className="text-lg font-semibold text-white mb-2">{feature.title}</h3>
+                      <p className="text-sm text-zinc-400">{feature.description}</p>
                     </div>
-                  );
-                })}
+                  </div>
+                ))}
               </div>
             </MotionWrapper>
 
@@ -145,13 +97,6 @@ export default async function Home() {
         {/* Footer */}
         <footer className="relative py-12 px-4 mt-auto">
           <div className="max-w-7xl mx-auto flex flex-col items-center">
-            {isDec && (
-              <div className="flex items-center gap-2 mb-4 text-red-400 animate-twinkle">
-                <span className="text-xl">🎄</span>
-                <span className="text-sm font-medium">Happy Holidays from da ember team!</span>
-                <span className="text-xl">🎄</span>
-              </div>
-            )}
             <div className="text-sm text-zinc-500">
               © {new Date().getFullYear()} Ember. All rights reserved.
             </div>
@@ -164,3 +109,6 @@ export default async function Home() {
     return <div>Error loading page</div>;
   }
 }
+
+
+

components/KeepOnline.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useKeepOnline } from "@/hooks/useKeepOnline";
+import { useKeepOnline } from "@/lib/hooks/useKeepOnline";
 
 const KeepOnline = () => { 
   useKeepOnline({
@@ -14,4 +14,4 @@ const KeepOnline = () => {
   return null;
 }
 
-export default KeepOnline;
+export default KeepOnline;

components/admin/AdminStatCard.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/common/card";
+import { Skeleton } from "@/components/common/skeleton";
+import { Area, AreaChart, ResponsiveContainer, Tooltip, TooltipProps } from "recharts";
+import { TrendIndicator } from "./TrendIndicator";
+import { cn } from "@/lib/utils";
+import { LucideIcon } from "lucide-react";
+import { formatGBP } from "@/lib/utils/format";
+
+interface ChartDataPoint {
+    formattedDate: string;
+    value: number;
+    orders?: number;
+    revenue?: number;
+    [key: string]: any;
+}
+
+interface AdminStatCardProps {
+    title: string;
+    icon: LucideIcon;
+    iconColorClass: string;
+    iconBgClass: string;
+    value: string | number;
+    subtext?: React.ReactNode;
+    trend?: {
+        current: number;
+        previous: number;
+    };
+    loading?: boolean;
+    chartData?: ChartDataPoint[];
+    chartColor: string;
+    chartGradientId: string;
+    tooltipPrefix?: string; // "£" or ""
+    hideChart?: boolean;
+    children?: React.ReactNode;
+}
+
+const CustomTooltip = ({ active, payload, label, prefix = "" }: TooltipProps<any, any> & { prefix?: string }) => {
+    if (active && payload && payload.length) {
+        const data = payload[0].payload;
+        return (
+            <div className="bg-[#050505]/90 p-3 rounded-lg shadow-xl border border-white/10 backdrop-blur-md ring-1 ring-white/5">
+                <p className="font-bold text-[10px] uppercase tracking-wide text-muted-foreground mb-2 border-b border-white/5 pb-1">
+                    {data.formattedDate || label}
+                </p>
+                <div className="flex items-center justify-between gap-4">
+                    <span className="text-[11px] font-semibold text-primary">
+                        {prefix === "£" ? "Revenue" : "Count"}
+                    </span>
+                    <span className="text-[11px] font-bold text-foreground tabular-nums">
+                        {prefix}{prefix === "£" ? (data.value || 0).toFixed(2) : data.value}
+                    </span>
+                </div>
+            </div>
+        );
+    }
+    return null;
+};
+
+export function AdminStatCard({
+    title,
+    icon: Icon,
+    iconColorClass,
+    iconBgClass,
+    value,
+    subtext,
+    trend,
+    loading,
+    chartData,
+    chartColor,
+    chartGradientId,
+    tooltipPrefix = "",
+    hideChart = false,
+    children,
+}: AdminStatCardProps) {
+    if (loading) {
+        return (
+            <Card className="border-border/40 bg-background/50 backdrop-blur-sm shadow-sm overflow-hidden h-full">
+                <CardHeader className="pb-2">
+                    <div className="flex justify-between items-start">
+                        <Skeleton className="h-4 w-24" />
+                        <Skeleton className="h-8 w-8 rounded-md" />
+                    </div>
+                </CardHeader>
+                <CardContent>
+                    <Skeleton className="h-8 w-32 mb-2" />
+                    <div className="flex items-center gap-2 mb-4">
+                        <Skeleton className="h-4 w-20" />
+                        <Skeleton className="h-4 w-12 ml-auto" />
+                    </div>
+                    {!hideChart && <Skeleton className="h-14 w-full rounded-md" />}
+                </CardContent>
+            </Card>
+        );
+    }
+
+    return (
+        <Card className="border-border/40 bg-background/50 backdrop-blur-sm shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-300 h-full flex flex-col">
+            <CardHeader className="pb-2">
+                <div className="flex justify-between items-start">
+                    <CardTitle className="text-sm font-medium text-muted-foreground">
+                        {title}
+                    </CardTitle>
+                    <div className={cn("p-2 rounded-md", iconBgClass)}>
+                        <Icon className={cn("h-4 w-4", iconColorClass)} />
+                    </div>
+                </div>
+            </CardHeader>
+            <CardContent className="flex-1 flex flex-col">
+                <div className="text-2xl font-bold">{value}</div>
+
+                <div className="flex items-center text-xs text-muted-foreground mt-1">
+                    {subtext}
+                    {trend && (
+                        <div className="ml-auto">
+                            <TrendIndicator current={trend.current} previous={trend.previous} />
+                        </div>
+                    )}
+                </div>
+
+                {children && <div className="mt-2">{children}</div>}
+
+                {!hideChart && (
+                    chartData && chartData.length > 0 ? (
+                        <div className="mt-auto pt-4 h-[72px] -mx-2">
+                            <ResponsiveContainer width="100%" height="100%">
+                                <AreaChart
+                                    data={chartData}
+                                    margin={{ top: 5, right: 0, left: 0, bottom: 0 }}
+                                >
+                                    <defs>
+                                        <linearGradient id={chartGradientId} x1="0" y1="0" x2="0" y2="1">
+                                            <stop offset="5%" stopColor={chartColor} stopOpacity={0.3} />
+                                            <stop offset="95%" stopColor={chartColor} stopOpacity={0} />
+                                        </linearGradient>
+                                    </defs>
+                                    <Area
+                                        type="monotone"
+                                        dataKey="value"
+                                        stroke={chartColor}
+                                        fillOpacity={1}
+                                        fill={`url(#${chartGradientId})`}
+                                        strokeWidth={2}
+                                        activeDot={{ r: 4, strokeWidth: 0, fill: chartColor }}
+                                    />
+                                    <Tooltip
+                                        content={<CustomTooltip prefix={tooltipPrefix} />}
+                                        cursor={{ stroke: 'rgba(255,255,255,0.1)', strokeWidth: 1 }}
+                                    />
+                                </AreaChart>
+                            </ResponsiveContainer>
+                        </div>
+                    ) : (
+                        <div className="mt-4 h-14 flex items-center justify-center text-xs text-muted-foreground bg-muted/20 rounded">
+                            No chart data
+                        </div>
+                    )
+                )}
+
+                {/* Fill space if chart is hidden but we want structure consistency */}
+                {hideChart && <div className="mt-auto pt-4" />}
+            </CardContent>
+        </Card>
+    );
+}

components/admin/BanUserCard.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { useState } from "react";
-import { fetchClient } from "@/lib/api-client";
+import { fetchClient } from "@/lib/api/api-client";
 
 export default function BanUserCard() {
   const [telegramUserId, setTelegramUserId] = useState("");
@@ -70,3 +70,4 @@ export default function BanUserCard() {
 }
 
 
+

components/admin/InvitationsListCard.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { useEffect, useState } from "react";
-import { fetchClient } from "@/lib/api-client";
+import { fetchClient } from "@/lib/api/api-client";
 
 interface Invitation {
   _id: string;
@@ -88,3 +88,4 @@ export default function InvitationsListCard() {
 }
 
 
+

components/admin/InviteVendorCard.tsx

@@ -1,48 +1,107 @@
-"use client";
 import { useState } from "react";
-import { fetchClient } from "@/lib/api-client";
+import { fetchClient } from "@/lib/api/api-client";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/common/card";
+import { Button } from "@/components/common/button";
+import { Copy, Check, Ticket, Loader2, RefreshCw } from "lucide-react";
+import { useToast } from "@/lib/hooks/use-toast";
 
 export default function InviteVendorCard() {
   const [loading, setLoading] = useState(false);
-  const [message, setMessage] = useState<string | null>(null);
   const [code, setCode] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+  const { toast } = useToast();
 
   async function handleInvite() {
     setLoading(true);
-    setMessage(null);
     setCode(null);
+    setCopied(false);
     try {
       const res = await fetchClient<{ code: string }>("/admin/invitations", { method: "POST" });
-      setMessage("Invitation created");
       setCode(res.code);
+      toast({
+        title: "Invitation Created",
+        description: "New vendor invitation code generated successfully.",
+      });
     } catch (e: any) {
-      setMessage(e?.message || "Failed to send invitation");
+      toast({
+        title: "Error",
+        description: e?.message || "Failed to generate invitation",
+        variant: "destructive",
+      });
     } finally {
       setLoading(false);
     }
   }
 
+  const copyToClipboard = () => {
+    if (!code) return;
+    navigator.clipboard.writeText(code);
+    setCopied(true);
+    toast({
+      title: "Copied",
+      description: "Invitation code copied to clipboard",
+    });
+    setTimeout(() => setCopied(false), 2000);
+  };
+
   return (
-    <div className="rounded-lg border border-border/60 bg-background p-4 h-full min-h-[200px]">
-      <h2 className="font-medium">Invite Vendor</h2>
-      <p className="text-sm text-muted-foreground mt-1">Generate a new invitation code</p>
-      <div className="mt-4 space-y-3">
-        <button
-          onClick={handleInvite}
-          className="inline-flex items-center rounded-md bg-primary px-3 py-2 text-sm text-primary-foreground disabled:opacity-60"
-          disabled={loading}
-        >
-          {loading ? "Generating..." : "Generate Invite Code"}
-        </button>
-        {message && <p className="text-xs text-muted-foreground">{message}</p>}
-        {code && (
-          <div className="text-sm">
-            Code: <span className="font-mono px-1.5 py-0.5 rounded bg-muted">{code}</span>
+    <Card className="h-full border-border/40 bg-background/50 backdrop-blur-sm shadow-sm flex flex-col">
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-base font-medium flex items-center gap-2">
+            <Ticket className="h-4 w-4 text-primary" />
+            Invite Vendor
+          </CardTitle>
+        </div>
+        <CardDescription>Generate a one-time invitation code.</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 flex flex-col justify-center gap-4">
+        {code ? (
+          <div className="space-y-3 animate-in fade-in zoom-in-95 duration-300">
+            <div className="p-3 rounded-md bg-muted/50 border border-border/50 text-center relative group">
+              <span className="font-mono text-xl font-bold tracking-widest text-primary">{code}</span>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="absolute right-1 top-1 h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity"
+                onClick={copyToClipboard}
+              >
+                {copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
+              </Button>
+            </div>
+            <p className="text-xs text-center text-muted-foreground">
+              Share this code with the new vendor. It expires in 7 days.
+            </p>
+          </div>
+        ) : (
+          <div className="text-center py-2 text-sm text-muted-foreground/80">
+            Click generate to create a new code.
           </div>
         )}
-      </div>
-    </div>
+      </CardContent>
+      <CardFooter className="pt-0">
+        <Button
+          onClick={handleInvite}
+          disabled={loading}
+          className="w-full bg-primary/90 hover:bg-primary shadow-sm"
+        >
+          {loading ? (
+            <>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              Generating...
+            </>
+          ) : (
+            <>
+              {code ? <RefreshCw className="mr-2 h-4 w-4" /> : <Ticket className="mr-2 h-4 w-4" />}
+              {code ? "Generate Another" : "Generate Code"}
+            </>
+          )}
+        </Button>
+      </CardFooter>
+    </Card>
   );
 }
 
 
+
+

components/admin/OrderDetailsModal.tsx

@@ -7,13 +7,13 @@ import {
   DialogDescription,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Button } from "@/components/ui/button";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { fetchClient } from "@/lib/api-client";
+} from "@/components/common/dialog";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/common/card";
+import { Badge } from "@/components/common/badge";
+import { Skeleton } from "@/components/common/skeleton";
+import { Button } from "@/components/common/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/common/select";
+import { fetchClient } from "@/lib/api/api-client";
 import { toast } from "sonner";
 import { Package, User, Calendar, DollarSign, MapPin, Truck, CheckCircle, XCircle, Clock, Wallet, Copy, ExternalLink } from "lucide-react";
 
@@ -562,3 +562,5 @@ export default function OrderDetailsModal({ orderId, open, onOpenChange }: Order
   );
 }
 
+
+

components/admin/OrdersTable.tsx

@@ -1,11 +1,11 @@
 "use client";
 
 import { useState, useMemo } from "react";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/common/card";
+import { Button } from "@/components/common/button";
+import { Input } from "@/components/common/input";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/common/table";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/common/select";
 import { Search, Filter, Eye, ChevronLeft, ChevronRight } from "lucide-react";
 import { List } from 'react-window';
 import OrderDetailsModal from "./OrderDetailsModal";
@@ -366,3 +366,4 @@ export default function OrdersTable({ orders, enableModal = true }: OrdersTableP
     </Card>
   );
 }
+

components/admin/RecentOrdersCard.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { useEffect, useState } from "react";
-import { fetchClient } from "@/lib/api-client";
+import { fetchClient } from "@/lib/api/api-client";
 
 interface OrderItem {
   name: string;
@@ -99,3 +99,4 @@ export default function RecentOrdersCard() {
 }
 
 
+

components/admin/SystemStatusCard.tsx

@@ -1,8 +1,8 @@
 "use client";
 import { useEffect, useState } from "react";
-import { fetchClient } from "@/lib/api-client";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { fetchClient } from "@/lib/api/api-client";
+import { Button } from "@/components/common/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/common/card";
 
 interface Status {
   uptimeSeconds: number;
@@ -151,3 +151,5 @@ export default function SystemStatusCard() {
 }
 
 
+
+

components/admin/TrendIndicator.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { TrendingDown, TrendingUp } from "lucide-react";
+
+// Trend indicator component for metric cards
+export const TrendIndicator = ({
+    current,
+    previous,
+}: {
+    current: number;
+    previous: number;
+}) => {
+    if (!current || !previous) return null;
+
+    const percentChange = ((current - previous) / previous) * 100;
+
+    if (Math.abs(percentChange) < 0.1) return null;
+
+    return (
+        <div
+            className={`flex items-center text-xs font-medium ${percentChange >= 0 ? "text-green-500" : "text-red-500"}`}
+        >
+            {percentChange >= 0 ? (
+                <TrendingUp className="h-3 w-3 mr-1" />
+            ) : (
+                <TrendingDown className="h-3 w-3 mr-1" />
+            )}
+            {Math.abs(percentChange).toFixed(1)}%
+        </div>
+    );
+};

components/admin/VendorsCard.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { useEffect, useState } from "react";
-import { fetchClient } from "@/lib/api-client";
+import { fetchClient } from "@/lib/api/api-client";
 
 interface Vendor {
   _id: string;
@@ -137,3 +137,4 @@ export default function VendorsCard() {
     </div>
   );
 }
+

components/analytics/AnalyticsDashboard.tsx

@@ -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,25 +32,23 @@ 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";
 
-// Lazy load chart components - already handled individually below
-
 const RevenueChart = dynamic(() => import("./RevenueChart"), {
   loading: () => <ChartSkeleton />,
 });
@@ -172,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),
@@ -180,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,
@@ -188,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,
@@ -197,211 +195,205 @@ export default function AnalyticsDashboard({
   ];
 
   return (
-    <div className="space-y-10">
-      {/* Header with Privacy Toggle */}
-      <div className="flex items-center justify-between">
+    <div className="space-y-10 pb-20">
+      {/* Header with Integrated Toolbar */}
+      <div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
         <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 className="text-muted-foreground mt-1">
+            Real-time performance metrics and AI-driven insights.
           </p>
         </div>
-        <div className="flex items-center gap-2">
+
+        <div className="flex items-center gap-2 p-1.5 glass-morphism rounded-2xl border border-white/5 shadow-2xl backdrop-blur-xl ring-1 ring-white/5">
           <Button
-            variant="outline"
+            variant="ghost"
             size="sm"
             onClick={() => setHideNumbers(!hideNumbers)}
-            className="flex items-center gap-2"
+            className={`flex items-center gap-2 rounded-xl transition-all font-medium px-4 ${hideNumbers ? 'bg-primary text-primary-foreground shadow-lg' : 'hover:bg-white/5'}`}
           >
             {hideNumbers ? (
               <>
                 <EyeOff className="h-4 w-4" />
-                Show Numbers
+                <span className="hidden sm:inline">Numbers Hidden</span>
               </>
             ) : (
               <>
-                <Eye className="h-4 w-4" />
-                Hide Numbers
+                <Eye className="h-4 w-4 text-primary/70" />
+                <span className="hidden sm:inline">Hide Numbers</span>
               </>
             )}
           </Button>
+
+          <div className="w-px h-5 bg-white/10 mx-1" />
+
           <Button
-            variant="outline"
+            variant="ghost"
             size="sm"
             onClick={refreshData}
             disabled={isLoading}
-            className="flex items-center gap-2"
+            className="flex items-center gap-2 rounded-xl hover:bg-white/5 font-medium px-4"
           >
             <RefreshCw
-              className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`}
+              className={`h-4 w-4 ${isLoading ? "animate-spin text-primary" : "text-primary/70"}`}
             />
-            Refresh
+            <span className="hidden sm:inline">Refresh Data</span>
           </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">
+      <MotionWrapper className="space-y-12">
+        {/* Analytics Tabs Setup */}
+        <Tabs defaultValue="overview" className="space-y-10">
+          <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6 pb-2">
+            <TabsList className="bg-transparent h-auto p-0 flex flex-wrap gap-2 lg:gap-4">
+              <TabsTrigger
+                value="overview"
+                className="px-4 py-2 rounded-xl data-[state=active]:bg-primary/5 data-[state=active]:text-primary data-[state=active]:shadow-none border border-transparent data-[state=active]:border-primary/20 flex items-center gap-2 transition-all"
+              >
                 <Activity className="h-4 w-4" />
-                Growth
+                Overview
               </TabsTrigger>
-              <TabsTrigger value="revenue" className="flex items-center gap-2">
-                <TrendingUp className="h-4 w-4" />
-                Revenue
+              <TabsTrigger
+                value="financials"
+                className="px-4 py-2 rounded-xl data-[state=active]:bg-primary/5 data-[state=active]:text-primary data-[state=active]:shadow-none border border-transparent data-[state=active]:border-primary/20 flex items-center gap-2 transition-all"
+              >
+                <DollarSign className="h-4 w-4" />
+                Financials
               </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">
+              <TabsTrigger
+                value="performance"
+                className="px-4 py-2 rounded-xl data-[state=active]:bg-primary/5 data-[state=active]:text-primary data-[state=active]:shadow-none border border-transparent data-[state=active]:border-primary/20 flex items-center gap-2 transition-all"
+              >
                 <BarChart3 className="h-4 w-4" />
-                Orders
+                Performance
               </TabsTrigger>
-              <TabsTrigger value="predictions" className="flex items-center gap-2">
-                <TrendingUp className="h-4 w-4" />
-                Predictions
+              <TabsTrigger
+                value="ai"
+                className="px-4 py-2 rounded-xl data-[state=active]:bg-primary/5 data-[state=active]:text-primary data-[state=active]:shadow-none border border-transparent data-[state=active]:border-primary/20 flex items-center gap-2 transition-all"
+              >
+                <Calculator className="h-4 w-4" />
+                AI Insights
               </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>
+            {/* Contextual Time Range Selector */}
+            <div className="flex items-center gap-3 bg-muted/30 p-1 rounded-xl border border-border/20">
+              <span className="text-xs font-semibold text-muted-foreground px-2">Range</span>
+              <Select value={timeRange} onValueChange={setTimeRange}>
+                <SelectTrigger className="w-[130px] h-8 border-none bg-transparent shadow-none focus:ring-0">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent className="rounded-xl border-border/40">
+                  <SelectItem value="7">Last 7 days</SelectItem>
+                  <SelectItem value="30">Last 30 days</SelectItem>
+                  <SelectItem value="90">Last 90 days</SelectItem>
+                  <SelectItem value="180">Last 180 days</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
 
-            <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="overview" className="space-y-10 outline-none">
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.4, ease: "easeOut" }}
+              className="space-y-10"
+            >
+              {/* Key Metrics Cards */}
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+                {isLoading
+                  ? [...Array(4)].map((_, i) => <MetricsCardSkeleton key={i} />)
+                  : metrics.map((metric) => (
+                    <MetricsCard key={metric.title} {...metric} />
+                  ))}
+              </div>
 
-            <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>
+              <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                {/* Completion Rate Card */}
+                <Card className="lg:col-span-1 glass-morphism premium-card">
                   <CardHeader>
-                    <CardTitle className="text-lg">Date Range</CardTitle>
+                    <CardTitle className="flex items-center gap-2 text-lg">
+                      <Activity className="h-5 w-5 text-emerald-500" />
+                      Order Completion
+                    </CardTitle>
                     <CardDescription>
-                      Select a custom date range for profit calculations
+                      Successfully processed orders
                     </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>
+                    {isLoading ? (
+                      <Skeleton className="h-24 w-full rounded-2xl" />
+                    ) : (
+                      <div className="space-y-6">
+                        <div className="flex items-center justify-between">
+                          <div className="text-4xl font-extrabold tracking-tight">
+                            {hideNumbers ? "**%" : `${data.orders.completionRate}%`}
+                          </div>
+                          <Badge variant="outline" className="bg-emerald-500/10 text-emerald-600 border-emerald-500/20 px-3 py-1 text-xs font-bold">
+                            {hideNumbers
+                              ? "** / **"
+                              : `${data.orders.completed} / ${data.orders.total}`}
+                          </Badge>
                         </div>
-                      )}
-                    </div>
+                        <div className="w-full bg-secondary/50 rounded-full h-3 overflow-hidden border border-border/20">
+                          <motion.div
+                            initial={{ width: 0 }}
+                            animate={{ width: hideNumbers ? "0%" : `${data.orders.completionRate}%` }}
+                            transition={{ duration: 1, ease: "circOut" }}
+                            className="bg-gradient-to-r from-emerald-500 to-teal-400 h-full rounded-full"
+                          />
+                        </div>
+                      </div>
+                    )}
                   </CardContent>
                 </Card>
+
+                {/* Growth Chart Snippet (Simplified) */}
+                <div className="lg:col-span-2 min-w-0">
+                  <Suspense fallback={<ChartSkeleton />}>
+                    <GrowthAnalyticsChart hideNumbers={hideNumbers} />
+                  </Suspense>
+                </div>
+              </div>
+            </motion.div>
+          </TabsContent>
+
+          <TabsContent value="financials" className="space-y-8 outline-none">
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.4 }}
+              className="grid grid-cols-1 xl:grid-cols-2 gap-8"
+            >
+              <Suspense fallback={<ChartSkeleton />}>
+                <div className="min-w-0">
+                  <RevenueChart timeRange={timeRange} hideNumbers={hideNumbers} />
+                </div>
+              </Suspense>
+
+              <div className="space-y-8">
+                <Card className="glass-morphism">
+                  <CardHeader>
+                    <CardTitle className="text-lg">Profit Range</CardTitle>
+                    <CardDescription>
+                      Custom date selection for analysis
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <DateRangePicker
+                      dateRange={profitDateRange}
+                      onDateRangeChange={setProfitDateRange}
+                      placeholder="Select date range"
+                      showPresets={true}
+                      className="w-full"
+                    />
+                  </CardContent>
+                </Card>
+
                 <Suspense fallback={<ChartSkeleton />}>
                   <ProfitAnalyticsChart
                     dateRange={
@@ -415,43 +407,49 @@ export default function AnalyticsDashboard({
                     hideNumbers={hideNumbers}
                   />
                 </Suspense>
-              </motion.div>
-            </TabsContent>
+              </div>
+            </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 />}>
+          <TabsContent value="performance" className="space-y-8 outline-none">
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.4 }}
+              className="grid grid-cols-1 lg:grid-cols-2 gap-8"
+            >
+              <Suspense fallback={<ChartSkeleton />}>
+                <div className="min-w-0">
                   <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 }}>
+                </div>
+              </Suspense>
+              <div className="space-y-8 min-w-0">
                 <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)} />
+                  <CustomerInsightsChart />
                 </Suspense>
-              </motion.div>
-            </TabsContent>
-          </Tabs>
-        </div>
+              </div>
+            </motion.div>
+          </TabsContent>
+
+          <TabsContent value="ai" className="space-y-8 outline-none">
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.4 }}
+              className="min-w-0"
+            >
+              <Suspense fallback={<ChartSkeleton />}>
+                <PredictionsChart timeRange={parseInt(timeRange)} />
+              </Suspense>
+            </motion.div>
+          </TabsContent>
+        </Tabs>
       </MotionWrapper>
     </div>
   );
 }
+
+

components/analytics/AnalyticsDashboardSkeleton.tsx

@@ -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>
   );
-} 
+} 

components/analytics/CustomerInsightsChart.tsx

@@ -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>
   );
-} 
+} 
+

components/analytics/GrowthAnalyticsChart.tsx

@@ -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>
@@ -183,7 +170,7 @@ export default function GrowthAnalyticsChart({
             </div>
           ) : growthData?.monthly && growthData.monthly.length > 0 ? (
             <div className="h-80">
-              <ResponsiveContainer width="100%" height="100%">
+              <ResponsiveContainer key={growthData?.monthly?.length || 0} width="100%" height="100%">
                 <ComposedChart
                   data={growthData.monthly.map((m) => ({
                     ...m,
@@ -201,6 +188,10 @@ export default function GrowthAnalyticsChart({
                       <stop offset="5%" stopColor="#10b981" stopOpacity={0.8} />
                       <stop offset="95%" stopColor="#10b981" stopOpacity={0} />
                     </linearGradient>
+                    <linearGradient id="colorOrdersGrowth" x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="5%" stopColor="#3b82f6" stopOpacity={0.6} />
+                      <stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
+                    </linearGradient>
                   </defs>
                   <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="hsl(var(--border))" />
                   <XAxis
@@ -232,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">
@@ -255,14 +246,16 @@ export default function GrowthAnalyticsChart({
                       return null;
                     }}
                   />
-                  <Line
+                  <Area
                     yAxisId="left"
                     type="monotone"
                     dataKey="orders"
                     stroke="#3b82f6"
                     strokeWidth={2}
-                    dot={{ fill: "#3b82f6", r: 3 }}
+                    dot={false}
+                    activeDot={{ r: 4, strokeWidth: 0 }}
                     name="Orders"
+                    fill="url(#colorOrdersGrowth)"
                   />
                   <Area
                     yAxisId="right"
@@ -270,7 +263,8 @@ export default function GrowthAnalyticsChart({
                     dataKey="revenue"
                     stroke="#10b981"
                     strokeWidth={3}
-                    dot={{ fill: "#10b981", r: 4 }}
+                    dot={false}
+                    activeDot={{ r: 5, strokeWidth: 0 }}
                     name="Revenue"
                     fill="url(#colorRevenueGrowth)"
                   />
@@ -320,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)}
@@ -345,3 +339,5 @@ export default function GrowthAnalyticsChart({
     </div>
   );
 }
+
+

components/analytics/MetricsCard.tsx

@@ -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";
@@ -25,45 +25,91 @@ export default function MetricsCard({
   const getTrendIcon = () => {
     switch (trend) {
       case "up":
-        return <TrendingUp className="h-4 w-4 text-green-500" />;
+        return <TrendingUp className="h-4 w-4 text-emerald-500" />;
       case "down":
-        return <TrendingDown className="h-4 w-4 text-red-500" />;
+        return <TrendingDown className="h-4 w-4 text-rose-500" />;
       default:
-        return <Minus className="h-4 w-4 text-gray-500" />;
+        return <Minus className="h-4 w-4 text-muted-foreground" />;
     }
   };
 
   const getTrendColor = () => {
     switch (trend) {
       case "up":
-        return "text-green-600";
+        return "text-emerald-400 bg-emerald-500/10 border-emerald-500/10";
       case "down":
-        return "text-red-600";
+        return "text-rose-400 bg-rose-500/10 border-rose-500/10";
       default:
-        return "text-gray-600";
+        return "text-blue-400 bg-blue-500/10 border-blue-500/10";
     }
   };
 
+  const getCategoryColor = () => {
+    const t = title.toLowerCase();
+    if (t.includes("revenue") || t.includes("profit")) return "amber";
+    if (t.includes("order")) return "blue";
+    if (t.includes("customer")) return "indigo";
+    if (t.includes("product") || t.includes("inventory")) return "purple";
+    return "primary";
+  }
+
+  const categoryColor = getCategoryColor();
+
+  const getIconContainerColor = () => {
+    switch (categoryColor) {
+      case "amber": return "bg-amber-500/15 text-amber-500 border-amber-500/20";
+      case "blue": return "bg-blue-500/15 text-blue-500 border-blue-500/20";
+      case "indigo": return "bg-indigo-500/15 text-indigo-500 border-indigo-500/20";
+      case "purple": return "bg-purple-500/15 text-purple-500 border-purple-500/20";
+      default: return "bg-primary/15 text-primary border-primary/20";
+    }
+  }
+
+  const getBadgeColor = () => {
+    switch (categoryColor) {
+      case "amber": return "bg-amber-500/10 text-amber-400/80 border-amber-500/20";
+      case "blue": return "bg-blue-500/10 text-blue-400/80 border-blue-500/20";
+      case "indigo": return "bg-indigo-500/10 text-indigo-400/80 border-indigo-500/20";
+      case "purple": return "bg-purple-500/10 text-purple-400/80 border-purple-500/20";
+      default: return "bg-primary/10 text-primary/60 border-primary/20";
+    }
+  }
+
   return (
-    <motion.div>
-      <Card className="hover:shadow-xl hover:border-indigo-500/30 transition-all duration-300">
-        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle className="text-sm font-medium text-muted-foreground">
+    <motion.div
+      whileHover={{ y: -4 }}
+      transition={{ type: "spring", stiffness: 300, damping: 20 }}
+    >
+      <Card className="glass-morphism premium-card relative overflow-hidden group border-white/5">
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4 relative z-10">
+          <CardTitle className="text-[10px] font-bold tracking-wider text-white/40 uppercase">
             {title}
           </CardTitle>
-          <Icon className="h-4 w-4 text-muted-foreground" />
+          <div className={`p-2.5 rounded-2xl border ${getIconContainerColor()} transition-all duration-300 group-hover:scale-105`}>
+            <Icon className="h-4 w-4" />
+          </div>
         </CardHeader>
-        <CardContent>
-          <div className="text-2xl font-bold">{value}</div>
-          <p className="text-xs text-muted-foreground mt-1">{description}</p>
-          <div className="flex items-center gap-1 mt-2">
-            {getTrendIcon()}
-            <span className={`text-xs ${getTrendColor()}`}>
-              {trendValue}
-            </span>
+
+        <CardContent className="relative z-10">
+          <div className="space-y-1.5">
+            <div className="text-3xl font-bold text-white">
+              {value}
+            </div>
+            <p className="text-[11px] text-white/40">
+              {description}
+            </p>
+          </div>
+
+          <div className="flex items-center gap-2 mt-6 pt-5">
+            <div className={`flex items-center gap-1.5 px-3 py-1 rounded-full border ${getTrendColor()} transition-all duration-300`}>
+              {getTrendIcon()}
+              <span className="text-[10px] font-bold uppercase tracking-wide">
+                {trend === "up" ? "+" : ""}{trendValue}
+              </span>
+            </div>
           </div>
         </CardContent>
       </Card>
     </motion.div>
   );
-}
+}

components/analytics/OrderAnalyticsChart.tsx

@@ -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>
   );
-} 
+} 
+

components/analytics/PredictionsChart.tsx

@@ -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;
@@ -82,6 +82,12 @@ export default function PredictionsChart({
   const [baselinePredictions, setBaselinePredictions] = useState<PredictionsOverview | null>(
     null,
   );
+  // Batch data holds all pre-cached predictions for instant switching
+  const [batchData, setBatchData] = useState<{
+    [horizon: string]: {
+      [simulationFactor: string]: PredictionsOverview;
+    };
+  } | null>(null);
   const [stockPredictions, setStockPredictions] =
     useState<StockPredictionsResponse | null>(null);
   const [loading, setLoading] = useState(true);
@@ -92,16 +98,33 @@ export default function PredictionsChart({
   const [committedSimulationFactor, setCommittedSimulationFactor] = useState(0);
   const { toast } = useToast();
 
-  // Fetch baseline predictions (simulation factor = 0)
-  const fetchBaseline = async () => {
+  // Fetch all predictions in batch (for instant client-side switching)
+  const fetchBatchData = async () => {
     try {
       setLoading(true);
-      const [overview, stock] = await Promise.all([
-        getPredictionsOverviewWithStore(daysAhead, timeRange, 0),
+      const { getBatchPredictionsWithStore } = await import("@/lib/services/analytics-service");
+      const [batchResponse, stock] = await Promise.all([
+        getBatchPredictionsWithStore(timeRange),
         getStockPredictionsWithStore(timeRange),
       ]);
-      setBaselinePredictions(overview);
-      setPredictions(overview);
+
+      if (batchResponse.success && batchResponse.predictions) {
+        setBatchData(batchResponse.predictions);
+        // Set initial predictions from batch
+        const horizonData = batchResponse.predictions[daysAhead.toString()];
+        if (horizonData) {
+          const baseline = horizonData["0"];
+          if (baseline) {
+            setBaselinePredictions(baseline);
+            setPredictions(baseline);
+          }
+        }
+      } else {
+        // Fallback to single request if batch not available
+        const overview = await getPredictionsOverviewWithStore(daysAhead, timeRange, 0);
+        setBaselinePredictions(overview);
+        setPredictions(overview);
+      }
       setStockPredictions(stock);
     } catch (error) {
       console.error("Error fetching predictions:", error);
@@ -115,43 +138,53 @@ export default function PredictionsChart({
     }
   };
 
-  // Fetch simulated predictions (without full reload)
-  const fetchSimulation = async (factor: number) => {
-    if (factor === 0) {
-      // Use cached baseline
-      setPredictions(baselinePredictions);
-      return;
-    }
+  // Switch predictions from batch data (no API call!)
+  const switchPredictions = useCallback((horizon: number, simFactor: number) => {
+    if (!batchData) return;
 
-    try {
-      setIsSimulating(true);
-      const overview = await getPredictionsOverviewWithStore(daysAhead, timeRange, factor / 100);
-      setPredictions(overview);
-    } catch (error) {
-      console.error("Error fetching simulation:", error);
-      toast({
-        title: "Error",
-        description: "Failed to load simulation",
-        variant: "destructive",
-      });
-    } finally {
-      setIsSimulating(false);
-    }
-  };
+    const horizonData = batchData[horizon.toString()];
+    if (!horizonData) return;
 
-  // Fetch baseline on initial load or when daysAhead/timeRange changes
+    // Simulation factor is stored as decimal (e.g., 0.1 for 10%)
+    const simKey = (simFactor / 100).toString();
+    const newPrediction = horizonData[simKey];
+
+    if (newPrediction) {
+      setPredictions(newPrediction);
+      if (simFactor === 0) {
+        setBaselinePredictions(newPrediction);
+      }
+    }
+  }, [batchData]);
+
+  // Fetch batch data on initial load or when timeRange changes
   useEffect(() => {
-    fetchBaseline();
+    fetchBatchData();
     setCommittedSimulationFactor(0);
     setSimulationFactor(0);
-  }, [daysAhead, timeRange]);
+  }, [timeRange]);
 
-  // Fetch simulation when committed slider value changes
+  // Auto-adjust daysAhead if it exceeds historical timeRange
   useEffect(() => {
-    if (baselinePredictions) {
-      fetchSimulation(committedSimulationFactor);
+    if (daysAhead > timeRange) {
+      setDaysAhead(timeRange);
     }
-  }, [committedSimulationFactor]);
+  }, [timeRange, daysAhead]);
+
+  // Switch predictions when daysAhead changes (instant, from batch)
+  useEffect(() => {
+    if (batchData) {
+      switchPredictions(daysAhead, committedSimulationFactor);
+    }
+  }, [daysAhead, batchData, switchPredictions]);
+
+  // Switch predictions when simulation factor changes (instant, from batch)
+  useEffect(() => {
+    if (batchData) {
+      switchPredictions(daysAhead, committedSimulationFactor);
+    }
+  }, [committedSimulationFactor, batchData, switchPredictions]);
+
 
   const getConfidenceColor = (confidence: string) => {
     switch (confidence) {
@@ -188,7 +221,7 @@ export default function PredictionsChart({
     if (!predictions?.sales?.dailyPredictions) return [];
 
     const baselineData = baselinePredictions?.sales?.dailyPredictions || [];
-    const simulatedDailyData = predictions.sales.dailyPredictions;
+    const simulatedDailyData = predictions?.sales?.dailyPredictions || [];
 
     return simulatedDailyData.map((d: any, idx: number) => ({
       ...d,
@@ -281,7 +314,7 @@ export default function PredictionsChart({
               Predictions & Forecasting
             </CardTitle>
             <CardDescription>
-              {predictions.sales.aiModel?.used
+              {predictions?.sales?.aiModel?.used
                 ? "AI neural network + statistical models for sales, demand, and inventory"
                 : "AI-powered predictions for sales, demand, and inventory"}
             </CardDescription>
@@ -296,16 +329,27 @@ export default function PredictionsChart({
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="7">7 days</SelectItem>
-                <SelectItem value="14">14 days</SelectItem>
-                <SelectItem value="30">30 days</SelectItem>
-                <SelectItem value="60">60 days</SelectItem>
-                <SelectItem value="90">90 days</SelectItem>
+                <SelectItem value="14" disabled={timeRange < 14}>
+                  14 days {timeRange < 14 && "(Needs 14d history)"}
+                </SelectItem>
+                <SelectItem value="30" disabled={timeRange < 30}>
+                  30 days {timeRange < 30 && "(Needs 30d history)"}
+                </SelectItem>
+                <SelectItem value="60" disabled={timeRange < 60}>
+                  60 days {timeRange < 60 && "(Needs 60d history)"}
+                </SelectItem>
+                <SelectItem value="90" disabled={timeRange < 90}>
+                  90 days {timeRange < 90 && "(Needs 90d history)"}
+                </SelectItem>
+                <SelectItem value="180" disabled={timeRange < 180}>
+                  180 days {timeRange < 180 && "(Needs 180d history)"}
+                </SelectItem>
               </SelectContent>
             </Select>
             <Button
               variant="outline"
               size="icon"
-              onClick={fetchBaseline}
+              onClick={fetchBatchData}
               disabled={loading || isSimulating}
             >
               <RefreshCw
@@ -346,13 +390,13 @@ export default function PredictionsChart({
                     </CardTitle>
                   </CardHeader>
                   <CardContent>
-                    {predictions.sales.predicted !== null ? (
+                    {predictions?.sales?.predicted !== null && predictions?.sales?.predicted !== undefined ? (
                       <div className="space-y-2">
                         <Tooltip>
                           <TooltipTrigger asChild>
                             <div className="text-2xl font-bold w-fit cursor-help">
                               <CountUp
-                                end={predictions.sales.predicted}
+                                end={predictions?.sales?.predicted || 0}
                                 duration={1.5}
                                 separator=","
                                 decimals={2}
@@ -360,7 +404,7 @@ export default function PredictionsChart({
                               />
                             </div>
                           </TooltipTrigger>
-                          <TooltipContent>
+                          <TooltipContent side="bottom" className="z-[100]">
                             <p>Predicted daily average revenue for the next {daysAhead} days</p>
                           </TooltipContent>
                         </Tooltip>
@@ -371,71 +415,79 @@ export default function PredictionsChart({
                               <span className="inline-flex cursor-help">
                                 <Badge
                                   className={getConfidenceColor(
-                                    predictions.sales.confidence,
+                                    predictions?.sales?.confidence || "low",
                                   )}
                                 >
-                                  {getConfidenceLabel(predictions.sales.confidence)} Confidence
-                                  {predictions.sales.confidenceScore !== undefined && (
+                                  {getConfidenceLabel(predictions?.sales?.confidence || "low")} Confidence
+                                  {predictions?.sales?.confidenceScore !== undefined && (
                                     <span className="ml-1 opacity-75">
-                                      ({Math.round(predictions.sales.confidenceScore * 100)}%)
+                                      ({Math.round((predictions?.sales?.confidenceScore || 0) * 100)}%)
                                     </span>
                                   )}
                                 </Badge>
                               </span>
                             </TooltipTrigger>
-                            <TooltipContent>
+                            <TooltipContent side="bottom" className="z-[100]">
                               <p>Based on data consistency, historical accuracy, and model agreement</p>
                             </TooltipContent>
                           </Tooltip>
 
-                          {predictions.sales.aiModel?.used && (
+                          {predictions?.sales?.aiModel?.used && (
                             <Tooltip>
                               <TooltipTrigger asChild>
                                 <span className="inline-flex cursor-help">
                                   <Badge variant="outline" className="bg-purple-500/10 text-purple-700 dark:text-purple-400 border-purple-500/30">
                                     🤖 AI Powered
-                                    {predictions.sales.aiModel.modelAccuracy !== undefined && (
+                                    {predictions?.sales?.aiModel?.modelAccuracy !== undefined && (
                                       <span className="ml-1 opacity-75">
-                                        ({Math.round(predictions.sales.aiModel.modelAccuracy * 100)}%)
+                                        ({Math.round((predictions?.sales?.aiModel?.modelAccuracy || 0) * 100)}%)
                                       </span>
                                     )}
                                   </Badge>
                                 </span>
                               </TooltipTrigger>
-                              <TooltipContent>
-                                <p>Predictions generated using a Deep Learning Ensemble Model (TensorFlow.js)</p>
+                              <TooltipContent side="bottom" className="z-[100] max-w-xs">
+                                <div className="space-y-1.5">
+                                  <p className="font-semibold">Deep Learning Ensemble Model</p>
+                                  <p className="text-xs text-muted-foreground">
+                                    This percentage indicates how well the AI has learned your specific sales patterns.
+                                  </p>
+                                  <p className="text-xs text-muted-foreground border-t pt-1.5">
+                                    Scores above 90% are optimal—100% is avoided to prevent "memorizing" the past and ensure the model remains flexible for future shifts.
+                                  </p>
+                                </div>
                               </TooltipContent>
                             </Tooltip>
                           )}
-                          {predictions.sales.trend && (
+                          {predictions?.sales?.trend && (
                             <Tooltip>
                               <TooltipTrigger asChild>
                                 <span className="inline-flex cursor-help">
                                   <Badge
                                     variant="outline"
                                     className={
-                                      predictions.sales.trend.direction === "up"
+                                      predictions?.sales?.trend?.direction === "up"
                                         ? "text-green-600 border-green-600"
-                                        : predictions.sales.trend.direction === "down"
+                                        : predictions?.sales?.trend?.direction === "down"
                                           ? "text-red-600 border-red-600"
                                           : ""
                                     }
                                   >
-                                    {predictions.sales.trend.direction === "up" && (
+                                    {predictions?.sales?.trend?.direction === "up" && (
                                       <TrendingUp className="h-3 w-3 mr-1" />
                                     )}
-                                    {predictions.sales.trend.direction === "down" && (
+                                    {predictions?.sales?.trend?.direction === "down" && (
                                       <TrendingDown className="h-3 w-3 mr-1" />
                                     )}
-                                    {predictions.sales.trend.direction === "up"
+                                    {predictions?.sales?.trend?.direction === "up"
                                       ? "Trending Up"
-                                      : predictions.sales.trend.direction === "down"
+                                      : predictions?.sales?.trend?.direction === "down"
                                         ? "Trending Down"
                                         : "Stable"}
                                   </Badge>
                                 </span>
                               </TooltipTrigger>
-                              <TooltipContent>
+                              <TooltipContent side="bottom" className="z-[100]">
                                 <p>Direction of the recent sales trend (slope analysis)</p>
                               </TooltipContent>
                             </Tooltip>
@@ -444,24 +496,24 @@ export default function PredictionsChart({
                             Next {daysAhead} days
                           </span>
                         </div>
-                        {predictions.sales.predictedOrders && (
+                        {predictions?.sales?.predictedOrders && (
                           <div className="text-sm text-muted-foreground">
-                            ~{Math.round(predictions.sales.predictedOrders)}{" "}
+                            ~{Math.round(predictions?.sales?.predictedOrders || 0)}{" "}
                             orders
                           </div>
                         )}
-                        {!predictions.sales.confidenceIntervals &&
-                          predictions.sales.minPrediction &&
-                          predictions.sales.maxPrediction && (
+                        {!predictions?.sales?.confidenceIntervals &&
+                          predictions?.sales?.minPrediction &&
+                          predictions?.sales?.maxPrediction && (
                             <div className="text-xs text-muted-foreground">
-                              Range: {formatGBP(predictions.sales.minPrediction)} -{" "}
-                              {formatGBP(predictions.sales.maxPrediction)}
+                              Range: {formatGBP(predictions?.sales?.minPrediction || 0)} -{" "}
+                              {formatGBP(predictions?.sales?.maxPrediction || 0)}
                             </div>
                           )}
                       </div>
                     ) : (
                       <div className="text-sm text-muted-foreground">
-                        {predictions.sales.message ||
+                        {predictions?.sales?.message ||
                           "Insufficient data for prediction"}
                       </div>
                     )}
@@ -478,7 +530,7 @@ export default function PredictionsChart({
                         <TooltipTrigger>
                           <Info className="h-3 w-3 text-muted-foreground cursor-help" />
                         </TooltipTrigger>
-                        <TooltipContent>
+                        <TooltipContent side="bottom" className="z-[100]">
                           <p>Technical details about the active prediction model</p>
                         </TooltipContent>
                       </Tooltip>
@@ -495,7 +547,7 @@ export default function PredictionsChart({
                               Hybrid Ensemble (Deep Learning)
                             </span>
                           </TooltipTrigger>
-                          <TooltipContent>
+                          <TooltipContent side="bottom" className="z-[100]">
                             <p>Combines LSTM Neural Networks with Statistical Methods (Holt-Winters, ARIMA)</p>
                           </TooltipContent>
                         </Tooltip>
@@ -533,75 +585,116 @@ export default function PredictionsChart({
             </Alert>
 
             {/* Daily Predictions Chart */}
-            {predictions.sales.dailyPredictions &&
-              predictions.sales.dailyPredictions.length > 0 && (
-                <Card>
-                  <CardHeader className="pb-3 flex flex-row items-center justify-between space-y-0">
-                    <CardTitle className="text-sm font-medium">
-                      Daily Revenue Forecast
-                    </CardTitle>
-                    <div className="flex items-center gap-4">
-                      <div className="flex flex-col items-end">
-                        <span className="text-xs font-medium text-muted-foreground">
-                          Simulate Traffic:{" "}
-                          <span className={simulationFactor > 0 ? "text-green-600" : simulationFactor < 0 ? "text-red-600" : ""}>
-                            {simulationFactor > 0 ? "+" : ""}
-                            {simulationFactor}%
-                          </span>
-                        </span>
-                        <Slider
-                          value={[simulationFactor]}
-                          min={-50}
-                          max={50}
-                          step={10}
-                          onValueChange={(val) => setSimulationFactor(val[0])}
-                          onValueCommit={(val) => setCommittedSimulationFactor(val[0])}
-                          className="w-[150px] mt-1.5"
-                        />
+            {predictions?.sales?.dailyPredictions &&
+              predictions?.sales?.dailyPredictions.length > 0 && (
+                <Card className="glass-morphism border-primary/10 overflow-hidden">
+                  <CardHeader className="pb-6 bg-muted/5">
+                    <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+                      <div>
+                        <CardTitle className="text-xl font-bold flex items-center gap-2 tracking-tight">
+                          <Zap className="h-5 w-5 text-amber-500 fill-amber-500/20" />
+                          Scenario Lab
+                        </CardTitle>
+                        <CardDescription className="text-muted-foreground/80 font-medium">
+                          Adjust variables to see how traffic shifts impact your bottom line.
+                        </CardDescription>
                       </div>
-                      {simulationFactor !== 0 && (
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          className="h-6 w-6"
-                          onClick={() => {
-                            setSimulationFactor(0);
-                            setCommittedSimulationFactor(0);
-                          }}
-                          title="Reset simulation"
-                        >
-                          <RefreshCw className="h-3 w-3" />
-                        </Button>
-                      )}
+
+                      <div className="flex items-center gap-4 bg-black/40 p-2.5 rounded-2xl border border-white/5 shadow-2xl backdrop-blur-md">
+                        <div className="flex flex-col items-start min-w-[150px]">
+                          <div className="flex items-center gap-1.5 mb-1 ml-1">
+                            <span className="text-[10px] font-bold uppercase tracking-wider text-primary/40">
+                              Traffic Simulation
+                            </span>
+                            <TooltipProvider delayDuration={0}>
+                              <Tooltip>
+                                <TooltipTrigger asChild>
+                                  <Info className="h-3 w-3 text-primary/30 cursor-help" />
+                                </TooltipTrigger>
+                                <TooltipContent side="bottom" className="max-w-[200px] z-[110] bg-black border-white/10 text-white p-2">
+                                  <p className="text-[11px] leading-relaxed">
+                                    Simulate traffic growth or decline to see how it might impact your future revenue and order volume.
+                                  </p>
+                                </TooltipContent>
+                              </Tooltip>
+                            </TooltipProvider>
+                          </div>
+                          <div className="flex items-center gap-3 w-full">
+                            <Slider
+                              value={[simulationFactor]}
+                              min={-50}
+                              max={50}
+                              step={10}
+                              onValueChange={(val) => setSimulationFactor(val[0])}
+                              onValueCommit={(val) => setCommittedSimulationFactor(val[0])}
+                              className="w-full flex-1"
+                            />
+                            <Badge variant="outline" className={`ml-2 min-w-[50px] text-center font-bold border-2 ${simulationFactor > 0 ? "text-emerald-400 border-emerald-500/30 bg-emerald-500/10" : simulationFactor < 0 ? "text-rose-400 border-rose-500/30 bg-rose-500/10" : "text-primary/60"}`}>
+                              {simulationFactor > 0 ? "+" : ""}{simulationFactor}%
+                            </Badge>
+                          </div>
+                        </div>
+
+                        {(simulationFactor !== 0 || committedSimulationFactor !== 0) && (
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-9 w-9 hover:bg-white/10 rounded-xl transition-all"
+                            onClick={() => {
+                              setSimulationFactor(0);
+                              setCommittedSimulationFactor(0);
+                            }}
+                            title="Reset Scenario"
+                          >
+                            <RefreshCw className="h-4 w-4 text-primary/70" />
+                          </Button>
+                        )}
+                      </div>
+
+                      <Button variant="outline" size="sm" onClick={handleExportCSV} className="rounded-xl border-white/10 hover:bg-white/5 font-bold px-4">
+                        <Download className="mr-2 h-4 w-4" />
+                        Export Forecast
+                      </Button>
                     </div>
-                    <Button variant="outline" size="sm" onClick={handleExportCSV} title="Export to CSV">
-                      <Download className="mr-2 h-4 w-4" />
-                      Export
-                    </Button>
                   </CardHeader>
-                  <CardContent>
-                    <div className="h-[300px] w-full mt-4 relative">
-                      {isSimulating && (
-                        <div className="absolute inset-0 flex items-center justify-center bg-background/50 z-10">
-                          <RefreshCw className="h-6 w-6 animate-spin text-muted-foreground" />
+                  <CardContent className="pt-8">
+                    {/* Legend / Key */}
+                    <div className="flex items-center gap-8 mb-8 text-[10px] font-bold uppercase tracking-wider text-muted-foreground/60">
+                      <div className="flex items-center gap-3">
+                        <div className="w-2.5 h-2.5 rounded-full bg-[#8884d8]" />
+                        Baseline Forecast
+                      </div>
+                      {committedSimulationFactor !== 0 && (
+                        <div className="flex items-center gap-3">
+                          <div className="w-2.5 h-2.5 rounded-full bg-[#10b981]" />
+                          Simulated Scenario
                         </div>
                       )}
-                      <ResponsiveContainer width="100%" height="100%">
+                    </div>
+
+                    <div className="h-80 w-full relative">
+                      {isSimulating && (
+                        <div className="absolute inset-0 flex items-center justify-center bg-black/60 backdrop-blur-sm z-20 transition-all rounded-xl">
+                          <div className="flex flex-col items-center gap-3">
+                            <div className="relative">
+                              <RefreshCw className="h-10 w-10 animate-spin text-primary" />
+                              <Zap className="h-4 w-4 text-amber-500 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" />
+                            </div>
+                            <span className="text-xs font-bold uppercase tracking-wider text-primary animate-pulse">Running Neural Simulation...</span>
+                          </div>
+                        </div>
+                      )}
+                      <ResponsiveContainer key={`${daysAhead}-${timeRange}`} width="100%" height="100%">
                         <AreaChart
                           data={chartData}
-                          margin={{
-                            top: 5,
-                            right: 10,
-                            left: 0,
-                            bottom: 0,
-                          }}
+                          margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
                         >
                           <defs>
                             <linearGradient id="colorBaseline" x1="0" y1="0" x2="0" y2="1">
                               <stop
                                 offset="5%"
                                 stopColor="#8884d8"
-                                stopOpacity={0.6}
+                                stopOpacity={0.3}
                               />
                               <stop
                                 offset="95%"
@@ -613,7 +706,7 @@ export default function PredictionsChart({
                               <stop
                                 offset="5%"
                                 stopColor="#10b981"
-                                stopOpacity={0.8}
+                                stopOpacity={0.5}
                               />
                               <stop
                                 offset="95%"
@@ -622,40 +715,66 @@ export default function PredictionsChart({
                               />
                             </linearGradient>
                           </defs>
-                          <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="hsl(var(--border))" />
+                          <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="hsl(var(--border) / 0.4)" />
                           <XAxis
                             dataKey="formattedDate"
-                            stroke="hsl(var(--muted-foreground))"
-                            fontSize={12}
+                            tick={{ fontSize: 10, fill: "hsl(var(--muted-foreground))" }}
                             tickLine={false}
                             axisLine={false}
+                            dy={15}
                           />
                           <YAxis
-                            stroke="hsl(var(--muted-foreground))"
-                            fontSize={12}
+                            tick={{ fontSize: 10, fill: "hsl(var(--muted-foreground))" }}
                             tickLine={false}
                             axisLine={false}
                             tickFormatter={(value) => `£${value}`}
                           />
                           <RechartsTooltip
-                            contentStyle={{
-                              backgroundColor: "hsl(var(--background))",
-                              borderColor: "hsl(var(--border))",
-                              borderRadius: "var(--radius)",
+                            cursor={{ fill: "transparent", stroke: "hsl(var(--primary) / 0.05)", strokeWidth: 40 }}
+                            content={({ active, payload }) => {
+                              if (active && payload?.length) {
+                                const data = payload[0].payload;
+                                return (
+                                  <div className="bg-[#050505] p-5 rounded-2xl shadow-2xl border border-white/10 backdrop-blur-2xl ring-1 ring-white/5">
+                                    <p className="font-bold text-[10px] uppercase tracking-wide text-muted-foreground mb-4 border-b border-white/5 pb-3 px-1">{data.formattedDate}</p>
+                                    <div className="space-y-3">
+                                      <div className="flex items-center justify-between gap-10">
+                                        <span className="text-[10px] font-bold text-muted-foreground/60 uppercase tracking-wide">Baseline:</span>
+                                        <span className="text-sm font-bold text-[#8884d8] tabular-nums">{formatGBP(data.baseline)}</span>
+                                      </div>
+                                      {committedSimulationFactor !== 0 && (
+                                        <div className="flex items-center justify-between gap-10">
+                                          <span className="text-[10px] font-bold text-muted-foreground/60 uppercase tracking-wide">Simulated:</span>
+                                          <div className="flex flex-col items-end">
+                                            <span className="text-sm font-bold text-emerald-400 tabular-nums">{formatGBP(data.simulated)}</span>
+                                            <span className={`text-[10px] font-bold mt-0.5 ${data.simulated > data.baseline ? 'text-emerald-500' : 'text-rose-500'}`}>
+                                              {data.simulated > data.baseline ? '▴' : '▾'} {Math.abs(((data.simulated / data.baseline - 1) * 100)).toFixed(1)}%
+                                            </span>
+                                          </div>
+                                        </div>
+                                      )}
+                                      <div className="flex items-center justify-between gap-10 pt-3 border-t border-white/5">
+                                        <span className="text-[10px] font-bold text-muted-foreground/60 uppercase tracking-widest">Est. Orders:</span>
+                                        <span className="text-sm font-bold tabular-nums">
+                                          {Math.round(data.orders)}</span>
+                                      </div>
+                                    </div>
+                                  </div>
+                                );
+                              }
+                              return null;
                             }}
-                            formatter={(value: number, name: string) => [
-                              formatGBP(value),
-                              name === "baseline" ? "Baseline" : "Simulated"
-                            ]}
                           />
-                          {/* Always show baseline as solid line */}
+                          {/* Always show baseline */}
                           <Area
                             type="monotone"
                             dataKey="baseline"
                             stroke="#8884d8"
-                            fillOpacity={committedSimulationFactor !== 0 ? 0.3 : 1}
+                            fillOpacity={1}
                             fill="url(#colorBaseline)"
-                            strokeWidth={committedSimulationFactor !== 0 ? 1 : 2}
+                            strokeWidth={3}
+                            dot={false}
+                            activeDot={{ r: 4, strokeWidth: 0, fill: "#8884d8" }}
                           />
                           {/* Show simulated line when simulation is active */}
                           {committedSimulationFactor !== 0 && (
@@ -663,10 +782,12 @@ export default function PredictionsChart({
                               type="monotone"
                               dataKey="simulated"
                               stroke="#10b981"
-                              fillOpacity={0.6}
+                              fillOpacity={1}
                               fill="url(#colorSimulated)"
+                              strokeWidth={3}
                               strokeDasharray="5 5"
-                              strokeWidth={2}
+                              dot={false}
+                              activeDot={{ r: 6, strokeWidth: 3, stroke: "#fff", fill: "#10b981" }}
                             />
                           )}
                         </AreaChart>
@@ -812,3 +933,5 @@ export default function PredictionsChart({
     </Card >
   );
 }
+
+

components/analytics/ProductPerformanceChart.tsx

@@ -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>
   );
-} 
+}
+

components/analytics/ProfitAnalyticsChart.tsx

@@ -1,22 +1,23 @@
 "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 { 
-  TrendingUp, 
-  TrendingDown, 
-  DollarSign, 
+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,
+  DollarSign,
   PieChart,
   Calculator,
   Info,
-  AlertTriangle
+  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;
@@ -28,6 +29,7 @@ export default function ProfitAnalyticsChart({ timeRange, dateRange, hideNumbers
   const [data, setData] = useState<ProfitOverview | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [imageErrors, setImageErrors] = useState<Record<string, boolean>>({});
   const { toast } = useToast();
 
   const maskValue = (value: string): string => {
@@ -93,7 +95,7 @@ export default function ProfitAnalyticsChart({ timeRange, dateRange, hideNumbers
                 </Card>
               ))}
             </div>
-            
+
             {/* Coverage Card Skeleton */}
             <Card>
               <CardHeader>
@@ -110,7 +112,7 @@ export default function ProfitAnalyticsChart({ timeRange, dateRange, hideNumbers
                 </div>
               </CardContent>
             </Card>
-            
+
             {/* Products List Skeleton */}
             <Card>
               <CardHeader>
@@ -188,7 +190,7 @@ export default function ProfitAnalyticsChart({ timeRange, dateRange, hideNumbers
   }
 
   const profitDirection = data.summary.totalProfit >= 0;
-  
+
   // Fallback for backwards compatibility
   const revenueFromTracked = data.summary.revenueFromTrackedProducts || data.summary.totalRevenue || 0;
   const totalRevenue = data.summary.totalRevenue || 0;
@@ -237,9 +239,8 @@ export default function ProfitAnalyticsChart({ timeRange, dateRange, hideNumbers
             <CardTitle className="text-sm font-medium">Total Profit</CardTitle>
           </CardHeader>
           <CardContent>
-            <div className={`text-2xl font-bold flex items-center gap-2 ${
-              profitDirection ? 'text-green-600' : 'text-red-600'
-            }`}>
+            <div className={`text-2xl font-bold flex items-center gap-2 ${profitDirection ? 'text-green-600' : 'text-red-600'
+              }`}>
               {profitDirection ? (
                 <TrendingUp className="h-5 w-5" />
               ) : (
@@ -286,7 +287,7 @@ export default function ProfitAnalyticsChart({ timeRange, dateRange, hideNumbers
             </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.summary.costDataCoverage || 0}%` }}
                 />
@@ -307,7 +308,7 @@ export default function ProfitAnalyticsChart({ timeRange, dateRange, hideNumbers
             Most Profitable Products
           </CardTitle>
           <CardDescription>
-            {dateRange 
+            {dateRange
               ? `Products generating the highest total profit (${new Date(dateRange.from).toLocaleDateString()} - ${new Date(dateRange.to).toLocaleDateString()})`
               : `Products generating the highest total profit (last ${timeRange || '30'} days)`
             }
@@ -323,24 +324,43 @@ export default function ProfitAnalyticsChart({ timeRange, dateRange, hideNumbers
             <div className="space-y-4">
               {data.topProfitableProducts.map((product, index) => {
                 const profitPositive = product.totalProfit >= 0;
-                
+
                 return (
                   <div
                     key={product.productId}
-                    className="flex items-center justify-between p-4 border rounded-lg"
+                    className="flex items-center justify-between p-4 border rounded-lg transition-colors hover:bg-muted/30"
                   >
-                    <div className="flex items-center gap-3">
-                      <div className="flex items-center justify-center w-8 h-8 rounded-full bg-primary/10 text-primary font-semibold text-sm">
-                        {index + 1}
+                    <div className="flex items-center gap-4">
+                      <div className="relative flex-shrink-0">
+                        <div className="w-12 h-12 rounded-full overflow-hidden border-2 border-background shadow-sm bg-muted flex items-center justify-center">
+                          {product.image && !imageErrors[product.productId] ? (
+                            <img
+                              src={`/api/products/${product.productId}/image`}
+                              alt={product.productName}
+                              className="w-full h-full object-cover"
+                              onError={() => {
+                                setImageErrors(prev => ({ ...prev, [product.productId]: true }));
+                              }}
+                            />
+                          ) : (
+                            <div className="flex items-center justify-center w-full h-full bg-primary/10 text-primary font-bold text-lg">
+                              {product.productName.charAt(0)}
+                            </div>
+                          )}
+                        </div>
+                        <div className="absolute -top-1 -left-1 w-5 h-5 bg-primary text-[10px] text-primary-foreground flex items-center justify-center rounded-full font-bold border-2 border-background shadow-sm">
+                          {index + 1}
+                        </div>
                       </div>
                       <div>
-                        <p className="font-medium">{product.productName}</p>
-                        <p className="text-sm text-muted-foreground">
+                        <p className="font-semibold">{product.productName}</p>
+                        <p className="text-sm text-muted-foreground flex items-center gap-1">
+                          <Package className="h-3 w-3" />
                           {product.totalQuantitySold} units sold
                         </p>
                       </div>
                     </div>
-                    
+
                     <div className="text-right">
                       <div className={`font-medium ${profitPositive ? 'text-green-600' : 'text-red-600'}`}>
                         {maskValue(formatGBP(product.totalProfit))}
@@ -359,3 +379,5 @@ export default function ProfitAnalyticsChart({ timeRange, dateRange, hideNumbers
     </div>
   );
 }
+
+

components/analytics/RevenueChart.tsx

@@ -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';
 
@@ -175,7 +175,7 @@ export default function RevenueChart({ timeRange, hideNumbers = false }: Revenue
         <div className="space-y-6">
           {/* Chart */}
           <div className="h-64">
-            <ResponsiveContainer width="100%" height="100%">
+            <ResponsiveContainer key={timeRange} width="100%" height="100%">
               <AreaChart data={chartData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
                 <defs>
                   <linearGradient id="colorRevenue" x1="0" y1="0" x2="0" y2="1">
@@ -208,6 +208,7 @@ export default function RevenueChart({ timeRange, hideNumbers = false }: Revenue
                   fillOpacity={1}
                   fill="url(#colorRevenue)"
                   strokeWidth={2}
+                  activeDot={{ r: 4, strokeWidth: 0 }}
                 />
               </AreaChart>
             </ResponsiveContainer>
@@ -238,4 +239,5 @@ export default function RevenueChart({ timeRange, hideNumbers = false }: Revenue
       </CardContent>
     </Card>
   );
-} 
+} 
+

components/analytics/SkeletonLoaders.tsx

@@ -1,20 +1,24 @@
-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";
+
+import { cn } from "@/lib/utils";
 
 // Chart skeleton for revenue trends and order analytics
-export function ChartSkeleton({ 
-  title, 
-  description, 
+export function ChartSkeleton({
+  title,
+  description,
   icon: Icon,
-  showStats = false 
-}: { 
-  title: string; 
-  description: string; 
+  showStats = false,
+  className,
+}: {
+  title: string;
+  description: string;
   icon: any;
   showStats?: boolean;
+  className?: string;
 }) {
   return (
-    <Card>
+    <Card className={cn(className)}>
       <CardHeader>
         <CardTitle className="flex items-center gap-2">
           <Icon className="h-5 w-5" />
@@ -26,7 +30,7 @@ export function ChartSkeleton({
         <div className="space-y-6">
           {/* Chart area */}
           <div className="h-64 bg-muted/20 rounded-md animate-pulse" />
-          
+
           {/* Summary stats if applicable */}
           {showStats && (
             <div className="grid grid-cols-3 gap-4 pt-4 border-t">
@@ -45,15 +49,15 @@ export function ChartSkeleton({
 }
 
 // Table skeleton for product performance
-export function TableSkeleton({ 
-  title, 
-  description, 
+export function TableSkeleton({
+  title,
+  description,
   icon: Icon,
   rows = 5,
   columns = 5
-}: { 
-  title: string; 
-  description: string; 
+}: {
+  title: string;
+  description: string;
   icon: any;
   rows?: number;
   columns?: number;
@@ -75,7 +79,7 @@ export function TableSkeleton({
               <Skeleton key={i} className="h-4 w-full" />
             ))}
           </div>
-          
+
           {/* Table rows */}
           {[...Array(rows)].map((_, rowIndex) => (
             <div key={rowIndex} className="grid gap-4" style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>
@@ -96,13 +100,13 @@ export function TableSkeleton({
 }
 
 // Customer insights skeleton with segments
-export function CustomerInsightsSkeleton({ 
-  title, 
-  description, 
-  icon: Icon 
-}: { 
-  title: string; 
-  description: string; 
+export function CustomerInsightsSkeleton({
+  title,
+  description,
+  icon: Icon
+}: {
+  title: string;
+  description: string;
   icon: any;
 }) {
   return (
@@ -125,7 +129,7 @@ export function CustomerInsightsSkeleton({
               </div>
             ))}
           </div>
-          
+
           {/* Top customers table */}
           <div className="space-y-4">
             <Skeleton className="h-6 w-32" />
@@ -167,4 +171,4 @@ export function MetricsCardSkeleton() {
       </CardContent>
     </Card>
   );
-} 
+} 

components/analytics/StoreSelector.tsx

@@ -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>
   );
-} 
+} 
+

components/animated-stats-section.tsx

@@ -20,12 +20,12 @@ export function AnimatedStatsSection({ stats }: AnimatedStatsProps) {
   return (
     <div className="mx-auto grid max-w-5xl grid-cols-1 gap-6 md:grid-cols-3">
       <div className="group relative overflow-hidden flex flex-col items-center text-center rounded-xl bg-gradient-to-b from-zinc-900/50 to-black border border-[#1C1C1C] p-6">
-        <div className="absolute inset-0 bg-[#D53F8C]/5 opacity-0 group-hover:opacity-100 transition-opacity" />
+        <div className="absolute inset-0 bg-indigo-500/5 opacity-0 group-hover:opacity-100 transition-opacity" />
         <div className="relative flex flex-col items-center">
-          <Package className="h-6 w-6 text-[#D53F8C]" />
+          <Package className="h-6 w-6 text-indigo-500" />
           <div className="mt-4 text-3xl font-bold text-white">
-            <AnimatedCounter 
-              value={stats.orders.completed} 
+            <AnimatedCounter
+              value={stats.orders.completed}
               duration={2000}
               suffix="+"
             />
@@ -38,14 +38,14 @@ export function AnimatedStatsSection({ stats }: AnimatedStatsProps) {
           </p>
         </div>
       </div>
-      
+
       <div className="group relative overflow-hidden flex flex-col items-center text-center rounded-xl bg-gradient-to-b from-zinc-900/50 to-black border border-[#1C1C1C] p-6">
-        <div className="absolute inset-0 bg-[#D53F8C]/5 opacity-0 group-hover:opacity-100 transition-opacity" />
+        <div className="absolute inset-0 bg-indigo-500/5 opacity-0 group-hover:opacity-100 transition-opacity" />
         <div className="relative flex flex-col items-center">
-          <Users className="h-6 w-6 text-[#D53F8C]" />
+          <Users className="h-6 w-6 text-indigo-500" />
           <div className="mt-4 text-3xl font-bold text-white">
-            <AnimatedCounter 
-              value={stats.vendors.total} 
+            <AnimatedCounter
+              value={stats.vendors.total}
               duration={2000}
               suffix="+"
             />
@@ -58,14 +58,14 @@ export function AnimatedStatsSection({ stats }: AnimatedStatsProps) {
           </p>
         </div>
       </div>
-      
+
       <div className="group relative overflow-hidden flex flex-col items-center text-center rounded-xl bg-gradient-to-b from-zinc-900/50 to-black border border-[#1C1C1C] p-6">
-        <div className="absolute inset-0 bg-[#D53F8C]/5 opacity-0 group-hover:opacity-100 transition-opacity" />
+        <div className="absolute inset-0 bg-indigo-500/5 opacity-0 group-hover:opacity-100 transition-opacity" />
         <div className="relative flex flex-col items-center">
-          <CreditCard className="h-6 w-6 text-[#D53F8C]" />
+          <CreditCard className="h-6 w-6 text-indigo-500" />
           <div className="mt-4 text-3xl font-bold text-white">
-            <AnimatedCounter 
-              value={stats.transactions.volume} 
+            <AnimatedCounter
+              value={stats.transactions.volume}
               duration={2500}
               formatter={formatCurrency}
             />
@@ -80,4 +80,4 @@ export function AnimatedStatsSection({ stats }: AnimatedStatsProps) {
       </div>
     </div>
   );
-} 
+} 

components/common/alert-dialog.tsx

@@ -4,7 +4,7 @@ import * as React from "react"
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
 
 import { cn } from "@/lib/utils/styles";
-import { buttonVariants } from "@/components/ui/button"
+import { buttonVariants } from "@/components/common/button"
 
 const AlertDialog = AlertDialogPrimitive.Root
 
@@ -139,3 +139,4 @@ export {
   AlertDialogAction,
   AlertDialogCancel,
 }
+

components/common/calendar.tsx

@@ -5,7 +5,7 @@ import { ChevronLeft, ChevronRight } from "lucide-react"
 import { DayPicker } from "react-day-picker"
 
 import { cn } from "@/lib/utils/styles";
-import { buttonVariants } from "@/components/ui/button"
+import { buttonVariants } from "@/components/common/button"
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>
 
@@ -64,3 +64,4 @@ function Calendar({
 Calendar.displayName = "Calendar"
 
 export { Calendar }
+

components/common/carousel.tsx

@@ -7,7 +7,7 @@ import useEmblaCarousel, {
 import { ArrowLeft, ArrowRight } from "lucide-react"
 
 import { cn } from "@/lib/utils/styles";
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/common/button"
 
 type CarouselApi = UseEmblaCarouselType[1]
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
@@ -260,3 +260,4 @@ export {
   CarouselPrevious,
   CarouselNext,
 }
+

components/common/command.tsx

@@ -6,7 +6,7 @@ import { Command as CommandPrimitive } from "cmdk"
 import { Search } from "lucide-react"
 
 import { cn } from "@/lib/utils/styles";
-import { Dialog, DialogContent } from "@/components/ui/dialog"
+import { Dialog, DialogContent } from "@/components/common/dialog"
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
@@ -15,7 +15,7 @@ const Command = React.forwardRef<
   <CommandPrimitive
     ref={ref}
     className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      "flex h-full w-full flex-col overflow-hidden bg-transparent text-popover-foreground",
       className
     )}
     {...props}
@@ -26,8 +26,8 @@ Command.displayName = CommandPrimitive.displayName
 const CommandDialog = ({ children, ...props }: DialogProps) => {
   return (
     <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0 shadow-lg">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+      <DialogContent className="overflow-hidden p-0 shadow-2xl border-white/5 bg-[#0a0a0a]/80 backdrop-blur-2xl sm:max-w-[600px] [&_button[data-radix-collection-item]]:hidden [&_button[class*='absolute']]:hidden">
+        <Command className="[&_[cmdk-group-heading]]:px-4 [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-primary/50 [&_[cmdk-group-heading]]:text-[10px] [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-widest [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-14 [&_[cmdk-item]]:px-3 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
       </DialogContent>
@@ -39,12 +39,12 @@ const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+  <div className="flex items-center border-b border-white/5 px-4 bg-white/5" cmdk-input-wrapper="">
+    <Search className="mr-3 h-5 w-5 shrink-0 text-primary opacity-70" />
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-14 w-full rounded-none bg-transparent py-4 text-base outline-none placeholder:text-muted-foreground/50 disabled:cursor-not-allowed disabled:opacity-50 border-none ring-0 focus:ring-0 focus:outline-none",
         className
       )}
       {...props}
@@ -60,7 +60,7 @@ const CommandList = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.List
     ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent", className)}
     {...props}
   />
 ))
@@ -115,7 +115,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      "relative flex cursor-default gap-2 select-none items-center rounded-lg px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-primary/20 data-[selected=true]:text-primary data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 transition-colors duration-200",
       className
     )}
     {...props}
@@ -151,3 +151,4 @@ export {
   CommandShortcut,
   CommandSeparator,
 }
+

components/common/date-picker.tsx

@@ -6,17 +6,17 @@ import { Calendar as CalendarIcon, ChevronLeft, ChevronRight, X } from "lucide-r
 import { DateRange } from "react-day-picker"
 
 import { cn } from "@/lib/utils/styles"
-import { Button } from "@/components/ui/button"
-import { Calendar } from "@/components/ui/calendar"
+import { Button } from "@/components/common/button"
+import { Calendar } from "@/components/common/calendar"
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/components/ui/popover"
-import { Badge } from "@/components/ui/badge"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+} from "@/components/common/popover"
+import { Badge } from "@/components/common/badge"
+import { Input } from "@/components/common/input"
+import { Label } from "@/components/common/label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/common/select"
 
 interface DatePickerProps {
   date?: Date
@@ -410,4 +410,4 @@ export function DateRangeDisplay({ dateRange }: { dateRange?: DateRange }) {
       </span>
     </div>
   )
-} 
+} 

components/common/empty-state.tsx

@@ -0,0 +1,139 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/components/common/button"
+import {
+    Package,
+    ShoppingBag,
+    Users,
+    Truck,
+    MessageCircle,
+    Plus,
+    Share2,
+    LucideIcon
+} from "lucide-react"
+import Link from "next/link"
+
+interface EmptyStateProps {
+    icon?: LucideIcon
+    title: string
+    description: string
+    actionLabel?: string
+    actionHref?: string
+    actionOnClick?: () => void
+    secondaryActionLabel?: string
+    secondaryActionHref?: string
+    className?: string
+}
+
+/**
+ * EmptyState - Reusable component for empty tables/lists
+ * Shows an icon, title, description, and optional action button
+ */
+export function EmptyState({
+    icon: Icon = Package,
+    title,
+    description,
+    actionLabel,
+    actionHref,
+    actionOnClick,
+    secondaryActionLabel,
+    secondaryActionHref,
+    className = ""
+}: EmptyStateProps) {
+    return (
+        <div className={`flex flex-col items-center justify-center py-12 px-4 text-center ${className}`}>
+            <div className="h-16 w-16 rounded-full bg-muted/50 flex items-center justify-center mb-4">
+                <Icon className="h-8 w-8 text-muted-foreground/50" />
+            </div>
+            <h3 className="text-lg font-medium mb-2">{title}</h3>
+            <p className="text-sm text-muted-foreground max-w-sm mb-6">{description}</p>
+            <div className="flex items-center gap-3">
+                {actionLabel && (
+                    actionHref ? (
+                        <Button asChild>
+                            <Link href={actionHref}>
+                                <Plus className="h-4 w-4 mr-2" />
+                                {actionLabel}
+                            </Link>
+                        </Button>
+                    ) : actionOnClick ? (
+                        <Button onClick={actionOnClick}>
+                            <Plus className="h-4 w-4 mr-2" />
+                            {actionLabel}
+                        </Button>
+                    ) : null
+                )}
+                {secondaryActionLabel && secondaryActionHref && (
+                    <Button variant="outline" asChild>
+                        <Link href={secondaryActionHref}>
+                            <Share2 className="h-4 w-4 mr-2" />
+                            {secondaryActionLabel}
+                        </Link>
+                    </Button>
+                )}
+            </div>
+        </div>
+    )
+}
+
+// Preset empty states for common scenarios
+export function OrdersEmptyState() {
+    return (
+        <EmptyState
+            icon={ShoppingBag}
+            title="No orders yet"
+            description="When customers place orders, they'll appear here. Share your store link to start selling!"
+            secondaryActionLabel="Share Store"
+            secondaryActionHref="/dashboard/storefront"
+        />
+    )
+}
+
+export function ProductsEmptyState({ onAddProduct }: { onAddProduct?: () => void }) {
+    return (
+        <EmptyState
+            icon={Package}
+            title="No products yet"
+            description="Add your first product to start selling. You can add products manually or import from a file."
+            actionLabel="Add Product"
+            actionOnClick={onAddProduct}
+            actionHref={onAddProduct ? undefined : "/dashboard/products/add"}
+        />
+    )
+}
+
+export function CustomersEmptyState() {
+    return (
+        <EmptyState
+            icon={Users}
+            title="No customers yet"
+            description="Once customers interact with your store, they'll appear here. Share your store link to attract customers!"
+            secondaryActionLabel="Share Store"
+            secondaryActionHref="/dashboard/storefront"
+        />
+    )
+}
+
+export function ShippingEmptyState({ onAddMethod }: { onAddMethod?: () => void }) {
+    return (
+        <EmptyState
+            icon={Truck}
+            title="No shipping methods"
+            description="Add shipping methods so customers know how they'll receive their orders."
+            actionLabel="Add Shipping Method"
+            actionOnClick={onAddMethod}
+        />
+    )
+}
+
+export function ChatsEmptyState() {
+    return (
+        <EmptyState
+            icon={MessageCircle}
+            title="No conversations yet"
+            description="Customer chats will appear here when they message you through Telegram."
+        />
+    )
+}
+

components/common/form.tsx

@@ -13,7 +13,7 @@ import {
 } from "react-hook-form"
 
 import { cn } from "@/lib/utils/styles";
-import { Label } from "@/components/ui/label"
+import { Label } from "@/components/common/label"
 
 const Form = FormProvider
 
@@ -176,3 +176,4 @@ export {
   FormMessage,
   FormField,
 }
+

components/common/pagination.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
 
 import { cn } from "@/lib/utils/styles";
-import { ButtonProps, buttonVariants } from "@/components/ui/button"
+import { ButtonProps, buttonVariants } from "@/components/common/button"
 
 const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
   <nav
@@ -115,3 +115,4 @@ export {
   PaginationNext,
   PaginationPrevious,
 }
+

components/common/relative-time.tsx

@@ -0,0 +1,115 @@
+"use client"
+
+import * as React from "react"
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger,
+} from "@/components/common/tooltip"
+import { format, formatDistanceToNow, isToday, isYesterday, differenceInMinutes } from "date-fns"
+
+interface RelativeTimeProps {
+    date: Date | string | null | undefined
+    className?: string
+    showTooltip?: boolean
+    updateInterval?: number // ms, for auto-updating recent times
+}
+
+/**
+ * RelativeTime - Displays time as "2 hours ago" with full date on hover
+ * Auto-updates for times less than 1 hour old
+ */
+export function RelativeTime({
+    date,
+    className = "",
+    showTooltip = true,
+    updateInterval = 60000 // Update every minute
+}: RelativeTimeProps) {
+    const [, forceUpdate] = React.useReducer(x => x + 1, 0)
+
+    const parsedDate = React.useMemo(() => {
+        if (!date) return null
+        return typeof date === "string" ? new Date(date) : date
+    }, [date])
+
+    // Auto-update for recent times
+    React.useEffect(() => {
+        if (!parsedDate) return
+
+        const minutesAgo = differenceInMinutes(new Date(), parsedDate)
+
+        // Only auto-update if within the last hour
+        if (minutesAgo < 60) {
+            const interval = setInterval(forceUpdate, updateInterval)
+            return () => clearInterval(interval)
+        }
+    }, [parsedDate, updateInterval])
+
+    if (!parsedDate || isNaN(parsedDate.getTime())) {
+        return <span className={className}>-</span>
+    }
+
+    const formatRelative = (d: Date): string => {
+        const now = new Date()
+        const minutesAgo = differenceInMinutes(now, d)
+
+        // Just now (< 1 minute)
+        if (minutesAgo < 1) return "Just now"
+
+        // Minutes ago (< 60 minutes)
+        if (minutesAgo < 60) return `${minutesAgo}m ago`
+
+        // Hours ago (< 24 hours and today)
+        if (isToday(d)) {
+            const hoursAgo = Math.floor(minutesAgo / 60)
+            return `${hoursAgo}h ago`
+        }
+
+        // Yesterday
+        if (isYesterday(d)) return "Yesterday"
+
+        // Use formatDistanceToNow for older dates
+        return formatDistanceToNow(d, { addSuffix: true })
+    }
+
+    const fullDate = format(parsedDate, "dd MMM yyyy, HH:mm")
+    const relativeText = formatRelative(parsedDate)
+
+    if (!showTooltip) {
+        return <span className={className}>{relativeText}</span>
+    }
+
+    return (
+        <TooltipProvider>
+            <Tooltip delayDuration={300}>
+                <TooltipTrigger asChild>
+                    <span className={`cursor-default ${className}`}>{relativeText}</span>
+                </TooltipTrigger>
+                <TooltipContent side="top" className="text-xs">
+                    {fullDate}
+                </TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
+    )
+}
+
+/**
+ * Utility function to get relative time string without component
+ */
+export function getRelativeTimeString(date: Date | string | null | undefined): string {
+    if (!date) return "-"
+    const d = typeof date === "string" ? new Date(date) : date
+    if (isNaN(d.getTime())) return "-"
+
+    const now = new Date()
+    const minutesAgo = differenceInMinutes(now, d)
+
+    if (minutesAgo < 1) return "Just now"
+    if (minutesAgo < 60) return `${minutesAgo}m ago`
+    if (isToday(d)) return `${Math.floor(minutesAgo / 60)}h ago`
+    if (isYesterday(d)) return "Yesterday"
+
+    return formatDistanceToNow(d, { addSuffix: true })
+}
+

components/common/sidebar.tsx

@@ -5,19 +5,19 @@ import { Slot } from "@radix-ui/react-slot"
 import { VariantProps, cva } from "class-variance-authority"
 import { PanelLeft } from "lucide-react"
 
-import { useIsMobile } from "@/hooks/use-mobile"
+import { useIsMobile } from "@/lib/hooks/use-mobile"
 import { cn } from "@/lib/utils/styles";
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Separator } from "@/components/ui/separator"
-import { Sheet, SheetContent } from "@/components/ui/sheet"
-import { Skeleton } from "@/components/ui/skeleton"
+import { Button } from "@/components/common/button"
+import { Input } from "@/components/common/input"
+import { Separator } from "@/components/common/separator"
+import { Sheet, SheetContent } from "@/components/common/sheet"
+import { Skeleton } from "@/components/common/skeleton"
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "@/components/ui/tooltip"
+} from "@/components/common/tooltip"
 
 const SIDEBAR_COOKIE_NAME = "sidebar:state"
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
@@ -761,3 +761,5 @@ export {
   SidebarTrigger,
   useSidebar,
 }
+
+