feat(FE-316): Display created uniformity in confirmation preview

This commit is contained in:
rstubryan
2025-12-31 10:37:21 +07:00
parent ef3611e7fc
commit e32b9ddcb2
5 changed files with 110 additions and 30 deletions
@@ -61,50 +61,42 @@ interface UniformityPreviewData {
} }
const UniformityConfirmationPreview = ({ const UniformityConfirmationPreview = ({
tanggal = '28 Desember 2025', uniformity,
lokasiFarm = 'Farm A',
projectFlock = 'Flock 2025-01',
kandang = 'Kandang 1',
file_name = 'uniformity_data.xlsx',
status = 'APPROVED',
}: { }: {
tanggal?: string; uniformity?: Uniformity;
lokasiFarm?: string;
projectFlock?: string;
kandang?: string;
file_name?: string;
status?: string;
}) => { }) => {
const data: UniformityPreviewData[] = [ const data: UniformityPreviewData[] = [
{ {
id: 'tanggal', id: 'tanggal',
label: 'Tanggal', label: 'Tanggal',
value: tanggal, value: uniformity
? formatDate(uniformity.applied_at, 'DD MMM YYYY')
: '-',
}, },
{ {
id: 'lokasi-farm', id: 'lokasi-farm',
label: 'Lokasi Farm', label: 'Lokasi Farm',
value: lokasiFarm, value: uniformity?.location_name || '-',
}, },
{ {
id: 'project-flock', id: 'project-flock',
label: 'Project Flock', label: 'Project Flock',
value: projectFlock, value: uniformity?.flock_name || '-',
}, },
{ {
id: 'kandang', id: 'kandang',
label: 'Kandang', label: 'Kandang',
value: kandang, value: uniformity?.kandang_name || '-',
}, },
{ {
id: 'file-uniformity', id: 'file-uniformity',
label: 'File Uniformity', label: 'File Uniformity',
value: file_name, value: '-', // File name tidak tersedia di GET ALL response
}, },
{ {
id: 'status', id: 'status',
label: 'Status', label: 'Status',
value: status, value: uniformity?.status || '-',
}, },
]; ];
@@ -161,6 +153,10 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const isSuccess = useUniformityStore((s) => s.isSuccess); const isSuccess = useUniformityStore((s) => s.isSuccess);
const setIsSuccess = useUniformityStore((s) => s.setIsSuccess); const setIsSuccess = useUniformityStore((s) => s.setIsSuccess);
const createdUniformity = useUniformityStore((s) => s.createdUniformity);
const setCreatedUniformity = useUniformityStore(
(s) => s.setCreatedUniformity
);
const { const {
state: tableFilterState, state: tableFilterState,
@@ -449,6 +445,7 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
const handleSuccessModalClose = () => { const handleSuccessModalClose = () => {
successModal.closeModal(); successModal.closeModal();
setIsSuccess(false); setIsSuccess(false);
setCreatedUniformity(null);
}; };
const singleDeleteHandler = useCallback(async () => { const singleDeleteHandler = useCallback(async () => {
@@ -507,12 +504,18 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
}, [selectedRowIds, selectedUniformities, singleDeleteModal]); }, [selectedRowIds, selectedUniformities, singleDeleteModal]);
const handleBulkApprove = useCallback(() => { const handleBulkApprove = useCallback(() => {
if (selectedRowIds.length === 1) {
setSelectedUniformity(selectedUniformities[0]);
}
bulkApproveModal.openModal(); bulkApproveModal.openModal();
}, [bulkApproveModal]); }, [bulkApproveModal, selectedRowIds, selectedUniformities]);
const handleBulkReject = useCallback(() => { const handleBulkReject = useCallback(() => {
if (selectedRowIds.length === 1) {
setSelectedUniformity(selectedUniformities[0]);
}
bulkRejectModal.openModal(); bulkRejectModal.openModal();
}, [bulkRejectModal]); }, [bulkRejectModal, selectedRowIds, selectedUniformities]);
const bulkApproveHandler = useCallback(async () => { const bulkApproveHandler = useCallback(async () => {
setIsBulkActionLoading(true); setIsBulkActionLoading(true);
@@ -899,7 +902,46 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
}} }}
> >
<div className='flex flex-col gap-4 mt-4'> <div className='flex flex-col gap-4 mt-4'>
<UniformityConfirmationPreview /> {createdUniformity ? (
<UniformityConfirmationPreview
uniformity={{
id: createdUniformity.id,
location_name: createdUniformity.info_umum.lokasi_farm,
flock_name: createdUniformity.info_umum.project_flock,
kandang_name: createdUniformity.info_umum.kandang,
applied_at: createdUniformity.info_umum.tanggal,
week: 0,
status: 'Pengajuan',
uniformity: createdUniformity.result.uniformity,
cv: createdUniformity.result.cv,
chick_qty_of_weight:
createdUniformity.sampling.chick_qty_of_weight,
uniform_qty: createdUniformity.result.uniform_qty,
mean_up: createdUniformity.sampling.mean_up,
mean_down: createdUniformity.sampling.mean_down,
standard_mean_weight: null,
standard_uniformity: null,
created_at: '',
created_by: 0,
project_flock_kandang_id: 0,
created_user: {
id: 0,
id_user: 0,
email: '',
name: '',
},
updated_at: '',
}}
/>
) : selectedRowIds.length === 1 ? (
<UniformityConfirmationPreview
uniformity={selectedUniformities[0]}
/>
) : (
<div className='text-center text-gray-500'>
{selectedRowIds.length} data dipilih
</div>
)}
</div> </div>
</ConfirmationModal> </ConfirmationModal>
@@ -923,7 +965,7 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
}} }}
> >
<div className='flex flex-col gap-4 mt-4'> <div className='flex flex-col gap-4 mt-4'>
<UniformityConfirmationPreview /> <UniformityConfirmationPreview uniformity={selectedUniformity} />
</div> </div>
</ConfirmationModal> </ConfirmationModal>
@@ -947,7 +989,15 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
}} }}
> >
<div className='flex flex-col gap-4 mt-4'> <div className='flex flex-col gap-4 mt-4'>
<UniformityConfirmationPreview /> {selectedRowIds.length === 1 ? (
<UniformityConfirmationPreview
uniformity={selectedUniformities[0]}
/>
) : (
<div className='text-center text-gray-500'>
{selectedRowIds.length} data dipilih
</div>
)}
</div> </div>
</ConfirmationModal> </ConfirmationModal>
@@ -971,7 +1021,7 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
}} }}
> >
<div className='flex flex-col gap-4 mt-4'> <div className='flex flex-col gap-4 mt-4'>
<UniformityConfirmationPreview /> <UniformityConfirmationPreview uniformity={selectedUniformity} />
</div> </div>
</ConfirmationModal> </ConfirmationModal>
@@ -995,7 +1045,15 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
}} }}
> >
<div className='flex flex-col gap-4 mt-4'> <div className='flex flex-col gap-4 mt-4'>
<UniformityConfirmationPreview /> {selectedRowIds.length === 1 ? (
<UniformityConfirmationPreview
uniformity={selectedUniformities[0]}
/>
) : (
<div className='text-center text-gray-500'>
{selectedRowIds.length} data dipilih
</div>
)}
</div> </div>
</ConfirmationModal> </ConfirmationModal>
@@ -1018,7 +1076,15 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
}} }}
> >
<div className='flex flex-col gap-4 mt-4'> <div className='flex flex-col gap-4 mt-4'>
<UniformityConfirmationPreview /> {selectedRowIds.length === 1 ? (
<UniformityConfirmationPreview
uniformity={selectedUniformities[0]}
/>
) : (
<div className='text-center text-gray-500'>
{selectedRowIds.length} data dipilih
</div>
)}
</div> </div>
</ConfirmationModal> </ConfirmationModal>
@@ -40,6 +40,9 @@ const UniformityResultForm = () => {
); );
const uniformityFormData = useUniformityStore((s) => s.uniformityFormData); const uniformityFormData = useUniformityStore((s) => s.uniformityFormData);
const setIsSuccess = useUniformityStore((s) => s.setIsSuccess); const setIsSuccess = useUniformityStore((s) => s.setIsSuccess);
const setCreatedUniformity = useUniformityStore(
(s) => s.setCreatedUniformity
);
const [isSubmitting, setIsSubmitting] = React.useState(false); const [isSubmitting, setIsSubmitting] = React.useState(false);
@@ -68,11 +71,12 @@ const UniformityResultForm = () => {
const res = await UniformityApi.createUniformity(payload); const res = await UniformityApi.createUniformity(payload);
if (isResponseError(res)) { if (!res || isResponseError(res)) {
toast.error(res.message); toast.error(res?.message || 'Failed to create uniformity');
return; return;
} }
setCreatedUniformity(res.data);
setIsSuccess(true); setIsSuccess(true);
setExpandedDrawerOpen(false); setExpandedDrawerOpen(false);
setIsNextStep(false); setIsNextStep(false);
+5 -2
View File
@@ -53,7 +53,7 @@ export class UniformityApiService extends BaseApiService<
async createUniformity( async createUniformity(
payload: CreateUniformityPayload payload: CreateUniformityPayload
): Promise<BaseApiResponse<Uniformity> | undefined> { ): Promise<BaseApiResponse<UniformityDetail> | undefined> {
const formData = new FormData(); const formData = new FormData();
formData.append('date', payload.date); formData.append('date', payload.date);
formData.append('week', payload.week.toString()); formData.append('week', payload.week.toString());
@@ -66,7 +66,10 @@ export class UniformityApiService extends BaseApiService<
formData.append('document', payload.document); formData.append('document', payload.document);
} }
return await this.create(formData as unknown as CreateUniformityPayload); return await this.customRequest<BaseApiResponse<UniformityDetail>>('', {
method: 'POST',
payload: formData as unknown as Record<string, unknown>,
});
} }
async verifyUniformity( async verifyUniformity(
@@ -12,6 +12,7 @@ export const createUniformitySlice: StateCreator<
verifyUniformityResult: null, verifyUniformityResult: null,
uniformityFormData: null, uniformityFormData: null,
isSuccess: false, isSuccess: false,
createdUniformity: null,
// Actions // Actions
setUniformityStep: (step) => set({ uniformityStep: step }), setUniformityStep: (step) => set({ uniformityStep: step }),
@@ -23,11 +24,14 @@ export const createUniformitySlice: StateCreator<
setIsSuccess: (success) => set({ isSuccess: success }), setIsSuccess: (success) => set({ isSuccess: success }),
setCreatedUniformity: (data) => set({ createdUniformity: data }),
resetUniformity: () => resetUniformity: () =>
set({ set({
uniformityStep: 'preview', uniformityStep: 'preview',
verifyUniformityResult: null, verifyUniformityResult: null,
uniformityFormData: null, uniformityFormData: null,
isSuccess: false, isSuccess: false,
createdUniformity: null,
}), }),
}); });
+3
View File
@@ -1,6 +1,7 @@
import type { ProductionStandardRepeaterFormSchemaValues } from '@/components/pages/master-data/production-standard/form/ProductionStandardForm.schema'; import type { ProductionStandardRepeaterFormSchemaValues } from '@/components/pages/master-data/production-standard/form/ProductionStandardForm.schema';
import type { import type {
UniformityFormData, UniformityFormData,
UniformityDetail,
VerifyUniformityResponse, VerifyUniformityResponse,
} from '@/types/api/uniformity/uniformity'; } from '@/types/api/uniformity/uniformity';
@@ -59,11 +60,13 @@ export type UniformitySlice = {
verifyUniformityResult: VerifyUniformityResponse | null; verifyUniformityResult: VerifyUniformityResponse | null;
uniformityFormData: UniformityFormData | null; uniformityFormData: UniformityFormData | null;
isSuccess: boolean; isSuccess: boolean;
createdUniformity: UniformityDetail | null;
// Actions // Actions
setUniformityStep: (step: UniformityStep) => void; setUniformityStep: (step: UniformityStep) => void;
setVerifyUniformityResult: (result: VerifyUniformityResponse | null) => void; setVerifyUniformityResult: (result: VerifyUniformityResponse | null) => void;
setUniformityFormData: (data: UniformityFormData | null) => void; setUniformityFormData: (data: UniformityFormData | null) => void;
setIsSuccess: (success: boolean) => void; setIsSuccess: (success: boolean) => void;
setCreatedUniformity: (data: UniformityDetail | null) => void;
resetUniformity: () => void; resetUniformity: () => void;
}; };