Validation for reporting task so that completed tasks will not exceed total pending tasks for that activity

src/components/Activities/ReportTask.jsx

@@ -9,12 +9,16 @@ import { TasksRepository } from "../../repositories/TaskRepository";
 export const ReportTask = ({ report, closeModal, refetch }) => {
   const [loading, setloading] = useState(false);
 
+  const maxPending =
+    report?.workItem?.plannedWork - report?.workItem?.completedWork;
+
   const schema = z.object({
     completedTask: z
       .number()
-      .min(1, "Completed Work must be at least 1")
+      .min(0, "Completed Work must be greater than 0")
-
+      .max(maxPending, {
-      .int("Completed Work must be an integer")
+        message: `Completed task cannot exceed total pending tasks:  ${maxPending}`,
+      })
       .positive("Completed Work must be a positive number")
       .optional(),
     comment: z.string().min(1, "Comment cannot be empty"),
@@ -25,6 +29,7 @@ export const ReportTask = ({ report, closeModal, refetch }) => {
     formState: { errors },
   } = useForm({
     resolver: zodResolver(schema),
+    defaultValues: { completedTask: 0, comment: "" },
   });
 
   const onSubmit = async (data) => {
@@ -34,7 +39,7 @@ export const ReportTask = ({ report, closeModal, refetch }) => {
         ...data,
         id: report?.id,
         reportedDate: new Date().toISOString(),
-        checkList:[]
+        checkList: [],
       };
 
       let response = await TasksRepository.reportTask(reportData);
@@ -65,7 +70,10 @@ export const ReportTask = ({ report, closeModal, refetch }) => {
 
           <div className="container  m-0">
             <div className="mb-1 row text-start">
-              <label htmlFor="html5-text-input" className="col-md-4 col-form-label">
+              <label
+                htmlFor="html5-text-input"
+                className="col-md-4 col-form-label"
+              >
                 Assigned Date :{" "}
               </label>
               <div className="col-md-8 text-start">
@@ -75,7 +83,10 @@ export const ReportTask = ({ report, closeModal, refetch }) => {
               </div>
             </div>
             <div className="mb-1 row text-start">
-              <label htmlFor="html5-search-input" className="col-md-4 col-form-label">
+              <label
+                htmlFor="html5-search-input"
+                className="col-md-4 col-form-label"
+              >
                 Assigned By :{" "}
               </label>
               <div className="col-md-8  text-start">
@@ -83,7 +94,10 @@ export const ReportTask = ({ report, closeModal, refetch }) => {
               </div>
             </div>
             <div className="mb-1 row text-start">
-              <label htmlFor="html5-email-input" className="col-md-4 col-form-label">
+              <label
+                htmlFor="html5-email-input"
+                className="col-md-4 col-form-label"
+              >
                 Wrok Area :
               </label>
               <div className="col-md-8 text-start text-wrap">
@@ -98,7 +112,10 @@ export const ReportTask = ({ report, closeModal, refetch }) => {
               </div>
             </div>
             <div className="mb-1 row text-start">
-              <label htmlFor="html5-email-input" className="col-md-4 col-form-label">
+              <label
+                htmlFor="html5-email-input"
+                className="col-md-4 col-form-label"
+              >
                 Activity :
               </label>
               <div className="col-md-8 text-start text-wrap">
@@ -108,7 +125,10 @@ export const ReportTask = ({ report, closeModal, refetch }) => {
               </div>
             </div>
             <div className="mb-1 row text-start">
-              <label htmlFor="html5-email-input" className="col-md-4 col-form-label">
+              <label
+                htmlFor="html5-email-input"
+                className="col-md-4 col-form-label"
+              >
                 Team Size :
               </label>
               <div className="col-md-8 text-start text-wrap">
@@ -118,19 +138,27 @@ export const ReportTask = ({ report, closeModal, refetch }) => {
               </div>
             </div>
             <div className="mb-1 row text-start">
-              <label htmlFor="html5-email-input" className="col-md-4 col-form-label">
+              <label
-                Planned :
+                htmlFor="html5-email-input"
+                className="col-md-4 col-form-label"
+              >
+                Assigned :
               </label>
               <div className="col-md-8 text-start text-wrap">
                 <label className=" col-form-label">
-                  {report?.plannedTask
+                  {report?.plannedTask} of{" "}
-                  }
+                  {report?.workItem.plannedWork -
+                    report?.workItem.completedWork}{" "}
+                  Pending
                 </label>
               </div>
             </div>
             <form onSubmit={handleSubmit(onSubmit)}>
               <div className="mb-1 row text-start">
-                <label htmlFor="html5-email-input" className="col-md-4 col-form-label">
+                <label
+                  htmlFor="html5-email-input"
+                  className="col-md-4 col-form-label"
+                >
                   Completed Work
                 </label>
                 <div className="col-md-8 text-start text-wrap">
@@ -142,14 +170,17 @@ export const ReportTask = ({ report, closeModal, refetch }) => {
                     placeholder="Completed Work"
                   />
                   {errors.completedTask && (
-                    <div className="text-danger">
+                    <div className="danger-text">
                       {errors.completedTask.message}
                     </div>
                   )}
                 </div>
               </div>
               <div className="mb-1 row text-start">
-                <label htmlFor="html5-email-input" className="col-md-4 col-form-label">
+                <label
+                  htmlFor="html5-email-input"
+                  className="col-md-4 col-form-label"
+                >
                   Comment
                 </label>
                 <div className="col-md-8 text-start text-wrap">

src/pages/Activities/DailyTask.jsx

@@ -152,7 +152,7 @@ const DailyTask = () => {
                 <thead>
                   <tr>
                     <th>Activity</th>
-                    <th>Planned </th>
+                    <th>Assigned </th>
                     <th>Compeleted</th>
                     <th>Assign On</th>
                     <th>Team</th>
@@ -180,11 +180,39 @@ const DailyTask = () => {
                     return (
                       <React.Fragment key={index}>
                         <tr>
-                          <td className="flex-wrap">
+                          <td className="flex-wrap text-start">
-                            {task.workItem.activityMaster.activityName ||
+                            <div>
-                              "No Activity Name"}
+                              {task.workItem.activityMaster.activityName ||
+                                "No Activity Name"}
+                            </div>
+                            <div>
+                              {" "}
+                              <label className=" col-form-label text-sm">
+                                {" "}
+                                {
+                                  task?.workItem?.workArea?.floor?.building
+                                    ?.name
+                                }{" "}
+                                <i
+                                  className="bx bx-chevron-right text-sm"
+                                  style={{ fontSize: ".75rem" }}
+                                ></i>{" "}
+                                {task?.workItem?.workArea?.floor?.floorName}{" "}
+                                <i
+                                  className="bx bx-chevron-right text-sm"
+                                  style={{ fontSize: ".75rem" }}
+                                >
+                                  {" "}
+                                </i>
+                                {task?.workItem?.workArea?.areaName}
+                              </label>
+                            </div>
+                          </td>
+                          <td>
+                            {task.plannedTask || "NA"} /
+                            {task.workItem.plannedWork -
+                              task.workItem.completedWork}
                           </td>
-                          <td>{task.plannedTask || "NA"}</td>
                           <td>{task.completedTask}</td>
                           <td>{formatDate(task.assignmentDate)}</td>
                           <td className="text-center">