From fa41f12e3dcc36ea8d9e03d27a778c409770597d Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Fri, 23 Jan 2026 22:24:05 -0800
Subject: [PATCH] revamp edit item modal

---
 .../src/components/modals/EditItemModal.jsx   | 134 +++++++++++++-----
 .../src/styles/components/EditItemModal.css   | 101 +++++++++----
 2 files changed, 174 insertions(+), 61 deletions(-)

diff --git a/frontend/src/components/modals/EditItemModal.jsx b/frontend/src/components/modals/EditItemModal.jsx
index 502fb02..b1624a8 100644
--- a/frontend/src/components/modals/EditItemModal.jsx
+++ b/frontend/src/components/modals/EditItemModal.jsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
+import { ITEM_GROUPS, ITEM_TYPES, getItemTypeLabel, getZoneValues } from "../../constants/classifications";
 import "../../styles/components/EditItemModal.css";
-import ClassificationSection from "../forms/ClassificationSection";
 import AddImageModal from "./AddImageModal";
 
 export default function EditItemModal({ item, onSave, onCancel, onImageUpdate }) {
@@ -72,58 +72,120 @@ export default function EditItemModal({ item, onSave, onCancel, onImageUpdate })
     }
   };
 
+  const incrementQuantity = () => {
+    setQuantity(prev => prev + 1);
+  };
+
+  const decrementQuantity = () => {
+    setQuantity(prev => Math.max(1, prev - 1));
+  };
+
+  const availableGroups = itemType ? (ITEM_GROUPS[itemType] || []) : [];
+
   return (
     <div className="edit-modal-overlay" onClick={onCancel}>
       <div className="edit-modal-content" onClick={(e) => e.stopPropagation()}>
         <h2 className="edit-modal-title">Edit Item</h2>
 
-        <div className="edit-modal-field">
-          <label>Item Name</label>
-          <input
-            type="text"
-            value={itemName}
-            onChange={(e) => setItemName(e.target.value)}
-            className="edit-modal-input"
-          />
-        </div>
+        {/* Item Name - no label */}
+        <input
+          type="text"
+          value={itemName}
+          onChange={(e) => setItemName(e.target.value)}
+          className="edit-modal-input"
+          placeholder="Item name"
+        />
 
-        <div className="edit-modal-field">
-          <label>Quantity</label>
+        {/* Quantity Control - like AddItemForm */}
+        <div className="edit-modal-quantity-control">
+          <button
+            type="button"
+            className="quantity-btn quantity-btn-minus"
+            onClick={decrementQuantity}
+            disabled={quantity <= 1}
+          >
+            −
+          </button>
           <input
             type="number"
             min="1"
+            className="edit-modal-quantity-input"
             value={quantity}
-            onChange={(e) => setQuantity(parseInt(e.target.value))}
-            className="edit-modal-input"
+            readOnly
           />
-        </div>
-
-        <div className="edit-modal-divider" />
-
-        <ClassificationSection
-          itemType={itemType}
-          itemGroup={itemGroup}
-          zone={zone}
-          onItemTypeChange={handleItemTypeChange}
-          onItemGroupChange={setItemGroup}
-          onZoneChange={setZone}
-          fieldClass="edit-modal-field"
-          selectClass="edit-modal-select"
-        />
-
-        <div className="edit-modal-divider" />
-
-        <div className="edit-modal-field">
           <button
-            className="edit-modal-btn edit-modal-btn-image"
-            onClick={() => setShowImageModal(true)}
-            disabled={loading}
             type="button"
+            className="quantity-btn quantity-btn-plus"
+            onClick={incrementQuantity}
           >
-            {item.item_image ? "🖼️ Change Image" : "📷 Set Image"}
+            +
           </button>
         </div>
 
+        <div className="edit-modal-divider" />
+
+        {/* Inline Classification Fields */}
+        <div className="edit-modal-inline-field">
+          <label>Type</label>
+          <select
+            value={itemType}
+            onChange={(e) => handleItemTypeChange(e.target.value)}
+            className="edit-modal-select"
+          >
+            <option value="">-- Select Type --</option>
+            {Object.values(ITEM_TYPES).map((type) => (
+              <option key={type} value={type}>
+                {getItemTypeLabel(type)}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        {itemType && (
+          <div className="edit-modal-inline-field">
+            <label>Group</label>
+            <select
+              value={itemGroup}
+              onChange={(e) => setItemGroup(e.target.value)}
+              className="edit-modal-select"
+            >
+              <option value="">-- Select Group --</option>
+              {availableGroups.map((group) => (
+                <option key={group} value={group}>
+                  {group}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
+
+        <div className="edit-modal-inline-field">
+          <label>Zone</label>
+          <select
+            value={zone}
+            onChange={(e) => setZone(e.target.value)}
+            className="edit-modal-select"
+          >
+            <option value="">-- Select Zone --</option>
+            {getZoneValues().map((z) => (
+              <option key={z} value={z}>
+                {z}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div className="edit-modal-divider" />
+
+        <button
+          className="edit-modal-btn edit-modal-btn-image"
+          onClick={() => setShowImageModal(true)}
+          disabled={loading}
+          type="button"
+        >
+          {item.item_image ? "🖼️ Change Image" : "📷 Set Image"}
+        </button>
+
         <div className="edit-modal-actions">
           <button
             className="edit-modal-btn edit-modal-btn-cancel"
diff --git a/frontend/src/styles/components/EditItemModal.css b/frontend/src/styles/components/EditItemModal.css
index 272ff05..9613520 100644
--- a/frontend/src/styles/components/EditItemModal.css
+++ b/frontend/src/styles/components/EditItemModal.css
@@ -15,8 +15,8 @@
 .edit-modal-content {
   background: var(--modal-bg);
   border-radius: var(--border-radius-xl);
-  padding: var(--spacing-xl);
-  max-width: 480px;
+  padding: var(--spacing-lg);
+  max-width: 420px;
   width: 100%;
   max-height: 90vh;
   overflow-y: auto;
@@ -24,30 +24,12 @@
 }
 
 .edit-modal-title {
-  font-size: var(--font-size-2xl);
+  font-size: var(--font-size-xl);
   margin: 0 0 var(--spacing-md) 0;
   text-align: center;
   color: var(--color-text-primary);
 }
 
-.edit-modal-subtitle {
-  font-size: var(--font-size-lg);
-  margin: var(--spacing-sm) 0 var(--spacing-md) 0;
-  color: var(--color-text-secondary);
-}
-
-.edit-modal-field {
-  margin-bottom: 1em;
-}
-
-.edit-modal-field label {
-  display: block;
-  margin-bottom: var(--spacing-xs);
-  font-weight: 600;
-  color: var(--color-text-primary);
-  font-size: 0.95em;
-}
-
 .edit-modal-input,
 .edit-modal-select {
   width: 100%;
@@ -59,6 +41,7 @@
   transition: var(--transition-base);
   background: var(--color-bg-surface);
   color: var(--color-text-primary);
+  margin-bottom: var(--spacing-sm);
 }
 
 .edit-modal-input:focus,
@@ -68,16 +51,83 @@
   box-shadow: var(--input-focus-shadow);
 }
 
+/* Quantity Control - matching AddItemForm */
+.edit-modal-quantity-control {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  margin-bottom: var(--spacing-md);
+}
+
+.edit-modal-quantity-input {
+  width: 60px;
+  text-align: center;
+  font-weight: 600;
+  font-size: var(--font-size-lg);
+  padding: var(--input-padding-y) var(--input-padding-x);
+  border: var(--border-width-thin) solid var(--input-border-color);
+  border-radius: var(--input-border-radius);
+  background: var(--color-bg-surface);
+  color: var(--color-text-primary);
+}
+
+.quantity-btn {
+  width: 48px;
+  height: 48px;
+  border: var(--border-width-medium) solid var(--color-primary);
+  border-radius: var(--border-radius-md);
+  background: var(--color-bg-surface);
+  color: var(--color-primary);
+  font-size: 1.5em;
+  font-weight: bold;
+  cursor: pointer;
+  transition: var(--transition-base);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.quantity-btn:hover:not(:disabled) {
+  background: var(--color-primary);
+  color: var(--color-text-inverse);
+}
+
+.quantity-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Inline Classification Fields */
+.edit-modal-inline-field {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  margin-bottom: var(--spacing-sm);
+}
+
+.edit-modal-inline-field label {
+  min-width: 60px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  font-size: 0.95em;
+}
+
+.edit-modal-inline-field .edit-modal-select {
+  flex: 1;
+  margin-bottom: 0;
+}
+
 .edit-modal-divider {
   height: 1px;
   background: var(--color-border-light);
-  margin: var(--spacing-xl) 0;
+  margin: var(--spacing-md) 0;
 }
 
 .edit-modal-actions {
   display: flex;
-  gap: 0.8em;
-  margin-top: 1.5em;
+  gap: var(--spacing-sm);
+  margin-top: var(--spacing-md);
 }
 
 .edit-modal-btn {
@@ -116,7 +166,7 @@
 
 .edit-modal-btn-image {
   width: 100%;
-  padding: var(--button-padding-y) var(--button-padding-x);
+  padding: var(--spacing-sm) var(--spacing-md);
   font-size: var(--font-size-base);
   border: var(--border-width-medium) solid var(--color-success);
   border-radius: var(--button-border-radius);
@@ -125,6 +175,7 @@
   transition: var(--transition-base);
   background: var(--color-bg-surface);
   color: var(--color-success);
+  margin-bottom: var(--spacing-sm);
 }
 
 .edit-modal-btn-image:hover:not(:disabled) {