feat(F-055): completed feature

project/apps/admin/package-lock.json

@@ -10,7 +10,8 @@
       "dependencies": {
         "next": "16.3.1",
         "react": "19.2.8",
-        "react-dom": "19.2.8"
+        "react-dom": "19.2.8",
+        "sharp": "^0.35.3"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
@@ -524,7 +525,6 @@
       "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz",
       "integrity": "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==",
       "license": "MIT",
-      "optional": true,
       "engines": {
         "node": ">=18"
       }
@@ -2933,7 +2933,6 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
       "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
-      "devOptional": true,
       "license": "Apache-2.0",
       "engines": {
         "node": ">=8"
@@ -5885,7 +5884,6 @@
       "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.35.3.tgz",
       "integrity": "sha512-ej0zVHuZGHCiABXcNxeYhpRnPNPAcvbG8RMdBAhDAxLKkCRVSpK3Iyu7qbqw3JMzoj0REeM6f3tJLtVwl0023Q==",
       "license": "Apache-2.0",
-      "optional": true,
       "dependencies": {
         "@img/colour": "^1.1.0",
         "detect-libc": "^2.1.2",
@@ -5935,7 +5933,6 @@
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz",
       "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==",
       "license": "ISC",
-      "optional": true,
       "bin": {
         "semver": "bin/semver.js"
       },

project/apps/admin/package.json

@@ -12,7 +12,8 @@
   "dependencies": {
     "next": "16.3.1",
     "react": "19.2.8",
-    "react-dom": "19.2.8"
+    "react-dom": "19.2.8",
+    "sharp": "^0.35.3"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

project/apps/admin/src/app/(dashboard)/products/page.tsx

@@ -159,7 +159,7 @@ export default function ProductsPage() {
                       <div className="flex items-center gap-3">
                         {p.imageUrl ? (
                           <img
-                            src={p.imageUrl}
+                            src={p.imageUrl.replace('/uploads/', '/uploads/40/')}
                             alt={p.name}
                             className="w-10 h-10 rounded-lg object-cover bg-gray-100 flex-shrink-0"
                           />

project/apps/admin/src/app/uploads/[filename]/route.ts

@@ -1,49 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server';
-import { readFile } from 'fs/promises';
-import path from 'path';
-
-const MIME: Record<string, string> = {
-  '.jpg': 'image/jpeg',
-  '.jpeg': 'image/jpeg',
-  '.png': 'image/png',
-  '.webp': 'image/webp',
-  '.avif': 'image/avif',
-  '.gif': 'image/gif',
-};
-
-/**
- * Serves uploaded files dynamically from disk on every request.
- *
- * Next.js production mode caches the public/ directory listing at build/start
- * time, so files uploaded after startup return 404 when served as static
- * assets. This route handler reads the file fresh from disk each time,
- * making newly uploaded images immediately available without a restart.
- */
-export async function GET(
-  _request: NextRequest,
-  { params }: { params: Promise<{ filename: string }> },
-) {
-  const { filename } = await params;
-
-  // Prevent path traversal
-  const safe = path.basename(filename);
-  if (safe !== filename || filename.includes('..')) {
-    return NextResponse.json({ error: 'Invalid filename' }, { status: 400 });
-  }
-
-  const ext = path.extname(safe).toLowerCase();
-  const filePath = path.join(process.cwd(), 'public', 'uploads', safe);
-
-  try {
-    const buffer = await readFile(filePath);
-    return new NextResponse(buffer, {
-      headers: {
-        'Content-Type': MIME[ext] ?? 'application/octet-stream',
-        'Cache-Control': 'public, max-age=31536000, immutable',
-        'X-Content-Type-Options': 'nosniff',
-      },
-    });
-  } catch {
-    return NextResponse.json({ error: 'Not found' }, { status: 404 });
-  }
-}

project/apps/admin/src/features/products/components/sections/ImagesSection.tsx

@@ -173,8 +173,9 @@ export function ImagesSection({ productId }: ImagesSectionProps) {
         <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
           {images.map((img, idx) => (
             <div key={img.id} className="relative group">
+              {/* Use 200px thumbnail for editor preview to reduce bandwidth */}
               <img
-                src={img.url}
+                src={img.url.replace('/uploads/', '/uploads/200/')}
                 alt={img.altText ?? img.url}
                 className="w-full aspect-square object-cover rounded-xl bg-gray-100"
               />