refactor(FE): Add record_date and DateInput to recording form

This commit is contained in:
rstubryan
2026-01-15 14:08:09 +07:00
parent 63461173e5
commit dd080b1d19
2 changed files with 31 additions and 5 deletions
@@ -7,6 +7,7 @@ import {
} from '@/types/api/production/recording'; } from '@/types/api/production/recording';
type RecordingGrowingFormSchemaType = { type RecordingGrowingFormSchemaType = {
record_date: string;
project_flock_kandang: { project_flock_kandang: {
value: number; value: number;
label: string; label: string;
@@ -85,6 +86,9 @@ const EggObjectSchema: Yup.ObjectSchema<EggSchema> = Yup.object({
export const RecordingGrowingFormSchema: Yup.ObjectSchema<RecordingGrowingFormSchemaType> = export const RecordingGrowingFormSchema: Yup.ObjectSchema<RecordingGrowingFormSchemaType> =
Yup.object({ Yup.object({
record_date: Yup.string()
.required('Tanggal recording wajib diisi!')
.typeError('Tanggal recording wajib diisi!'),
project_flock_kandang: Yup.object({ project_flock_kandang: Yup.object({
value: Yup.number().min(1).required(), value: Yup.number().min(1).required(),
label: Yup.string().required(), label: Yup.string().required(),
@@ -179,6 +183,9 @@ type RecordingFormData = Partial<Recording> & {
export const getRecordingGrowingFormInitialValues = ( export const getRecordingGrowingFormInitialValues = (
initialValues?: RecordingFormData initialValues?: RecordingFormData
): RecordingGrowingFormValues => ({ ): RecordingGrowingFormValues => ({
record_date: initialValues?.record_datetime
? new Date(initialValues.record_datetime).toISOString().split('T')[0]
: new Date().toISOString().split('T')[0],
project_flock_kandang: initialValues?.project_flock_kandang_id project_flock_kandang: initialValues?.project_flock_kandang_id
? { ? {
value: initialValues.project_flock_kandang_id, value: initialValues.project_flock_kandang_id,
@@ -12,6 +12,7 @@ import RequirePermission from '@/components/helper/RequirePermission';
import Card from '@/components/Card'; import Card from '@/components/Card';
import Badge from '@/components/Badge'; import Badge from '@/components/Badge';
import NumberInput from '@/components/input/NumberInput'; import NumberInput from '@/components/input/NumberInput';
import DateInput from '@/components/input/DateInput';
import SelectInput, { import SelectInput, {
OptionType, OptionType,
useSelect, useSelect,
@@ -135,10 +136,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
// ===== PAYLOAD CREATION HELPERS ===== // ===== PAYLOAD CREATION HELPERS =====
const createGrowingPayload = useCallback( const createGrowingPayload = useCallback(
(values: RecordingGrowingFormValues) => { (values: RecordingGrowingFormValues) => {
const today = new Date().toISOString().split('T')[0];
return { return {
project_flock_kandang_id: values.project_flock_kandang_id, project_flock_kandang_id: values.project_flock_kandang_id,
record_date: today, record_date: values.record_date,
stocks: (values.stocks ?? []).map((stock) => ({ stocks: (values.stocks ?? []).map((stock) => ({
product_warehouse_id: stock.product_warehouse_id, product_warehouse_id: stock.product_warehouse_id,
qty: Number(stock.qty) || 0, qty: Number(stock.qty) || 0,
@@ -154,10 +154,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
const createLayingPayload = useCallback( const createLayingPayload = useCallback(
(values: RecordingLayingFormValues) => { (values: RecordingLayingFormValues) => {
const today = new Date().toISOString().split('T')[0];
return { return {
project_flock_kandang_id: values.project_flock_kandang_id, project_flock_kandang_id: values.project_flock_kandang_id,
record_date: today, record_date: values.record_date,
stocks: (values.stocks ?? []).map((stock) => ({ stocks: (values.stocks ?? []).map((stock) => ({
product_warehouse_id: stock.product_warehouse_id, product_warehouse_id: stock.product_warehouse_id,
qty: Number(stock.qty) || 0, qty: Number(stock.qty) || 0,
@@ -971,6 +970,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
formik.setFieldTouched('project_flock_kandang_id', true); formik.setFieldTouched('project_flock_kandang_id', true);
}; };
const handleRecordDateChange = useCallback(
(e: React.ChangeEvent<HTMLInputElement>) => {
formik.setFieldValue('record_date', e.target.value);
},
[formik]
);
useEffect(() => { useEffect(() => {
if (projectFlockKandangLookup?.project_flock_kandang_id) { if (projectFlockKandangLookup?.project_flock_kandang_id) {
const projectFlockKandangId = const projectFlockKandangId =
@@ -1364,8 +1370,21 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
body: 'flex flex-col gap-6', body: 'flex flex-col gap-6',
}} }}
> >
<div className={'grid grid-cols-3 gap-4'}> <div className={'grid grid-cols-4 gap-4'}>
<> <>
<DateInput
required
label='Tanggal Recording'
name='record_date'
value={formik.values.record_date}
onChange={handleRecordDateChange}
onBlur={formik.handleBlur}
isError={
formik.touched.record_date &&
Boolean(formik.errors.record_date)
}
errorMessage={formik.errors.record_date as string}
/>
<SelectInput <SelectInput
key={`location-select-${selectedLocation?.value || 'default'}`} key={`location-select-${selectedLocation?.value || 'default'}`}
required required