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

refactor(FE-114): refactor card native to card component

Browse Source
This commit is contained in:
rstubryan
2025-10-22 14:49:38 +07:00
parent f486a659d0
commit bdb3ab1a50
1 changed files with 951 additions and 961 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/production/recording/form/RecordingForm.tsx
+57 -67
View File
@@ -31,6 +31,7 @@ import { ProjectFlock } from '@/types/api/production/project-flock';
import { Warehouse } from '@/types/api/master-data/warehouse'; import { Warehouse } from '@/types/api/master-data/warehouse';
import { LocationApi } from '@/services/api/master-data'; import { LocationApi } from '@/services/api/master-data';
import FieldMessage from '@/components/helper/FieldMessage'; import FieldMessage from '@/components/helper/FieldMessage';
import Card from '@/components/Card';
interface RecordingFormProps { interface RecordingFormProps {
type?: 'add' | 'edit' | 'detail'; type?: 'add' | 'edit' | 'detail';
@@ -634,10 +635,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
className='w-full mt-8 flex flex-col gap-6' className='w-full mt-8 flex flex-col gap-6'
> >
{/* Basic Info Card */} {/* Basic Info Card */}
<div className='card bg-base-100 shadow mb-4'> <Card
<div className='card-body flex flex-col gap-6'> title='Informasi Recording'
<h2 className='card-title'>Informasi Recording</h2> className={{
wrapper: 'w-full mb-4 shadow',
body: 'flex flex-col gap-6',
}}
>
<div className='grid grid-cols-1 md:grid-cols-2 gap-6'> <div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
<SelectInput <SelectInput
required required
@@ -676,9 +680,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
: '' : ''
} }
onChange={(e) => { onChange={(e) => {
const date = e.target.value const date = e.target.value ? new Date(e.target.value) : null;
? new Date(e.target.value)
: null;
formik.setFieldValue('recording_date', date); formik.setFieldValue('recording_date', date);
}} }}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
@@ -743,13 +745,16 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
} }
/> />
</div> </div>
</div> </Card>
</div>
{/* Feed Data Table */} {/* Feed Data Table */}
<div className='card bg-base-100 shadow mb-4'> <Card
<div className='card-body'> title='Data Pakan'
<h2 className='card-title mb-4'>Data Pakan</h2> className={{
wrapper: 'w-full mb-4 shadow',
title: 'mb-4',
}}
>
<div className='overflow-x-auto'> <div className='overflow-x-auto'>
<table className='table'> <table className='table'>
<thead> <thead>
@@ -846,10 +851,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
) ?? '') ) ?? '')
: ''; : '';
formik.setFieldValue( formik.setFieldValue(`feed_data.${idx}.feed`, val);
`feed_data.${idx}.feed`,
val
);
formik.setFieldValue( formik.setFieldValue(
`feed_data.${idx}.feed_id`, `feed_data.${idx}.feed_id`,
productWarehouseId || '' productWarehouseId || ''
@@ -886,8 +888,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
isDisabled={type === 'detail'} isDisabled={type === 'detail'}
isClearable isClearable
className={{ className={{
wrapper: wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
'w-full min-w-52 md:min-w-72 lg:min-w-80',
}} }}
/> />
</td> </td>
@@ -896,8 +897,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
type='text' type='text'
name={`feed_data.${idx}.feed_qty`} name={`feed_data.${idx}.feed_qty`}
value={ value={
feed.feed_qty === '' || feed.feed_qty === '' || feed.feed_qty === undefined
feed.feed_qty === undefined
? '' ? ''
: String(feed.feed_qty) : String(feed.feed_qty)
} }
@@ -921,18 +921,12 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
decimals={0} decimals={0}
min={0} min={0}
isError={ isError={
isRepeaterInputError( isRepeaterInputError('feed_data', 'feed_stock', idx)
'feed_data', .isError
'feed_stock',
idx
).isError
} }
errorMessage={ errorMessage={
isRepeaterInputError( isRepeaterInputError('feed_data', 'feed_stock', idx)
'feed_data', .errorMessage
'feed_stock',
idx
).errorMessage
} }
readOnly={type === 'detail'} readOnly={type === 'detail'}
className={{ className={{
@@ -992,13 +986,16 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
</Button> </Button>
</div> </div>
)} )}
</div> </Card>
</div>
{/* Body Weight Table */} {/* Body Weight Table */}
<div className='card bg-base-100 shadow mb-4'> <Card
<div className='card-body'> title='Berat Ayam'
<h2 className='card-title mb-4'>Berat Ayam</h2> className={{
wrapper: 'w-full mb-4 shadow',
title: 'mb-4',
}}
>
<div className='overflow-x-auto'> <div className='overflow-x-auto'>
<table className='table'> <table className='table'>
<thead> <thead>
@@ -1232,13 +1229,16 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
</Button> </Button>
</div> </div>
)} )}
</div> </Card>
</div>
{/* Vaccination Table */} {/* Vaccination Table */}
<div className='card bg-base-100 shadow mb-4'> <Card
<div className='card-body'> title='Vaccination'
<h2 className='card-title mb-4'>Vaccination</h2> className={{
wrapper: 'w-full mb-4 shadow',
title: 'mb-4',
}}
>
<div className='overflow-x-auto'> <div className='overflow-x-auto'>
<table className='table'> <table className='table'>
<thead> <thead>
@@ -1303,10 +1303,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
checked={selectedVaccine.includes(idx)} checked={selectedVaccine.includes(idx)}
onChange={(e) => { onChange={(e) => {
if (e.target.checked) { if (e.target.checked) {
setSelectedVaccine([ setSelectedVaccine([...selectedVaccine, idx]);
...selectedVaccine,
idx,
]);
} else { } else {
setSelectedVaccine( setSelectedVaccine(
selectedVaccine.filter((i) => i !== idx) selectedVaccine.filter((i) => i !== idx)
@@ -1326,8 +1323,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
value={ value={
ovkOptions.find( ovkOptions.find(
(opt: OptionType) => (opt: OptionType) =>
Number(opt.value) === Number(opt.value) === Number(vaccine.vaccine_id)
Number(vaccine.vaccine_id)
) ?? null ) ?? null
} }
onChange={(val) => { onChange={(val) => {
@@ -1385,8 +1381,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
isDisabled={type === 'detail'} isDisabled={type === 'detail'}
isClearable isClearable
className={{ className={{
wrapper: wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
'w-full min-w-52 md:min-w-72 lg:min-w-80',
}} }}
/> />
</td> </td>
@@ -1491,13 +1486,16 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
</Button> </Button>
</div> </div>
)} )}
</div> </Card>
</div>
{/* Mortality Table */} {/* Mortality Table */}
<div className='card bg-base-100 shadow mb-4'> <Card
<div className='card-body'> title='Mortalitas'
<h2 className='card-title mb-4'>Mortalitas</h2> className={{
wrapper: 'w-full mb-4 shadow',
title: 'mb-4',
}}
>
<div className='overflow-x-auto'> <div className='overflow-x-auto'>
<table className='table'> <table className='table'>
<thead> <thead>
@@ -1595,25 +1593,18 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
); );
}} }}
isError={ isError={
isRepeaterInputError( isRepeaterInputError('mortality', 'condition', idx)
'mortality', .isError
'condition',
idx
).isError
} }
errorMessage={ errorMessage={
isRepeaterInputError( isRepeaterInputError('mortality', 'condition', idx)
'mortality', .errorMessage
'condition',
idx
).errorMessage
} }
options={RECORDING_FLAG_OPTIONS} options={RECORDING_FLAG_OPTIONS}
isDisabled={type === 'detail'} isDisabled={type === 'detail'}
isClearable isClearable
className={{ className={{
wrapper: wrapper: 'w-full min-w-52 md:min-w-72 lg:min-w-80',
'w-full min-w-52 md:min-w-72 lg:min-w-80',
}} }}
/> />
</td> </td>
@@ -1693,8 +1684,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
</Button> </Button>
</div> </div>
)} )}
</div> </Card>
</div>
{/* Action buttons */} {/* Action buttons */}
<FormActions<RecordingFormValues> <FormActions<RecordingFormValues>