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.

2025-05-12 13:11:29 +05:30 · 2025-05-12 13:11:29 +05:30 · b39effe4b0
commit b39effe4b0
parent c0ac2295d0
5 changed files with 210 additions and 48 deletions
--- a/src/components/Project/Infrastructure/EditActivityModal.jsx
+++ b/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 [ActivityUnit,setActivityUnit]= useState("")
+  const { projects_Details, refetch } = useProjectDetails(selectedProject);
+  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);
    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) => {
    const updatedProject = { ...projects_Details };
    const finalData = {
@ -141,14 +153,14 @@ const EditActivityModal = ({
            data: newProject,
          });
          resetForm();
-          dispatch( refreshData( true ) );
-          showToast("Activity Updated Successfully","success")
+          dispatch(refreshData(true));
+          showToast("Activity Updated Successfully", "success");

          onClose();
        }
      })
      .catch((error) => {
-        showToast(error.message, "error");
+        showToast(error?.response?.data?.message || error.message, "error");
      });
  };

@ -161,6 +173,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:
@ -171,14 +185,13 @@ const EditActivityModal = ({

  const ISselectedActivity = watch("activityID");
  useEffect(() => {
-    if( ISselectedActivity ){
+    if (ISselectedActivity) {
      const selected = activities.find((a) => a.id === ISselectedActivity);
-      setSelectedActivity( selected || null );
-      setActivityUnit(selected?.unitOfMeasurement)
-  }
-  }, [ ISselectedActivity,activities] );
-  
-  
+      setSelectedActivity(selected || null);
+      setActivityUnit(selected?.unitOfMeasurement);
+    }
+  }, [ISselectedActivity, activities]);
+
  return (
    <div className="modal-dialog modal-lg modal-simple modal-edit-user">
      <div className="modal-content">
@ -273,6 +286,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">
@ -327,7 +379,11 @@ const EditActivityModal = ({
              {/* )} */}

              <div className="col-12 text-center">
-                <button type="submit" className="btn btn-sm btn-primary me-3" disabled={activities.length === 0}>
+                <button
+                  type="submit"
+                  className="btn btn-sm btn-primary me-3"
+                  disabled={activities.length === 0}
+                >
                  {isSubmitting ? "Please Wait.." : "Edit Task"}
                </button>
                <button
--- a/src/components/Project/Infrastructure/TaskModel.jsx
+++ b/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("activityID",0)
+    setValue("completedWork", 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" >
-                    Select Activity
-                  </label>
+                  <label className="form-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 );
-                        } )
-                        ?.map( ( activity ) => (
+                          return nameA.localeCompare(nameB);
+                        })
+                        ?.map((activity) => (
                          <option key={activity.id} value={activity.id}>
-                            {
-                              activity.activityName ||
-                             
-                              `Unnamed (id: ${ activity.id })`}
+                            {activity.activityName ||
+                              `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
-                    ? "Please Wait.."
-                    : "Add Task"}
+                  {isSubmitting ? "Please Wait.." : "Add Task"}
                </button>
                <button
                  type="button"
--- a/src/components/Project/Infrastructure/WorkArea.jsx
+++ b/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
--- a/src/components/Project/Infrastructure/WorkItem.jsx
+++ b/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
--- a/src/hooks/masterHook/useMaster.js
+++ b/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}
+    }