feat(FE): Improve empty state handling and add "Unclose Flock"

functionality
This commit is contained in:
rstubryan
2026-02-18 13:49:02 +07:00
parent d4c6a05c0c
commit ed576fc8eb
2 changed files with 36 additions and 14 deletions
+16 -6
View File
@@ -85,8 +85,8 @@ const DUMMY_SKELETON_DATA = Array.from({ length: 10 }, (_, index) => ({
}));
const emptyContentDefaultValue = (
<div className='w-full p-5 text-center'>
<span className='text-lg opacity-50'>
<div className='w-full text-center py-4'>
<span className='text-sm opacity-50'>
Tidak ada data yang dapat ditampilkan...
</span>
</div>
@@ -452,6 +452,20 @@ const Table = <TData extends object>({
</Fragment>
);
})}
{(data.length === 0 || table.getRowModel().rows.length === 0) &&
!isLoading && (
<tr>
<td
colSpan={
table.getAllLeafColumns().length + (withCheckbox ? 1 : 0)
}
className='p-0'
>
{emptyContent}
</td>
</tr>
)}
</tbody>
<tfoot
className={cn(
@@ -489,10 +503,6 @@ const Table = <TData extends object>({
</table>
</div>
{(data.length === 0 || table.getRowModel().rows.length === 0) &&
!isLoading &&
emptyContent}
{data.length > 0 &&
table.getRowModel().rows.length > 0 &&
!isLoading &&
@@ -70,6 +70,10 @@ const ProjectFlockClosingForm = ({
)
);
const isKandangClosed = useMemo(() => {
return projectFlockKandang.kandang?.status === 'NON_ACTIVE';
}, [projectFlockKandang]);
const isCanClose = useMemo(() => {
return isResponseSuccess(projectFlockKandangApprovals)
? projectFlockKandangApprovals?.data?.[0]?.step_number <= 2
@@ -81,8 +85,10 @@ const ProjectFlockClosingForm = ({
const deleteProjectFlockRes = await ProjectFlockKandangApi.closing(
projectFlockKandang?.id as number,
{
closed_date: isCanClose ? formatDate(new Date(), 'YYYY-MM-DD') : '',
action: isCanClose ? 'close' : 'unclose',
closed_date: !isKandangClosed
? formatDate(new Date(), 'YYYY-MM-DD')
: '',
action: !isKandangClosed ? 'close' : 'unclose',
}
);
@@ -121,7 +127,7 @@ const ProjectFlockClosingForm = ({
leftIcon='heroicons:chevron-left'
leftIconHref={`/production/project-flock/detail?projectFlockId=${projectFlock.id}`}
leftIconClassName='hover:text-gray-400'
subtitle='Close Flock'
subtitle={isKandangClosed ? 'Unclose Flock' : 'Close Flock'}
className='sticky top-0 z-10 bg-base-100'
/>
@@ -134,8 +140,8 @@ const ProjectFlockClosingForm = ({
{/* Badge Row */}
<div className='flex flex-row gap-2'>
<StatusBadge
color='success'
text='Aktif'
color={isKandangClosed ? 'error' : 'success'}
text={isKandangClosed ? 'Non-Aktif' : 'Aktif'}
className={{ badge: 'w-fit text-nowrap' }}
/>
<div className='divider divider-horizontal p-0 m-0'></div>
@@ -332,8 +338,14 @@ const ProjectFlockClosingForm = ({
disabled={!isCanCloseValid}
onClick={() => closeModal.openModal()}
>
<Icon icon='mdi:checkbox-marked-circle-outline' />{' '}
{isCanClose ? 'Close' : 'Unclose'}
<Icon
icon={
isKandangClosed
? 'mdi:lock-open-variant'
: 'mdi:checkbox-marked-circle-outline'
}
/>{' '}
{isKandangClosed ? 'Unclose' : 'Close'}
</Button>
</RequirePermission>
</div>
@@ -342,7 +354,7 @@ const ProjectFlockClosingForm = ({
ref={closeModal.ref}
type='error'
text={
isCanClose
!isKandangClosed
? 'Apakah kamu yakin ingin mengakhiri project ini ? *Pastikan persediaan produk di gudang terkait sudah kosong, dan BOP sudah selesai'
: 'Apakah kamu yakin ingin membuka kembali project ini ? *Project ini akan kembali ke status aktif'
}