Shravya_bugfix/css_module.css/mostWastedMaterials _3675

src/components/MostWastedMaterials/DropDown.jsx

@@ -0,0 +1,51 @@
+import { useState, useRef, useEffect } from 'react';
+import styles from './Dropdown.module.css';
+import { useSelector } from 'react-redux';
+export default function CustomDropdown({ options, selected, onSelect }) {
+  const darkMode = useSelector(state => state.theme.darkMode);
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = event => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  return (
+    <div className={`${darkMode ? styles.darkMode : ''}`}>
+      <div className={`${styles.dropdownWrapper}`} ref={dropdownRef}>
+        <button
+          type="button"
+          className={`${styles.dropdownButton}`}
+          onClick={() => setIsOpen(!isOpen)}
+        >
+          <span>{selected.name}</span>
+          <span className={`${isOpen ? styles.arrowOpen : styles.arrow}`}>▼</span>
+        </button>
+
+        {isOpen && (
+          <div className={`${styles.dropdownMenu}`}>
+            {options.map(option => (
+              <button
+                type="button"
+                key={option.id}
+                className={`${styles.dropdownItem}`}
+                onClick={() => {
+                  onSelect(option);
+                  setIsOpen(false);
+                }}
+              >
+                {option.name}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/MostWastedMaterials/Dropdown.module.css

@@ -0,0 +1,92 @@
+.dropdownWrapper {
+  position: relative;
+  width: 100%;
+  margin-top: 30px;
+}
+
+.dropdownButton {
+  width: 100%;
+  padding: 8px 16px;
+  text-align: left;
+  background-color: #ffffff;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+}
+
+.arrow {
+  transition: transform 0.2s;
+}
+
+.arrowOpen {
+  transform: rotate(180deg);
+  transition: transform 0.2s;
+}
+
+.dropdownMenu {
+  position: absolute;
+  z-index: 10;
+  width: 100%;
+  margin-top: 4px;
+  background-color: #ffffff;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.dropdownButton:hover {
+  background-color: #3b82f6;
+  color: #ffffff;
+}
+
+.dropdownItem {
+  width: 100%;
+  padding: 8px 16px;
+  text-align: left;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.2s;
+}
+
+.dropdownItem:hover {
+  background-color: #3b82f6;
+  color: #ffffff;
+}
+
+/* Dark Mode Styles */
+.darkMode .dropdownButton {
+  background-color: #1f2937;
+  border-color: #4b5563;
+  color: #f3f4f6;
+}
+
+.darkMode .arrow,
+.darkMode .arrowOpen {
+  color: #d1d5db;
+}
+
+.darkMode .dropdownMenu {
+  background-color: #1f2937;
+  border-color: #4b5563;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
+}
+
+.darkMode .dropdownButton:hover {
+  background-color: #2563eb;
+  color: #ffffff;
+}
+
+.darkMode .dropdownItem {
+  color: #f3f4f6;
+}
+
+.darkMode .dropdownItem:hover {
+  background-color: #2563eb;
+  color: #ffffff;
+}

src/components/MostWastedMaterials/Label.jsx

@@ -0,0 +1,19 @@
+// Custom Label component for displaying percentages on bars
+import { useSelector } from 'react-redux';
+
+export default function CustomLabel(props) {
+  const { x, y, width, value } = props;
+  const darkMode = useSelector(state => state.theme.darkMode);
+  return (
+    <text
+      x={x + width / 2}
+      y={y - 5}
+      fill={darkMode ? '#ffffff' : '#374151'}
+      textAnchor="middle"
+      fontSize="12"
+      fontWeight="500"
+    >
+      {`${value}%`}
+    </text>
+  );
+}