Rithika taking over for Aditya-feat: Add Smart Insights and Predictive Utilization Analysis to the Utilization Chart

src/actions/intermediateTasks.js

@@ -18,12 +18,13 @@ export const MARK_INTERMEDIATE_TASK_DONE = 'MARK_INTERMEDIATE_TASK_DONE';
  * Fetch intermediate tasks for a parent task
  */
 export const fetchIntermediateTasks = taskId => {
-  return async () => {
+  return async dispatch => {
     try {
       const response = await httpService.get(ENDPOINTS.INTERMEDIATE_TASKS_BY_PARENT(taskId));
       return response.data;
-    } catch {
-      return [];
+    } catch (error) {
+      toast.error('Failed to fetch sub-tasks');
+      throw error;
     }
   };
 };

src/actions/studentTasks.js

@@ -126,12 +126,27 @@
 };
 
 /**
- * Handle API error and fall back to demo data
- * @param {Error} apiError - The caught API error
+ * Handle API error and try fallback options
+ * @param {Error} apiError - The API error
  * @param {Function} dispatch - Redux dispatch function
- * @returns {Array} Mock tasks for demo purposes
+ * @returns {Promise<Array>} Array of tasks (from fallback or mock data)
  */
-const handleApiError = (apiError, dispatch) => {
+const handleApiError = async (apiError, dispatch) => {
+  console.error('Error response:', apiError.response?.data);
+  console.error('Error status:', apiError.response?.status);
+  console.error('Error config:', apiError.config);
+
+  // Try alternative endpoint if the first one fails
+  if (apiError.response?.status === 404) {
+    try {
+      const altResponse = await httpService.post(`${ENDPOINTS.APIEndpoint()}/student-tasks`);
+      return altResponse.data.tasks || [];
+    } catch {
+      // Alternative endpoint failed
+    }
+  }
+
+  toast.info('Using demo data. Student tasks API is not yet available.');
   return mockTasks;
 };
 
@@ -143,19 +158,20 @@
     dispatch(setStudentTasksStart());
 
     try {
-      let tasks = [];
-      try {
-        tasks = await fetchTasksFromPrimaryEndpoint();
-      } catch (apiError) {
-        tasks = handleApiError(apiError, dispatch);
+      const state = getState();
+      const userId = state.auth.user.userid;
+
+      if (!userId) {
+        dispatch(setStudentTasksError('User not authenticated'));
+        return;
       }
 
-      // Fall back to mock data if API returned nothing
-      if (!tasks || tasks.length === 0) {
-        toast.info('Using demo data. Student tasks API is not yet available.');
-        dispatch(setStudentTasks(mockTasks));
-      } else {
+      try {
+        const tasks = await fetchTasksFromPrimaryEndpoint();
         dispatch(setStudentTasks(tasks));
+      } catch (apiError) {
+        const fallbackTasks = await handleApiError(apiError, dispatch);
+        dispatch(setStudentTasks(fallbackTasks));
       }
     } catch (err) {
       dispatch(setStudentTasksError(err.message || 'Failed to fetch student tasks'));
@@ -246,38 +262,3 @@
     }
   };
 };
-
-/**
- * Log hours against a student task.
- * @param {string} taskId - The task ID
- * @param {number} hours  - Hours to add (positive number)
- */
-export const logStudentTaskHours = (taskId, hours) => {
-  return async (dispatch, getState) => {
-    try {
-      const state = getState();
-      const userId = state.auth.user.userid;
-
-      const response = await httpService.post(ENDPOINTS.STUDENT_TASK_LOG_HOURS(taskId), {
-        hours,
-        requestor: { requestorId: userId },
-      });
-
-      const { loggedHours, suggestedTotalHours, status, canMarkDone } = response.data;
-
-      dispatch({
-        type: types.LOG_STUDENT_TASK_HOURS,
-        taskId,
-        loggedHours,
-        suggestedTotalHours,
-        status,
-        canMarkDone,
-      });
-
-      toast.success(`${hours} hour(s) logged successfully!`);
-    } catch (error) {
-      const msg = error.response?.data?.error || 'Failed to log hours. Please try again.';
-      toast.error(msg);
-    }
-  };
-};

src/components/BMDashboard/ConsumableList/ConsumableListView.jsx

@@ -3,6 +3,8 @@ import { useDispatch, useSelector } from 'react-redux';
 import { fetchAllConsumables } from '../../../actions/bmdashboard/consumableActions';
 import ItemListView from '../ItemList/ItemListView';
 import UpdateConsumableModal from '../UpdateConsumables/UpdateConsumableModal';
+import { Link } from 'react-router-dom';
+import styles from '../InventoryTypesList/TypesList.module.css';
 
 function ConsumableListView() {
   const dispatch = useDispatch();
@@ -50,13 +52,19 @@ function ConsumableListView() {
   ];
 
   return (
-    <ItemListView
-      itemType={itemTypeLabel}
-      items={transformedConsumables}
-      errors={errors}
-      UpdateItemModal={UpdateConsumableModal}
-      dynamicColumns={dynamicColumns}
-    />
+    <>
+      <Link to="/bmdashboard/inventorytypes" className={styles.backLink}>
+        All Inventory Types
+      </Link>
+
+      <ItemListView
+        itemType={itemTypeLabel}
+        items={transformedConsumables}
+        errors={errors}
+        UpdateItemModal={UpdateConsumableModal}
+        dynamicColumns={dynamicColumns}
+      />
+    </>
   );
 }
 

src/components/BMDashboard/Equipment/List/EquipmentList.jsx

@@ -3,6 +3,8 @@ import useTheme from '../../../../hooks/useTheme';
 import EquipmentsTable from './EquipmentsTable';
 import EquipmentsInputs from './EquipmentsInputs';
 import styles from './Equipments.module.css';
+import { Link } from 'react-router-dom';
+import stylesList from '../../InventoryTypesList/TypesList.module.css';
 
 function EquipmentList() {
   const [equipment, setEquipment] = useState({ label: 'All Equipments', value: '0' });
@@ -12,25 +14,30 @@ function EquipmentList() {
   useTheme();
 
   return (
-    <div className={`${styles.PageViewContainer}`}>
-      <div className={`${styles.Page}`}>
-        <div className={`${styles.Box}`}>
-          <div className={`${styles.BuildingTitle}`}>EQUIPMENTS</div>
-          <EquipmentsInputs
-            equipment={equipment}
-            setEquipment={setEquipment}
-            project={project}
-            setProject={setProject}
-          />
-          <EquipmentsTable
-            equipment={equipment}
-            setEquipment={setEquipment}
-            project={project}
-            setProject={setProject}
-          />
+    <>
+      <Link to="/bmdashboard/inventorytypes" className={stylesList.backLink}>
+        All Inventory Types
+      </Link>
+      <div className={`${styles.PageViewContainer}`}>
+        <div className={`${styles.Page}`}>
+          <div className={`${styles.Box}`}>
+            <div className={`${styles.BuildingTitle}`}>EQUIPMENTS</div>
+            <EquipmentsInputs
+              equipment={equipment}
+              setEquipment={setEquipment}
+              project={project}
+              setProject={setProject}
+            />
+            <EquipmentsTable
+              equipment={equipment}
+              setEquipment={setEquipment}
+              project={project}
+              setProject={setProject}
+            />
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 }
 

src/components/BMDashboard/InventoryTypesList/InventoryTypesList.jsx

@@ -1,31 +1,25 @@
 import { useState, useEffect } from 'react';
 import { connect } from 'react-redux';
-import { useHistory } from 'react-router-dom';
-
+import { Link } from 'react-router-dom';
 import { fetchInvTypeByType } from '~/actions/bmdashboard/invTypeActions';
 import { fetchInvUnits } from '~/actions/bmdashboard/invUnitActions';
-import { Accordion, Card, Button } from 'react-bootstrap';
-import DatePicker from 'react-datepicker';
-import 'react-datepicker/dist/react-datepicker.css';
-
+import { Accordion, Card } from 'react-bootstrap';
 import BMError from '../shared/BMError';
-import TypesTable from './TypesTable';
 import UnitsTable from './invUnitsTable';
 import AccordionToggle from './AccordionToggle';
 import styles from './TypesList.module.css';
 
+const categories = [
+  { label: 'Materials', route: '/bmdashboard/materials' },
+  { label: 'Consumables', route: '/bmdashboard/consumables' },
+  { label: 'Equipments', route: '/bmdashboard/equipment' },
+  { label: 'Reusables', route: '/bmdashboard/reusables' },
+  { label: 'Tools', route: '/bmdashboard/tools' },
+];
+
 export function InventoryTypesList(props) {
   const { invUnits, errors, dispatch } = props;
-  const history = useHistory();
-
-  const categories = ['Materials', 'Consumables', 'Equipments', 'Reusables', 'Tools'];
-
   const [isError, setIsError] = useState(false);
-  const [currentTime, setCurrentTime] = useState(new Date());
-
-  const handleBack = () => {
-    history.goBack();
-  };
 
   useEffect(() => {
     dispatch(fetchInvTypeByType('Materials'));
@@ -50,52 +44,38 @@ export function InventoryTypesList(props) {
   }
 
   return (
-    <div className={`${styles.typesListContainer}`}>
-      <h1>All Inventory Types</h1>
-
-      <div className={`${styles.timestampContainer}`}>
-        <span>Time:</span>
-        <DatePicker
-          selected={currentTime}
-          onChange={date => setCurrentTime(date)}
-          dateFormat="MM-dd-yyyy hh:mm:ss"
-          id="timestamp"
-          showTimeInput
-        />
+    <div className={styles.typesListContainer}>
+      {/* Page Header */}
+      <div className={styles.pageHeader}>
+        <h1 className={styles.pageTitle}>All Inventory Types</h1>
+        <p className={styles.pageSubtitle}>Select a category to view and manage inventory</p>
       </div>
 
-      <Accordion>
-        {categories?.map((category, index) => {
-          return (
-            <Card key={category}>
-              <AccordionToggle as={Card.Header} eventKey={index + 1}>
-                {category}
-              </AccordionToggle>
-              <Accordion.Collapse eventKey={index + 1}>
-                <Card.Body className={`${styles.accordionCollapse}`}>
-                  <TypesTable category={category} />
-                </Card.Body>
-              </Accordion.Collapse>
-            </Card>
-          );
-        })}
-
-        <Card>
-          <AccordionToggle as={Card.Header} eventKey={categories.length + 1}>
-            Unit of Measurement
-          </AccordionToggle>
-          <Accordion.Collapse eventKey={categories.length + 1}>
-            <Card.Body className={`${styles.accordionCollapse}`}>
-              <UnitsTable invUnits={invUnits} />
-            </Card.Body>
-          </Accordion.Collapse>
-        </Card>
-      </Accordion>
+      {/* Category Cards Grid */}
+      <div className={styles.categoryGrid}>
+        {categories.map(({ label, route }) => (
+          <Link key={label} to={route} className={styles.categoryCard}>
+            <span className={styles.categoryCardLabel}>{label}</span>
+            <div className={styles.categoryCardArrow}>›</div>
+          </Link>
+        ))}
+      </div>
 
-      <div className={`${styles.buttonContainer}`}>
-        <Button variant="primary" className={`${styles.backButton}`} onClick={handleBack}>
-          Back to previous list page
-        </Button>
+      {/* Unit of Measurement */}
+      <div className={styles.unitSection}>
+        <h2 className={styles.unitSectionTitle}>Unit of Measurement</h2>
+        <Accordion>
+          <Card className={styles.unitCard}>
+            <AccordionToggle as={Card.Header} eventKey={1} className={styles.cardHeader}>
+              View all units
+            </AccordionToggle>
+            <Accordion.Collapse eventKey={1}>
+              <Card.Body className={styles.accordionCollapse}>
+                <UnitsTable invUnits={invUnits} />
+              </Card.Body>
+            </Accordion.Collapse>
+          </Card>
+        </Accordion>
       </div>
     </div>
   );