marco.pms.web/src/components/Activities/ReportTask.jsx

import React, { useState } from "react";
import { formatDate } from "../../utils/dateUtils";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import showToast from "../../services/toastService";
import { TasksRepository } from "../../repositories/TaskRepository";

export const ReportTask = ({ report, closeModal, refetch }) => {
  const [loading, setloading] = useState(false);

  const schema = z.object({
    completedTask: z
      .number()
      .min(1, "Completed Work must be at least 1")

      .int("Completed Work must be an integer")
      .positive("Completed Work must be a positive number")
      .optional(),
    comment: z.string().min(1, "Comment cannot be empty"),
  });
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(schema),
  });

  const onSubmit = async (data) => {
    try {
      setloading(true);
      const reportData = {
        ...data,
        id: report?.id,
        reportedDate: new Date().toISOString(),
        checkList:[]
      };

      let response = await TasksRepository.reportTsak(reportData);
      showToast("succesfully", "success");
      refetch();
      closeModal();
    } catch (error) {
      showToast("Somthing wrog", "error");
    }
  };
  const handleClose = () => {
    closeModal();
  };

  return (
    <div
      className="modal-dialog modal-md modal-simple report-task-modal"
      role="document"
    >
      <div className="modal-content">
        <div className="modal-body px-1">
          <button
            type="button"
            className="btn-close"
            onClick={handleClose}
            aria-label="Close"
          ></button>

          <div className="container  m-0">
            <div class="mb-1 row text-start">
              <label for="html5-text-input" class="col-md-4 col-form-label">
                Assigned Date :{" "}
              </label>
              <div class="col-md-8 text-start">
                <label class="col-md-2 col-form-label">
                  {formatDate(report?.assignmentDate)}
                </label>
              </div>
            </div>
            <div class="mb-1 row text-start">
              <label for="html5-search-input" class="col-md-4 col-form-label">
                Assigned By :{" "}
              </label>
              <div class="col-md-8  text-start">
                <label class=" col-form-label">{` ${report?.assignedBy.firstName} ${report?.assignedBy.lastName}`}</label>
              </div>
            </div>
            <div class="mb-1 row text-start">
              <label for="html5-email-input" class="col-md-4 col-form-label">
                Wrok Area :
              </label>
              <div class="col-md-8 text-start text-wrap">
                <label class=" col-form-label">
                  {" "}
                  {report?.workItem?.workArea?.floor?.building?.name}{" "}
                  <i class="bx bx-chevron-right"></i>{" "}
                  {report?.workItem?.workArea?.floor?.floorName}{" "}
                  <i class="bx bx-chevron-right"> </i>
                  {report?.workItem?.workArea?.areaName}
                </label>
              </div>
            </div>
            <div class="mb-1 row text-start">
              <label for="html5-email-input" class="col-md-4 col-form-label">
                Activity :
              </label>
              <div class="col-md-8 text-start text-wrap">
                <label class=" col-form-label">
                  {report?.workItem?.activityMaster.activityName}
                </label>
              </div>
            </div>
            <div class="mb-1 row text-start">
              <label for="html5-email-input" class="col-md-4 col-form-label">
                Team Size :
              </label>
              <div class="col-md-8 text-start text-wrap">
                <label class=" col-form-label">
                  {report?.teamMembers?.length}
                </label>
              </div>
            </div>
            <div class="mb-1 row text-start">
              <label for="html5-email-input" class="col-md-4 col-form-label">
                Planned :
              </label>
              <div class="col-md-8 text-start text-wrap">
                <label class=" col-form-label">
                  {report?.plannedTask
                  }
                </label>
              </div>
            </div>
            <form onSubmit={handleSubmit(onSubmit)}>
              <div class="mb-1 row text-start">
                <label for="html5-email-input" class="col-md-4 col-form-label">
                  Completed Work
                </label>
                <div class="col-md-8 text-start text-wrap">
                  <input
                    {...register("completedTask", { valueAsNumber: true })}
                    id="smallInput"
                    className="form-control form-control-sm"
                    type="number"
                    placeholder="Completed Work"
                  />
                  {errors.completedTask && (
                    <div className="text-danger">
                      {errors.completedTask.message}
                    </div>
                  )}
                </div>
              </div>
              <div class="mb-1 row text-start">
                <label for="html5-email-input" class="col-md-4 col-form-label">
                  Comment
                </label>
                <div class="col-md-8 text-start text-wrap">
                  <textarea
                    {...register("comment")}
                    className="form-control"
                    id="exampleFormControlTextarea1"
                    rows="1"
                    placeholder="Enter comment"
                  />
                  {errors.comment && (
                    <div className="danger-text">{errors.comment.message}</div>
                  )}
                </div>
              </div>
              <div className="col-12 text-center my-2">
                <button type="submit" className="btn btn-sm btn-primary me-3">
                  {loading ? "Please wait" : "Submit Report"}
                </button>
                <button
                  type="button"
                  className="btn btn-sm btn-label-secondary"
                  onClick={handleClose}
                >
                  Cancel
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
};