Added a Work Category dropdown in task create/update forms and a new column to display the category in Project Infrastructure and Daily Task Planning views.

src/components/Project/Infrastructure/EditActivityModal.jsx

@@ -3,7 +3,7 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
-import { useActivitiesMaster } from "../../../hooks/masterHook/useMaster";
+import { useActivitiesMaster, useWorkCategoriesMaster } from "../../../hooks/masterHook/useMaster";
 import { useProjectDetails } from "../../../hooks/useProjects";
 import { useDispatch, useSelector } from "react-redux";
 import ProjectRepository from "../../../repositories/ProjectRepository";
@@ -18,6 +18,7 @@ import showToast from "../../../services/toastService";
 const taskSchema = z
   .object({
     activityID: z.string().min(1, "Activity is required"),
+    workCategoryId: z.string().min(1, "Work Category is required"),
     plannedWork: z.number().min(1, "Planned Work must be greater than 0"),
     completedWork: z.number().min(0, "Completed Work must be greater than 0"),
   })
@@ -43,17 +44,21 @@ const EditActivityModal = ({
   );
   const defaultModel = {
     activityID: 0,
+    workCategoryId: 0,
     plannedWork: 0,
     completedWork: 0,
   };
 
-  const {projects_Details, refetch} = useProjectDetails( selectedProject );
+  const { projects_Details, refetch } = useProjectDetails(selectedProject);
-  const [ActivityUnit,setActivityUnit]= useState("")
+  const [ActivityUnit, setActivityUnit] = useState("");
   const { activities, loading, error } = useActivitiesMaster();
+  const { categories, categoryLoading, categoryError } =
+    useWorkCategoriesMaster();
   const [formData, setFormData] = useState(defaultModel);
   const [selectedActivity, setSelectedActivity] = useState(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [activityData, setActivityData] = useState([]);
+  const [categoryData, setCategoryData] = useState([]);
   const dispatch = useDispatch();
 
   const {
@@ -70,12 +75,19 @@ const EditActivityModal = ({
   });
 
   const handleActivityChange = (e) => {
-    const selectedId = Number(e.target.value);
+    const selectedId = String(e.target.value);
-    const selected = activityData.find( ( a ) => a.id === selectedId );
+    const selected = activityData.find((a) => a.id === selectedId);
     setSelectedActivity(selected || null);
     setValue("activityID", selectedId);
   };
 
+  const handleCategoryChange = (e) => {
+    const selectedId = String(e.target.value);
+    const category = categoryData.find((b) => b.id === selectedId);
+    setSelectedCategory(category || null);
+    setValue("workCategoryId", selectedId);
+  };
+
   const onSubmitForm = async ( data ) =>
   {
     setIsSubmitting(true)
@@ -167,6 +179,8 @@ const EditActivityModal = ({
   useEffect(() => {
     reset({
       activityID: workItem?.workItem?.activityId || workItem?.activityId || 0,
+      workCategoryId:
+        workItem?.workItem?.workCategoryId || workItem?.workCategoryId || 0,
       plannedWork:
         workItem?.workItem?.plannedWork || workItem?.plannedWork || 0,
       completedWork:
@@ -177,14 +191,13 @@ const EditActivityModal = ({
 
   const ISselectedActivity = watch("activityID");
   useEffect(() => {
-    if( ISselectedActivity ){
+    if (ISselectedActivity) {
       const selected = activities.find((a) => a.id === ISselectedActivity);
-      setSelectedActivity( selected || null );
+      setSelectedActivity(selected || null);
-      setActivityUnit(selected?.unitOfMeasurement)
+      setActivityUnit(selected?.unitOfMeasurement);
-  }
+    }
-  }, [ ISselectedActivity,activities] );
+  }, [ISselectedActivity, activities]);
-  
+
-  
   return (
     <div className="modal-dialog modal-lg modal-simple modal-edit-user">
       <div className="modal-content">
@@ -279,6 +292,45 @@ const EditActivityModal = ({
                 )}
               </div>
 
+              {/* Select Category */}
+              <div className="col-12 col-md-12">
+                <label className="form-label" htmlFor="activityID">
+                  Select Work Category
+                </label>
+                <select
+                  id="workCategoryId"
+                  className="form-select form-select-sm"
+                  {...register("workCategoryId")}
+                >
+                  {loading ? (
+                    <option value="">Loading...</option>
+                  ) : (
+                    <option disabled>Select Category</option>
+                  )}
+                  {categories &&
+                    categories.length > 0 &&
+                    categories
+                      .slice()
+                      .sort((a, b) =>
+                        (a.name || "").localeCompare(
+                          b.name || ""
+                        )
+                      )
+                      .map((category) => (
+                        <option key={category.id} value={category.id}>
+                          {category.name}
+                        </option>
+                      ))}
+                  {!loading && categories.length === 0 && (
+                    <option disabled>No categories available</option>
+                  )}
+                </select>
+
+                {errors.workCategoryId && (
+                  <p className="danger-text">{errors.workCategoryId.message}</p>
+                )}
+              </div>
+
               {/* Planned Work */}
               {/* {ISselectedActivity && ( */}
               <div className="col-5 col-md-5">

src/components/Project/Infrastructure/TaskModel.jsx

@@ -2,23 +2,28 @@ import React, { useState, useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
-import  {useActivitiesMaster} from "../../../hooks/masterHook/useMaster";
+import {
+  useActivitiesMaster,
+  useWorkCategoriesMaster,
+} from "../../../hooks/masterHook/useMaster";
 
 const taskSchema = z.object({
   buildingID: z.string().min(1, "Building is required"),
   floorId: z.string().min(1, "Floor is required"),
   workAreaId: z.string().min(1, "Work Area is required"),
   activityID: z.string().min(1, "Activity is required"),
+  workCategoryId: z.string().min(1, "Work Category is required"),
   plannedWork: z.number().min(1, "Planned Work must be greater than 0"),
   completedWork: z.number().min(0, "Completed Work must be greater than 0"),
 });
 
 const defaultModel = {
   id: null,
-  buildingID:"0",
+  buildingID: "0",
   floorId: "0",
   workAreaId: "0",
   activityID: null,
+  workCategoryId: "",
   plannedWork: 0,
   completedWork: 0,
 };
@@ -30,15 +35,18 @@ const TaskModel = ({
   onClearComplete,
   onClose,
 }) => {
-
   const [formData, setFormData] = useState(defaultModel);
   const [selectedBuilding, setSelectedBuilding] = useState(null);
   const [selectedFloor, setSelectedFloor] = useState(null);
   const [selectedWorkArea, setSelectedWorkArea] = useState(null);
   const [selectedActivity, setSelectedActivity] = useState(null);
+  const [selectedCategory, setSelectedCategory] = useState(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [activityData, setActivityData] = useState([]);
-  const {activities, loading, error} = useActivitiesMaster();
+  const [categoryData, setCategoryData] = useState([]);
+  const { activities, loading, error } = useActivitiesMaster();
+  const { categories, categoryLoading, categoryError } =
+    useWorkCategoriesMaster();
 
   const {
     register,
@@ -79,6 +87,7 @@ const TaskModel = ({
       floorId: value,
       workAreaId: 0,
       activityID: 0,
+      workCategoryId: categoryData?.[0]?.id?.toString() ?? "",
     }));
   };
 
@@ -104,13 +113,24 @@ const TaskModel = ({
     }));
   };
 
-  const onSubmitForm = async ( data ) =>
+  const handleCategoryChange = (e) => {
-  {
+    const { value } = e.target;
+    const category = categoryData.find((b) => b.id === String(value));
+    setSelectedCategory(category);
+    reset((prev) => ({
+      ...prev,
+      workCategoryId: String(value),
+    }));
+  };
+
+  const onSubmitForm = async (data) => {
+    console.log(data);
     setIsSubmitting(true);
     await onSubmit(data);
     setValue("plannedWork", 0);
-    setValue( "completedWork", 0 );
+    setValue("completedWork", 0);
-    setValue("activityID",0)
+    setValue("activityID", 0);
+    setValue("workCategoryId", categoryData?.[0]?.id?.toString() ?? "");
     setIsSubmitting(false);
   };
 
@@ -120,15 +140,32 @@ const TaskModel = ({
     setSelectedFloor(null);
     setSelectedWorkArea(null);
     setSelectedActivity(null);
+    setSelectedCategory(categoryData?.[0]?.id?.toString() ?? "");
     reset(defaultModel);
   };
 
   useEffect(() => {
     if (!loading && Array.isArray(activities) && activities.length > 0) {
-     
       setActivityData(activities);
     }
   }, [activities, loading]);
+
+  useEffect(() => {
+    if (
+      !categoryLoading &&
+      Array.isArray(categories) &&
+      categories.length > 0
+    ) {
+      const newCategories = categories?.slice()?.sort((a, b) => {
+        const nameA = a?.name || "";
+        const nameB = b?.name || "";
+        return nameA.localeCompare(nameB);
+      });
+      setCategoryData(newCategories);
+      setSelectedCategory(newCategories[0])
+    }
+  }, [categories, categoryLoading]);
+
   return (
     <div className="modal-dialog modal-lg modal-simple modal-edit-user">
       <div className="modal-content">
@@ -247,9 +284,7 @@ const TaskModel = ({
 
               {selectedWorkArea && (
                 <div className="col-12 col-md-12">
-                  <label className="form-label" >
+                  <label className="form-label">Select Activity</label>
-                    Select Activity
-                  </label>
                   <select
                     id="activityID"
                     className="form-select form-select-sm"
@@ -257,28 +292,25 @@ const TaskModel = ({
                     onChange={handleActivityChange}
                   >
                     <option value="0">Select Activity</option>
-                    {activityData && activityData.length > 0 &&  (
+                    {activityData &&
+                      activityData.length > 0 &&
                       activityData
                         ?.slice()
-                        ?.sort( ( a, b ) =>
+                        ?.sort((a, b) => {
-                        {
                           const nameA = a?.activityName || "";
                           const nameB = b?.activityName || "";
-                          return nameA.localeCompare( nameB );
+                          return nameA.localeCompare(nameB);
-                        } )
+                        })
-                        ?.map( ( activity ) => (
+                        ?.map((activity) => (
                           <option key={activity.id} value={activity.id}>
-                            {
+                            {activity.activityName ||
-                              activity.activityName ||
+                              `Unnamed (id: ${activity.id})`}
-                             
-                              `Unnamed (id: ${ activity.id })`}
                           </option>
-                        ) )
+                        ))}
-                    ) }
+                    {!loading && activities.length === 0 && (
-                    {(!loading && activities.length === 0 )&& (
                       <option disabled>No activities available</option>
                     )}
-                    {loading && ( <option disabled>Loading...</option>)}
+                    {loading && <option disabled>Loading...</option>}
                   </select>
 
                   {errors.activityID && (
@@ -287,7 +319,38 @@ const TaskModel = ({
                 </div>
               )}
 
-              {selectedActivity && (
+              {selectedWorkArea && (
+                <div className="col-12 col-md-12">
+                  <label className="form-label">Select Work Category</label>
+                  <select
+                    id="workCategoryId"
+                    className="form-select form-select-sm"
+                    {...register("workCategoryId")}
+                    onChange={handleCategoryChange}
+                  >
+                    {categoryData &&
+                      categoryData.length > 0 &&
+                      categoryData
+                        ?.map((category) => (
+                          <option key={category.id} value={category.id}>
+                            {category.name || `Unnamed (id: ${category.id})`}
+                          </option>
+                        ))}
+                    {!categoryLoading && categories.length === 0 && (
+                      <option disabled>No activities available</option>
+                    )}
+                    {categoryLoading && <option disabled>Loading...</option>}
+                  </select>
+
+                  {errors.workCategoryId && (
+                    <p className="danger-text">
+                      {errors.workCategoryId.message}
+                    </p>
+                  )}
+                </div>
+              )}
+
+              {selectedActivity && selectedCategory && (
                 <div className="col-5 col-md-5">
                   <label className="form-label" htmlFor="plannedWork">
                     {formData.id !== "0" ? "Modify " : "Enter "} Planned Work
@@ -304,7 +367,7 @@ const TaskModel = ({
                 </div>
               )}
 
-              {selectedActivity && (
+              {selectedActivity && selectedCategory && (
                 <div className="col-5 col-md-5">
                   <label className="form-label" htmlFor="completedWork">
                     {formData.id !== "0" ? "Modify " : "Enter "} Completed Work
@@ -324,7 +387,7 @@ const TaskModel = ({
               )}
 
               {/* Unit */}
-              {selectedActivity && (
+              {selectedActivity && selectedCategory && (
                 <div className="col-2 col-md-2">
                   <label className="form-label" htmlFor="unit">
                     Unit
@@ -340,9 +403,7 @@ const TaskModel = ({
 
               <div className="col-12 text-center">
                 <button type="submit" className="btn btn-sm btn-primary me-3">
-                  {isSubmitting
+                  {isSubmitting ? "Please Wait.." : "Add Task"}
-                    ? "Please Wait.."
-                    : "Add Task"}
                 </button>
                 <button
                   type="button"

src/components/Project/Infrastructure/WorkArea.jsx

@@ -121,6 +121,9 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
                   <th className="infra-activity-table-header d-sm-none d-sm-table-cell">
                     Status
                   </th>
+                  <th className="infra-activity-table-header-first">
+                    Category
+                  </th>
                   {/* for greather than mobile view ************* */}
                   <th className="infra-activity-table-header d-none d-md-table-cell">
                     Planned

src/components/Project/Infrastructure/WorkItem.jsx

@@ -160,6 +160,15 @@ const WorkItem = ( {
             ? NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork
             : "NA"}
         </td>
+
+        <td className="text-start table-cell-small">
+          <span className="fw-light">
+            {hasWorkItem
+              ? NewWorkItem?.workItem?.workCategoryMaster?.name ||
+                workItem.workCategoryMaster?.name || "NA"
+              : "NA"}
+          </span>
+        </td>
         {/* for greather than mobile view ************* */}
         <td className="text-center d-none d-md-table-cell">
           {hasWorkItem

src/hooks/masterHook/useMaster.js

@@ -116,4 +116,37 @@ export const useActivitiesMaster = () =>
     }, [] )
     
     return {activities,loading,error}
-  }
+  }
+
+  export const useWorkCategoriesMaster = () =>
+    {
+      const [ categories, setCategories ] = useState( [] )
+      const [ categoryLoading, setloading ] = useState( false );
+      const [ categoryError, setError ] = useState( "" )
+    
+        const fetchCategories =async () =>  {
+          const cacheddata = getCachedData("Work Category");
+    
+          if (!cacheddata) {
+            setloading(true);
+            try {
+              const response = await MasterRespository.getWorkCategory();
+              setCategories(response.data);
+              cacheData("Work Category", response.data);
+            } catch (err) {
+              setError(err);
+              console.log(err);
+            } finally {
+              setloading(false);
+            }
+          } else {
+            setCategories(cacheddata);
+          }
+         }
+      useEffect( () =>
+      {
+        fetchCategories()
+      }, [] )
+      
+      return {categories,categoryLoading,categoryError}
+    }