new form

src/components/forms/fields/SmartGridField.tsx

@@ -22,7 +22,15 @@ export function SmartGridField({
   const [editingIdx, setEditingIdx] = useState<number | null>(null);
 
   const visibleColumns = columns.filter(c => {
-    return true; // Temporarily show all columns for debugging
+    const isOrderDetails = label.toLowerCase().includes('order');
+    if (isOrderDetails) {
+      const n = (c.name || '').toLowerCase();
+      const id = (c.id || '').toLowerCase();
+      // Show only Category, Name, and Bags
+      return n.includes('category') || n.includes('name') || n.includes('bags') || 
+             id.includes('category') || id.includes('name') || id.includes('bags');
+    }
+    return true; 
   });
 
   const removeRow = (idx: number) => {
@@ -202,12 +210,15 @@ export function SmartGridField({
         </div>
       )}
 
-      <Button type="button" variant="secondary" size="sm" onClick={startAdd} className="mt-2 self-start">
+      <div className="mt-4 p-4 border border-border-subtle rounded-xl bg-white shadow-sm">
-        + Add Row
+        <h4 className="text-sm font-semibold text-strong mb-4 flex items-center gap-2">
-      </Button>
+          {editingIdx !== null ? (
-
+            <><Pencil size={16} className="text-blue-600" /> Edit Row</>
-      <Modal open={isModalOpen} onClose={() => setIsModalOpen(false)} title={editingIdx !== null ? "Edit Row" : "Add Row"} width="sm">
+          ) : (
-        <form onSubmit={(e) => { e.preventDefault(); e.stopPropagation(); submitNewRow(); }} className="flex flex-col gap-4">
+            <>Add New Item</>
+          )}
+        </h4>
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 items-end">
           {visibleColumns.map(col => {
             const val = newRow[col.id];
             if (col.data_type === 'select' || col.data_type === 'multiselect') {
@@ -261,12 +272,19 @@ export function SmartGridField({
               />
             );
           })}
-          <div className="flex justify-end gap-3 mt-4">
+          
-            <Button type="button" variant="ghost" onClick={() => setIsModalOpen(false)}>Cancel</Button>
+          <div className="flex justify-end gap-2 sm:col-span-2 md:col-span-3 mt-2">
-            <Button type="submit" variant="primary">{editingIdx !== null ? "Save" : "Add"}</Button>
+            {editingIdx !== null && (
+              <Button type="button" variant="ghost" onClick={() => { setEditingIdx(null); setNewRow({}); }}>
+                Cancel
+              </Button>
+            )}
+            <Button type="button" variant="primary" onClick={submitNewRow}>
+              {editingIdx !== null ? "Save Item" : "+ Add to Order"}
+            </Button>
           </div>
-        </form>
+        </div>
-      </Modal>
+      </div>
     </div>
   );
 }