gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-25 15:55:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: adjust ProjectFlockForm styling and create ProjectFlockFormConfirmationTable component

Browse Source
This commit is contained in:
ValdiANS
2026-02-06 09:46:37 +07:00
parent 7b9ba48204
commit 968d9e1f2a
1 changed files with 724 additions and 452 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
+355 -83
View File
@@ -19,7 +19,7 @@ import {
import { Icon } from '@iconify/react';
import { FormikErrors, useFormik } from 'formik';
import { useRouter } from 'next/navigation';
import { useEffect, useMemo, useState } from 'react';
import { ReactNode, useEffect, useMemo, useState } from 'react';
import useSWR, { KeyedMutator } from 'swr';
import {
ProjectFlockBudgetsSchemaType,
@@ -47,6 +47,13 @@ import { useUiStore } from '@/stores/ui/ui.store';
import RequirePermission from '@/components/helper/RequirePermission';
import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
import { cn, formatCurrency, formatDate } from '@/lib/helper';
import Tooltip from '@/components/Tooltip';
import Table from '@/components/Table';
import { ColumnDef } from '@tanstack/react-table';
import StatusBadge from '@/components/helper/StatusBadge';
import { getUniqueFormikErrors } from '@/lib/formik-helper';
import ProjectFlockConfirmationModal from '../ProjectFlockConfirmationModal';
interface ProjectFlockFormProps {
formType?: 'add' | 'edit' | 'detail';
@@ -56,6 +63,150 @@ interface ProjectFlockFormProps {
>;
}
export interface ProjectFlockFormConfirmationTableType {
label: string;
value: ReactNode;
subRows?: ProjectFlockFormConfirmationTableType[];
}
export const ProjectFlockFormConfirmationTable = ({
projectFlockForm,
kandangs,
}: {
projectFlockForm?: ProjectFlockFormValues;
kandangs: Kandang[];
}) => {
const confirmationTableColumns: ColumnDef<ProjectFlockFormConfirmationTableType>[] =
[
{
header: 'Label',
accessorKey: 'label',
enableSorting: false,
cell: ({ row }) => {
const isSubRow = row.depth > 0;
return (
<>
{!isSubRow && row.original.label}
{isSubRow && (
<div
className={cn('w-full min-h-full flex items-stretch gap-0')}
>
<div className='w-px mx-4 bg-base-content/10' />
<span className='p-3'>{row.original.label}</span>
</div>
)}
</>
);
},
},
{
header: 'Value',
accessorKey: 'value',
enableSorting: false,
cell: ({ row }) => row.original.value,
},
];
const productsData: ProjectFlockFormConfirmationTableType[] =
projectFlockForm?.project_budgets?.map((product) => ({
label: 'Jenis Produk',
value: product.nonstock?.label ?? '-',
subRows: [
{
label: 'Jumlah Pembelian',
value: String(product.qty),
},
{
label: 'Harga Satuan',
value: String(formatCurrency(Number(product.price))),
},
{
label: 'Total Harga',
value: String(formatCurrency(Number(product.total_price))),
},
],
})) ?? [];
const confirmationTableData: ProjectFlockFormConfirmationTableType[] = [
{
label: 'Tanggal',
value: formatDate(Date.now(), 'DD MMMM YYYY'),
},
{
label: 'Area',
value: projectFlockForm?.area?.label ?? '-',
},
{
label: 'Lokasi',
value: projectFlockForm?.location?.label ?? '-',
},
{
label: 'Flock',
value: projectFlockForm?.flock?.label ?? '-',
},
{
label: 'Kategori',
value: projectFlockForm?.category ?? '-',
},
{
label: 'Standar Produksi',
value: projectFlockForm?.production_standard?.label ?? '-',
},
{
label: 'Informasi Kandang',
value: '',
subRows:
projectFlockForm?.kandang_ids?.map((kandang_id) => {
const kandang = kandangs.find((kandang) => kandang.id === kandang_id);
const kandangName = kandang?.name ?? '-';
const kandangAvailability = kandang?.status;
return {
label: kandangName,
value: (
<StatusBadge
color={
kandangAvailability === 'NON_ACTIVE' ? 'info' : 'neutral'
}
text={
kandangAvailability === 'NON_ACTIVE'
? 'Tersedia'
: 'Tidak Tersedia'
}
className={{ badge: 'text-nowrap' }}
/>
),
};
}) ?? [],
},
{
label: 'Estimasi Anggaran per Kandang',
value: '',
},
...productsData,
];
return (
<Table<ProjectFlockFormConfirmationTableType>
columns={confirmationTableColumns}
data={confirmationTableData}
withPagination={false}
pageSize={10000}
expanded={true}
getSubRows={(row) => row.subRows}
className={{
headerRowClassName: 'border-b border-base-content/10',
bodyRowClassName: 'border-none',
bodySubRowClassName: () => 'border-none',
bodySubRowColumnClassName: () => 'first:p-0',
}}
/>
);
};
const ProjectFlockForm = ({
formType = 'add',
initialValues,
@@ -64,6 +215,8 @@ const ProjectFlockForm = ({
// State
const router = useRouter();
const [formStep, setFormStep] = useState<'form' | 'confirmation'>('form');
const [projectFlockFormErrorMessage, setProjectFlockFormErrorMessage] =
useState('');
const [selectedArea, setSelectedArea] = useState('');
@@ -87,6 +240,7 @@ const ProjectFlockForm = ({
const subscribeValidate = useUiStore((s) => s.subscribeValidate);
const setIsValid = useUiStore((s) => s.setIsValid);
const successModal = useModal();
const deleteModal = useModal();
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
@@ -285,7 +439,7 @@ const ProjectFlockForm = ({
if (isResponseSuccess(createProjectFlockRes)) {
toast.success(createProjectFlockRes?.message as string);
handleReset();
router.push('/production/project-flock');
successModal.openModal();
}
if (isResponseError(createProjectFlockRes)) {
setProjectFlockFormErrorMessage(createProjectFlockRes?.message as string);
@@ -303,7 +457,7 @@ const ProjectFlockForm = ({
if (isResponseSuccess(updateProjectFlockRes)) {
toast.success(updateProjectFlockRes?.message as string);
handleReset();
router.push('/production/project-flock');
successModal.openModal();
}
if (isResponseError(updateProjectFlockRes)) {
setProjectFlockFormErrorMessage(updateProjectFlockRes?.message as string);
@@ -320,6 +474,10 @@ const ProjectFlockForm = ({
formikSetValues(formikInitialValues);
};
const [formikLastValues, setFormikLastValues] = useState<
ProjectFlockFormValues | undefined
>(undefined);
// Formik InitialValue
const formikInitialValues = useMemo<ProjectFlockFormValues>(() => {
const trimFlock =
@@ -429,6 +587,8 @@ const ProjectFlockForm = ({
}),
};
setFormikLastValues(values);
switch (formType) {
case 'add':
await createProjectFlockHandler(payload);
@@ -654,21 +814,67 @@ const ProjectFlockForm = ({
});
// ===== Formik Error List =====
const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
const { formErrorList, close, setFormErrorList, handleFormSubmit } =
useFormikErrorList(formik);
return (
<>
<section className='w-full h-full sm:w-[446px] overflow-y-auto'>
<form
onSubmit={(e) => {
e.preventDefault();
const submitHandler = async () => {
const validateFormErrorResult = await formik.validateForm();
const isFormError = Object.keys(validateFormErrorResult).length > 0;
if (isFormError) {
const errorMessages = getUniqueFormikErrors(
validateFormErrorResult
);
setFormErrorList(errorMessages);
}
if (isFormError) {
return;
}
if (formStep === 'form') {
setFormStep('confirmation');
return;
}
handleFormSubmit(e);
};
submitHandler();
}}
onReset={formik.handleReset}
className='w-full h-full sm:w-[446px] flex flex-col'
>
{/* Header */}
<DrawerHeader
leftIcon={
formType == 'add' ? 'heroicons:chevron-left' : 'mdi:arrow-left'
}
leftIconHref={
formType == 'add'
? '/production/project-flock'
: `/production/project-flock/detail?projectFlockId=${initialValues?.id}`
// leftIconHref={
// formType == 'add'
// ? '/production/project-flock'
// : `/production/project-flock/detail?projectFlockId=${initialValues?.id}`
// }
leftIconOnClick={() => {
if (formStep === 'confirmation') {
setFormStep('form');
return;
}
if (formType == 'add') {
router.push('/production/project-flock');
} else {
router.push(
`/production/project-flock/detail?projectFlockId=${initialValues?.id}`
);
}
}}
leftIconClassName='hover:text-gray-400'
subtitle={formType == 'add' ? 'Add List Flock' : 'Update Flock'}
className='sticky top-0 z-10 bg-base-100'
@@ -685,7 +891,9 @@ const ProjectFlockForm = ({
}}
className='p-0 text-error'
>
<Tooltip content='Hapus' position='bottom'>
<Icon icon='heroicons:trash' width={20} height={20} />
</Tooltip>
</Button>
)}
@@ -699,36 +907,16 @@ const ProjectFlockForm = ({
}}
className='p-0 text-error'
>
<Tooltip content='Hapus' position='bottom'>
<Icon icon='heroicons:trash' width={20} height={20} />
</Tooltip>
</Button>
)}
</DrawerHeader>
{projectFlockFormErrorMessage && (
<div className='my-4'>
<div role='alert' className='alert alert-error'>
<Icon
icon='material-symbols:error-outline'
width={24}
height={24}
/>
<span>{projectFlockFormErrorMessage}</span>
<Button
onClick={() => {
setProjectFlockFormErrorMessage('');
}}
variant='link'
>
<Icon icon='material-symbols:close' width={24} height={24} />
</Button>
</div>
</div>
)}
<form
className='w-auto h-auto'
onSubmit={handleFormSubmit}
onReset={formik.handleReset}
>
<div className='w-auto h-full overflow-y-auto'>
{formStep === 'form' && (
<div className='h-full'>
{/* Form Informasi Umum */}
<div className='flex flex-col p-4'>
<h2 className='text-base font-medium text-base-content/50 font-roboto'>
@@ -743,7 +931,9 @@ const ProjectFlockForm = ({
onChange={areaChangeHandler}
options={optionsArea}
isLoading={isLoadingAreas}
isError={formik.touched.area_id && Boolean(formik.errors.area_id)}
isError={
formik.touched.area_id && Boolean(formik.errors.area_id)
}
errorMessage={formik.errors.area_id as string}
onInputChange={setInputValueArea}
onMenuScrollToBottom={loadMoreArea}
@@ -763,7 +953,8 @@ const ProjectFlockForm = ({
}
isLoading={isLoadingLocations}
isError={
formik.touched.location_id && Boolean(formik.errors.location_id)
formik.touched.location_id &&
Boolean(formik.errors.location_id)
}
onInputChange={setInputValueLocation}
onMenuScrollToBottom={loadMoreLocation}
@@ -788,14 +979,18 @@ const ProjectFlockForm = ({
onChange={(val) => {
optionChangeHandler(val, 'flock');
setSelectedFlock((val as OptionType)?.label);
formik.setFieldValue('flock_name', (val as OptionType)?.label);
formik.setFieldValue(
'flock_name',
(val as OptionType)?.label
);
}}
options={optionsFlock}
onInputChange={setInputValueFlock}
onMenuScrollToBottom={loadMoreFlock}
isLoading={isLoadingFlocks}
isError={
formik.touched.flock_name && Boolean(formik.errors.flock_name)
formik.touched.flock_name &&
Boolean(formik.errors.flock_name)
}
errorMessage={formik.errors.flock_name as string}
isClearable
@@ -813,7 +1008,9 @@ const ProjectFlockForm = ({
onMenuScrollToBottom={loadMoreFcr}
options={optionsFcr}
isLoading={isLoadingFcrs}
isError={formik.touched.fcr_id && Boolean(formik.errors.fcr_id)}
isError={
formik.touched.fcr_id && Boolean(formik.errors.fcr_id)
}
errorMessage={formik.errors.fcr_id as string}
isClearable
isDisabled={formType != 'add'}
@@ -887,32 +1084,28 @@ const ProjectFlockForm = ({
</div>
{/* Card Estimasi Budget */}
<div className='flex flex-col p-4'>
<div className='flex flex-col gap-4'>
<div className='flex flex-col'>
<div className='flex flex-col'>
{formik.values.project_budgets &&
formik.values.project_budgets.length > 0 ? (
formik.values.project_budgets.map((budget, index) => (
<div key={index} className='flex flex-col'>
{/* <div className='flex flex-row justify-between items-center mb-2'>
<Button
type='button'
color='error'
onClick={() =>
onDeleteBudgetRowHandler(
budget.nonstock_id as number,
index
)
}
>
<Icon icon='mdi:trash' width={16} height={16} />
</Button>
</div> */}
formik.values.project_budgets.map((budget, index) => {
const nonstockUomName = isResponseSuccess(nonstocks)
? (nonstocks.data.find(
(ns) => ns.id === budget.nonstock_id
)?.uom?.name ?? '')
: '';
return (
<div
key={index}
className='flex flex-col p-4 border-b border-base-content/10'
>
<div className='flex flex-row justify-between items-center'>
<h2 className='text-base font-medium text-base-content/50 font-roboto'>
Estimasi Anggaran Per Flock
</h2>
{formik.values.project_budgets.length > 1 && (
<Button
type='button'
variant='ghost'
@@ -925,8 +1118,13 @@ const ProjectFlockForm = ({
}
className='p-0 text-error'
>
<Icon icon='heroicons:trash' width={20} height={20} />
<Icon
icon='heroicons:trash'
width={20}
height={20}
/>
</Button>
)}
</div>
<div className='flex flex-row justify-between items-center'>
@@ -936,16 +1134,21 @@ const ProjectFlockForm = ({
options={filteredNonStockOptions ?? []}
isLoading={isLoadingNonstocks}
placeholder='Pilih Jenis Produk'
value={formik.values.project_budgets[index].nonstock}
value={
formik.values.project_budgets[index].nonstock
}
onInputChange={setInputValueNonstock}
onMenuScrollToBottom={loadMoreNonstock}
onChange={(val) => {
const updatedBudgets = [
...formik.values.project_budgets,
];
updatedBudgets[index].nonstock = val as OptionType;
updatedBudgets[index].nonstock =
val as OptionType;
updatedBudgets[index].nonstock_id =
(val as OptionType) ? (val as OptionType).value : 0;
(val as OptionType)
? (val as OptionType).value
: 0;
formik.setFieldValue(
'project_budgets',
updatedBudgets
@@ -987,17 +1190,17 @@ const ProjectFlockForm = ({
onBlur={formik.handleBlur}
allowNegative={false}
inputPrefix={
<>
{nonstockUomName && (
<div className='w-full h-full py-1 flex flex-row items-stretch justify-between gap-3'>
<span className='text-sm text-base-content/60 self-center text-nowrap truncate'>
{isResponseSuccess(nonstocks)
? (nonstocks.data.find(
(ns) => ns.id === budget.nonstock_id
)?.uom?.name ?? '')
: ''}
{nonstockUomName}
</span>
<div className='w-px bg-base-content/10' />
</div>
)}
</>
}
errorMessage={
(
@@ -1019,7 +1222,11 @@ const ProjectFlockForm = ({
className={{
inputPrefix:
'py-0 px-0 pl-3 text-base-content/50 bg-transparent border-r-0',
inputWrapper: 'border-l-0 pl-5',
inputWrapper: cn('border-l-0 pl-0', {
'pl-5':
isResponseSuccess(nonstocks) &&
budget.nonstock_id,
}),
}}
/>
</div>
@@ -1029,7 +1236,11 @@ const ProjectFlockForm = ({
label='Harga Satuan (Rp)'
value={formik.values.project_budgets[index].price}
onChange={(e) =>
handleBudgetChange(index, 'price', e.target.value)
handleBudgetChange(
index,
'price',
e.target.value
)
}
onBlur={formik.handleBlur}
placeholder='Masukkan Harga Satuan (Rp)'
@@ -1051,7 +1262,8 @@ const ProjectFlockForm = ({
)?.price as string
}
isError={
formik.touched.project_budgets?.[index]?.price &&
formik.touched.project_budgets?.[index]
?.price &&
Boolean(
(
formik.errors.project_budgets?.[
@@ -1071,7 +1283,9 @@ const ProjectFlockForm = ({
<NumberInput
name={`project_budgets[${index}].total_price`}
label='Total Harga'
value={formik.values.project_budgets[index].total_price}
value={
formik.values.project_budgets[index].total_price
}
onChange={(e) =>
handleBudgetChange(
index,
@@ -1117,29 +1331,77 @@ const ProjectFlockForm = ({
/>
</div>
</div>
))
);
})
) : (
<div className='text-center py-4 text-gray-400'>
Tidak ada data estimasi anggaran.
</div>
)}
<div className='w-full p-4'>
<Button
type='button'
color='primary'
variant='outline'
onClick={onAddBudgetRowHandler}
disabled={filteredNonStockOptions.length == 0}
color='success'
className='w-fit self-center'
className='w-full p-3 rounded-lg text-sm font-semibold hover:text-base-100 focus-visible:text-base-100'
>
<Icon icon='mdi:plus' width={16} height={16} /> Add Budget
Tambah Produk
</Button>
</div>
</div>
<div className='p-4'>
<AlertErrorList formErrorList={formErrorList} onClose={close} />
</div>
<div className='flex flex-row justify-center gap-2 flex-wrap my-6 px-4'>
{(formErrorList.length > 0 || projectFlockFormErrorMessage) && (
<div className='p-4'>
<AlertErrorList
formErrorList={formErrorList}
onClose={close}
/>
{projectFlockFormErrorMessage && (
<div className='my-4'>
<div role='alert' className='alert alert-error'>
<Icon
icon='material-symbols:error-outline'
width={24}
height={24}
/>
<span>{projectFlockFormErrorMessage}</span>
<Button
type='button'
onClick={() => {
setProjectFlockFormErrorMessage('');
}}
variant='link'
>
<Icon
icon='material-symbols:close'
width={24}
height={24}
/>
</Button>
</div>
</div>
)}
</div>
)}
</div>
)}
{formStep === 'confirmation' && (
<div className='p-4'>
<ProjectFlockFormConfirmationTable
projectFlockForm={formik.values}
kandangs={optionsKandang}
/>
</div>
)}
</div>
<div className='p-4 flex-1 flex flex-row justify-center gap-2 flex-wrap shadow-bg'>
{formType !== 'detail' && (
<RequirePermission
permissions={
@@ -1150,19 +1412,29 @@ const ProjectFlockForm = ({
>
<Button
type='submit'
color='primary'
isLoading={formik.isSubmitting}
disabled={formik.isSubmitting}
className='px-4 w-full'
className='w-full p-3 rounded-lg text-sm font-semibold text-base-100'
>
<Icon icon='mdi:plus' width={24} height={24} />
{formType == 'add' ? 'Add Flock' : 'Update Flock'}
Submit
</Button>
</RequirePermission>
)}
</div>
</form>
</section>
<ProjectFlockConfirmationModal
ref={successModal.ref}
type='success'
text='Data Berhasil Ditambahkan'
subtitleText='Data project flock telah berhasil disimpan.'
projectFlockForm={formikLastValues}
onClose={() => {
router.push('/production/project-flock');
setFormikLastValues(undefined);
}}
secondaryButton={undefined}
/>
<ConfirmationModal
ref={deleteModal.ref}