lti-web-client/src/app/production/project-flock/chickin/detail/page.tsx

'use client';

import Button from '@/components/Button';
import Card from '@/components/Card';
import Modal, { useModal } from '@/components/Modal';
import ConfirmationModal from '@/components/modal/ConfirmationModal';
import ChickinForm from '@/components/pages/production/chickin/form/ChickinForm';
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
import { ChickinApi } from '@/services/api/production';
import { BaseApiResponse } from '@/types/api/api-general';
import {
  Chickin,
  ChickinApprovalPayload,
} from '@/types/api/production/chickin';
import { Icon } from '@iconify/react';
import { useRouter, useSearchParams } from 'next/navigation';
import { useState } from 'react';
import toast from 'react-hot-toast';
import useSWR from 'swr';

/**
 * TODO: Refactor code - pindahin detail ke reuseable component
 *       setelah implement approval and reject
 */

const DetailChickin = () => {
  const router = useRouter();
  const searchParams = useSearchParams();
  const chickinId = searchParams.get('chickinId');
  const [isApproveLoading, setIsApproveLoading] = useState(false);
  const [isDeleteLoading, setIsDeleteLoading] = useState(false);

  const confirmModal = useModal();
  const deleteModal = useModal();
  const chickinModal = useModal();
  const {
    data: chickin,
    isLoading,
    mutate: refreshChickin,
  } = useSWR(chickinId, (id: number) => ChickinApi.getSingle(id));

  const [isApprovedDisabled, setIsApprovedDisabled] = useState(
    // chickin.data?.approval.step_number == 1 ? false : true
    true
  );
  const [isRejectedDisabled, setIsRejectedDisabled] =
    useState(!isApprovedDisabled);
  const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(
    !isApprovedDisabled ? 'APPROVED' : 'REJECTED'
  );

  if (!chickinId) {
    router.back();

    return (
      <div className='w-full flex flex-row justify-center items-center p-4'>
        <span className='loading loading-spinner loading-xl' />
      </div>
    );
  }

  if (!isLoading && (!chickin || isResponseError(chickin))) {
    router.replace('/404');
    return;
  }

  if (!isResponseSuccess(chickin)) {
    return (
      <div className='w-full flex flex-row justify-center items-center p-4'>
        <span className='loading loading-spinner loading-xl' />
      </div>
    );
  }

  const confirmationModalClickHandler = async ({
    action = 'APPROVED',
  }: {
    action: 'APPROVED' | 'REJECTED';
  }) => {
    if (chickin?.data.id === undefined) return;
    setIsApproveLoading(true);
    const approveChickinRes = await ChickinApi.customRequest<
      BaseApiResponse<Chickin>,
      ChickinApprovalPayload
    >(`/approvals`, {
      method: 'POST',
      payload: {
        action: action,
        approvable_ids: [chickin.data.id],
      },
    });

    if (isResponseSuccess(approveChickinRes)) {
      if (refreshChickin) {
        await refreshChickin();
      }
      toast.success(approveChickinRes.message as string);
    }
    if (isResponseError(approveChickinRes)) {
      toast.error(approveChickinRes?.message as string);
    }
    confirmModal.closeModal();
    setIsApproveLoading(false);
  };

  const confirmationModalDeleteClickHandler = async () => {
    setIsDeleteLoading(true);
    const deleteProjectFlockRes = await ChickinApi.delete(
      chickin.data?.id as number
    );

    if (isResponseSuccess(deleteProjectFlockRes)) {
      toast.success(deleteProjectFlockRes?.message as string);
      router.push('/production/chickin');
    }
    if (isResponseError(deleteProjectFlockRes)) {
      toast.error(deleteProjectFlockRes?.message as string);
    }
    deleteModal.closeModal();
    setIsDeleteLoading(false);
  };

  return (
    <>
      <div className='w-full p-4 flex flex-col justify-center gap-4'>
        {isLoading && <span className='loading loading-spinner loading-xl' />}
        {!isLoading && isResponseSuccess(chickin) && (
          <>
            {/* <div className='w-full flex flex-col sm:flex-row gap-2'>
              <Button
                variant='outline'
                color='success'
                onClick={(() => {
                  if (chickin?.data.id) {
                    setApprovalAction('APPROVED');
                    confirmModal.openModal();
                  }
                })}
                disabled={!chickin?.data.id || isApprovedDisabled}
                className='w-full sm:w-fit'
              >
                <Icon icon='material-symbols:check' width={24} height={24} />
                Approve
              </Button>
              <Button
                variant='outline'
                color='error'
                onClick={() => {
                  if (chickin?.data.id) {
                    setApprovalAction('REJECTED');
                    confirmModal.openModal();
                  }
                }}
                disabled={!chickin?.data.id || isRejectedDisabled}
                className='w-full sm:w-fit'
              >
                <Icon icon='mdi:times' width={24} height={24} />
                Reject
              </Button>
            </div> */}
            <Card
              title='Informasi Umum'
              variant='bordered'
              className={{
                wrapper: 'w-full',
              }}
            >
              <div className='grid grid-cols-2 gap-4 mt-4'>
                <div className='flex flex-col gap-2'>
                  <div className='font-semibold text-sm'>Flock</div>
                  <div className='text-sm'>
                    {
                      chickin?.data?.project_flock_kandang?.project_flock?.flock
                        ?.name
                    }
                  </div>
                </div>
                <div className='flex flex-col gap-2'>
                  <div className='font-semibold text-sm'>Area</div>
                  <div className='text-sm'>
                    {
                      chickin.data.project_flock_kandang?.project_flock.area
                        .name
                    }
                  </div>
                </div>
                <div className='flex flex-col gap-2'>
                  <div className='font-semibold text-sm'>Kategori</div>
                  <div className='text-sm'>
                    {chickin.data.project_flock_kandang?.project_flock.category}
                  </div>
                </div>
                <div className='flex flex-col gap-2'>
                  <div className='font-semibold text-sm'>Lokasi</div>
                  <div className='text-sm'>
                    {
                      chickin.data.project_flock_kandang?.project_flock.location
                        .name
                    }
                  </div>
                </div>
                <div className='flex flex-col gap-2'>
                  <div className='font-semibold text-sm'>Periode</div>
                  <div className='text-sm'>
                    {chickin.data.project_flock_kandang?.project_flock.period}
                  </div>
                </div>
                <div className='flex flex-col gap-2'>
                  <div className='font-semibold text-sm'>Kandang</div>
                  <div className='text-sm'>
                    {chickin.data.project_flock_kandang?.kandang.name}
                  </div>
                </div>
              </div>
            </Card>
            <Card
              title='Detail Chickin'
              variant='bordered'
              className={{
                wrapper: 'w-full',
              }}
            >
              <div className='grid grid-cols-2 gap-4 mt-4'>
                <div className='flex flex-col gap-2'>
                  <div className='font-semibold text-sm'>Flock Kandang</div>
                  <div className='text-sm'>
                    {
                      chickin?.data?.project_flock_kandang?.project_flock?.flock
                        ?.name
                    }{' '}
                    - {chickin.data.project_flock_kandang?.kandang.name}
                  </div>
                </div>
                <div className='flex flex-col gap-2'>
                  <div className='font-semibold text-sm'>Tanggal Chickin</div>
                  <div className='text-sm'>
                    {chickin.data.chick_in_date
                      ? new Date(chickin.data.chick_in_date).toLocaleDateString(
                          'id-ID'
                        )
                      : '-'}
                  </div>
                </div>
                <div className='flex flex-col gap-2'>
                  <div className='font-semibold text-sm'>Jumlah (Ekor)</div>
                  <div className='text-sm'>
                    {chickin.data.quantity?.toLocaleString('id-ID')}
                  </div>
                </div>
                <div className='flex flex-col gap-2'>
                  <div className='font-semibold text-sm'>Catatan</div>
                  <div className='text-sm'>{chickin.data.note}</div>
                </div>
              </div>
            </Card>
            <div className='w-full flex flex-col sm:flex-row gap-2'>
              <Button
                color='error'
                onClick={() => {
                  deleteModal.openModal();
                }}
              >
                <Icon icon='mdi:times' width={24} height={24} />
                Delete
              </Button>
              <Button
                color='warning'
                onClick={() => {
                  chickinModal.openModal();
                }}
              >
                <Icon icon='mdi:pencil-outline' width={24} height={24} />
                Edit
              </Button>
            </div>
          </>
        )}
      </div>

      <ConfirmationModal
        ref={deleteModal.ref}
        type='error'
        text={`Apakah anda yakin ingin menghapus data Project Flock ini (${chickin?.data?.project_flock_kandang?.project_flock.flock?.name} - ${chickin?.data.project_flock_kandang?.kandang.name})?`}
        secondaryButton={{
          text: 'Tidak',
        }}
        primaryButton={{
          text: 'Ya',
          color: 'error',
          isLoading: isDeleteLoading,
          onClick: confirmationModalDeleteClickHandler,
        }}
      />

      <Modal ref={chickinModal.ref}>
        <div className='flex flex-row justify-between items-center'>
          <h1 className='text-xl font-semibold text-center mb-6'>
            Chickin Kandang -{' '}
            {chickin?.data?.project_flock_kandang &&
              chickin?.data?.project_flock_kandang.kandang?.name}
          </h1>
          <Button
            color='error'
            variant='link'
            onClick={chickinModal.closeModal}
          >
            <Icon
              className='text-black'
              icon='uil:times'
              width={24}
              height={24}
            />
          </Button>
        </div>
      </Modal>

      <ConfirmationModal
        ref={confirmModal.ref}
        type={approvalAction == 'APPROVED' ? 'success' : 'error'}
        text={`Apakah anda yakin ingin ${
          approvalAction == 'APPROVED' ? 'approve' : 'reject'
        } chickin berikut? (${
          chickin?.data?.project_flock_kandang?.project_flock?.flock?.name
        } - ${chickin?.data.project_flock_kandang?.kandang.name})?`}
        secondaryButton={{
          text: 'Tidak',
        }}
        primaryButton={{
          text: 'Ya',
          color: approvalAction == 'APPROVED' ? 'success' : 'error',
          isLoading: isApproveLoading,
          onClick: () => {
            confirmationModalClickHandler({
              action: approvalAction,
            });
          },
        }}
      />
    </>
  );
};

export default DetailChickin;