mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-24 15:25:46 +00:00
refactor(FE): refactor chickin views and adjust approval logic in project flocks
This commit is contained in:
randy-ar
@@ -14,6 +14,9 @@ import ApprovalSteps, {
|
||||
import { PROJECT_FLOCK_KANDANG_APPROVAL_LINE } from '@/config/approval-line';
|
||||
import ChickinFormView from '@/components/pages/production/chickin/form/tabs/ChickinFormView';
|
||||
import ChickinLogsView from '@/components/pages/production/chickin/form/tabs/ChickLogsView';
|
||||
import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
|
||||
import { Icon } from '@iconify/react';
|
||||
import Badge from '@/components/Badge';
|
||||
const ChickinFormKandang = ({
|
||||
formType = 'add',
|
||||
initialValues,
|
||||
@@ -24,6 +27,7 @@ const ChickinFormKandang = ({
|
||||
afterSubmit?: () => void;
|
||||
}) => {
|
||||
const [activeTabId, setActiveTabId] = useState<string>('formChickIn');
|
||||
const [openChickin, setOpenChickin] = useState<boolean>(false);
|
||||
|
||||
const {
|
||||
approvals,
|
||||
@@ -43,102 +47,142 @@ const ChickinFormKandang = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='flex flex-col gap-4'>
|
||||
<FormHeader
|
||||
title={`Chick In ${initialValues.kandang?.name ?? 'Kandang'}`}
|
||||
backUrl={`/production/project-flock/detail?projectFlockId=${initialValues?.project_flock?.id}`}
|
||||
<>
|
||||
<DrawerHeader
|
||||
subtitle={`Chick In ${initialValues.kandang?.name ?? 'Kandang'}`}
|
||||
leftIcon='mdi:arrow-left'
|
||||
leftIconHref={`/production/project-flock/detail?projectFlockId=${initialValues?.project_flock?.id}`}
|
||||
/>
|
||||
|
||||
{approvals && !approvalsLoading && (
|
||||
<ApprovalSteps approvals={approvals} />
|
||||
)}
|
||||
{/* Informasi Kandang */}
|
||||
<div className='divider'></div>
|
||||
<div className='px-4 pb-4 flex flex-col gap-4'>
|
||||
<h2 className='text-xl font-semibold'>Informasi Kandang</h2>
|
||||
|
||||
<Card
|
||||
title='Informasi Kandang'
|
||||
className={{
|
||||
wrapper: 'w-full bg-white mt-4',
|
||||
}}
|
||||
>
|
||||
<Table<Kandang>
|
||||
emptyContent={
|
||||
<div className='w-full p-5 text-center'>
|
||||
<span className='text-lg opacity-50'>
|
||||
Informasi Kandang belum tersedia...
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
data={[initialValues?.kandang]}
|
||||
columns={[
|
||||
{
|
||||
header: 'Area',
|
||||
accessorFn: () => initialValues?.project_flock?.area.name || '-',
|
||||
},
|
||||
{
|
||||
header: 'Lokasi',
|
||||
accessorFn: () =>
|
||||
initialValues?.project_flock?.location.name || '-',
|
||||
},
|
||||
{
|
||||
header: 'Flock',
|
||||
accessorFn: () => initialValues?.project_flock?.flock_name || '-',
|
||||
},
|
||||
{
|
||||
header: 'Kandang',
|
||||
accessorFn: (row) => row?.name || '-',
|
||||
},
|
||||
{
|
||||
header: 'Kapasitas',
|
||||
accessorFn: (row) =>
|
||||
(row?.capacity && formatNumber(row?.capacity)) || '-',
|
||||
},
|
||||
{
|
||||
header: 'Penanggung Jawab',
|
||||
accessorFn: (row) => row?.pic?.name || '-',
|
||||
},
|
||||
]}
|
||||
className={{
|
||||
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',
|
||||
}}
|
||||
{approvals && !approvalsLoading && (
|
||||
<div className='mb-3 text-sm'>
|
||||
<ApprovalSteps approvals={approvals} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Badge Row */}
|
||||
<div className='flex flex-row gap-2'>
|
||||
<Badge
|
||||
variant='soft'
|
||||
color='success'
|
||||
className={{
|
||||
badge: 'rounded-lg px-2',
|
||||
}}
|
||||
>
|
||||
<Icon icon='mdi:circle' width={12} height={12} color='success' />{' '}
|
||||
Aktif
|
||||
</Badge>
|
||||
<div className='divider divider-horizontal p-0 m-0'></div>
|
||||
<Badge
|
||||
color='neutral'
|
||||
variant='soft'
|
||||
className={{ badge: 'rounded-lg px-2' }}
|
||||
>
|
||||
<Icon icon='mdi:home' width={12} height={12} />
|
||||
{` Kapasitas ${formatNumber(initialValues.kandang.capacity)} Ekor`}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Information Grid */}
|
||||
<div className='grid grid-cols-3 gap-4'>
|
||||
{/* Area */}
|
||||
<div
|
||||
className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2
|
||||
relative
|
||||
before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
|
||||
>
|
||||
<Icon width={14} height={14} icon='mdi:circle-slice-8' /> Area
|
||||
</div>
|
||||
<div className='col-span-2'>
|
||||
{initialValues.project_flock.area.name}
|
||||
</div>
|
||||
|
||||
{/* Lokasi */}
|
||||
<div
|
||||
className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2
|
||||
relative
|
||||
before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
|
||||
>
|
||||
<Icon width={14} height={14} icon='mdi:circle-slice-8' /> Lokasi
|
||||
</div>
|
||||
<div className='col-span-2'>
|
||||
{initialValues.project_flock?.location.name}
|
||||
</div>
|
||||
|
||||
{/* Kandang */}
|
||||
<div
|
||||
className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2
|
||||
relative
|
||||
before:content-[""] before:absolute before:left-[5px] before:top-[90%] before:bottom-[-100%] before:w-[1px] before:border-1 before:border-dashed before:border-gray-400'
|
||||
>
|
||||
<Icon width={14} height={14} icon='mdi:circle-slice-8' /> Kandang
|
||||
</div>
|
||||
<div className='col-span-2'>{initialValues.kandang.name}</div>
|
||||
|
||||
{/* Jumlah DOC */}
|
||||
<div className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2'>
|
||||
<Icon width={14} height={14} icon='mdi:circle-slice-8' /> Jumlah DOC
|
||||
</div>
|
||||
<div className='col-span-2'>
|
||||
{formatNumber(
|
||||
initialValues.chickins?.reduce(
|
||||
(total, chickin) => total + chickin.usage_qty,
|
||||
0
|
||||
) ?? 0
|
||||
)}{' '}
|
||||
Ekor
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='divider'></div>
|
||||
<div className='px-4 pb-4 flex flex-col gap-4'>
|
||||
<h2 className='text-xl font-semibold'>Informasi Chick In</h2>
|
||||
{/* Badge Row */}
|
||||
<div className='flex flex-row gap-2'>
|
||||
<Badge
|
||||
variant='soft'
|
||||
color={'success'}
|
||||
className={{
|
||||
badge: 'rounded-lg px-2',
|
||||
}}
|
||||
>
|
||||
<Icon icon='mdi:circle' width={12} height={12} color={'success'} />{' '}
|
||||
Perlu Chick In ({initialValues.available_qtys?.length ?? 0})
|
||||
</Badge>
|
||||
<div className='divider divider-horizontal p-0 m-0'></div>
|
||||
<Badge
|
||||
color='neutral'
|
||||
variant='soft'
|
||||
className={{ badge: 'rounded-lg px-2 cursor-pointer' }}
|
||||
onClick={() => setOpenChickin(!openChickin)}
|
||||
>
|
||||
{`Riwayat Chick In ${formatNumber(initialValues.chickins?.length ?? 0)}`}
|
||||
<Icon
|
||||
icon={`mdi:${openChickin ? 'eye' : 'eye-off'}`}
|
||||
width={12}
|
||||
height={12}
|
||||
/>
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
{openChickin && (
|
||||
<ChickinLogsView
|
||||
initialValues={initialValues}
|
||||
afterSubmit={afterSubmitFormChickin}
|
||||
/>
|
||||
</Card>
|
||||
<Tabs
|
||||
className='bg-white p-2'
|
||||
onTabChange={setActiveTabId}
|
||||
activeTabId={activeTabId}
|
||||
tabs={[
|
||||
{
|
||||
id: 'formChickIn',
|
||||
label: 'Tambah Chick In',
|
||||
content: (
|
||||
<ChickinFormView
|
||||
initialValues={initialValues}
|
||||
formType={formType}
|
||||
afterSubmit={afterSubmitFormChickin}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
content: (
|
||||
<ChickinLogsView
|
||||
initialValues={initialValues}
|
||||
afterSubmit={afterSubmitFormChickin}
|
||||
/>
|
||||
),
|
||||
id: 'logsChickIn',
|
||||
label: 'Riwayat Chick In',
|
||||
},
|
||||
]}
|
||||
variant='lifted'
|
||||
)}
|
||||
<ChickinFormView
|
||||
initialValues={initialValues}
|
||||
formType={formType}
|
||||
afterSubmit={afterSubmitFormChickin}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -2,17 +2,12 @@ import Alert from '@/components/Alert';
|
||||
import Button from '@/components/Button';
|
||||
import Card from '@/components/Card';
|
||||
import { useModal } from '@/components/Modal';
|
||||
import ConfirmationModal from '@/components/modal/ConfirmationModal';
|
||||
import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
|
||||
import PillBadge from '@/components/PillBadge';
|
||||
import Table from '@/components/Table';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import { cn, formatDate, formatNumber } from '@/lib/helper';
|
||||
import { formatDate, formatNumber } from '@/lib/helper';
|
||||
import { ChickinApi } from '@/services/api/production/chickin';
|
||||
import {
|
||||
Chickin,
|
||||
ProjectFlockKandang,
|
||||
} from '@/types/api/production/project-flock-kandang';
|
||||
import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
|
||||
import { Icon } from '@iconify/react';
|
||||
import { useState } from 'react';
|
||||
import toast from 'react-hot-toast';
|
||||
@@ -54,105 +49,120 @@ const ChickinLogsView = ({
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
title='Riwayat Chick In'
|
||||
className={{
|
||||
wrapper: 'w-full bg-white',
|
||||
}}
|
||||
>
|
||||
<div className='flex flex-row justify-start gap-3 mt-3'>
|
||||
{initialValues?.approval?.step_number == 1 && (
|
||||
<Button
|
||||
color='success'
|
||||
variant='outline'
|
||||
onClick={handleClickApprove}
|
||||
>
|
||||
<Icon width={24} height={24} icon='material-symbols:check' />
|
||||
Approve
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<Table<Chickin>
|
||||
data={initialValues?.chickins || []}
|
||||
columns={[
|
||||
{
|
||||
header: '#',
|
||||
cell: (props) => props.row.index + 1,
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.chick_in_date,
|
||||
header: 'Tanggal Chick In',
|
||||
cell: (props) => {
|
||||
return formatDate(props.getValue() as string, 'DD MMM YYYY');
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.product_warehouse?.warehouse?.name,
|
||||
header: 'Kandang',
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.product_warehouse?.product?.name,
|
||||
header: 'Produk',
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.usage_qty ?? row.pending_usage_qty,
|
||||
header: 'Jumlah Chick In',
|
||||
cell: (props) => {
|
||||
if (props.row.original.usage_qty != 0) {
|
||||
return formatNumber(props.row.original.usage_qty);
|
||||
} else if (props.row.original.pending_usage_qty != 0) {
|
||||
return formatNumber(props.row.original.pending_usage_qty);
|
||||
} else {
|
||||
return '-';
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.pending_usage_qty,
|
||||
header: 'Status',
|
||||
cell: (props) => {
|
||||
return (
|
||||
<PillBadge
|
||||
content={
|
||||
props.row.original.usage_qty !== 0
|
||||
? 'Disetujui'
|
||||
: props.row.original.pending_usage_qty !== 0
|
||||
? 'Pending'
|
||||
: '-'
|
||||
}
|
||||
color={
|
||||
props.row.original.usage_qty !== 0
|
||||
? 'green'
|
||||
: props.row.original.pending_usage_qty !== 0
|
||||
? 'yellow'
|
||||
: 'gray'
|
||||
}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
]}
|
||||
className={{
|
||||
containerClassName: cn({
|
||||
'mb-20': initialValues?.chickins?.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',
|
||||
}}
|
||||
/>
|
||||
<div className='px-4 pb-4 flex flex-col gap-4'>
|
||||
{/* Card List Chickin Logs */}
|
||||
{(initialValues?.chickins || []).length === 0 ? (
|
||||
<div className='w-full p-8 text-center'>
|
||||
<span className='text-lg opacity-50'>
|
||||
Belum ada riwayat Chick In...
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
(initialValues?.chickins || []).map((chickin, index) => {
|
||||
const isApproved = chickin.usage_qty !== 0;
|
||||
const isPending = chickin.pending_usage_qty !== 0;
|
||||
const quantity = isApproved
|
||||
? chickin.usage_qty
|
||||
: isPending
|
||||
? chickin.pending_usage_qty
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={chickin.id || index}
|
||||
variant='bordered'
|
||||
className={{
|
||||
wrapper: 'w-full',
|
||||
body: 'p-3',
|
||||
}}
|
||||
>
|
||||
<div className='flex flex-col gap-4'>
|
||||
{/* Header with Status Badge */}
|
||||
<div className='flex flex-row justify-between items-center'>
|
||||
<div className='text-lg font-semibold'>
|
||||
Chick In #{index + 1}
|
||||
</div>
|
||||
<PillBadge
|
||||
content={
|
||||
isApproved ? 'Disetujui' : isPending ? 'Pending' : '-'
|
||||
}
|
||||
color={
|
||||
isApproved ? 'green' : isPending ? 'yellow' : 'gray'
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Tanggal Chick In */}
|
||||
<div className='flex flex-row justify-between items-center'>
|
||||
<div className='flex flex-row gap-2 items-center text-gray-400'>
|
||||
<Icon icon={'mdi:calendar'} width={14} height={14} />{' '}
|
||||
<span>Tanggal Chick In</span>
|
||||
</div>
|
||||
<div className='text-end text-gray-500'>
|
||||
{formatDate(chickin.chick_in_date, 'DD MMM YYYY')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Kandang */}
|
||||
<div className='flex flex-row justify-between items-center'>
|
||||
<div className='flex flex-row gap-2 items-center text-gray-400'>
|
||||
<Icon icon={'mdi:home'} width={14} height={14} />{' '}
|
||||
<span>Kandang</span>
|
||||
</div>
|
||||
<div className='text-end text-gray-500'>
|
||||
{chickin.product_warehouse?.warehouse?.name || '-'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Produk */}
|
||||
<div className='flex flex-row justify-between items-center'>
|
||||
<div className='flex flex-row gap-2 items-center text-gray-400'>
|
||||
<Icon
|
||||
icon={'mdi:package-variant'}
|
||||
width={14}
|
||||
height={14}
|
||||
/>{' '}
|
||||
<span>Produk</span>
|
||||
</div>
|
||||
<div className='text-end text-gray-500'>
|
||||
{chickin.product_warehouse?.product?.name || '-'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Jumlah Chick In */}
|
||||
<div className='flex flex-row justify-between items-center'>
|
||||
<div className='flex flex-row gap-2 items-center text-gray-400'>
|
||||
<Icon icon={'mdi:counter'} width={14} height={14} />{' '}
|
||||
<span>Jumlah Chick In</span>
|
||||
</div>
|
||||
<div className='text-end text-gray-500 font-semibold'>
|
||||
{quantity > 0 ? `${formatNumber(quantity)} Ekor` : '-'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
})
|
||||
)}
|
||||
|
||||
{initialValues?.approval?.step_number == 1 && (
|
||||
<Button
|
||||
color='success'
|
||||
onClick={handleClickApprove}
|
||||
className='w-full'
|
||||
>
|
||||
<Icon width={24} height={24} icon='material-symbols:check' />
|
||||
Approve Semua Chick In
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{chickinErrorMessage && (
|
||||
<div className='w-full' onClick={() => setChickinErrorMessage('')}>
|
||||
<Alert color='error'>{chickinErrorMessage}</Alert>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<ConfirmationModalWithNotes
|
||||
ref={confirmModal.ref}
|
||||
type='success'
|
||||
|
||||
@@ -20,6 +20,7 @@ import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandan
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Alert from '@/components/Alert';
|
||||
import { formatNumber } from '@/lib/helper';
|
||||
import { Icon } from '@iconify/react';
|
||||
|
||||
const ChickinFormView = ({
|
||||
initialValues,
|
||||
@@ -118,106 +119,142 @@ const ChickinFormView = ({
|
||||
|
||||
return (
|
||||
<form
|
||||
className='flex flex-col gap-4'
|
||||
className='flex flex-col gap-4 p-4'
|
||||
onReset={() => {
|
||||
handleReset();
|
||||
}}
|
||||
onSubmit={formik.handleSubmit}
|
||||
>
|
||||
<Card
|
||||
title='Informasi Chick In DOC'
|
||||
className={{
|
||||
wrapper: 'w-full bg-white',
|
||||
}}
|
||||
>
|
||||
<Table<ChickinRequestFormValues>
|
||||
data={formik.values.chickin_requests || []}
|
||||
columns={[
|
||||
{
|
||||
accessorFn: (row) => row.chick_in_date,
|
||||
header: 'Tanggal Chick In',
|
||||
cell(props) {
|
||||
return (
|
||||
<DateInput
|
||||
className={{
|
||||
wrapper: 'w-fit',
|
||||
inputWrapper: 'bg-white',
|
||||
}}
|
||||
name={`chickin_requests[${props.row.index}].chick_in_date`}
|
||||
value={
|
||||
formik.values.chickin_requests[props.row.index]
|
||||
?.chick_in_date as string
|
||||
}
|
||||
onChange={formik.handleChange}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.product_warehouse_id,
|
||||
header: 'Produk',
|
||||
cell(props) {
|
||||
const availableQty = initialValues?.available_qtys?.find(
|
||||
(availableQty) =>
|
||||
availableQty.product_warehouse.id ===
|
||||
props.row.original.product_warehouse_id
|
||||
);
|
||||
return (
|
||||
<div>{availableQty?.product_warehouse?.product?.name}</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.product_warehouse_id,
|
||||
header: 'Jumlah (ekor)',
|
||||
cell(props) {
|
||||
const availableQty = initialValues?.available_qtys?.find(
|
||||
(availableQty) =>
|
||||
availableQty.product_warehouse.id ===
|
||||
props.row.original.product_warehouse_id
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
{availableQty?.available_qty
|
||||
? formatNumber(availableQty?.available_qty)
|
||||
: '-'}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
]}
|
||||
className={{
|
||||
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-2 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-2 py-2 last:flex last:flex-row last:justify-end',
|
||||
paginationClassName: 'hidden',
|
||||
}}
|
||||
emptyContent={
|
||||
<div className='w-full p-5 text-center'>
|
||||
<span className='text-lg opacity-50'>
|
||||
Isi persediaan DOC untuk kandang belum tersedia...
|
||||
</span>
|
||||
{(formik.values.chickin_requests || []).map((chickinRequest, index) => {
|
||||
const availableQty = initialValues?.available_qtys?.find(
|
||||
(availableQty) =>
|
||||
availableQty.product_warehouse.id ===
|
||||
chickinRequest.product_warehouse_id
|
||||
);
|
||||
return (
|
||||
<Card
|
||||
key={index}
|
||||
// title={`${formatNumber(availableQty?.available_qty ?? 0)} Ekor - ${availableQty?.product_warehouse?.product?.name}`}
|
||||
variant='bordered'
|
||||
size='sm'
|
||||
className={{
|
||||
wrapper: 'w-full',
|
||||
body: 'p-3',
|
||||
}}
|
||||
>
|
||||
<div className='flex flex-row justify-between items-center'>
|
||||
<div className='text-lg font-semibold'>
|
||||
{formatNumber(availableQty?.available_qty ?? 0)} Ekor -{' '}
|
||||
{availableQty?.product_warehouse?.product?.name}
|
||||
</div>
|
||||
{chickinRequest.chick_in_date && (
|
||||
<Icon
|
||||
icon='mdi:check-circle-outline'
|
||||
color='success'
|
||||
className='text-success'
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</Card>
|
||||
<div className='flex flex-row justify-center gap-3'>
|
||||
<Button type='reset' color='warning' disabled={formik.isSubmitting}>
|
||||
Reset
|
||||
</Button>
|
||||
<DateInput
|
||||
className={{
|
||||
wrapper: 'w-full',
|
||||
inputWrapper: 'bg-white',
|
||||
}}
|
||||
label='Tanggal Chick In'
|
||||
name={`chickin_requests[${index}].chick_in_date`}
|
||||
value={chickinRequest.chick_in_date}
|
||||
onChange={formik.handleChange}
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
{/* <Table<ChickinRequestFormValues>
|
||||
data={formik.values.chickin_requests || []}
|
||||
columns={[
|
||||
{
|
||||
accessorFn: (row) => row.chick_in_date,
|
||||
header: 'Tanggal Chick In',
|
||||
cell(props) {
|
||||
return (
|
||||
<DateInput
|
||||
className={{
|
||||
wrapper: 'w-fit',
|
||||
inputWrapper: 'bg-white',
|
||||
}}
|
||||
name={`chickin_requests[${props.row.index}].chick_in_date`}
|
||||
value={
|
||||
formik.values.chickin_requests[props.row.index]
|
||||
?.chick_in_date as string
|
||||
}
|
||||
onChange={formik.handleChange}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.product_warehouse_id,
|
||||
header: 'Produk',
|
||||
cell(props) {
|
||||
const availableQty = initialValues?.available_qtys?.find(
|
||||
(availableQty) =>
|
||||
availableQty.product_warehouse.id ===
|
||||
props.row.original.product_warehouse_id
|
||||
);
|
||||
return (
|
||||
<div>{availableQty?.product_warehouse?.product?.name}</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.product_warehouse_id,
|
||||
header: 'Jumlah (ekor)',
|
||||
cell(props) {
|
||||
const availableQty = initialValues?.available_qtys?.find(
|
||||
(availableQty) =>
|
||||
availableQty.product_warehouse.id ===
|
||||
props.row.original.product_warehouse_id
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
{availableQty?.available_qty
|
||||
? formatNumber(availableQty?.available_qty)
|
||||
: '-'}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
]}
|
||||
className={{
|
||||
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-2 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-2 py-2 last:flex last:flex-row last:justify-end',
|
||||
paginationClassName: 'hidden',
|
||||
}}
|
||||
emptyContent={
|
||||
<div className='w-full p-5 text-center'>
|
||||
<span className='text-lg opacity-50'>
|
||||
Isi persediaan DOC untuk kandang belum tersedia...
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
/> */}
|
||||
{formik.values.chickin_requests?.length > 0 && (
|
||||
<Button
|
||||
type='submit'
|
||||
color='primary'
|
||||
disabled={!formik.isValid || formik.isSubmitting}
|
||||
>
|
||||
Submit
|
||||
<Icon icon='mdi:checkbox-marked-outline' width={24} height={24} />
|
||||
Chick In
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
{chickinErrorMessage && (
|
||||
<div className='w-full' onClick={() => setChickinErrorMessage('')}>
|
||||
<Alert color='error'>{chickinErrorMessage}</Alert>
|
||||
|
||||
Reference in New Issue
Block a user