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

import React, { useState } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import TimePicker from "../common/TimePicker";
import { usePositionTracker } from "../../hooks/usePositionTracker";
import { useDispatch, useSelector } from "react-redux";
import { markAttendance } from "../../slices/apiSlice/attedanceLogsSlice";
import showToast from "../../services/toastService";
import { checkIfCurrentDate } from "../../utils/dateUtils";
import { useMarkAttendance } from "../../hooks/useAttendance";
import { useSelectedProject } from "../../slices/apiDataManager";

const createSchema = (modeldata) => {
  return z
    .object({
      markTime: z.string().nonempty({ message: "Time is required" }),
      description: z
        .string()
        .max(200, "Description should be less than 200 characters")
        .optional(),
    })
    .refine((data) => {
      if (modeldata?.checkInTime && !modeldata?.checkOutTime) {
        const checkIn = new Date(modeldata.checkInTime);
        const [time, modifier] = data.markTime.split(" ");
        const [hourStr, minuteStr] = time.split(":");
        let hour = parseInt(hourStr, 10);
        const minute = parseInt(minuteStr, 10);

        if (modifier === "PM" && hour !== 12) hour += 12;
        if (modifier === "AM" && hour === 12) hour = 0;

        const checkOut = new Date(checkIn);
        checkOut.setHours(hour, minute, 0, 0);

        return checkOut > checkIn;
      }
      return true;
    }, {
      message: "Checkout time must be later than check-in time",
      path: ["markTime"],
    });
};

const CheckInCheckOut = ({ modeldata, closeModal, handleSubmitForm }) => {
  const projectId = useSelectedProject();
  const { mutate: MarkAttendance } = useMarkAttendance();
  const [isLoading, setIsLoading] = useState(false);
  const coords = usePositionTracker();
  const dispatch = useDispatch();
  const today = new Date().toISOString().split("T")[0];

  const formatDate = (dateString) => {
    if (!dateString) {
      return "";
    }
    const [year, month, day] = dateString.split("-");
    return `${day}-${month}-${year}`;
  };

  const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
    setValue,
  } = useForm({
    resolver: zodResolver(createSchema(modeldata)),
    mode: "onChange",
  });

  const onSubmit = (data) => {
    let record = {
      ...data,
      date: new Date().toLocaleDateString(),
      latitude: coords.latitude,
      longitude: coords.longitude,
      employeeId: modeldata.employeeId,
      action: modeldata.action,
      id: modeldata?.id || null,
    };
    const payload = {
      Id: modeldata?.id || null,
      comment: data.description,
      employeeID: modeldata.employeeId,
      projectId: projectId,
      date: new Date().toISOString(),
      markTime: data.markTime,
      latitude: coords.latitude.toString(),
      longitude: coords.longitude.toString(),
      action: modeldata.action,
      image: null,
    };
    MarkAttendance({ payload, forWhichTab: modeldata.forWhichTab });
    closeModal();
  };

  return (
    <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
      <div className="col-12 col-md-12">
        <label className="fs-5 text-dark text-center d-flex align-items-center flex-wrap">
          {modeldata?.checkInTime && !modeldata?.checkOutTime
            ? "Check-out :"
            : "Check-in :"}
        </label>
      </div>

      <div className="col-6 col-md-6 ">
        <label className="form-label" htmlFor="checkInDate">
          {modeldata?.checkInTime && !modeldata?.checkOutTime
            ? "Check-out Date"
            : "Check-in Date"}
        </label>
        <input
          type="text"
          id="checkInDate"
          className="form-control"
          value={
            modeldata?.checkInTime && !modeldata?.checkOutTime
              ? formatDate(modeldata?.checkInTime?.split("T")[0]) || ""
              : formatDate(today)
          }
          disabled
        />
      </div>

      <div className="col-6 col-md-6">
        <TimePicker
          label="Choose a time"
          onChange={(e) => setValue("markTime", e)}
          interval={10}
          checkOutTime={modeldata?.checkOutTime}
          checkInTime={modeldata?.checkInTime}
        />
        {errors.markTime && (
          <p className="text-danger">{errors.markTime.message}</p>
        )}
      </div>

      <div className="col-12 col-md-12">
        <label className="form-label" htmlFor="description">
          Description
        </label>
        <textarea
          rows="3"
          name="description"
          className="form-control"
          {...register("description")}
          maxLength={200}
        />
        {errors.description && (
          <p className="text-danger">{errors.description.message}</p>
        )}
      </div>

      <div className="col-12 text-center">
        <button type="submit" className="btn btn-sm btn-primary me-3">
          {isLoading ? "Please Wait..." : "Submit"}
        </button>
        <button
          type="reset"
          className="btn btn-sm btn-label-secondary"
          data-bs-dismiss="modal"
          aria-label="Close"
          onClick={() => closeModal()}
        >
          Cancel
        </button>
      </div>
    </form>
  );
};

export default CheckInCheckOut;

const schemaReg = z.object({
  description: z.string().min(1, { message: "please give reason!" }),
});

export const Regularization = ({ modeldata, closeModal, handleSubmitForm }) => {
  const [isLoading, setIsLoading] = useState(false);
  const coords = usePositionTracker();

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(schemaReg),
  });

  const getCurrentDate = () => {
    const today = new Date();
    return today.toLocaleDateString("en-CA");
  };

  const onSubmit = (data) => {
    let record = {
      ...data,
      date: new Date().toLocaleDateString(),
      latitude: coords.latitude,
      longitude: coords.longitude,
    };
    handleSubmitForm(record);
    closeModal();
  };

  return (
    <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
      <div className="col-12 col-md-12">
        <p>Regularize Attendance</p>
        <label className="form-label" htmlFor="description">
          Description
        </label>
        <textarea
          rows="3"
          name="description"
          className="form-control"
          {...register("description")}
        />
        {errors.description && (
          <p className="danger-text">{errors.description.message}</p>
        )}
      </div>

      <div className="col-12 text-center">
        <button type="submit" className="btn btn-sm btn-primary me-3">
          {isLoading ? "Please Wait..." : "Submit"}
        </button>
        <button
          type="reset"
          className="btn btn-sm btn-label-secondary"
          data-bs-dismiss="modal"
          aria-label="Close"
          onClick={() => closeModal()}
        >
          Cancel
        </button>
      </div>
    </form>
  );
};