fix: adjust remaining chicken UI layout

This commit is contained in:
ValdiANS
2026-05-12 12:02:51 +07:00
parent 3c75a7631a
commit d6dd5e6709
2 changed files with 61 additions and 44 deletions
@@ -40,6 +40,9 @@ const TransferToLayingDetailModal = () => {
? transferToLayingResponse.data
: undefined;
const isTransferToLayingApproved =
transferToLaying?.approval.step_number === 2;
const { data: transferToLayingApprovalResponse } = useSWR(
transferToLayingId
? ['approval-transfer-to-laying', transferToLayingId]
@@ -55,9 +58,9 @@ const TransferToLayingDetailModal = () => {
const detailModal = useModal();
const totalEnteredChickenForTransfer =
const maxSourceQuantity =
transferToLaying?.sources.reduce(
(acc, item) => acc + Number(item.qty),
(acc, item) => acc + Number(item.product_warehouse.quantity),
0
) ?? 0;
@@ -67,8 +70,9 @@ const TransferToLayingDetailModal = () => {
0
) ?? 0;
// Sisa transfer = Max available dari kandang asal - Total yang sudah diisi di kandang tujuan
const totalAvailableChickenForTransfer =
totalEnteredChickenForTransfer - totalTransferedChicken;
maxSourceQuantity - totalTransferedChicken;
const closeModalHandler = (shouldPushToRoute: boolean = true) => {
if (shouldPushToRoute) {
@@ -161,11 +165,34 @@ const TransferToLayingDetailModal = () => {
{/* Source Kandang */}
<div className='flex flex-col'>
<span className='w-full py-2 text-xs font-semibold'>
Kandang Asal{' '}
<span className='tooltip tooltip-error' data-tip='required'>
<span className='text-error'> *</span>
<span className='w-fit py-2 text-xs font-semibold flex flex-row items-center gap-3'>
<span className='text-nowrap'>
Kandang Asal{' '}
<span className='tooltip tooltip-error' data-tip='required'>
<span className='text-error'> *</span>
</span>
</span>
{!isTransferToLayingApproved && (
<>
<div className='w-px h-5 bg-base-content/10' />
<StatusBadge
color={
totalAvailableChickenForTransfer < 0
? 'error'
: 'neutral'
}
text={`Sisa ayam: ${formatNumber(
totalAvailableChickenForTransfer,
'en-US'
)} ekor`}
className={{
badge: 'text-nowrap',
}}
/>
</>
)}
</span>
{transferToLaying?.sources.length === 0 && (
@@ -225,21 +252,6 @@ const TransferToLayingDetailModal = () => {
<span className='text-error'> *</span>
</span>
</span>
<div className='w-px h-5 bg-base-content/10' />
<StatusBadge
color={
totalAvailableChickenForTransfer < 0 ? 'error' : 'neutral'
}
text={`Sisa transfer: ${formatNumber(
totalAvailableChickenForTransfer,
'en-US'
)} ekor`}
className={{
badge: 'text-nowrap',
}}
/>
</span>
{transferToLaying?.targets.length === 0 && (
@@ -304,7 +316,7 @@ const TransferToLayingDetailModal = () => {
readOnly
errorMessage={
totalAvailableChickenForTransfer < 0
? `Jumlah transfer melebihi ketersediaan (${formatNumber(totalEnteredChickenForTransfer, 'en-US')} ayam)`
? `Jumlah transfer melebihi ketersediaan (${formatNumber(maxSourceQuantity, 'en-US')} ayam)`
: ''
}
/>
@@ -822,11 +822,33 @@ const TransferToLayingFormModal = () => {
{/* Source Kandang */}
<div className='flex flex-col'>
<span className='w-full py-2 text-xs font-semibold'>
Kandang Asal{' '}
<span className='tooltip tooltip-error' data-tip='required'>
<span className='text-error'> *</span>
<span className='w-fit py-2 text-xs font-semibold flex flex-row items-center gap-3'>
<span className='text-nowrap'>
Kandang Asal{' '}
<span
className='tooltip tooltip-error'
data-tip='required'
>
<span className='text-error'> *</span>
</span>
</span>
<div className='w-px h-5 bg-base-content/10' />
<StatusBadge
color={
totalAvailableChickenForTransfer < 0
? 'error'
: 'neutral'
}
text={`Sisa ayam: ${formatNumber(
totalAvailableChickenForTransfer,
'en-US'
)} ekor`}
className={{
badge: 'text-nowrap',
}}
/>
</span>
{formik.values.flockSourceKandangs.length === 0 && (
@@ -906,23 +928,6 @@ const TransferToLayingFormModal = () => {
<span className='text-error'> *</span>
</span>
</span>
<div className='w-px h-5 bg-base-content/10' />
<StatusBadge
color={
totalAvailableChickenForTransfer < 0
? 'error'
: 'neutral'
}
text={`Sisa transfer: ${formatNumber(
totalAvailableChickenForTransfer,
'en-US'
)} ekor`}
className={{
badge: 'text-nowrap',
}}
/>
</span>
{formik.values.flockDestinationKandangs.length === 0 && (