mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
chore: adjust ProjectFlockClosingForm styling
This commit is contained in:
ValdiANS
+213
-208
@@ -94,230 +94,235 @@ const ProjectFlockClosingForm = ({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<DrawerHeader
|
<section className='w-full h-full sm:w-[446px] overflow-y-auto'>
|
||||||
leftIcon='mdi:arrow-left'
|
<DrawerHeader
|
||||||
leftIconHref={`/production/project-flock/detail?projectFlockId=${projectFlock.id}`}
|
leftIcon='mdi:arrow-left'
|
||||||
subtitle={`Close ${projectFlock.flock_name}`}
|
leftIconHref={`/production/project-flock/detail?projectFlockId=${projectFlock.id}`}
|
||||||
></DrawerHeader>
|
subtitle={`Close ${projectFlock.flock_name}`}
|
||||||
|
></DrawerHeader>
|
||||||
|
|
||||||
{/* Informasi Kandang */}
|
{/* Informasi Kandang */}
|
||||||
<div className='divider'></div>
|
<div className='divider'></div>
|
||||||
<div className='px-4 pb-4 flex flex-col gap-4'>
|
<div className='px-4 pb-4 flex flex-col gap-4'>
|
||||||
<h2 className='text-2xl font-semibold'>Informasi Kandang</h2>
|
<h2 className='text-2xl font-semibold'>Informasi Kandang</h2>
|
||||||
|
|
||||||
{/* Badge Row */}
|
{/* Badge Row */}
|
||||||
<div className='flex flex-row gap-2'>
|
<div className='flex flex-row gap-2'>
|
||||||
<Badge
|
<Badge
|
||||||
variant='soft'
|
variant='soft'
|
||||||
color='success'
|
color='success'
|
||||||
className={{
|
className={{
|
||||||
badge: 'rounded-lg px-2',
|
badge: 'rounded-lg px-2',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Icon icon='mdi:circle' width={12} height={12} color='success' />{' '}
|
<Icon icon='mdi:circle' width={12} height={12} color='success' />{' '}
|
||||||
Aktif
|
Aktif
|
||||||
</Badge>
|
</Badge>
|
||||||
<div className='divider divider-horizontal p-0 m-0'></div>
|
<div className='divider divider-horizontal p-0 m-0'></div>
|
||||||
<Badge
|
<Badge
|
||||||
color='neutral'
|
color='neutral'
|
||||||
variant='soft'
|
variant='soft'
|
||||||
className={{ badge: 'rounded-lg px-2' }}
|
className={{ badge: 'rounded-lg px-2' }}
|
||||||
>
|
>
|
||||||
<Icon icon='mdi:home' width={12} height={12} />
|
<Icon icon='mdi:home' width={12} height={12} />
|
||||||
{` Kapasitas ${formatNumber(projectFlockKandang.kandang?.capacity)} Ekor`}
|
{` Kapasitas ${formatNumber(projectFlockKandang.kandang?.capacity)} Ekor`}
|
||||||
</Badge>
|
</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>
|
</div>
|
||||||
|
|
||||||
{/* Information Grid */}
|
{/* Table Biaya */}
|
||||||
<div className='grid grid-cols-3 gap-4'>
|
<div className='divider'></div>
|
||||||
{/* Area */}
|
<div className='px-4 pb-4'>
|
||||||
<div
|
<h2 className='text-2xl font-semibold'>Biaya</h2>
|
||||||
className='col-span-1 flex flex-row items-center text-gray-400 font-semibold gap-2
|
<Table<ClosingExpense>
|
||||||
relative
|
data={
|
||||||
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'
|
isResponseSuccess(closingData) ? closingData.data?.expenses : []
|
||||||
>
|
}
|
||||||
<Icon width={14} height={14} icon='mdi:circle-slice-8' /> Area
|
columns={[
|
||||||
</div>
|
{
|
||||||
<div className='col-span-2'>{projectFlock.area?.name}</div>
|
header: 'PO Number',
|
||||||
|
accessorKey: 'po_number',
|
||||||
{/* 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.step_name)}
|
|
||||||
</Badge>
|
|
||||||
);
|
|
||||||
},
|
},
|
||||||
},
|
{
|
||||||
]}
|
header: 'Total',
|
||||||
className={{
|
accessorKey: 'total',
|
||||||
containerClassName: cn('my-4'),
|
},
|
||||||
tableWrapperClassName: 'overflow-x-auto min-h-full! max-w-120',
|
{
|
||||||
tableClassName: 'font-inter w-full table-sm min-h-full!',
|
header: 'Status',
|
||||||
headerRowClassName: 'border-b border-b-gray-200',
|
accessorKey: 'status',
|
||||||
headerColumnClassName:
|
cell(props) {
|
||||||
'px-3 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
|
return (
|
||||||
bodyRowClassName: 'border-b border-b-gray-200',
|
<Badge
|
||||||
bodyColumnClassName:
|
className={{
|
||||||
'px-3 py-3 last:flex last:flex-row last:justify-end',
|
badge: 'rounded-lg',
|
||||||
paginationClassName: 'hidden',
|
}}
|
||||||
}}
|
variant='soft'
|
||||||
/>
|
color={
|
||||||
{/* {errorExpense && (
|
props.row.original.step < 5
|
||||||
|
? props.row.original.step == 1
|
||||||
|
? 'neutral'
|
||||||
|
: 'success'
|
||||||
|
: 'error'
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{formatTitleCase(props.row.original.step_name)}
|
||||||
|
</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 text-sm'>
|
<div className='text-center text-error text-sm'>
|
||||||
*Pastikan semua biaya sudah selesai sebelum melakukan closing.
|
*Pastikan semua biaya sudah selesai sebelum melakukan closing.
|
||||||
</div>
|
</div>
|
||||||
)} */}
|
)} */}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Table Persediaan Gudang */}
|
{/* Table Persediaan Gudang */}
|
||||||
<div className='divider'></div>
|
<div className='divider'></div>
|
||||||
<div className='px-4 pb-4'>
|
<div className='px-4 pb-4'>
|
||||||
<h2 className='text-2xl font-semibold'>Persediaan Gudang</h2>
|
<h2 className='text-2xl font-semibold'>Persediaan Gudang</h2>
|
||||||
<Table<StockItem>
|
<Table<StockItem>
|
||||||
data={
|
data={
|
||||||
isResponseSuccess(closingData)
|
isResponseSuccess(closingData)
|
||||||
? closingData.data?.stock_remaining
|
? closingData.data?.stock_remaining
|
||||||
: []
|
: []
|
||||||
}
|
}
|
||||||
columns={[
|
columns={[
|
||||||
{
|
{
|
||||||
header: 'Product',
|
header: 'Product',
|
||||||
accessorKey: 'product_name',
|
accessorKey: 'product_name',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
header: 'Kategori',
|
header: 'Kategori',
|
||||||
accessorKey: 'product_category',
|
accessorKey: 'product_category',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
header: 'Quantity',
|
header: 'Quantity',
|
||||||
accessorKey: 'quantity',
|
accessorKey: 'quantity',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
header: 'UOM',
|
header: 'UOM',
|
||||||
accessorKey: 'uom',
|
accessorKey: 'uom',
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
className={{
|
className={{
|
||||||
containerClassName: cn('my-4'),
|
containerClassName: cn('my-4'),
|
||||||
tableWrapperClassName: 'overflow-x-auto min-h-full! max-w-120',
|
tableWrapperClassName: 'overflow-x-auto min-h-full! max-w-120',
|
||||||
tableClassName: 'font-inter w-full table-sm min-h-full!',
|
tableClassName: 'font-inter w-full table-sm min-h-full!',
|
||||||
headerRowClassName: 'border-b border-b-gray-200',
|
headerRowClassName: 'border-b border-b-gray-200',
|
||||||
headerColumnClassName:
|
headerColumnClassName:
|
||||||
'px-3 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
|
'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',
|
bodyRowClassName: 'border-b border-b-gray-200',
|
||||||
bodyColumnClassName:
|
bodyColumnClassName:
|
||||||
'px-3 py-3 last:flex last:flex-row last:justify-end',
|
'px-3 py-3 last:flex last:flex-row last:justify-end',
|
||||||
paginationClassName: 'hidden',
|
paginationClassName: 'hidden',
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
{/* {errorStock && (
|
{/* {errorStock && (
|
||||||
<div className='text-center text-error text-sm'>
|
<div className='text-center text-error text-sm'>
|
||||||
*Masih ada sisa stock yang belum dihabiskan.
|
*Masih ada sisa stock yang belum dihabiskan.
|
||||||
</div>
|
</div>
|
||||||
)} */}
|
)} */}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='p-4 mt-6'>
|
<div className='p-4 mt-6'>
|
||||||
<RequirePermission permissions='lti.production.project_flock_kandangs.closing'>
|
<RequirePermission permissions='lti.production.project_flock_kandangs.closing'>
|
||||||
<Button
|
<Button
|
||||||
className='w-full'
|
className='w-full'
|
||||||
color='error'
|
color='error'
|
||||||
isLoading={isLoading}
|
isLoading={isLoading}
|
||||||
disabled={!isCanCloseValid}
|
disabled={!isCanCloseValid}
|
||||||
onClick={() => closeModal.openModal()}
|
onClick={() => closeModal.openModal()}
|
||||||
>
|
>
|
||||||
<Icon icon='mdi:checkbox-marked-circle-outline' />{' '}
|
<Icon icon='mdi:checkbox-marked-circle-outline' />{' '}
|
||||||
{isCanClose ? 'Close' : 'Unclose'}
|
{isCanClose ? 'Close' : 'Unclose'}
|
||||||
</Button>
|
</Button>
|
||||||
</RequirePermission>
|
</RequirePermission>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ConfirmationModal
|
<ConfirmationModal
|
||||||
ref={closeModal.ref}
|
ref={closeModal.ref}
|
||||||
type='error'
|
type='error'
|
||||||
text={
|
text={
|
||||||
isCanClose
|
isCanClose
|
||||||
? 'Apakah kamu yakin ingin mengakhiri project ini ? *Pastikan persediaan produk di gudang terkait sudah kosong, dan BOP sudah selesai'
|
? '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'
|
: 'Apakah kamu yakin ingin membuka kembali project ini ? *Project ini akan kembali ke status aktif'
|
||||||
}
|
}
|
||||||
secondaryButton={{
|
secondaryButton={{
|
||||||
text: 'Tidak',
|
text: 'Tidak',
|
||||||
}}
|
}}
|
||||||
primaryButton={{
|
primaryButton={{
|
||||||
text: 'Ya',
|
text: 'Ya',
|
||||||
color: 'error',
|
color: 'error',
|
||||||
isLoading: isClosingLoading,
|
isLoading: isClosingLoading,
|
||||||
onClick: confirmationModalCloseClickHandler,
|
onClick: confirmationModalCloseClickHandler,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
</section>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user