marco.pms.web/src/components/purchase/DeliveryChallane.jsx

import React, { useState } from "react";
import {
  useAddDeliverChallan,
  useDeliverChallane,
} from "../../hooks/usePurchase";
import { SpinnerLoader } from "../common/Loader";
import { formatUTCToLocalTime } from "../../utils/dateUtils";
import DeliverChallanList from "./DeliverChallanList";
import { AppFormController, useAppForm } from "../../hooks/appHooks/useAppForm";
import { zodResolver } from "@hookform/resolvers/zod";
import {
  DeliveryChallanDefaultValue,
  DeliveryChallanSchema,
} from "./PurchaseSchema";
import Label from "../common/Label";
import DatePicker from "../common/DatePicker";
import { useInvoiceAttachmentTypes } from "../../hooks/masterHook/useMaster";
import SelectField from "../common/Forms/SelectField";
import Filelist from "../Expenses/Filelist";
import SingleFileUploader from "../common/SigleFileUploader";
import { localToUtc } from "../../utils/appUtils";
import WarningBlock from "../InfoBlock/WarningBlock";
import { FILE_UPLOAD_INFO } from "../../utils/staticContent";
import { usePurchaseContext } from "../../pages/purchase/PurchasePage";

const DeliveryChallane = ({ purchaseId }) => {
  const [file, setFile] = useState(null);
  const {setDocumentView} = usePurchaseContext()

  const {
    register,
    control,
    handleSubmit,
    setValue,
    trigger,
    watch,
    reset,
    formState: { errors },
  } = useAppForm({
    resolver: zodResolver(DeliveryChallanSchema),
    defaultValues: DeliveryChallanDefaultValue,
  });

  const { data, isLoading } = useInvoiceAttachmentTypes();
  const { mutate: AddChallan, isPending } = useAddDeliverChallan(() => {
    setFile(null);
    setValue("attachment", null, { shouldValidate: false });
    reset({
      ...DeliveryChallanDefaultValue,
      attachment: null,
    });
  });
  const onSubmit = async (formData) => {
    const valid = await trigger();
    if (!valid) return;
    const { invoiceAttachmentTypeId, ...rest } = formData;

    const payload = {
      ...rest,
      attachment: formData.attachment
        ? {
            ...formData.attachment,
            invoiceAttachmentTypeId,
          }
        : null,
      purchaseInvoiceId: purchaseId,
      deliveryChallanDate: formData.deliveryChallanDate
        ? localToUtc(formData.deliveryChallanDate)
        : null,
    };

    AddChallan(payload);
  };
  const isUploaded = watch("attachment");
  const isDocumentType = watch("invoiceAttachmentTypeId");
  return (
    <div className="row px-3 px-sm-1">
      <div className="fw-semibold mb-3 fs-5">Delivery Challans</div>

      <div className="col-md-6">
        <form
          onSubmit={handleSubmit(onSubmit)}
          className="row g-3 text-start"
          noValidate
        >
          {/* Challan Number */}
          <div className="col-md-6">
            <Label required>Delivery Challan No</Label>

            <input
              type="text"
              className="form-control"
              {...register("deliveryChallanNumber")}
            />

            {errors?.deliveryChallanNumber && (
              <small className="danger-text">
                {errors.deliveryChallanNumber.message}
              </small>
            )}
          </div>

          <div className="col-md-6">
            <Label required>Delivery Date</Label>

            <DatePicker
              name="deliveryChallanDate"
              control={control}
              className="w-100"
              size="xs"
            />

            {errors?.deliveryChallanDate && (
              <small className="danger-text">
                {errors.deliveryChallanDate.message}
              </small>
            )}
          </div>

          <div className="col-12">
            <Label required>Description</Label>

            <textarea
              className="form-control form-control-sm"
              rows="3"
              {...register("description")}
            />

            {errors?.description && (
              <small className="danger-text">
                {errors.description.message}
              </small>
            )}
          </div>

          <div className="col-12">
            <AppFormController
              name="invoiceAttachmentTypeId"
              control={control}
              render={({ field }) => (
                <SelectField
                  label="Select Document Type"
                  options={data ?? []}
                  placeholder="Choose  Type"
                  labelKey="name"
                  valueKeyKey="id"
                  value={field.value}
                  onChange={field.onChange}
                  isLoading={isLoading}
                  className="m-0"
                />
              )}
            />

            {errors?.invoiceAttachmentTypeId && (
              <small className="danger-text">
                {errors.invoiceAttachmentTypeId.message}
              </small>
            )}
          </div>

          <SingleFileUploader
            label="Upload Bill"
            required
            value={file}
            onChange={(selectedFile) => {
              setFile(selectedFile);
              setValue("attachment", selectedFile, { shouldValidate: true });
            }}
            disabled={!isDocumentType}
            onRemove={() => {
              setFile(null);
              setValue("attachment", null, { shouldValidate: true });
            }}
            error={errors?.attachment?.message}
          />

          <div className="col-12 text-end my-3">
            <button
              type="submit"
              className="btn btn-sm btn-primary px-4"
              disabled={isPending}
            >
              {isPending ? "Please Wait..." : "Submit"}
            </button>
          </div>
        </form>
        {!isUploaded && <WarningBlock content={FILE_UPLOAD_INFO} />}
      </div>

      <div className="col-md-6 text-start">
        <div className="d-flex justiffy-content-start align-items-center gap-1 ms-2">
          <i className="bx bx-history bx-xs"></i>{" "}
          <p className="fw-medium mb-0">History</p>
        </div>
        <div className="overflow-auto " style={{ maxHeight: "420px" }}>
          <DeliverChallanList purchaseId={purchaseId} viewDocuments={setDocumentView} />
        </div>
      </div>
    </div>
  );
};

export default DeliveryChallane;