fix(FE-92-93-105): adding input note and quantity for create/edit chickin

src/app/production/chickin/add/page.tsx

@@ -3,6 +3,7 @@
 import Button from '@/components/Button';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import Modal, { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import ChickinForm from '@/components/pages/production/chickin/form/ChickinForm';
 import Table from '@/components/Table';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
@@ -14,7 +15,7 @@ import { Kandang } from '@/types/api/master-data/kandang';
 import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
 import { Icon } from '@iconify/react';
 import { useRouter, useSearchParams } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { use, useEffect, useState } from 'react';
 
 import useSWR from 'swr';
 
@@ -33,6 +34,11 @@ const AddChickin = () => {
   const [selectedKandang, setSelectedKandang] = useState<Kandang | undefined>(
     undefined
   );
+  const [projectFlockKandang, setProjectFlockKandang] = useState<
+    BaseApiResponse<ProjectFlockKandang>
+  >();
+  const [isLoadingProjectFlockKandang, setIsLoadingProjectFlockKandang] =
+    useState(false);
   const [searchProjectFlock, setSearchProjectFlock] = useState('');
 
   // Fetch Data
@@ -41,44 +47,26 @@ const AddChickin = () => {
     (id: number) => ProjectFlockApi.getSingle(id)
   );
   const { data: listProjectFlock, isLoading: isLoadingListProjectFlock } =
-    useSWR(`${ProjectFlockApi.basePath}?${new URLSearchParams({
-      search: searchProjectFlock,
-    }).toString()}`, ProjectFlockApi.getAllFetcher);
+    useSWR(
+      `${ProjectFlockApi.basePath}?${new URLSearchParams({
+        search: searchProjectFlock,
+      }).toString()}`,
+      ProjectFlockApi.getAllFetcher
+    );
 
   const getProjectFlockKandangUrl = `/kandangs/lookup`;
-  const {
-    data: projectFlockKandang,
-    isLoading: isLoadingProjectFlockKandang,
-    mutate: refreshProjectFlockKandang,
-  } = useSWR(getProjectFlockKandangUrl, () =>
-    ProjectFlockApi.customRequest<BaseApiResponse<ProjectFlockKandang>, 'GET'>(
-      getProjectFlockKandangUrl,
-      {
-        method: 'GET',
-        params: {
-          project_flock_id: projectFlockId ?? 0,
-          kandang_id: selectedKandang?.id,
-        },
-      }
-    )
-  );
-
   // Mapping Options
   const options = isResponseSuccess(listProjectFlock)
     ? listProjectFlock?.data.map((projectFlock) => {
         return {
           value: projectFlock.id,
-          label: `${projectFlock?.flock.name} - ${projectFlock?.category} - Periode ${projectFlock.period}` ,
+          label: `${projectFlock?.flock.name} - ${projectFlock?.category} - Periode ${projectFlock.period}`,
         };
       })
     : [];
 
   const chickinModal = useModal();
-
-  // Use Effect
-  useEffect(() => {
-    refreshProjectFlockKandang();
-  }, [selectedKandang, refreshProjectFlockKandang]);
+  const alertModal = useModal();
 
   if (!projectFlockId) {
     router.back();
@@ -99,13 +87,35 @@ const AddChickin = () => {
   }
 
   // Handle Function
-  const handleChickinClick = (kandang: Kandang) => {
+  const handleChickinClick = async (kandang: Kandang) =>  {
+    setIsLoadingProjectFlockKandang(true);
     setSelectedKandang(kandang);
-    refreshProjectFlockKandang();
-    chickinModal.openModal();
+    const ProjectFlockKandangRes = await ProjectFlockApi.customRequest<
+      BaseApiResponse<ProjectFlockKandang>,
+      'GET'
+    >(getProjectFlockKandangUrl, {
+      method: 'GET',
+      params: {
+        project_flock_id: projectFlockId ?? 0,
+        kandang_id: kandang.id,
+      },
+    });
+    if (
+      isResponseSuccess(ProjectFlockKandangRes)
+    ) {
+      setProjectFlockKandang(ProjectFlockKandangRes);
+      setIsLoadingProjectFlockKandang(false);
+      if (
+        ProjectFlockKandangRes.data.available_quantity &&
+        ProjectFlockKandangRes.data.available_quantity > 0
+      ) {
+        chickinModal.openModal();
+      }else{
+        alertModal.openModal();
+      }
+    }
   };
   const handleAfterSubmit = () => {
-    refreshProjectFlockKandang();
     chickinModal.closeModal();
     router.push('/production/chickin');
   };
@@ -126,7 +136,7 @@ const AddChickin = () => {
               </Button>
 
               <div className='flex flex-col gap-4 w-full my-4'>
-                <div className='max-w-1/4'>
+                <div className='max-w-full sm:max-w-1/2 md:max-w-3/5 lg:max-w-2/5'>
                   <SelectInput
                     required
                     isSearchable
@@ -173,10 +183,10 @@ const AddChickin = () => {
                         <Button
                           color='success'
                           variant='outline'
-                          isLoading={isLoadingProjectFlockKandang}
                           onClick={() => {
                             handleChickinClick(props.row.original);
                           }}
+                          disabled={isLoadingProjectFlockKandang}
                         >
                           <Icon
                             icon='mdi:home-import-outline'
@@ -240,6 +250,19 @@ const AddChickin = () => {
                 />
               )}
           </Modal>
+          <ConfirmationModal
+            ref={alertModal.ref}
+            type='info'
+            text={`Persediaan Day Old Chick pada kandang (${selectedKandang?.name}) belum ada, mohon isi terlebih dahulu di bagian Persediaan!`}
+            secondaryButton={undefined}
+            primaryButton={{
+              text: 'Ya',
+              color: 'info',
+              onClick: () => {
+                alertModal.closeModal();
+              },
+            }}
+          />
         </>
       )}
     </>

src/app/production/chickin/detail/layout.tsx

@@ -0,0 +1,11 @@
+import SuspenseHelper from "@/components/helper/SuspenseHelper"
+
+const Layout = ({
+  children
+}: Readonly<{
+  children: React.ReactNode
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>
+}
+
+export default Layout;

src/app/production/chickin/detail/page.tsx

@@ -0,0 +1,74 @@
+'use client'
+
+import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
+import { ChickinApi } from "@/services/api/production";
+import { useRouter, useSearchParams } from "next/navigation";
+import useSWR from "swr";
+
+const DetailChickin = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const chickinId = searchParams.get('chickinId');
+
+  const {
+    data: chickin,
+    isLoading,
+    mutate: refreshChickin,
+  } = useSWR(
+    chickinId,
+    (id: number) => ChickinApi.getSingle(id)
+  );
+
+  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;
+  }
+
+  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="card shadow">
+              <div className="card-body">
+                <div className="card-title">
+                  Informasi Project Flock
+                </div>
+
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <div className="font-semibold">Flock</div>
+                    <div >{chickin.data.project_flock_kandang?.project_flock.flock.name}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="card shadow">
+              <div className="card-body">
+                <div className="card-title">
+                  Informasi Chickin
+                </div>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+    </>
+  );
+}
+
+export default DetailChickin;