Merge pull request #4598 from OneCommunityGlobal/development

Frontend Release to Main [4.67]

Author: one-community

package-lock.json

@@ -171,13 +171,21 @@ body.bm-dashboard-dark .table {
 }
 
 body.dark-mode .table th,
-body.dark-mode .table td,
+body.dark-mode .table td {
+  color: #ffffff !important;
+  border-color: #3a506b;
+}
+
 body.bm-dashboard-dark .table th,
 body.bm-dashboard-dark .table td {
   color: #ffffff !important;
   border-color: #3a506b;
 }
 
+body.bm-dashboard-dark .table th{
+  background-color: #2e5061 !important;
+}
+
 body.dark-mode .table-striped > tbody > tr:nth-of-type(odd),
 body.bm-dashboard-dark .table-striped > tbody > tr:nth-of-type(odd) {
   background-color: rgba(46, 80, 97, 0.5);

public/index.css

@@ -122,7 +122,6 @@ export const getAllUserTeams = () => {
       .then(res => {
         dispatch(teamMembersFectchACtion(res.data));
         return res.data;
-        // console.log("getAllUserTeams: res:", res.data)
       })
       .catch(() => {
         dispatch(teamMembersFectchACtion(undefined));

src/actions/allTeamsAction.js

@@ -0,0 +1,70 @@
+import axios from 'axios';
+import { ENDPOINTS } from '~/utils/URL';
+
+/**
+ * Fetch events with optional filtering
+ * @param {Object} params - Query parameters
+ * @param {string} params.type - Filter by event type
+ * @param {string} params.location - Filter by location
+ * @param {number} params.page - Page number
+ * @param {number} params.limit - Items per page
+ * @param {string} params.sortBy - Sort field
+ * @returns {Promise} API response
+ */
+export async function getEvents(params = {}) {
+  try {
+    const { type = '', location = '', page = 1, limit = 9, sortBy = 'date' } = params;
+    const queryParams = new URLSearchParams();
+    if (type) queryParams.append('type', type);
+    if (location) queryParams.append('location', location);
+    queryParams.append('page', page);
+    queryParams.append('limit', limit);
+    queryParams.append('sortBy', sortBy);
+
+    const url = `${ENDPOINTS.EVENTS}?${queryParams.toString()}`;
+    const response = await axios.get(url);
+    return Promise.resolve(response);
+  } catch (error) {
+    return {
+      message: error.response?.data?.error || error.message,
+      errorCode: error.response?.status,
+      status: error.response?.status || 500,
+    };
+  }
+}
+
+/**
+ * Fetch available event types
+ * @returns {Promise} API response
+ */
+export async function getEventTypes() {
+  try {
+    const url = ENDPOINTS.EVENT_TYPES;
+    const response = await axios.get(url);
+    return Promise.resolve(response);
+  } catch (error) {
+    return {
+      message: error.response?.data?.error || error.message,
+      errorCode: error.response?.status,
+      status: error.response?.status || 500,
+    };
+  }
+}
+
+/**
+ * Fetch available event locations
+ * @returns {Promise} API response
+ */
+export async function getEventLocations() {
+  try {
+    const url = ENDPOINTS.EVENT_LOCATIONS;
+    const response = await axios.get(url);
+    return Promise.resolve(response);
+  } catch (error) {
+    return {
+      message: error.response?.data?.error || error.message,
+      errorCode: error.response?.status,
+      status: error.response?.status || 500,
+    };
+  }
+}

src/actions/eventActions.js

@@ -1,3 +1,7 @@
+table thead th, table td {
+  vertical-align: middle !important;
+}
+
 .itemsListContainer {
   width: 100%;
   max-width: 1536px;
@@ -24,6 +28,10 @@
   height: 2rem;
 }
 
+.itemsCell td{
+  vertical-align: middle;
+}
+
 .itemsCell button {
   cursor: pointer;
 }
@@ -52,8 +60,7 @@
 
 .selectInput label {
   font-weight: bold;
-  text-align: right;
-  min-width: 100px;
+  text-align: center;
   white-space: nowrap;
   margin-bottom: 8px;
 }
@@ -62,7 +69,7 @@
 .selectInput select {
   height: 38px;
   width: 100%;
-  min-width: 220px;
+  min-width: 180px;
   max-width: 240px;
   padding: 5px;
   border: 1px solid #ccc;

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

@@ -1,14 +1,22 @@
 import { Form, FormGroup, Label, Input } from 'reactstrap';
 import styles from './ItemListView.module.css';
 
-export default function SelectForm({ items, setSelectedProject, setSelectedItem }) {
+export default function SelectForm({
+  items,
+  setSelectedProject,
+  setSelectedItem,
+  setSelectedCondition,
+  setSelectedToolStatus,
+}) {
   let projectsSet = [];
   if (items.length) {
     projectsSet = [...new Set(items.map(el => el.project?.name))];
   }
 
   const handleChange = event => {
     setSelectedItem('all');
+    setSelectedCondition('all');
+    setSelectedToolStatus('all');
     setSelectedProject(event.target.value);
   };
 

src/components/BMDashboard/ItemList/SelectForm.jsx

@@ -6,44 +6,72 @@ export default function SelectItem({
   selectedProject,
   selectedItem,
   setSelectedItem,
+  selectedToolStatus,
+  setSelectedToolStatus,
+  selectedCondition,
+  setSelectedCondition,
   label,
 }) {
   let itemSet = [];
   if (items?.length) {
-    if (selectedProject === 'all') {
-      itemSet = [
-        ...new Set(
-          items
-            .filter(m => m.itemType?.name) // Filter out items with null/undefined names
-            .map(m => m.itemType.name),
-        ),
-      ];
-    } else {
-      itemSet = [
-        ...new Set(
-          items
-            .filter(mat => mat.project?.name === selectedProject && mat.itemType?.name)
-            .map(m => m.itemType.name),
-        ),
-      ];
+    if (label === 'Tool') {
+      if (selectedProject === 'all') {
+        itemSet = [...new Set(items.filter(m => m.itemType?.name).map(m => m.itemType.name))];
+      } else {
+        itemSet = [
+          ...new Set(
+            items
+              .filter(mat => mat.project?.name === selectedProject && mat.itemType?.name)
+              .map(m => m.itemType.name),
+          ),
+        ];
+      }
+    } else if (label === 'Tool Status') {
+      itemSet = ['Using', 'Available', 'Under Maintenance'];
+    } else if (label === 'Condition') {
+      if (selectedProject === 'all') {
+        itemSet = [...new Set(items.filter(m => m.condition).map(m => m.condition))];
+      } else {
+        itemSet = [
+          ...new Set(
+            items
+              .filter(mat => mat.project?.name === selectedProject && mat.condition)
+              .map(m => m.condition),
+          ),
+        ];
+      }
     }
   }
 
   return (
     <Form>
-      <FormGroup className={`${styles.selectInput}`}>
-        <Label htmlFor="select-material" style={{ marginLeft: '10px' }}>
-          {label ? `${label}:` : 'Material:'}
-        </Label>
+      <FormGroup className={styles.selectInput}>
+        <Label htmlFor="select-material">{label ? `${label}:` : 'Material:'}</Label>
+
         <Input
           id="select-item"
           name="select-item"
           type="select"
-          value={selectedItem}
-          onChange={e => setSelectedItem(e.target.value)}
-          disabled={!items.length}
+          value={
+            label === 'Condition'
+              ? selectedCondition
+              : label === 'Tool Status'
+              ? selectedToolStatus
+              : selectedItem
+          }
+          onChange={e => {
+            const val = e.target.value;
+            if (label === 'Tool Status') {
+              setSelectedToolStatus(val);
+            } else if (label === 'Condition') {
+              setSelectedCondition(val);
+            } else {
+              setSelectedItem(val);
+            }
+          }}
+          disabled={!itemSet.length}
         >
-          {items.length ? (
+          {itemSet.length ? (
             <>
               <option value="all" key="all-option">
                 All