mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-24 23:35:45 +00:00
chore: prettier format
This commit is contained in:
rstubryan
@@ -13,7 +13,7 @@ import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
|
||||
import { ROWS_OPTIONS } from '@/config/constant';
|
||||
import { isResponseSuccess } from '@/lib/api-helper';
|
||||
import { cn, formatNumber } from '@/lib/helper';
|
||||
import { ChickinApi } from '@/services/api/production';
|
||||
import { ChickinApi } from '@/services/api/production/chickin';
|
||||
import { useTableFilter } from '@/services/hooks/useTableFilter';
|
||||
import { Chickin } from '@/types/api/production/chickin';
|
||||
import { Icon } from '@iconify/react';
|
||||
@@ -87,7 +87,7 @@ const ChickinTable = () => {
|
||||
<div className='flex flex-col gap-2 mb-4'>
|
||||
<div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
|
||||
<Button
|
||||
href='/production/chickin/add?projectFlockId=1'
|
||||
href='/production/project-flock/chickin/add?projectFlockId=1'
|
||||
variant='outline'
|
||||
color='primary'
|
||||
className='w-full sm:w-fit'
|
||||
@@ -260,14 +260,14 @@ const ChickinTable = () => {
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
<ChickinForm
|
||||
{/* <ChickinForm
|
||||
initialValues={selectedChickin}
|
||||
formType='edit'
|
||||
afterSubmit={() => {
|
||||
refreshChickins();
|
||||
chickinModal.closeModal();
|
||||
}}
|
||||
/>
|
||||
/> */}
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
@@ -287,7 +287,7 @@ const RowOptionsMenu = ({
|
||||
return (
|
||||
<RowOptionsMenuWrapper type={type}>
|
||||
<Button
|
||||
href={`/production/chickin/detail?chickinId=${props.row.original.id}`}
|
||||
href={`/production/project-flock/chickin/detail?chickinId=${props.row.original.id}`}
|
||||
variant='ghost'
|
||||
color='primary'
|
||||
className='justify-start text-sm'
|
||||
|
||||
@@ -1,13 +1,37 @@
|
||||
import * as Yup from 'yup';
|
||||
|
||||
export const ChickinFormSchema = Yup.object({
|
||||
chick_in_date: Yup.string().required('Tanggal masuk wajib diisi!'),
|
||||
note: Yup.string().required('Catatan wajib diisi!'),
|
||||
quantity: Yup.number()
|
||||
.min(1, 'Jumlah wajib diisi!')
|
||||
.required('Jumlah wajib diisi!'),
|
||||
type ChickinRequestSchemaType = {
|
||||
chick_in_date: string;
|
||||
note?: string | undefined | null;
|
||||
product_warehouse_id: number;
|
||||
};
|
||||
|
||||
type ChickinSchemaType = {
|
||||
project_flock_kandang_id: number;
|
||||
chickin_requests: ChickinRequestSchemaType[];
|
||||
};
|
||||
|
||||
export const ChickinRequestSchema: Yup.ObjectSchema<ChickinRequestSchemaType> =
|
||||
Yup.object({
|
||||
chick_in_date: Yup.string().nullable().required('Tanggal wajib diisi!'),
|
||||
note: Yup.string().nullable(),
|
||||
product_warehouse_id: Yup.number()
|
||||
.min(1, 'Produk wajib diisi!')
|
||||
.required('Produk wajib diisi!'),
|
||||
});
|
||||
|
||||
export const ChickinSchema: Yup.ObjectSchema<ChickinSchemaType> = Yup.object({
|
||||
project_flock_kandang_id: Yup.number()
|
||||
.min(1, 'Project Flock Kandang wajib diisi!')
|
||||
.required('Project Flock Kandang wajib diisi!'),
|
||||
chickin_requests: Yup.array()
|
||||
.of(ChickinRequestSchema)
|
||||
.min(1, 'Minimal harus ada 1 produk!')
|
||||
.required('Produk wajib diisi!'),
|
||||
});
|
||||
|
||||
export type ChickinFormValues = Yup.InferType<typeof ChickinFormSchema>;
|
||||
export type ChickinRequestFormValues = Yup.InferType<
|
||||
typeof ChickinRequestSchema
|
||||
>;
|
||||
|
||||
export const UpdateChickinFormSchema = ChickinFormSchema;
|
||||
export type ChickinFormValues = Yup.InferType<typeof ChickinSchema>;
|
||||
|
||||
@@ -1,220 +1,145 @@
|
||||
'use client';
|
||||
|
||||
import Button from '@/components/Button';
|
||||
import {
|
||||
Chickin,
|
||||
CreateChickinPayload,
|
||||
UpdateChickinPayload,
|
||||
} from '@/types/api/production/chickin';
|
||||
import {
|
||||
ChickinFormSchema,
|
||||
ChickinFormValues,
|
||||
UpdateChickinFormSchema,
|
||||
} from '@/components/pages/production/chickin/form/ChickinForm.schema';
|
||||
import { use, useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { useFormik } from 'formik';
|
||||
import { ChickinApi } from '@/services/api/production';
|
||||
import DateInput from '@/components/input/DateInput';
|
||||
import { isResponseError } from '@/lib/api-helper';
|
||||
import toast from 'react-hot-toast';
|
||||
import { Icon } from '@iconify/react';
|
||||
import TextArea from '@/components/input/TextArea';
|
||||
import TextInput from '@/components/input/TextInput';
|
||||
import NumberInput from '@/components/input/NumberInput';
|
||||
|
||||
interface ChickinFormProps {
|
||||
formType?: 'add' | 'detail' | 'edit';
|
||||
initialValues?: Chickin;
|
||||
afterSubmit?: () => void;
|
||||
}
|
||||
|
||||
const ChickinForm = ({
|
||||
import Card from '@/components/Card';
|
||||
import { FormHeader } from '@/components/helper/form/FormHeader';
|
||||
import Table from '@/components/Table';
|
||||
import { formatNumber } from '@/lib/helper';
|
||||
import { Kandang } from '@/types/api/master-data/kandang';
|
||||
import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
|
||||
import Tabs from '@/components/Tabs';
|
||||
import ChickinFormView from './tabs/ChickinFormView';
|
||||
import ChickinLogsView from './tabs/ChickLogsView';
|
||||
import { useState } from 'react';
|
||||
import ApprovalSteps, {
|
||||
useApprovalSteps,
|
||||
} from '@/components/pages/ApprovalSteps';
|
||||
import { PROJECT_FLOCK_KANDANG_APPROVAL_LINE } from '@/config/approval-line';
|
||||
const ChickinFormKandang = ({
|
||||
formType = 'add',
|
||||
initialValues,
|
||||
afterSubmit,
|
||||
}: ChickinFormProps) => {
|
||||
// Helper Function
|
||||
const formatDateForInput = (dateString?: string): string => {
|
||||
if (!dateString) return '';
|
||||
return new Date(dateString).toISOString().split('T')[0];
|
||||
};
|
||||
}: {
|
||||
formType?: 'add' | 'detail' | 'edit';
|
||||
initialValues: ProjectFlockKandang;
|
||||
afterSubmit?: () => void;
|
||||
}) => {
|
||||
const [activeTabId, setActiveTabId] = useState<string>('formChickIn');
|
||||
|
||||
// State
|
||||
const [chickinFormErrorMessage, setChickinFormErrorMessage] = useState('');
|
||||
|
||||
// Initial Value
|
||||
const formikInitialValue = useMemo<ChickinFormValues>(() => {
|
||||
return {
|
||||
chick_in_date: formatDateForInput(initialValues?.chick_in_date) ?? '',
|
||||
note: initialValues?.note ?? '',
|
||||
quantity:
|
||||
initialValues?.quantity ??
|
||||
initialValues?.project_flock_kandang?.available_quantity ??
|
||||
0,
|
||||
};
|
||||
}, [initialValues]);
|
||||
|
||||
// Handle Submit Function
|
||||
const handleCreate = useCallback(
|
||||
async (
|
||||
payload: CreateChickinPayload,
|
||||
afterSubmit: (() => void) | undefined
|
||||
) => {
|
||||
const res = await ChickinApi.create(payload);
|
||||
if (isResponseError(res)) {
|
||||
setChickinFormErrorMessage(res.message);
|
||||
return;
|
||||
}
|
||||
toast.success(res?.message as string);
|
||||
afterSubmit?.();
|
||||
},
|
||||
[]
|
||||
);
|
||||
const handleUpdate = useCallback(
|
||||
async (
|
||||
payload: UpdateChickinPayload,
|
||||
afterSubmit: (() => void) | undefined
|
||||
) => {
|
||||
const res = await ChickinApi.update(payload.id, payload);
|
||||
if (isResponseError(res)) {
|
||||
setChickinFormErrorMessage(res.message);
|
||||
return;
|
||||
}
|
||||
toast.success(res?.message as string);
|
||||
afterSubmit?.();
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
// Formik
|
||||
const formik = useFormik<ChickinFormValues>({
|
||||
initialValues: formikInitialValue,
|
||||
enableReinitialize: true,
|
||||
validationSchema:
|
||||
formType === 'edit' ? UpdateChickinFormSchema : ChickinFormSchema,
|
||||
onSubmit: async (values) => {
|
||||
// reset error message
|
||||
setChickinFormErrorMessage('');
|
||||
|
||||
if (
|
||||
initialValues?.project_flock_kandang?.id == undefined ||
|
||||
(formType == 'edit' && initialValues?.id == undefined)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
// create payload
|
||||
const payload = {
|
||||
chick_in_date: values.chick_in_date,
|
||||
project_flock_kandang_id: initialValues?.project_flock_kandang?.id,
|
||||
note: values.note,
|
||||
quantity: values.quantity,
|
||||
id: initialValues.id ?? 0,
|
||||
};
|
||||
|
||||
// cek type form yang disubmit
|
||||
console.log(formType);
|
||||
switch (formType) {
|
||||
case 'add':
|
||||
handleCreate(payload, afterSubmit);
|
||||
break;
|
||||
case 'edit':
|
||||
handleUpdate(payload, afterSubmit);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
const {
|
||||
approvals,
|
||||
isLoading: approvalsLoading,
|
||||
refresh: refreshApprovals,
|
||||
} = useApprovalSteps({
|
||||
latestApproval: initialValues?.approval,
|
||||
approvalLines: PROJECT_FLOCK_KANDANG_APPROVAL_LINE,
|
||||
moduleName: 'PROJECT_FLOCK_KANDANGS',
|
||||
moduleId: initialValues?.id.toString() ?? '',
|
||||
});
|
||||
|
||||
// Initialize Formik
|
||||
const { setValues: formikSetValues } = formik;
|
||||
useEffect(() => {
|
||||
formikSetValues(formikInitialValue);
|
||||
}, [formikSetValues, formikInitialValue]);
|
||||
const afterSubmitFormChickin = () => {
|
||||
setActiveTabId('logsChickIn');
|
||||
afterSubmit && afterSubmit();
|
||||
refreshApprovals();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<form
|
||||
className='min-h-48 flex flex-col gap-4'
|
||||
onSubmit={formik.handleSubmit}
|
||||
onReset={formik.handleReset}
|
||||
<div className='flex flex-col gap-4'>
|
||||
<FormHeader
|
||||
title='Chick In DOC'
|
||||
backUrl={`/production/project-flock/chickin/add?projectFlockId=${initialValues?.project_flock?.id}`}
|
||||
/>
|
||||
|
||||
{approvals && !approvalsLoading && (
|
||||
<ApprovalSteps approvals={approvals} />
|
||||
)}
|
||||
|
||||
<Card
|
||||
title='Informasi Kandang'
|
||||
className={{
|
||||
wrapper: 'w-full bg-white mt-4',
|
||||
}}
|
||||
>
|
||||
<DateInput
|
||||
value={formik.values.chick_in_date}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
name='chick_in_date'
|
||||
label='Tanggal Chickin'
|
||||
required
|
||||
isError={
|
||||
formik.touched.chick_in_date && Boolean(formik.errors.chick_in_date)
|
||||
<Table<Kandang>
|
||||
emptyContent={
|
||||
<div className='w-full p-5 text-center'>
|
||||
<span className='text-lg opacity-50'>
|
||||
Informasi Kandang belum tersedia...
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
errorMessage={formik.errors.chick_in_date}
|
||||
data={[initialValues?.kandang]}
|
||||
columns={[
|
||||
{
|
||||
header: 'Area',
|
||||
accessorFn: () => initialValues?.project_flock?.area.name || '-',
|
||||
},
|
||||
{
|
||||
header: 'Lokasi',
|
||||
accessorFn: () =>
|
||||
initialValues?.project_flock?.location.name || '-',
|
||||
},
|
||||
{
|
||||
header: 'Flock',
|
||||
accessorFn: () => initialValues?.project_flock?.flock_name || '-',
|
||||
},
|
||||
{
|
||||
header: 'Kandang',
|
||||
accessorFn: (row) => row?.name || '-',
|
||||
},
|
||||
{
|
||||
header: 'Kapasitas',
|
||||
accessorFn: (row) =>
|
||||
(row?.capacity && formatNumber(row?.capacity)) || '-',
|
||||
},
|
||||
{
|
||||
header: 'Penanggung Jawab',
|
||||
accessorFn: (row) => row?.pic?.name || '-',
|
||||
},
|
||||
]}
|
||||
className={{
|
||||
tableWrapperClassName: 'overflow-x-auto min-h-full!',
|
||||
tableClassName: 'font-inter w-full table-auto min-h-full!',
|
||||
headerRowClassName: 'border-b border-b-gray-200',
|
||||
headerColumnClassName:
|
||||
'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
|
||||
bodyRowClassName: 'border-b border-b-gray-200',
|
||||
bodyColumnClassName:
|
||||
'px-6 py-3 last:flex last:flex-row last:justify-end',
|
||||
paginationClassName: 'hidden',
|
||||
}}
|
||||
/>
|
||||
<NumberInput
|
||||
value={formik.values.quantity}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
name='quantity'
|
||||
label='Jumlah (Ekor)'
|
||||
required
|
||||
isError={
|
||||
(formik.touched.quantity && Boolean(formik.errors.quantity)) ||
|
||||
formik.values.quantity == 0
|
||||
}
|
||||
errorMessage={
|
||||
formik.values.quantity == 0
|
||||
? 'Masukan Persediaan Day Old Chick terlebih dahulu.'
|
||||
: formik.errors.quantity
|
||||
}
|
||||
readOnly
|
||||
/>
|
||||
<TextArea
|
||||
required
|
||||
label='Catatan'
|
||||
name='note'
|
||||
placeholder='Masukan catatan chickin'
|
||||
value={formik.values.note}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={formik.touched.note && Boolean(formik.errors.note)}
|
||||
errorMessage={formik.errors.note}
|
||||
/>
|
||||
{initialValues?.project_flock_kandang?.id == undefined && (
|
||||
<p className='text-error'>Project Flock Kandang tidak ditemukan.</p>
|
||||
)}
|
||||
{chickinFormErrorMessage && (
|
||||
<div
|
||||
role='alert'
|
||||
className='alert alert-error'
|
||||
onClick={() => {
|
||||
setChickinFormErrorMessage('');
|
||||
}}
|
||||
>
|
||||
<Icon icon='mdi:times' />
|
||||
<span>{chickinFormErrorMessage}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className='flex justify-center mt-auto gap-2'>
|
||||
<Button color='warning' type='reset'>
|
||||
Reset
|
||||
</Button>
|
||||
<Button
|
||||
type='submit'
|
||||
isLoading={formik.isSubmitting}
|
||||
disabled={
|
||||
!formik.isValid ||
|
||||
formik.isSubmitting ||
|
||||
!initialValues?.project_flock_kandang?.id
|
||||
}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</>
|
||||
</Card>
|
||||
<Tabs
|
||||
className='bg-white p-2'
|
||||
onTabChange={setActiveTabId}
|
||||
activeTabId={activeTabId}
|
||||
tabs={[
|
||||
{
|
||||
id: 'formChickIn',
|
||||
label: 'Tambah Chick In',
|
||||
content: (
|
||||
<ChickinFormView
|
||||
initialValues={initialValues}
|
||||
formType={formType}
|
||||
afterSubmit={afterSubmitFormChickin}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
content: (
|
||||
<ChickinLogsView
|
||||
initialValues={initialValues}
|
||||
afterSubmit={afterSubmitFormChickin}
|
||||
/>
|
||||
),
|
||||
id: 'logsChickIn',
|
||||
label: 'Riwayat Chick In',
|
||||
},
|
||||
]}
|
||||
variant='lifted'
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChickinForm;
|
||||
export default ChickinFormKandang;
|
||||
|
||||
@@ -0,0 +1,172 @@
|
||||
import Alert from '@/components/Alert';
|
||||
import Button from '@/components/Button';
|
||||
import Card from '@/components/Card';
|
||||
import { useModal } from '@/components/Modal';
|
||||
import ConfirmationModal from '@/components/modal/ConfirmationModal';
|
||||
import PillBadge from '@/components/PillBadge';
|
||||
import Table from '@/components/Table';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import { cn, formatDate, formatNumber } from '@/lib/helper';
|
||||
import { ChickinApi } from '@/services/api/production/chickin';
|
||||
import {
|
||||
Chickin,
|
||||
ProjectFlockKandang,
|
||||
} from '@/types/api/production/project-flock-kandang';
|
||||
import { Icon } from '@iconify/react';
|
||||
import { useState } from 'react';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
const ChickinLogsView = ({
|
||||
initialValues,
|
||||
afterSubmit,
|
||||
}: {
|
||||
initialValues: ProjectFlockKandang;
|
||||
afterSubmit?: () => void;
|
||||
}) => {
|
||||
const confirmModal = useModal();
|
||||
const [isApproveLoading, setIsApproveLoading] = useState(false);
|
||||
const [chickinErrorMessage, setChickinErrorMessage] = useState('');
|
||||
|
||||
const handleClickApprove = () => {
|
||||
confirmModal.openModal();
|
||||
};
|
||||
|
||||
const confirmationModalApproveClickHandler = async () => {
|
||||
setChickinErrorMessage('');
|
||||
setIsApproveLoading(true);
|
||||
const approveChickinRes = await ChickinApi.singleApproval(
|
||||
initialValues?.id as number,
|
||||
'APPROVED'
|
||||
);
|
||||
if (isResponseSuccess(approveChickinRes)) {
|
||||
toast.success(approveChickinRes?.message as string);
|
||||
}
|
||||
if (isResponseError(approveChickinRes)) {
|
||||
toast.error(approveChickinRes?.message as string);
|
||||
setChickinErrorMessage(approveChickinRes?.message as string);
|
||||
}
|
||||
confirmModal.closeModal();
|
||||
setIsApproveLoading(false);
|
||||
afterSubmit && afterSubmit();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
title='Riwayat Chick In'
|
||||
className={{
|
||||
wrapper: 'w-full bg-white',
|
||||
}}
|
||||
>
|
||||
<div className='flex flex-row justify-start gap-3 mt-3'>
|
||||
{initialValues?.approval?.step_number == 1 && (
|
||||
<Button
|
||||
color='success'
|
||||
variant='outline'
|
||||
onClick={handleClickApprove}
|
||||
>
|
||||
<Icon width={24} height={24} icon='material-symbols:check' />
|
||||
Approve
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<Table<Chickin>
|
||||
data={initialValues?.chickins || []}
|
||||
columns={[
|
||||
{
|
||||
header: '#',
|
||||
cell: (props) => props.row.index + 1,
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.chick_in_date,
|
||||
header: 'Tanggal Chick In',
|
||||
cell: (props) => {
|
||||
return formatDate(props.getValue() as string, 'DD MMM YYYY');
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.product_warehouse?.warehouse?.name,
|
||||
header: 'Kandang',
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.product_warehouse?.product?.name,
|
||||
header: 'Produk',
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.usage_qty ?? row.pending_usage_qty,
|
||||
header: 'Jumlah Chick In',
|
||||
cell: (props) => {
|
||||
if (props.row.original.usage_qty != 0) {
|
||||
return formatNumber(props.row.original.usage_qty);
|
||||
} else if (props.row.original.pending_usage_qty != 0) {
|
||||
return formatNumber(props.row.original.pending_usage_qty);
|
||||
} else {
|
||||
return '-';
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.pending_usage_qty,
|
||||
header: 'Status',
|
||||
cell: (props) => {
|
||||
return (
|
||||
<PillBadge
|
||||
content={
|
||||
props.row.original.usage_qty !== 0
|
||||
? 'Disetujui'
|
||||
: props.row.original.pending_usage_qty !== 0
|
||||
? 'Pending'
|
||||
: '-'
|
||||
}
|
||||
color={
|
||||
props.row.original.usage_qty !== 0
|
||||
? 'green'
|
||||
: props.row.original.pending_usage_qty !== 0
|
||||
? 'yellow'
|
||||
: 'gray'
|
||||
}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
]}
|
||||
className={{
|
||||
containerClassName: cn({
|
||||
'mb-20': initialValues?.chickins?.length === 0,
|
||||
}),
|
||||
tableWrapperClassName: 'overflow-x-auto min-h-full!',
|
||||
tableClassName: 'font-inter w-full table-auto min-h-full!',
|
||||
headerRowClassName: 'border-b border-b-gray-200',
|
||||
headerColumnClassName:
|
||||
'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
|
||||
bodyRowClassName: 'border-b border-b-gray-200',
|
||||
bodyColumnClassName:
|
||||
'px-6 py-3 last:flex last:flex-row last:justify-end',
|
||||
paginationClassName: 'hidden',
|
||||
}}
|
||||
/>
|
||||
{chickinErrorMessage && (
|
||||
<div className='w-full' onClick={() => setChickinErrorMessage('')}>
|
||||
<Alert color='error'>{chickinErrorMessage}</Alert>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
<ConfirmationModal
|
||||
ref={confirmModal.ref}
|
||||
type='success'
|
||||
text={`Apakah anda yakin ingin approve data Chickin yang Pending?`}
|
||||
secondaryButton={{
|
||||
text: 'Tidak',
|
||||
}}
|
||||
primaryButton={{
|
||||
text: 'Ya',
|
||||
color: 'success',
|
||||
onClick: confirmationModalApproveClickHandler,
|
||||
isLoading: isApproveLoading,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChickinLogsView;
|
||||
@@ -0,0 +1,233 @@
|
||||
'use client';
|
||||
|
||||
import Card from '@/components/Card';
|
||||
import Table from '@/components/Table';
|
||||
import {
|
||||
ChickinFormValues,
|
||||
ChickinRequestFormValues,
|
||||
ChickinSchema,
|
||||
} from '../ChickinForm.schema';
|
||||
import DateInput from '@/components/input/DateInput';
|
||||
import SelectInput, { OptionType } from '@/components/input/SelectInput';
|
||||
import NumberInput from '@/components/input/NumberInput';
|
||||
import Button from '@/components/Button';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { useFormik } from 'formik';
|
||||
import { flushSync } from 'react-dom';
|
||||
import { CreateChickinPayload } from '@/types/api/production/chickin';
|
||||
import { ChickinApi } from '@/services/api/production/chickin';
|
||||
import { isResponseError } from '@/lib/api-helper';
|
||||
import toast from 'react-hot-toast';
|
||||
import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Alert from '@/components/Alert';
|
||||
import { formatNumber } from '@/lib/helper';
|
||||
|
||||
const ChickinFormView = ({
|
||||
formType = 'add',
|
||||
initialValues,
|
||||
afterSubmit,
|
||||
}: {
|
||||
formType?: 'add' | 'detail' | 'edit';
|
||||
initialValues: ProjectFlockKandang;
|
||||
afterSubmit?: () => void;
|
||||
}) => {
|
||||
const router = useRouter();
|
||||
const [chickinErrorMessage, setChickinErrorMessage] = useState('');
|
||||
|
||||
const createChickin = useCallback(
|
||||
async (payload: CreateChickinPayload) => {
|
||||
const createChickinRes = await ChickinApi.create(payload);
|
||||
if (isResponseError(createChickinRes)) {
|
||||
setChickinErrorMessage(createChickinRes.message);
|
||||
return;
|
||||
}
|
||||
|
||||
toast.success(createChickinRes?.message as string);
|
||||
// router.push(
|
||||
// `/production/project-flock/chickin/add?projectFlockId=${initialValues?.project_flock?.id}`
|
||||
// );
|
||||
if (afterSubmit) {
|
||||
afterSubmit();
|
||||
}
|
||||
},
|
||||
[router]
|
||||
);
|
||||
const handleReset = async () => {
|
||||
flushSync(() => {
|
||||
formik.resetForm({
|
||||
values: {
|
||||
project_flock_kandang_id: initialValues?.id,
|
||||
chickin_requests: initialValues?.available_qtys
|
||||
? initialValues.available_qtys.map((availableQty) => ({
|
||||
chick_in_date: '',
|
||||
product_warehouse_id: availableQty.product_warehouse.id,
|
||||
available_qty: availableQty.available_qty,
|
||||
note: `Chickin project-flock-kandang-${initialValues?.id} product-warehouse-${availableQty.product_warehouse.id}`,
|
||||
}))
|
||||
: [],
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
formik.setTouched({
|
||||
chickin_requests: initialValues?.available_qtys?.map(() => ({
|
||||
chick_in_date: true,
|
||||
})),
|
||||
});
|
||||
|
||||
const errors = await formik.validateForm();
|
||||
formik.setErrors(errors);
|
||||
};
|
||||
|
||||
const formik = useFormik<ChickinFormValues>({
|
||||
enableReinitialize: true,
|
||||
validationSchema: ChickinSchema,
|
||||
initialValues: {
|
||||
project_flock_kandang_id: initialValues?.id,
|
||||
chickin_requests: initialValues?.available_qtys
|
||||
? initialValues.available_qtys.map((availableQty) => ({
|
||||
chick_in_date: '',
|
||||
product_warehouse_id: availableQty.product_warehouse.id,
|
||||
available_qty: availableQty.available_qty,
|
||||
note: `Chickin project-flock-kandang-${initialValues?.id} product-warehouse-${availableQty.product_warehouse.id}`,
|
||||
}))
|
||||
: [],
|
||||
},
|
||||
onSubmit: (values) => {
|
||||
setChickinErrorMessage('');
|
||||
createChickin(values as CreateChickinPayload);
|
||||
if (afterSubmit) {
|
||||
afterSubmit();
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const { setValues: formikSetValues } = formik;
|
||||
|
||||
useEffect(() => {
|
||||
formikSetValues({
|
||||
project_flock_kandang_id: initialValues?.id,
|
||||
chickin_requests: initialValues?.available_qtys
|
||||
? initialValues.available_qtys.map((availableQty) => ({
|
||||
chick_in_date: '',
|
||||
product_warehouse_id: availableQty.product_warehouse.id,
|
||||
available_qty: availableQty.available_qty,
|
||||
note: `Chickin project-flock-kandang-${initialValues?.id} product-warehouse-${availableQty.product_warehouse.id}`,
|
||||
}))
|
||||
: [],
|
||||
});
|
||||
}, [formikSetValues, initialValues]);
|
||||
|
||||
return (
|
||||
<form
|
||||
className='flex flex-col gap-4'
|
||||
onReset={(e) => {
|
||||
handleReset();
|
||||
}}
|
||||
onSubmit={formik.handleSubmit}
|
||||
>
|
||||
<Card
|
||||
title='Informasi Chick In DOC'
|
||||
className={{
|
||||
wrapper: 'w-full bg-white',
|
||||
}}
|
||||
>
|
||||
<Table<ChickinRequestFormValues>
|
||||
data={formik.values.chickin_requests || []}
|
||||
columns={[
|
||||
{
|
||||
accessorFn: (row) => row.chick_in_date,
|
||||
header: 'Tanggal Chick In',
|
||||
cell(props) {
|
||||
return (
|
||||
<DateInput
|
||||
className={{
|
||||
wrapper: 'w-fit',
|
||||
inputWrapper: 'bg-white',
|
||||
}}
|
||||
name={`chickin_requests[${props.row.index}].chick_in_date`}
|
||||
value={
|
||||
formik.values.chickin_requests[props.row.index]
|
||||
?.chick_in_date as string
|
||||
}
|
||||
onChange={formik.handleChange}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.product_warehouse_id,
|
||||
header: 'Produk',
|
||||
cell(props) {
|
||||
const availableQty = initialValues?.available_qtys?.find(
|
||||
(availableQty) =>
|
||||
availableQty.product_warehouse.id ===
|
||||
props.row.original.product_warehouse_id
|
||||
);
|
||||
return (
|
||||
<div>{availableQty?.product_warehouse?.product?.name}</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.product_warehouse_id,
|
||||
header: 'Jumlah (ekor)',
|
||||
cell(props) {
|
||||
const availableQty = initialValues?.available_qtys?.find(
|
||||
(availableQty) =>
|
||||
availableQty.product_warehouse.id ===
|
||||
props.row.original.product_warehouse_id
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
{availableQty?.available_qty
|
||||
? formatNumber(availableQty?.available_qty)
|
||||
: '-'}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
]}
|
||||
className={{
|
||||
tableWrapperClassName: 'overflow-x-auto min-h-full!',
|
||||
tableClassName: 'font-inter w-full table-auto min-h-full!',
|
||||
headerRowClassName: 'border-b border-b-gray-200',
|
||||
headerColumnClassName:
|
||||
'px-2 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
|
||||
bodyRowClassName: 'border-b border-b-gray-200',
|
||||
bodyColumnClassName:
|
||||
'px-2 py-2 last:flex last:flex-row last:justify-end',
|
||||
paginationClassName: 'hidden',
|
||||
}}
|
||||
emptyContent={
|
||||
<div className='w-full p-5 text-center'>
|
||||
<span className='text-lg opacity-50'>
|
||||
Isi persediaan DOC untuk kandang belum tersedia...
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</Card>
|
||||
<div className='flex flex-row justify-center gap-3'>
|
||||
<Button type='reset' color='warning' disabled={formik.isSubmitting}>
|
||||
Reset
|
||||
</Button>
|
||||
<Button
|
||||
type='submit'
|
||||
color='primary'
|
||||
disabled={!formik.isValid || formik.isSubmitting}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</div>
|
||||
{chickinErrorMessage && (
|
||||
<div className='w-full' onClick={() => setChickinErrorMessage('')}>
|
||||
<Alert color='error'>{chickinErrorMessage}</Alert>
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChickinFormView;
|
||||
@@ -9,12 +9,11 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
|
||||
import Table from '@/components/Table';
|
||||
import RowCollapseOptions from '@/components/table/RowCollapseOptions';
|
||||
import RowDropdownOptions from '@/components/table/RowDropdownOptions';
|
||||
import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
|
||||
import { ROWS_OPTIONS } from '@/config/constant';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import { cn } from '@/lib/helper';
|
||||
import { AreaApi, KandangApi, LocationApi } from '@/services/api/master-data';
|
||||
import { ProjectFlockApi } from '@/services/api/production';
|
||||
import { ProjectFlockApi } from '@/services/api/production/project-flock';
|
||||
import { useTableFilter } from '@/services/hooks/useTableFilter';
|
||||
import { BaseApiResponse } from '@/types/api/api-general';
|
||||
import { Kandang } from '@/types/api/master-data/kandang';
|
||||
@@ -38,53 +37,63 @@ const RowOptionsMenu = ({
|
||||
deleteClickHandler: () => void;
|
||||
}) => {
|
||||
return (
|
||||
<RowOptionsMenuWrapper type={type}>
|
||||
<Button
|
||||
href={`/production/project-flock/detail?projectFlockId=${props.row.original.id}`}
|
||||
variant='ghost'
|
||||
color='primary'
|
||||
className='justify-start text-sm'
|
||||
>
|
||||
<Icon icon='mdi:eye-outline' width={16} height={16} />
|
||||
Detail
|
||||
</Button>
|
||||
{props.row.original.approval.step_name === 'Aktif' && (
|
||||
<div
|
||||
tabIndex={type == 'dropdown' ? 0 : undefined}
|
||||
className={cn(
|
||||
{
|
||||
'dropdown-content': type === 'dropdown',
|
||||
'mt-2': type === 'collapse',
|
||||
},
|
||||
'p-2.5 mr-2 bg-base-100 rounded-box z-10 border border-black/10 shadow'
|
||||
)}
|
||||
>
|
||||
<div className='flex flex-col gap-1'>
|
||||
<Button
|
||||
href={`/production/chickin/add?projectFlockId=${props.row.original.id}`}
|
||||
href={`/production/project-flock/detail?projectFlockId=${props.row.original.id}`}
|
||||
variant='ghost'
|
||||
color='success'
|
||||
color='primary'
|
||||
className='justify-start text-sm'
|
||||
>
|
||||
<Icon icon='mdi:home-import-outline' width={16} height={16} />
|
||||
Chickin
|
||||
<Icon icon='mdi:eye-outline' width={16} height={16} />
|
||||
Detail
|
||||
</Button>
|
||||
)}
|
||||
{props.row.original.approval.step_name === 'Pengajuan' && (
|
||||
{props.row.original.approval.step_name === 'Aktif' && (
|
||||
<Button
|
||||
href={`/production/project-flock/chickin/add?projectFlockId=${props.row.original.id}`}
|
||||
variant='ghost'
|
||||
color='success'
|
||||
className='justify-start text-sm'
|
||||
>
|
||||
<Icon icon='mdi:home-import-outline' width={16} height={16} />
|
||||
Chickin
|
||||
</Button>
|
||||
)}
|
||||
{props.row.original.approval.step_name === 'Pengajuan' && (
|
||||
<Button
|
||||
href={`/production/project-flock/detail/edit?projectFlockId=${props.row.original.id}`}
|
||||
variant='ghost'
|
||||
color='warning'
|
||||
className='justify-start text-sm'
|
||||
>
|
||||
<Icon icon='mdi:pencil-outline' width={16} height={16} />
|
||||
Edit
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
href={`/production/project-flock/detail/edit?projectFlockId=${props.row.original.id}`}
|
||||
onClick={deleteClickHandler}
|
||||
variant='ghost'
|
||||
color='warning'
|
||||
className='justify-start text-sm'
|
||||
color='error'
|
||||
className='text-error hover:text-inherit justify-start text-sm'
|
||||
>
|
||||
<Icon icon='mdi:pencil-outline' width={16} height={16} />
|
||||
Edit
|
||||
<Icon
|
||||
icon='material-symbols:delete-outline-rounded'
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Delete
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
onClick={deleteClickHandler}
|
||||
variant='ghost'
|
||||
color='error'
|
||||
className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
|
||||
>
|
||||
<Icon
|
||||
icon='material-symbols:delete-outline-rounded'
|
||||
width={16}
|
||||
height={16}
|
||||
className='justify-start text-sm'
|
||||
/>
|
||||
Delete
|
||||
</Button>
|
||||
</RowOptionsMenuWrapper>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -417,7 +426,7 @@ const ProjectFlockTable = () => {
|
||||
},
|
||||
|
||||
{
|
||||
accessorKey: 'flock.name',
|
||||
accessorKey: 'flock_name',
|
||||
header: 'Flock',
|
||||
},
|
||||
{
|
||||
@@ -564,19 +573,7 @@ const ProjectFlockTable = () => {
|
||||
<ConfirmationModal
|
||||
ref={confirmModal.ref}
|
||||
type='success'
|
||||
text={`Apakah anda yakin ingin reject data transfer ke laying ini (${selectedRowIds.length} data)?`}
|
||||
// text={
|
||||
// selectedFlocks.length > 0
|
||||
// ? `Apakah anda yakin ingin approve Project Flock berikut? (${selectedFlocks
|
||||
// .map(
|
||||
// (flock) =>
|
||||
// `${flock.flock?.name ?? '(Tanpa nama)'} - ${
|
||||
// flock.area?.name ?? '-'
|
||||
// }`
|
||||
// )
|
||||
// .join(', ')})`
|
||||
// : 'Tidak ada Project Flock yang dipilih.'
|
||||
// }
|
||||
text={`Apakah anda yakin ingin approve data Project Flock ini (${selectedRowIds.length} data)?`}
|
||||
secondaryButton={{
|
||||
text: 'Tidak',
|
||||
}}
|
||||
|
||||
@@ -0,0 +1,358 @@
|
||||
'use client';
|
||||
|
||||
import Badge from '@/components/Badge';
|
||||
import Button from '@/components/Button';
|
||||
import Card from '@/components/Card';
|
||||
import SelectInput, {
|
||||
OptionType,
|
||||
useSelect,
|
||||
} from '@/components/input/SelectInput';
|
||||
import PillBadge from '@/components/PillBadge';
|
||||
import Table from '@/components/Table';
|
||||
import { isResponseSuccess } from '@/lib/api-helper';
|
||||
import { cn } from '@/lib/helper';
|
||||
import { ProjectFlockApi } from '@/services/api/production/project-flock';
|
||||
import { ProjectFlockKandangApi } from '@/services/api/production';
|
||||
import { useTableFilter } from '@/services/hooks/useTableFilter';
|
||||
import { Kandang } from '@/types/api/master-data/kandang';
|
||||
import { ProjectFlock } from '@/types/api/production/project-flock';
|
||||
import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
|
||||
import { Icon } from '@iconify/react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import useSWR from 'swr';
|
||||
|
||||
const ProjectFlockChickinDetail = ({
|
||||
projectFlockId,
|
||||
}: {
|
||||
projectFlockId: number | undefined;
|
||||
}) => {
|
||||
const router = useRouter();
|
||||
|
||||
// Tables Props
|
||||
const { state: tableFilterState } = useTableFilter({
|
||||
initial: { search: '' },
|
||||
paramMap: { page: 'page', pageSize: 'limit' },
|
||||
});
|
||||
|
||||
// States
|
||||
const [searchProjectFlock, setSearchProjectFlock] = useState('');
|
||||
const [selectedProjectFlock, setSelectedProjectFlock] =
|
||||
useState<OptionType | null>(null);
|
||||
const [projectFlock, setProjectFlock] = useState<ProjectFlock>();
|
||||
|
||||
// Fetch Data
|
||||
const {
|
||||
data: listProjectFlockKandang,
|
||||
isLoading: isLoadingListProjectFlockKandang,
|
||||
} = useSWR(
|
||||
`${ProjectFlockKandangApi.basePath}?${new URLSearchParams({
|
||||
search: searchProjectFlock,
|
||||
project_flock_id:
|
||||
projectFlock?.id?.toString() ?? projectFlockId?.toString() ?? '',
|
||||
}).toString()}`,
|
||||
ProjectFlockKandangApi.getAllFetcher
|
||||
);
|
||||
|
||||
const {
|
||||
options: options,
|
||||
isLoadingOptions: isLoadingListProjectFlock,
|
||||
rawData: listProjectFlock,
|
||||
} = useSelect<ProjectFlock>(
|
||||
ProjectFlockApi.basePath,
|
||||
'id',
|
||||
'flock_name',
|
||||
'',
|
||||
{
|
||||
search: searchProjectFlock,
|
||||
}
|
||||
);
|
||||
|
||||
// Handle Function
|
||||
const handleChickinClick = async (
|
||||
projectFlockKandang: ProjectFlockKandang
|
||||
) => {
|
||||
router.push(
|
||||
`/production/project-flock/chickin/add/kandang?projectFlockKandangId=${projectFlockKandang.id}&projectFlockId=${projectFlockId ?? selectedProjectFlock?.value}`
|
||||
);
|
||||
};
|
||||
|
||||
const handleChangeProjectFlock = (val: OptionType | null) => {
|
||||
setSelectedProjectFlock(val);
|
||||
if (isResponseSuccess(listProjectFlock) && val) {
|
||||
const selected = listProjectFlock.data.find(
|
||||
(pf) => pf.id === Number(val.value)
|
||||
);
|
||||
setProjectFlock(selected);
|
||||
} else {
|
||||
setProjectFlock(undefined);
|
||||
}
|
||||
if (projectFlockId) {
|
||||
router.push('/production/project-flock/chickin/add');
|
||||
}
|
||||
if (!val && projectFlockId) {
|
||||
router.push('/production/project-flock/chickin/add');
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (projectFlockId && isResponseSuccess(listProjectFlock)) {
|
||||
setProjectFlock(
|
||||
listProjectFlock.data.find((pf) => pf.id === Number(projectFlockId))
|
||||
);
|
||||
}
|
||||
}, [projectFlockId, listProjectFlock]);
|
||||
return (
|
||||
<>
|
||||
<div className='flex flex-col gap-4 w-full my-4'>
|
||||
<div className='max-w-full sm:max-w-1/2 md:max-w-3/5 lg:max-w-2/5'>
|
||||
<SelectInput
|
||||
required
|
||||
label='Ganti Project Flock'
|
||||
placeholder='Pilih Project Flock'
|
||||
options={options}
|
||||
onInputChange={(val) => {
|
||||
setSearchProjectFlock(val);
|
||||
}}
|
||||
isLoading={isLoadingListProjectFlock}
|
||||
value={
|
||||
projectFlock
|
||||
? {
|
||||
label: `${projectFlock?.flock?.name}`,
|
||||
value: projectFlock?.id,
|
||||
}
|
||||
: null
|
||||
}
|
||||
onChange={(val) => {
|
||||
handleChangeProjectFlock(val as OptionType | null);
|
||||
}}
|
||||
isSearchable
|
||||
isClearable
|
||||
startAdornment={
|
||||
projectFlock && (
|
||||
<Badge
|
||||
variant='soft'
|
||||
color='success'
|
||||
size='sm'
|
||||
className={{
|
||||
badge: 'whitespace-nowrap font-semibold',
|
||||
}}
|
||||
>
|
||||
Periode {projectFlock?.period}
|
||||
</Badge>
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Card
|
||||
title='Informasi Flock'
|
||||
className={{
|
||||
wrapper: 'w-full bg-white mb-3',
|
||||
}}
|
||||
>
|
||||
<Table<ProjectFlock>
|
||||
emptyContent={
|
||||
<div className='w-full p-5 text-center'>
|
||||
<span className='text-lg opacity-50'>
|
||||
Pilih project flock terlebih dahulu...
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
data={projectFlock ? [projectFlock] : []}
|
||||
columns={[
|
||||
{
|
||||
header: 'ID',
|
||||
accessorKey: 'id',
|
||||
},
|
||||
{
|
||||
header: 'Area',
|
||||
accessorKey: 'area.name',
|
||||
},
|
||||
{
|
||||
header: 'Lokasi',
|
||||
accessorKey: 'location.name',
|
||||
},
|
||||
{
|
||||
header: 'Nama Flock',
|
||||
accessorKey: 'flock.name',
|
||||
},
|
||||
{
|
||||
header: 'Kategori',
|
||||
accessorKey: 'category',
|
||||
},
|
||||
{
|
||||
header: 'Status',
|
||||
accessorKey: 'status',
|
||||
cell: (props) => {
|
||||
return props.row.original.approval?.step_name ? (
|
||||
<PillBadge
|
||||
color={(() => {
|
||||
switch (
|
||||
props.row.original.approval?.step_name.toUpperCase()
|
||||
) {
|
||||
case 'AKTIF':
|
||||
return 'red';
|
||||
case 'PENGAJUAN':
|
||||
return 'green';
|
||||
default:
|
||||
return 'gray';
|
||||
}
|
||||
})()}
|
||||
content={props.row.original.approval?.step_name
|
||||
.toLowerCase()
|
||||
.replace(/_/g, ' ')
|
||||
.replace(/\b\w/g, (char) => char.toUpperCase())}
|
||||
/>
|
||||
) : (
|
||||
'-'
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Periode',
|
||||
accessorKey: 'period',
|
||||
},
|
||||
{
|
||||
header: 'FCR Layer',
|
||||
accessorKey: 'fcr.name',
|
||||
},
|
||||
]}
|
||||
page={undefined}
|
||||
className={{
|
||||
containerClassName: cn({
|
||||
'mb-20': projectFlock && projectFlock.kandangs?.length === 0,
|
||||
}),
|
||||
tableWrapperClassName: 'overflow-x-auto min-h-full!',
|
||||
tableClassName: 'font-inter w-full table-auto min-h-full!',
|
||||
headerRowClassName: 'border-b border-b-gray-200',
|
||||
headerColumnClassName:
|
||||
'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
|
||||
bodyRowClassName: 'border-b border-b-gray-200',
|
||||
bodyColumnClassName:
|
||||
'px-6 py-3 last:flex last:flex-row last:justify-end',
|
||||
paginationClassName: 'hidden',
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
<Card
|
||||
title='Daftar Kandang'
|
||||
className={{
|
||||
wrapper: 'w-full bg-white',
|
||||
}}
|
||||
>
|
||||
<Table<ProjectFlockKandang>
|
||||
emptyContent={
|
||||
<div className='w-full p-5 text-center'>
|
||||
<span className='text-lg opacity-50'>
|
||||
Pilih project flock terlebih dahulu...
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
data={
|
||||
projectFlock && isResponseSuccess(listProjectFlockKandang)
|
||||
? listProjectFlockKandang.data
|
||||
: []
|
||||
}
|
||||
columns={[
|
||||
{
|
||||
header: '#',
|
||||
cell: (props) =>
|
||||
tableFilterState.pageSize * (tableFilterState.page - 1) +
|
||||
props.row.index +
|
||||
1,
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row?.project_flock?.area?.name,
|
||||
header: 'Area',
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row?.project_flock?.location?.name,
|
||||
header: 'Lokasi',
|
||||
},
|
||||
{
|
||||
accessorKey: 'kandang.name',
|
||||
header: 'Kandang',
|
||||
},
|
||||
{
|
||||
accessorKey: 'kandang.capacity',
|
||||
header: 'Kapasitas',
|
||||
},
|
||||
{
|
||||
accessorKey: 'approval.step_name',
|
||||
header: 'Status',
|
||||
cell: (props) => {
|
||||
return props.row.original.approval?.step_name ? (
|
||||
<PillBadge
|
||||
color={(() => {
|
||||
switch (
|
||||
props.row.original.approval?.step_name.toUpperCase()
|
||||
) {
|
||||
case 'DISETUJUI':
|
||||
return 'green';
|
||||
case 'PENGAJUAN':
|
||||
return 'yellow';
|
||||
default:
|
||||
return 'gray';
|
||||
}
|
||||
})()}
|
||||
content={props.row.original.approval?.step_name
|
||||
.toLowerCase()
|
||||
.replace(/_/g, ' ')
|
||||
.replace(/\b\w/g, (char) => char.toUpperCase())}
|
||||
/>
|
||||
) : projectFlock?.approval?.step_number === 1 ? (
|
||||
<PillBadge color='red' content={'Tidak Dapat Chick In'} />
|
||||
) : (
|
||||
<PillBadge color='gray' content={'Belum Chick In'} />
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Aksi',
|
||||
cell: (props) => {
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
color='success'
|
||||
variant='outline'
|
||||
onClick={() => {
|
||||
handleChickinClick(props.row.original);
|
||||
}}
|
||||
className='p-1'
|
||||
disabled={projectFlock?.approval?.step_number === 1}
|
||||
>
|
||||
<Icon
|
||||
icon='mdi:home-import-outline'
|
||||
width={18}
|
||||
height={18}
|
||||
/>
|
||||
Chickin
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
},
|
||||
},
|
||||
]}
|
||||
page={undefined}
|
||||
className={{
|
||||
containerClassName: cn({
|
||||
'mb-20': projectFlock && projectFlock.kandangs?.length === 0,
|
||||
}),
|
||||
tableWrapperClassName: 'overflow-x-auto min-h-full!',
|
||||
tableClassName: 'font-inter w-full table-auto min-h-full!',
|
||||
headerRowClassName: 'border-b border-b-gray-200',
|
||||
headerColumnClassName:
|
||||
'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
|
||||
bodyRowClassName: 'border-b border-b-gray-200',
|
||||
bodyColumnClassName:
|
||||
'px-6 py-3 last:flex last:flex-row last:justify-end',
|
||||
paginationClassName: 'hidden',
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectFlockChickinDetail;
|
||||
@@ -6,9 +6,7 @@ export const ProjectFlockFormSchema = Yup.object({
|
||||
value: Yup.number().required('ID Flock wajib diisi!'),
|
||||
label: Yup.string().required('Nama Flock wajib diisi!'),
|
||||
}).nullable(),
|
||||
flock_id: Yup.number()
|
||||
.min(1, 'Flock wajib diisi!')
|
||||
.required('Flock wajib diisi!'),
|
||||
flock_name: Yup.string().required('Nama Flock wajib diisi!'),
|
||||
|
||||
// Area
|
||||
area: Yup.object({
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
'use client';
|
||||
|
||||
import Button from '@/components/Button';
|
||||
import SelectInput, { OptionType } from '@/components/input/SelectInput';
|
||||
import SelectInput, {
|
||||
OptionType,
|
||||
useSelect,
|
||||
} from '@/components/input/SelectInput';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import {
|
||||
AreaApi,
|
||||
@@ -23,19 +26,22 @@ import {
|
||||
import {
|
||||
ProjectFlockApprovalPayload,
|
||||
CreateProjectFlockPayload,
|
||||
PeriodFlock,
|
||||
ProjectFlock,
|
||||
} from '@/types/api/production/project-flock';
|
||||
import toast from 'react-hot-toast';
|
||||
import TextInput from '@/components/input/TextInput';
|
||||
import { Kandang } from '@/types/api/master-data/kandang';
|
||||
import Collapse from '@/components/Collapse';
|
||||
import { ProjectFlockApi } from '@/services/api/production';
|
||||
import { ProjectFlockApi } from '@/services/api/production/project-flock';
|
||||
import { BaseApiResponse } from '@/types/api/api-general';
|
||||
import { FLOCK_CATEGORY_OPTIONS } from '@/config/constant';
|
||||
import { useModal } from '@/components/Modal';
|
||||
import ConfirmationModal from '@/components/modal/ConfirmationModal';
|
||||
import ProjectFlockKandangTable from './ProjectFlockKandangTable';
|
||||
import ApprovalSteps, {
|
||||
useApprovalSteps,
|
||||
} from '@/components/pages/ApprovalSteps';
|
||||
import { PROJECT_FLOCK_APPROVAL_LINE } from '@/config/approval-line';
|
||||
|
||||
interface ProjectFlockFormProps {
|
||||
formType?: 'add' | 'edit' | 'detail';
|
||||
@@ -52,22 +58,21 @@ const ProjectFlockForm = ({
|
||||
}: ProjectFlockFormProps) => {
|
||||
// State
|
||||
const router = useRouter();
|
||||
|
||||
const [projectFlockFormErrorMessage, setProjectFlockFormErrorMessage] =
|
||||
useState('');
|
||||
const [selectedArea, setSelectedArea] = useState('');
|
||||
|
||||
const [selectedLocation, setSelectedLocation] = useState('');
|
||||
const [disabledLocation, setDisabledLocation] = useState(true);
|
||||
const [optionsLocation, setOptionsLocation] = useState<OptionType[]>([]);
|
||||
|
||||
const [disabledLocation, setDisabledLocation] = useState(
|
||||
initialValues?.location?.id ? false : true
|
||||
);
|
||||
const [openSelectKandangs, setOpenSelectKandangs] = useState(
|
||||
initialValues?.kandangs && initialValues?.kandangs?.length > 0
|
||||
);
|
||||
const [optionsKandang, setOptionsKandang] = useState<Kandang[]>(
|
||||
initialValues?.kandangs ?? []
|
||||
);
|
||||
|
||||
const [selectedFlock, setSelectedFlock] = useState<number>(
|
||||
const [selectedFlock, setSelectedFlock] = useState<number | undefined>(
|
||||
initialValues?.flock?.id ?? 0
|
||||
);
|
||||
|
||||
@@ -77,7 +82,7 @@ const ProjectFlockForm = ({
|
||||
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
||||
const [isApproveLoading, setIsApproveLoading] = useState(false);
|
||||
const [isApprovedDisabled, setIsApprovedDisabled] = useState(
|
||||
initialValues?.approval.step_name == 'Pengajuan' ? false : true
|
||||
initialValues?.approval?.step_name == 'Pengajuan' ? false : true
|
||||
);
|
||||
const [isRejectedDisabled, setIsRejectedDisabled] =
|
||||
useState(!isApprovedDisabled);
|
||||
@@ -105,37 +110,27 @@ const ProjectFlockForm = ({
|
||||
}, [initialValues]);
|
||||
|
||||
// Fetch Data
|
||||
const flockUrl = `${FlockApi.basePath}?${new URLSearchParams({
|
||||
search: '',
|
||||
}).toString()}`;
|
||||
const { data: flocks, isLoading: isLoadingFlocks } = useSWR(
|
||||
flockUrl,
|
||||
FlockApi.getAllFetcher
|
||||
const { isLoadingOptions: isLoadingFlocks, options: optionsFlock } =
|
||||
useSelect(FlockApi.basePath, 'id', 'name');
|
||||
|
||||
const { options: optionsArea, isLoadingOptions: isLoadingAreas } = useSelect(
|
||||
AreaApi.basePath,
|
||||
'id',
|
||||
'name'
|
||||
);
|
||||
|
||||
const areaUrl = `${AreaApi.basePath}?${new URLSearchParams({
|
||||
search: '',
|
||||
}).toString()}`;
|
||||
const { data: areas, isLoading: isLoadingAreas } = useSWR(
|
||||
areaUrl,
|
||||
AreaApi.getAllFetcher
|
||||
);
|
||||
const { options: optionsLocation, isLoadingOptions: isLoadingLocations } =
|
||||
useSelect(LocationApi.basePath, 'id', 'name', '', {
|
||||
area_id:
|
||||
selectedArea != ''
|
||||
? selectedArea
|
||||
: ((initialValues?.area?.id ?? '') as string),
|
||||
});
|
||||
|
||||
const locationUrl = `${LocationApi.basePath}?${new URLSearchParams({
|
||||
search: '',
|
||||
area_id: selectedArea,
|
||||
}).toString()}`;
|
||||
const { data: locations, isLoading: isLoadingLocations } = useSWR(
|
||||
locationUrl,
|
||||
LocationApi.getAllFetcher
|
||||
);
|
||||
|
||||
const fcrUrl = `${FcrApi.basePath}?${new URLSearchParams({
|
||||
search: '',
|
||||
}).toString()}`;
|
||||
const { data: fcrs, isLoading: isLoadingFcrs } = useSWR(
|
||||
fcrUrl,
|
||||
FcrApi.getAllFetcher
|
||||
const { options: optionsFcr, isLoadingOptions: isLoadingFcrs } = useSelect(
|
||||
FcrApi.basePath,
|
||||
'id',
|
||||
'name'
|
||||
);
|
||||
|
||||
const kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({
|
||||
@@ -148,46 +143,22 @@ const ProjectFlockForm = ({
|
||||
mutate: refreshKandang,
|
||||
} = useSWR(kandangUrl, KandangApi.getAllFetcher);
|
||||
|
||||
const getPeriodFlocksUrl = `flocks/${selectedFlock}/periods`;
|
||||
|
||||
const { data: periodFlocks, isLoading: isLoadingPeriodFlocks } = useSWR(
|
||||
getPeriodFlocksUrl,
|
||||
() =>
|
||||
ProjectFlockApi.customRequest<BaseApiResponse<PeriodFlock>, 'GET'>(
|
||||
getPeriodFlocksUrl,
|
||||
{ method: 'GET' }
|
||||
)
|
||||
`${selectedFlock?.toString()}/periods`,
|
||||
(id: string) => ProjectFlockApi.getNextPeriod(id)
|
||||
);
|
||||
|
||||
// Map Data to Options
|
||||
const optionsArea = isResponseSuccess(areas)
|
||||
? areas?.data.map((area) => ({
|
||||
value: area.id,
|
||||
label: area.name,
|
||||
}))
|
||||
: [];
|
||||
const optionsFcr = isResponseSuccess(fcrs)
|
||||
? fcrs?.data.map((fcr) => ({
|
||||
value: fcr.id,
|
||||
label: fcr.name,
|
||||
}))
|
||||
: [];
|
||||
const optionsFlock = isResponseSuccess(flocks)
|
||||
? flocks?.data.map((flock) => ({
|
||||
value: flock.id,
|
||||
label: flock.name,
|
||||
}))
|
||||
: [];
|
||||
|
||||
useEffect(() => {
|
||||
if (isResponseSuccess(locations)) {
|
||||
const options = locations.data.map((location) => ({
|
||||
value: location.id,
|
||||
label: location.name,
|
||||
}));
|
||||
setOptionsLocation(options);
|
||||
}
|
||||
}, [locations, setSelectedLocation]);
|
||||
const {
|
||||
approvals,
|
||||
isLoading: approvalsLoading,
|
||||
rawDataApprovals: rawDataApprovals,
|
||||
refresh: refreshApprovals,
|
||||
} = useApprovalSteps({
|
||||
latestApproval: initialValues?.approval,
|
||||
approvalLines: PROJECT_FLOCK_APPROVAL_LINE,
|
||||
moduleName: 'PROJECT_FLOCKS',
|
||||
moduleId: initialValues?.id.toString() ?? '',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (isResponseSuccess(kandang)) {
|
||||
@@ -195,12 +166,24 @@ const ProjectFlockForm = ({
|
||||
setOptionsKandang(kandang.data);
|
||||
setOpenSelectKandangs(true);
|
||||
} else {
|
||||
formik.setFieldValue('kandang_ids', []);
|
||||
setOptionsKandang([]);
|
||||
setOpenSelectKandangs(false);
|
||||
formik.setFieldValue('kandang_ids', []);
|
||||
const selectedRowIds = Object.keys(rowSelection)
|
||||
.filter((id) => rowSelection[id])
|
||||
.map((id) => parseInt(id));
|
||||
if (
|
||||
JSON.stringify(kandang.data.map((k) => k.id)) !==
|
||||
JSON.stringify(formik.values.kandang_ids)
|
||||
) {
|
||||
formik.setFieldValue('kandang_ids', []);
|
||||
setRowSelection({});
|
||||
} else {
|
||||
formik.setFieldValue('kandang_ids', selectedRowIds);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [kandang]);
|
||||
}, [kandang, selectedLocation]);
|
||||
useEffect(() => {
|
||||
if (initialValues?.kandangs) {
|
||||
refreshKandang();
|
||||
@@ -211,7 +194,7 @@ const ProjectFlockForm = ({
|
||||
);
|
||||
setRowSelection(newRowSelection);
|
||||
}
|
||||
}, [initialValues, refreshKandang]);
|
||||
}, [initialValues, kandang]);
|
||||
|
||||
// Options Handler
|
||||
const areaChangeHandler = (val: OptionType | OptionType[] | null) => {
|
||||
@@ -232,9 +215,13 @@ const ProjectFlockForm = ({
|
||||
};
|
||||
|
||||
const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
|
||||
formik.setFieldValue('kandang_ids', []);
|
||||
setSelectedLocation((val as OptionType)?.value as string);
|
||||
optionChangeHandler(val, 'location');
|
||||
formik.setFieldValue('kandang_ids', []);
|
||||
const selectedRowIds = Object.keys(rowSelection)
|
||||
.filter((id) => rowSelection[id])
|
||||
.map((id) => parseInt(id));
|
||||
formik.setFieldValue('kandang_ids', selectedRowIds);
|
||||
};
|
||||
|
||||
const optionChangeHandler = (
|
||||
@@ -292,16 +279,17 @@ const ProjectFlockForm = ({
|
||||
// Formik InitialValue
|
||||
const formikInitialValues = useMemo<ProjectFlockFormValues>(() => {
|
||||
return {
|
||||
name: initialValues?.flock_name ?? '',
|
||||
name: initialValues?.flock_name,
|
||||
flock: initialValues?.flock
|
||||
? {
|
||||
value: initialValues.flock.id,
|
||||
label: initialValues.flock.name,
|
||||
value: initialValues?.flock?.id ?? 0,
|
||||
label:
|
||||
initialValues?.flock?.name ?? initialValues?.flock_name ?? '',
|
||||
}
|
||||
: null,
|
||||
area: initialValues?.area
|
||||
? {
|
||||
value: initialValues.area.id,
|
||||
value: initialValues.area?.id,
|
||||
label: initialValues.area.name,
|
||||
}
|
||||
: null,
|
||||
@@ -313,24 +301,25 @@ const ProjectFlockForm = ({
|
||||
: null,
|
||||
fcr: initialValues?.fcr
|
||||
? {
|
||||
value: initialValues.fcr.id,
|
||||
value: initialValues.fcr?.id,
|
||||
label: initialValues.fcr.name,
|
||||
}
|
||||
: null,
|
||||
location: initialValues?.location
|
||||
? {
|
||||
value: initialValues.location.id,
|
||||
value: initialValues.location?.id,
|
||||
label: initialValues.location.name,
|
||||
}
|
||||
: null,
|
||||
flock_id: initialValues?.flock?.id ?? 0,
|
||||
flock_name: initialValues?.flock_name ?? '',
|
||||
area_id: initialValues?.area?.id ?? 0,
|
||||
category: initialValues?.category as NonNullable<
|
||||
'GROWING' | 'LAYING' | undefined
|
||||
>,
|
||||
fcr_id: initialValues?.fcr?.id ?? 0,
|
||||
location_id: initialValues?.location?.id ?? 0,
|
||||
period: initialValues?.period ?? 0,
|
||||
period: initialValues?.period ?? 1,
|
||||
kandang_ids: initialValues?.kandangs?.map((k: Kandang) => k.id) as (
|
||||
| number
|
||||
| undefined
|
||||
@@ -340,7 +329,53 @@ const ProjectFlockForm = ({
|
||||
|
||||
// Formik
|
||||
const formik = useFormik<ProjectFlockFormValues>({
|
||||
initialValues: formikInitialValues,
|
||||
initialValues: {
|
||||
name: initialValues?.flock_name,
|
||||
flock: initialValues?.flock
|
||||
? {
|
||||
value: initialValues?.flock?.id ?? 0,
|
||||
label:
|
||||
initialValues?.flock?.name ?? initialValues?.flock_name ?? '',
|
||||
}
|
||||
: null,
|
||||
area: initialValues?.area
|
||||
? {
|
||||
value: initialValues.area?.id,
|
||||
label: initialValues.area.name,
|
||||
}
|
||||
: null,
|
||||
category_option: initialValues?.category
|
||||
? {
|
||||
value: initialValues.category,
|
||||
label: initialValues.category,
|
||||
}
|
||||
: null,
|
||||
fcr: initialValues?.fcr
|
||||
? {
|
||||
value: initialValues.fcr?.id,
|
||||
label: initialValues.fcr.name,
|
||||
}
|
||||
: null,
|
||||
location: initialValues?.location
|
||||
? {
|
||||
value: initialValues.location?.id,
|
||||
label: initialValues.location.name,
|
||||
}
|
||||
: null,
|
||||
flock_id: initialValues?.flock?.id ?? 0,
|
||||
flock_name: initialValues?.flock_name ?? '',
|
||||
area_id: initialValues?.area?.id ?? 0,
|
||||
category: initialValues?.category as NonNullable<
|
||||
'GROWING' | 'LAYING' | undefined
|
||||
>,
|
||||
fcr_id: initialValues?.fcr?.id ?? 0,
|
||||
location_id: initialValues?.location?.id ?? 0,
|
||||
period: initialValues?.period ?? 1,
|
||||
kandang_ids: initialValues?.kandangs?.map((k: Kandang) => k.id) as (
|
||||
| number
|
||||
| undefined
|
||||
)[],
|
||||
} as ProjectFlockFormValues,
|
||||
enableReinitialize: true,
|
||||
validationSchema:
|
||||
formType == 'add' ? ProjectFlockFormSchema : UpdateProjectFlockFormSchema,
|
||||
@@ -350,7 +385,7 @@ const ProjectFlockForm = ({
|
||||
onSubmit: async (values) => {
|
||||
setProjectFlockFormErrorMessage('');
|
||||
const payload: CreateProjectFlockPayload = {
|
||||
flock_id: values.flock_id as number,
|
||||
flock_name: values.flock?.label as string,
|
||||
area_id: values.area_id as number,
|
||||
category: values.category as string,
|
||||
fcr_id: values.fcr_id as number,
|
||||
@@ -377,8 +412,8 @@ const ProjectFlockForm = ({
|
||||
useEffect(() => {
|
||||
if (formType == 'detail') {
|
||||
formik.setFieldValue('area', {
|
||||
value: initialValues?.area.id,
|
||||
label: initialValues?.area.name,
|
||||
value: initialValues?.area?.id,
|
||||
label: initialValues?.area?.name,
|
||||
});
|
||||
formik.setFieldValue('area_id', initialValues?.area_id);
|
||||
if (initialValues?.area_id) {
|
||||
@@ -391,7 +426,7 @@ const ProjectFlockForm = ({
|
||||
|
||||
useEffect(() => {
|
||||
formikSetValues(formikInitialValues);
|
||||
}, [formikSetValues, formikInitialValues]);
|
||||
}, [formikSetValues]);
|
||||
|
||||
// Aktifkan lokasi jika formType = 'detail'
|
||||
useEffect(() => {
|
||||
@@ -402,9 +437,11 @@ const ProjectFlockForm = ({
|
||||
|
||||
// Set lokasi otomatis berdasarkan initialValues saat formType = 'detail'
|
||||
useEffect(() => {
|
||||
if (formType != 'add' && initialValues?.location?.id) {
|
||||
setSelectedLocation(initialValues.location?.id.toString());
|
||||
setDisabledLocation(false); // biar dropdown lokasi aktif juga
|
||||
if (formType != 'add') {
|
||||
if (initialValues?.location?.id) {
|
||||
setSelectedLocation(initialValues.location?.id.toString());
|
||||
setDisabledLocation(false); // biar dropdown lokasi aktif juga
|
||||
}
|
||||
}
|
||||
}, [formType, initialValues]);
|
||||
|
||||
@@ -416,6 +453,9 @@ const ProjectFlockForm = ({
|
||||
if (isResponseSuccess(periodFlocks)) {
|
||||
formik.setFieldValue('period', periodFlocks.data.next_period);
|
||||
}
|
||||
if (isResponseError(periodFlocks)) {
|
||||
console.log(periodFlocks?.message as string);
|
||||
}
|
||||
}, [periodFlocks]);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -459,7 +499,7 @@ const ProjectFlockForm = ({
|
||||
method: 'POST',
|
||||
payload: {
|
||||
action: action,
|
||||
approvable_ids: [initialValues.id],
|
||||
approvable_ids: [initialValues?.id],
|
||||
},
|
||||
});
|
||||
|
||||
@@ -467,19 +507,12 @@ const ProjectFlockForm = ({
|
||||
if (refreshProjectFlocks) {
|
||||
await refreshProjectFlocks();
|
||||
}
|
||||
// if (action == 'APPROVED') {
|
||||
// setIsApprovedDisabled(true);
|
||||
// setIsRejectedDisabled(false);
|
||||
// }
|
||||
// if (action == 'REJECTED') {
|
||||
// setIsRejectedDisabled(true);
|
||||
// setIsApprovedDisabled(false);
|
||||
// }
|
||||
toast.success(approveProjectFlockRes.message as string);
|
||||
}
|
||||
if (isResponseError(approveProjectFlockRes)) {
|
||||
toast.error(approveProjectFlockRes?.message as string);
|
||||
}
|
||||
refreshApprovals();
|
||||
confirmModal.closeModal();
|
||||
setIsApproveLoading(false);
|
||||
};
|
||||
@@ -522,6 +555,9 @@ const ProjectFlockForm = ({
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{approvals && !approvalsLoading && (
|
||||
<ApprovalSteps approvals={approvals} />
|
||||
)}
|
||||
{formType == 'detail' && (
|
||||
<div className='w-full flex flex-col sm:flex-row gap-2 py-4'>
|
||||
<Button
|
||||
@@ -554,6 +590,21 @@ const ProjectFlockForm = ({
|
||||
<Icon icon='mdi:times' width={24} height={24} />
|
||||
Reject
|
||||
</Button>
|
||||
{initialValues?.approval?.step_number == 2 && (
|
||||
<Button
|
||||
variant='outline'
|
||||
color='success'
|
||||
className='w-full sm:w-fit'
|
||||
onClick={() => {
|
||||
router.push(
|
||||
`/production/project-flock/chickin/add?projectFlockId=${initialValues?.id}`
|
||||
);
|
||||
}}
|
||||
>
|
||||
<Icon icon='mdi:home-import-outline' width={18} height={18} />
|
||||
Chickin
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<form
|
||||
@@ -587,13 +638,18 @@ const ProjectFlockForm = ({
|
||||
onChange={(val) => {
|
||||
optionChangeHandler(val, 'flock');
|
||||
setSelectedFlock((val as OptionType)?.value as number);
|
||||
formik.setFieldValue(
|
||||
'flock_name',
|
||||
(val as OptionType)?.label
|
||||
);
|
||||
}}
|
||||
options={optionsFlock}
|
||||
isLoading={isLoadingFlocks}
|
||||
isError={
|
||||
formik.touched.flock_id && Boolean(formik.errors.flock_id)
|
||||
formik.touched.flock_name &&
|
||||
Boolean(formik.errors.flock_name)
|
||||
}
|
||||
errorMessage={formik.errors.flock_id as string}
|
||||
errorMessage={formik.errors.flock_name as string}
|
||||
isClearable
|
||||
isDisabled={formType === 'detail'}
|
||||
/>
|
||||
@@ -602,7 +658,11 @@ const ProjectFlockForm = ({
|
||||
label='Lokasi'
|
||||
value={formik.values.location as OptionType}
|
||||
onChange={locationChangeHandler}
|
||||
options={optionsLocation}
|
||||
options={
|
||||
selectedArea != '' || initialValues?.area?.id
|
||||
? optionsLocation
|
||||
: []
|
||||
}
|
||||
isLoading={isLoadingLocations}
|
||||
isError={
|
||||
formik.touched.location_id &&
|
||||
@@ -647,7 +707,7 @@ const ProjectFlockForm = ({
|
||||
name='period'
|
||||
label='Periode'
|
||||
placeholder='Masukkan periode yang project'
|
||||
value={formik.values.period as number}
|
||||
value={formik.values.period ?? (1 as number)}
|
||||
onChange={formik.handleChange}
|
||||
isError={
|
||||
formik.touched.period && Boolean(formik.errors.period)
|
||||
@@ -695,6 +755,7 @@ const ProjectFlockForm = ({
|
||||
setRowSelection={setRowSelection}
|
||||
selectedIds={formik.values.kandang_ids}
|
||||
formType={formType}
|
||||
initialValues={initialValues?.kandangs ?? []}
|
||||
/>
|
||||
</div>
|
||||
</Collapse>
|
||||
@@ -716,7 +777,10 @@ const ProjectFlockForm = ({
|
||||
type='submit'
|
||||
color='primary'
|
||||
isLoading={formik.isSubmitting}
|
||||
disabled={!formik.isValid || formik.isSubmitting}
|
||||
disabled={
|
||||
!formik.isValid || formik.isSubmitting
|
||||
// TODO: Add logic && ketika nilai kandang_ids sudah beda dari initial values
|
||||
}
|
||||
className='px-4'
|
||||
>
|
||||
Submit
|
||||
@@ -726,7 +790,25 @@ const ProjectFlockForm = ({
|
||||
</div>
|
||||
</form>
|
||||
{formType != 'add' && (
|
||||
<div className='w-full'>
|
||||
<div className='flex flex-row gap-2 mb-6'>
|
||||
{formType != 'edit' && (
|
||||
<Button
|
||||
onClick={() => {
|
||||
router.push(
|
||||
`/production/project-flock/detail/edit?projectFlockId=${initialValues?.id}`
|
||||
);
|
||||
}}
|
||||
color='warning'
|
||||
>
|
||||
<Icon
|
||||
icon='mdi:pencil-outline'
|
||||
width={16}
|
||||
height={16}
|
||||
className='justify-start text-sm'
|
||||
/>
|
||||
Edit
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
onClick={() => {
|
||||
if (initialValues?.id) {
|
||||
|
||||
@@ -5,144 +5,158 @@ import PillBadge from '@/components/PillBadge';
|
||||
import Table from '@/components/Table';
|
||||
import { cn } from '@/lib/helper';
|
||||
import { Kandang } from '@/types/api/master-data/kandang';
|
||||
import { OnChangeFn } from '@tanstack/react-table';
|
||||
import { OnChangeFn, Row } from '@tanstack/react-table';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
const ProjectFlockKandangTable = ({
|
||||
listKandang,
|
||||
rowSelection,
|
||||
setRowSelection,
|
||||
selectedIds,
|
||||
initialValues,
|
||||
formType = 'add',
|
||||
}: {
|
||||
listKandang: Kandang[];
|
||||
rowSelection: Record<string, boolean>;
|
||||
setRowSelection: OnChangeFn<Record<string, boolean>>;
|
||||
selectedIds: (number | undefined)[];
|
||||
initialValues?: Kandang[];
|
||||
formType: 'add' | 'edit' | 'detail';
|
||||
}) => {
|
||||
console.log('selectedIds');
|
||||
console.log(selectedIds);
|
||||
const initialKandangIdSet = useMemo(() => {
|
||||
return initialValues?.map((k) => k.id) ?? [];
|
||||
}, [initialValues]);
|
||||
const isRowEnabled = (row: Row<Kandang>) => {
|
||||
const isDisabled =
|
||||
!initialKandangIdSet.includes(row.original.id) &&
|
||||
(row.original.status == 'ACTIVE' ||
|
||||
row.original.status == 'PENGAJUAN' ||
|
||||
formType == 'detail');
|
||||
return !isDisabled;
|
||||
};
|
||||
return (
|
||||
<Table<Kandang>
|
||||
data={listKandang}
|
||||
columns={[
|
||||
{
|
||||
id: 'select',
|
||||
header: ({ table }) => {
|
||||
const allRows = table.getRowModel().rows;
|
||||
const selectableRows = allRows.filter(
|
||||
(row) =>
|
||||
row.original.status == 'NON_ACTIVE' ||
|
||||
row.original.status == 'PENGAJUAN'
|
||||
);
|
||||
<>
|
||||
<Table<Kandang>
|
||||
data={listKandang}
|
||||
columns={[
|
||||
{
|
||||
id: 'select',
|
||||
header: ({ table }) => {
|
||||
const allRows = table.getRowModel().rows;
|
||||
// 1. Filter semua baris dengan logika yang sama persis seperti di cell
|
||||
const selectableRows = allRows.filter(isRowEnabled);
|
||||
|
||||
const allSelected =
|
||||
selectableRows.every((row) => row.getIsSelected()) &&
|
||||
selectableRows.length != 0 &&
|
||||
formType != 'detail';
|
||||
// 2. Cek apakah SEMUA baris yang BISA DIPILIH sudah terpilih
|
||||
const allSelected =
|
||||
selectableRows.length > 0 &&
|
||||
selectableRows.every((row) => row.getIsSelected());
|
||||
|
||||
const someSelected =
|
||||
selectableRows.some((row) => row.getIsSelected()) &&
|
||||
!allSelected &&
|
||||
formType != 'detail';
|
||||
// 3. Cek apakah BEBERAPA baris yang BISA DIPILIH sudah terpilih
|
||||
const someSelected =
|
||||
selectableRows.some((row) => row.getIsSelected()) &&
|
||||
!allSelected;
|
||||
|
||||
const toggleSelectableRows = () => {
|
||||
const shouldSelect = !allSelected;
|
||||
selectableRows.forEach((row) => row.toggleSelected(shouldSelect));
|
||||
};
|
||||
// 4. Fungsi toggle HANYA akan mentoggle baris yang BISA DIPILIH
|
||||
const toggleSelectableRows = () => {
|
||||
const shouldSelect = !allSelected;
|
||||
selectableRows.forEach((row) =>
|
||||
row.toggleSelected(shouldSelect)
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-row justify-center'>
|
||||
return (
|
||||
<div className='w-full flex flex-row justify-center'>
|
||||
<CheckboxInput
|
||||
name='allRow'
|
||||
checked={allSelected}
|
||||
indeterminate={someSelected}
|
||||
onChange={toggleSelectableRows}
|
||||
disabled={
|
||||
selectableRows.length === 0 || formType == 'detail'
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
cell: ({ row }) => {
|
||||
return (
|
||||
<CheckboxInput
|
||||
name='allRow'
|
||||
checked={allSelected}
|
||||
indeterminate={someSelected}
|
||||
onChange={toggleSelectableRows}
|
||||
name='row'
|
||||
checked={
|
||||
(row.getIsSelected() &&
|
||||
(row.original.status == 'NON_ACTIVE' ||
|
||||
row.original.status == 'PENGAJUAN')) ||
|
||||
(selectedIds && selectedIds.includes(row.original.id))
|
||||
}
|
||||
disabled={
|
||||
listKandang.filter(
|
||||
(kandang) =>
|
||||
kandang.status == 'NON_ACTIVE' ||
|
||||
kandang.status == 'PENGAJUAN'
|
||||
).length == 0 || formType == 'detail'
|
||||
formType == 'detail' ||
|
||||
(!initialKandangIdSet.includes(row.original.id) &&
|
||||
(row.original.status == 'ACTIVE' ||
|
||||
row.original.status == 'PENGAJUAN'))
|
||||
}
|
||||
indeterminate={row.getIsSomeSelected()}
|
||||
onChange={row.getToggleSelectedHandler()}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
},
|
||||
},
|
||||
cell: ({ row }) => {
|
||||
return (
|
||||
<CheckboxInput
|
||||
name='row'
|
||||
checked={
|
||||
(row.getIsSelected() &&
|
||||
(row.original.status == 'NON_ACTIVE' ||
|
||||
row.original.status == 'PENGAJUAN')) ||
|
||||
selectedIds.includes(row.original.id)
|
||||
}
|
||||
disabled={
|
||||
!row.getCanSelect() ||
|
||||
(row.original.status != 'NON_ACTIVE' &&
|
||||
row.original.status != 'PENGAJUAN') ||
|
||||
formType == 'detail'
|
||||
}
|
||||
indeterminate={row.getIsSomeSelected()}
|
||||
onChange={row.getToggleSelectedHandler()}
|
||||
/>
|
||||
);
|
||||
{
|
||||
accessorFn: (row) => row.name,
|
||||
header: 'Kandang',
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.name,
|
||||
header: 'Kandang',
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.status,
|
||||
header: 'Status',
|
||||
cell: (props) => {
|
||||
return (
|
||||
<PillBadge
|
||||
color={(() => {
|
||||
switch (props.row.original.status) {
|
||||
case 'ACTIVE':
|
||||
return 'red';
|
||||
case 'PENGAJUAN':
|
||||
return 'green';
|
||||
case 'NON_ACTIVE':
|
||||
return 'blue';
|
||||
default:
|
||||
return 'gray';
|
||||
}
|
||||
})()}
|
||||
content={props.row.original.status
|
||||
.toLowerCase()
|
||||
.replace(/_/g, ' ')
|
||||
.replace(/\b\w/g, (char) => char.toUpperCase())}
|
||||
/>
|
||||
);
|
||||
{
|
||||
accessorFn: (row) => row.status,
|
||||
header: 'Status',
|
||||
cell: (props) => {
|
||||
return (
|
||||
<PillBadge
|
||||
color={(() => {
|
||||
switch (props.row.original.status) {
|
||||
case 'ACTIVE':
|
||||
return 'red';
|
||||
case 'PENGAJUAN':
|
||||
return 'green';
|
||||
case 'NON_ACTIVE':
|
||||
return 'blue';
|
||||
default:
|
||||
return 'gray';
|
||||
}
|
||||
})()}
|
||||
content={props.row.original.status
|
||||
.toLowerCase()
|
||||
.replace(/_/g, ' ')
|
||||
.replace(/\b\w/g, (char) => char.toUpperCase())}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.pic?.name,
|
||||
header: 'Penanggung Jawab',
|
||||
},
|
||||
]}
|
||||
className={{
|
||||
containerClassName: cn({
|
||||
'mb-20': listKandang?.length === 0,
|
||||
}),
|
||||
tableWrapperClassName: 'overflow-x-auto min-h-full!',
|
||||
tableClassName: 'font-inter w-full table-auto min-h-full!',
|
||||
headerRowClassName: 'border-b border-b-gray-200',
|
||||
headerColumnClassName:
|
||||
'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
|
||||
bodyRowClassName: 'border-b border-b-gray-200',
|
||||
bodyColumnClassName:
|
||||
'px-6 py-3 last:flex last:flex-row last:justify-end',
|
||||
paginationClassName: 'hidden',
|
||||
}}
|
||||
rowSelection={rowSelection}
|
||||
setRowSelection={setRowSelection}
|
||||
/>
|
||||
{
|
||||
accessorFn: (row) => row.capacity,
|
||||
header: 'Kapasitas',
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.pic?.name,
|
||||
header: 'Penanggung Jawab',
|
||||
},
|
||||
]}
|
||||
className={{
|
||||
containerClassName: cn({
|
||||
'mb-20': listKandang?.length === 0,
|
||||
}),
|
||||
tableWrapperClassName: 'overflow-x-auto min-h-full!',
|
||||
tableClassName: 'font-inter w-full table-auto min-h-full!',
|
||||
headerRowClassName: 'border-b border-b-gray-200',
|
||||
headerColumnClassName:
|
||||
'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
|
||||
bodyRowClassName: 'border-b border-b-gray-200',
|
||||
bodyColumnClassName:
|
||||
'px-6 py-3 last:flex last:flex-row last:justify-end',
|
||||
paginationClassName: 'hidden',
|
||||
}}
|
||||
rowSelection={rowSelection}
|
||||
setRowSelection={setRowSelection}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user