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

chore: adjust ProjectFlockForm styling

Browse Source
This commit is contained in:
ValdiANS
2026-02-03 09:40:16 +07:00
parent d826746f29
commit 68f3c95b81
1 changed files with 365 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
+121 -74
View File
@@ -658,37 +658,48 @@ const ProjectFlockForm = ({
return ( return (
<> <>
<section className='w-full'> <section className='w-full h-full sm:w-[446px] overflow-y-auto'>
{/* Header */} {/* Header */}
<DrawerHeader <DrawerHeader
leftIcon={formType == 'add' ? 'mdi:close' : 'mdi:arrow-left'} leftIcon={
leftIconSize={24} formType == 'add' ? 'heroicons:chevron-left' : 'mdi:arrow-left'
}
leftIconHref={ leftIconHref={
formType == 'add' formType == 'add'
? '/production/project-flock' ? '/production/project-flock'
: `/production/project-flock/detail?projectFlockId=${initialValues?.id}` : `/production/project-flock/detail?projectFlockId=${initialValues?.id}`
} }
leftIconClassName='hover:text-gray-400' leftIconClassName='hover:text-gray-400'
subtitle={formType == 'add' ? 'Add Flock' : 'Update Flock'} subtitle={formType == 'add' ? 'Add List Flock' : 'Update Flock'}
subtitleClassName='text-sm text-neutral' className='sticky top-0 z-10 bg-base-100'
showDivider
> >
{formType == 'edit' && ( {formType == 'edit' && (
<Button <Button
type='button'
variant='ghost'
color='none'
onClick={() => { onClick={() => {
if (initialValues?.id) { if (initialValues?.id) {
deleteModal.openModal(); deleteModal.openModal();
} }
}} }}
variant='link'
className='p-0 text-error' className='p-0 text-error'
> >
<Icon <Icon icon='heroicons:trash' width={20} height={20} />
icon='material-symbols:delete-outline-rounded' </Button>
width={20} )}
height={20}
className='justify-start text-sm' {formType == 'add' && (
/> <Button
type='button'
variant='ghost'
color='none'
onClick={() => {
router.push('/production/project-flock');
}}
className='p-0 text-error'
>
<Icon icon='heroicons:trash' width={20} height={20} />
</Button> </Button>
)} )}
</DrawerHeader> </DrawerHeader>
@@ -719,20 +730,20 @@ const ProjectFlockForm = ({
onReset={formik.handleReset} onReset={formik.handleReset}
> >
{/* Form Informasi Umum */} {/* Form Informasi Umum */}
<div className='divider mt-3'></div> <div className='flex flex-col p-4'>
<div className='flex flex-col gap-4 px-4'> <h2 className='text-base font-medium text-base-content/50 font-roboto'>
<h2 className='text-2xl font-semibold'>Informasi Umum</h2> Informasi Umum
<div className='flex flex-col gap-4'> </h2>
<SelectInput <SelectInput
required required
label='Area' label='Area'
placeholder='Pilih Area'
value={formik.values.area as OptionType} value={formik.values.area as OptionType}
onChange={areaChangeHandler} onChange={areaChangeHandler}
options={optionsArea} options={optionsArea}
isLoading={isLoadingAreas} isLoading={isLoadingAreas}
isError={ isError={formik.touched.area_id && Boolean(formik.errors.area_id)}
formik.touched.area_id && Boolean(formik.errors.area_id)
}
errorMessage={formik.errors.area_id as string} errorMessage={formik.errors.area_id as string}
onInputChange={setInputValueArea} onInputChange={setInputValueArea}
onMenuScrollToBottom={loadMoreArea} onMenuScrollToBottom={loadMoreArea}
@@ -742,6 +753,7 @@ const ProjectFlockForm = ({
<SelectInput <SelectInput
required required
label='Lokasi' label='Lokasi'
placeholder='Pilih Lokasi'
value={formik.values.location as OptionType} value={formik.values.location as OptionType}
onChange={locationChangeHandler} onChange={locationChangeHandler}
options={ options={
@@ -751,8 +763,7 @@ const ProjectFlockForm = ({
} }
isLoading={isLoadingLocations} isLoading={isLoadingLocations}
isError={ isError={
formik.touched.location_id && formik.touched.location_id && Boolean(formik.errors.location_id)
Boolean(formik.errors.location_id)
} }
onInputChange={setInputValueLocation} onInputChange={setInputValueLocation}
onMenuScrollToBottom={loadMoreLocation} onMenuScrollToBottom={loadMoreLocation}
@@ -763,6 +774,7 @@ const ProjectFlockForm = ({
<SelectInput <SelectInput
required required
label='Flock' label='Flock'
placeholder='Pilih Flock'
value={ value={
formik.values.flock_name formik.values.flock_name
? ({ ? ({
@@ -776,10 +788,7 @@ const ProjectFlockForm = ({
onChange={(val) => { onChange={(val) => {
optionChangeHandler(val, 'flock'); optionChangeHandler(val, 'flock');
setSelectedFlock((val as OptionType)?.label); setSelectedFlock((val as OptionType)?.label);
formik.setFieldValue( formik.setFieldValue('flock_name', (val as OptionType)?.label);
'flock_name',
(val as OptionType)?.label
);
}} }}
options={optionsFlock} options={optionsFlock}
onInputChange={setInputValueFlock} onInputChange={setInputValueFlock}
@@ -795,6 +804,7 @@ const ProjectFlockForm = ({
<SelectInput <SelectInput
required required
label='FCR' label='FCR'
placeholder='Pilih FCR'
value={formik.values.fcr as OptionType} value={formik.values.fcr as OptionType}
onChange={(val) => { onChange={(val) => {
optionChangeHandler(val, 'fcr'); optionChangeHandler(val, 'fcr');
@@ -811,6 +821,7 @@ const ProjectFlockForm = ({
<SelectInput <SelectInput
required required
label='Kategori' label='Kategori'
placeholder='Pilih Kategori'
value={formik.values.category_option as OptionType} value={formik.values.category_option as OptionType}
onChange={categoryChangeHandler} onChange={categoryChangeHandler}
options={FLOCK_CATEGORY_OPTIONS} options={FLOCK_CATEGORY_OPTIONS}
@@ -824,6 +835,7 @@ const ProjectFlockForm = ({
<SelectInput <SelectInput
required required
label='Standar Produksi' label='Standar Produksi'
placeholder='Pilih Standar Produksi'
value={formik.values.production_standard as OptionType} value={formik.values.production_standard as OptionType}
onChange={(val) => { onChange={(val) => {
optionChangeHandler(val, 'production_standard'); optionChangeHandler(val, 'production_standard');
@@ -845,19 +857,20 @@ const ProjectFlockForm = ({
label='Periode' label='Periode'
disabled disabled
readOnly readOnly
placeholder='Period' placeholder='Periode Flock'
value={selectedLocation ? inputPeriod : ''} value={selectedLocation ? inputPeriod : ''}
/> />
</div> </div>
</div>
{/* Form Pilih Kandang */} {/* Form Pilih Kandang */}
<div className='divider'></div>
<div className='flex flex-col gap-4 px-4 pb-4'> <div className='flex flex-col gap-3 p-4 border-y border-base-content/10'>
<h2 className='text-2xl font-semibold'>Pilih Kandang</h2> <h2 className='text-base font-medium text-base-content/50 font-roboto'>
Informasi Kandang
</h2>
<div className='overflow-x-auto duration-300 ease-in-out'> <div className='overflow-x-auto duration-300 ease-in-out'>
{isLoadingKandang && ( {isLoadingKandang && (
<span className='loading loading-dots loading-xl'></span> <span className='loading loading-dots loading-xl block mx-auto' />
)} )}
<ProjectFlockKandangTable <ProjectFlockKandangTable
listPeriods={ listPeriods={
@@ -874,26 +887,13 @@ const ProjectFlockForm = ({
</div> </div>
{/* Card Estimasi Budget */} {/* Card Estimasi Budget */}
<div className='divider'></div> <div className='flex flex-col p-4'>
<div className='flex flex-col gap-4 px-4 pb-4'>
<h2 className='text-2xl font-semibold'>
Estimasi Anggaran Per Flock
</h2>
<div className='flex flex-col gap-4'> <div className='flex flex-col gap-4'>
{formik.values.project_budgets && {formik.values.project_budgets &&
formik.values.project_budgets.length > 0 ? ( formik.values.project_budgets.length > 0 ? (
formik.values.project_budgets.map((budget, index) => ( formik.values.project_budgets.map((budget, index) => (
<Card <div key={index} className='flex flex-col'>
key={index} {/* <div className='flex flex-row justify-between items-center mb-2'>
variant='bordered'
className={{
wrapper: 'w-full',
body: 'p-3',
}}
>
<div className='flex flex-col gap-2'>
<div className='flex flex-row justify-between items-center mb-2'>
<div className='text-lg'>Anggaran ke-{index + 1}</div>
<Button <Button
type='button' type='button'
color='error' color='error'
@@ -906,13 +906,36 @@ const ProjectFlockForm = ({
> >
<Icon icon='mdi:trash' width={16} height={16} /> <Icon icon='mdi:trash' width={16} height={16} />
</Button> </Button>
</div> */}
<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>
<Button
type='button'
variant='ghost'
color='none'
onClick={() =>
onDeleteBudgetRowHandler(
budget.nonstock_id as number,
index
)
}
className='p-0 text-error'
>
<Icon icon='heroicons:trash' width={20} height={20} />
</Button>
</div> </div>
<div className='flex flex-row justify-between items-center'> <div className='flex flex-row justify-between items-center'>
<SelectInput <SelectInput
isClearable isClearable
label='Jenis Produk'
options={filteredNonStockOptions ?? []} options={filteredNonStockOptions ?? []}
isLoading={isLoadingNonstocks} isLoading={isLoadingNonstocks}
placeholder='Pilih barang non stock' placeholder='Pilih Jenis Produk'
value={formik.values.project_budgets[index].nonstock} value={formik.values.project_budgets[index].nonstock}
onInputChange={setInputValueNonstock} onInputChange={setInputValueNonstock}
onMenuScrollToBottom={loadMoreNonstock} onMenuScrollToBottom={loadMoreNonstock}
@@ -922,9 +945,7 @@ const ProjectFlockForm = ({
]; ];
updatedBudgets[index].nonstock = val as OptionType; updatedBudgets[index].nonstock = val as OptionType;
updatedBudgets[index].nonstock_id = updatedBudgets[index].nonstock_id =
(val as OptionType) (val as OptionType) ? (val as OptionType).value : 0;
? (val as OptionType).value
: 0;
formik.setFieldValue( formik.setFieldValue(
'project_budgets', 'project_budgets',
updatedBudgets updatedBudgets
@@ -957,20 +978,25 @@ const ProjectFlockForm = ({
<div className='flex flex-row justify-between items-center'> <div className='flex flex-row justify-between items-center'>
<NumberInput <NumberInput
name={`project_budgets[${index}].qty`} name={`project_budgets[${index}].qty`}
placeholder='Masukkan jumlah' label='Jumlah Pembelian'
placeholder='Masukkan Jumlah Pembelian'
value={formik.values.project_budgets[index].qty} value={formik.values.project_budgets[index].qty}
onChange={(e) => onChange={(e) =>
handleBudgetChange(index, 'qty', e.target.value) handleBudgetChange(index, 'qty', e.target.value)
} }
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
allowNegative={false} allowNegative={false}
endAdornment={ inputPrefix={
<div className='text-gray-500'> <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) {isResponseSuccess(nonstocks)
? (nonstocks.data.find( ? (nonstocks.data.find(
(ns) => ns.id === budget.nonstock_id (ns) => ns.id === budget.nonstock_id
)?.uom?.name ?? '') )?.uom?.name ?? '')
: ''} : ''}
</span>
<div className='w-px bg-base-content/10' />
</div> </div>
} }
errorMessage={ errorMessage={
@@ -990,28 +1016,31 @@ const ProjectFlockForm = ({
)?.qty as string )?.qty as string
) )
} }
className={{
inputPrefix:
'py-0 px-0 pl-3 text-base-content/50 bg-transparent border-r-0',
inputWrapper: 'border-l-0 pl-5',
}}
/> />
</div> </div>
<div className='flex flex-row justify-between items-center'> <div className='flex flex-row justify-between items-center'>
<NumberInput <NumberInput
name={`project_budgets[${index}].price`} name={`project_budgets[${index}].price`}
label='Harga Satuan (Rp)'
value={formik.values.project_budgets[index].price} value={formik.values.project_budgets[index].price}
onChange={(e) => onChange={(e) =>
handleBudgetChange(index, 'price', e.target.value) handleBudgetChange(index, 'price', e.target.value)
} }
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
placeholder='Masukkan harga satuan' placeholder='Masukkan Harga Satuan (Rp)'
allowNegative={false} allowNegative={false}
startAdornment='Rp' inputPrefix={
endAdornment={ <div className='w-full h-full py-1 flex flex-row items-stretch justify-between gap-3'>
<div className='text-gray-500'> <span className='text-sm text-base-content/60 self-center text-nowrap truncate'>
{`Per ${ Rp
isResponseSuccess(nonstocks) </span>
? (nonstocks.data.find(
(ns) => ns.id === budget.nonstock_id <div className='w-px bg-base-content/10' />
)?.uom?.name ?? 'Item')
: 'Item'
}`}
</div> </div>
} }
errorMessage={ errorMessage={
@@ -1031,14 +1060,18 @@ const ProjectFlockForm = ({
)?.price as string )?.price as string
) )
} }
className={{
inputPrefix:
'py-0 px-0 pl-3 text-base-content/50 bg-transparent border-r-0',
inputWrapper: 'border-l-0 pl-5',
}}
/> />
</div> </div>
<div className='flex flex-row justify-between items-center'> <div className='flex flex-row justify-between items-center'>
<NumberInput <NumberInput
name={`project_budgets[${index}].total_price`} name={`project_budgets[${index}].total_price`}
value={ label='Total Harga'
formik.values.project_budgets[index].total_price value={formik.values.project_budgets[index].total_price}
}
onChange={(e) => onChange={(e) =>
handleBudgetChange( handleBudgetChange(
index, index,
@@ -1047,11 +1080,16 @@ const ProjectFlockForm = ({
) )
} }
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
placeholder='Masukkan harga total' placeholder='Masukkan Total Harga'
allowNegative={false} allowNegative={false}
startAdornment='Rp' inputPrefix={
endAdornment={ <div className='w-full h-full py-1 flex flex-row items-stretch justify-between gap-3'>
<div className='text-gray-500'>Total</div> <span className='text-sm text-base-content/60 self-center text-nowrap truncate'>
Rp
</span>
<div className='w-px bg-base-content/10' />
</div>
} }
errorMessage={ errorMessage={
( (
@@ -1071,10 +1109,14 @@ const ProjectFlockForm = ({
)?.total_price as string )?.total_price as string
) )
} }
className={{
inputPrefix:
'py-0 px-0 pl-3 text-base-content/50 bg-transparent border-r-0',
inputWrapper: 'border-l-0 pl-5',
}}
/> />
</div> </div>
</div> </div>
</Card>
)) ))
) : ( ) : (
<div className='text-center py-4 text-gray-400'> <div className='text-center py-4 text-gray-400'>
@@ -1093,7 +1135,9 @@ const ProjectFlockForm = ({
</div> </div>
</div> </div>
<div className='p-4'>
<AlertErrorList formErrorList={formErrorList} onClose={close} /> <AlertErrorList formErrorList={formErrorList} onClose={close} />
</div>
<div className='flex flex-row justify-center gap-2 flex-wrap my-6 px-4'> <div className='flex flex-row justify-center gap-2 flex-wrap my-6 px-4'>
{formType !== 'detail' && ( {formType !== 'detail' && (
@@ -1133,6 +1177,9 @@ const ProjectFlockForm = ({
isLoading: isDeleteLoading, isLoading: isDeleteLoading,
onClick: confirmationModalDeleteClickHandler, onClick: confirmationModalDeleteClickHandler,
}} }}
className={{
modal: 'w-full sm:w-[446px]',
}}
/> />
</> </>
); );