Merge pull request #4828 from OneCommunityGlobal/adithya_fix_consumables_usability

Adithya fix consumables usability

Author: one-community

src/components/BMDashboard/ConsumableList/ConsumableListView.jsx

@@ -10,28 +10,39 @@ function ConsumableListView() {
   const errors = useSelector(state => state.errors);
   const postConsumableUpdateResult = useSelector(state => state.bmConsumables.updateConsumables);
 
-  const consumablesWithId = consumables
-    ? consumables.map(item => ({
-        ...item,
-        id:
-          parseInt(item._id.substring(item._id.length - 6), 16) ||
-          Math.floor(Math.random() * 1000000), // Convert last 6 chars of _id to number, or use random as fallback
-      }))
+  // --- DATA TRANSFORMATION ---
+  const transformedConsumables = consumables
+    ? consumables
+        .map(item => ({
+          ...item,
+          // Flatten Data
+          projectName: item.project?.name || 'N/A',
+          name: item.itemType?.name || 'N/A',
+          unit: item.itemType?.unit || 'N/A',
+          // Dropdown Fixes
+          inventoryItemType: item.itemType?.name || 'N/A',
+          type: item.itemType?.name || 'N/A',
+          // Preserve Structure
+          itemType: item.itemType || { name: 'N/A', unit: '' },
+          id: item._id,
+        }))
+        // Filter out bad data (empty names)
+        .filter(item => item.name !== 'N/A')
     : [];
 
   useEffect(() => {
     dispatch(fetchAllConsumables());
-  }, []);
+  }, [dispatch]);
 
   useEffect(() => {
     if (!postConsumableUpdateResult || postConsumableUpdateResult?.result == null)
       dispatch(fetchAllConsumables());
-  }, [postConsumableUpdateResult?.result]);
+  }, [postConsumableUpdateResult?.result, dispatch]);
 
-  const itemType = 'Consumables';
+  const itemTypeLabel = 'Consumables';
 
   const dynamicColumns = [
-    { label: 'Unit', key: 'itemType.unit' },
+    { label: 'Unit', key: 'unit' },
     { label: 'Bought', key: 'stockBought' },
     { label: 'Used', key: 'stockUsed' },
     { label: 'Available', key: 'stockAvailable' },
@@ -40,8 +51,8 @@ function ConsumableListView() {
 
   return (
     <ItemListView
-      itemType={itemType}
-      items={consumablesWithId}
+      itemType={itemTypeLabel}
+      items={transformedConsumables}
       errors={errors}
       UpdateItemModal={UpdateConsumableModal}
       dynamicColumns={dynamicColumns}

src/components/BMDashboard/ItemList/ItemListView.jsx

@@ -69,22 +69,25 @@ export function ItemListView({ itemType, items, errors, UpdateItemModal, dynamic
         <span>
           {items && (
             <div className={`${styles.selectInput}`}>
-              <label htmlFor="itemListTime">Time:</label>
-              <DatePicker
-                selected={selectedTime}
-                onChange={date => setSelectedTime(date)}
-                showTimeSelect
-                timeFormat="HH:mm"
-                timeIntervals={15}
-                dateFormat="yyyy-MM-dd HH:mm:ss"
-                placeholderText="Select date and time"
-                inputId="itemListTime" // This is the key line
-                className={darkMode ? styles.darkDatePickerInput : styles.lightDatePickerInput}
-                calendarClassName={darkMode ? styles.darkDatePicker : styles.lightDatePicker}
-                popperClassName={
-                  darkMode ? styles.darkDatePickerPopper : styles.lightDatePickerPopper
-                }
-              />
+              {/* Wrap the Time label and Datepicker in a flex group */}
+              <div className={`${styles.filterGroup}`}>
+                <label htmlFor="itemListTime">Time:</label>
+                <DatePicker
+                  selected={selectedTime}
+                  onChange={date => setSelectedTime(date)}
+                  showTimeSelect
+                  timeFormat="HH:mm"
+                  timeIntervals={15}
+                  dateFormat="yyyy-MM-dd HH:mm:ss"
+                  placeholderText="Select date and time"
+                  inputId="itemListTime"
+                  className={darkMode ? styles.darkDatePickerInput : styles.lightDatePickerInput}
+                  calendarClassName={darkMode ? styles.darkDatePicker : styles.lightDatePicker}
+                  popperClassName={
+                    darkMode ? styles.darkDatePickerPopper : styles.lightDatePickerPopper
+                  }
+                />
+              </div>
               <SelectForm
                 items={items}
                 setSelectedProject={setSelectedProject}
@@ -95,6 +98,7 @@ export function ItemListView({ itemType, items, errors, UpdateItemModal, dynamic
                 selectedProject={selectedProject}
                 selectedItem={selectedItem}
                 setSelectedItem={setSelectedItem}
+                label={itemType}
               />
             </div>
           )}

src/components/BMDashboard/ItemList/ItemListView.module.css

@@ -49,21 +49,30 @@ table td {
 }
 
 .selectInput {
-  display: grid;
-  grid-template-columns: auto 1fr auto 1fr auto 1fr;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
   align-items: center;
-  gap: 15px;
+  gap: 30px; 
   width: 100%;
   max-width: 1200px;
-  margin: 0 auto 10px auto;
+  margin: 0 auto 20px auto;
   overflow: visible;
 }
 
+.filterGroup,
+.selectInput > div,
+.selectInput > form {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
 .selectInput label {
   font-weight: bold;
   text-align: center;
   white-space: nowrap;
-  margin-bottom: 8px;
+  margin-bottom: 0;
 }
 
 .selectInput input,
@@ -75,12 +84,12 @@ table td {
   padding: 5px;
   border: 1px solid #ccc;
   border-radius: 4px;
-  margin-bottom: 8px;
+  margin-bottom: 0;
 }
 
 .selectInput input[type='text'] {
   padding: 5px;
-  margin-bottom: 8px;
+  margin-bottom: 0;
 }
 .btnPrimary {
   background-color: #468ef9;