refactor(FE-238-106): change dateinput and create chickin page

src/app/production/chickin/add/kandang/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/add/kandang/page.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+
+export default function AddChickinKandang() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const kandangId = searchParams.get('kandangId');
+
+  return (
+    <div>
+      <h1>Tambah Chickin untuk Kandang ID: {kandangId}</h1>
+    </div>
+  );
+}

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

@@ -2,10 +2,12 @@
 
 import Badge from '@/components/Badge';
 import Button from '@/components/Button';
+import Card from '@/components/Card';
 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 PillBadge from '@/components/PillBadge';
 import Table from '@/components/Table';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
@@ -13,10 +15,12 @@ import { ProjectFlockApi } from '@/services/api/production';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { BaseApiResponse } from '@/types/api/api-general';
 import { Kandang } from '@/types/api/master-data/kandang';
+import { ProjectFlock } from '@/types/api/production/project-flock';
 import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
 import { Icon } from '@iconify/react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useState } from 'react';
+import { is } from 'react-day-picker/locale';
 
 import useSWR from 'swr';
 
@@ -113,21 +117,27 @@ const AddChickin = () => {
       <>
         <section className='w-full p-4'>
           <header className='flex flex-col gap-4'>
-            <Button
-              href='/production/project-flock'
-              variant='link'
-              className='w-fit p-0 text-primary'
-            >
-              <Icon icon='uil:arrow-left' width={24} height={24} />
-              Kembali
-            </Button>
+            <div className='flex flex-row justify-between items-center'>
+              <Button
+                href='/production/project-flock'
+                variant='link'
+                className='w-fit p-0 text-primary'
+              >
+                <Icon icon='uil:arrow-left' width={24} height={24} />
+                Kembali
+              </Button>
+              <h1 className='text-2xl font-semibold text-center'>
+                Daftar Kandang Project Flock
+              </h1>
+              <div></div>
+            </div>
 
             <div className='flex flex-col gap-4 w-full my-4'>
               <div className='max-w-full sm:max-w-1/2 md:max-w-3/5 lg:max-w-2/5'>
                 <SelectInput
                   required
-                  label='Project Flock'
-                  placeholder='Pilih project flock'
+                  label='Ganti Project Flock'
+                  placeholder='Pilih Project Flock'
                   options={options}
                   onInputChange={(val) => {
                     setSearchProjectFlock(val);
@@ -164,78 +174,203 @@ const AddChickin = () => {
               </div>
             </div>
           </header>
-          <Table<Kandang>
-            emptyContent={
-              <div className='w-full p-5 text-center'>
-                {projectFlockId && isResponseError(projectFlock) ? (
-                  <span className='text-lg opacity-50'>
-                    {projectFlock.message}
-                  </span>
-                ) : (
-                  <span className='text-lg opacity-50'>
-                    Pilih project flock terlebih dahulu...
-                  </span>
-                )}
-              </div>
-            }
-            data={
-              isResponseSuccess(projectFlock) ? projectFlock.data?.kandangs : []
-            }
-            columns={[
-              {
-                header: '#',
-                cell: (props) =>
-                  tableFilterState.pageSize * (tableFilterState.page - 1) +
-                  props.row.index +
-                  1,
-              },
-              {
-                accessorKey: 'name',
-                header: 'Nama Kandang',
-              },
-              {
-                header: 'Aksi',
-                cell: (props) => {
-                  return (
-                    <>
-                      <Button
-                        color='success'
-                        variant='outline'
-                        onClick={() => {
-                          handleChickinClick(props.row.original);
-                        }}
-                        disabled={isLoadingProjectFlockKandang}
-                      >
-                        <Icon
-                          icon='mdi:home-import-outline'
-                          width={24}
-                          height={24}
-                        />
-                        Chickin
-                      </Button>
-                    </>
-                  );
-                },
-              },
-            ]}
-            page={undefined}
+          <Card
+            title='Informasi Flock'
             className={{
-              containerClassName: cn({
-                'mb-20':
-                  isResponseSuccess(projectFlock) &&
-                  projectFlock.data?.kandangs?.length === 0,
-              }),
-              tableWrapperClassName: 'overflow-x-auto min-h-full!',
-              tableClassName: 'font-inter w-full table-auto min-h-full!',
-              headerRowClassName: 'border-b border-b-gray-200',
-              headerColumnClassName:
-                'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
-              bodyRowClassName: 'border-b border-b-gray-200',
-              bodyColumnClassName:
-                'px-6 py-3 last:flex last:flex-row last:justify-end',
-              paginationClassName: 'hidden',
+              wrapper: 'w-full bg-white mb-3',
             }}
-          />
+          >
+            <Table<ProjectFlock>
+              emptyContent={
+                <div className='w-full p-5 text-center'>
+                  {projectFlockId && isResponseError(projectFlock) ? (
+                    <span className='text-lg opacity-50'>
+                      {projectFlock.message}
+                    </span>
+                  ) : (
+                    <span className='text-lg opacity-50'>
+                      Pilih project flock terlebih dahulu...
+                    </span>
+                  )}
+                </div>
+              }
+              data={isResponseSuccess(projectFlock) ? [projectFlock.data] : []}
+              columns={[
+                {
+                  header: 'Area',
+                  accessorKey: 'area.name',
+                },
+                {
+                  header: 'Lokasi',
+                  accessorKey: 'location.name',
+                },
+                {
+                  header: 'Nama Flock',
+                  accessorKey: 'flock.name',
+                },
+                {
+                  header: 'Kategori',
+                  accessorKey: 'category',
+                },
+                {
+                  header: 'Status',
+                  accessorKey: 'status',
+                  cell: (props) => {
+                    return props.row.original.approval.step_name ? (
+                      <PillBadge
+                        color={(() => {
+                          switch (
+                            props.row.original.approval.step_name.toUpperCase()
+                          ) {
+                            case 'AKTIF':
+                              return 'red';
+                            case 'PENGAJUAN':
+                              return 'green';
+                            default:
+                              return 'gray';
+                          }
+                        })()}
+                        content={props.row.original.approval.step_name
+                          .toLowerCase()
+                          .replace(/_/g, ' ')
+                          .replace(/\b\w/g, (char) => char.toUpperCase())}
+                      />
+                    ) : (
+                      '-'
+                    );
+                  },
+                },
+                {
+                  header: 'Periode',
+                  accessorKey: 'period',
+                },
+                {
+                  header: 'FCR Layer',
+                  accessorKey: 'fcr.name',
+                },
+              ]}
+              page={undefined}
+              className={{
+                containerClassName: cn({
+                  'mb-20':
+                    isResponseSuccess(projectFlock) &&
+                    projectFlock.data?.kandangs?.length === 0,
+                }),
+                tableWrapperClassName: 'overflow-x-auto min-h-full!',
+                tableClassName: 'font-inter w-full table-auto min-h-full!',
+                headerRowClassName: 'border-b border-b-gray-200',
+                headerColumnClassName:
+                  'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+                bodyRowClassName: 'border-b border-b-gray-200',
+                bodyColumnClassName:
+                  'px-6 py-3 last:flex last:flex-row last:justify-end',
+                paginationClassName: 'hidden',
+              }}
+            />
+          </Card>
+          <Card
+            title='Daftar Chickin'
+            className={{
+              wrapper: 'w-full bg-white',
+            }}
+          >
+            <Table<Kandang>
+              emptyContent={
+                <div className='w-full p-5 text-center'>
+                  {projectFlockId && isResponseError(projectFlock) ? (
+                    <span className='text-lg opacity-50'>
+                      {projectFlock.message}
+                    </span>
+                  ) : (
+                    <span className='text-lg opacity-50'>
+                      Pilih project flock terlebih dahulu...
+                    </span>
+                  )}
+                </div>
+              }
+              data={
+                isResponseSuccess(projectFlock)
+                  ? projectFlock.data?.kandangs
+                  : []
+              }
+              columns={[
+                {
+                  header: '#',
+                  cell: (props) =>
+                    tableFilterState.pageSize * (tableFilterState.page - 1) +
+                    props.row.index +
+                    1,
+                },
+                {
+                  accessorFn: () =>
+                    isResponseSuccess(projectFlock)
+                      ? projectFlock.data.area.name
+                      : '',
+                  header: 'Area',
+                },
+                {
+                  accessorFn: () =>
+                    isResponseSuccess(projectFlock)
+                      ? projectFlock.data.location.name
+                      : '',
+                  header: 'Lokasi',
+                },
+                {
+                  accessorKey: 'name',
+                  header: 'Kandang',
+                },
+                {
+                  accessorKey: 'capacity',
+                  header: 'Kapasitas',
+                },
+                {
+                  accessorKey: 'pic.name',
+                  header: 'Penanggung Jawab',
+                },
+                {
+                  header: 'Aksi',
+                  cell: (props) => {
+                    return (
+                      <>
+                        <Button
+                          color='success'
+                          variant='outline'
+                          onClick={() => {
+                            handleChickinClick(props.row.original);
+                          }}
+                          disabled={isLoadingProjectFlockKandang}
+                        >
+                          <Icon
+                            icon='mdi:home-import-outline'
+                            width={24}
+                            height={24}
+                          />
+                          Chickin
+                        </Button>
+                      </>
+                    );
+                  },
+                },
+              ]}
+              page={undefined}
+              className={{
+                containerClassName: cn({
+                  'mb-20':
+                    isResponseSuccess(projectFlock) &&
+                    projectFlock.data?.kandangs?.length === 0,
+                }),
+                tableWrapperClassName: 'overflow-x-auto min-h-full!',
+                tableClassName: 'font-inter w-full table-auto min-h-full!',
+                headerRowClassName: 'border-b border-b-gray-200',
+                headerColumnClassName:
+                  'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+                bodyRowClassName: 'border-b border-b-gray-200',
+                bodyColumnClassName:
+                  'px-6 py-3 last:flex last:flex-row last:justify-end',
+                paginationClassName: 'hidden',
+              }}
+            />
+          </Card>
         </section>
         <Modal ref={chickinModal.ref}>
           <div className='flex flex-row justify-between items-center'>