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>
        
-        <ChatTable />
+        <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>

-        <OrderTable />
+        <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>
-      <Content username={vendor.username} orderStats={orderStats} />
+      <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 */}
-        <ShippingTable
-          shippingMethods={shippingMethods}
-          loading={loading}
-          onEditShipping={handleEditShipping}
-          onDeleteShipping={handleDeleteShipping}
-        />
+        <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">
-            <RevenueChart timeRange={timeRange} />
+            <Suspense fallback={<ChartSkeleton />}>
+              <RevenueChart timeRange={timeRange} />
+            </Suspense>
          </TabsContent>

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

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

          <TabsContent value="orders" className="space-y-6">
-            <OrderAnalyticsChart timeRange={timeRange} />
+            <Suspense fallback={<ChartSkeleton />}>
+              <OrderAnalyticsChart timeRange={timeRange} />
+            </Suspense>
          </TabsContent>
        </Tabs>
      </div>
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,52 +1,51 @@
+import bundleAnalyzer from '@next/bundle-analyzer';
+
+const withBundleAnalyzer = bundleAnalyzer({ enabled: process.env.ANALYZE === 'true' });
+
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-    output: 'standalone',
-    reactStrictMode: false,
-    images: {
-      remotePatterns: [
-        {
-          protocol: "https",
-          hostname: "api.telegram.org",
-        },
-        {
-          protocol: "https",
-          hostname: "telegram.org",
-        },
-        {
-          protocol: "https",
-          hostname: "internal-api.inboxi.ng",
-        },
-      ],
-    },
-    async rewrites() {
-      return [
-        {
-          source: '/api/:path*',
-          destination: 'https://internal-api.inboxi.ng/api/:path*', 
-        },
-      ];
-    },
-    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 baseConfig = {
+  output: 'standalone',
+  reactStrictMode: false,
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "api.telegram.org",
+      },
+      {
+        protocol: "https",
+        hostname: "telegram.org",
+      },
+      {
+        protocol: "https",
+        hostname: "internal-api.inboxi.ng",
+      },
+    ],
+  },
+  async rewrites() {
+    return [
+      {
+        source: '/api/:path*',
+        destination: 'https://internal-api.inboxi.ng/api/:path*',
+      },
+    ];
+  },
+  experimental: {
+    serverExternalPackages: [],
+  },
+  onDemandEntries: {
+    maxInactiveAge: 15 * 1000,
+    pagesBufferLength: 2,
+  },
+  productionBrowserSourceMaps: false,
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+};
+
+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",