Remove gradient text styles from analytics UI

Replaces gradient text styles with solid color classes in AdminAnalytics and updates the .text-gradient utility in globals.css. This simplifies the visual style for headings and revenue display.

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";

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;
@@ -446,3 +446,4 @@ export default function AdminBanPage() {
     </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">
+          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
@@ -403,11 +403,12 @@ export default function AdminPage() {
       </div>
 
       <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
-        <TabsList>
+        <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>
@@ -415,6 +416,7 @@ export default function AdminPage() {
             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>
@@ -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>
@@ -71,112 +74,174 @@ export default async function AdminStatusPage() {
     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">
+          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,15 @@
 "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 { 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-client";
-import { useToast } from "@/hooks/use-toast";
+import { fetchClient } from "@/lib/api/api-client";
+import { useToast } from "@/lib/hooks/use-toast";
 import { motion, AnimatePresence } from "framer-motion";
 
 interface TelegramUser {
@@ -50,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);
@@ -198,20 +206,14 @@ export default function AdminUsersPage() {
                 <AnimatePresence mode="popLayout">
                   {loading ? (
                     <TableRow>
-                      <TableCell colSpan={8} 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 users...</p>
+                      <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 ? (
-                    <TableRow>
-                      <TableCell colSpan={8} className="h-32 text-center text-muted-foreground">
-                        {searchQuery ? "No users found matching your search" : "No users found"}
-                      </TableCell>
-                    </TableRow>
-                  ) : (
+                  ) : users.length > 0 ? (
                     users.map((user, index) => (
                       <motion.tr
                         key={user.telegramUserId}
@@ -219,84 +221,75 @@ export default function AdminUsersPage() {
                         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"
+                        className={`group border-b border-border/50 transition-colors ${user.isBlocked ? "bg-destructive/5 hover:bg-destructive/10" : "hover:bg-muted/40"}`}
                       >
-                        <TableCell>
-                          <div className="font-mono text-xs text-muted-foreground/80">{user.telegramUserId}</div>
-                        </TableCell>
-                        <TableCell>
-                          <div className="font-medium flex items-center gap-2">
-                            {user.telegramUsername !== "Unknown" ? (
-                              <>
-                                <span className="text-blue-500/80">@</span>
-                                {user.telegramUsername}
-                              </>
-                            ) : (
-                              <span className="text-muted-foreground italic">Unknown</span>
-                            )}
-                          </div>
-                        </TableCell>
+                        <TableCell className="font-mono text-xs">{user.telegramUserId}</TableCell>
                         <TableCell>
                           <div className="flex items-center gap-2">
-                            <span className="font-medium">{user.totalOrders}</span>
-                            {user.completedOrders > 0 && (
-                              <Badge variant="outline" className="text-[10px] h-5 px-1.5 bg-green-500/10 text-green-600 border-green-200 dark:border-green-900">
-                                {user.completedOrders} done
-                              </Badge>
+                            <span className="font-medium">@{user.telegramUsername || "Unknown"}</span>
+                            {user.isBlocked && (
+                              <Badge variant="destructive" className="h-5 px-1.5 text-[10px]">Blocked</Badge>
                             )}
                           </div>
                         </TableCell>
+                        <TableCell>{user.totalOrders}</TableCell>
+                        <TableCell>{formatCurrency(user.totalSpent)}</TableCell>
                         <TableCell>
-                          <span className="font-medium tabular-nums">{formatCurrency(user.totalSpent)}</span>
+                          <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>
-                          {user.isBlocked ? (
-                            <TooltipProvider>
-                              <Tooltip>
-                                <TooltipTrigger asChild>
-                                  <Badge variant="destructive" className="items-center gap-1">
-                                    <Ban className="h-3 w-3" />
-                                    Blocked
-                                  </Badge>
-                                </TooltipTrigger>
-                                {user.blockedReason && (
-                                  <TooltipContent>
-                                    <p className="max-w-xs">{user.blockedReason}</p>
-                                  </TooltipContent>
-                                )}
-                              </Tooltip>
-                            </TooltipProvider>
-                          ) : user.totalOrders > 0 ? (
-                            <Badge variant="default" className="bg-green-600 hover:bg-green-700">Active</Badge>
-                          ) : (
-                            <Badge variant="secondary">No Orders</Badge>
-                          )}
+                        <TableCell className="text-xs text-muted-foreground">
+                          {user.firstOrderDate ? new Date(user.firstOrderDate).toLocaleDateString() : "-"}
                         </TableCell>
-                        <TableCell className="text-sm text-muted-foreground">
-                          {user.firstOrderDate
-                            ? new Date(user.firstOrderDate).toLocaleDateString()
-                            : '-'}
-                        </TableCell>
-                        <TableCell className="text-sm text-muted-foreground">
-                          {user.lastOrderDate
-                            ? new Date(user.lastOrderDate).toLocaleDateString()
-                            : '-'}
+                        <TableCell className="text-xs text-muted-foreground">
+                          {user.lastOrderDate ? new Date(user.lastOrderDate).toLocaleDateString() : "-"}
                         </TableCell>
                         <TableCell className="text-right">
-                          <div className="flex items-center justify-end gap-1">
-                            {!user.isBlocked ? (
-                              <Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10">
-                                <Ban className="h-4 w-4" />
-                              </Button>
+                          <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>
                             ) : (
-                              <Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-green-600 hover:bg-green-500/10">
-                                <UserCheck className="h-4 w-4" />
-                              </Button>
+                              <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>
@@ -335,3 +328,5 @@ export default function AdminUsersPage() {
     </div>
   );
 }
+
+

app/dashboard/admin/vendors/page.tsx

@@ -1,15 +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, Store, Shield, ShieldAlert, Clock, Calendar } 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;
@@ -38,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 {
@@ -173,8 +247,8 @@ export default function AdminVendorsPage() {
                 </TableRow>
               </TableHeader>
               <TableBody>
-                <AnimatePresence mode="popLayout">
-                  {loading ? (
+                {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">
@@ -195,7 +269,6 @@ export default function AdminVendorsPage() {
                         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"
                       >
@@ -209,9 +282,29 @@ export default function AdminVendorsPage() {
                         </TableCell>
                         <TableCell>
                           {vendor.storeId ? (
-                            <span className="font-mono text-xs">{vendor.storeId}</span>
+                            <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>
                           ) : (
-                            <span className="text-muted-foreground italic text-xs">No store</span>
+                            <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>
@@ -243,22 +336,173 @@ export default function AdminVendorsPage() {
                           </div>
                         </TableCell>
                         <TableCell className="text-right">
-                          <div className="flex items-center justify-end space-x-1">
-                            <Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-primary">
-                              <UserCheck className="h-4 w-4" />
-                            </Button>
-                            <Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10">
-                              <UserX className="h-4 w-4" />
-                            </Button>
-                            <Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground">
-                              <MoreHorizontal className="h-4 w-4" />
-                            </Button>
-                          </div>
+                          <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>
+                  )
+                ) : (
+                  <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>
@@ -291,6 +535,41 @@ export default function AdminVendorsPage() {
           )}
         </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";
 

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';
@@ -103,7 +103,7 @@ export default async function AnalyticsPage({
 
     // 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

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,10 @@ 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, CardDescription } 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
@@ -263,10 +263,10 @@ export default function CategoriesPage() {
       >
         <div
           ref={ref}
-          className={`group flex items-center p-2 rounded-md transition-all duration-200 border border-transparent
-            ${isEditing ? 'bg-muted/50 border-primary/20' : ''}
-            ${isOver ? 'bg-muted border-primary/20' : 'hover:bg-muted/50 hover:border-border/50'}
-            ${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}
         >
@@ -384,51 +384,53 @@ export default function CategoriesPage() {
 
         <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-border/40 bg-background/50 backdrop-blur-sm shadow-sm h-fit sticky top-6">
-            <CardHeader className="bg-muted/20 border-b border-border/40 pb-4">
-              <CardTitle className="text-lg font-medium flex items-center">
-                <Plus className="mr-2 h-4 w-4 text-primary" />
+          <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>
+              <CardDescription className="text-zinc-400">
                 Create a new category or subcategory
               </CardDescription>
             </CardHeader>
             <CardContent className="pt-6">
               <div className="space-y-4">
                 <div className="space-y-2">
-                  <label className="text-sm font-medium leading-none">
+                  <label className="text-sm font-medium leading-none text-zinc-300">
                     Category Name
                   </label>
                   <Input
                     value={newCategoryName}
                     onChange={(e) => setNewCategoryName(e.target.value)}
                     placeholder="e.g. Electronics, Clothing..."
-                    className="h-10 border-border/50 bg-background/50 focus:bg-background transition-colors"
+                    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">
+                  <label className="text-sm font-medium leading-none text-zinc-300">
                     Parent Category
                   </label>
                   <Select
                     value={selectedParentId || "none"}
                     onValueChange={setSelectedParentId}
                   >
-                    <SelectTrigger className="h-10 border-border/50 bg-background/50 focus:bg-background transition-colors">
+                    <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 mt-2" size="lg">
+                <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>
@@ -437,14 +439,14 @@ export default function CategoriesPage() {
           </Card>
 
           {/* Category List Card */}
-          <Card className="lg:col-span-3 border-border/40 bg-background/50 backdrop-blur-sm shadow-sm">
-            <CardHeader className="bg-muted/20 border-b border-border/40 pb-4">
-              <CardTitle className="text-lg font-medium">Structure</CardTitle>
-              <CardDescription>
+          <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 className="pt-6">
+            <CardContent className="p-0">
               <DndProvider backend={HTML5Backend}>
                 <div className="space-y-2 min-h-[300px]">
                   {loading ? (
@@ -493,3 +495,4 @@ export default function CategoriesPage() {
     </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 = {

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 {
@@ -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">

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 {
@@ -247,6 +249,26 @@ 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
@@ -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";

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,9 @@ 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";
 

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 {
@@ -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">

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
@@ -183,3 +183,4 @@ export default async function DashboardPage() {
     </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) => {
@@ -156,16 +156,6 @@ export default function ProductsPage() {
 
   // 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);
@@ -194,7 +184,7 @@ export default function ProductsPage() {
     };
 
     fetchDataAsync();
-  }, [router]);
+  }, []);
 
   const handleAddTier = () => {
     setProductData((prev) => ({
@@ -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) => {
@@ -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
         );

app/dashboard/stock/page.tsx

@@ -3,12 +3,12 @@
 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 { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
+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,
@@ -16,12 +16,12 @@ import {
   DropdownMenuTrigger,
   DropdownMenuLabel,
   DropdownMenuSeparator
-} from "@/components/ui/dropdown-menu";
+} from "@/components/common/dropdown-menu";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/components/ui/popover";
+} from "@/components/common/popover";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -32,12 +32,12 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
   AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
-import { Product } from "@/models/products";
+} 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";
@@ -72,16 +72,6 @@ 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');
@@ -105,7 +95,7 @@ export default function StockManagementPage() {
     };
 
     fetchDataAsync();
-  }, [router]);
+  }, []);
 
   const handleEditStock = (productId: string) => {
     setEditingStock({
@@ -688,3 +678,4 @@ export default function StockManagementPage() {
     </Layout>
   );
 } 
+

app/dashboard/storefront/customers/page.tsx

@@ -2,7 +2,7 @@
 
 import React, { useEffect, useState, useCallback } from "react";
 import { getCustomers, type CustomerStats } from "@/lib/api";
-import { formatCurrency } from "@/utils/format";
+import { formatCurrency } from "@/lib/utils/format";
 import { useRouter } from "next/navigation";
 import { toast } from "sonner";
 import Layout from "@/components/layout/layout";
@@ -13,14 +13,14 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table";
+} from "@/components/common/table";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select";
+} from "@/components/common/select";
 import {
   Dialog,
   DialogContent,
@@ -28,8 +28,8 @@ import {
   DialogTitle,
   DialogDescription,
   DialogFooter,
-} from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
+} from "@/components/common/dialog";
+import { Button } from "@/components/common/button";
 import {
   ChevronLeft,
   ChevronRight,
@@ -43,23 +43,32 @@ import {
   X,
   CreditCard,
   Calendar,
-  ShoppingBag
+  ShoppingBag,
+  Truck,
+  CheckCircle,
 } from "lucide-react";
-import { Badge } from "@/components/ui/badge";
-import { Input } from "@/components/ui/input";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Badge } from "@/components/common/badge";
+import { Input } from "@/components/common/input";
+import { Skeleton } from "@/components/common/skeleton";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/common/card";
 import { motion, AnimatePresence } from "framer-motion";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
   DropdownMenuContent,
   DropdownMenuItem,
-} from "@/components/ui/dropdown-menu";
+} from "@/components/common/dropdown-menu";
 
 export default function CustomerManagementPage() {
   const router = useRouter();
   const [customers, setCustomers] = useState<CustomerStats[]>([]);
+  // State for browser detection
+  const [isFirefox, setIsFirefox] = useState(false);
+
+  useEffect(() => {
+    const ua = navigator.userAgent.toLowerCase();
+    setIsFirefox(ua.includes("firefox") && !ua.includes("chrome"));
+  }, []);
   const [filteredCustomers, setFilteredCustomers] = useState<CustomerStats[]>([]);
   const [searchQuery, setSearchQuery] = useState("");
   const [loading, setLoading] = useState(true);
@@ -117,16 +126,6 @@ export default function CustomerManagementPage() {
     fetchCustomers();
   }, [fetchCustomers]);
 
-  useEffect(() => {
-    const authToken = document.cookie
-      .split("; ")
-      .find((row) => row.startsWith("Authorization="))
-      ?.split("=")[1];
-
-    if (!authToken) {
-      router.push("/login");
-    }
-  }, [router]);
 
   // Add filter function to filter customers when search query changes
   useEffect(() => {
@@ -336,13 +335,12 @@ export default function CustomerManagementPage() {
                     </TableRow>
                   </TableHeader>
                   <TableBody>
-                    <AnimatePresence mode="popLayout">
-                      {filteredCustomers.map((customer, index) => (
+                    {isFirefox ? (
+                      filteredCustomers.map((customer, index) => (
                         <motion.tr
                           key={customer.userId}
                           initial={{ opacity: 0, y: 10 }}
                           animate={{ opacity: 1, y: 0 }}
-                          exit={{ opacity: 0 }}
                           transition={{ duration: 0.2, delay: index * 0.03 }}
                           className={`cursor-pointer group hover:bg-muted/50 border-b border-border/50 transition-colors ${!customer.hasOrders ? "bg-primary/5 hover:bg-primary/10" : ""}`}
                           onClick={() => setSelectedCustomer(customer)}
@@ -409,8 +407,84 @@ export default function CustomerManagementPage() {
                             )}
                           </TableCell>
                         </motion.tr>
-                      ))}
-                    </AnimatePresence>
+                      ))
+                    ) : (
+                      <AnimatePresence mode="popLayout">
+                        {filteredCustomers.map((customer, index) => (
+                          <motion.tr
+                            key={customer.userId}
+                            initial={{ opacity: 0, y: 10 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            exit={{ opacity: 0 }}
+                            transition={{ duration: 0.2, delay: index * 0.03 }}
+                            className={`cursor-pointer group hover:bg-muted/50 border-b border-border/50 transition-colors ${!customer.hasOrders ? "bg-primary/5 hover:bg-primary/10" : ""}`}
+                            onClick={() => setSelectedCustomer(customer)}
+                          >
+                            <TableCell className="py-3">
+                              <div className="flex items-center gap-3">
+                                <div className={`h-9 w-9 rounded-full flex items-center justify-center text-xs font-medium ${!customer.hasOrders ? 'bg-primary/20 text-primary' : 'bg-muted text-muted-foreground'
+                                  }`}>
+                                  {customer.telegramUsername ? customer.telegramUsername.substring(0, 2).toUpperCase() : 'ID'}
+                                </div>
+                                <div>
+                                  <div className="font-medium flex items-center gap-2">
+                                    @{customer.telegramUsername || "Unknown"}
+                                    {!customer.hasOrders && (
+                                      <Badge variant="outline" className="h-5 px-1.5 text-[10px] bg-primary/10 text-primary border-primary/20">
+                                        New
+                                      </Badge>
+                                    )}
+                                  </div>
+                                  <div className="text-xs text-muted-foreground flex items-center font-mono mt-0.5">
+                                    <span className="opacity-50 select-none">ID:</span>
+                                    <span className="ml-1">{customer.telegramUserId}</span>
+                                  </div>
+                                </div>
+                              </div>
+                            </TableCell>
+                            <TableCell className="text-center">
+                              <Badge variant="secondary" className="font-mono font-normal">
+                                {customer.totalOrders}
+                              </Badge>
+                            </TableCell>
+                            <TableCell className="text-center font-mono text-sm">
+                              {formatCurrency(customer.totalSpent)}
+                            </TableCell>
+                            <TableCell className="text-center text-sm text-muted-foreground">
+                              {customer.lastOrderDate ? (
+                                <div className="flex items-center justify-center gap-1.5">
+                                  <Calendar className="h-3 w-3 opacity-70" />
+                                  {formatDate(customer.lastOrderDate).split(",")[0]}
+                                </div>
+                              ) : "Never"}
+                            </TableCell>
+                            <TableCell className="text-center">
+                              {customer.hasOrders ? (
+                                <div className="flex justify-center flex-wrap gap-1">
+                                  {customer.ordersByStatus.paid > 0 && (
+                                    <Badge className="bg-blue-500/15 text-blue-500 hover:bg-blue-500/25 border-blue-500/20 h-5 px-1.5 text-[10px]">
+                                      {customer.ordersByStatus.paid} Paid
+                                    </Badge>
+                                  )}
+                                  {customer.ordersByStatus.completed > 0 && (
+                                    <Badge className="bg-emerald-500/15 text-emerald-500 hover:bg-emerald-500/25 border-emerald-500/20 h-5 px-1.5 text-[10px]">
+                                      {customer.ordersByStatus.completed} Done
+                                    </Badge>
+                                  )}
+                                  {customer.ordersByStatus.shipped > 0 && (
+                                    <Badge className="bg-amber-500/15 text-amber-500 hover:bg-amber-500/25 border-amber-500/20 h-5 px-1.5 text-[10px]">
+                                      {customer.ordersByStatus.shipped} Ship
+                                    </Badge>
+                                  )}
+                                </div>
+                              ) : (
+                                <span className="text-xs text-muted-foreground italic">No activity</span>
+                              )}
+                            </TableCell>
+                          </motion.tr>
+                        ))}
+                      </AnimatePresence>
+                    )}
                   </TableBody>
                 </Table>
               </div>
@@ -469,118 +543,168 @@ export default function CustomerManagementPage() {
         </Card>
 
         {/* Customer Details Dialog */}
-        {selectedCustomer && (
-          <Dialog open={!!selectedCustomer} onOpenChange={(open) => !open && setSelectedCustomer(null)}>
-            <DialogContent className="max-w-[95vw] sm:max-w-2xl w-full overflow-y-auto max-h-[90vh] z-[80]">
-              <DialogHeader>
-                <DialogTitle className="text-base">
-                  Customer Details
-                </DialogTitle>
-              </DialogHeader>
-
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-8 py-4">
-                {/* Customer Information */}
-                <div>
-                  <div className="mb-4">
-                    <h3 className="text-sm font-medium mb-2">Customer Information</h3>
-                    <div className="space-y-3">
-                      <div className="flex justify-between items-center text-sm">
-                        <div className="text-muted-foreground">Username:</div>
-                        <div className="font-medium">@{selectedCustomer.telegramUsername || "Unknown"}</div>
-                      </div>
-                      <div className="flex justify-between items-center text-sm">
-                        <div className="text-muted-foreground">Telegram ID:</div>
-                        <div className="font-medium">{selectedCustomer.telegramUserId}</div>
-                      </div>
-                      <div className="flex justify-between items-center text-sm">
-                        <div className="text-muted-foreground">Chat ID:</div>
-                        <div className="font-medium">{selectedCustomer.chatId}</div>
+        <AnimatePresence>
+          {selectedCustomer && (
+            <Dialog open={!!selectedCustomer} onOpenChange={(open) => !open && setSelectedCustomer(null)}>
+              <DialogContent className="max-w-[95vw] sm:max-w-2xl w-full overflow-y-auto max-h-[90vh] z-[80]">
+                <DialogHeader>
+                  <DialogTitle className="text-lg flex items-center gap-3">
+                    <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold text-lg">
+                      {selectedCustomer.telegramUsername ? selectedCustomer.telegramUsername.substring(0, 1).toUpperCase() : 'U'}
+                    </div>
+                    <div>
+                      <div className="font-bold">Customer Details</div>
+                      <div className="text-sm font-normal text-muted-foreground flex items-center gap-2">
+                        @{selectedCustomer.telegramUsername || "Unknown"}
+                        <span className="w-1 h-1 rounded-full bg-primary" />
+                        <span className="font-mono text-xs opacity-70">ID: {selectedCustomer.telegramUserId}</span>
                       </div>
                     </div>
+                  </DialogTitle>
+                </DialogHeader>
+
+                <div className="p-6 space-y-6">
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    {/* Customer Information */}
+                    <motion.div
+                      initial={{ opacity: 0, y: 10 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      transition={{ delay: 0.1 }}
+                      className="space-y-4"
+                    >
+                      <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider pl-1">Contact Info</h3>
+                      <div className="rounded-xl border border-border p-4 space-y-4">
+                        <div className="space-y-3">
+                          <div className="flex justify-between items-center text-sm group">
+                            <div className="text-muted-foreground flex items-center gap-2">
+                              <Users className="h-4 w-4 opacity-50" />
+                              Username
+                            </div>
+                            <div className="font-medium group-hover:text-primary transition-colors">@{selectedCustomer.telegramUsername || "Unknown"}</div>
+                          </div>
+                          <div className="flex justify-between items-center text-sm group">
+                            <div className="text-muted-foreground flex items-center gap-2">
+                              <CreditCard className="h-4 w-4 opacity-50" />
+                              User ID
+                            </div>
+                            <div className="font-medium font-mono">{selectedCustomer.telegramUserId}</div>
+                          </div>
+                          <div className="flex justify-between items-center text-sm group">
+                            <div className="text-muted-foreground flex items-center gap-2">
+                              <MessageCircle className="h-4 w-4 opacity-50" />
+                              Chat ID
+                            </div>
+                            <div className="font-medium font-mono">{selectedCustomer.chatId}</div>
+                          </div>
+                        </div>
+
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          className="w-full"
+                          onClick={() => {
+                            window.open(`https://t.me/${selectedCustomer.telegramUsername || selectedCustomer.telegramUserId}`, '_blank');
+                          }}
+                        >
+                          <MessageCircle className="h-4 w-4 mr-2" />
+                          Open Telegram Chat
+                        </Button>
+                      </div>
+                    </motion.div>
+
+                    {/* Order Statistics */}
+                    <motion.div
+                      initial={{ opacity: 0, y: 10 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      transition={{ delay: 0.2 }}
+                      className="space-y-4"
+                    >
+                      <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider pl-1">Lifetime Stats</h3>
+                      <div className="rounded-xl border border-border p-4 space-y-4">
+                        <div className="grid grid-cols-2 gap-4">
+                          <div className="bg-emerald-500/10 rounded-lg p-3 border border-emerald-500/20 min-w-0">
+                            <div className="text-xs text-emerald-400/70 uppercase font-medium mb-1 whitespace-nowrap">Total Spent</div>
+                            <div className="text-xl font-bold text-emerald-400 truncate">{formatCurrency(selectedCustomer.totalSpent)}</div>
+                          </div>
+                          <div className="bg-blue-500/10 rounded-lg p-3 border border-blue-500/20 min-w-0">
+                            <div className="text-xs text-blue-400/70 uppercase font-medium mb-1 whitespace-nowrap">Total Orders</div>
+                            <div className="text-xl font-bold text-blue-400">{selectedCustomer.totalOrders}</div>
+                          </div>
+                        </div>
+
+                        <div className="space-y-2 pt-2 border-t border-white/5">
+                          <div className="flex justify-between items-center text-sm">
+                            <div className="text-muted-foreground text-xs">First Order</div>
+                            <div className="font-medium text-white/70 text-xs bg-white/5 px-2 py-1 rounded">
+                              {formatDate(selectedCustomer.firstOrderDate)}
+                            </div>
+                          </div>
+                          <div className="flex justify-between items-center text-sm">
+                            <div className="text-muted-foreground text-xs">Last Activity</div>
+                            <div className="font-medium text-white/70 text-xs bg-white/5 px-2 py-1 rounded">
+                              {formatDate(selectedCustomer.lastOrderDate)}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </motion.div>
                   </div>
 
+                  {/* Order Status Breakdown */}
+                  <motion.div
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: 0.3 }}
+                    className="space-y-4"
+                  >
+                    <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider pl-1">Order History Breakdown</h3>
+                    <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+                      <div className="bg-blue-500/5 hover:bg-blue-500/10 transition-colors rounded-xl border border-blue-500/20 p-4 text-center group">
+                        <ShoppingBag className="h-5 w-5 text-blue-500 mx-auto mb-2 opacity-70 group-hover:opacity-100 transition-opacity" />
+                        <p className="text-2xl font-bold text-white mb-1">{selectedCustomer.ordersByStatus.paid}</p>
+                        <p className="text-xs font-medium text-blue-400/70 uppercase">Paid</p>
+                      </div>
+                      <div className="bg-purple-500/5 hover:bg-purple-500/10 transition-colors rounded-xl border border-purple-500/20 p-4 text-center group">
+                        <Loader2 className="h-5 w-5 text-purple-500 mx-auto mb-2 opacity-70 group-hover:opacity-100 transition-opacity" />
+                        <p className="text-2xl font-bold text-white mb-1">{selectedCustomer.ordersByStatus.acknowledged}</p>
+                        <p className="text-xs font-medium text-purple-400/70 uppercase">Processing</p>
+                      </div>
+                      <div className="bg-amber-500/5 hover:bg-amber-500/10 transition-colors rounded-xl border border-amber-500/20 p-4 text-center group">
+                        <Truck className="h-5 w-5 text-amber-500 mx-auto mb-2 opacity-70 group-hover:opacity-100 transition-opacity" />
+                        <p className="text-2xl font-bold text-white mb-1">{selectedCustomer.ordersByStatus.shipped}</p>
+                        <p className="text-xs font-medium text-amber-400/70 uppercase">Shipped</p>
+                      </div>
+                      <div className="bg-emerald-500/5 hover:bg-emerald-500/10 transition-colors rounded-xl border border-emerald-500/20 p-4 text-center group">
+                        <CheckCircle className="h-5 w-5 text-emerald-500 mx-auto mb-2 opacity-70 group-hover:opacity-100 transition-opacity" />
+                        <p className="text-2xl font-bold text-white mb-1">{selectedCustomer.ordersByStatus.completed}</p>
+                        <p className="text-xs font-medium text-emerald-400/70 uppercase">Completed</p>
+                      </div>
+                    </div>
+                  </motion.div>
+                </div>
+
+                <DialogFooter className="pt-4 border-t">
                   <Button
-                    variant="outline"
-                    size="sm"
-                    className="w-full"
-                    onClick={() => {
-                      window.open(`https://t.me/${selectedCustomer.telegramUsername || selectedCustomer.telegramUserId}`, '_blank');
-                    }}
+                    variant="ghost"
+                    onClick={() => setSelectedCustomer(null)}
+                    className=""
+                  >
+                    Close Profile
+                  </Button>
+                  <Button
+                    onClick={() => router.push(`/dashboard/storefront/chat/new?userId=${selectedCustomer.telegramUserId}`)}
+                    className=""
                   >
                     <MessageCircle className="h-4 w-4 mr-2" />
-                    Open Telegram Chat
+                    Message Customer
                   </Button>
-                </div>
-
-                {/* Order Statistics */}
-                <div>
-                  <h3 className="text-sm font-medium mb-2">Order Statistics</h3>
-                  <div className="bg-background rounded-lg border border-border p-4 space-y-3">
-                    <div className="flex justify-between items-center text-sm">
-                      <div className="text-muted-foreground">Total Orders:</div>
-                      <div className="font-medium">{selectedCustomer.totalOrders}</div>
-                    </div>
-                    <div className="flex justify-between items-center text-sm">
-                      <div className="text-muted-foreground">Total Spent:</div>
-                      <div className="font-medium">{formatCurrency(selectedCustomer.totalSpent)}</div>
-                    </div>
-                    <div className="flex justify-between items-center text-sm">
-                      <div className="text-muted-foreground">First Order:</div>
-                      <div className="font-medium">
-                        {formatDate(selectedCustomer.firstOrderDate)}
-                      </div>
-                    </div>
-                    <div className="flex justify-between items-center text-sm">
-                      <div className="text-muted-foreground">Last Order:</div>
-                      <div className="font-medium">
-                        {formatDate(selectedCustomer.lastOrderDate)}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              {/* Order Status Breakdown */}
-              <div className="mb-4">
-                <h3 className="text-sm font-medium mb-2">Order Status Breakdown</h3>
-                <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
-                  <div className="bg-blue-500/10 rounded-lg border border-blue-500/20 p-3">
-                    <p className="text-sm text-muted-foreground">Paid</p>
-                    <p className="text-xl font-semibold">{selectedCustomer.ordersByStatus.paid}</p>
-                  </div>
-                  <div className="bg-purple-500/10 rounded-lg border border-purple-500/20 p-3">
-                    <p className="text-sm text-muted-foreground">Acknowledged</p>
-                    <p className="text-xl font-semibold">{selectedCustomer.ordersByStatus.acknowledged}</p>
-                  </div>
-                  <div className="bg-amber-500/10 rounded-lg border border-amber-500/20 p-3">
-                    <p className="text-sm text-muted-foreground">Shipped</p>
-                    <p className="text-xl font-semibold">{selectedCustomer.ordersByStatus.shipped}</p>
-                  </div>
-                  <div className="bg-green-500/10 rounded-lg border border-green-500/20 p-3">
-                    <p className="text-sm text-muted-foreground">Completed</p>
-                    <p className="text-xl font-semibold">{selectedCustomer.ordersByStatus.completed}</p>
-                  </div>
-                </div>
-              </div>
-
-              <DialogFooter>
-                <Button
-                  variant="outline"
-                  onClick={() => setSelectedCustomer(null)}
-                >
-                  Close
-                </Button>
-                <Button
-                  onClick={() => router.push(`/dashboard/storefront/chat/new?userId=${selectedCustomer.telegramUserId}`)}
-                >
-                  <MessageCircle className="h-4 w-4 mr-2" />
-                  Start Chat
-                </Button>
-              </DialogFooter>
-            </DialogContent>
-          </Dialog>
-        )}
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+          )}
+        </AnimatePresence>
       </div>
     </Layout>
   );
 } 
+

app/dashboard/storefront/page.tsx

@@ -3,17 +3,17 @@
 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 { 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/ui/card";
-import { Label } from "@/components/ui/label";
-import { Badge } from "@/components/ui/badge";
+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,
@@ -21,9 +21,9 @@ import {
   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: "🇬🇧" },
@@ -106,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);
@@ -465,3 +455,5 @@ export default function StorefrontPage() {
     </Dashboard >
   );
 }
+
+

app/globals.css

@@ -440,7 +440,7 @@ body {
   }
 
   .text-gradient {
-    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-primary/60;
+    @apply text-foreground;
   }
 
   .bg-gradient-premium {

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({

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,21 +32,21 @@ import {
   EyeOff,
   Calculator,
 } from "lucide-react";
-import { useToast } from "@/hooks/use-toast";
+import { useToast } from "@/lib/hooks/use-toast";
 import MetricsCard from "./MetricsCard";
 import {
   getAnalyticsOverviewWithStore,
   type AnalyticsOverview,
 } from "@/lib/services/analytics-service";
-import { formatGBP } from "@/utils/format";
+import { formatGBP, formatNumber } from "@/lib/utils/format";
 import { MetricsCardSkeleton } from "./SkeletonLoaders";
 import dynamic from "next/dynamic";
-import { Skeleton } from "@/components/ui/skeleton";
-import { DateRangePicker } from "@/components/ui/date-picker";
+import { Skeleton } from "@/components/common/skeleton";
+import { DateRangePicker } from "@/components/common/date-picker";
 import { DateRange } from "react-day-picker";
 import { addDays, startOfDay, endOfDay } from "date-fns";
 import type { DateRange as ProfitDateRange } from "@/lib/services/profit-analytics-service";
-import { MotionWrapper } from "@/components/ui/motion-wrapper";
+import { MotionWrapper } from "@/components/common/motion-wrapper";
 import { motion } from "framer-motion";
 
 const RevenueChart = dynamic(() => import("./RevenueChart"), {
@@ -170,7 +170,7 @@ export default function AnalyticsDashboard({
     },
     {
       title: "Total Orders",
-      value: maskValue(data.orders.total.toLocaleString()),
+      value: maskValue(formatNumber(data.orders.total)),
       description: "All-time orders",
       icon: ShoppingCart,
       trend: data.orders.completed > 0 ? ("up" as const) : ("neutral" as const),
@@ -178,7 +178,7 @@ export default function AnalyticsDashboard({
     },
     {
       title: "Unique Customers",
-      value: maskValue(data.customers.unique.toLocaleString()),
+      value: maskValue(formatNumber(data.customers.unique)),
       description: "Total customers",
       icon: Users,
       trend: "neutral" as const,
@@ -186,7 +186,7 @@ export default function AnalyticsDashboard({
     },
     {
       title: "Products",
-      value: maskValue(data.products.total.toLocaleString()),
+      value: maskValue(formatNumber(data.products.total)),
       description: "Active products",
       icon: Package,
       trend: "neutral" as const,
@@ -451,3 +451,5 @@ export default function AnalyticsDashboard({
     </div>
   );
 }
+
+

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, 

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() {
@@ -306,3 +306,4 @@ export default function CustomerInsightsChart() {
     </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>
@@ -236,16 +223,16 @@ export default function GrowthAnalyticsChart({
                               Orders:{" "}
                               {hideNumbers
                                 ? "***"
-                                : data.orders.toLocaleString()}
+                                : formatNumber(data.orders)}
                             </p>
                             <p className="text-sm text-green-600">
-                              Revenue: {formatCurrency(data.revenue)}
+                              Revenue: {hideNumbers ? "£***" : formatGBP(data.revenue)}
                             </p>
                             <p className="text-sm text-purple-600">
                               Customers:{" "}
                               {hideNumbers
                                 ? "***"
-                                : data.customers.toLocaleString()}
+                                : formatNumber(data.customers)}
                             </p>
                             {data.newCustomers !== undefined && (
                               <p className="text-sm text-cyan-600">
@@ -327,16 +314,16 @@ export default function GrowthAnalyticsChart({
                         )}
                       </td>
                       <td className="text-right p-2">
-                        {hideNumbers ? "***" : month.orders.toLocaleString()}
+                        {hideNumbers ? "***" : formatNumber(month.orders)}
                       </td>
                       <td className="text-right p-2 text-green-600">
-                        {formatCurrency(month.revenue)}
+                        {hideNumbers ? "£***" : formatGBP(month.revenue)}
                       </td>
                       <td className="text-right p-2">
-                        {hideNumbers ? "***" : month.customers.toLocaleString()}
+                        {hideNumbers ? "***" : formatNumber(month.customers)}
                       </td>
                       <td className="text-right p-2">
-                        {formatCurrency(month.avgOrderValue)}
+                        {hideNumbers ? "£***" : formatGBP(month.avgOrderValue)}
                       </td>
                       <td className="text-right p-2">
                         {hideNumbers ? "***" : (month.newCustomers ?? 0)}
@@ -352,3 +339,5 @@ export default function GrowthAnalyticsChart({
     </div>
   );
 }
+
+

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";

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 {
@@ -202,3 +202,4 @@ export default function OrderAnalyticsChart({ timeRange }: OrderAnalyticsChartPr
     </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;
@@ -933,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() {
@@ -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)}
@@ -156,3 +156,4 @@ export default function ProductPerformanceChart() {
     </Card>
   );
 }
+

components/analytics/ProfitAnalyticsChart.tsx

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

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';
 
@@ -240,3 +240,4 @@ export default function RevenueChart({ timeRange, hideNumbers = false }: Revenue
     </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,
   icon: Icon,
-  showStats = false 
+  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" />

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('');
@@ -112,3 +112,4 @@ export default function StoreSelector() {
     </Card>
   );
 } 
+

components/animated-stats-section.tsx

@@ -20,9 +20,9 @@ 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}
@@ -40,9 +40,9 @@ export function AnimatedStatsSection({ stats }: AnimatedStatsProps) {
       </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}
@@ -60,9 +60,9 @@ export function AnimatedStatsSection({ stats }: AnimatedStatsProps) {
       </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}

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

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,
 }
+
+