fix: add image to menu item (#42)

Co-authored-by: Thanh Quy - wolf <524H0124@student.tdtu.edu.vn>
Co-authored-by: Thanh Quy- wolf <524H0124@student.tdtu.edu.vn>
Reviewed-on: #42
Co-authored-by: TaNguyenThanhQuy <tanguyenthanhquy@noreply.localhost>
Co-committed-by: TaNguyenThanhQuy <tanguyenthanhquy@noreply.localhost>

components/organisms/manager/ProductModal.tsx

@@ -14,13 +14,60 @@ export default function ProductModal({
   const [form, setForm] = useState<MenuItemEntity>({
     name: product?.name ?? "",
     price: product?.price ?? 0,
-    imageUrl: product?.imageUrl ?? "/imgs/products/placeholder.jpg",
+    imageUrl: product?.imageUrl ?? "",
     description: product?.description ?? "",
     available: product?.available ?? true,
   });
 
+  const [uploading, setUploading] = useState(false);
+  const [uploadError, setUploadError] = useState<string | null>(null);
+
+  const inputCls =
+    "text-foreground w-full rounded-xl border border-(--color-border) bg-white px-3 py-2 text-sm transition outline-none focus:border-(--color-primary) focus:ring-2 focus:ring-(--color-primary)/20";
+
+  const uploadImage = async (file: File) => {
+    setUploading(true);
+    setUploadError(null);
+
+    try {
+      const body = new FormData();
+      body.append("file", file);
+
+      const res = await fetch("/api/file", {
+        method: "POST",
+        body,
+      });
+
+      if (!res.ok) {
+        throw new Error("Upload ảnh thất bại.");
+      }
+
+      const raw = await res.text();
+
+      let filename = "";
+      try {
+        const parsed = JSON.parse(raw.trim());
+        filename = parsed.filename || "";
+      } catch {
+        const match = raw.match(/"filename"\s*:\s*"([^"]+)"/i);
+        filename = match?.[1] || "";
+      }
+
+      if (!filename) {
+        throw new Error("Không nhận được filename ảnh từ server.");
+      }
+
+      setForm((prev) => ({ ...prev, imageUrl: filename }));
+    } catch (error: any) {
+      setUploadError(error?.message || "Không thể upload ảnh.");
+    } finally {
+      setUploading(false);
+    }
+  };
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
+
     if (isEdit && product) {
       onSave({ ...form, id: product.id });
     } else {
@@ -28,14 +75,21 @@ export default function ProductModal({
     }
   };
 
-  const inputCls =
-    "text-foreground w-full rounded-xl border border-(--color-border) bg-white px-3 py-2 text-sm transition outline-none focus:border-(--color-primary) focus:ring-2 focus:ring-(--color-primary)/20";
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    await uploadImage(file);
+  };
+
+  const toDisplayUrl = (filename: string) =>
+    filename && !filename.startsWith("/") && !filename.startsWith("http")
+      ? `/api/file/${filename}`
+      : filename;
+
+  const previewUrl = toDisplayUrl(form.imageUrl);
 
   return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4 backdrop-blur-sm"
-      onClick={(e) => e.target === e.currentTarget && onClose()}
-    >
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4 backdrop-blur-sm">
       <div className="w-full max-w-lg rounded-2xl bg-white shadow-2xl">
         <div className="flex items-center justify-between border-b border-(--color-border-light) px-6 py-4">
           <h2 className="text-foreground text-lg font-bold">
@@ -83,6 +137,46 @@ export default function ProductModal({
             />
           </div>
 
+          <div>
+            <label className="mb-1 block text-sm font-medium text-(--color-text-secondary)">
+              Ảnh món
+            </label>
+
+            <div className="space-y-2">
+              <input
+                type="file"
+                accept="image/*"
+                onChange={handleFileChange}
+                disabled={uploading}
+                className="text-foreground w-full rounded-xl border border-(--color-border) bg-white px-3 py-2 text-sm disabled:opacity-60"
+              />
+
+              {uploading && (
+                <p className="text-sm text-(--color-text-muted)">
+                  <i className="fa-solid fa-spinner mr-1 animate-spin"></i>
+                  Đang upload ảnh...
+                </p>
+              )}
+            </div>
+
+            {previewUrl && (
+              <div className="mt-2">
+                <img
+                  src={previewUrl}
+                  alt="Preview ảnh món"
+                  className="h-24 w-24 rounded-lg border border-(--color-border-light) object-cover"
+                />
+              </div>
+            )}
+
+            {uploadError && (
+              <p className="mt-1 text-sm text-red-500">
+                <i className="fa-solid fa-circle-exclamation mr-1"></i>
+                {uploadError}
+              </p>
+            )}
+          </div>
+
           <div>
             <label className="mb-1 block text-sm font-medium text-(--color-text-secondary)">
               Mô tả
@@ -131,7 +225,8 @@ export default function ProductModal({
             </button>
             <button
               type="submit"
-              className="flex-1 cursor-pointer rounded-xl border-none bg-(--color-primary) px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-(--color-primary-dark) active:scale-95"
+              disabled={uploading}
+              className="flex-1 cursor-pointer rounded-xl border-none bg-(--color-primary) px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-(--color-primary-dark) active:scale-95 disabled:opacity-60"
             >
               {isEdit ? "Lưu thay đổi" : "Thêm món"}
             </button>

components/organisms/manager/ProductsTab.tsx

@@ -12,6 +12,12 @@ function formatPrice(price: number) {
   return price.toLocaleString("vi-VN") + "đ";
 }
 
+function toDisplayUrl(filename: string) {
+  if (!filename) return "/imgs/products/placeholder.jpg";
+  if (filename.startsWith("/") || filename.startsWith("http")) return filename;
+  return `/api/file/${filename}`;
+}
+
 export default function ProductsTab() {
   const {
     products,
@@ -102,6 +108,9 @@ export default function ProductsTab() {
         <table className="min-w-full divide-y divide-(--color-border-light) text-sm">
           <thead className="bg-background">
             <tr>
+              <th className="px-4 py-3 text-left font-semibold text-(--color-text-secondary)">
+                Ảnh
+              </th>
               <th className="px-4 py-3 text-left font-semibold text-(--color-text-secondary)">
                 Tên món
               </th>
@@ -133,6 +142,13 @@ export default function ProductsTab() {
                   key={p.id}
                   className="hover:bg-background transition-colors"
                 >
+                  <td className="px-4 py-3">
+                    <img
+                      src={toDisplayUrl(p.imageUrl)}
+                      alt={p.name}
+                      className="h-10 w-10 rounded-lg border border-(--color-border-light) object-cover"
+                    />
+                  </td>
                   <td className="px-4 py-3">
                     <div>
                       <p className="text-foreground font-medium">{p.name}</p>