mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
Merge branch 'fix/adjustment-uniformity-ui' into 'development'
[FIX/FE] Adjustment Uniformity, Expense, Purchase, and Recording Page UI See merge request mbugroup/lti-web-client!304
This commit is contained in:
Rivaldi A N S
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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'>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user