mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 21:41:57 +00:00
feat(FE-92-94): Slicing UI detail chickin & refactor number input chickin form
This commit is contained in:
randy-ar
@@ -59,7 +59,7 @@ const AddChickin = () => {
|
||||
? listProjectFlock?.data.map((projectFlock) => {
|
||||
return {
|
||||
value: projectFlock.id,
|
||||
label: `${projectFlock?.flock.name} - ${projectFlock?.category} - Periode ${projectFlock.period}`,
|
||||
label: `${projectFlock?.flock?.name} - ${projectFlock?.category} - Periode ${projectFlock.period}`,
|
||||
};
|
||||
})
|
||||
: [];
|
||||
@@ -242,6 +242,7 @@ const AddChickin = () => {
|
||||
created_user: projectFlock.data.created_user,
|
||||
created_at: projectFlock.data.created_at,
|
||||
updated_at: projectFlock.data.updated_at,
|
||||
approval: projectFlock.data.approval,
|
||||
}}
|
||||
afterSubmit={handleAfterSubmit}
|
||||
/>
|
||||
|
||||
@@ -1,24 +1,51 @@
|
||||
'use client'
|
||||
'use client';
|
||||
|
||||
import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
|
||||
import { ChickinApi } from "@/services/api/production";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import useSWR from "swr";
|
||||
import Button from '@/components/Button';
|
||||
import Card from '@/components/Card';
|
||||
import Modal, { useModal } from '@/components/Modal';
|
||||
import ConfirmationModal from '@/components/modal/ConfirmationModal';
|
||||
import ChickinForm from '@/components/pages/production/chickin/form/ChickinForm';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import { ChickinApi } from '@/services/api/production';
|
||||
import { BaseApiResponse } from '@/types/api/api-general';
|
||||
import {
|
||||
Chickin,
|
||||
ChickinApprovalPayload,
|
||||
} from '@/types/api/production/chickin';
|
||||
import { Icon } from '@iconify/react';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import toast from 'react-hot-toast';
|
||||
import useSWR from 'swr';
|
||||
|
||||
const DetailChickin = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const chickinId = searchParams.get('chickinId');
|
||||
const [isApproveLoading, setIsApproveLoading] = useState(false);
|
||||
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
||||
|
||||
const confirmModal = useModal();
|
||||
const deleteModal = useModal();
|
||||
const chickinModal = useModal();
|
||||
const {
|
||||
data: chickin,
|
||||
isLoading,
|
||||
} = useSWR(
|
||||
chickinId,
|
||||
(id: number) => ChickinApi.getSingle(id)
|
||||
mutate: refreshChickin,
|
||||
} = useSWR(chickinId, (id: number) => ChickinApi.getSingle(id));
|
||||
|
||||
const [isApprovedDisabled, setIsApprovedDisabled] = useState(
|
||||
// chickin.data?.approval.step_number == 1 ? false : true
|
||||
true
|
||||
);
|
||||
const [isRejectedDisabled, setIsRejectedDisabled] = useState(
|
||||
!isApprovedDisabled
|
||||
);
|
||||
const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(
|
||||
!isApprovedDisabled ? 'APPROVED' : 'REJECTED'
|
||||
);
|
||||
|
||||
if(!chickinId){
|
||||
if (!chickinId) {
|
||||
router.back();
|
||||
|
||||
return (
|
||||
@@ -28,46 +55,291 @@ const DetailChickin = () => {
|
||||
);
|
||||
}
|
||||
|
||||
if (
|
||||
!isLoading &&
|
||||
(!chickin || isResponseError(chickin))
|
||||
) {
|
||||
if (!isLoading && (!chickin || isResponseError(chickin))) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isResponseSuccess(chickin)) {
|
||||
return (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const confirmationModalClickHandler = async ({
|
||||
action = 'APPROVED',
|
||||
}: {
|
||||
action: 'APPROVED' | 'REJECTED';
|
||||
}) => {
|
||||
if (chickin?.data.id === undefined) return;
|
||||
setIsApproveLoading(true);
|
||||
const approveChickinRes = await ChickinApi.customRequest<
|
||||
BaseApiResponse<Chickin>,
|
||||
ChickinApprovalPayload
|
||||
>(`/approvals`, {
|
||||
method: 'POST',
|
||||
payload: {
|
||||
action: action,
|
||||
approvable_ids: [chickin.data.id],
|
||||
},
|
||||
});
|
||||
|
||||
if (isResponseSuccess(approveChickinRes)) {
|
||||
if (refreshChickin) {
|
||||
await refreshChickin();
|
||||
}
|
||||
toast.success(approveChickinRes.message as string);
|
||||
}
|
||||
if (isResponseError(approveChickinRes)) {
|
||||
toast.error(approveChickinRes?.message as string);
|
||||
}
|
||||
confirmModal.closeModal();
|
||||
setIsApproveLoading(false);
|
||||
};
|
||||
|
||||
const confirmationModalDeleteClickHandler = async () => {
|
||||
setIsDeleteLoading(true);
|
||||
const deleteProjectFlockRes = await ChickinApi.delete(
|
||||
chickin.data?.id as number
|
||||
);
|
||||
|
||||
if (isResponseSuccess(deleteProjectFlockRes)) {
|
||||
toast.success(deleteProjectFlockRes?.message as string);
|
||||
router.push('/production/chickin');
|
||||
}
|
||||
if (isResponseError(deleteProjectFlockRes)) {
|
||||
toast.error(deleteProjectFlockRes?.message as string);
|
||||
}
|
||||
setIsDeleteLoading(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="w-full p-4 flex flex-col justify-center gap-4">
|
||||
<div className='w-full p-4 flex flex-col justify-center gap-4'>
|
||||
{isLoading && <span className='loading loading-spinner loading-xl' />}
|
||||
{!isLoading && isResponseSuccess(chickin) && (
|
||||
<>
|
||||
<div className="card shadow">
|
||||
<div className="card-body">
|
||||
<div className="card-title">
|
||||
Informasi Project Flock
|
||||
{/* <div className='w-full flex flex-col sm:flex-row gap-2'>
|
||||
<Button
|
||||
variant='outline'
|
||||
color='success'
|
||||
onClick={(() => {
|
||||
if (chickin?.data.id) {
|
||||
setApprovalAction('APPROVED');
|
||||
confirmModal.openModal();
|
||||
}
|
||||
})}
|
||||
disabled={!chickin?.data.id || isApprovedDisabled}
|
||||
className='w-full sm:w-fit'
|
||||
>
|
||||
<Icon icon='material-symbols:check' width={24} height={24} />
|
||||
Approve
|
||||
</Button>
|
||||
<Button
|
||||
variant='outline'
|
||||
color='error'
|
||||
onClick={() => {
|
||||
if (chickin?.data.id) {
|
||||
setApprovalAction('REJECTED');
|
||||
confirmModal.openModal();
|
||||
}
|
||||
}}
|
||||
disabled={!chickin?.data.id || isRejectedDisabled}
|
||||
className='w-full sm:w-fit'
|
||||
>
|
||||
<Icon icon='mdi:times' width={24} height={24} />
|
||||
Reject
|
||||
</Button>
|
||||
</div> */}
|
||||
<Card
|
||||
title='Informasi Umum'
|
||||
variant='bordered'
|
||||
className={{
|
||||
wrapper: 'w-full',
|
||||
}}
|
||||
>
|
||||
<div className='grid grid-cols-2 gap-4 mt-4'>
|
||||
<div className='flex flex-col gap-2'>
|
||||
<div className='font-semibold text-sm'>Flock</div>
|
||||
<div className='text-sm'>
|
||||
{
|
||||
chickin.data.project_flock_kandang?.project_flock.flock
|
||||
.name
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<div className="font-semibold">Flock</div>
|
||||
<div >{chickin.data.project_flock_kandang?.project_flock.flock.name}</div>
|
||||
<div className='flex flex-col gap-2'>
|
||||
<div className='font-semibold text-sm'>Area</div>
|
||||
<div className='text-sm'>
|
||||
{
|
||||
chickin.data.project_flock_kandang?.project_flock.area
|
||||
.name
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col gap-2'>
|
||||
<div className='font-semibold text-sm'>Kategori</div>
|
||||
<div className='text-sm'>
|
||||
{chickin.data.project_flock_kandang?.project_flock.category}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col gap-2'>
|
||||
<div className='font-semibold text-sm'>Lokasi</div>
|
||||
<div className='text-sm'>
|
||||
{
|
||||
chickin.data.project_flock_kandang?.project_flock.location
|
||||
.name
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col gap-2'>
|
||||
<div className='font-semibold text-sm'>Periode</div>
|
||||
<div className='text-sm'>
|
||||
{chickin.data.project_flock_kandang?.project_flock.period}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col gap-2'>
|
||||
<div className='font-semibold text-sm'>Kandang</div>
|
||||
<div className='text-sm'>
|
||||
{chickin.data.project_flock_kandang?.kandang.name}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card shadow">
|
||||
<div className="card-body">
|
||||
<div className="card-title">
|
||||
Informasi Chickin
|
||||
</Card>
|
||||
<Card
|
||||
title='Detail Chickin'
|
||||
variant='bordered'
|
||||
className={{
|
||||
wrapper: 'w-full',
|
||||
}}
|
||||
>
|
||||
<div className='grid grid-cols-2 gap-4 mt-4'>
|
||||
<div className='flex flex-col gap-2'>
|
||||
<div className='font-semibold text-sm'>Flock Kandang</div>
|
||||
<div className='text-sm'>
|
||||
{
|
||||
chickin.data.project_flock_kandang?.project_flock.flock
|
||||
.name
|
||||
}{' '}
|
||||
- {chickin.data.project_flock_kandang?.kandang.name}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col gap-2'>
|
||||
<div className='font-semibold text-sm'>Tanggal Chickin</div>
|
||||
<div className='text-sm'>
|
||||
{chickin.data.chick_in_date
|
||||
? new Date(chickin.data.chick_in_date).toLocaleDateString(
|
||||
'id-ID'
|
||||
)
|
||||
: '-'}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col gap-2'>
|
||||
<div className='font-semibold text-sm'>Jumlah (Ekor)</div>
|
||||
<div className='text-sm'>
|
||||
{chickin.data.quantity?.toLocaleString('id-ID')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col gap-2'>
|
||||
<div className='font-semibold text-sm'>Catatan</div>
|
||||
<div className='text-sm'>{chickin.data.note}</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<div className='w-full flex flex-col sm:flex-row gap-2'>
|
||||
<Button
|
||||
color='error'
|
||||
onClick={() => {
|
||||
deleteModal.openModal();
|
||||
}}
|
||||
>
|
||||
<Icon icon='mdi:times' width={24} height={24} />
|
||||
Delete
|
||||
</Button>
|
||||
<Button color='warning'
|
||||
onClick={() => {
|
||||
chickinModal.openModal();
|
||||
}}
|
||||
>
|
||||
<Icon icon='mdi:pencil-outline' width={24} height={24} />
|
||||
Edit
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ConfirmationModal
|
||||
ref={deleteModal.ref}
|
||||
type='error'
|
||||
text={`Apakah anda yakin ingin menghapus data Project Flock ini (${chickin?.data.project_flock_kandang?.project_flock.flock.name} - ${chickin?.data.project_flock_kandang?.kandang.name})?`}
|
||||
secondaryButton={{
|
||||
text: 'Tidak',
|
||||
}}
|
||||
primaryButton={{
|
||||
text: 'Ya',
|
||||
color: 'error',
|
||||
isLoading: isDeleteLoading,
|
||||
onClick: confirmationModalDeleteClickHandler,
|
||||
}}
|
||||
/>
|
||||
|
||||
<Modal ref={chickinModal.ref}>
|
||||
<div className='flex flex-row justify-between items-center'>
|
||||
<h1 className='text-xl font-semibold text-center mb-6'>
|
||||
Chickin Kandang -{' '}
|
||||
{chickin?.data?.project_flock_kandang &&
|
||||
chickin?.data?.project_flock_kandang.kandang?.name}
|
||||
</h1>
|
||||
<Button
|
||||
color='error'
|
||||
variant='link'
|
||||
onClick={chickinModal.closeModal}
|
||||
>
|
||||
<Icon
|
||||
className='text-black'
|
||||
icon='uil:times'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
<ChickinForm
|
||||
initialValues={chickin?.data}
|
||||
formType='edit'
|
||||
afterSubmit={() => {
|
||||
refreshChickin();
|
||||
chickinModal.closeModal();
|
||||
}}
|
||||
/>
|
||||
</Modal>
|
||||
|
||||
<ConfirmationModal
|
||||
ref={confirmModal.ref}
|
||||
type={approvalAction == 'APPROVED' ? 'success' : 'error'}
|
||||
text={`Apakah anda yakin ingin ${
|
||||
approvalAction == 'APPROVED' ? 'approve' : 'reject'
|
||||
} chickin berikut? (${
|
||||
chickin?.data.project_flock_kandang?.project_flock.flock.name
|
||||
} - ${chickin?.data.project_flock_kandang?.kandang.name})?`}
|
||||
secondaryButton={{
|
||||
text: 'Tidak',
|
||||
}}
|
||||
primaryButton={{
|
||||
text: 'Ya',
|
||||
color: approvalAction == 'APPROVED' ? 'success' : 'error',
|
||||
isLoading: isApproveLoading,
|
||||
onClick: () => {
|
||||
confirmationModalClickHandler({
|
||||
action: approvalAction,
|
||||
});
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default DetailChickin;
|
||||
export default DetailChickin;
|
||||
|
||||
Reference in New Issue
Block a user