mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-26 00:05:45 +00:00
feat(FE-279): Add functionality closing project flock
This commit is contained in:
randy-ar
@@ -0,0 +1,297 @@
|
||||
'use client';
|
||||
import Button from '@/components/Button';
|
||||
import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
|
||||
import Table from '@/components/Table';
|
||||
import Badge from '@/components/Badge';
|
||||
import { cn, formatDate, formatNumber, formatTitleCase } from '@/lib/helper';
|
||||
import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
|
||||
import { ProjectFlock } from '@/types/api/production/project-flock';
|
||||
import {
|
||||
ClosingExpense,
|
||||
ProjectFlockKandang,
|
||||
} from '@/types/api/production/project-flock-kandang';
|
||||
import { Purchase } from '@/types/api/purchase/purchase';
|
||||
import { Icon } from '@iconify/react';
|
||||
import useSWR from 'swr';
|
||||
import { ProjectFlockKandangApi } from '@/services/api/production/project-flock-kandang';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import { useModal } from '@/components/Modal';
|
||||
import ConfirmationModal from '@/components/modal/ConfirmationModal';
|
||||
import { useMemo, useState } from 'react';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
const ProjectFlockClosingForm = ({
|
||||
projectFlock,
|
||||
projectFlockKandang,
|
||||
}: {
|
||||
projectFlock: ProjectFlock;
|
||||
projectFlockKandang: ProjectFlockKandang;
|
||||
}) => {
|
||||
const closeModal = useModal();
|
||||
const isCanClose = projectFlock.approval.step_number <= 2;
|
||||
const [isClosingLoading, setIsClosingLoading] = useState(false);
|
||||
|
||||
const { data: closingData, isLoading } = useSWR(
|
||||
`${ProjectFlockKandangApi.basePath}/${projectFlockKandang.id}/closing`,
|
||||
() => ProjectFlockKandangApi.checkClosing(projectFlockKandang.id)
|
||||
);
|
||||
|
||||
const confirmationModalCloseClickHandler = async () => {
|
||||
setIsClosingLoading(true);
|
||||
const deleteProjectFlockRes = await ProjectFlockKandangApi.closing(
|
||||
projectFlock?.id as number,
|
||||
{
|
||||
closed_date: formatDate(new Date(), 'yyyy-MM-dd'),
|
||||
action: isCanClose ? 'close' : 'unclose',
|
||||
}
|
||||
);
|
||||
|
||||
if (isResponseSuccess(deleteProjectFlockRes)) {
|
||||
toast.success(deleteProjectFlockRes?.message as string);
|
||||
}
|
||||
if (isResponseError(deleteProjectFlockRes)) {
|
||||
toast.error(deleteProjectFlockRes?.message as string);
|
||||
}
|
||||
setIsClosingLoading(false);
|
||||
closeModal.closeModal();
|
||||
};
|
||||
|
||||
const errorStock = useMemo(() => {
|
||||
return isResponseSuccess(closingData)
|
||||
? closingData?.data?.stock_remaining.every((stock) => stock.quantity > 0)
|
||||
: false;
|
||||
}, [closingData]);
|
||||
|
||||
const errorExpense = useMemo(() => {
|
||||
return isResponseSuccess(closingData)
|
||||
? closingData?.data?.expenses.every((expense) => expense.step < 5)
|
||||
: false;
|
||||
}, [closingData]);
|
||||
|
||||
const isCanCloseValid = !errorStock && !errorExpense;
|
||||
|
||||
return (
|
||||
<>
|
||||
<DrawerHeader
|
||||
leftIcon='mdi:arrow-left'
|
||||
leftIconHref={`/production/project-flock/detail?projectFlockId=${projectFlock.id}`}
|
||||
subtitle={`Close ${projectFlock.flock_name}`}
|
||||
></DrawerHeader>
|
||||
|
||||
{/* Informasi Kandang */}
|
||||
<div className='divider'></div>
|
||||
<div className='px-4 pb-4 flex flex-col gap-4'>
|
||||
<h2 className='text-2xl font-semibold'>Informasi Kandang</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' />{' '}
|
||||
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(projectFlockKandang.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'>{projectFlock.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'>{projectFlock.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'>{projectFlockKandang.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(
|
||||
projectFlockKandang.chickins?.reduce(
|
||||
(total, chickin) => total + chickin.usage_qty,
|
||||
0
|
||||
) ?? 0
|
||||
)}{' '}
|
||||
Ekor
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Table Biaya */}
|
||||
<div className='divider'></div>
|
||||
<div className='px-4 pb-4'>
|
||||
<h2 className='text-2xl font-semibold'>Biaya</h2>
|
||||
<Table<ClosingExpense>
|
||||
data={
|
||||
isResponseSuccess(closingData) ? closingData.data?.expenses : []
|
||||
}
|
||||
columns={[
|
||||
{
|
||||
header: 'PO Number',
|
||||
accessorKey: 'po_number',
|
||||
},
|
||||
{
|
||||
header: 'Total',
|
||||
accessorKey: 'total',
|
||||
},
|
||||
{
|
||||
header: 'Status',
|
||||
accessorKey: 'status',
|
||||
cell(props) {
|
||||
return (
|
||||
<Badge
|
||||
className={{
|
||||
badge: 'rounded-lg',
|
||||
}}
|
||||
variant='soft'
|
||||
color={
|
||||
props.row.original.step < 5
|
||||
? props.row.original.step == 1
|
||||
? 'neutral'
|
||||
: 'success'
|
||||
: 'error'
|
||||
}
|
||||
>
|
||||
{formatTitleCase(props.row.original.status)}
|
||||
</Badge>
|
||||
);
|
||||
},
|
||||
},
|
||||
]}
|
||||
className={{
|
||||
containerClassName: cn('my-4'),
|
||||
tableWrapperClassName: 'overflow-x-auto min-h-full! max-w-120',
|
||||
tableClassName: 'font-inter w-full table-sm min-h-full!',
|
||||
headerRowClassName: 'border-b border-b-gray-200',
|
||||
headerColumnClassName:
|
||||
'px-3 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-3 py-3 last:flex last:flex-row last:justify-end',
|
||||
paginationClassName: 'hidden',
|
||||
}}
|
||||
/>
|
||||
{errorExpense && (
|
||||
<div className='text-center text-error'>
|
||||
*Pastikan semua biaya sudah selesai sebelum melakukan closing.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Table Persediaan Gudang */}
|
||||
<div className='divider'></div>
|
||||
<div className='px-4 pb-4'>
|
||||
<h2 className='text-2xl font-semibold'>Persediaan Gudang</h2>
|
||||
<Table<ProductWarehouse>
|
||||
data={
|
||||
isResponseSuccess(closingData)
|
||||
? closingData.data?.stock_remaining
|
||||
: []
|
||||
}
|
||||
columns={[
|
||||
{
|
||||
header: 'Product',
|
||||
accessorKey: 'product.name',
|
||||
},
|
||||
{
|
||||
header: 'Kategori',
|
||||
accessorKey: 'product.product_category.name',
|
||||
},
|
||||
{
|
||||
header: 'Quantity',
|
||||
accessorKey: 'quantity',
|
||||
},
|
||||
{
|
||||
header: 'UOM',
|
||||
accessorKey: 'product.uom.name',
|
||||
},
|
||||
]}
|
||||
className={{
|
||||
containerClassName: cn('my-4'),
|
||||
tableWrapperClassName: 'overflow-x-auto min-h-full! max-w-120',
|
||||
tableClassName: 'font-inter w-full table-sm min-h-full!',
|
||||
headerRowClassName: 'border-b border-b-gray-200',
|
||||
headerColumnClassName:
|
||||
'px-3 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-3 py-3 last:flex last:flex-row last:justify-end',
|
||||
paginationClassName: 'hidden',
|
||||
}}
|
||||
/>
|
||||
{errorStock && (
|
||||
<div className='text-center text-error'>
|
||||
*Masih ada sisa stock yang belum dihabiskan.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className='p-4 mt-6'>
|
||||
<Button
|
||||
className='w-full'
|
||||
color='error'
|
||||
isLoading={isLoading}
|
||||
disabled={!isCanCloseValid}
|
||||
onClick={() => closeModal.openModal()}
|
||||
>
|
||||
<Icon icon='mdi:checkbox-marked-circle-outline' />{' '}
|
||||
{isCanClose ? 'Close' : 'Unclose'}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<ConfirmationModal
|
||||
ref={closeModal.ref}
|
||||
type='error'
|
||||
text={`Apakah kamu yakin ingin mengakhiri project ini ? *Pastikan persediaan produk di gudang terkait sudah kosong, dan BOP sudah selesai`}
|
||||
secondaryButton={{
|
||||
text: 'Tidak',
|
||||
}}
|
||||
primaryButton={{
|
||||
text: 'Ya',
|
||||
color: 'error',
|
||||
isLoading: isClosingLoading,
|
||||
onClick: confirmationModalCloseClickHandler,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectFlockClosingForm;
|
||||
Reference in New Issue
Block a user