hmm

2025-07-17 16:07:07 +01:00
parent e65d6d3fee
commit 0fa33df2ad
9 changed files with 607 additions and 730 deletions
--- a/app/dashboard/chats/page.tsx
+++ b/app/dashboard/chats/page.tsx
@@ -1,10 +1,63 @@
 "use client";

-import { useEffect } from "react";
+import { useEffect, Suspense } from "react";
 import { useRouter } from "next/navigation";
-import ChatTable from "@/components/dashboard/ChatTable";
 import Dashboard from "@/components/dashboard/dashboard";
 import { MessageCircle } from "lucide-react";
+import dynamic from "next/dynamic";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+
+// Lazy load the ChatTable component
+const ChatTable = dynamic(() => import("@/components/dashboard/ChatTable"), {
+  loading: () => <ChatTableSkeleton />
+});
+
+// Loading skeleton for the chat table
+function ChatTableSkeleton() {
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <Skeleton className="h-6 w-32" />
+          <Skeleton className="h-9 w-24" />
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="border rounded-lg">
+          <div className="border-b p-4">
+            <div className="flex items-center gap-4">
+              {['Customer', 'Last Message', 'Date', 'Status', 'Actions'].map((header, i) => (
+                <Skeleton key={i} className="h-4 w-20 flex-1" />
+              ))}
+            </div>
+          </div>
+          
+          {[...Array(6)].map((_, i) => (
+            <div key={i} className="border-b last:border-b-0 p-4">
+              <div className="flex items-center gap-4">
+                <div className="flex items-center gap-3 flex-1">
+                  <Skeleton className="h-10 w-10 rounded-full" />
+                  <div className="space-y-1">
+                    <Skeleton className="h-4 w-32" />
+                    <Skeleton className="h-3 w-24" />
+                  </div>
+                </div>
+                <Skeleton className="h-4 w-40 flex-1" />
+                <Skeleton className="h-4 w-20 flex-1" />
+                <Skeleton className="h-6 w-16 flex-1" />
+                <div className="flex gap-2 flex-1">
+                  <Skeleton className="h-8 w-16" />
+                  <Skeleton className="h-8 w-16" />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

 export default function ChatsPage() {
  const router = useRouter();
@@ -30,7 +83,9 @@ export default function ChatsPage() {
          </h1>
        </div>
        
+        <Suspense fallback={<ChatTableSkeleton />}>
          <ChatTable />
+        </Suspense>
      </div>
    </Dashboard>
  );
--- a/app/dashboard/orders/page.tsx
+++ b/app/dashboard/orders/page.tsx
@@ -1,10 +1,63 @@
 "use client";

-import { useEffect } from "react";
+import { useEffect, Suspense } from "react";
 import { useRouter } from "next/navigation";
 import Dashboard from "@/components/dashboard/dashboard";
 import { Package } from "lucide-react";
-import OrderTable from "@/components/tables/order-table";
+import dynamic from "next/dynamic";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+
+// Lazy load the OrderTable component
+const OrderTable = dynamic(() => import("@/components/tables/order-table"), {
+  loading: () => <OrderTableSkeleton />
+});
+
+// Loading skeleton for the order table
+function OrderTableSkeleton() {
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <Skeleton className="h-6 w-32" />
+          <div className="flex gap-2">
+            <Skeleton className="h-9 w-24" />
+            <Skeleton className="h-9 w-32" />
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        {/* Table header skeleton */}
+        <div className="border rounded-lg">
+          <div className="border-b p-4">
+            <div className="flex items-center gap-4">
+              {['Order ID', 'Customer', 'Status', 'Total', 'Date', 'Actions'].map((header, i) => (
+                <Skeleton key={i} className="h-4 w-20 flex-1" />
+              ))}
+            </div>
+          </div>
+          
+          {/* Table rows skeleton */}
+          {[...Array(8)].map((_, i) => (
+            <div key={i} className="border-b last:border-b-0 p-4">
+              <div className="flex items-center gap-4">
+                <Skeleton className="h-4 w-24 flex-1" />
+                <Skeleton className="h-4 w-32 flex-1" />
+                <Skeleton className="h-6 w-20 flex-1" />
+                <Skeleton className="h-4 w-16 flex-1" />
+                <Skeleton className="h-4 w-20 flex-1" />
+                <div className="flex gap-2 flex-1">
+                  <Skeleton className="h-8 w-16" />
+                  <Skeleton className="h-8 w-16" />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

 export default function OrdersPage() {
  const router = useRouter();
@@ -30,7 +83,9 @@ export default function OrdersPage() {
          </h1>
        </div>

+        <Suspense fallback={<OrderTableSkeleton />}>
          <OrderTable />
+        </Suspense>
      </div>
    </Dashboard>
  );
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -1,10 +1,72 @@
 import Dashboard from "@/components/dashboard/dashboard";
-import Content from "@/components/dashboard/content";
 import { fetchServer } from '@/lib/api';
 import { performance } from 'perf_hooks';
 import { Info, GitCommit, User, Zap } from 'lucide-react';
 import packageJson from '../../package.json';
 import { getGitInfo, getShortGitHash } from '@/lib/utils/git';
+import { Suspense } from 'react';
+import dynamic from 'next/dynamic';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+
+// Lazy load the Content component
+const Content = dynamic(() => import("@/components/dashboard/content"), {
+  loading: () => <DashboardContentSkeleton />
+});
+
+// Loading skeleton for the dashboard content
+function DashboardContentSkeleton() {
+  return (
+    <div className="space-y-6">
+      {/* Header skeleton */}
+      <div>
+        <Skeleton className="h-8 w-64 mb-2" />
+        <Skeleton className="h-4 w-96" />
+      </div>
+
+      {/* Stats cards skeleton */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        {[...Array(4)].map((_, i) => (
+          <Card key={i}>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <Skeleton className="h-4 w-20" />
+              <Skeleton className="h-5 w-5 rounded" />
+            </CardHeader>
+            <CardContent>
+              <Skeleton className="h-7 w-16 mb-1" />
+              <Skeleton className="h-3 w-24" />
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {/* Best selling products skeleton */}
+      <Card>
+        <CardHeader>
+          <Skeleton className="h-6 w-48" />
+          <Skeleton className="h-4 w-72" />
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {[...Array(5)].map((_, i) => (
+              <div key={i} className="flex items-center gap-4">
+                <Skeleton className="h-12 w-12 rounded-md" />
+                <div className="space-y-2">
+                  <Skeleton className="h-4 w-40" />
+                  <Skeleton className="h-4 w-20" />
+                </div>
+                <div className="ml-auto text-right">
+                  <Skeleton className="h-4 w-16 ml-auto" />
+                  <Skeleton className="h-4 w-16 ml-auto mt-2" />
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

 // ✅ Corrected Vendor Type
 interface Vendor {
@@ -46,7 +108,9 @@ export default async function DashboardPage() {

  return (
    <Dashboard>
+      <Suspense fallback={<DashboardContentSkeleton />}>
        <Content username={vendor.username} orderStats={orderStats} />
+      </Suspense>
      <div className="fixed bottom-2 right-2 text-xs text-muted-foreground bg-background/80 backdrop-blur-sm px-2 py-1 rounded border border-border/50 z-50 flex items-center space-x-2">
        <div className="flex items-center gap-1">
          <Info size={12} className="text-muted-foreground/80" /> 
--- a/app/dashboard/products/page.tsx
+++ b/app/dashboard/products/page.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { useState, useEffect, ChangeEvent } from "react";
+import { useState, useEffect, ChangeEvent, Suspense } from "react";
 import { useRouter } from "next/navigation";
 import Layout from "@/components/layout/layout";
 import { Button } from "@/components/ui/button";
@@ -8,11 +8,74 @@ import { Input } from "@/components/ui/input";
 import { Product } from "@/models/products";
 import { Plus, Upload, Search, RefreshCw, Package2 } from "lucide-react";
 import { clientFetch } from "@/lib/api";
-import { ProductModal } from "@/components/modals/product-modal";
-import ProductTable from "@/components/tables/product-table";
 import { Category } from "@/models/categories";
-import ImportProductsModal from "@/components/modals/import-products-modal";
 import { toast } from "sonner";
+import dynamic from "next/dynamic";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+
+// Lazy load heavy components
+const ProductTable = dynamic(() => import("@/components/tables/product-table"), {
+  loading: () => <ProductTableSkeleton />
+});
+
+const ProductModal = dynamic(() => import("@/components/modals/product-modal").then(mod => ({ default: mod.ProductModal })), {
+  loading: () => <div>Loading...</div>
+});
+
+const ImportProductsModal = dynamic(() => import("@/components/modals/import-products-modal"), {
+  loading: () => <div>Loading...</div>
+});
+
+// Loading skeleton for the product table
+function ProductTableSkeleton() {
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <Skeleton className="h-6 w-32" />
+          <div className="flex gap-2">
+            <Skeleton className="h-9 w-24" />
+            <Skeleton className="h-9 w-32" />
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="border rounded-lg">
+          <div className="border-b p-4">
+            <div className="flex items-center gap-4">
+              {['Product', 'Category', 'Price', 'Stock', 'Status', 'Actions'].map((header, i) => (
+                <Skeleton key={i} className="h-4 w-20 flex-1" />
+              ))}
+            </div>
+          </div>
+          
+          {[...Array(8)].map((_, i) => (
+            <div key={i} className="border-b last:border-b-0 p-4">
+              <div className="flex items-center gap-4">
+                <div className="flex items-center gap-3 flex-1">
+                  <Skeleton className="h-12 w-12 rounded-md" />
+                  <div className="space-y-1">
+                    <Skeleton className="h-4 w-32" />
+                    <Skeleton className="h-3 w-24" />
+                  </div>
+                </div>
+                <Skeleton className="h-4 w-24 flex-1" />
+                <Skeleton className="h-4 w-16 flex-1" />
+                <Skeleton className="h-4 w-16 flex-1" />
+                <Skeleton className="h-6 w-20 flex-1" />
+                <div className="flex gap-2 flex-1">
+                  <Skeleton className="h-8 w-16" />
+                  <Skeleton className="h-8 w-16" />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

 export default function ProductsPage() {
  const router = useRouter();
--- a/app/dashboard/shipping/page.tsx
+++ b/app/dashboard/shipping/page.tsx
@@ -1,11 +1,10 @@
 "use client";

-import { useState, useEffect, ChangeEvent } from "react";
+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 { ShippingModal } from "@/components/modals/shipping-modal";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
  fetchShippingMethods,
@@ -15,8 +14,55 @@ import {
  ShippingMethod,
  ShippingData
 } from "@/lib/services/shipping-service";
+import dynamic from "next/dynamic";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";

-import { ShippingTable } from "@/components/tables/shipping-table";
+// Lazy load components
+const ShippingModal = dynamic(() => import("@/components/modals/shipping-modal").then(mod => ({ default: mod.ShippingModal })), {
+  loading: () => <div>Loading...</div>
+});
+
+const ShippingTable = dynamic(() => import("@/components/tables/shipping-table").then(mod => ({ default: mod.ShippingTable })), {
+  loading: () => <ShippingTableSkeleton />
+});
+
+// Loading skeleton for shipping table
+function ShippingTableSkeleton() {
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <Skeleton className="h-6 w-32" />
+          <Skeleton className="h-9 w-24" />
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="border rounded-lg">
+          <div className="border-b p-4">
+            <div className="flex items-center gap-4">
+              {['Method Name', 'Price', 'Actions'].map((header, i) => (
+                <Skeleton key={i} className="h-4 w-20 flex-1" />
+              ))}
+            </div>
+          </div>
+          
+          {[...Array(4)].map((_, i) => (
+            <div key={i} className="border-b last:border-b-0 p-4">
+              <div className="flex items-center gap-4">
+                <Skeleton className="h-4 w-32 flex-1" />
+                <Skeleton className="h-4 w-16 flex-1" />
+                <div className="flex gap-2 flex-1">
+                  <Skeleton className="h-8 w-16" />
+                  <Skeleton className="h-8 w-16" />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

 export default function ShippingPage() {
  const [shippingMethods, setShippingMethods] = useState<ShippingMethod[]>([]);
@@ -191,12 +237,14 @@ export default function ShippingPage() {
        </div>

        {/* Shipping Methods Table */}
+        <Suspense fallback={<ShippingTableSkeleton />}>
          <ShippingTable
            shippingMethods={shippingMethods}
            loading={loading}
            onEditShipping={handleEditShipping}
            onDeleteShipping={handleDeleteShipping}
          />
+        </Suspense>
      </div>

      {/* Shipping Modal */}
--- a/components/analytics/AnalyticsDashboard.tsx
+++ b/components/analytics/AnalyticsDashboard.tsx
@@ -1,6 +1,6 @@
 "use client"

-import { useState, useEffect } from 'react';
+import { useState, useEffect, Suspense } from 'react';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Badge } from "@/components/ui/badge";
@@ -18,14 +18,49 @@ import {
  RefreshCw
 } from "lucide-react";
 import { useToast } from "@/hooks/use-toast";
-import RevenueChart from "./RevenueChart";
-import ProductPerformanceChart from "./ProductPerformanceChart";
-import CustomerInsightsChart from "./CustomerInsightsChart";
-import OrderAnalyticsChart from "./OrderAnalyticsChart";
 import MetricsCard from "./MetricsCard";
 import { getAnalyticsOverviewWithStore, type AnalyticsOverview } from "@/lib/services/analytics-service";
 import { formatGBP } from "@/utils/format";
 import { MetricsCardSkeleton } from './SkeletonLoaders';
+import dynamic from 'next/dynamic';
+import { Skeleton } from "@/components/ui/skeleton";
+
+// Lazy load chart components
+const RevenueChart = dynamic(() => import('./RevenueChart'), {
+  loading: () => <ChartSkeleton />
+});
+
+const ProductPerformanceChart = dynamic(() => import('./ProductPerformanceChart'), {
+  loading: () => <ChartSkeleton />
+});
+
+const CustomerInsightsChart = dynamic(() => import('./CustomerInsightsChart'), {
+  loading: () => <ChartSkeleton />
+});
+
+const OrderAnalyticsChart = dynamic(() => import('./OrderAnalyticsChart'), {
+  loading: () => <ChartSkeleton />
+});
+
+// Chart loading skeleton
+function ChartSkeleton() {
+  return (
+    <Card>
+      <CardHeader>
+        <Skeleton className="h-6 w-48" />
+        <Skeleton className="h-4 w-72" />
+      </CardHeader>
+      <CardContent>
+        <div className="h-80 w-full flex items-center justify-center">
+          <div className="flex flex-col items-center gap-2">
+            <BarChart3 className="h-8 w-8 text-muted-foreground animate-pulse" />
+            <Skeleton className="h-4 w-32" />
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

 interface AnalyticsDashboardProps {
  initialData: AnalyticsOverview;
@@ -191,19 +226,27 @@ export default function AnalyticsDashboard({ initialData }: AnalyticsDashboardPr
          </TabsList>

          <TabsContent value="revenue" className="space-y-6">
+            <Suspense fallback={<ChartSkeleton />}>
              <RevenueChart timeRange={timeRange} />
+            </Suspense>
          </TabsContent>

          <TabsContent value="products" className="space-y-6">
+            <Suspense fallback={<ChartSkeleton />}>
              <ProductPerformanceChart />
+            </Suspense>
          </TabsContent>

          <TabsContent value="customers" className="space-y-6">
+            <Suspense fallback={<ChartSkeleton />}>
              <CustomerInsightsChart />
+            </Suspense>
          </TabsContent>

          <TabsContent value="orders" className="space-y-6">
+            <Suspense fallback={<ChartSkeleton />}>
              <OrderAnalyticsChart timeRange={timeRange} />
+            </Suspense>
          </TabsContent>
        </Tabs>
      </div>
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,5 +1,9 @@
+import bundleAnalyzer from '@next/bundle-analyzer';
+
+const withBundleAnalyzer = bundleAnalyzer({ enabled: process.env.ANALYZE === 'true' });
+
 /** @type {import('next').NextConfig} */
-const nextConfig = {
+const baseConfig = {
  output: 'standalone',
  reactStrictMode: false,
  images: {
@@ -29,24 +33,19 @@ const nextConfig = {
  experimental: {
    serverExternalPackages: [],
  },
-    // Reduce memory usage during builds
  onDemandEntries: {
-      // Period (in ms) where the server will keep pages in the buffer
    maxInactiveAge: 15 * 1000,
-      // Number of pages that should be kept simultaneously without being disposed
    pagesBufferLength: 2,
  },
-    // Specify a more efficient build output mode
  productionBrowserSourceMaps: false,
-    // Skip TypeScript checking during production build to speed up
  typescript: {
    ignoreBuildErrors: true,
  },
-    // Skip ESLint checking during production build to speed up
  eslint: {
    ignoreDuringBuilds: true,
  },
 };

-  export default nextConfig;
+const nextConfig = withBundleAnalyzer(baseConfig);

+export default nextConfig;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -13,7 +13,8 @@
    "start": "next start",
    "lint": "next lint",
    "fix-lint": "node scripts/fix-eslint-issues.js",
-    "clean": "rm -rf .next && rm -rf node_modules/.cache"
+    "clean": "rm -rf .next && rm -rf node_modules/.cache",
+    "analyze": "ANALYZE=true next build"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.1",
@@ -44,8 +45,6 @@
    "@radix-ui/react-toggle": "^1.1.1",
    "@radix-ui/react-toggle-group": "^1.1.1",
    "@radix-ui/react-tooltip": "^1.1.6",
-    "@react-three/drei": "^10.0.6",
-    "@react-three/fiber": "^9.1.2",
    "autoprefixer": "^10.4.20",
    "axios": "^1.8.1",
    "class-variance-authority": "^0.7.1",
@@ -54,7 +53,6 @@
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "form-data": "^4.0.2",
-    "framer-motion": "^12.6.3",
    "input-otp": "1.4.1",
    "jwt-decode": "^4.0.0",
    "lucide-react": "^0.454.0",
@@ -73,11 +71,11 @@
    "sonner": "^1.7.4",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
-    "three": "^0.175.0",
    "vaul": "^0.9.6",
    "zod": "^3.24.1"
  },
  "devDependencies": {
+    "@next/bundle-analyzer": "^15.4.1",
    "@tailwindcss/typography": "^0.5.16",
    "@types/lodash": "^4.17.16",
    "@types/node": "^22",