Added Activity Group, and implemented sorting for Service, Activity Group, and Activities.

src/components/Project/Infrastructure/TaskModel.jsx

@@ -3,7 +3,9 @@ import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import {
+  useActivitiesByGroups,
   useActivitiesMaster,
+  useGroups,
   useWorkCategoriesMaster,
 } from "../../../hooks/masterHook/useMaster";
 import { useManageTask, useProjectAssignedOrganizations, useProjectAssignedServices } from "../../../hooks/useProjects";
@@ -15,6 +17,7 @@ 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"),
+  activityGroupId: z.string().min(1, "Activity Group 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"),
@@ -27,6 +30,7 @@ const defaultModel = {
   buildingID: "",
   floorId: "",
   workAreaId: "",
+  activityGroupId: "",
   activityID: "",
   workCategoryId: "",
   plannedWork: 0,
@@ -35,7 +39,7 @@ const defaultModel = {
 };
 
 const TaskModel = ({ project, onSubmit, onClose }) => {
-  const { activities, loading: activityLoading } = useActivitiesMaster();
+  // const { activities, loading: activityLoading } = useActivitiesMaster();
   const { categories, categoryLoading } = useWorkCategoriesMaster();
 
   const projectId = useSelectedProject();
@@ -43,19 +47,34 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
   const { data: assignedServices, isLoading: servicesLoading } = useProjectAssignedServices(projectId);
   const { data: assignedOrganizations, isLoading: orgLoading } = useProjectAssignedOrganizations(projectId);
 
+
+
   const [selectedService, setSelectedService] = useState("");
+  const [selectedGroup, setSelectedGroup] = useState("");
+  const { data: groupsResponse, isLoading: groupsLoading } = useGroups(selectedService);
+  const groups = groupsResponse?.data ?? [];
+
+  const { data: activitiesResponse, isLoading: activitiesLoading } = useActivitiesByGroups(selectedGroup);
+  const activities = activitiesResponse?.data ?? [];
   // Fetch Assigned Organizations (Activity Groups)
 
   const [selectedOrg, setSelectedOrg] = useState("");
-
-  const handleOrgChange = (e) => {
-    setSelectedOrg(e.target.value);
-  };
-
-
   const handleServiceChange = (e) => {
-    setSelectedService(e.target.value);
+    const value = e.target.value;
+    setSelectedService(value);
+    setSelectedGroup("");
+    setValue("activityGroupId", "");
+    setValue("activityID", "");
   };
+
+  const handleGroupChange = (e) => {
+    const value = e.target.value;
+    setSelectedGroup(value);
+    setValue("activityGroupId", value);
+    setValue("activityID", "");
+  };
+
+
   const {
     register,
     handleSubmit,
@@ -197,15 +216,13 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
       {/* Services Selection */}
       {selectedWorkArea && (
         <div className="col-12 text-start">
-          <Label className="form-label" required>Select Services</Label>
+          <Label className="form-label" required>Select Service</Label>
           <select
-            name="DataTables_Table_0_length"
-            aria-controls="DataTables_Table_0"
             className="form-select form-select-sm"
-            aria-label="Select Service"
             value={selectedService}
             onChange={handleServiceChange}
           >
+            <option value="">Select Service</option>
             {servicesLoading && <option>Loading...</option>}
             {assignedServices?.map((service) => (
               <option key={service.id} value={service.id}>
@@ -213,9 +230,6 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
               </option>
             ))}
           </select>
-          {errors.buildingID && (
-            <p className="danger-text">{errors.buildingID.message}</p>
-          )}
         </div>
       )}
 
@@ -225,43 +239,36 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
           <Label className="form-label" required>Select Activity Group</Label>
           <select
             className="form-select form-select-sm"
-            value={selectedOrg}
-            onChange={handleOrgChange}
+            {...register("activityGroupId")}
+            value={selectedGroup}
+            onChange={handleGroupChange}
           >
-            <option value="">Select Activity Group</option>
-            {orgLoading && <option>Loading...</option>}
-            {assignedOrganizations?.map((org) => (
-              <option key={org.id} value={org.id}>
-                {org.name}
-              </option>
+            <option value="">Select Group</option>
+            {groupsLoading && <option>Loading...</option>}
+            {groups?.map((g) => (
+              <option key={g.id} value={g.id}>{g.name}</option>
             ))}
           </select>
+          {errors.activityGroupId && <p className="danger-text">{errors.activityGroupId.message}</p>}
         </div>
       )}
 
+
       {/* Activity Selection */}
-      {selectedOrg && (
+      {selectedGroup && (
         <div className="col-12 text-start">
           <Label className="form-label" required>Select Activity</Label>
-          <select
-            className="form-select form-select-sm"
-            {...register("activityID")}
-          >
+          <select className="form-select form-select-sm" {...register("activityID")}>
             <option value="">Select Activity</option>
-            {activityData.map((a) => (
-              <option key={a.id} value={a.id}>
-                {a.activityName}
-              </option>
+            {activitiesLoading && <option>Loading...</option>}
+            {activities?.map((a) => (
+              <option key={a.id} value={a.id}>{a.activityName}</option>
             ))}
           </select>
-          {errors.activityID && (
-            <p className="danger-text">{errors.activityID.message}</p>
-          )}
+          {errors.activityID && <p className="danger-text">{errors.activityID.message}</p>}
         </div>
       )}
 
-
-
       {selectedWorkArea && (
         <div className="col-12 text-start">
           <label className="form-label">Select Work Category</label>