feat(FE-279): Add functionality closing project flock

src/components/pages/production/project-flock/detail/ProjectFlockDetail.tsx

@@ -1,7 +1,9 @@
 import Badge from '@/components/Badge';
 import Button from '@/components/Button';
 import Card from '@/components/Card';
+import { RadioGroup, RadioGroupItem } from '@/components/input/RadioInput';
 import Tooltip from '@/components/Tooltip';
+import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
 import {
   formatCurrency,
   formatDate,
@@ -13,6 +15,11 @@ import { Icon } from '@iconify/react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import { ProjectFlockApi } from '@/services/api/production/project-flock';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import toast from 'react-hot-toast';
 
 const ProjectFlockDetail = ({
   projectFlock,
@@ -20,55 +27,60 @@ const ProjectFlockDetail = ({
   projectFlock: ProjectFlock;
 }) => {
   const router = useRouter();
+  const deleteModal = useModal();
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [openBudgets, setOpenBudget] = useState(false);
+  const [selectedKandangId, setSelectedKamdangId] = useState<string | null>(
+    null
+  );
+
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+    const deleteProjectFlockRes = await ProjectFlockApi.delete(
+      projectFlock?.id as number
+    );
+
+    if (isResponseSuccess(deleteProjectFlockRes)) {
+      toast.success(deleteProjectFlockRes?.message as string);
+      router.push('/production/project-flock');
+    }
+    if (isResponseError(deleteProjectFlockRes)) {
+      toast.error(deleteProjectFlockRes?.message as string);
+    }
+    setIsDeleteLoading(false);
+  };
 
   return (
     <>
       <div className='h-full w-full flex flex-col gap-4'>
         {/* Header */}
-        <div className='flex flex-row justify-between items-center px-4 pt-4'>
-          <div className='flex flex-row h-full gap-2'>
-            <Link
-              href={`/production/project-flock`}
-              className='hover:text-gray-400'
-            >
-              <Icon icon='mdi:close' width={24} height={24} />
-            </Link>
-            <div className='divider divider-horizontal p-0 m-0'></div>
-            <div className='text-sm text-neutral'>
-              Created On {formatDate(projectFlock.created_at, 'MMM DD, YYYY')}
-            </div>
-          </div>
-          <div className='flex flex-row gap-3 justify-end'>
-            {projectFlock?.approval?.step_number == 2 && (
-              <Link
-                href={`/production/project-flock/chickin/add?projectFlockId=${projectFlock?.id}`}
-                className='text-success'
-              >
-                <Tooltip content='Chick In' position='bottom'>
-                  <Icon
-                    icon='mdi:checkbox-marked-outline'
-                    width={20}
-                    height={20}
-                    data-tip={'Chick In'}
-                  />
-                </Tooltip>
-              </Link>
-            )}
-            <Link
-              href={`/production/project-flock/detail/edit?projectFlockId=${projectFlock.id}`}
-            >
-              <Tooltip content='Edit' position='bottom'>
+        <DrawerHeader
+          leftIcon='mdi:close'
+          leftIconHref='/production/project-flock'
+          subtitle={`Created On ${formatDate(projectFlock.created_at, 'MMM DD, YYYY')}`}
+        >
+          <Link
+            href={`/production/project-flock/detail/edit?projectFlockId=${projectFlock.id}`}
+            className='p-0'
+          >
+            <Tooltip content='Edit' position='bottom'>
+              <Button variant='link' className='p-0 text-neutral'>
                 <Icon icon='mdi:square-edit-outline' width={20} height={20} />
-              </Tooltip>
-            </Link>
-            <Button variant='link' className='p-0 text-error'>
-              <Tooltip content='Hapus' position='bottom'>
-                <Icon icon='mdi:trash-can-outline' width={20} height={20} />
-              </Tooltip>
-            </Button>
-          </div>
-        </div>
+              </Button>
+            </Tooltip>
+          </Link>
+          <Button
+            variant='link'
+            className='p-0 text-error'
+            onClick={() => {
+              deleteModal.openModal();
+            }}
+          >
+            <Tooltip content='Hapus' position='bottom'>
+              <Icon icon='mdi:trash-can-outline' width={20} height={20} />
+            </Tooltip>
+          </Button>
+        </DrawerHeader>
 
         {/* Informasi Umum */}
         <div className='border-t-1 border-gray-300'>
@@ -79,11 +91,11 @@ const ProjectFlockDetail = ({
               <Badge
                 variant='soft'
                 color={
-                  projectFlock.approval.step_number == 1
+                  projectFlock.approval?.step_number == 1
                     ? 'neutral'
-                    : projectFlock.approval.step_number == 2
+                    : projectFlock.approval?.step_number == 2
                       ? 'success'
-                      : projectFlock.approval.step_number >= 3
+                      : projectFlock.approval?.step_number >= 3
                         ? 'error'
                         : undefined
                 }
@@ -96,16 +108,16 @@ const ProjectFlockDetail = ({
                   width={12}
                   height={12}
                   color={
-                    projectFlock.approval.step_number == 1
+                    projectFlock.approval?.step_number == 1
                       ? 'neutral'
-                      : projectFlock.approval.step_number == 2
+                      : projectFlock.approval?.step_number == 2
                         ? 'success'
-                        : projectFlock.approval.step_number >= 3
+                        : projectFlock.approval?.step_number >= 3
                           ? 'error'
                           : undefined
                   }
                 />{' '}
-                {projectFlock.approval.step_name}
+                {projectFlock.approval?.step_name}
               </Badge>
               <div className='divider divider-horizontal p-0 m-0'></div>
               <Badge
@@ -307,27 +319,85 @@ const ProjectFlockDetail = ({
                 body: 'p-3',
               }}
             >
-              <div className='flex flex-col gap-6'>
+              <RadioGroup
+                name='gender'
+                className={{
+                  radioWrapper: 'grid grid-cols-1 gap-6',
+                }}
+                onChange={(e) => setSelectedKamdangId(e.target.value)}
+                value={selectedKandangId?.toString()}
+                size='md'
+                color='neutral'
+              >
                 {projectFlock.kandangs.map((kandang) => (
                   <div
                     key={kandang.id}
-                    className='flex flex-row justify-between items-center'
+                    className={`grid grid-cols-2 gap-6 cursor-pointer hover:text-gray-800`}
+                    onClick={() => setSelectedKamdangId(kandang.id.toString())}
                   >
-                    <div className='flex flex-row gap-2 items-center cursor-pointer text-gray-400'>
-                      <Icon icon={'mdi:drag'} width={21} height={21} />{' '}
-                      <span className='font-semibold'>{kandang.name}</span>
-                    </div>
-                    <div className='text-end text-gray-400'>
-                      Created On{' '}
-                      {formatDate(projectFlock.created_at, 'MMM DD, YYYY')}
+                    <RadioGroupItem
+                      value={kandang.id.toString()}
+                      label={kandang.name}
+                    />
+                    <div className='text-end'>
+                      <Badge
+                        className={{
+                          badge: 'rounded-lg',
+                        }}
+                      >
+                        Kapasitas {kandang.capacity} Ekor
+                      </Badge>
                     </div>
                   </div>
                 ))}
-              </div>
+              </RadioGroup>
             </Card>
+            <div className='grid grid-cols-4 gap-3'>
+              <Link
+                href={`/production/project-flock/chickin/add/kandang?projectFlockKandangId=${selectedKandangId}&projectFlockId=${projectFlock.id}`}
+                className='m-0 p-0'
+              >
+                <Button
+                  className='w-full px-2 py-1 text-sm'
+                  variant='outline'
+                  color='success'
+                  disabled={!selectedKandangId}
+                >
+                  Chickin <Icon icon='mdi:checkbox-marked-outline' />
+                </Button>
+              </Link>
+              <Link
+                href={`/production/project-flock/closing?projectFlockId=${projectFlock.id}&projectFlockKandangId=${selectedKandangId}`}
+                className='m-0 p-0'
+              >
+                <Button
+                  className='w-full px-2 py-1 text-sm'
+                  variant='outline'
+                  color='error'
+                  disabled={!selectedKandangId}
+                >
+                  Close <Icon icon='mdi:checkbox-marked-circle-outline' />
+                </Button>
+              </Link>
+            </div>
           </div>
         </div>
       </div>
+
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data Project Flock ini (${projectFlock?.flock_name} - ${projectFlock?.area?.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
     </>
   );
 };