Merge branch 'hotfix/purchase-and-project-flock-form' into 'development'

[HOTFIX/FE] Refactor Purchase (Staff & Receipt/Receive) and Project Flock Form (Modal)

See merge request mbugroup/lti-web-client!322
This commit is contained in:
Rivaldi A N S
2026-02-11 07:29:22 +00:00
11 changed files with 212 additions and 39 deletions
@@ -33,6 +33,9 @@ import RequirePermission from '@/components/helper/RequirePermission';
import StatusBadge from '@/components/helper/StatusBadge';
import PopoverButton from '@/components/popover/PopoverButton';
import PopoverContent from '@/components/popover/PopoverContent';
import ProjectFlockConfirmationModal from './ProjectFlockConfirmationModal';
import { useProjectFlockStore } from '@/stores/project-flock/project-flock.store';
import { ProjectFlockFormValues } from './form/ProjectFlockForm.schema';
const RowOptionsMenu = ({
props,
@@ -137,6 +140,15 @@ const RowOptionsMenu = ({
};
const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
const isSuccess = useProjectFlockStore((s) => s.isSuccess);
const setIsSuccess = useProjectFlockStore((s) => s.setIsSuccess);
const createdProjectFlock = useProjectFlockStore(
(s) => s.createdProjectFlock
);
const setCreatedProjectFlock = useProjectFlockStore(
(s) => s.setCreatedProjectFlock
);
const {
state: tableFilterState,
updateFilter,
@@ -180,6 +192,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
const [sorting, setSorting] = useState<SortingState>([]);
const deleteModal = useModal();
const confirmModal = useModal();
const successModal = useModal();
const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(
'APPROVED'
);
@@ -275,6 +288,64 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
refreshProjectFlocks();
}, [refresh]);
useEffect(() => {
if (isSuccess) {
successModal.openModal();
}
}, [isSuccess, successModal]);
const handleSuccessModalClose = () => {
successModal.closeModal();
setIsSuccess(false);
setCreatedProjectFlock(null);
};
const projectFlockFormValues = useMemo(() => {
if (!createdProjectFlock) return undefined;
return {
flock: {
value: 0,
label: createdProjectFlock.flock_name || '',
},
flock_name: createdProjectFlock.flock_name || '',
area: {
value: createdProjectFlock.area_id,
label: createdProjectFlock.area?.name || '',
},
area_id: createdProjectFlock.area_id,
category_option: {
value: createdProjectFlock.category,
label: createdProjectFlock.category,
},
category: createdProjectFlock.category,
production_standard: {
value: createdProjectFlock.production_standard_id,
label: createdProjectFlock.production_standard?.name || '',
},
production_standard_id: createdProjectFlock.production_standard_id,
location: {
value: createdProjectFlock.location_id,
label: createdProjectFlock.location?.name || '',
},
location_id: createdProjectFlock.location_id,
kandang_ids: createdProjectFlock.kandangs?.map((k) => k.id) || [],
project_budgets:
createdProjectFlock.project_budgets?.map((budget) => ({
nonstock: budget.nonstock
? {
value: budget.nonstock_id,
label: budget.nonstock.name || '',
}
: null,
nonstock_id: budget.nonstock_id,
qty: budget.qty,
price: budget.price,
total_price: budget.qty * budget.price,
})) || [],
} as ProjectFlockFormValues;
}, [createdProjectFlock]);
// ====== MEMO ======
const selectedSingleRow: ProjectFlock | null | undefined = useMemo(() => {
return selectedRowIds.length === 1
@@ -873,6 +944,16 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
isLoading: isApproveLoading,
}}
/>
<ProjectFlockConfirmationModal
ref={successModal.ref}
type='success'
text='Data Berhasil Ditambahkan'
subtitleText='Data project flock telah berhasil disimpan.'
projectFlockForm={projectFlockFormValues}
onClose={handleSuccessModalClose}
secondaryButton={undefined}
/>
</>
);
};
@@ -52,7 +52,7 @@ import Table from '@/components/Table';
import { ColumnDef } from '@tanstack/react-table';
import StatusBadge from '@/components/helper/StatusBadge';
import { getUniqueFormikErrors } from '@/lib/formik-helper';
import ProjectFlockConfirmationModal from '../ProjectFlockConfirmationModal';
import { useProjectFlockStore } from '@/stores/project-flock/project-flock.store';
interface ProjectFlockFormProps {
formType?: 'add' | 'edit' | 'detail';
@@ -213,6 +213,10 @@ const ProjectFlockForm = ({
}: ProjectFlockFormProps) => {
// State
const router = useRouter();
const setIsSuccess = useProjectFlockStore((s) => s.setIsSuccess);
const setCreatedProjectFlock = useProjectFlockStore(
(s) => s.setCreatedProjectFlock
);
const [formStep, setFormStep] = useState<'form' | 'confirmation'>('form');
@@ -239,7 +243,6 @@ const ProjectFlockForm = ({
const subscribeValidate = useUiStore((s) => s.subscribeValidate);
const setIsValid = useUiStore((s) => s.setIsValid);
const successModal = useModal();
const deleteModal = useModal();
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
@@ -262,6 +265,8 @@ const ProjectFlockForm = ({
loadMore: loadMoreFlock,
} = useSelect(FlockApi.basePath, 'id', 'name', '', {
project_category: selectedCategory,
location_id: selectedLocation,
area_id: selectedArea,
});
const {
@@ -431,7 +436,9 @@ const ProjectFlockForm = ({
if (isResponseSuccess(createProjectFlockRes)) {
toast.success(createProjectFlockRes?.message as string);
handleReset();
successModal.openModal();
setCreatedProjectFlock(createProjectFlockRes?.data ?? null);
setIsSuccess(true);
router.push('/production/project-flock');
}
if (isResponseError(createProjectFlockRes)) {
setProjectFlockFormErrorMessage(createProjectFlockRes?.message as string);
@@ -449,7 +456,9 @@ const ProjectFlockForm = ({
if (isResponseSuccess(updateProjectFlockRes)) {
toast.success(updateProjectFlockRes?.message as string);
handleReset();
successModal.openModal();
setCreatedProjectFlock(updateProjectFlockRes?.data ?? null);
setIsSuccess(true);
router.push('/production/project-flock');
}
if (isResponseError(updateProjectFlockRes)) {
setProjectFlockFormErrorMessage(updateProjectFlockRes?.message as string);
@@ -1388,19 +1397,6 @@ const ProjectFlockForm = ({
</div>
</form>
<ProjectFlockConfirmationModal
ref={successModal.ref}
type='success'
text='Data Berhasil Ditambahkan'
subtitleText='Data project flock telah berhasil disimpan.'
projectFlockForm={formikLastValues}
onClose={() => {
router.push('/production/project-flock');
setFormikLastValues(undefined);
}}
secondaryButton={undefined}
/>
<ConfirmationModal
ref={deleteModal.ref}
type='error'
@@ -2469,6 +2469,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
)
: null
}
disabled={type === 'detail'}
/>
{getStockUsageAdornment(idx)}
</div>
@@ -2675,6 +2676,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
)
: null
}
disabled={type === 'detail'}
/>
</td>
{(type as 'add' | 'edit' | 'detail') !== 'detail' && (
@@ -2891,6 +2893,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
}}
placeholder='Masukkan jumlah telur'
inputSuffix={'Butir'}
disabled={type === 'detail'}
/>
</td>
<td>
@@ -2917,6 +2920,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
}}
placeholder='Masukkan total berat telur (Kilogram)...'
inputSuffix='Kilogram'
disabled={type === 'detail'}
/>
</td>
{(type as 'add' | 'edit' | 'detail') !==
@@ -402,6 +402,13 @@ const PurchaseOrderAcceptApprovalForm = ({
<tbody>
{purchaseItems?.map((purchaseItem, idx) => {
const formItem = formik.values.items?.[idx];
const originalPurchaseItem = initialValues?.items?.find(
(item) => item.id === purchaseItem.id
);
const isReceivedQtyDisabled =
originalPurchaseItem?.has_chickin === true;
return (
<tr key={`purchase-item-${idx}`}>
<td>
@@ -580,7 +587,12 @@ const PurchaseOrderAcceptApprovalForm = ({
decimalScale={0}
thousandSeparator=','
decimalSeparator='.'
bottomLabel={`Total: ${purchaseItems[idx]?.quantity ? formatNumber(purchaseItems[idx].quantity) : 0}`}
disabled={isReceivedQtyDisabled}
bottomLabel={
isReceivedQtyDisabled
? 'Sudah chickin, tidak bisa diubah'
: `Total: ${purchaseItems[idx]?.quantity ? formatNumber(purchaseItems[idx].quantity) : 0}`
}
isError={
isRepeaterInputError(idx, 'received_qty').isError ||
(formItem?.received_qty
@@ -740,6 +740,13 @@ const PurchaseOrderStaffApprovalForm = ({
)
return null;
const originalPurchaseItem =
initialValues?.items?.find(
(item) => item.id === purchaseItem.id
);
const isQtyDisabled =
originalPurchaseItem?.has_chickin === true;
return (
<tr key={`purchase-item-${purchaseItem.id}`}>
<td>
@@ -807,7 +814,12 @@ const PurchaseOrderStaffApprovalForm = ({
placeholder='Masukkan jumlah'
allowNegative={false}
decimalScale={0}
bottomLabel={`Previous: ${formatNumber(purchaseItem.quantity)}`}
disabled={isQtyDisabled}
bottomLabel={
isQtyDisabled
? 'Sudah chickin, tidak bisa diubah'
: `Previous: ${formatNumber(purchaseItem.quantity)}`
}
className={{
wrapper: 'min-w-32',
}}