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 (
|
||||
<>
|
||||
<DrawerHeader
|
||||
leftIcon='mdi:arrow-left'
|
||||
leftIconHref={`/production/project-flock/detail?projectFlockId=${projectFlock.id}`}
|
||||
subtitle={`Close ${projectFlock.flock_name}`}
|
||||
></DrawerHeader>
|
||||
<section className='w-full h-full sm:w-[446px] overflow-y-auto'>
|
||||
<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>
|
||||
{/* 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>
|
||||
{/* 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>
|
||||
|
||||
{/* 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.step_name)}
|
||||
</Badge>
|
||||
);
|
||||
{/* 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',
|
||||
},
|
||||
},
|
||||
]}
|
||||
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 && (
|
||||
{
|
||||
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>
|
||||
);
|
||||
},
|
||||
},
|
||||
]}
|
||||
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'>
|
||||
*Pastikan semua biaya sudah selesai sebelum melakukan closing.
|
||||
</div>
|
||||
)} */}
|
||||
</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<StockItem>
|
||||
data={
|
||||
isResponseSuccess(closingData)
|
||||
? closingData.data?.stock_remaining
|
||||
: []
|
||||
}
|
||||
columns={[
|
||||
{
|
||||
header: 'Product',
|
||||
accessorKey: 'product_name',
|
||||
},
|
||||
{
|
||||
header: 'Kategori',
|
||||
accessorKey: 'product_category',
|
||||
},
|
||||
{
|
||||
header: 'Quantity',
|
||||
accessorKey: 'quantity',
|
||||
},
|
||||
{
|
||||
header: 'UOM',
|
||||
accessorKey: 'uom',
|
||||
},
|
||||
]}
|
||||
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 && (
|
||||
{/* Table Persediaan Gudang */}
|
||||
<div className='divider'></div>
|
||||
<div className='px-4 pb-4'>
|
||||
<h2 className='text-2xl font-semibold'>Persediaan Gudang</h2>
|
||||
<Table<StockItem>
|
||||
data={
|
||||
isResponseSuccess(closingData)
|
||||
? closingData.data?.stock_remaining
|
||||
: []
|
||||
}
|
||||
columns={[
|
||||
{
|
||||
header: 'Product',
|
||||
accessorKey: 'product_name',
|
||||
},
|
||||
{
|
||||
header: 'Kategori',
|
||||
accessorKey: 'product_category',
|
||||
},
|
||||
{
|
||||
header: 'Quantity',
|
||||
accessorKey: 'quantity',
|
||||
},
|
||||
{
|
||||
header: 'UOM',
|
||||
accessorKey: 'uom',
|
||||
},
|
||||
]}
|
||||
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 text-sm'>
|
||||
*Masih ada sisa stock yang belum dihabiskan.
|
||||
</div>
|
||||
)} */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='p-4 mt-6'>
|
||||
<RequirePermission permissions='lti.production.project_flock_kandangs.closing'>
|
||||
<Button
|
||||
className='w-full'
|
||||
color='error'
|
||||
isLoading={isLoading}
|
||||
disabled={!isCanCloseValid}
|
||||
onClick={() => closeModal.openModal()}
|
||||
>
|
||||
<Icon icon='mdi:checkbox-marked-circle-outline' />{' '}
|
||||
{isCanClose ? 'Close' : 'Unclose'}
|
||||
</Button>
|
||||
</RequirePermission>
|
||||
</div>
|
||||
<div className='p-4 mt-6'>
|
||||
<RequirePermission permissions='lti.production.project_flock_kandangs.closing'>
|
||||
<Button
|
||||
className='w-full'
|
||||
color='error'
|
||||
isLoading={isLoading}
|
||||
disabled={!isCanCloseValid}
|
||||
onClick={() => closeModal.openModal()}
|
||||
>
|
||||
<Icon icon='mdi:checkbox-marked-circle-outline' />{' '}
|
||||
{isCanClose ? 'Close' : 'Unclose'}
|
||||
</Button>
|
||||
</RequirePermission>
|
||||
</div>
|
||||
|
||||
<ConfirmationModal
|
||||
ref={closeModal.ref}
|
||||
type='error'
|
||||
text={
|
||||
isCanClose
|
||||
? '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'
|
||||
}
|
||||
secondaryButton={{
|
||||
text: 'Tidak',
|
||||
}}
|
||||
primaryButton={{
|
||||
text: 'Ya',
|
||||
color: 'error',
|
||||
isLoading: isClosingLoading,
|
||||
onClick: confirmationModalCloseClickHandler,
|
||||
}}
|
||||
/>
|
||||
<ConfirmationModal
|
||||
ref={closeModal.ref}
|
||||
type='error'
|
||||
text={
|
||||
isCanClose
|
||||
? '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'
|
||||
}
|
||||
secondaryButton={{
|
||||
text: 'Tidak',
|
||||
}}
|
||||
primaryButton={{
|
||||
text: 'Ya',
|
||||
color: 'error',
|
||||
isLoading: isClosingLoading,
|
||||
onClick: confirmationModalCloseClickHandler,
|
||||
}}
|
||||
/>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user