From 2f6dbc7e85615345e063256efc31fee89c5c73b5 Mon Sep 17 00:00:00 2001
From: Bikram Mondal <codesnippets45@gmail.com>
Date: Wed, 8 Jul 2026 00:07:56 +0530
Subject: [PATCH] creating-a-draft-pt-for-issue-18

---
 .../add-item-modal.module.css                 | 120 ++++++++++++++++
 .../inventory-management/add-item-modal.tsx   | 132 +++++++++++++++++-
 .../inventory-table.module.css                |  30 ++++
 .../inventory-management/inventory-table.tsx  |  18 ++-
 app/routes.ts                                 |   1 +
 app/routes/api.inventory.upload-image.ts      |  78 +++++++++++
 app/routes/inventory-management.tsx           |   4 +
 .../migration.sql                             |   3 +
 8 files changed, 383 insertions(+), 3 deletions(-)
 create mode 100644 app/routes/api.inventory.upload-image.ts
 create mode 100644 prisma/migrations/20260708000048_add_image_url_to_inventory_item/migration.sql

diff --git a/app/blocks/inventory-management/add-item-modal.module.css b/app/blocks/inventory-management/add-item-modal.module.css
index d4ed1e0..c4ba372 100644
--- a/app/blocks/inventory-management/add-item-modal.module.css
+++ b/app/blocks/inventory-management/add-item-modal.module.css
@@ -97,3 +97,123 @@
   color: var(--color-text-subtle);
   line-height: 1.4;
 }
+
+/* ── Image Upload ─────────────────────────────────────────── */
+
+/* Drag-and-drop / click-to-upload button */
+.imageUploadBtn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  width: 100%;
+  padding: var(--space-5) var(--space-4);
+  border-radius: var(--radius-md);
+  border: 1.5px dashed var(--color-border);
+  background: var(--color-bg-surface);
+  color: var(--color-text-muted);
+  font-size: 13px;
+  cursor: pointer;
+  transition: border-color var(--transition-base), background var(--transition-base), color var(--transition-base);
+  text-align: center;
+}
+
+.imageUploadBtn:hover {
+  border-color: var(--color-primary);
+  background: rgba(0, 255, 136, 0.05);
+  color: var(--color-text);
+}
+
+.imageUploadHint {
+  font-size: 11px;
+  color: var(--color-text-subtle);
+  margin-top: var(--space-1);
+}
+
+.imageUploadIcon {
+  color: var(--color-primary);
+  opacity: 0.7;
+}
+
+/* Preview wrapper */
+.imagePreviewWrapper {
+  position: relative;
+  width: 100%;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-surface);
+  max-height: 180px;
+}
+
+.imagePreview {
+  display: block;
+  width: 100%;
+  max-height: 180px;
+  object-fit: cover;
+}
+
+/* Overlay appears on hover */
+.imagePreviewOverlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  padding: var(--space-2) var(--space-3);
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 60%);
+  opacity: 0;
+  transition: opacity var(--transition-base);
+}
+
+.imagePreviewWrapper:hover .imagePreviewOverlay {
+  opacity: 1;
+}
+
+/* Uploading badge */
+.imageUploadingBadge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: 3px 8px;
+  border-radius: var(--radius-full);
+  font-size: 11px;
+  font-weight: 700;
+  background: rgba(0, 0, 0, 0.55);
+  color: #fff;
+  backdrop-filter: blur(4px);
+}
+
+/* Uploaded / success badge */
+.imageUploadedBadge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: 3px 8px;
+  border-radius: var(--radius-full);
+  font-size: 11px;
+  font-weight: 700;
+  background: var(--color-success-bg);
+  color: var(--color-success);
+}
+
+/* Remove button */
+.imageRemoveBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+  border-radius: var(--radius-full);
+  border: none;
+  background: rgba(220, 38, 38, 0.85);
+  color: #fff;
+  cursor: pointer;
+  transition: background var(--transition-fast), transform var(--transition-fast);
+}
+
+.imageRemoveBtn:hover {
+  background: var(--color-danger);
+  transform: scale(1.1);
+}
+
diff --git a/app/blocks/inventory-management/add-item-modal.tsx b/app/blocks/inventory-management/add-item-modal.tsx
index eb292e6..3ee9cf7 100644
--- a/app/blocks/inventory-management/add-item-modal.tsx
+++ b/app/blocks/inventory-management/add-item-modal.tsx
@@ -1,6 +1,14 @@
 import { useState, useRef } from "react";
 import { Form } from "react-router";
-import { IconX, IconScan, IconLoader2, IconCheck } from "@tabler/icons-react";
+import {
+  IconX,
+  IconScan,
+  IconLoader2,
+  IconCheck,
+  IconPhoto,
+  IconTrash,
+  IconUpload,
+} from "@tabler/icons-react";
 import { toast } from "sonner";
 import styles from "./add-item-modal.module.css";
 
@@ -12,6 +20,7 @@ interface Props {
 }
 
 type ScanState = "idle" | "scanning" | "success";
+type UploadState = "idle" | "uploading" | "done" | "error";
 
 const steps = ["Basic Info", "Purchase Details", "Marketplace"];
 
@@ -25,6 +34,12 @@ export function AddItemModal({ className, onClose, item, isDuplicate = false }:
     item?.purchasePrice ? String(Number(item.purchasePrice)) : "",
   );
 
+  // Image upload state
+  const [imageUrl, setImageUrl] = useState<string>(item?.imageUrl ?? "");
+  const [imagePreview, setImagePreview] = useState<string>(item?.imageUrl ?? "");
+  const [uploadState, setUploadState] = useState<UploadState>("idle");
+  const imageInputRef = useRef<HTMLInputElement>(null);
+
   const [scanState, setScanState] = useState<ScanState>("idle");
   const fileInputRef = useRef<HTMLInputElement>(null);
 
@@ -86,6 +101,55 @@ export function AddItemModal({ className, onClose, item, isDuplicate = false }:
     }
   };
 
+  /** Handle item image selection and upload to Supabase Storage */
+  const handleImageSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    // Reset input value so the same file can be re-selected if needed
+    e.target.value = "";
+
+    // Show local preview immediately
+    const objectUrl = URL.createObjectURL(file);
+    setImagePreview(objectUrl);
+    setUploadState("uploading");
+
+    try {
+      const fd = new FormData();
+      fd.append("image", file);
+
+      const res = await fetch("/api/inventory/upload-image", {
+        method: "POST",
+        body: fd,
+      });
+
+      const data = await res.json();
+
+      if (!data.ok) {
+        throw new Error(data.error ?? "Upload failed.");
+      }
+
+      setImageUrl(data.url);
+      setUploadState("done");
+      toast.success("Image uploaded successfully.");
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : "Image upload failed.";
+      toast.error(message);
+      setImageUrl("");
+      setImagePreview("");
+      setUploadState("error");
+    }
+  };
+
+  const handleRemoveImage = () => {
+    setImageUrl("");
+    setImagePreview("");
+    setUploadState("idle");
+    if (imageInputRef.current) {
+      imageInputRef.current.value = "";
+    }
+  };
+
   const scanButtonLabel =
     scanState === "scanning" ? "Scanning…" : scanState === "success" ? "Extracted!" : "Scan Receipt / Invoice";
 
@@ -110,6 +174,8 @@ export function AddItemModal({ className, onClose, item, isDuplicate = false }:
         <Form method="post" action="/app/inventory">
           <input type="hidden" name="intent" value={item && !isDuplicate ? "update" : "create"} />
           {item && !isDuplicate && <input type="hidden" name="itemId" value={item.id} />}
+          {/* Hidden field to carry the uploaded image URL to the server */}
+          <input type="hidden" name="imageUrl" value={imageUrl} />
           <div className={styles.body}>
             {step === 0 && (
               <>
@@ -152,6 +218,68 @@ export function AddItemModal({ className, onClose, item, isDuplicate = false }:
                   <span className={styles.scanHint}>AI will auto-fill SKU, name &amp; price from your image</span>
                 </div>
 
+                {/* ── Image Upload ── */}
+                <div className={styles.field}>
+                  <label className={styles.label} htmlFor="field-item-image">
+                    Item / Receipt Photo
+                  </label>
+                  <input
+                    ref={imageInputRef}
+                    id="field-item-image"
+                    type="file"
+                    accept="image/jpeg,image/png,image/webp,image/gif"
+                    className={styles.hiddenFileInput}
+                    onChange={handleImageSelect}
+                    aria-label="Upload item or receipt photo"
+                  />
+                  {imagePreview ? (
+                    <div className={styles.imagePreviewWrapper}>
+                      <img
+                        src={imagePreview}
+                        alt="Item preview"
+                        className={styles.imagePreview}
+                      />
+                      <div className={styles.imagePreviewOverlay}>
+                        {uploadState === "uploading" && (
+                          <div className={styles.imageUploadingBadge}>
+                            <IconLoader2 size={14} className={styles.spinnerIcon} />
+                            Uploading…
+                          </div>
+                        )}
+                        {uploadState === "done" && (
+                          <div className={styles.imageUploadedBadge}>
+                            <IconCheck size={14} />
+                            Uploaded
+                          </div>
+                        )}
+                        <button
+                          type="button"
+                          className={styles.imageRemoveBtn}
+                          onClick={handleRemoveImage}
+                          aria-label="Remove image"
+                          title="Remove image"
+                        >
+                          <IconTrash size={14} />
+                        </button>
+                      </div>
+                    </div>
+                  ) : (
+                    <button
+                      type="button"
+                      id="upload-item-image-btn"
+                      className={styles.imageUploadBtn}
+                      onClick={() => imageInputRef.current?.click()}
+                    >
+                      <IconPhoto size={20} />
+                      <span>
+                        <strong>Click to upload</strong> item photo or receipt
+                      </span>
+                      <span className={styles.imageUploadHint}>JPEG, PNG, WebP or GIF · max 5 MB</span>
+                      <IconUpload size={14} className={styles.imageUploadIcon} />
+                    </button>
+                  )}
+                </div>
+
                 {/* ── Basic Info Fields ── */}
                 <div className={styles.field}>
                   <label className={styles.label} htmlFor="field-sku">
@@ -317,7 +445,7 @@ export function AddItemModal({ className, onClose, item, isDuplicate = false }:
                 Next
               </button>
             ) : (
-              <button type="submit" className={styles.nextBtn}>
+              <button type="submit" className={styles.nextBtn} disabled={uploadState === "uploading"}>
                 {isDuplicate ? "Duplicate Item" : item ? "Save Changes" : "Add Item"}
               </button>
             )}
diff --git a/app/blocks/inventory-management/inventory-table.module.css b/app/blocks/inventory-management/inventory-table.module.css
index f51b192..db85355 100644
--- a/app/blocks/inventory-management/inventory-table.module.css
+++ b/app/blocks/inventory-management/inventory-table.module.css
@@ -18,3 +18,33 @@
 .checkbox { width: 14px; height: 14px; cursor: pointer; accent-color: var(--color-primary); }
 .actionBtn { padding: 4px 10px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500; border: 1px solid var(--color-border); background: none; color: var(--color-text-muted); cursor: pointer; }
 .actionBtn:hover { background: var(--color-bg-elevated); }
+
+/* ── Item Thumbnail ─────────────────────────────────────── */
+.thumbnail {
+  width: 40px;
+  height: 40px;
+  object-fit: cover;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-border);
+  display: block;
+  background: var(--color-bg-surface);
+  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.thumbnail:hover {
+  transform: scale(1.08);
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
+}
+
+.thumbnailPlaceholder {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-sm);
+  border: 1px dashed var(--color-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-subtle);
+  background: var(--color-bg-surface);
+}
+
diff --git a/app/blocks/inventory-management/inventory-table.tsx b/app/blocks/inventory-management/inventory-table.tsx
index 73c6988..8acb06c 100644
--- a/app/blocks/inventory-management/inventory-table.tsx
+++ b/app/blocks/inventory-management/inventory-table.tsx
@@ -1,5 +1,5 @@
 import { Link, Form } from "react-router";
-import { IconAlertTriangle } from "@tabler/icons-react";
+import { IconAlertTriangle, IconPhoto } from "@tabler/icons-react";
 import styles from "./inventory-table.module.css";
 
 interface Props {
@@ -33,6 +33,7 @@ export function InventoryTable({ className, selected, onSelectChange, items, onE
                   onChange={toggleAll}
                 />
               </th>
+              <th className={styles.th}>Photo</th>
               <th className={styles.th}>Item</th>
               <th className={styles.th}>SKU</th>
               <th className={styles.th}>Size</th>
@@ -57,6 +58,21 @@ export function InventoryTable({ className, selected, onSelectChange, items, onE
                       onChange={() => toggle(item.id)}
                     />
                   </td>
+                  <td className={styles.td}>
+                    {item.imageUrl ? (
+                      <img
+                        src={item.imageUrl}
+                        alt={item.name}
+                        className={styles.thumbnail}
+                        loading="lazy"
+                        title={item.name}
+                      />
+                    ) : (
+                      <div className={styles.thumbnailPlaceholder} title="No image">
+                        <IconPhoto size={16} />
+                      </div>
+                    )}
+                  </td>
                   <td className={styles.td}>
                     <Link to={`/app/inventory/${item.id}`} className={styles.nameLink}>
                       {item.name}
diff --git a/app/routes.ts b/app/routes.ts
index da0437d..af0e8f5 100644
--- a/app/routes.ts
+++ b/app/routes.ts
@@ -46,6 +46,7 @@ export default [
   
   // 🌟 Kept from main branch merge (Placed safely above dynamic route)
   route("/api/inventory/search", "routes/api.inventory.search.ts"),
+  route("/api/inventory/upload-image", "routes/api.inventory.upload-image.ts"),
   route("/api/integrations", "routes/api.integrations.ts"),
   
   // 🌟 Your dynamic showroom route (Must stay at the very end as a catch-all)
diff --git a/app/routes/api.inventory.upload-image.ts b/app/routes/api.inventory.upload-image.ts
new file mode 100644
index 0000000..c8e884a
--- /dev/null
+++ b/app/routes/api.inventory.upload-image.ts
@@ -0,0 +1,78 @@
+import type { Route } from "./+types/api.inventory.upload-image";
+import { getSupabaseServerClient } from "~/utils/supabase.server";
+
+/**
+ * POST /api/inventory/upload-image
+ *
+ * Accepts a multipart/form-data body with an `image` field.
+ * Uploads the file to the `inventory-images` Supabase Storage bucket
+ * (public reads, authenticated uploads) and returns the public URL.
+ *
+ * Returns: { ok: true, url: string } | { ok: false, error: string }
+ */
+export async function action({ request }: Route.ActionArgs) {
+  const { supabase } = getSupabaseServerClient(request);
+
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  if (!user) {
+    return Response.json({ ok: false, error: "Unauthorized" }, { status: 401 });
+  }
+
+  let formData: FormData;
+  try {
+    formData = await request.formData();
+  } catch {
+    return Response.json({ ok: false, error: "Invalid request body." }, { status: 400 });
+  }
+
+  const image = formData.get("image");
+
+  if (!(image instanceof File) || image.size === 0) {
+    return Response.json({ ok: false, error: "No image file provided." }, { status: 400 });
+  }
+
+  // Validate file type
+  const allowedTypes = ["image/jpeg", "image/png", "image/webp", "image/gif"];
+  if (!allowedTypes.includes(image.type)) {
+    return Response.json(
+      { ok: false, error: "Unsupported file type. Please upload a JPEG, PNG, WebP, or GIF." },
+      { status: 400 },
+    );
+  }
+
+  // Validate file size (max 5 MB)
+  const MAX_BYTES = 5 * 1024 * 1024;
+  if (image.size > MAX_BYTES) {
+    return Response.json({ ok: false, error: "Image exceeds the 5 MB size limit." }, { status: 400 });
+  }
+
+  const ext = image.name.split(".").pop() ?? "jpg";
+  const fileName = `${user.id}/${Date.now()}.${ext}`;
+
+  const arrayBuffer = await image.arrayBuffer();
+  const buffer = Buffer.from(arrayBuffer);
+
+  const { error: uploadError } = await supabase.storage
+    .from("inventory-images")
+    .upload(fileName, buffer, {
+      contentType: image.type,
+      upsert: false,
+    });
+
+  if (uploadError) {
+    console.error("[upload-image] Supabase storage error:", uploadError);
+    return Response.json(
+      { ok: false, error: uploadError.message ?? "Upload failed. Please try again." },
+      { status: 500 },
+    );
+  }
+
+  const {
+    data: { publicUrl },
+  } = supabase.storage.from("inventory-images").getPublicUrl(fileName);
+
+  return Response.json({ ok: true, url: publicUrl });
+}
diff --git a/app/routes/inventory-management.tsx b/app/routes/inventory-management.tsx
index 5139a31..940dcf2 100644
--- a/app/routes/inventory-management.tsx
+++ b/app/routes/inventory-management.tsx
@@ -192,6 +192,7 @@ export async function action({ request }: Route.ActionArgs) {
     const condition = formData.get("condition") as ItemCondition;
     const colorway = formData.get("colorway") as string;
     const notes = formData.get("notes") as string;
+    const imageUrl = (formData.get("imageUrl") as string) || null;
 
     await prisma.inventoryItem.create({
       data: {
@@ -205,6 +206,7 @@ export async function action({ request }: Route.ActionArgs) {
         condition,
         colorway,
         notes,
+        imageUrl,
         status: "IN_STOCK",
       },
     });
@@ -219,6 +221,7 @@ export async function action({ request }: Route.ActionArgs) {
     const condition = formData.get("condition") as ItemCondition;
     const colorway = formData.get("colorway") as string;
     const notes = formData.get("notes") as string;
+    const imageUrl = (formData.get("imageUrl") as string) || null;
 
     await prisma.inventoryItem.update({
       where: { id: itemId, userId: user.id },
@@ -232,6 +235,7 @@ export async function action({ request }: Route.ActionArgs) {
         condition,
         colorway,
         notes,
+        imageUrl,
       },
     });
   } else if (intent === "delete") {
diff --git a/prisma/migrations/20260708000048_add_image_url_to_inventory_item/migration.sql b/prisma/migrations/20260708000048_add_image_url_to_inventory_item/migration.sql
new file mode 100644
index 0000000..e265415
--- /dev/null
+++ b/prisma/migrations/20260708000048_add_image_url_to_inventory_item/migration.sql
@@ -0,0 +1,3 @@
+-- AlterTable: Add imageUrl column to InventoryItem for storing image URLs
+-- This migration is a safe no-op if the column already exists (idempotent via IF NOT EXISTS).
+ALTER TABLE "InventoryItem" ADD COLUMN IF NOT EXISTS "imageUrl" TEXT;