Linh – Add Material Usage Insights & Visual Indicators to Materials Table

.husky/pre-commit

@@ -3,7 +3,7 @@
 export NVM_DIR="$HOME/.nvm"
 [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
 # Use Node 20 if available (or install if needed)
-if [ -f .nvmrc ]; then
+if command -v nvm >/dev/null 2>&1 && [ -f .nvmrc ]; then
   nvm use 20 2>/dev/null || nvm install 20 && nvm use 20
 fi
 

.husky/pre-push

@@ -2,26 +2,24 @@
 # Load nvm if available
 export NVM_DIR="$HOME/.nvm"
 [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
-# Use Node 20 if available (or install if needed)
+
+# Use Node 20 if available
 if command -v nvm >/dev/null 2>&1 && [ -f .nvmrc ]; then
   nvm use 20 2>/dev/null || nvm install 20 && nvm use 20
 fi
 
-if git rev-parse --abbrev-ref @{upstream} >/dev/null 2>&1; then
-  changed_files=$(git diff --name-only --diff-filter=d @{upstream}...HEAD)
-else
-  echo "ℹ️  No upstream branch set. Skipping pre-push checks."
-  exit 0
-fi
+changed_files=$(
+  git log --first-parent --no-merges --format= --name-only @{upstream}..HEAD 2>/dev/null |
+    grep -v '^$' |
+    sort -u
+)
 
-# Skip checks if any outgoing commit is a merge commit
-if git log @{upstream}..HEAD --merges --oneline | grep -q .; then
-  echo "ℹ️  Outgoing commits include a merge commit. Skipping lint/test checks."
-  exit 0
+if [ -z "$changed_files" ]; then
+  changed_files=$(git diff --name-only HEAD~1..HEAD 2>/dev/null)
 fi
 
 if [ -z "$changed_files" ]; then
-  echo "ℹ️  No outgoing changes to validate. Skipping pre-push checks."
+  echo "No outgoing changes to validate. Skipping pre-push checks."
   exit 0
 fi
 
@@ -32,7 +30,7 @@ if git log @{upstream}..HEAD --merges --oneline | grep -q .; then
 fi
 
 if ! printf '%s\n' "$changed_files" | grep -qvE '^\.husky/'; then
-  echo "ℹ️  Only Husky hook changes detected. Skipping full test and lint checks."
+  echo "Only Husky hook changes detected. Skipping full test and lint checks."
   exit 0
 fi
 
@@ -48,12 +46,12 @@ lint_status=0
 style_status=0
 
 if [ -n "$js_files" ]; then
-  echo "🧪 Running related tests before push..."
-  echo "$js_files" | tr ' ' '\n' | xargs npx vitest related --run
+  echo "Running related tests before push..."
+  printf '%s\n' "$js_files" | xargs -r -n 25 npx vitest related --run
   test_status=$?
 
-  echo "🧹 Running ESLint on changed files before push..."
-  echo "$js_files" | tr ' ' '\n' | xargs npx eslint
+  echo "Running ESLint on changed files before push..."
+  printf '%s\n' "$js_files" | xargs -r -n 50 npx eslint
   lint_status=$?
 fi
 
@@ -66,8 +64,8 @@ fi
 
 # Block push if either fails
 if [ $test_status -ne 0 ] || [ $lint_status -ne 0 ] || [ $style_status -ne 0 ]; then
-  echo "❌ Push blocked: changed-file validation failed."
+  echo "Push blocked: changed-file validation failed."
   exit 1
 fi
 
-echo "✅ All checks passed. Proceeding with push..."
+echo "All checks passed. Proceeding with push..."

src/App.module.css

@@ -24,7 +24,19 @@
   background-color: #fff;
 }
 
+html {
+  background-color: #fff;
+}
 
+body {
+  background-color: #fff;
+}
+
+/* Dark mode background for the page itself */
+body.dark-mode,
+body.bm-dashboard-dark {
+  background-color: #1a1d23 !important;
+}
 
 /* Dark mode override for #root */
 body.dark-mode #root,

src/components/BMDashboard/ItemList/ItemListView.jsx

@@ -8,6 +8,7 @@
 import SelectForm from './SelectForm';
 import SelectItem from './SelectItem';
 import ItemsTable from './ItemsTable';
+import MaterialSummaryPanel from '../MaterialList/MaterialSummaryPanel';
 import styles from './ItemListView.module.css';
 
 export function ItemListView({
@@ -25,6 +26,7 @@
   const [isError, setIsError] = useState(false);
   const [selectedTime, setSelectedTime] = useState(new Date());
 
+  const isMaterialsView = itemType === 'Materials';
   const [searchQuery, setSearchQuery] = useState('');
   const [sortConfig, setSortConfig] = useState({ key: null, direction: 'asc' });
   const [currentPage, setCurrentPage] = useState(1);
@@ -169,22 +171,26 @@
         <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"
-                className={darkMode ? styles.darkDatePickerInput : styles.lightDatePickerInput}
-                calendarClassName={darkMode ? styles.darkDatePicker : styles.lightDatePicker}
-                popperClassName={
-                  darkMode ? styles.darkDatePickerPopper : styles.lightDatePickerPopper
-                }
-              />
+              <div className={styles.inlineField}>
+                <label htmlFor="itemListTime">Time:</label>
+                <div className={styles.datePickerCell}>
+                  <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>
+              </div>
 
               <SelectForm
                 items={items}
@@ -197,7 +203,7 @@
                 selectedProject={selectedProject}
                 selectedItem={selectedItem}
                 setSelectedItem={setSelectedItem}
-                label={itemType === 'Materials' ? 'Material' : itemType}
+                label={isMaterialsView ? 'Material' : itemType}
                 darkMode={darkMode}
               />
             </div>
@@ -249,35 +255,35 @@
               </button>
             )}
           </div>
-
           <div className={styles.foundCount}>
             {totalItems} {totalItems === 1 ? 'material' : 'materials'} found
           </div>
         </div>
-
         {children}
-
-        {filteredItems && (
+        <>
+          {isMaterialsView && (
+            <MaterialSummaryPanel materials={filteredItems} darkMode={darkMode} />
+          )}
           <ItemsTable
             selectedProject={selectedProject}
             selectedItem={selectedItem}
             filteredItems={paginatedItems}
             UpdateItemModal={UpdateItemModal}
             dynamicColumns={dynamicColumns}
             darkMode={darkMode}
             itemType={itemType}
             sortConfig={sortConfig}
             onSort={handleSort}
             totalItems={totalItems}
             currentPage={currentPage}
             totalPages={totalPages}
             rowsPerPage={rowsPerPage}
             startRow={startRow}
             endRow={endRow}
             onPageChange={setCurrentPage}
             onRowsPerPageChange={setRowsPerPage}
           />
-        )}
+        </>
       </section>
     </main>
   );
@@ -287,7 +293,8 @@
   itemType: PropTypes.string.isRequired,
   items: PropTypes.arrayOf(
     PropTypes.shape({
-      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      name: PropTypes.string,
       itemType: PropTypes.shape({
         name: PropTypes.string,
         unit: PropTypes.string,
@@ -301,6 +308,7 @@
       stockUsed: PropTypes.number,
       stockWasted: PropTypes.number,
       stockHold: PropTypes.number,
+      productId: PropTypes.string,
     }),
   ).isRequired,
   errors: PropTypes.shape({

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

@@ -9,13 +9,27 @@ table td {
   max-width: 1536px;
   margin: 1rem auto;
   padding: 0 1rem;
+  min-height: 100vh;
+  background-color: #fff;
+  color: #1f2937;
 }
 
 .itemsTableContainer {
   overflow: auto;
   max-height: 600px;
   border: 1px solid #e5e7eb;
   border-radius: 6px;
+  background-color: #fff;
+}
+
+.itemsTableContainer table {
+  background-color: #fff;
+  color: #1f2937;
+  margin-bottom: 0;
+}
+
+.itemsTableContainer table tbody tr {
+  background-color: #fff;
 }
 
 .items_list_container section {
@@ -243,9 +257,7 @@ table td {
 
 .darkMode {
   color: #e8edf4;
-  background-color: #0d1117 !important;
-
-/*   color: #fff !important; */
+  background-color: #1a1d23 !important;
   min-height: 100vh;
   padding-bottom: 2rem;
 }
@@ -268,6 +280,25 @@ table td {
   border-bottom: 1px solid #3f5269;
 }
 
+/* Dark mode container/table base (overrides the light defaults above) */
+.darkTableWrapper {
+  background-color: #1f2e45;
+}
+
+.darkTableWrapper table,
+.itemsTableContainer .darkTable {
+  background-color: #1f2e45;
+  color: #e8edf4;
+}
+
+.itemsTableContainer .darkTable tbody tr:nth-child(odd) {
+  background-color: #1f2e45;
+}
+
+.itemsTableContainer .darkTable tbody tr:nth-child(even) {
+  background-color: #23375b;
+}
+
 :global(.dark-mode) .items_table_container {
   background-color: transparent !important;
 }
@@ -371,31 +402,31 @@ table td {
   border: 1px solid #3f5269 !important;
 }
 
-.darkDatePicker .react-datepicker__header {
-  background-color: #2f4157;
-  border-color: #3f5269;
+.darkDatePicker :global(.react-datepicker__header) {
+  background-color: #2f4157 !important;
+  border-color: #3f5269 !important;
 }
 
-.darkDatePicker .react-datepicker__time-header {
+.darkDatePicker :global(.react-datepicker__time-header),
+.darkDatePicker :global(.react-datepicker-time__header) {
   color: #f2f6ff !important;
   background-color: #2f4157 !important;
-  border-bottom: 1px solid #3f5269 !important;
 }
 
-.darkDatePicker .react-datepicker__current-month,
-.darkDatePicker .react-datepicker-year-header {
+.darkDatePicker :global(.react-datepicker__current-month),
+.darkDatePicker :global(.react-datepicker-year-header) {
   color: #f2f6ff !important;
 }
 
-.darkDatePicker .react-datepicker__day-name,
-.darkDatePicker .react-datepicker__day,
-.darkDatePicker .react-datepicker__time-name {
-  color: #e8edf4;
+.darkDatePicker :global(.react-datepicker__day-name),
+.darkDatePicker :global(.react-datepicker__day),
+.darkDatePicker :global(.react-datepicker__time-name) {
+  color: #e8edf4 !important;
 }
 
-.darkDatePicker .react-datepicker__day--selected,
-.darkDatePicker .react-datepicker__day--keyboard-selected,
-.darkDatePicker .react-datepicker__time-list-item--selected {
+.darkDatePicker :global(.react-datepicker__day--selected),
+.darkDatePicker :global(.react-datepicker__day--keyboard-selected),
+.darkDatePicker :global(.react-datepicker__time-list-item--selected) {
   background-color: #468ef9 !important;
   color: #fff !important;
   border-color: #468ef9 !important;
@@ -567,3 +598,8 @@ table td {
     min-width: 0;
   }
 }
+
+.inlineField {
+  margin-top: -9px;
+}
+