Merge pull request #3362 from OneCommunityGlobal/SaiPreetham-add-functions-material-list-bmdashboard

Sai preetham add functions material list bmdashboard

Author: one-community

src/components/BMDashboard/ItemList/ItemListView.css

@@ -40,9 +40,54 @@
 }
 
 .select_input {
+  display: grid;
+  grid-template-columns: auto 1fr auto 1fr auto 1fr;
+  align-items: center;
+  gap: 15px;
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto 10px auto;
+  overflow: visible;
+}
+
+.select_input label {
+  font-weight: bold;
+  text-align: right;
+  min-width: 100px;
+  white-space: nowrap;
+  margin-bottom: 8px;
+}
+
+.select_input input,
+.select_input select {
+  height: 38px;
+  width: 100%;
+  min-width: 220px;
+  max-width: 240px;
+  padding: 5px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  margin-bottom: 8px;
+}
+
+.select_input input[type='text'] {
+  padding: 5px;
+  margin-bottom: 8px;
+}
+.btn-primary {
+  background-color: #468ef9;
+  color: white;
+  border: none;
+  padding: 8px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.buttons-row {
   display: flex;
-  background-color: blanchedalmond;
-  align-items: flex-end;
-  width: 300px;
-  column-gap: 1rem;
+  justify-content: center;
+  gap: 15px;
+  margin-bottom: 15px;
+}
+.btn-primary:hover {
+  background-color: #3b82f6;
 }

src/components/BMDashboard/ItemList/ItemListView.jsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
 import BMError from '../shared/BMError';
 import SelectForm from './SelectForm';
 import SelectItem from './SelectItem';
@@ -12,6 +13,7 @@ export function ItemListView({ itemType, items, errors, UpdateItemModal, dynamic
   const [selectedProject, setSelectedProject] = useState('all');
   const [selectedItem, setSelectedItem] = useState('all');
   const [isError, setIsError] = useState(false);
+  const [selectedTime, setSelectedTime] = useState(new Date());
 
   useEffect(() => {
     if (items) setFilteredItems([...items]);
@@ -53,9 +55,19 @@ export function ItemListView({ itemType, items, errors, UpdateItemModal, dynamic
     <main className="items_list_container">
       <h3>{itemType}</h3>
       <section>
-        <span style={{ display: 'flex', margin: '5px' }}>
+        <span>
           {items && (
-            <>
+            <div className="select_input">
+              <label>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"
+              />
               <SelectForm
                 items={items}
                 setSelectedProject={setSelectedProject}
@@ -67,8 +79,19 @@ export function ItemListView({ itemType, items, errors, UpdateItemModal, dynamic
                 selectedItem={selectedItem}
                 setSelectedItem={setSelectedItem}
               />
-            </>
+            </div>
           )}
+          <div className="buttons-row">
+            <button type="button" className="btn-primary">
+              Add Material
+            </button>
+            <button type="button" className="btn-primary">
+              Edit Name/Measurement
+            </button>
+            <button type="button" className="btn-primary">
+              View Update History
+            </button>
+          </div>
         </span>
         {filteredItems && (
           <ItemsTable

src/components/BMDashboard/ItemList/ItemsTable.jsx

@@ -117,6 +117,7 @@ export default function ItemsTable({
               {dynamicColumns.map(({ label }) => (
                 <th key={label}>{label}</th>
               ))}
+              <th>Usage Record</th>
               <th>Updates</th>
               <th>Purchases</th>
             </tr>
@@ -132,6 +133,23 @@ export default function ItemsTable({
                     {dynamicColumns.map(({ label, key }) => (
                       <td key={label}>{getNestedValue(el, key)}</td>
                     ))}
+                    <td className="items_cell">
+                      <button
+                        type="button"
+                        onClick={() => handleEditRecordsClick(el, 'UsageRecord')}
+                        aria-label="Edit Record"
+                      >
+                        <BiPencil />
+                      </button>
+                      <Button
+                        color="primary"
+                        outline
+                        size="sm"
+                        onClick={() => handleViewRecordsClick(el, 'UsageRecord')}
+                      >
+                        View
+                      </Button>
+                    </td>
                     <td className="items_cell">
                       <button
                         type="button"

src/components/BMDashboard/MaterialList/MaterialListView.jsx

@@ -31,11 +31,13 @@ function MaterialListView() {
   const itemType = 'Materials';
 
   const dynamicColumns = [
-    { label: 'Unit', key: 'itemType.unit' },
+    { label: 'PID', key: 'product id' },
+    { label: 'Measurement', key: 'itemType.unit' },
     { label: 'Bought', key: 'stockBought' },
     { label: 'Used', key: 'stockUsed' },
     { label: 'Available', key: 'stockAvailable' },
-    { label: 'Waste', key: 'stockWasted' },
+    { label: 'Wasted', key: 'stockWasted' },
+    { label: 'Hold', key: 'stockHold' },
   ];
 
   return (