Merge pull request #2786 from OneCommunityGlobal/fix/bug16-inventory-table

Calvin- Fix Bug 85 Phase 2: Inventory Type List (/bmdashboard/inventory/types)

Author: one-community

src/components/BMDashboard/shared/CheckTypes.jsx

@@ -8,6 +8,7 @@ function CheckTypes({ type }) {
   const dispatch = useDispatch();
   const [InvType, setInvType] = useState(type);
   const [buildingInvTypes, setbuildingInvTypes] = useState([]);
+  const darkMode = useSelector(state => state.theme.darkMode);
   const [isAscending, setIsAscending] = useState(true);
   const [searchQuery, setSearchQuery] = useState('');
 
@@ -43,10 +44,34 @@ function CheckTypes({ type }) {
   });
 
   return (
-    <div>
-      <Card>
+    <div
+      style={{
+        backgroundColor: darkMode ? '#1B2A41' : '#ffffff',
+        color: darkMode ? '#ffffff' : '#000000',
+        padding: '20px',
+        minHeight: '100vh',
+      }}
+    >
+      <Card
+        style={{
+          backgroundColor: darkMode ? '#1C2541' : '#ffffff',
+          margin: '20px auto',
+          width: '80%',
+          borderRadius: '15px',
+        }}
+      >
         <CardBody>
           <FormGroup row>
+            <Label
+              for="selectType"
+              lg={2}
+              sm={4}
+              style={{
+                color: darkMode ? '#ffffff' : '#000000',
+              }}
+            >
+              Select Type
+            </Label>
             <Label for="search" lg={2} sm={4}>
               Search by Name
             </Label>
@@ -60,9 +85,6 @@ function CheckTypes({ type }) {
                 onChange={e => setSearchQuery(e.target.value)} // Update search query
               />
             </Col>
-            <Label for="selectType" lg={2} sm={4}>
-              Select Type
-            </Label>
             <Col lg={4} sm={8}>
               <Input
                 id="selectType"
@@ -80,28 +102,70 @@ function CheckTypes({ type }) {
               </Input>
             </Col>
           </FormGroup>
-          <Table size="sm" responsive>
-            <thead>
-              <tr>
-                <th>#</th>
-                <th style={{ cursor: 'pointer' }} onClick={handleSortByName}>
-                  Name {isAscending ? '▲' : '▼'}
-                </th>
-                <th>Category</th>
-                <th>Description</th>
-              </tr>
-            </thead>
-            <tbody>
-              {sortedBuildingInvTypes?.map((elemType, idx) => (
-                <tr key={elemType._id}>
-                  <th>{idx + 1}</th>
-                  <td>{elemType.name}</td>
-                  <td>{elemType.category}</td>
-                  <td>{elemType.description}</td>
+          <div
+            style={{
+              maxHeight: '800px',
+              overflowY: 'auto',
+              padding: '10px',
+              borderRadius: '15px',
+              backgroundColor: darkMode ? '#3A506B' : '#f9f9f9',
+              border: darkMode ? '1px solid #444' : '1px solid #dcdcdc',
+              boxShadow: darkMode
+                ? '0 2px 10px rgba(255, 255, 255, 0.1)'
+                : '0 2px 10px rgba(0, 0, 0, 0.05)',
+            }}
+          >
+            <Table size="sm" responsive hover>
+              <thead
+                style={{
+                  backgroundColor: darkMode ? '#1C2541' : '#ffffff',
+                  color: darkMode ? '#ffffff' : '#000000',
+                  fontWeight: 'bold',
+                  position: 'sticky',
+                  top: 0,
+                  zIndex: 1,
+                  borderTop: '1px solid #444',
+                  borderBottom: '1px solid #444',
+                }}
+              >
+                <tr>
+                  <th>#</th>
+                  <th style={{ cursor: 'pointer' }} onClick={handleSortByName}>
+                    Name {isAscending ? '▲' : '▼'}
+                  </th>
+                  <th>Category</th>
+                  <th>Description</th>
                 </tr>
-              ))}
-            </tbody>
-          </Table>
+              </thead>
+              <tbody>
+                {sortedBuildingInvTypes?.map((elemType, idx) => (
+                  <tr key={elemType._id}>
+                    <th>{idx + 1}</th>
+                    <td>{elemType.name}</td>
+                    <td>{elemType.category}</td>
+                    <td>{elemType.description}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </Table>
+            <style jsx>{`
+              tbody tr:nth-child(odd) {
+                background-color: ${darkMode ? '#1C2541' : '#ffffff'};
+                color: ${darkMode ? '#ffffff' : '#000000'};
+              }
+              tbody tr:nth-child(even) {
+                background-color: ${darkMode ? '#3A506B' : '#f9f9f9'};
+                color: ${darkMode ? '#ffffff' : '#000000'};
+              }
+              tbody tr:hover {
+                background-color: ${darkMode ? '#23395d !important' : '#e9ecef !important'};
+                color: ${darkMode ? '#ffffff !important' : '#000000 !important'};
+              }
+              thead tr:hover {
+                background-color: ${darkMode ? '#1C2541' : '#ffffff'};
+              }
+            `}</style>
+          </div>
         </CardBody>
       </Card>
     </div>