mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
Merge branch 'development' into fix/project-flock
This commit is contained in:
ValdiANS
@@ -28,6 +28,7 @@ const StatusBadge = ({
|
||||
'bg-error/20': color === 'error',
|
||||
'bg-primary/20': color === 'info',
|
||||
'bg-[#FF9A20]/12': color === 'warning',
|
||||
'bg-[#1166EF]/12': color === 'primary',
|
||||
},
|
||||
className?.badge
|
||||
),
|
||||
@@ -45,6 +46,7 @@ const StatusBadge = ({
|
||||
'text-error': color === 'error',
|
||||
'text-primary': color === 'info',
|
||||
'text-[#FF9A20]': color === 'warning',
|
||||
'text-[#1166EF]': color === 'primary',
|
||||
})}
|
||||
>
|
||||
<circle r='6' cx='6' cy='6' fill='currentColor' />
|
||||
|
||||
@@ -122,10 +122,18 @@ const ConfirmationModal = ({
|
||||
closeOnBackdrop={closeOnBackdrop}
|
||||
className={{
|
||||
...className,
|
||||
modalBox: cn('rounded-xl p-4', className?.modalBox),
|
||||
modalBox: cn(
|
||||
'rounded-xl p-4 flex flex-col gap-4 max-h-[90vh]',
|
||||
className?.modalBox
|
||||
),
|
||||
}}
|
||||
>
|
||||
<div className='w-full flex flex-col gap-4'>
|
||||
<div
|
||||
className={cn(
|
||||
'flex flex-col gap-4',
|
||||
children && 'sticky top-0 bg-inherit z-10'
|
||||
)}
|
||||
>
|
||||
{iconPosition === 'center' ? (
|
||||
<>
|
||||
<div className='w-fit mx-auto'>
|
||||
@@ -164,71 +172,74 @@ const ConfirmationModal = ({
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{children && <div className='w-full'>{children}</div>}
|
||||
{children && (
|
||||
<div className='w-full flex-1 overflow-y-auto'>{children}</div>
|
||||
)}
|
||||
|
||||
{(secondaryButton || primaryButton) && (
|
||||
<div
|
||||
className={cn('w-full grid gap-3', {
|
||||
{(secondaryButton || primaryButton) && (
|
||||
<div
|
||||
className={cn(
|
||||
'w-full grid gap-3',
|
||||
children && 'sticky bottom-0 bg-inherit z-10',
|
||||
{
|
||||
'grid-cols-2': secondaryButton && primaryButton,
|
||||
'grid-cols-1':
|
||||
(secondaryButton && !primaryButton) ||
|
||||
(!secondaryButton && primaryButton),
|
||||
})}
|
||||
>
|
||||
{secondaryButton && secondaryButton.text && (
|
||||
<Button
|
||||
{...secondaryButton}
|
||||
variant='outline'
|
||||
color={secondaryButton?.color}
|
||||
isLoading={secondaryButton?.isLoading}
|
||||
disabled={
|
||||
secondaryButton?.isLoading !== undefined
|
||||
? secondaryButton?.isLoading
|
||||
: isPrimaryButtonLoading
|
||||
}
|
||||
)}
|
||||
>
|
||||
{secondaryButton && secondaryButton.text && (
|
||||
<Button
|
||||
{...secondaryButton}
|
||||
variant='outline'
|
||||
color={secondaryButton?.color}
|
||||
isLoading={secondaryButton?.isLoading}
|
||||
disabled={
|
||||
secondaryButton?.isLoading !== undefined
|
||||
? secondaryButton?.isLoading
|
||||
: isPrimaryButtonLoading
|
||||
}
|
||||
onClick={(e) => {
|
||||
if (secondaryButton?.onClick) {
|
||||
secondaryButton.onClick(e);
|
||||
} else {
|
||||
closeModalHandler();
|
||||
}
|
||||
onClick={(e) => {
|
||||
if (secondaryButton?.onClick) {
|
||||
secondaryButton.onClick(e);
|
||||
} else {
|
||||
closeModalHandler();
|
||||
}
|
||||
}}
|
||||
className={cn(
|
||||
'p-2 rounded-xl text-sm',
|
||||
secondaryButton?.className
|
||||
)}
|
||||
>
|
||||
{secondaryButton?.text ?? 'Tidak'}
|
||||
</Button>
|
||||
)}
|
||||
}}
|
||||
className={cn(
|
||||
'p-2 rounded-xl text-sm',
|
||||
secondaryButton?.className
|
||||
)}
|
||||
>
|
||||
{secondaryButton?.text ?? 'Tidak'}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{primaryButton && primaryButton.text && (
|
||||
<Button
|
||||
{...primaryButton}
|
||||
color={primaryButton?.color ?? 'info'}
|
||||
onClick={primaryButtonClickHandler}
|
||||
isLoading={
|
||||
primaryButton?.isLoading !== undefined
|
||||
? primaryButton?.isLoading
|
||||
: isPrimaryButtonLoading
|
||||
}
|
||||
disabled={
|
||||
primaryButton?.isLoading !== undefined
|
||||
? primaryButton?.isLoading
|
||||
: isPrimaryButtonLoading
|
||||
}
|
||||
className={cn(
|
||||
'p-2 rounded-xl text-sm',
|
||||
primaryButton?.className
|
||||
)}
|
||||
>
|
||||
{primaryButton?.text ?? 'Ya'}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{primaryButton && primaryButton.text && (
|
||||
<Button
|
||||
{...primaryButton}
|
||||
color={primaryButton?.color ?? 'info'}
|
||||
onClick={primaryButtonClickHandler}
|
||||
isLoading={
|
||||
primaryButton?.isLoading !== undefined
|
||||
? primaryButton?.isLoading
|
||||
: isPrimaryButtonLoading
|
||||
}
|
||||
disabled={
|
||||
primaryButton?.isLoading !== undefined
|
||||
? primaryButton?.isLoading
|
||||
: isPrimaryButtonLoading
|
||||
}
|
||||
className={cn('p-2 rounded-xl text-sm', primaryButton?.className)}
|
||||
>
|
||||
{primaryButton?.text ?? 'Ya'}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -48,10 +48,7 @@ const ClosingIncomingSapronaksTable = ({
|
||||
const { data: incomingSapronaks, isLoading: isLoadingIncomingSapronaks } =
|
||||
useSWR(
|
||||
`${ClosingApi.basePath}/${projectFlockId}/sapronak${getTableFilterQueryString()}&type=incoming&kandang_id=${kandangId ? `${kandangId}` : ''}`,
|
||||
ClosingApi.getAllIncomingSapronakFetcher,
|
||||
{
|
||||
keepPreviousData: true,
|
||||
}
|
||||
ClosingApi.getAllIncomingSapronakFetcher
|
||||
);
|
||||
|
||||
const [open, setOpen] = useState(true);
|
||||
|
||||
@@ -48,10 +48,7 @@ const ClosingOutgoingSapronaksTable = ({
|
||||
const { data: outgoingSapronaks, isLoading: isLoadingOutgoingSapronaks } =
|
||||
useSWR(
|
||||
`${ClosingApi.basePath}/${projectFlockId}/sapronak${getTableFilterQueryString()}&type=outgoing&kandang_id=${kandangId ? `${kandangId}` : ''}`,
|
||||
ClosingApi.getAllOutgoingSapronakFetcher,
|
||||
{
|
||||
keepPreviousData: true,
|
||||
}
|
||||
ClosingApi.getAllOutgoingSapronakFetcher
|
||||
);
|
||||
|
||||
const [open, setOpen] = useState(true);
|
||||
|
||||
@@ -250,29 +250,29 @@ const ClosingOverheadTable = ({
|
||||
body: 'p-4 shadow-button-soft border border-base-content/10 rounded-lg',
|
||||
}}
|
||||
>
|
||||
<div className='flex flex-row gap-4 w-full justify-center items-stretch'>
|
||||
<div className='flex flex-row gap-3 w-full justify-center items-stretch'>
|
||||
<div className='flex flex-row items-center justify-between'>
|
||||
<h2 className='text-base font-bold'>Pembelian Kandang </h2>
|
||||
</div>
|
||||
<div className='flex flex-col items-center justify-center'>
|
||||
<Icon icon='heroicons:equals' className='inline' />
|
||||
</div>
|
||||
<div className='flex flex-col flex-1'>
|
||||
<div className='flex flex-row items-center justify-center font-medium'>
|
||||
<div className='flex flex-col flex-1 gap-1.5'>
|
||||
<div className='flex flex-row gap-1.5 text-center items-center justify-center font-medium'>
|
||||
Populasi Akhir KANDANG{' '}
|
||||
<Icon icon='heroicons:x-mark' className='inline' /> Pemakaian
|
||||
Di FARM
|
||||
</div>
|
||||
<hr className='w-full h-1' />
|
||||
<div className='flex flex-row items-center justify-center font-medium'>
|
||||
<hr className='w-full h-fit m-0 p-0 text-base-content/65' />
|
||||
<div className='flex flex-row gap-1.5 text-center items-center justify-center font-medium'>
|
||||
Populasi Akhir Proyek
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col items-center justify-center'>
|
||||
<Icon icon='heroicons:equals' className='inline' />
|
||||
</div>
|
||||
<div className='flex flex-col flex-1'>
|
||||
<div className='flex flex-row items-center justify-center font-medium'>
|
||||
<div className='flex flex-col flex-1 gap-1.5'>
|
||||
<div className='flex flex-row gap-1.5 text-center items-center justify-center font-medium'>
|
||||
{formatNumber(chickinPopulation ?? 0)}
|
||||
<Icon icon='heroicons:x-mark' className='inline' />
|
||||
{formatCurrency(
|
||||
@@ -281,8 +281,8 @@ const ClosingOverheadTable = ({
|
||||
: 0
|
||||
)}
|
||||
</div>
|
||||
<hr className='w-full h-1' />
|
||||
<div className='flex flex-row items-center justify-center font-medium'>
|
||||
<hr className='w-full h-fit m-0 p-0 text-base-content/65' />
|
||||
<div className='flex flex-row gap-1.5 text-center items-center justify-center font-medium'>
|
||||
{formatNumber(generalInformation?.population ?? 0)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -67,7 +67,7 @@ const lineColors: Record<string, string> = {
|
||||
act_fcr: '#10B981',
|
||||
std_fcr: '#10B981',
|
||||
act_fcr_cum: '#F52419',
|
||||
std_fcr_cum: '#10B981',
|
||||
std_fcr_cum: '#F52419',
|
||||
normal: '#10B981',
|
||||
abnormal: '#F52419',
|
||||
act_deplesi: '#10B981',
|
||||
@@ -659,44 +659,50 @@ const DashboardLineChart = ({
|
||||
seriesData = comparisonChart?.series || [];
|
||||
}
|
||||
|
||||
return seriesData
|
||||
.filter((series) => visibleSeries.has(series.id))
|
||||
.map((series, index) => {
|
||||
const isStandard = series.id
|
||||
.toString()
|
||||
.toLowerCase()
|
||||
.includes('std');
|
||||
// Use series.id directly as dataKey to match dataset fields
|
||||
const dataKey = series.id.toString();
|
||||
return seriesData.map((series, originalIndex) => {
|
||||
// Skip rendering if series is not visible
|
||||
if (!visibleSeries.has(series.id)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Line
|
||||
key={`${series.id}--${index}`}
|
||||
type='monotone'
|
||||
dataKey={dataKey}
|
||||
name={series.label}
|
||||
stroke={getLineColor(series.id, index, analysisMode)}
|
||||
opacity={isStandard ? 0.5 : 1}
|
||||
strokeWidth={2}
|
||||
strokeDasharray={isStandard ? '5 5' : undefined}
|
||||
dot={
|
||||
isStandard
|
||||
? false
|
||||
: {
|
||||
r: 3,
|
||||
fill: '#fff',
|
||||
stroke: getLineColor(
|
||||
series.id,
|
||||
index,
|
||||
analysisMode
|
||||
),
|
||||
strokeWidth: 2,
|
||||
}
|
||||
}
|
||||
activeDot={isStandard ? undefined : { r: 5 }}
|
||||
/>
|
||||
);
|
||||
});
|
||||
const isStandard = series.id
|
||||
.toString()
|
||||
.toLowerCase()
|
||||
.includes('std');
|
||||
const dataKey = series.id.toString();
|
||||
|
||||
return (
|
||||
<Line
|
||||
key={`${series.id}--${originalIndex}`}
|
||||
type='monotone'
|
||||
dataKey={dataKey}
|
||||
name={series.label}
|
||||
stroke={getLineColor(
|
||||
series.id,
|
||||
originalIndex,
|
||||
analysisMode
|
||||
)}
|
||||
opacity={isStandard ? 0.5 : 1}
|
||||
strokeWidth={2}
|
||||
strokeDasharray={isStandard ? '5 5' : undefined}
|
||||
dot={
|
||||
isStandard
|
||||
? false
|
||||
: {
|
||||
r: 3,
|
||||
fill: '#fff',
|
||||
stroke: getLineColor(
|
||||
series.id,
|
||||
originalIndex,
|
||||
analysisMode
|
||||
),
|
||||
strokeWidth: 2,
|
||||
}
|
||||
}
|
||||
activeDot={isStandard ? undefined : { r: 5 }}
|
||||
/>
|
||||
);
|
||||
});
|
||||
})()}
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
|
||||
@@ -66,7 +66,7 @@ const lineColors: Record<string, string> = {
|
||||
act_fcr: '#10B981',
|
||||
std_fcr: '#10B981',
|
||||
act_fcr_cum: '#F52419',
|
||||
std_fcr_cum: '#10B981',
|
||||
std_fcr_cum: '#F52419',
|
||||
normal: '#10B981',
|
||||
abnormal: '#F52419',
|
||||
act_deplesi: '#10B981',
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import PillBadge from '@/components/PillBadge';
|
||||
import StatusBadge from '@/components/helper/StatusBadge';
|
||||
|
||||
import { BaseApproval } from '@/types/api/api-general';
|
||||
import { Color } from '@/types/theme';
|
||||
|
||||
interface ExpenseStatusBadgeProps {
|
||||
approval?: BaseApproval;
|
||||
@@ -11,49 +12,45 @@ const ExpenseStatusBadge = ({ approval }: ExpenseStatusBadgeProps) => {
|
||||
|
||||
const latestApprovalStepNumber = approval?.step_number;
|
||||
|
||||
let expenseStatusPillBadgeColor:
|
||||
| 'yellow'
|
||||
| 'green'
|
||||
| 'gray'
|
||||
| 'red'
|
||||
| 'purple'
|
||||
| 'blue' = 'gray';
|
||||
let expenseStatusBadgeColor: Color = 'neutral';
|
||||
|
||||
switch (latestApprovalStepNumber) {
|
||||
case 1:
|
||||
expenseStatusPillBadgeColor = 'gray';
|
||||
expenseStatusBadgeColor = 'neutral';
|
||||
break;
|
||||
|
||||
case 2:
|
||||
expenseStatusPillBadgeColor = 'purple';
|
||||
expenseStatusBadgeColor = 'info';
|
||||
break;
|
||||
|
||||
case 3:
|
||||
expenseStatusPillBadgeColor = 'blue';
|
||||
expenseStatusBadgeColor = 'warning';
|
||||
break;
|
||||
|
||||
case 4:
|
||||
expenseStatusPillBadgeColor = 'yellow';
|
||||
expenseStatusBadgeColor = 'error';
|
||||
break;
|
||||
|
||||
case 5:
|
||||
expenseStatusPillBadgeColor = 'green';
|
||||
expenseStatusBadgeColor = 'success';
|
||||
break;
|
||||
|
||||
case 6:
|
||||
expenseStatusPillBadgeColor = 'green';
|
||||
expenseStatusBadgeColor = 'success';
|
||||
break;
|
||||
}
|
||||
|
||||
if (isLatestApprovalRejected) {
|
||||
expenseStatusPillBadgeColor = 'red';
|
||||
expenseStatusBadgeColor = 'error';
|
||||
}
|
||||
|
||||
return (
|
||||
<PillBadge
|
||||
content={isLatestApprovalRejected ? 'Ditolak' : approval?.step_name}
|
||||
color={expenseStatusPillBadgeColor}
|
||||
className='text-xs'
|
||||
<StatusBadge
|
||||
color={expenseStatusBadgeColor}
|
||||
text={isLatestApprovalRejected ? 'Ditolak' : (approval?.step_name ?? '')}
|
||||
className={{
|
||||
badge: 'w-fit',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -596,12 +596,11 @@ const ExpensesTable = () => {
|
||||
<RequirePermission permissions='lti.expense.create'>
|
||||
<Button
|
||||
href='/expense/add'
|
||||
variant='outline'
|
||||
color='primary'
|
||||
className='w-full sm:w-fit'
|
||||
className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
|
||||
>
|
||||
<Icon icon='ic:round-plus' width={24} height={24} />
|
||||
Tambah
|
||||
<Icon icon='heroicons:plus' width={20} height={20} />
|
||||
Add Expense
|
||||
</Button>
|
||||
</RequirePermission>
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import PillBadge from '@/components/PillBadge';
|
||||
import StatusBadge from '@/components/helper/StatusBadge';
|
||||
|
||||
import { BaseApproval } from '@/types/api/api-general';
|
||||
import { Color } from '@/types/theme';
|
||||
|
||||
interface RealizationStatusBadgeProps {
|
||||
approval?: BaseApproval;
|
||||
@@ -15,23 +16,21 @@ const RealizationStatusBadge = ({ approval }: RealizationStatusBadgeProps) => {
|
||||
? 'Sudah Realisasi'
|
||||
: 'Belum Realisasi';
|
||||
|
||||
let realizationStatusPillBadgeColor:
|
||||
| 'yellow'
|
||||
| 'green'
|
||||
| 'gray'
|
||||
| 'red'
|
||||
| 'purple'
|
||||
| 'blue' = isExpenseRealized ? 'green' : 'yellow';
|
||||
let realizationStatusBadgeColor: Color = isExpenseRealized
|
||||
? 'success'
|
||||
: 'warning';
|
||||
|
||||
if (isLatestApprovalRejected) {
|
||||
realizationStatusPillBadgeColor = 'red';
|
||||
realizationStatusBadgeColor = 'error';
|
||||
}
|
||||
|
||||
return (
|
||||
<PillBadge
|
||||
content={isLatestApprovalRejected ? 'Ditolak' : realizationStatus}
|
||||
color={realizationStatusPillBadgeColor}
|
||||
className='text-xs'
|
||||
<StatusBadge
|
||||
color={realizationStatusBadgeColor}
|
||||
text={isLatestApprovalRejected ? 'Ditolak' : realizationStatus}
|
||||
className={{
|
||||
badge: 'w-fit',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -151,12 +151,11 @@ const MovementTable = () => {
|
||||
<RequirePermission permissions='lti.inventory.transfer.create'>
|
||||
<Button
|
||||
href='/inventory/movement/add'
|
||||
variant='outline'
|
||||
color='primary'
|
||||
className='w-full sm:w-fit'
|
||||
className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
|
||||
>
|
||||
<Icon icon='ic:round-plus' width={24} height={24} />
|
||||
Tambah
|
||||
<Icon icon='heroicons:plus' width={20} height={20} />
|
||||
Add Movement
|
||||
</Button>
|
||||
</RequirePermission>
|
||||
</div>
|
||||
|
||||
+1
-1
@@ -32,7 +32,7 @@ const GrowingRepeaterFormSchema = Yup.object({
|
||||
target_hen_house_production: Yup.number().optional(),
|
||||
target_egg_weight: Yup.number().optional(),
|
||||
target_egg_mass: Yup.number().optional(),
|
||||
standard_fcr: Yup.number().optional(),
|
||||
standard_fcr: Yup.number().required('Wajib diisi!'),
|
||||
}).optional(),
|
||||
});
|
||||
|
||||
|
||||
+62
-42
@@ -386,14 +386,6 @@ const ProductionStandardForm = ({
|
||||
`${row.original.production_standard_details?.target_egg_mass} kg`,
|
||||
enableSorting: false,
|
||||
},
|
||||
{
|
||||
header: 'FCR',
|
||||
accessorFn: (row) =>
|
||||
row.production_standard_details?.standard_fcr,
|
||||
cell: ({ row }) =>
|
||||
`${row.original.production_standard_details?.standard_fcr} g`,
|
||||
enableSorting: false,
|
||||
},
|
||||
]
|
||||
: [];
|
||||
|
||||
@@ -468,6 +460,13 @@ const ProductionStandardForm = ({
|
||||
return [
|
||||
...baseColumns,
|
||||
...productionColumns,
|
||||
{
|
||||
header: 'FCR',
|
||||
accessorFn: (row) => row.production_standard_details?.standard_fcr,
|
||||
cell: ({ row }) =>
|
||||
`${row.original.production_standard_details?.standard_fcr} g`,
|
||||
enableSorting: false,
|
||||
},
|
||||
...uniformityColumns,
|
||||
...(formType !== 'detail' ? [actionColumn] : []),
|
||||
];
|
||||
@@ -753,24 +752,46 @@ const ProductionStandardForm = ({
|
||||
e.preventDefault();
|
||||
|
||||
// For GROWING category, clear production_standard_details errors and set default values
|
||||
// but preserve standard_fcr since it's used for both LAYING and GROWING
|
||||
if (formik.values.project_category === 'GROWING') {
|
||||
// Set default values for production_standard_details
|
||||
// Set default values for production_standard_details, preserving standard_fcr
|
||||
formik.values.details?.forEach((detail) => {
|
||||
detail.production_standard_details = {
|
||||
target_hen_day_production: 0,
|
||||
target_hen_house_production: 0,
|
||||
target_egg_weight: 0,
|
||||
target_egg_mass: 0,
|
||||
standard_fcr: 0,
|
||||
standard_fcr:
|
||||
detail.production_standard_details?.standard_fcr || 0,
|
||||
};
|
||||
});
|
||||
|
||||
// Clear any errors related to production_standard_details
|
||||
// Clear errors only for LAYING-specific fields in production_standard_details
|
||||
// Preserve standard_fcr error since it's required for both categories
|
||||
const currentErrors = { ...formik.errors };
|
||||
if (currentErrors.details && Array.isArray(currentErrors.details)) {
|
||||
const cleanedDetails = currentErrors.details
|
||||
.map((detailError) => {
|
||||
if (detailError && typeof detailError === 'object') {
|
||||
const prodDetails = (
|
||||
detailError as {
|
||||
production_standard_details?: ProductionDetailsErrors;
|
||||
}
|
||||
).production_standard_details;
|
||||
|
||||
// If there's standard_fcr error, preserve it
|
||||
if (prodDetails && prodDetails.standard_fcr) {
|
||||
const { production_standard_details, ...rest } =
|
||||
detailError;
|
||||
return {
|
||||
...rest,
|
||||
production_standard_details: {
|
||||
standard_fcr: prodDetails.standard_fcr,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
// Otherwise, remove entire production_standard_details errors
|
||||
const { production_standard_details, ...rest } = detailError;
|
||||
return Object.keys(rest).length > 0 ? rest : undefined;
|
||||
}
|
||||
@@ -896,7 +917,7 @@ const ProductionStandardForm = ({
|
||||
gridTemplateColumns:
|
||||
formik.values.project_category === 'LAYING'
|
||||
? 'repeat(10, minmax(auto, 1fr)) minmax(auto, auto)'
|
||||
: 'repeat(4, minmax(auto, 1fr)) minmax(auto, auto)',
|
||||
: 'repeat(5, minmax(auto, 1fr)) minmax(auto, auto)',
|
||||
}}
|
||||
>
|
||||
<NumberInput
|
||||
@@ -1042,39 +1063,38 @@ const ProductionStandardForm = ({
|
||||
)
|
||||
}
|
||||
/>
|
||||
<NumberInput
|
||||
name='production_standard_details.standard_fcr'
|
||||
label='FCR'
|
||||
placeholder='1'
|
||||
value={
|
||||
repeaterFormik.values
|
||||
.production_standard_details?.standard_fcr
|
||||
}
|
||||
onChange={repeaterFormik.handleChange}
|
||||
onBlur={repeaterFormik.handleBlur}
|
||||
bottomLabel='Gram (g)'
|
||||
errorMessage={getProductionDetailsError(
|
||||
</>
|
||||
)}
|
||||
<NumberInput
|
||||
name='production_standard_details.standard_fcr'
|
||||
label='FCR'
|
||||
placeholder='1'
|
||||
value={
|
||||
repeaterFormik.values.production_standard_details
|
||||
?.standard_fcr
|
||||
}
|
||||
onChange={repeaterFormik.handleChange}
|
||||
onBlur={repeaterFormik.handleBlur}
|
||||
bottomLabel='Gram (g)'
|
||||
errorMessage={getProductionDetailsError(
|
||||
repeaterFormik.errors.production_standard_details,
|
||||
'standard_fcr'
|
||||
)}
|
||||
isError={
|
||||
Boolean(
|
||||
getProductionDetailsError(
|
||||
repeaterFormik.errors
|
||||
.production_standard_details,
|
||||
'standard_fcr'
|
||||
)}
|
||||
isError={
|
||||
Boolean(
|
||||
getProductionDetailsError(
|
||||
repeaterFormik.errors
|
||||
.production_standard_details,
|
||||
'standard_fcr'
|
||||
)
|
||||
) &&
|
||||
getProductionDetailsTouched(
|
||||
repeaterFormik.touched
|
||||
.production_standard_details,
|
||||
'standard_fcr'
|
||||
)
|
||||
}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
)
|
||||
) &&
|
||||
getProductionDetailsTouched(
|
||||
repeaterFormik.touched
|
||||
.production_standard_details,
|
||||
'standard_fcr'
|
||||
)
|
||||
}
|
||||
/>
|
||||
<NumberInput
|
||||
name='production_standard_uniformity_details.target_mean_bw'
|
||||
label='Mean BW'
|
||||
|
||||
@@ -380,12 +380,11 @@ const RecordingTable = () => {
|
||||
<RequirePermission permissions='lti.production.recording.create'>
|
||||
<Button
|
||||
href='/production/recording/add'
|
||||
variant='outline'
|
||||
color='primary'
|
||||
className='w-full sm:w-fit'
|
||||
className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
|
||||
>
|
||||
<Icon icon='ic:round-plus' width={24} height={24} />
|
||||
Tambah
|
||||
<Icon icon='heroicons:plus' width={20} height={20} />
|
||||
Add Recording
|
||||
</Button>
|
||||
</RequirePermission>
|
||||
|
||||
|
||||
@@ -48,6 +48,7 @@ import {
|
||||
UpdateLayingRecordingPayload,
|
||||
Recording,
|
||||
NextDayRecording,
|
||||
RecordingStock,
|
||||
} from '@/types/api/production/recording';
|
||||
import { type BaseApiResponse } from '@/types/api/api-general';
|
||||
import {
|
||||
@@ -1103,14 +1104,51 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
[formik.values.stocks, type]
|
||||
);
|
||||
|
||||
const getStockPendingInfo = useCallback(
|
||||
(productWarehouseId: number) => {
|
||||
if ((type === 'edit' || type === 'detail') && initialValues?.stocks) {
|
||||
const existingStock = initialValues.stocks.find(
|
||||
(s) => s.product_warehouse_id === productWarehouseId
|
||||
) as RecordingStock | undefined;
|
||||
if (existingStock) {
|
||||
return {
|
||||
usageAmount: existingStock.usage_amount ?? 0,
|
||||
pendingQty: existingStock.pending_qty ?? 0,
|
||||
};
|
||||
}
|
||||
}
|
||||
return {
|
||||
usageAmount: 0,
|
||||
pendingQty: 0,
|
||||
};
|
||||
},
|
||||
[initialValues, type]
|
||||
);
|
||||
|
||||
const getStockUsageAdornment = useCallback(
|
||||
(stockIdx: number) => {
|
||||
if ((type as 'add' | 'edit' | 'detail') === 'detail') return null;
|
||||
const stock = formik.values.stocks?.[stockIdx];
|
||||
if (!stock || !stock.product_warehouse_id) return null;
|
||||
|
||||
const isDetail = (type as 'add' | 'edit' | 'detail') === 'detail';
|
||||
const availableStock = getAvailableStock(stock.product_warehouse_id);
|
||||
const requestedUsage = Number(stock.qty) || 0;
|
||||
const remainingStock = availableStock - requestedUsage;
|
||||
const { pendingQty } = getStockPendingInfo(stock.product_warehouse_id);
|
||||
|
||||
if (isDetail) {
|
||||
if (pendingQty > 0) {
|
||||
return (
|
||||
<span className='text-sm text-gray-600 whitespace-nowrap'>
|
||||
(tersedia: {formatNumber(requestedUsage)} | pending:{' '}
|
||||
<span className='text-error'>{formatNumber(pendingQty)}</span> |
|
||||
pakai: {formatNumber(requestedUsage + pendingQty)})
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
if (requestedUsage > 0) {
|
||||
return (
|
||||
<span className='text-sm text-gray-600 whitespace-nowrap'>
|
||||
@@ -1127,7 +1165,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
</span>
|
||||
);
|
||||
},
|
||||
[formik.values.stocks, getAvailableStock, type]
|
||||
[formik.values.stocks, getAvailableStock, getStockPendingInfo, type]
|
||||
);
|
||||
|
||||
const getProjectFlockBadgeAdornment = useCallback(() => {
|
||||
@@ -2550,8 +2588,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
: null
|
||||
}
|
||||
/>
|
||||
{(type as 'add' | 'edit' | 'detail') !== 'detail' &&
|
||||
getStockUsageAdornment(idx)}
|
||||
{getStockUsageAdornment(idx)}
|
||||
</div>
|
||||
</td>
|
||||
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
|
||||
@@ -2604,209 +2641,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
</Card>
|
||||
|
||||
{/* Depletions Table */}
|
||||
<Card
|
||||
title='Deplesi'
|
||||
className={{
|
||||
wrapper: 'w-full mb-4 shadow',
|
||||
title: 'mb-4',
|
||||
}}
|
||||
>
|
||||
<div className='overflow-x-auto'>
|
||||
<table className='table'>
|
||||
<thead>
|
||||
<tr>
|
||||
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
|
||||
<th>
|
||||
<CheckboxInput
|
||||
name='select-all-depletions'
|
||||
checked={
|
||||
formik.values.depletions?.length ===
|
||||
selectedDepletions.length &&
|
||||
formik.values.depletions?.length > 0
|
||||
}
|
||||
onChange={(
|
||||
e: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedDepletions(
|
||||
formik.values.depletions?.map(
|
||||
(_, idx) => idx
|
||||
) ?? []
|
||||
);
|
||||
} else {
|
||||
setSelectedDepletions([]);
|
||||
}
|
||||
}}
|
||||
classNames={{
|
||||
wrapper: 'flex justify-center',
|
||||
checkbox: 'checkbox checkbox-sm',
|
||||
}}
|
||||
/>
|
||||
</th>
|
||||
)}
|
||||
<th>Kondisi</th>
|
||||
<th>Jumlah</th>
|
||||
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
|
||||
<th>Action</th>
|
||||
)}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{formik.values.depletions?.map((depletion, idx) => (
|
||||
<tr key={`depletion-${idx}`}>
|
||||
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
|
||||
<td className='align-middle!'>
|
||||
<CheckboxInput
|
||||
name={`depletion-${idx}`}
|
||||
checked={selectedDepletions.includes(idx)}
|
||||
onChange={(
|
||||
e: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedDepletions([
|
||||
...selectedDepletions,
|
||||
idx,
|
||||
]);
|
||||
} else {
|
||||
setSelectedDepletions(
|
||||
selectedDepletions.filter((i) => i !== idx)
|
||||
);
|
||||
}
|
||||
}}
|
||||
classNames={{
|
||||
wrapper: 'flex justify-center',
|
||||
checkbox: 'checkbox checkbox-sm',
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
)}
|
||||
<td>
|
||||
<SelectInput
|
||||
value={
|
||||
depletionProducts.find(
|
||||
(product) =>
|
||||
product.value === depletion.product_warehouse_id
|
||||
) || null
|
||||
}
|
||||
onChange={(selectedOption) => {
|
||||
const option = selectedOption as OptionType | null;
|
||||
formik.setFieldValue(
|
||||
`depletions.${idx}.product_warehouse_id`,
|
||||
option?.value || 0
|
||||
);
|
||||
}}
|
||||
options={getAvailableDepletionProductOptions(idx)}
|
||||
placeholder='Pilih Kondisi'
|
||||
isLoading={isLoadingDepletionProducts}
|
||||
onMenuScrollToBottom={loadMoreDepletionProducts}
|
||||
isError={
|
||||
isRepeaterInputError(
|
||||
'depletions',
|
||||
'product_warehouse_id',
|
||||
idx
|
||||
).isError
|
||||
}
|
||||
errorMessage={
|
||||
isRepeaterInputError(
|
||||
'depletions',
|
||||
'product_warehouse_id',
|
||||
idx
|
||||
).errorMessage
|
||||
}
|
||||
isDisabled={type === 'detail'}
|
||||
className={{
|
||||
wrapper: 'w-full min-w-48',
|
||||
}}
|
||||
isSearchable
|
||||
isClearable={type !== 'detail'}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<NumberInput
|
||||
name={`depletions.${idx}.qty`}
|
||||
value={depletion.qty ?? ''}
|
||||
onChange={handleDepletionQtyChangeWrapper(idx)}
|
||||
onBlur={formik.handleBlur}
|
||||
decimalScale={0}
|
||||
allowNegative={false}
|
||||
thousandSeparator=','
|
||||
decimalSeparator='.'
|
||||
isError={
|
||||
isRepeaterInputError('depletions', 'qty', idx)
|
||||
.isError
|
||||
}
|
||||
errorMessage={
|
||||
isRepeaterInputError('depletions', 'qty', idx)
|
||||
.errorMessage
|
||||
}
|
||||
readOnly={type === 'detail'}
|
||||
className={{
|
||||
wrapper: 'w-full min-w-24',
|
||||
}}
|
||||
placeholder='Masukkan jumlah deplesi'
|
||||
inputSuffix={
|
||||
depletion.product_warehouse_id
|
||||
? getProductUomSuffix(
|
||||
depletion.product_warehouse_id,
|
||||
'depletion'
|
||||
)
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</td>
|
||||
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
|
||||
<td>
|
||||
<div className='flex items-center'>
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={() => removeDepletion(idx)}
|
||||
>
|
||||
<Icon
|
||||
icon='mdi:trash-can'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
|
||||
<div className='flex justify-center items-center mt-4 gap-4'>
|
||||
{selectedDepletions.length > 0 && (
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={removeSelectedDepletions}
|
||||
disabled={selectedDepletions.length === 0}
|
||||
className='w-fit'
|
||||
>
|
||||
<Icon icon='mdi:trash-can' width={24} height={24} />
|
||||
Hapus Terpilih ({selectedDepletions.length})
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
type='button'
|
||||
color='success'
|
||||
onClick={addDepletion}
|
||||
className='w-fit'
|
||||
>
|
||||
<Icon icon='ic:round-plus' width={24} height={24} />
|
||||
Tambah Depletion
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Eggs Table - Only for LAYING Category */}
|
||||
{isLayingCategory && (
|
||||
{((type as 'add' | 'edit' | 'detail') !== 'detail' ||
|
||||
(formik.values.depletions?.length ?? 0) > 0) && (
|
||||
<Card
|
||||
title='Telur'
|
||||
title='Deplesi'
|
||||
className={{
|
||||
wrapper: 'w-full mb-4 shadow',
|
||||
title: 'mb-4',
|
||||
@@ -2819,24 +2657,23 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
|
||||
<th>
|
||||
<CheckboxInput
|
||||
name='select-all-eggs'
|
||||
name='select-all-depletions'
|
||||
checked={
|
||||
((formik.values as RecordingLayingFormValues).eggs
|
||||
?.length ?? 0) === selectedEggs.length &&
|
||||
((formik.values as RecordingLayingFormValues).eggs
|
||||
?.length ?? 0) > 0
|
||||
formik.values.depletions?.length ===
|
||||
selectedDepletions.length &&
|
||||
formik.values.depletions?.length > 0
|
||||
}
|
||||
onChange={(
|
||||
e: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedEggs(
|
||||
(
|
||||
formik.values as RecordingLayingFormValues
|
||||
).eggs?.map((_, idx) => idx) ?? []
|
||||
setSelectedDepletions(
|
||||
formik.values.depletions?.map(
|
||||
(_, idx) => idx
|
||||
) ?? []
|
||||
);
|
||||
} else {
|
||||
setSelectedEggs([]);
|
||||
setSelectedDepletions([]);
|
||||
}
|
||||
}}
|
||||
classNames={{
|
||||
@@ -2846,201 +2683,412 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
/>
|
||||
</th>
|
||||
)}
|
||||
<th>Kondisi Telur</th>
|
||||
<th>Kondisi</th>
|
||||
<th>Jumlah</th>
|
||||
<th className='flex items-center gap-1'>
|
||||
Total Berat (Kilogram)
|
||||
<Tooltip
|
||||
className={{
|
||||
wrapper: 'cursor-pointer',
|
||||
}}
|
||||
position='bottom'
|
||||
content='Untuk menggunakan koma bisa menekan tombol titik (.) pada keyboard, Misal 0.123'
|
||||
>
|
||||
<Icon
|
||||
icon='heroicons:information-circle'
|
||||
width={20}
|
||||
height={20}
|
||||
className='text-gray-400 hover:text-gray-600 shrink-0'
|
||||
/>
|
||||
</Tooltip>
|
||||
</th>
|
||||
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
|
||||
<th>Action</th>
|
||||
)}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(formik.values as RecordingLayingFormValues).eggs?.map(
|
||||
(egg, idx) => (
|
||||
<tr key={`egg-${idx}`}>
|
||||
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
|
||||
<td className='align-middle!'>
|
||||
<CheckboxInput
|
||||
name={`egg-${idx}`}
|
||||
checked={selectedEggs.includes(idx)}
|
||||
onChange={(
|
||||
e: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedEggs([...selectedEggs, idx]);
|
||||
} else {
|
||||
setSelectedEggs(
|
||||
selectedEggs.filter((i) => i !== idx)
|
||||
);
|
||||
}
|
||||
}}
|
||||
classNames={{
|
||||
wrapper: 'flex justify-center',
|
||||
checkbox: 'checkbox checkbox-sm',
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
)}
|
||||
<td>
|
||||
<SelectInput
|
||||
value={
|
||||
eggProducts.find(
|
||||
(product) =>
|
||||
product.value === egg.product_warehouse_id
|
||||
) || null
|
||||
}
|
||||
onChange={(selectedOption) => {
|
||||
const option =
|
||||
selectedOption as OptionType | null;
|
||||
formik.setFieldValue(
|
||||
`eggs.${idx}.product_warehouse_id`,
|
||||
option?.value || 0
|
||||
);
|
||||
{formik.values.depletions?.map((depletion, idx) => (
|
||||
<tr key={`depletion-${idx}`}>
|
||||
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
|
||||
<td className='align-middle!'>
|
||||
<CheckboxInput
|
||||
name={`depletion-${idx}`}
|
||||
checked={selectedDepletions.includes(idx)}
|
||||
onChange={(
|
||||
e: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedDepletions([
|
||||
...selectedDepletions,
|
||||
idx,
|
||||
]);
|
||||
} else {
|
||||
setSelectedDepletions(
|
||||
selectedDepletions.filter((i) => i !== idx)
|
||||
);
|
||||
}
|
||||
}}
|
||||
options={getAvailableEggProductOptions(idx)}
|
||||
placeholder='Pilih Kondisi Telur'
|
||||
isLoading={isLoadingEggProducts}
|
||||
onMenuScrollToBottom={loadMoreEggProducts}
|
||||
isError={
|
||||
isRepeaterInputError(
|
||||
'eggs',
|
||||
'product_warehouse_id',
|
||||
idx
|
||||
).isError
|
||||
}
|
||||
errorMessage={
|
||||
isRepeaterInputError(
|
||||
'eggs',
|
||||
'product_warehouse_id',
|
||||
idx
|
||||
).errorMessage
|
||||
}
|
||||
isDisabled={type === 'detail'}
|
||||
className={{
|
||||
wrapper: 'w-full min-w-48',
|
||||
classNames={{
|
||||
wrapper: 'flex justify-center',
|
||||
checkbox: 'checkbox checkbox-sm',
|
||||
}}
|
||||
isSearchable
|
||||
isClearable={type !== 'detail'}
|
||||
/>
|
||||
</td>
|
||||
)}
|
||||
<td>
|
||||
<SelectInput
|
||||
value={
|
||||
depletionProducts.find(
|
||||
(product) =>
|
||||
product.value ===
|
||||
depletion.product_warehouse_id
|
||||
) || null
|
||||
}
|
||||
onChange={(selectedOption) => {
|
||||
const option =
|
||||
selectedOption as OptionType | null;
|
||||
formik.setFieldValue(
|
||||
`depletions.${idx}.product_warehouse_id`,
|
||||
option?.value || 0
|
||||
);
|
||||
}}
|
||||
options={getAvailableDepletionProductOptions(idx)}
|
||||
placeholder='Pilih Kondisi'
|
||||
isLoading={isLoadingDepletionProducts}
|
||||
onMenuScrollToBottom={loadMoreDepletionProducts}
|
||||
isError={
|
||||
isRepeaterInputError(
|
||||
'depletions',
|
||||
'product_warehouse_id',
|
||||
idx
|
||||
).isError
|
||||
}
|
||||
errorMessage={
|
||||
isRepeaterInputError(
|
||||
'depletions',
|
||||
'product_warehouse_id',
|
||||
idx
|
||||
).errorMessage
|
||||
}
|
||||
isDisabled={type === 'detail'}
|
||||
className={{
|
||||
wrapper: 'w-full min-w-48',
|
||||
}}
|
||||
isSearchable
|
||||
isClearable={type !== 'detail'}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<NumberInput
|
||||
name={`depletions.${idx}.qty`}
|
||||
value={depletion.qty ?? ''}
|
||||
onChange={handleDepletionQtyChangeWrapper(idx)}
|
||||
onBlur={formik.handleBlur}
|
||||
decimalScale={0}
|
||||
allowNegative={false}
|
||||
thousandSeparator=','
|
||||
decimalSeparator='.'
|
||||
isError={
|
||||
isRepeaterInputError('depletions', 'qty', idx)
|
||||
.isError
|
||||
}
|
||||
errorMessage={
|
||||
isRepeaterInputError('depletions', 'qty', idx)
|
||||
.errorMessage
|
||||
}
|
||||
readOnly={type === 'detail'}
|
||||
className={{
|
||||
wrapper: 'w-full min-w-24',
|
||||
}}
|
||||
placeholder='Masukkan jumlah deplesi'
|
||||
inputSuffix={
|
||||
depletion.product_warehouse_id
|
||||
? getProductUomSuffix(
|
||||
depletion.product_warehouse_id,
|
||||
'depletion'
|
||||
)
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</td>
|
||||
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
|
||||
<td>
|
||||
<NumberInput
|
||||
name={`eggs.${idx}.qty`}
|
||||
value={egg.qty ?? ''}
|
||||
onChange={handleEggQtyChangeWrapper(idx)}
|
||||
onBlur={formik.handleBlur}
|
||||
decimalScale={0}
|
||||
allowNegative={false}
|
||||
thousandSeparator=','
|
||||
decimalSeparator='.'
|
||||
isError={
|
||||
isRepeaterInputError('eggs', 'qty', idx).isError
|
||||
}
|
||||
errorMessage={
|
||||
isRepeaterInputError('eggs', 'qty', idx)
|
||||
.errorMessage
|
||||
}
|
||||
readOnly={type === 'detail'}
|
||||
className={{
|
||||
wrapper: 'w-full min-w-24',
|
||||
}}
|
||||
placeholder='Masukkan jumlah telur'
|
||||
inputSuffix={'Butir'}
|
||||
/>
|
||||
<div className='flex items-center'>
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={() => removeDepletion(idx)}
|
||||
>
|
||||
<Icon
|
||||
icon='mdi:trash-can'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<NumberInput
|
||||
name={`eggs.${idx}.weight`}
|
||||
value={egg.weight ?? ''}
|
||||
onChange={handleEggWeightChangeWrapper(idx)}
|
||||
onBlur={formik.handleBlur}
|
||||
decimalScale={3}
|
||||
allowNegative={false}
|
||||
thousandSeparator=','
|
||||
decimalSeparator='.'
|
||||
isError={
|
||||
isRepeaterInputError('eggs', 'weight', idx)
|
||||
.isError
|
||||
}
|
||||
errorMessage={
|
||||
isRepeaterInputError('eggs', 'weight', idx)
|
||||
.errorMessage
|
||||
}
|
||||
readOnly={type === 'detail'}
|
||||
className={{
|
||||
wrapper: 'w-full min-w-24',
|
||||
}}
|
||||
placeholder='Masukkan total berat telur (Kilogram)...'
|
||||
inputSuffix='Kilogram'
|
||||
/>
|
||||
</td>
|
||||
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
|
||||
<td>
|
||||
<div className='flex items-center'>
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={() => removeEgg(idx)}
|
||||
>
|
||||
<Icon
|
||||
icon='mdi:trash-can'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
)
|
||||
)}
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
|
||||
<div className='flex justify-center items-center mt-4 gap-4'>
|
||||
{selectedEggs.length > 0 && (
|
||||
{selectedDepletions.length > 0 && (
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={removeSelectedEggs}
|
||||
disabled={selectedEggs.length === 0}
|
||||
onClick={removeSelectedDepletions}
|
||||
disabled={selectedDepletions.length === 0}
|
||||
className='w-fit'
|
||||
>
|
||||
<Icon icon='mdi:trash-can' width={24} height={24} />
|
||||
Hapus Terpilih ({selectedEggs.length})
|
||||
Hapus Terpilih ({selectedDepletions.length})
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
type='button'
|
||||
color='success'
|
||||
onClick={addEgg}
|
||||
onClick={addDepletion}
|
||||
className='w-fit'
|
||||
>
|
||||
<Icon icon='ic:round-plus' width={24} height={24} />
|
||||
Tambah Telur
|
||||
Tambah Depletion
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Eggs Table - Only for LAYING Category */}
|
||||
{isLayingCategory &&
|
||||
((type as 'add' | 'edit' | 'detail') !== 'detail' ||
|
||||
((formik.values as RecordingLayingFormValues).eggs?.length ?? 0) >
|
||||
0) && (
|
||||
<Card
|
||||
title='Telur'
|
||||
className={{
|
||||
wrapper: 'w-full mb-4 shadow',
|
||||
title: 'mb-4',
|
||||
}}
|
||||
>
|
||||
<div className='overflow-x-auto'>
|
||||
<table className='table'>
|
||||
<thead>
|
||||
<tr>
|
||||
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
|
||||
<th>
|
||||
<CheckboxInput
|
||||
name='select-all-eggs'
|
||||
checked={
|
||||
((formik.values as RecordingLayingFormValues)
|
||||
.eggs?.length ?? 0) === selectedEggs.length &&
|
||||
((formik.values as RecordingLayingFormValues)
|
||||
.eggs?.length ?? 0) > 0
|
||||
}
|
||||
onChange={(
|
||||
e: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedEggs(
|
||||
(
|
||||
formik.values as RecordingLayingFormValues
|
||||
).eggs?.map((_, idx) => idx) ?? []
|
||||
);
|
||||
} else {
|
||||
setSelectedEggs([]);
|
||||
}
|
||||
}}
|
||||
classNames={{
|
||||
wrapper: 'flex justify-center',
|
||||
checkbox: 'checkbox checkbox-sm',
|
||||
}}
|
||||
/>
|
||||
</th>
|
||||
)}
|
||||
<th>Kondisi Telur</th>
|
||||
<th>Jumlah</th>
|
||||
<th className='flex items-center gap-1'>
|
||||
Total Berat (Kilogram)
|
||||
<Tooltip
|
||||
className={{
|
||||
wrapper: 'cursor-pointer',
|
||||
}}
|
||||
position='bottom'
|
||||
content='Untuk menggunakan koma bisa menekan tombol titik (.) pada keyboard, Misal 0.123'
|
||||
>
|
||||
<Icon
|
||||
icon='heroicons:information-circle'
|
||||
width={20}
|
||||
height={20}
|
||||
className='text-gray-400 hover:text-gray-600 shrink-0'
|
||||
/>
|
||||
</Tooltip>
|
||||
</th>
|
||||
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
|
||||
<th>Action</th>
|
||||
)}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(formik.values as RecordingLayingFormValues).eggs?.map(
|
||||
(egg, idx) => (
|
||||
<tr key={`egg-${idx}`}>
|
||||
{(type as 'add' | 'edit' | 'detail') !==
|
||||
'detail' && (
|
||||
<td className='align-middle!'>
|
||||
<CheckboxInput
|
||||
name={`egg-${idx}`}
|
||||
checked={selectedEggs.includes(idx)}
|
||||
onChange={(
|
||||
e: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedEggs([...selectedEggs, idx]);
|
||||
} else {
|
||||
setSelectedEggs(
|
||||
selectedEggs.filter((i) => i !== idx)
|
||||
);
|
||||
}
|
||||
}}
|
||||
classNames={{
|
||||
wrapper: 'flex justify-center',
|
||||
checkbox: 'checkbox checkbox-sm',
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
)}
|
||||
<td>
|
||||
<SelectInput
|
||||
value={
|
||||
eggProducts.find(
|
||||
(product) =>
|
||||
product.value === egg.product_warehouse_id
|
||||
) || null
|
||||
}
|
||||
onChange={(selectedOption) => {
|
||||
const option =
|
||||
selectedOption as OptionType | null;
|
||||
formik.setFieldValue(
|
||||
`eggs.${idx}.product_warehouse_id`,
|
||||
option?.value || 0
|
||||
);
|
||||
}}
|
||||
options={getAvailableEggProductOptions(idx)}
|
||||
placeholder='Pilih Kondisi Telur'
|
||||
isLoading={isLoadingEggProducts}
|
||||
onMenuScrollToBottom={loadMoreEggProducts}
|
||||
isError={
|
||||
isRepeaterInputError(
|
||||
'eggs',
|
||||
'product_warehouse_id',
|
||||
idx
|
||||
).isError
|
||||
}
|
||||
errorMessage={
|
||||
isRepeaterInputError(
|
||||
'eggs',
|
||||
'product_warehouse_id',
|
||||
idx
|
||||
).errorMessage
|
||||
}
|
||||
isDisabled={type === 'detail'}
|
||||
className={{
|
||||
wrapper: 'w-full min-w-48',
|
||||
}}
|
||||
isSearchable
|
||||
isClearable={type !== 'detail'}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<NumberInput
|
||||
name={`eggs.${idx}.qty`}
|
||||
value={egg.qty ?? ''}
|
||||
onChange={handleEggQtyChangeWrapper(idx)}
|
||||
onBlur={formik.handleBlur}
|
||||
decimalScale={0}
|
||||
allowNegative={false}
|
||||
thousandSeparator=','
|
||||
decimalSeparator='.'
|
||||
isError={
|
||||
isRepeaterInputError('eggs', 'qty', idx)
|
||||
.isError
|
||||
}
|
||||
errorMessage={
|
||||
isRepeaterInputError('eggs', 'qty', idx)
|
||||
.errorMessage
|
||||
}
|
||||
readOnly={type === 'detail'}
|
||||
className={{
|
||||
wrapper: 'w-full min-w-24',
|
||||
}}
|
||||
placeholder='Masukkan jumlah telur'
|
||||
inputSuffix={'Butir'}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<NumberInput
|
||||
name={`eggs.${idx}.weight`}
|
||||
value={egg.weight ?? ''}
|
||||
onChange={handleEggWeightChangeWrapper(idx)}
|
||||
onBlur={formik.handleBlur}
|
||||
decimalScale={3}
|
||||
allowNegative={false}
|
||||
thousandSeparator=','
|
||||
decimalSeparator='.'
|
||||
isError={
|
||||
isRepeaterInputError('eggs', 'weight', idx)
|
||||
.isError
|
||||
}
|
||||
errorMessage={
|
||||
isRepeaterInputError('eggs', 'weight', idx)
|
||||
.errorMessage
|
||||
}
|
||||
readOnly={type === 'detail'}
|
||||
className={{
|
||||
wrapper: 'w-full min-w-24',
|
||||
}}
|
||||
placeholder='Masukkan total berat telur (Kilogram)...'
|
||||
inputSuffix='Kilogram'
|
||||
/>
|
||||
</td>
|
||||
{(type as 'add' | 'edit' | 'detail') !==
|
||||
'detail' && (
|
||||
<td>
|
||||
<div className='flex items-center'>
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={() => removeEgg(idx)}
|
||||
>
|
||||
<Icon
|
||||
icon='mdi:trash-can'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
)
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
|
||||
<div className='flex justify-center items-center mt-4 gap-4'>
|
||||
{selectedEggs.length > 0 && (
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={removeSelectedEggs}
|
||||
disabled={selectedEggs.length === 0}
|
||||
className='w-fit'
|
||||
>
|
||||
<Icon icon='mdi:trash-can' width={24} height={24} />
|
||||
Hapus Terpilih ({selectedEggs.length})
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
type='button'
|
||||
color='success'
|
||||
onClick={addEgg}
|
||||
className='w-fit'
|
||||
>
|
||||
<Icon icon='ic:round-plus' width={24} height={24} />
|
||||
Tambah Telur
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<div className='w-full'>
|
||||
{recordingFormErrorMessage && (
|
||||
<div role='alert' className='alert alert-error'>
|
||||
|
||||
@@ -99,6 +99,7 @@ const TransferToLayingFormModal = () => {
|
||||
{
|
||||
category: 'GROWING',
|
||||
transfer_context: 'transfer_to_laying',
|
||||
is_approved: 'true',
|
||||
}
|
||||
);
|
||||
|
||||
@@ -116,6 +117,7 @@ const TransferToLayingFormModal = () => {
|
||||
'search',
|
||||
{
|
||||
category: 'LAYING',
|
||||
is_approved: 'true',
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
@@ -1058,7 +1058,7 @@ const UniformityTable = () => {
|
||||
iconPosition='left'
|
||||
text='Data Berhasil Ditambahkan'
|
||||
subtitleText='Data uniformity telah berhasil disimpan.'
|
||||
closeOnBackdrop={false}
|
||||
closeOnBackdrop={true}
|
||||
primaryButton={{
|
||||
text: 'Ok',
|
||||
color: 'primary',
|
||||
@@ -1089,6 +1089,7 @@ const UniformityTable = () => {
|
||||
ref={singleDeleteModal.ref}
|
||||
type='error'
|
||||
iconPosition='left'
|
||||
closeOnBackdrop={true}
|
||||
text={`Delete This Data?`}
|
||||
subtitleText='Are you sure you want to delete this data?'
|
||||
secondaryButton={{
|
||||
@@ -1113,6 +1114,7 @@ const UniformityTable = () => {
|
||||
ref={singleApproveModal.ref}
|
||||
type='success'
|
||||
iconPosition='left'
|
||||
closeOnBackdrop={true}
|
||||
text='Approve This Submission?'
|
||||
subtitleText='Are you sure you want to approve this submission?'
|
||||
secondaryButton={{
|
||||
@@ -1129,15 +1131,12 @@ const UniformityTable = () => {
|
||||
}}
|
||||
>
|
||||
<div className='flex flex-col gap-4'>
|
||||
{selectedRowIds.length === 1 ? (
|
||||
{selectedUniformities.map((uniformity) => (
|
||||
<UniformityConfirmationPreview
|
||||
uniformity={selectedUniformities[0]}
|
||||
key={uniformity.id}
|
||||
uniformity={uniformity}
|
||||
/>
|
||||
) : (
|
||||
<div className='text-center text-gray-500'>
|
||||
{selectedRowIds.length} data dipilih
|
||||
</div>
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
</ConfirmationModal>
|
||||
|
||||
@@ -1145,8 +1144,13 @@ const UniformityTable = () => {
|
||||
ref={bulkApproveModal.ref}
|
||||
type='success'
|
||||
iconPosition='left'
|
||||
closeOnBackdrop={true}
|
||||
text={`Approve This Submission?`}
|
||||
subtitleText={`Are you sure you want to approve this submission? (${selectedRowIds.length} data)`}
|
||||
subtitleText={
|
||||
selectedRowIds.length === 1
|
||||
? 'Are you sure you want to approve this submission?'
|
||||
: `Are you sure you want to approve these submissions? (${selectedRowIds.length} data)`
|
||||
}
|
||||
secondaryButton={{
|
||||
text: 'Cancel',
|
||||
}}
|
||||
@@ -1161,7 +1165,12 @@ const UniformityTable = () => {
|
||||
}}
|
||||
>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<UniformityConfirmationPreview uniformity={selectedUniformity} />
|
||||
{selectedUniformities.map((uniformity) => (
|
||||
<UniformityConfirmationPreview
|
||||
key={uniformity.id}
|
||||
uniformity={uniformity}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</ConfirmationModal>
|
||||
|
||||
@@ -1169,6 +1178,7 @@ const UniformityTable = () => {
|
||||
ref={singleRejectModal.ref}
|
||||
type='error'
|
||||
iconPosition='left'
|
||||
closeOnBackdrop={true}
|
||||
text='Reject This Submission?'
|
||||
subtitleText='Are you sure you want to reject this submission?'
|
||||
secondaryButton={{
|
||||
@@ -1185,15 +1195,12 @@ const UniformityTable = () => {
|
||||
}}
|
||||
>
|
||||
<div className='flex flex-col gap-4'>
|
||||
{selectedRowIds.length === 1 ? (
|
||||
{selectedUniformities.map((uniformity) => (
|
||||
<UniformityConfirmationPreview
|
||||
uniformity={selectedUniformities[0]}
|
||||
key={uniformity.id}
|
||||
uniformity={uniformity}
|
||||
/>
|
||||
) : (
|
||||
<div className='text-center text-gray-500'>
|
||||
{selectedRowIds.length} data dipilih
|
||||
</div>
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
</ConfirmationModal>
|
||||
|
||||
@@ -1201,8 +1208,13 @@ const UniformityTable = () => {
|
||||
ref={bulkRejectModal.ref}
|
||||
type='error'
|
||||
iconPosition='left'
|
||||
closeOnBackdrop={true}
|
||||
text={`Reject This Submission?`}
|
||||
subtitleText={`Are you sure you want to reject this submission? (${selectedRowIds.length} data)`}
|
||||
subtitleText={
|
||||
selectedRowIds.length === 1
|
||||
? 'Are you sure you want to reject this submission?'
|
||||
: `Are you sure you want to reject these submissions? (${selectedRowIds.length} data)`
|
||||
}
|
||||
secondaryButton={{
|
||||
text: 'Cancel',
|
||||
}}
|
||||
@@ -1217,15 +1229,12 @@ const UniformityTable = () => {
|
||||
}}
|
||||
>
|
||||
<div className='flex flex-col gap-4'>
|
||||
{selectedRowIds.length === 1 ? (
|
||||
{selectedUniformities.map((uniformity) => (
|
||||
<UniformityConfirmationPreview
|
||||
uniformity={selectedUniformities[0]}
|
||||
key={uniformity.id}
|
||||
uniformity={uniformity}
|
||||
/>
|
||||
) : (
|
||||
<div className='text-center text-gray-500'>
|
||||
{selectedRowIds.length} data dipilih
|
||||
</div>
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
</ConfirmationModal>
|
||||
|
||||
|
||||
@@ -319,12 +319,11 @@ const PurchaseTable = () => {
|
||||
<RequirePermission permissions='lti.purchase.create'>
|
||||
<Button
|
||||
href='/purchase/add'
|
||||
variant='outline'
|
||||
color='primary'
|
||||
className='w-full sm:w-fit'
|
||||
className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
|
||||
>
|
||||
<Icon icon='ic:round-plus' width={24} height={24} />
|
||||
Tambah
|
||||
<Icon icon='heroicons:plus' width={20} height={20} />
|
||||
Add Purchase
|
||||
</Button>
|
||||
</RequirePermission>
|
||||
</div>
|
||||
|
||||
@@ -36,7 +36,6 @@ import SelectInputRadio from '@/components/input/SelectInputRadio';
|
||||
import { useFinanceTabStore } from '@/stores/finance-tab/finance-tab.store';
|
||||
import StatusBadge from '@/components/helper/StatusBadge';
|
||||
import DebtSupplierSkeleton from '@/components/pages/report/finance/skeleton/DebtSupplierSkeleton';
|
||||
import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
|
||||
|
||||
const dueStatus: Record<string, Color> = {
|
||||
'Sudah Jatuh Tempo': 'error',
|
||||
@@ -60,7 +59,15 @@ const getPillBadge = (
|
||||
? dueStatus[statusText] || 'neutral'
|
||||
: paymentStatus[statusText] || 'neutral';
|
||||
|
||||
return <StatusBadge color={color as Color} text={statusText} />;
|
||||
return (
|
||||
<StatusBadge
|
||||
color={color as Color}
|
||||
text={statusText}
|
||||
className={{
|
||||
badge: 'w-fit',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
interface DebtSupplierTabProps {
|
||||
@@ -466,7 +473,9 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
|
||||
footer: () => {
|
||||
const value = supplier?.total.total_price;
|
||||
return (
|
||||
<div className={`text-right ${value || 0 < 0 ? 'text-red-500' : ''}`}>
|
||||
<div
|
||||
className={`text-right ${value && value < 0 ? 'text-red-500' : ''}`}
|
||||
>
|
||||
{formatCurrency(value || 0)}
|
||||
</div>
|
||||
);
|
||||
@@ -488,7 +497,9 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
|
||||
footer: () => {
|
||||
const value = supplier?.total.payment_price;
|
||||
return (
|
||||
<div className={`text-right ${value || 0 < 0 ? 'text-red-500' : ''}`}>
|
||||
<div
|
||||
className={`text-right ${value && value < 0 ? 'text-red-500' : ''}`}
|
||||
>
|
||||
{formatCurrency(value || 0)}
|
||||
</div>
|
||||
);
|
||||
@@ -510,7 +521,9 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
|
||||
footer: () => {
|
||||
const value = supplier?.total.debt_price;
|
||||
return (
|
||||
<div className={`text-right ${value || 0 < 0 ? 'text-red-500' : ''}`}>
|
||||
<div
|
||||
className={`text-right ${value && value < 0 ? 'text-red-500' : ''}`}
|
||||
>
|
||||
{formatCurrency(value || 0)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -242,9 +242,6 @@ const ProductionResultContent = () => {
|
||||
console.error(error);
|
||||
toast.error('Gagal melakukan export laporan hasil produksi! Coba lagi.');
|
||||
}
|
||||
// await ProductionResultReportApi.exportProductionResultToPdf(
|
||||
// projectFlockKandangs
|
||||
// );
|
||||
|
||||
setIsLoadingExportingToPdf(false);
|
||||
};
|
||||
@@ -268,7 +265,12 @@ const ProductionResultContent = () => {
|
||||
}
|
||||
|
||||
setProjectFlockKandangs([projectFlockKandangResponse.data]);
|
||||
setProjectFlockKandangMetadata(projectFlockKandangResponse.meta);
|
||||
setProjectFlockKandangMetadata({
|
||||
page: 1,
|
||||
limit: 10,
|
||||
total_pages: 1,
|
||||
total_results: 1,
|
||||
});
|
||||
setIsLoadingSearch(false);
|
||||
return;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user