draft PR: Image Upload Support for Inventory Items #18

[BikramMondal5]

Description

This PR implements image upload support for inventory items, allowing resellers to attach a photo of the item itself or a purchase receipt directly from the Add/Edit Item modal.

What it does:

• Adds a new POST /api/inventory/upload-image server action that accepts a multipart image, validates it (type + 5 MB size limit), uploads it to a Supabase Storage bucket (inventory-images) scoped per user (userId/timestamp.ext), and returns the public URL.
• Extends the Add Item Modal (Step 1 — Basic Info) with a click-to-upload image input. A local preview renders instantly on file select while the upload happens asynchronously in the background. A status badge shows Uploading… / Uploaded and a remove button lets the user clear the image before submitting.
• The uploaded public URL is passed via a <input type="hidden" name="imageUrl"> field and persisted by the Prisma create and update action handlers in inventory-management.tsx.
• Adds a Photo thumbnail column to the Inventory Table — items with an image show a 40×40 cover thumbnail (scales on hover), while items without one show a dashed placeholder icon.
• Includes a local Prisma migration (20260708000048_add_image_url_to_inventory_item) that safely adds the imageUrl TEXT column via ADD COLUMN IF NOT EXISTS — a no-op if the column already exists from the initial migration.

Why it's needed:
Resellers frequently need to document items with photos for tax purposes, insurance, and easier identification. Without this, the inventory log is text-only, which is a common pain point.

---

Related Issues

#18

---

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update

---

Checklist

• My code follows the style guidelines of this project (CSS Modules with var(--color-*) tokens, ~/ import alias, TypeScript, no any outside of existing patterns)
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas (JSDoc on the API route, inline comments in the modal)
• I have made corresponding changes to the documentation
• My changes generate no new warnings

---

Screenshots (if applicable)

NA

Additional Notes

This is a Draft PR opened to show my progress as requested.

The implementation is complete on the code side, but one manual setup step is required on the Supabase project before this can be tested end-to-end.

Once you review the code and create the inventory-images bucket in supabase, I can proceed for the next step.

[vercel]

@BikramMondal5 is attempting to deploy a commit to the participationcorner2025-8967's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

📝 Summary

The provided pull request diff introduces a new feature for uploading and displaying item images in the inventory management system. It includes changes to the add-item-modal component, inventory-table component, and the addition of a new API route for uploading images to Supabase Storage. The diff also updates the Prisma schema to include an imageUrl column in the InventoryItem table.

📂 Files Changed

• app/blocks/inventory-management/add-item-modal.module.css: Added new CSS classes for the image upload feature.
• app/blocks/inventory-management/add-item-modal.tsx: Updated the component to include image upload functionality and display the uploaded image.
• app/blocks/inventory-management/inventory-table.module.css: Added new CSS classes for displaying item thumbnails.
• app/blocks/inventory-management/inventory-table.tsx: Updated the component to display item thumbnails.
• app/routes.ts: Added a new API route for uploading images to Supabase Storage.
• app/routes/api.inventory.upload-image.ts: Created a new API route for uploading images to Supabase Storage.
• app/routes/inventory-management.tsx: Updated the route to include the imageUrl field in the InventoryItem creation and update logic.
• prisma/migrations/20260708000048_add_image_url_to_inventory_item/migration.sql: Added a new migration to include the imageUrl column in the InventoryItem table.

🎭 Code Poem

Images uploaded with care,
Displayed in the inventory with flair,
New features added, code so fine,
Improving the app, one commit at a time.

🚨 Bugs & Architectural Violations

The provided diff does not appear to introduce any critical bugs or architectural violations. However, it's essential to review the code thoroughly to ensure that it adheres to the project's coding standards and best practices. One potential issue is the use of `URL.createObjectURL` to create a local preview of the uploaded image. This may cause memory leaks if not properly cleaned up. It's recommended to use `URL.revokeObjectURL` to release the object URL when it's no longer needed.

💡 Suggestions & Best Practices

To improve the code, consider the following suggestions: * Use a more robust error handling mechanism in the `handleImageSelect` function to handle potential errors during the image upload process. * Add accessibility attributes to the image upload button and the thumbnail container to improve the component's accessibility. * Consider using a library like `react-dropzone` to handle file uploads and provide a more seamless user experience. * Use a consistent naming convention throughout the codebase to improve readability and maintainability. * Add comments and documentation to the code to explain the purpose and functionality of each component and function.