From fe578cfb1ce7b4a8e9ba7e7b2ca8bd0a6e003a30 Mon Sep 17 00:00:00 2001
From: Linh Huynh <cdev.linh@gmail.com>
Date: Mon, 19 Jan 2026 17:00:28 -0800
Subject: [PATCH 1/8] feat: add materialInsights utility with calculation logic

- Implement usage percentage calculation (Used / Bought)
- Implement stock ratio calculation (Available / Bought)
- Add stock health status determination (Critical/Low/Healthy/No-Data)
- Add formatting utilities for floating point precision handling
- Create tooltip generation functions for visual indicators
- Include summary metrics calculation from material lists
- All calculations include safe guards for zero/null values
---
 src/utils/materialInsights.js | 257 ++++++++++++++++++++++++++++++++++
 1 file changed, 257 insertions(+)
 create mode 100644 src/utils/materialInsights.js

diff --git a/src/utils/materialInsights.js b/src/utils/materialInsights.js
new file mode 100644
index 0000000000..410826c10a
--- /dev/null
+++ b/src/utils/materialInsights.js
@@ -0,0 +1,257 @@
+/**
+ * Material Insights Utility
+ * Provides calculations and formatting for material usage analytics
+ * Single source of truth for all calculation logic
+ */
+
+/**
+ * Format a number to 1-2 decimal places safely
+ * Handles floating point precision issues like 180.60000000000002
+ * @param {number} value - The value to format
+ * @param {number} decimals - Number of decimal places (default: 2)
+ * @returns {number|null} Formatted number or null if value is not a number
+ */
+export const formatNumber = (value, decimals = 2) => {
+  if (typeof value !== 'number' || Number.isNaN(value)) {
+    return null;
+  }
+  return Math.round(value * Math.pow(10, decimals)) / Math.pow(10, decimals);
+};
+
+/**
+ * Calculate usage percentage (Used / Bought)
+ * @param {number} used - Amount used
+ * @param {number} bought - Amount bought
+ * @returns {number|null} Usage percentage or null if bought is 0
+ */
+export const calculateUsagePercentage = (used, bought) => {
+  if (!bought || bought <= 0) {
+    return null;
+  }
+  const percentage = (used / bought) * 100;
+  return formatNumber(percentage, 2);
+};
+
+/**
+ * Get clamped usage percentage for UI display
+ * Ensures value doesn't exceed 100% for progress bar display
+ * @param {number} usagePercentage - The usage percentage to clamp
+ * @returns {number} Clamped percentage (0-100)
+ */
+export const getClampedUsagePercentage = (usagePercentage) => {
+  if (usagePercentage === null || usagePercentage === undefined) {
+    return 0;
+  }
+  return Math.min(100, Math.max(0, usagePercentage));
+};
+
+/**
+ * Calculate stock ratio (Available / Bought)
+ * @param {number} available - Amount available
+ * @param {number} bought - Amount bought
+ * @returns {number|null} Stock ratio or null if bought is 0
+ */
+export const calculateStockRatio = (available, bought) => {
+  if (!bought || bought <= 0) {
+    return null;
+  }
+  const ratio = available / bought;
+  return formatNumber(ratio, 2);
+};
+
+/**
+ * Get stock health status based on stock ratio
+ * @param {number} stockRatio - The stock ratio to evaluate
+ * @returns {string} Health status: 'healthy', 'low', 'critical', or 'no-data'
+ */
+export const getStockHealthStatus = (stockRatio) => {
+  if (stockRatio === null || stockRatio === undefined) {
+    return 'no-data';
+  }
+  if (stockRatio <= 0.2) {
+    return 'critical';
+  }
+  if (stockRatio <= 0.4) {
+    return 'low';
+  }
+  return 'healthy';
+};
+
+/**
+ * Get stock health color for UI display
+ * @param {string} status - Stock health status
+ * @returns {string} Color code: 'green', 'yellow', 'red', or 'gray'
+ */
+export const getStockHealthColor = (status) => {
+  switch (status) {
+    case 'healthy':
+      return 'green';
+    case 'low':
+      return 'yellow';
+    case 'critical':
+      return 'red';
+    default:
+      return 'gray';
+  }
+};
+
+/**
+ * Get stock health icon for UI display
+ * Returns a simple icon representation
+ * @param {string} status - Stock health status
+ * @returns {string} Icon symbol or emoji
+ */
+export const getStockHealthIcon = (status) => {
+  switch (status) {
+    case 'healthy':
+      return '✓'; // Checkmark
+    case 'low':
+      return '⚠'; // Warning
+    case 'critical':
+      return '✕'; // X mark
+    default:
+      return '○'; // Circle for no data
+  }
+};
+
+/**
+ * Get display label for stock health status
+ * @param {string} status - Stock health status
+ * @returns {string} Display label
+ */
+export const getStockHealthLabel = (status) => {
+  switch (status) {
+    case 'healthy':
+      return 'Healthy';
+    case 'low':
+      return 'Low';
+    case 'critical':
+      return 'Critical';
+    default:
+      return 'No Data';
+  }
+};
+
+/**
+ * Calculate all material insights for a single material
+ * @param {object} material - Material object with stockBought, stockUsed, stockAvailable, etc.
+ * @returns {object} Insights object containing all calculated values
+ */
+export const calculateMaterialInsights = (material) => {
+  const bought = material?.stockBought || 0;
+  const used = material?.stockUsed || 0;
+  const available = material?.stockAvailable || 0;
+  const wasted = material?.stockWasted || 0;
+  const hold = material?.stockHold || 0;
+
+  const usagePct = calculateUsagePercentage(used, bought);
+  const usagePctClamped = getClampedUsagePercentage(usagePct);
+  const stockRatio = calculateStockRatio(available, bought);
+  const stockHealth = getStockHealthStatus(stockRatio);
+  const stockHealthColor = getStockHealthColor(stockHealth);
+  const stockHealthLabel = getStockHealthLabel(stockHealth);
+
+  return {
+    bought,
+    used,
+    available,
+    wasted,
+    hold,
+    usagePct,
+    usagePctClamped,
+    stockRatio,
+    stockHealth,
+    stockHealthColor,
+    stockHealthLabel,
+    hasBoughtData: bought > 0,
+  };
+};
+
+/**
+ * Calculate summary metrics from a list of materials
+ * @param {array} materials - Array of material objects
+ * @returns {object} Summary metrics
+ */
+export const calculateSummaryMetrics = (materials) => {
+  if (!materials || materials.length === 0) {
+    return {
+      totalMaterials: 0,
+      lowStockCount: 0,
+      lowStockPercentage: 0,
+      overUsageCount: 0,
+      overUsagePercentage: 0,
+      onHoldCount: 0,
+      usageThreshold: 80,
+    };
+  }
+
+  const total = materials.length;
+  let lowStockCount = 0;
+  let overUsageCount = 0;
+  let onHoldCount = 0;
+
+  materials.forEach(material => {
+    const insights = calculateMaterialInsights(material);
+
+    // Count low/critical stock
+    if (insights.stockHealth === 'low' || insights.stockHealth === 'critical') {
+      lowStockCount += 1;
+    }
+
+    // Count over usage threshold (default 80%)
+    if (insights.usagePct !== null && insights.usagePct >= 80) {
+      overUsageCount += 1;
+    }
+
+    // Count items on hold
+    if ((material?.stockHold || 0) > 0) {
+      onHoldCount += 1;
+    }
+  });
+
+  const lowStockPercentage = formatNumber((lowStockCount / total) * 100, 1);
+  const overUsagePercentage = formatNumber((overUsageCount / total) * 100, 1);
+
+  return {
+    totalMaterials: total,
+    lowStockCount,
+    lowStockPercentage,
+    overUsageCount,
+    overUsagePercentage,
+    onHoldCount,
+    usageThreshold: 80,
+  };
+};
+
+/**
+ * Generate tooltip text for stock health
+ * @param {object} material - Material object
+ * @returns {string} Tooltip text
+ */
+export const getStockHealthTooltip = (material) => {
+  const insights = calculateMaterialInsights(material);
+
+  if (!insights.hasBoughtData) {
+    return 'No purchases recorded';
+  }
+
+  const ratio = insights.stockRatio !== null ? Math.round(insights.stockRatio * 100) : 'N/A';
+  return `Available: ${insights.available} of ${insights.bought} units remaining\nStock ratio: ${ratio}%\nStatus: ${insights.stockHealthLabel}`;
+};
+
+/**
+ * Generate tooltip text for usage percentage
+ * @param {object} material - Material object
+ * @returns {string} Tooltip text
+ */
+export const getUsagePercentageTooltip = (material) => {
+  const bought = material?.stockBought || 0;
+  const used = material?.stockUsed || 0;
+
+  if (!bought || bought <= 0) {
+    return 'No purchases recorded';
+  }
+
+  const usagePct = calculateUsagePercentage(used, bought);
+  return `Used: ${used} of ${bought} (${usagePct}%)`;
+};

From f144dc85972dcc3487a8b6be03ddc8091fb8f9f4 Mon Sep 17 00:00:00 2001
From: Linh Huynh <cdev.linh@gmail.com>
Date: Mon, 19 Jan 2026 18:18:26 -0800
Subject: [PATCH 2/8] feat: integrate material insights and visual indicators

- MaterialSummaryPanel: displays 4 key metrics (total, low stock %, usage %, on hold)
- ItemsTable: adds Stock Health Indicator and Usage % Bar columns
- ItemListView: integrates summary panel above table
- Components support dark mode, responsive design, and accessibility
---
 .../BMDashboard/ItemList/ItemListView.jsx     | 27 +++--
 .../BMDashboard/ItemList/ItemsTable.jsx       | 39 ++++++--
 .../MaterialList/MaterialSummaryPanel.jsx     | 70 +++++++++++++
 .../MaterialSummaryPanel.module.css           | 99 +++++++++++++++++++
 4 files changed, 220 insertions(+), 15 deletions(-)
 create mode 100644 src/components/BMDashboard/MaterialList/MaterialSummaryPanel.jsx
 create mode 100644 src/components/BMDashboard/MaterialList/MaterialSummaryPanel.module.css

diff --git a/src/components/BMDashboard/ItemList/ItemListView.jsx b/src/components/BMDashboard/ItemList/ItemListView.jsx
index cf6451b90d..68200b47ba 100644
--- a/src/components/BMDashboard/ItemList/ItemListView.jsx
+++ b/src/components/BMDashboard/ItemList/ItemListView.jsx
@@ -7,8 +7,14 @@ import BMError from '../shared/BMError';
 import SelectForm from './SelectForm';
 import SelectItem from './SelectItem';
 import ItemsTable from './ItemsTable';
+import MaterialSummaryPanel from '../MaterialList/MaterialSummaryPanel';
 import styles from './ItemListView.module.css';
 
+/**
+ * ItemListView Component
+ * Main container for displaying filtered items with summary metrics and data table
+ * Handles filtering, time selection, and layout of material list page
+ */
 export function ItemListView({ itemType, items, errors, UpdateItemModal, dynamicColumns }) {
   const [filteredItems, setFilteredItems] = useState(items);
   const [selectedProject, setSelectedProject] = useState('all');
@@ -105,14 +111,17 @@ export function ItemListView({ itemType, items, errors, UpdateItemModal, dynamic
           </div>
         </span>
         {filteredItems && (
-          <ItemsTable
-            selectedProject={selectedProject}
-            selectedItem={selectedItem}
-            filteredItems={filteredItems}
-            UpdateItemModal={UpdateItemModal}
-            dynamicColumns={dynamicColumns}
-            darkMode={darkMode}
-          />
+          <>
+            <MaterialSummaryPanel materials={filteredItems} darkMode={darkMode} />
+            <ItemsTable
+              selectedProject={selectedProject}
+              selectedItem={selectedItem}
+              filteredItems={filteredItems}
+              UpdateItemModal={UpdateItemModal}
+              dynamicColumns={dynamicColumns}
+              darkMode={darkMode}
+            />
+          </>
         )}
       </section>
     </main>
@@ -135,6 +144,8 @@ ItemListView.propTypes = {
       stockBought: PropTypes.number,
       stockUsed: PropTypes.number,
       stockWasted: PropTypes.number,
+      stockHold: PropTypes.number,
+      productId: PropTypes.string,
     }),
   ).isRequired,
   errors: PropTypes.shape({
diff --git a/src/components/BMDashboard/ItemList/ItemsTable.jsx b/src/components/BMDashboard/ItemList/ItemsTable.jsx
index 259715d79c..d000406cef 100644
--- a/src/components/BMDashboard/ItemList/ItemsTable.jsx
+++ b/src/components/BMDashboard/ItemList/ItemsTable.jsx
@@ -5,8 +5,17 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSortDown, faSort, faSortUp } from '@fortawesome/free-solid-svg-icons';
 import RecordsModal from './RecordsModal';
 import MaterialUsageChart from '../MaterialUsage/MaterialUsageChart';
+import StockHealthIndicator from '../MaterialList/StockHealthIndicator';
+import UsagePercentageBar from '../MaterialList/UsagePercentageBar';
 import styles from './ItemListView.module.css';
 
+/**
+ * ItemsTable Component
+ * Renders data table with columns including new visual indicators:
+ * - Stock Health Indicator: color-coded stock health status
+ * - Usage % Bar: visual progress bar for material usage
+ * Supports sorting, filtering, and modal interactions
+ */
 export default function ItemsTable({
   selectedProject,
   selectedItem,
@@ -141,9 +150,15 @@ export default function ItemsTable({
               ) : (
                 <th>Name</th>
               )}
-              {dynamicColumns.map(({ label }) => (
-                <th key={label}>{label}</th>
-              ))}
+              <th>PID</th>
+              <th>Measurement</th>
+              <th>Bought</th>
+              <th>Used</th>
+              <th>Usage %</th>
+              <th>Available</th>
+              <th>Stock Health</th>
+              <th>Wasted</th>
+              <th>Hold</th>
               <th>Usage Record</th>
               <th>Updates</th>
               <th>Purchases</th>
@@ -157,9 +172,19 @@ export default function ItemsTable({
                   <tr key={el._id}>
                     <td>{el.project?.name}</td>
                     <td>{el.itemType?.name}</td>
-                    {dynamicColumns.map(({ label, key }) => (
-                      <td key={label}>{getNestedValue(el, key)}</td>
-                    ))}
+                    <td>{el.productId || 'N/A'}</td>
+                    <td>{el.itemType?.unit || 'N/A'}</td>
+                    <td>{el.stockBought}</td>
+                    <td>{el.stockUsed}</td>
+                    <td>
+                      <UsagePercentageBar material={el} darkMode={darkMode} />
+                    </td>
+                    <td>{el.stockAvailable}</td>
+                    <td>
+                      <StockHealthIndicator material={el} darkMode={darkMode} />
+                    </td>
+                    <td>{el.stockWasted}</td>
+                    <td>{el.stockHold}</td>
                     <td className={`${styles.itemsCell}`}>
                       <button
                         type="button"
@@ -209,7 +234,7 @@ export default function ItemsTable({
               })
             ) : (
               <tr>
-                <td colSpan={11} style={{ textAlign: 'center' }}>
+                <td colSpan={14} style={{ textAlign: 'center' }}>
                   No items data
                 </td>
               </tr>
diff --git a/src/components/BMDashboard/MaterialList/MaterialSummaryPanel.jsx b/src/components/BMDashboard/MaterialList/MaterialSummaryPanel.jsx
new file mode 100644
index 0000000000..7b4705eda1
--- /dev/null
+++ b/src/components/BMDashboard/MaterialList/MaterialSummaryPanel.jsx
@@ -0,0 +1,70 @@
+import PropTypes from 'prop-types';
+import { calculateSummaryMetrics } from '../../../utils/materialInsights';
+import styles from './MaterialSummaryPanel.module.css';
+
+/**
+ * MaterialSummaryPanel Component
+ * Displays key material metrics in a responsive grid of cards:
+ * - Total materials count
+ * - Percentage and count of items at low/critical stock
+ * - Percentage and count of items over usage threshold (80%)
+ * - Count of items on hold
+ * Uses materialInsights utility for centralized calculations
+ * Supports light/dark mode with responsive design
+ */
+export default function MaterialSummaryPanel({ materials, darkMode = false }) {
+  const metrics = calculateSummaryMetrics(materials);
+
+  return (
+    <div className={`${styles.summaryPanel} ${darkMode ? styles.darkMode : ''}`}>
+      <div className={`${styles.summaryGrid}`}>
+        {/* Total Materials Card */}
+        <div className={`${styles.summaryCard}`}>
+          <div className={`${styles.cardLabel}`}>Total Materials</div>
+          <div className={`${styles.cardValue}`}>{metrics.totalMaterials}</div>
+        </div>
+
+        {/* Low Stock Card */}
+        <div className={`${styles.summaryCard}`}>
+          <div className={`${styles.cardLabel}`}>% at Low Stock</div>
+          <div className={`${styles.cardValue}`}>
+            {metrics.lowStockPercentage}%
+            <span className={`${styles.cardCount}`}>({metrics.lowStockCount})</span>
+          </div>
+        </div>
+
+        {/* Over Usage Card */}
+        <div className={`${styles.summaryCard}`}>
+          <div className={`${styles.cardLabel}`}>% Over Usage Threshold</div>
+          <div className={`${styles.cardValue}`}>
+            {metrics.overUsagePercentage}%
+            <span className={`${styles.cardCount}`}>({metrics.overUsageCount})</span>
+          </div>
+        </div>
+
+        {/* On Hold Card */}
+        <div className={`${styles.summaryCard}`}>
+          <div className={`${styles.cardLabel}`}>Items on Hold</div>
+          <div className={`${styles.cardValue}`}>{metrics.onHoldCount}</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+MaterialSummaryPanel.propTypes = {
+  materials: PropTypes.arrayOf(
+    PropTypes.shape({
+      stockBought: PropTypes.number,
+      stockUsed: PropTypes.number,
+      stockAvailable: PropTypes.number,
+      stockHold: PropTypes.number,
+    }),
+  ),
+  darkMode: PropTypes.bool,
+};
+
+MaterialSummaryPanel.defaultProps = {
+  materials: [],
+  darkMode: false,
+};
diff --git a/src/components/BMDashboard/MaterialList/MaterialSummaryPanel.module.css b/src/components/BMDashboard/MaterialList/MaterialSummaryPanel.module.css
new file mode 100644
index 0000000000..107f92f327
--- /dev/null
+++ b/src/components/BMDashboard/MaterialList/MaterialSummaryPanel.module.css
@@ -0,0 +1,99 @@
+/* Material Summary Panel Styles */
+/* Displays key material metrics in a responsive grid of cards */
+
+.summaryPanel {
+  margin: 1.5rem 0;
+  padding: 1rem 0;
+}
+
+.summaryGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1.5rem;
+  width: 100%;
+}
+
+/* Summary card styling with gradient background and hover effects */
+.summaryCard {
+  background: linear-gradient(135deg, #f0f4ff 0%, #e8ecf8 100%);
+  border: 1px solid #d4dce8;
+  border-radius: 8px;
+  padding: 1.25rem;
+  text-align: center;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+}
+
+.summaryCard:hover {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  transform: translateY(-2px);
+}
+
+.cardLabel {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #666;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 0.75rem;
+}
+
+.cardValue {
+  font-size: 2rem;
+  font-weight: 700;
+  color: #2c3e50;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.cardCount {
+  font-size: 0.875rem;
+  font-weight: 400;
+  color: #7f8c8d;
+  margin-top: 0.25rem;
+}
+
+/* Dark Mode Styles */
+.darkMode .summaryCard {
+  background: linear-gradient(135deg, #2f4157 0%, #1f2e45 100%);
+  border-color: #3f5269;
+}
+
+.darkMode .summaryCard:hover {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+.darkMode .cardLabel {
+  color: #a0b0c8;
+}
+
+.darkMode .cardValue {
+  color: #e8edf4;
+}
+
+.darkMode .cardCount {
+  color: #7a8a9e;
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+  .summaryGrid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 640px) {
+  .summaryGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .summaryCard {
+    padding: 1rem;
+  }
+
+  .cardValue {
+    font-size: 1.5rem;
+  }
+}

From 985c85209c9f814406491ba089a213668f628937 Mon Sep 17 00:00:00 2001
From: Linh Huynh <cdev.linh@gmail.com>
Date: Tue, 20 Jan 2026 21:18:04 -0800
Subject: [PATCH 3/8] Add visual indicators for materials usage insights
 (StockHealthIndicator and UsagePercentageBar)

---
 .../MaterialList/StockHealthIndicator.jsx     |  62 +++++++++
 .../StockHealthIndicator.module.css           | 130 ++++++++++++++++++
 .../MaterialList/UsagePercentageBar.jsx       |  93 +++++++++++++
 .../UsagePercentageBar.module.css             | 107 ++++++++++++++
 4 files changed, 392 insertions(+)
 create mode 100644 src/components/BMDashboard/MaterialList/StockHealthIndicator.jsx
 create mode 100644 src/components/BMDashboard/MaterialList/StockHealthIndicator.module.css
 create mode 100644 src/components/BMDashboard/MaterialList/UsagePercentageBar.jsx
 create mode 100644 src/components/BMDashboard/MaterialList/UsagePercentageBar.module.css

diff --git a/src/components/BMDashboard/MaterialList/StockHealthIndicator.jsx b/src/components/BMDashboard/MaterialList/StockHealthIndicator.jsx
new file mode 100644
index 0000000000..be22dc7301
--- /dev/null
+++ b/src/components/BMDashboard/MaterialList/StockHealthIndicator.jsx
@@ -0,0 +1,62 @@
+import PropTypes from 'prop-types';
+import { useState } from 'react';
+import { Tooltip } from 'reactstrap';
+import {
+  calculateMaterialInsights,
+  getStockHealthTooltip,
+  getStockHealthColor,
+  getStockHealthIcon,
+} from '../../../utils/materialInsights';
+import styles from './StockHealthIndicator.module.css';
+
+export default function StockHealthIndicator({ material, darkMode = false }) {
+  const [tooltipOpen, setTooltipOpen] = useState(false);
+  const tooltipId = `stock-health-${material._id}`;
+
+  const insights = calculateMaterialInsights(material);
+  const color = getStockHealthColor(insights.stockHealth);
+  const icon = getStockHealthIcon(insights.stockHealth);
+  const label = insights.stockHealthLabel;
+  const tooltipText = getStockHealthTooltip(material);
+
+  return (
+    <>
+      <div
+        id={tooltipId}
+        className={`${styles.indicator} ${styles[color]} ${darkMode ? styles.darkMode : ''}`}
+      >
+        <span className={`${styles.icon}`} aria-label={`Stock health: ${label}`}>
+          {icon}
+        </span>
+        <span className={`${styles.label}`}>{label}</span>
+      </div>
+      <Tooltip
+        placement="top"
+        isOpen={tooltipOpen}
+        target={tooltipId}
+        toggle={() => setTooltipOpen(!tooltipOpen)}
+        className={darkMode ? styles.darkTooltip : ''}
+      >
+        {tooltipText.split('\n').map((line, idx) => (
+          <div key={idx}>{line}</div>
+        ))}
+      </Tooltip>
+    </>
+  );
+}
+
+StockHealthIndicator.propTypes = {
+  material: PropTypes.shape({
+    _id: PropTypes.string.isRequired,
+    stockBought: PropTypes.number,
+    stockUsed: PropTypes.number,
+    stockAvailable: PropTypes.number,
+    stockWasted: PropTypes.number,
+    stockHold: PropTypes.number,
+  }).isRequired,
+  darkMode: PropTypes.bool,
+};
+
+StockHealthIndicator.defaultProps = {
+  darkMode: false,
+};
diff --git a/src/components/BMDashboard/MaterialList/StockHealthIndicator.module.css b/src/components/BMDashboard/MaterialList/StockHealthIndicator.module.css
new file mode 100644
index 0000000000..363503c2ba
--- /dev/null
+++ b/src/components/BMDashboard/MaterialList/StockHealthIndicator.module.css
@@ -0,0 +1,130 @@
+/* Stock Health Indicator Styles */
+
+.indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.4rem 0.8rem;
+  border-radius: 4px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: help;
+  transition: all 0.2s ease;
+}
+
+.icon {
+  font-size: 1.2rem;
+  line-height: 1;
+  display: inline-block;
+}
+
+.label {
+  white-space: nowrap;
+}
+
+/* Stock Health Colors - Light Mode */
+.indicator.green {
+  background-color: #d1fae5;
+  color: #065f46;
+  border: 1px solid #6ee7b7;
+}
+
+.indicator.green:hover {
+  background-color: #a7f3d0;
+  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
+}
+
+.indicator.yellow {
+  background-color: #fef3c7;
+  color: #92400e;
+  border: 1px solid #fcd34d;
+}
+
+.indicator.yellow:hover {
+  background-color: #fde68a;
+  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
+}
+
+.indicator.red {
+  background-color: #fee2e2;
+  color: #7f1d1d;
+  border: 1px solid #fca5a5;
+}
+
+.indicator.red:hover {
+  background-color: #fecaca;
+  box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
+}
+
+.indicator.gray {
+  background-color: #f3f4f6;
+  color: #6b7280;
+  border: 1px solid #d1d5db;
+}
+
+.indicator.gray:hover {
+  background-color: #e5e7eb;
+  box-shadow: 0 2px 4px rgba(107, 114, 128, 0.2);
+}
+
+/* Dark Mode Styles */
+.darkMode.indicator.green {
+  background-color: rgba(16, 185, 129, 0.2);
+  color: #a7f3d0;
+  border: 1px solid #10b981;
+}
+
+.darkMode.indicator.green:hover {
+  background-color: rgba(16, 185, 129, 0.3);
+  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
+}
+
+.darkMode.indicator.yellow {
+  background-color: rgba(245, 158, 11, 0.2);
+  color: #fde68a;
+  border: 1px solid #f59e0b;
+}
+
+.darkMode.indicator.yellow:hover {
+  background-color: rgba(245, 158, 11, 0.3);
+  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
+}
+
+.darkMode.indicator.red {
+  background-color: rgba(220, 38, 38, 0.2);
+  color: #fecaca;
+  border: 1px solid #dc2626;
+}
+
+.darkMode.indicator.red:hover {
+  background-color: rgba(220, 38, 38, 0.3);
+  box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
+}
+
+.darkMode.indicator.gray {
+  background-color: rgba(107, 114, 128, 0.2);
+  color: #d1d5db;
+  border: 1px solid #6b7280;
+}
+
+.darkMode.indicator.gray:hover {
+  background-color: rgba(107, 114, 128, 0.3);
+  box-shadow: 0 2px 4px rgba(107, 114, 128, 0.3);
+}
+
+/* Tooltip Styles */
+:global(.tooltip-inner) {
+  max-width: 200px;
+  padding: 0.75rem;
+  text-align: left;
+  line-height: 1.5;
+}
+
+:global(.darkMode .tooltip-inner) {
+  background-color: #1f2e45;
+  color: #e8edf4;
+}
+
+:global(.tooltip.show) {
+  z-index: 1000;
+}
diff --git a/src/components/BMDashboard/MaterialList/UsagePercentageBar.jsx b/src/components/BMDashboard/MaterialList/UsagePercentageBar.jsx
new file mode 100644
index 0000000000..024f997340
--- /dev/null
+++ b/src/components/BMDashboard/MaterialList/UsagePercentageBar.jsx
@@ -0,0 +1,93 @@
+import PropTypes from 'prop-types';
+import { useState } from 'react';
+import { Tooltip } from 'reactstrap';
+import {
+  calculateUsagePercentage,
+  getClampedUsagePercentage,
+  getUsagePercentageTooltip,
+} from '../../../utils/materialInsights';
+import styles from './UsagePercentageBar.module.css';
+
+export default function UsagePercentageBar({ material, darkMode = false }) {
+  const [tooltipOpen, setTooltipOpen] = useState(false);
+  const tooltipId = `usage-pct-${material._id}`;
+
+  const bought = material?.stockBought || 0;
+  const used = material?.stockUsed || 0;
+
+  const usagePct = calculateUsagePercentage(used, bought);
+  const usagePctClamped = getClampedUsagePercentage(usagePct);
+  const tooltipText = getUsagePercentageTooltip(material);
+
+  // Determine color based on usage percentage
+  const getUsageColor = () => {
+    if (usagePct === null) return 'gray';
+    if (usagePct >= 80) return 'red';
+    if (usagePct >= 50) return 'yellow';
+    return 'green';
+  };
+
+  const usageColor = getUsageColor();
+
+  if (!bought || bought <= 0) {
+    return (
+      <>
+        <div id={tooltipId} className={`${styles.usageContainer}`}>
+          <span className={`${styles.usageLabel}`}>N/A</span>
+        </div>
+        <Tooltip
+          placement="top"
+          isOpen={tooltipOpen}
+          target={tooltipId}
+          toggle={() => setTooltipOpen(!tooltipOpen)}
+          className={darkMode ? styles.darkTooltip : ''}
+        >
+          {tooltipText}
+        </Tooltip>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <div id={tooltipId} className={`${styles.usageContainer}`}>
+        <div className={`${styles.barWrapper}`}>
+          <div
+            className={`${styles.progressBar} ${styles[usageColor]}`}
+            style={{ width: `${usagePctClamped}%` }}
+            role="progressbar"
+            aria-valuenow={usagePctClamped}
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-label={`Usage: ${usagePct}%`}
+          />
+        </div>
+        <span className={`${styles.usageLabel}`}>
+          {used} / {bought} ({usagePct}%)
+        </span>
+      </div>
+      <Tooltip
+        placement="top"
+        isOpen={tooltipOpen}
+        target={tooltipId}
+        toggle={() => setTooltipOpen(!tooltipOpen)}
+        className={darkMode ? styles.darkTooltip : ''}
+      >
+        {tooltipText}
+      </Tooltip>
+    </>
+  );
+}
+
+UsagePercentageBar.propTypes = {
+  material: PropTypes.shape({
+    _id: PropTypes.string.isRequired,
+    stockBought: PropTypes.number,
+    stockUsed: PropTypes.number,
+  }).isRequired,
+  darkMode: PropTypes.bool,
+};
+
+UsagePercentageBar.defaultProps = {
+  darkMode: false,
+};
diff --git a/src/components/BMDashboard/MaterialList/UsagePercentageBar.module.css b/src/components/BMDashboard/MaterialList/UsagePercentageBar.module.css
new file mode 100644
index 0000000000..e55495f262
--- /dev/null
+++ b/src/components/BMDashboard/MaterialList/UsagePercentageBar.module.css
@@ -0,0 +1,107 @@
+/* Usage Percentage Bar Styles */
+
+.usageContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  align-items: stretch;
+  cursor: help;
+}
+
+.barWrapper {
+  width: 100%;
+  height: 24px;
+  background-color: #e5e7eb;
+  border-radius: 4px;
+  overflow: hidden;
+  border: 1px solid #d1d5db;
+}
+
+.progressBar {
+  height: 100%;
+  transition: width 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.7rem;
+  color: white;
+  font-weight: 600;
+}
+
+/* Progress Bar Colors - Light Mode */
+.progressBar.green {
+  background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
+}
+
+.progressBar.yellow {
+  background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
+}
+
+.progressBar.red {
+  background: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
+}
+
+.progressBar.gray {
+  background: linear-gradient(90deg, #9ca3af 0%, #d1d5db 100%);
+}
+
+.usageLabel {
+  font-size: 0.8125rem;
+  color: #4b5563;
+  font-weight: 500;
+  text-align: center;
+  min-height: 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Dark Mode Styles */
+.darkMode .barWrapper {
+  background-color: #3f5269;
+  border-color: #2f4157;
+}
+
+.darkMode .usageLabel {
+  color: #c8d2e0;
+}
+
+/* Progress Bar Colors - Dark Mode */
+.darkMode .progressBar.green {
+  background: linear-gradient(90deg, #059669 0%, #10b981 100%);
+}
+
+.darkMode .progressBar.yellow {
+  background: linear-gradient(90deg, #d97706 0%, #f59e0b 100%);
+}
+
+.darkMode .progressBar.red {
+  background: linear-gradient(90deg, #dc2626 0%, #ef4444 100%);
+}
+
+.darkMode .progressBar.gray {
+  background: linear-gradient(90deg, #4b5563 0%, #6b7280 100%);
+}
+
+/* Tooltip Styles */
+:global(.tooltip-inner) {
+  max-width: 200px;
+  padding: 0.75rem;
+  text-align: left;
+}
+
+:global(.darkMode .tooltip-inner) {
+  background-color: #1f2e45;
+  color: #e8edf4;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .barWrapper {
+    height: 20px;
+  }
+
+  .usageLabel {
+    font-size: 0.75rem;
+  }
+}

From 6056e1f9f8ab1a09e6476418f920acb8193acd3a Mon Sep 17 00:00:00 2001
From: Linh Huynh <cdev.linh@gmail.com>
Date: Fri, 24 Apr 2026 01:34:57 -0700
Subject: [PATCH 4/8] fix: resolve ItemList frontend merge conflicts

---
 .../BMDashboard/ItemList/ItemListView.jsx     | 38 ++++-----
 .../BMDashboard/ItemList/ItemsTable.jsx       | 84 +++++++++----------
 2 files changed, 59 insertions(+), 63 deletions(-)

diff --git a/src/components/BMDashboard/ItemList/ItemListView.jsx b/src/components/BMDashboard/ItemList/ItemListView.jsx
index 68200b47ba..6b05ec647c 100644
--- a/src/components/BMDashboard/ItemList/ItemListView.jsx
+++ b/src/components/BMDashboard/ItemList/ItemListView.jsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
-import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import BMError from '../shared/BMError';
@@ -10,18 +10,21 @@ import ItemsTable from './ItemsTable';
 import MaterialSummaryPanel from '../MaterialList/MaterialSummaryPanel';
 import styles from './ItemListView.module.css';
 
-/**
- * ItemListView Component
- * Main container for displaying filtered items with summary metrics and data table
- * Handles filtering, time selection, and layout of material list page
- */
-export function ItemListView({ itemType, items, errors, UpdateItemModal, dynamicColumns }) {
+export function ItemListView({
+  itemType,
+  items,
+  errors,
+  UpdateItemModal,
+  dynamicColumns,
+  children,
+}) {
   const [filteredItems, setFilteredItems] = useState(items);
   const [selectedProject, setSelectedProject] = useState('all');
   const [selectedItem, setSelectedItem] = useState('all');
   const [isError, setIsError] = useState(false);
   const [selectedTime, setSelectedTime] = useState(new Date());
   const darkMode = useSelector(state => state.theme.darkMode);
+  const isMaterialsView = itemType === 'Materials';
 
   useEffect(() => {
     if (items) setFilteredItems([...items]);
@@ -95,24 +98,18 @@ export function ItemListView({ itemType, items, errors, UpdateItemModal, dynamic
                 selectedProject={selectedProject}
                 selectedItem={selectedItem}
                 setSelectedItem={setSelectedItem}
+                label={itemType === 'Materials' ? 'Material' : itemType}
+                darkMode={darkMode}
               />
             </div>
           )}
-          <div className={`${styles.buttonsRow}`}>
-            <button type="button" className={`${styles.btnPrimary}`}>
-              Add Material
-            </button>
-            <button type="button" className={`${styles.btnPrimary}`}>
-              Edit Name/Measurement
-            </button>
-            <button type="button" className={`${styles.btnPrimary}`}>
-              View Update History
-            </button>
-          </div>
         </span>
+        {children}
         {filteredItems && (
           <>
-            <MaterialSummaryPanel materials={filteredItems} darkMode={darkMode} />
+            {isMaterialsView && (
+              <MaterialSummaryPanel materials={filteredItems} darkMode={darkMode} />
+            )}
             <ItemsTable
               selectedProject={selectedProject}
               selectedItem={selectedItem}
@@ -120,6 +117,7 @@ export function ItemListView({ itemType, items, errors, UpdateItemModal, dynamic
               UpdateItemModal={UpdateItemModal}
               dynamicColumns={dynamicColumns}
               darkMode={darkMode}
+              itemType={itemType}
             />
           </>
         )}
@@ -159,10 +157,12 @@ ItemListView.propTypes = {
       key: PropTypes.string.isRequired,
     }),
   ).isRequired,
+  children: PropTypes.node,
 };
 
 ItemListView.defaultProps = {
   errors: {},
+  children: null,
 };
 
 export default ItemListView;
diff --git a/src/components/BMDashboard/ItemList/ItemsTable.jsx b/src/components/BMDashboard/ItemList/ItemsTable.jsx
index d000406cef..0b250b683c 100644
--- a/src/components/BMDashboard/ItemList/ItemsTable.jsx
+++ b/src/components/BMDashboard/ItemList/ItemsTable.jsx
@@ -23,6 +23,7 @@ export default function ItemsTable({
   UpdateItemModal,
   dynamicColumns,
   darkMode = false,
+  itemType,
 }) {
   const [sortedData, setData] = useState(filteredItems);
   const [modal, setModal] = useState(false);
@@ -59,19 +60,16 @@ export default function ItemsTable({
 
   const handleViewRecordsClick = (data, type) => {
     if (type === 'UsageRecord') {
-      // For UsageRecord, show the chart directly
       const projectId = data.project?._id || data.projectId;
       if (projectId) {
         setChartProjectId(projectId);
         setShowChartModal(true);
       } else {
-        // If no project ID, fall back to the regular modal
         setModal(true);
         setRecord(data);
         setRecordType(type);
       }
     } else {
-      // For other record types, show the regular modal
       setModal(true);
       setRecord(data);
       setRecordType(type);
@@ -111,10 +109,16 @@ export default function ItemsTable({
     setData(newSortedData);
   };
 
+  const isMaterialsView = itemType === 'Materials';
+
   const getNestedValue = (obj, path) => {
+    if (!path) return null;
+    if (path === 'product id') return obj.productId;
     return path.split('.').reduce((acc, part) => (acc ? acc[part] : null), obj);
   };
 
+  const emptyStateColSpan = 4 + dynamicColumns.length + (isMaterialsView ? 4 : 2);
+
   return (
     <>
       {/* Regular Records Modal for Update and Purchase records */}
@@ -124,6 +128,7 @@ export default function ItemsTable({
         record={record}
         setRecord={setRecord}
         recordType={recordType}
+        itemType={itemType}
       />
 
       {/* Direct Chart Modal for Usage Records */}
@@ -150,16 +155,12 @@ export default function ItemsTable({
               ) : (
                 <th>Name</th>
               )}
-              <th>PID</th>
-              <th>Measurement</th>
-              <th>Bought</th>
-              <th>Used</th>
-              <th>Usage %</th>
-              <th>Available</th>
-              <th>Stock Health</th>
-              <th>Wasted</th>
-              <th>Hold</th>
-              <th>Usage Record</th>
+              {dynamicColumns.map(({ label, key }) => (
+                <th key={key}>{label}</th>
+              ))}
+              {isMaterialsView && <th>Usage %</th>}
+              {isMaterialsView && <th>Stock Health</th>}
+              {isMaterialsView && <th>Usage Record</th>}
               <th>Updates</th>
               <th>Purchases</th>
             </tr>
@@ -172,36 +173,31 @@ export default function ItemsTable({
                   <tr key={el._id}>
                     <td>{el.project?.name}</td>
                     <td>{el.itemType?.name}</td>
-                    <td>{el.productId || 'N/A'}</td>
-                    <td>{el.itemType?.unit || 'N/A'}</td>
-                    <td>{el.stockBought}</td>
-                    <td>{el.stockUsed}</td>
-                    <td>
-                      <UsagePercentageBar material={el} darkMode={darkMode} />
-                    </td>
-                    <td>{el.stockAvailable}</td>
-                    <td>
-                      <StockHealthIndicator material={el} darkMode={darkMode} />
-                    </td>
-                    <td>{el.stockWasted}</td>
-                    <td>{el.stockHold}</td>
-                    <td className={`${styles.itemsCell}`}>
-                      <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>
+                    {dynamicColumns.map(({ label, key }) => (
+                      <td key={label}>{getNestedValue(el, key) ?? 'N/A'}</td>
+                    ))}
+                    {isMaterialsView && (
+                      <td>
+                        <UsagePercentageBar material={el} darkMode={darkMode} />
+                      </td>
+                    )}
+                    {isMaterialsView && (
+                      <td>
+                        <StockHealthIndicator material={el} darkMode={darkMode} />
+                      </td>
+                    )}
+                    {isMaterialsView && (
+                      <td>
+                        <Button
+                          color="primary"
+                          outline
+                          size="sm"
+                          onClick={() => handleViewRecordsClick(el, 'UsageRecord')}
+                        >
+                          View
+                        </Button>
+                      </td>
+                    )}
                     <td className={`${styles.itemsCell}`}>
                       <button
                         type="button"
@@ -234,7 +230,7 @@ export default function ItemsTable({
               })
             ) : (
               <tr>
-                <td colSpan={14} style={{ textAlign: 'center' }}>
+                <td colSpan={emptyStateColSpan} style={{ textAlign: 'center' }}>
                   No items data
                 </td>
               </tr>

From ae365879379fc5bf8dd467787baefa4e31626c59 Mon Sep 17 00:00:00 2001
From: Linh Huynh <cdev.linh@gmail.com>
Date: Fri, 24 Apr 2026 01:52:31 -0700
Subject: [PATCH 5/8] fix: make husky hooks work in windows push flow

---
 .husky/pre-commit |  2 +-
 .husky/pre-push   | 26 ++++++++++++--------------
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/.husky/pre-commit b/.husky/pre-commit
index 9bfb8f99e4..5be0087ca7 100755
--- a/.husky/pre-commit
+++ b/.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
 
diff --git a/.husky/pre-push b/.husky/pre-push
index 8e088dbd0c..a59caf319a 100755
--- a/.husky/pre-push
+++ b/.husky/pre-push
@@ -2,22 +2,21 @@
 # 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
 
-. "$(dirname "$0")/_/husky.sh"
-
 changed_files=$(git diff --name-only @{upstream}...HEAD 2>/dev/null)
 
 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
 
 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
 
@@ -29,25 +28,24 @@ lint_status=0
 style_status=0
 
 if [ -n "$js_files" ]; then
-  echo "🧪 Running related tests before push..."
-  npx vitest related --run $js_files
+  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..."
-  npx eslint $js_files
+  echo "Running ESLint on changed files before push..."
+  printf '%s\n' "$js_files" | xargs -r -n 50 npx eslint
   lint_status=$?
 fi
 
 if [ -n "$style_files" ]; then
-  echo "🎨 Running Stylelint on changed files before push..."
-  npx stylelint $style_files
+  echo "Running Stylelint on changed files before push..."
+  printf '%s\n' "$style_files" | xargs -r -n 50 npx stylelint
   style_status=$?
 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..."

From 3b958cbf4d7dcca21a4af217e3a41397e2e8c698 Mon Sep 17 00:00:00 2001
From: Linh Huynh <cdev.linh@gmail.com>
Date: Fri, 24 Apr 2026 02:04:53 -0700
Subject: [PATCH 6/8] fix: scope pre-push checks to branch commits

---
 .husky/pre-push | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/.husky/pre-push b/.husky/pre-push
index a59caf319a..b2205b0aa7 100755
--- a/.husky/pre-push
+++ b/.husky/pre-push
@@ -8,7 +8,15 @@ if command -v nvm >/dev/null 2>&1 && [ -f .nvmrc ]; then
   nvm use 20 2>/dev/null || nvm install 20 && nvm use 20
 fi
 
-changed_files=$(git diff --name-only @{upstream}...HEAD 2>/dev/null)
+changed_files=$(
+  git log --first-parent --no-merges --format= --name-only @{upstream}..HEAD 2>/dev/null |
+    grep -v '^$' |
+    sort -u
+)
+
+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."

From 84d700d9694ff436bdf0e8e409691352711a3af1 Mon Sep 17 00:00:00 2001
From: Sireesha Kunchala <sireeshakunchala246@gmail.com>
Date: Wed, 17 Jun 2026 22:31:10 -0400
Subject: [PATCH 7/8] dark css fixes

---
 src/App.module.css                            |  8 +++-
 .../ItemList/ItemListView.module.css          | 37 +++++++++++++++++--
 .../MaterialList/UsagePercentageBar.jsx       |  7 +++-
 src/components/common/ThemeManager.jsx        | 13 +++++++
 4 files changed, 59 insertions(+), 6 deletions(-)

diff --git a/src/App.module.css b/src/App.module.css
index 74e18fa25c..b2dca398e6 100644
--- a/src/App.module.css
+++ b/src/App.module.css
@@ -25,10 +25,16 @@ button {
 }
 
 html {
-  background-color: #1a1d23 !important;
+  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;
 }
 
diff --git a/src/components/BMDashboard/ItemList/ItemListView.module.css b/src/components/BMDashboard/ItemList/ItemListView.module.css
index 47d65ea217..a2137e0a5b 100644
--- a/src/components/BMDashboard/ItemList/ItemListView.module.css
+++ b/src/components/BMDashboard/ItemList/ItemListView.module.css
@@ -9,6 +9,9 @@ table td {
   max-width: 1536px;
   margin: 1rem auto;
   padding: 0 1rem;
+  min-height: 100vh;
+  background-color: #fff;
+  color: #1f2937;
 }
 
 .itemsTableContainer {
@@ -16,6 +19,17 @@ table td {
   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;
 }
diff --git a/src/components/BMDashboard/MaterialList/UsagePercentageBar.jsx b/src/components/BMDashboard/MaterialList/UsagePercentageBar.jsx
index 024f997340..bc6a1dd6a4 100644
--- a/src/components/BMDashboard/MaterialList/UsagePercentageBar.jsx
+++ b/src/components/BMDashboard/MaterialList/UsagePercentageBar.jsx
@@ -32,7 +32,10 @@ export default function UsagePercentageBar({ material, darkMode = false }) {
   if (!bought || bought <= 0) {
     return (
       <>
-        <div id={tooltipId} className={`${styles.usageContainer}`}>
+        <div
+          id={tooltipId}
+          className={`${styles.usageContainer} ${darkMode ? styles.darkMode : ''}`}
+        >
           <span className={`${styles.usageLabel}`}>N/A</span>
         </div>
         <Tooltip
@@ -50,7 +53,7 @@ export default function UsagePercentageBar({ material, darkMode = false }) {
 
   return (
     <>
-      <div id={tooltipId} className={`${styles.usageContainer}`}>
+      <div id={tooltipId} className={`${styles.usageContainer} ${darkMode ? styles.darkMode : ''}`}>
         <div className={`${styles.barWrapper}`}>
           <div
             className={`${styles.progressBar} ${styles[usageColor]}`}
diff --git a/src/components/common/ThemeManager.jsx b/src/components/common/ThemeManager.jsx
index 5b49fb2c7d..806e33bc1f 100644
--- a/src/components/common/ThemeManager.jsx
+++ b/src/components/common/ThemeManager.jsx
@@ -9,6 +9,15 @@ const ThemeManager = () => {
   const darkMode = useSelector(state => state.theme?.darkMode || false);
 
   useEffect(() => {
+    // Drive the page background directly from the redux theme so it can never
+    // disagree with the component-level theme (inline !important beats any
+    // lingering `.dark-mode` stylesheet rule).
+    const pageBg = darkMode ? '#1a1d23' : '#ffffff';
+    document.documentElement.style.setProperty('background-color', pageBg, 'important');
+    document.body.style.setProperty('background-color', pageBg, 'important');
+    const rootEl = document.getElementById('root');
+    if (rootEl) rootEl.style.setProperty('background-color', pageBg, 'important');
+
     // Apply dark mode class to body for global styling
     if (darkMode) {
       document.body.classList.add('dark-mode');
@@ -26,6 +35,10 @@ const ThemeManager = () => {
       document.body.classList.remove('dark-mode');
       document.body.classList.remove('bm-dashboard-dark');
       document.documentElement.classList.remove('dark-mode');
+      document.documentElement.style.removeProperty('background-color');
+      document.body.style.removeProperty('background-color');
+      const rootEl = document.getElementById('root');
+      if (rootEl) rootEl.style.removeProperty('background-color');
     };
   }, [darkMode]);
 

From 2d7939a32cdad8589bd0b600dcf53bc408978392 Mon Sep 17 00:00:00 2001
From: Sireesha Kunchala <sireeshakunchala246@gmail.com>
Date: Sun, 21 Jun 2026 16:26:32 -0400
Subject: [PATCH 8/8] added request changes

---
 .../BMDashboard/ItemList/ItemListView.jsx     |  36 +-
 .../ItemList/ItemListView.module.css          |  33 +-
 .../BMDashboard/ItemList/ItemsTable.jsx       |   6 +-
 .../MaterialUsage/MaterialUsageChart.jsx      | 116 ++++--
 .../MaterialUsageChart.module.css             | 376 +++++++++---------
 5 files changed, 312 insertions(+), 255 deletions(-)

diff --git a/src/components/BMDashboard/ItemList/ItemListView.jsx b/src/components/BMDashboard/ItemList/ItemListView.jsx
index 1ca22bcb7d..5aaa1e01c5 100644
--- a/src/components/BMDashboard/ItemList/ItemListView.jsx
+++ b/src/components/BMDashboard/ItemList/ItemListView.jsx
@@ -171,22 +171,26 @@ export function ItemListView({
         <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}
diff --git a/src/components/BMDashboard/ItemList/ItemListView.module.css b/src/components/BMDashboard/ItemList/ItemListView.module.css
index a2137e0a5b..094411ebfd 100644
--- a/src/components/BMDashboard/ItemList/ItemListView.module.css
+++ b/src/components/BMDashboard/ItemList/ItemListView.module.css
@@ -402,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;
@@ -598,3 +598,8 @@ table td {
     min-width: 0;
   }
 }
+
+.inlineField {
+  margin-top: -9px;
+}
+
diff --git a/src/components/BMDashboard/ItemList/ItemsTable.jsx b/src/components/BMDashboard/ItemList/ItemsTable.jsx
index 575e493315..7693563982 100644
--- a/src/components/BMDashboard/ItemList/ItemsTable.jsx
+++ b/src/components/BMDashboard/ItemList/ItemsTable.jsx
@@ -115,7 +115,11 @@ export default function ItemsTable({
         itemType={itemType}
       />
       {showChartModal && chartProjectId && (
-        <MaterialUsageChart projectId={chartProjectId} toggle={() => setShowChartModal(false)} />
+        <MaterialUsageChart
+          projectId={chartProjectId}
+          toggle={() => setShowChartModal(false)}
+          darkMode={darkMode}
+        />
       )}
       {UpdateItemModal && (
         <UpdateItemModal modal={updateModal} setModal={setUpdateModal} record={updateRecord} />
diff --git a/src/components/BMDashboard/MaterialUsage/MaterialUsageChart.jsx b/src/components/BMDashboard/MaterialUsage/MaterialUsageChart.jsx
index 696fdb16aa..977e4617f5 100644
--- a/src/components/BMDashboard/MaterialUsage/MaterialUsageChart.jsx
+++ b/src/components/BMDashboard/MaterialUsage/MaterialUsageChart.jsx
@@ -6,7 +6,6 @@ import axios from 'axios';
 import { ENDPOINTS } from '../../../utils/URL';
 import styles from './MaterialUsageChart.module.css';
 
-// Constants
 const COLORS = ['#A74C4C', '#4C4C4C', '#C9B28A'];
 
 export default function MaterialUsageChart({ projectId, toggle, darkMode = false }) {
@@ -15,47 +14,62 @@ export default function MaterialUsageChart({ projectId, toggle, darkMode = false
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
 
-  // Calculate percentages for chart data
   const chartDataWithPercentages = useMemo(() => {
     if (!chartData.length) return [];
-
     const total = chartData.reduce((sum, item) => sum + item.value, 0);
     if (total === 0) return chartData.map(item => ({ ...item, percentage: '0.00' }));
-
     return chartData.map(item => ({
       ...item,
       percentage: total > 0 ? ((item.value / total) * 100).toFixed(2) : '0.00',
     }));
   }, [chartData]);
 
-  // Helper functions
   const formatIncrease = value => (value >= 0 ? `+${value}%` : `${value}%`);
-
   const isEmptyData = useMemo(() => chartData.every(item => item.value === 0), [chartData]);
 
-  // Center label component
   const CenterLabel = ({ increase }) => (
-    <div className={styles.centerLabel}>
-      <strong className={styles.centerLabelValue}>{formatIncrease(increase)}</strong>
-      <div className={styles.centerLabelSubtitle}>week over week</div>
+    <div
+      className={`${styles.centerLabel} ${
+        darkMode ? styles.centerLabelDark : styles.centerLabelLight
+      }`}
+    >
+      <strong
+        className={`${styles.centerLabelValue} ${darkMode ? styles.textDark : styles.textLight}`}
+      >
+        {formatIncrease(increase)}
+      </strong>
+      <div
+        className={`${styles.centerLabelSubtitle} ${
+          darkMode ? styles.subTextDark : styles.subTextLight
+        }`}
+      >
+        week over week
+      </div>
     </div>
   );
 
-  // Chart legend component
   const ChartLegend = ({ data }) => (
-    <div className={styles.chartLegend}>
+    <div
+      className={`${styles.chartLegend} ${
+        darkMode ? styles.legendAreaDark : styles.legendAreaLight
+      }`}
+    >
       {data.map((entry, index) => (
-        <div key={entry.name} className={styles.legendItem}>
+        <div
+          key={entry.name}
+          className={`${styles.legendItem} ${
+            darkMode ? styles.legendItemDark : styles.legendItemLight
+          }`}
+        >
           <div className={styles.legendColor} style={{ backgroundColor: COLORS[index] }} />
           <span className={styles.legendText}>
-            {entry.name}: {entry.percentage}%
+            {entry.name}: {entry.percentage}
           </span>
         </div>
       ))}
     </div>
   );
 
-  // Custom label component to show percentages and labels outside the chart
   const renderCustomizedLabel = ({
     cx,
     cy,
@@ -70,12 +84,14 @@ export default function MaterialUsageChart({ projectId, toggle, darkMode = false
     const x = cx + radius * Math.cos(-midAngle * RADIAN);
     const y = cy + radius * Math.sin(-midAngle * RADIAN);
 
+    // Explicit Recharts SVG colors
+    const labelColor = darkMode ? '#e2e8f0' : '#495057';
     return (
       <g>
         <text
           x={x}
           y={y}
-          fill="#495057"
+          fill={labelColor}
           textAnchor={x > cx ? 'start' : 'end'}
           dominantBaseline="central"
           fontSize={12}
@@ -83,23 +99,20 @@ export default function MaterialUsageChart({ projectId, toggle, darkMode = false
         >
           {`${name}: ${percentage}%`}
         </text>
-        {/* Add a line connecting the segment to the label */}
         <line
           x1={cx + (outerRadius + 5) * Math.cos(-midAngle * RADIAN)}
           y1={cy + (outerRadius + 5) * Math.sin(-midAngle * RADIAN)}
           x2={cx + (outerRadius + 25) * Math.cos(-midAngle * RADIAN)}
           y2={cy + (outerRadius + 25) * Math.sin(-midAngle * RADIAN)}
-          stroke="#495057"
+          stroke={labelColor}
           strokeWidth={1}
         />
       </g>
     );
   };
 
-  // Data fetching
   useEffect(() => {
     if (!projectId) return;
-
     const fetchData = async () => {
       try {
         setLoading(true);
@@ -107,14 +120,12 @@ export default function MaterialUsageChart({ projectId, toggle, darkMode = false
         const { data } = await axios.get(`${ENDPOINTS.BM_MATERIALS}/${projectId}`, {
           timeout: 10000,
         });
-
         const {
           availableMaterials = 0,
           usedMaterials = 0,
           wastedMaterials = 0,
           increaseOverLastWeek = 0,
         } = data;
-
         setChartData([
           { name: 'Available', value: availableMaterials },
           { name: 'Used', value: usedMaterials },
@@ -127,47 +138,71 @@ export default function MaterialUsageChart({ projectId, toggle, darkMode = false
         setLoading(false);
       }
     };
-
     fetchData();
   }, [projectId]);
 
-  // Retry function
   const retryFetch = () => {
     setError('');
     setLoading(true);
   };
 
-  // Apply dark mode class if enabled
-  const modalClass = darkMode
-    ? `${styles.materialChartModal} ${styles.darkMode}`
-    : styles.materialChartModal;
+  // Matches the wrapper background to hide the pie gaps cleanly
+  const pieStrokeColor = darkMode ? '#2d3748' : '#fff';
 
   return (
-    <Modal isOpen={true} toggle={toggle} size="lg" centered className={modalClass}>
-      <ModalHeader toggle={toggle} className={styles.materialChartHeader}>
+    <Modal
+      isOpen={true}
+      toggle={toggle}
+      size="lg"
+      centered
+      className={styles.materialChartModal}
+      // Target the Reactstrap Modal-Content specifically
+      contentClassName={darkMode ? styles.modalContentDark : styles.modalContentLight}
+    >
+      <ModalHeader
+        toggle={toggle}
+        className={`${styles.materialChartHeader} ${
+          darkMode ? styles.headerDark : styles.headerLight
+        }`}
+      >
         Material Usage Proportion
       </ModalHeader>
 
-      <ModalBody className={styles.materialChartBody}>
+      <ModalBody
+        className={`${styles.materialChartBody} ${darkMode ? styles.bodyDark : styles.bodyLight}`}
+      >
         {loading ? (
-          <div className={styles.chartLoadingContainer}>
+          <div className={styles.statusContainer}>
             <Spinner color="primary" />
-            <div className={styles.chartLoadingText}>Loading material data...</div>
+            <div className={darkMode ? styles.subTextDark : styles.subTextLight}>
+              Loading material data...
+            </div>
           </div>
         ) : error ? (
-          <div className={styles.chartErrorContainer}>
-            <p className={styles.chartErrorText}>{error}</p>
-            <button className={styles.chartRetryButton} onClick={retryFetch} type="button">
+          <div className={styles.statusContainer}>
+            <p className={darkMode ? styles.errorTextDark : styles.errorTextLight}>{error}</p>
+            <button
+              className={`${styles.chartRetryButton} ${
+                darkMode ? styles.btnDark : styles.btnLight
+              }`}
+              onClick={retryFetch}
+            >
               Retry
             </button>
           </div>
         ) : isEmptyData ? (
-          <div className={styles.chartEmptyContainer}>
-            <p className={styles.chartEmptyText}>No material data available</p>
+          <div className={styles.statusContainer}>
+            <p className={darkMode ? styles.subTextDark : styles.subTextLight}>
+              No material data available
+            </p>
           </div>
         ) : (
           <div className={styles.chartMainContainer}>
-            <div className={styles.pieChartWrapper}>
+            <div
+              className={`${styles.pieChartWrapper} ${
+                darkMode ? styles.wrapperDark : styles.wrapperLight
+              }`}
+            >
               <ResponsiveContainer width="100%" height={400}>
                 <PieChart>
                   <Pie
@@ -186,7 +221,7 @@ export default function MaterialUsageChart({ projectId, toggle, darkMode = false
                       <Cell
                         key={`cell-${index}`}
                         fill={COLORS[index]}
-                        stroke="#fff"
+                        stroke={pieStrokeColor}
                         strokeWidth={2}
                       />
                     ))}
@@ -195,7 +230,6 @@ export default function MaterialUsageChart({ projectId, toggle, darkMode = false
               </ResponsiveContainer>
               <CenterLabel increase={increase} />
             </div>
-
             <ChartLegend data={chartDataWithPercentages} />
           </div>
         )}
diff --git a/src/components/BMDashboard/MaterialUsage/MaterialUsageChart.module.css b/src/components/BMDashboard/MaterialUsage/MaterialUsageChart.module.css
index e2267557a7..369bf9b8e2 100644
--- a/src/components/BMDashboard/MaterialUsage/MaterialUsageChart.module.css
+++ b/src/components/BMDashboard/MaterialUsage/MaterialUsageChart.module.css
@@ -1,5 +1,32 @@
 /* stylelint-disable no-descending-specificity */
 
+/* ==========================================================================
+   REACTSTRAP DARK MODE GLOBAL OVERRIDES
+   ========================================================================== */
+:global(.bg-dark-modal) {
+  background-color: #1a1d23 !important;
+  border-color: #2d3748 !important;
+}
+
+:global(.bg-dark-modal .modal-header) {
+  background-color: #1a1d23 !important;
+  border-bottom: 1px solid #2d3748 !important;
+  color: #fff !important;
+}
+
+:global(.bg-dark-modal .close) {
+  color: #cbd5e0 !important;
+  text-shadow: none !important;
+}
+
+:global(.bg-dark-modal .close:hover) {
+  color: #fff !important;
+}
+
+/* ==========================================================================
+   BASE STYLES 
+   ========================================================================== */
+
 /* Modal Container */
 .materialChartModal :global(.modal-dialog) {
   max-width: 800px;
@@ -12,34 +39,28 @@
   box-shadow: 0 4px 20px rgb(0 0 0 / 15%);
 }
 
-/* Header */
+/* Header Base */
 .materialChartHeader {
-  background: #f8f9fa;
-  color: #212529;
-  border-bottom: 1px solid #dee2e6;
   padding: 1rem 1.5rem;
   font-size: 1.25rem;
   font-weight: 600;
 }
 
 .materialChartHeader :global(.close) {
-  color: #6c757d;
-  opacity: 0.7;
   font-size: 1.5rem;
+  opacity: 0.7;
 }
 
 .materialChartHeader :global(.close):hover {
   opacity: 1;
-  color: #495057;
 }
 
-/* Body */
+/* Body Base */
 .materialChartBody {
   padding: 0;
   display: flex;
   flex-direction: column;
   min-height: 500px;
-  background: #fff;
 }
 
 /* Main Chart Container */
@@ -56,14 +77,14 @@
   flex: 1;
   position: relative;
   min-height: 350px;
-  background: #fff;
   border-radius: 8px;
   padding: 1rem;
-  border: 1px solid #e9ecef;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: visible;
+  border-width: 1px;
+  border-style: solid;
 }
 
 /* Center Label */
@@ -74,7 +95,6 @@
   transform: translate(-50%, -50%);
   text-align: center;
   z-index: 10;
-  background: #fff;
   padding: 1rem;
   border-radius: 50%;
   width: 100px;
@@ -83,21 +103,19 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
-  border: 1px solid #f1f3f4;
+  border-width: 1px;
+  border-style: solid;
 }
 
 .centerLabelValue {
   font-size: 1.1rem;
   font-weight: 700;
-  color: #2c3e50;
   margin: 0;
   line-height: 1.2;
 }
 
 .centerLabelSubtitle {
   font-size: 0.75rem;
-  color: #6c757d;
   margin-top: 0.25rem;
   font-weight: 500;
 }
@@ -109,9 +127,9 @@
   gap: 1.5rem;
   flex-wrap: wrap;
   padding: 1rem;
-  background: #f8f9fa;
   border-radius: 6px;
-  border: 1px solid #e9ecef;
+  border-width: 1px;
+  border-style: solid;
 }
 
 .legendItem {
@@ -119,9 +137,9 @@
   align-items: center;
   gap: 0.5rem;
   padding: 0.4rem 0.8rem;
-  background: #fff;
   border-radius: 4px;
-  border: 1px solid #dee2e6;
+  border-width: 1px;
+  border-style: solid;
   transition: all 0.2s ease;
 }
 
@@ -146,29 +164,11 @@
 .legendText {
   font-size: 0.9rem;
   font-weight: 500;
-  color: #495057;
   white-space: nowrap;
 }
 
 /* Loading States */
-.chartLoadingContainer {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem;
-  padding: 2rem;
-}
-
-.chartLoadingText {
-  font-size: 1rem;
-  color: #6c757d;
-  font-weight: 500;
-}
-
-/* Error States */
-.chartErrorContainer {
+.statusContainer {
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -178,99 +178,204 @@
   padding: 2rem;
 }
 
-.chartErrorText {
-  font-size: 1rem;
-  color: #dc3545;
-  text-align: center;
-  margin: 0;
-  font-weight: 500;
-  max-width: 400px;
-  line-height: 1.5;
-}
-
 .chartRetryButton {
-  background: #007bff;
-  color: white;
-  border: none;
   padding: 0.5rem 1.5rem;
   border-radius: 4px;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s ease;
   font-size: 0.9rem;
-}
-
-.chartRetryButton:hover {
-  background: #0056b3;
-  transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgb(0 123 255 / 30%);
+  border: none;
 }
 
 .chartRetryButton:active {
   transform: translateY(0);
 }
 
-/* Empty State */
-.chartEmptyContainer {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 2rem;
+
+/* ==========================================================================
+   DYNAMIC THEME CLASSES (ADDED FIXES)
+   ========================================================================== */
+
+/* --- DARK MODE (#1a1d23) --- */
+.modalContentDark {
+  background-color: #1a1d23 !important;
+  border-color: #2d3748 !important;
+}
+
+.headerDark {
+  background-color: #1a1d23 !important;
+  border-bottom: 1px solid #2d3748 !important;
+  color: #fff !important; /* Keeps wrapper white */
+}
+
+/* Pierce Reactstrap's internal heading tag */
+.headerDark :global(.modal-title) {
+  color: #fff !important;
+  filter: none !important;
+}
+
+.headerDark :global(.close) {
+  color: #cbd5e0 !important;
+}
+
+.headerDark :global(.close):hover {
+  color: #fff !important;
+}
+
+.bodyDark {
+  background-color: #1a1d23;
+}
+
+.textDark {
+  color: #fff;
+}
+
+.subTextDark {
+  color: #a0aec0;
+}
+
+.wrapperDark {
+  background-color: #1a1d23;
+  border-color: #2d3748;
+}
+
+.centerLabelDark {
+  background-color: #1a1d23;
+  border-color: #2d3748;
+}
+
+.legendAreaDark {
+  background-color: #1a1d23;
+  border-color: #2d3748;
+}
+
+.legendItemDark {
+  border-color: #2d3748;
+  color: #e2e8f0;
+}
+
+.errorTextDark {
+  color: #fc8181;
+}
+
+.btnDark {
+  background-color: #4a5568;
+  color: #fff;
+}
+
+.btnDark:hover {
+  background-color: #2d3748;
+}
+
+/* --- LIGHT MODE --- */
+.modalContentLight {
+  background-color: #fff !important;
 }
 
-.chartEmptyText {
-  font-size: 1rem;
+.headerLight {
+  background-color: #f8f9fa !important;
+  color: #212529 !important;
+  border-bottom: 1px solid #dee2e6 !important;
+}
+
+.headerLight :global(.close) {
   color: #6c757d;
-  margin: 0;
-  font-weight: 500;
 }
 
-/* Responsive Design */
+.bodyLight {
+  background-color: #fff;
+}
+
+.textLight {
+  color: #212529;
+}
+
+.subTextLight {
+  color: #6c757d;
+}
+
+.wrapperLight {
+  background-color: #fff;
+  border-color: #dee2e6;
+}
+
+.centerLabelLight {
+  background-color: #fff;
+  border-color: #dee2e6;
+}
+
+.legendAreaLight {
+  background-color: #fff;
+  border-color: #dee2e6;
+}
+
+.legendItemLight {
+  border-color: #dee2e6;
+  color: #212529;
+}
+
+.errorTextLight {
+  color: #dc3545;
+}
+
+.btnLight {
+  background-color: #007bff;
+  color: #fff;
+}
+
+.btnLight:hover {
+  background-color: #0056b3;
+}
+
+
+/* ==========================================================================
+   RESPONSIVE DESIGN 
+   ========================================================================== */
 @media (width <= 768px) {
   .materialChartModal :global(.modal-dialog) {
     max-width: 95%;
     margin: 0.5rem auto;
   }
-  
+
   .materialChartHeader {
     padding: 0.75rem 1rem;
     font-size: 1.1rem;
   }
-  
+
   .chartMainContainer {
     padding: 1rem;
     gap: 1rem;
   }
-  
+
   .pieChartWrapper {
     min-height: 300px;
     padding: 0.5rem;
   }
-  
+
   .centerLabel {
     width: 80px;
     height: 80px;
     padding: 0.75rem;
   }
-  
+
   .centerLabelValue {
     font-size: 0.9rem;
   }
-  
+
   .centerLabelSubtitle {
     font-size: 0.65rem;
   }
-  
+
   .chartLegend {
     gap: 1rem;
     padding: 0.75rem;
   }
-  
+
   .legendItem {
     padding: 0.3rem 0.6rem;
   }
-  
+
   .legendText {
     font-size: 0.8rem;
   }
@@ -281,151 +386,56 @@
     margin: 0.25rem auto;
     max-width: 98%;
   }
-  
+
   .materialChartBody {
     min-height: 450px;
   }
-  
+
   .pieChartWrapper {
     min-height: 280px;
     padding: 0.25rem;
   }
-  
+
   .centerLabel {
     width: 80px;
     height: 80px;
     padding: 0.6rem;
   }
-  
+
   .centerLabelValue {
     font-size: 0.9rem;
   }
-  
+
   .centerLabelSubtitle {
     font-size: 0.65rem;
   }
-  
+
   .chartLegend {
     flex-direction: column;
     align-items: center;
     gap: 0.8rem;
     padding: 0.75rem;
   }
-  
+
   .legendItem {
     width: 100%;
     max-width: 200px;
     justify-content: center;
     padding: 0.5rem 0.75rem;
   }
-  
+
   .legendText {
     font-size: 0.8rem;
   }
-  
-  .chartLoadingText,
-  .chartErrorText,
-  .chartEmptyText {
-    font-size: 0.9rem;
-  }
-  
-  .chartRetryButton {
-    padding: 0.4rem 1.25rem;
-    font-size: 0.85rem;
-  }
 }
 
-/* Dark Mode */
-.darkMode :global(.modal-content) {
-  background-color: #1a1a1a;
-  border-color: #333;
-}
-
-.darkMode .materialChartHeader {
-  background: #2d3748;
-  color: #fff;
-  border-bottom-color: #4a5568;
-}
-
-.darkMode .materialChartHeader :global(.close) {
-  color: #cbd5e0;
-}
-
-.darkMode .materialChartHeader :global(.close):hover {
-  color: #fff;
-}
-
-.darkMode .materialChartBody {
-  background: #1a202c;
-}
-
-.darkMode .pieChartWrapper {
-  background: #2d3748;
-  border-color: #4a5568;
-}
-
-.darkMode .centerLabel {
-  background: #2d3748;
-  border-color: #4a5568;
-  box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
-}
-
-.darkMode .centerLabelValue {
-  color: #fff;
-}
-
-.darkMode .centerLabelSubtitle {
-  color: #cbd5e0;
-}
-
-.darkMode .chartLegend {
-  background: #2d3748;
-  border-color: #4a5568;
-}
-
-.darkMode .legendItem {
-  background: #4a5568;
-  border-color: #718096;
-}
-
-.darkMode .legendText {
-  color: #e2e8f0;
-}
-
-.darkMode .chartLoadingText {
-  color: #a0aec0;
-}
-
-.darkMode .chartErrorText {
-  color: #fc8181;
-}
-
-.darkMode .chartEmptyText {
-  color: #a0aec0;
-}
-
-.darkMode .chartRetryButton {
-  background: #3182ce;
-}
-
-.darkMode .chartRetryButton:hover {
-  background: #2c5aa0;
-}
-
-/* Accessibility */
-.chartRetryButton:focus {
-  outline: 2px solid #007bff;
-  outline-offset: 2px;
-}
-
-/* Reduced motion support */
 @media (prefers-reduced-motion: reduce) {
   .legendItem,
   .legendColor,
   .chartRetryButton {
     transition: none;
   }
-  
+
   .legendItem:hover,
   .chartRetryButton:hover {
     transform: none;