Initial commit

.gitea/workflows/build.yml

@@ -0,0 +1,27 @@
+name: Build Frontend
+
+on: [push]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.9.0'
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build
+        run: pnpm build

.gitignore

@@ -46,3 +46,8 @@ public/git-info.json
 public/git-info.json
 public/git-info.json
 /.next - Copy
+
+# Docker Gitea
+docker-compose.gitea.yml
+runner/
+nginx/

Dockerfile

@@ -1,3 +1,5 @@
+# syntax=docker/dockerfile:1
+
 # Use official Node.js image as base
 # Next.js 16 requires Node 18.17+ or Node 20+
 # Using node:20-alpine for better compatibility with Next.js 16 and Turbopack
@@ -7,17 +9,20 @@ WORKDIR /app
 # Install git early for commit hash
 RUN apk add --no-cache git
 
-# Install pnpm
+# Install pnpm properly for Docker
-RUN npm install -g pnpm
+RUN corepack enable && corepack prepare pnpm@latest --activate
 
+# Copy package files for dependency installation
 COPY package.json pnpm-lock.yaml ./
 
 # Install dependencies with pnpm
 RUN pnpm install --frozen-lockfile
 
+# Copy source code after dependencies are installed (for better caching)
 COPY . .
 
 # Get commit hash (fallback to "unknown" if not in git repo)
+# This is done after copying source to avoid cache invalidation
 RUN git rev-parse --short HEAD > /app/git_commit_sha 2>/dev/null || echo "unknown" > /app/git_commit_sha
 
 ENV NEXT_PUBLIC_API_URL=/api
@@ -25,10 +30,13 @@ ENV SERVER_API_URL=https://internal-api.inboxi.ng/api
 ENV API_BASE_URL=https://internal-api.inboxi.ng
 ENV API_HOSTNAME=internal-api.inboxi.ng
 
-# Build the Next.js application with increased memory for Turbopack
+# Ensure .next directory exists and has proper permissions
+RUN mkdir -p /app/.next && chmod -R 755 /app/.next
+
+# Build the Next.js application with reduced memory for Turbopack
 # Next.js 16 uses Turbopack by default which may need more memory
 RUN echo "Building with GIT_COMMIT_SHA=$(cat /app/git_commit_sha)" && \
-    NODE_OPTIONS='--max_old_space_size=4096' NEXT_TELEMETRY_DISABLED=1 pnpm run build
+    NODE_OPTIONS='--max_old_space_size=2048' NEXT_TELEMETRY_DISABLED=1 pnpm run build
 
 # ---- Production Stage ----
 # Use Node 20 for production as well to match builder
@@ -37,6 +45,9 @@ FROM node:20-alpine AS runner
 # Set working directory inside the container
 WORKDIR /app
 
+# Install pnpm in production stage
+RUN corepack enable && corepack prepare pnpm@latest --activate
+
 RUN mkdir -p /app/public
 
 # Copy only necessary files from builder

components/admin/OrdersTable.tsx

@@ -7,7 +7,7 @@ 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 { Search, Filter, Eye, ChevronLeft, ChevronRight } from "lucide-react";
-import { FixedSizeList as List } from 'react-window';
+import { List } from 'react-window';
 import OrderDetailsModal from "./OrderDetailsModal";
 
 interface Order {
@@ -215,7 +215,52 @@ export default function OrdersTable({ orders, enableModal = true }: OrdersTableP
               itemSize={60}
               className="border"
             >
-              {Row}
+              {({ index, style }: { index: number; style: React.CSSProperties }) => {
+                const order = currentOrders[index];
+                if (!order) return null;
+
+                return (
+                  <div style={style}>
+                    <TableRow>
+                      <TableCell className="font-medium">{order.orderId}</TableCell>
+                      <TableCell>{order.userId}</TableCell>
+                      <TableCell>{order.vendorUsername || 'N/A'}</TableCell>
+                      <TableCell className="max-w-[200px] truncate">
+                        {order.items.length > 0 ? order.items[0].name : 'No items'}
+                      </TableCell>
+                      <TableCell>£{order.total.toFixed(2)}</TableCell>
+                      <TableCell>
+                        <div className={`px-3 py-1 rounded-full border ${getStatusStyle(order.status)}`}>
+                          {order.status.toUpperCase()}
+                        </div>
+                      </TableCell>
+                      <TableCell>N/A</TableCell>
+                      <TableCell>{new Date(order.createdAt).toLocaleDateString()}</TableCell>
+                      <TableCell className="text-right">
+                        {enableModal ? (
+                          <Button 
+                            variant="outline" 
+                            size="sm"
+                            onClick={() => handleViewOrder(order.orderId)}
+                            title="View order details (Admin only)"
+                          >
+                            <Eye className="h-4 w-4" />
+                          </Button>
+                        ) : (
+                          <Button 
+                            variant="outline" 
+                            size="sm"
+                            disabled
+                            title="Order details modal disabled"
+                          >
+                            <Eye className="h-4 w-4" />
+                          </Button>
+                        )}
+                      </TableCell>
+                    </TableRow>
+                  </div>
+                );
+              }}
             </List>
           ) : (
             <TableBody>

components/dashboard/ChatDetail.tsx

@@ -13,6 +13,7 @@ import { toast } from "sonner";
 import { ArrowLeft, Send, RefreshCw, File, FileText, Image as ImageIcon, Download } from "lucide-react";
 import { getCookie, clientFetch } from "@/lib/api";
 import { ImageViewerModal } from "@/components/modals/image-viewer-modal";
+import Image from "next/image";
 import BuyerOrderInfo from "./BuyerOrderInfo";
 import { useIsTouchDevice } from "@/hooks/use-mobile";
 import { useChromebookScroll, useSmoothScrollToBottom } from "@/hooks/use-chromebook-scroll";
@@ -742,13 +743,23 @@ export default function ChatDetail({ chatId }: { chatId: string }) {
                               <Download className="h-3 w-3" aria-hidden="true" />
                             </a>
                           </div>
-                          <img 
+                          <Image
-                            src={attachment} 
+                            src={attachment}
-                            alt={fileName} 
+                            alt={fileName}
+                            width={400}
+                            height={300}
+                            placeholder="blur"
+                            blurDataURL="/placeholder-image.svg"
+                            quality={85}
                             className="max-w-full max-h-60 object-contain cursor-pointer hover:opacity-90 transition-opacity rounded"
                             onError={(e) => {
-                              (e.target as HTMLImageElement).src = "/placeholder-image.svg";
+                              // Fallback to placeholder on error
+                              const target = e.target as any;
+                              if (target && target.src !== "/placeholder-image.svg") {
+                                target.src = "/placeholder-image.svg";
+                              }
                             }}
+                            onClick={() => handleImageClick(attachment, messageIndex, attachmentIndex)}
                           />
                         </div>
                       ) : (

components/forms/image-upload.tsx

@@ -2,6 +2,7 @@
 
 import { ChangeEvent } from "react";
 import { Input } from "@/components/ui/input";
+import Image from "next/image";
 
 interface ImageUploadProps {
   imagePreview: string | null;
@@ -21,9 +22,15 @@ export const ImageUpload = ({
       style={{ width: imageDimensions.width, height: imageDimensions.height }}
     >
       {imagePreview ? (
-        <img
+        <Image
           src={imagePreview}
           alt="Preview"
+          width={imageDimensions.width}
+          height={imageDimensions.height}
+          priority // Load immediately since it's a preview
+          placeholder="blur"
+          blurDataURL="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjRjNGNEY2Ii8+PC9zdmc+"
+          quality={85}
           className="object-contain w-full h-full rounded-md"
         />
       ) : (

components/modals/broadcast-dialog.tsx

@@ -7,6 +7,7 @@ import { Send, Bold, Italic, Code, Link as LinkIcon, Image as ImageIcon, X, Eye,
 import { toast } from "sonner";
 import { clientFetch } from "@/lib/api";
 import { Textarea } from "@/components/ui/textarea";
+import Image from "next/image";
 import ProductSelector from "./product-selector";
 
 const ReactMarkdown = lazy(() => import('react-markdown'));
@@ -275,9 +276,15 @@ __italic text__
 
             {imagePreview && (
               <div className="relative">
-                <img
+                <Image
                   src={imagePreview}
-                  alt="Preview"
+                  alt="Broadcast preview"
+                  width={400}
+                  height={200}
+                  priority // Load immediately since it's a preview
+                  placeholder="blur"
+                  blurDataURL="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjRjNGNEY2Ii8+PC9zdmc+"
+                  quality={85}
                   className="max-h-[200px] rounded-md object-contain"
                 />
                 <Button

middleware.ts

@@ -1,107 +0,0 @@
-import { NextResponse } from "next/server";
-import type { NextRequest } from "next/server";
-
-export async function middleware(req: NextRequest) {
-  const pathname = new URL(req.url).pathname;
-  
-  // Skip auth check for password reset page
-  if (pathname.startsWith('/auth/reset-password')) {
-    return NextResponse.next();
-  }
-  
-  // Check for auth token in cookies
-  const token = req.cookies.get("Authorization")?.value;
-  
-  // Debug info about all cookies
-  const allCookies = req.cookies.getAll();
-  console.log("Middleware: All cookies:", allCookies.map(c => c.name).join(', '));
-  
-  if (!token) {
-    // Try to get from Authorization header as fallback
-    const authHeader = req.headers.get('Authorization');
-    
-    if (authHeader?.startsWith('Bearer ')) {
-      console.log("Middleware: Token found in Authorization header");
-      // Continue with validation using header auth
-      // The authCheckUrl will handle extracting the token from header
-    } else {
-      console.log("Middleware: No token found in cookies or headers, redirecting to login...");
-      return NextResponse.redirect(new URL("/auth/login", req.url));
-    }
-  } else {
-    console.log("Middleware: Token found in cookies, validating...");
-  }
-
-  try {
-    // Always use localhost for internal container communication
-    const authCheckUrl = "http://localhost:3000/api/auth/check";
-    
-    console.log(`Using internal auth check URL: ${authCheckUrl}`);
-    
-    // Clone headers to avoid modifying the original request
-    const headers = new Headers(req.headers);
-    
-    // If token is in cookie, ensure it's also in Authorization header
-    if (token && !headers.has('Authorization')) {
-      headers.set('Authorization', `Bearer ${token}`);
-    }
-    
-    let res: Response;
-    try {
-      res = await fetch(authCheckUrl, {
-        method: "GET",
-        headers,
-        credentials: 'include',
-        signal: AbortSignal.timeout(15000), // 15 second timeout (increased for slower connections)
-      });
-    } catch (fetchError) {
-      // Handle timeout or network errors gracefully
-      console.error("Middleware: Auth check request failed:", fetchError);
-      
-      // If it's a timeout or network error, don't redirect - let the request proceed
-      // The page will handle auth errors client-side
-      if (fetchError instanceof Error && fetchError.name === 'TimeoutError') {
-        console.log("Middleware: Auth check timed out, allowing request to proceed");
-        return NextResponse.next();
-      }
-      
-      // For other network errors, redirect to login
-      return NextResponse.redirect(new URL("/auth/login", req.url));
-    }
-
-    console.log(`Middleware: Auth check responded with status ${res.status}`);
-
-    if (!res.ok) {
-      console.log(`Middleware: Auth check failed with status ${res.status}, redirecting to login`);
-      return NextResponse.redirect(new URL("/auth/login", req.url));
-    }
-
-    console.log("Middleware: Auth check successful");
-
-    // Admin-only protection for /dashboard/admin routes
-    // Clone the response before reading it to avoid consuming the body
-    if (pathname.startsWith('/dashboard/admin')) {
-      try {
-        const clonedRes = res.clone();
-        const user = await clonedRes.json();
-        const username = user?.vendor?.username;
-        if (username !== 'admin1') {
-          console.log("Middleware: Non-admin attempted to access /dashboard/admin, redirecting");
-          return NextResponse.redirect(new URL("/dashboard", req.url));
-        }
-      } catch (e) {
-        console.log("Middleware: Failed to parse user for admin check, redirecting to login");
-        return NextResponse.redirect(new URL("/auth/login", req.url));
-      }
-    }
-  } catch (error) {
-    console.error("Authentication validation failed:", error);
-    return NextResponse.redirect(new URL("/auth/login", req.url));
-  }
-
-  return NextResponse.next();
-}
-
-export const config = {
-  matcher: ["/dashboard/:path*", "/auth/reset-password/:path*"],
-};

next.config.mjs

@@ -25,7 +25,7 @@ const baseConfig = {
   },
   async rewrites() {
     const apiBaseUrl = process.env.API_BASE_URL;
-    
+
     if (!apiBaseUrl || apiBaseUrl === 'undefined') {
       console.warn('⚠️  API_BASE_URL not set! Set it to your backend domain');
       console.warn('⚠️  Using localhost fallback - this will fail in production!');
@@ -36,7 +36,7 @@ const baseConfig = {
         },
       ];
     }
-    
+
     console.log(`🔗 API rewrites pointing to: ${apiBaseUrl}`);
     return [
       {

package.json

@@ -54,6 +54,7 @@
     "form-data": "^4.0.2",
     "input-otp": "1.4.1",
     "jwt-decode": "^4.0.0",
+    "lodash": "^4.17.21",
     "lucide-react": "^0.454.0",
     "next": "^16.1.1",
     "next-themes": "latest",

pnpm-lock.yaml

@@ -119,6 +119,9 @@ importers:
       jwt-decode:
         specifier: ^4.0.0
         version: 4.0.0
+      lodash:
+        specifier: ^4.17.21
+        version: 4.17.21
       lucide-react:
         specifier: ^0.454.0
         version: 0.454.0(react@19.2.3)

public/git-info.json

@@ -1,4 +1,4 @@
 {
-  "commitHash": "8a43477",
+  "commitHash": "2477e9b",
-  "buildTime": "2026-01-07T13:11:47.102Z"
+  "buildTime": "2026-01-11T07:54:27.069Z"
 }