mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-21 22:05:45 +00:00
merge: resolve conflict
This commit is contained in:
rstubryan
@@ -0,0 +1,263 @@
|
||||
'use client';
|
||||
|
||||
import Button from '@/components/Button';
|
||||
import SelectInput, { OptionType } from '@/components/input/SelectInput';
|
||||
import Table from '@/components/Table';
|
||||
import { ROWS_OPTIONS } from '@/config/constant';
|
||||
import { isResponseSuccess } from '@/lib/api-helper';
|
||||
import { cn } from '@/lib/helper';
|
||||
import { inventoryAdjustmentApi } from '@/services/api/inventory';
|
||||
import { useTableFilter } from '@/services/hooks/useTableFilter';
|
||||
import { InventoryAdjustment } from '@/types/api/inventory/adjustment';
|
||||
import { Icon } from '@iconify/react';
|
||||
import {
|
||||
ColumnDef,
|
||||
ColumnSort,
|
||||
SortingState,
|
||||
} from '@tanstack/react-table';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import useSWR from 'swr';
|
||||
|
||||
const InventoryAdjustmentTable = () => {
|
||||
const {
|
||||
state: tableFilterState,
|
||||
updateFilter,
|
||||
setPage,
|
||||
setPageSize,
|
||||
toQueryString: getTableFilterQueryString,
|
||||
} = useTableFilter({
|
||||
initial: {
|
||||
search: '',
|
||||
productCategorySort: '',
|
||||
productSort: '',
|
||||
warehouseSort: '',
|
||||
stockSort: '',
|
||||
},
|
||||
paramMap: {
|
||||
page: 'page',
|
||||
pageSize: 'limit',
|
||||
productCategorySort: 'sort_product_category',
|
||||
productSort: 'sort_product',
|
||||
warehouseSort: 'sort_warehouse',
|
||||
stockSort: 'sort_stock',
|
||||
},
|
||||
});
|
||||
|
||||
// Fetch Data
|
||||
const {
|
||||
data: inventoryAdjustments,
|
||||
isLoading,
|
||||
} = useSWR(
|
||||
`${inventoryAdjustmentApi.basePath}${getTableFilterQueryString()}`,
|
||||
inventoryAdjustmentApi.getAllFetcher
|
||||
);
|
||||
|
||||
// State
|
||||
const [sorting, setSorting] = useState<SortingState>([]);
|
||||
|
||||
// Columns
|
||||
const inventoryAdjustmentsColumns: ColumnDef<InventoryAdjustment>[] = [
|
||||
{
|
||||
header: '#',
|
||||
cell: (props) =>
|
||||
tableFilterState.pageSize * (tableFilterState.page - 1) +
|
||||
props.row.index +
|
||||
1,
|
||||
},
|
||||
{
|
||||
id: 'product_name',
|
||||
header: 'Nama Produk',
|
||||
accessorFn: (row) => row.product_warehouse?.product?.name ?? '-',
|
||||
},
|
||||
{
|
||||
id: 'warehouse_name',
|
||||
header: 'Gudang',
|
||||
accessorFn: (row) => row.product_warehouse?.warehouse?.name ?? '-',
|
||||
},
|
||||
{
|
||||
id: 'created_at',
|
||||
header: 'Tanggal',
|
||||
accessorFn: (row) =>
|
||||
new Date(row.created_at).toLocaleDateString('id-ID', {
|
||||
day: '2-digit',
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
}),
|
||||
},
|
||||
{
|
||||
id: 'before_quantity',
|
||||
header: 'Stok Sebelum',
|
||||
accessorFn: (row) => formatNumber(String(row.before_quantity)),
|
||||
},
|
||||
{
|
||||
id: 'after_quantity',
|
||||
header: 'Stok Sesudah',
|
||||
accessorFn: (row) => formatNumber(String(row.after_quantity)),
|
||||
},
|
||||
{
|
||||
id: 'quantity',
|
||||
header: 'Kuantitas',
|
||||
accessorFn: (row) => formatNumber(String(row.quantity)),
|
||||
},
|
||||
{
|
||||
id: 'transaction_type',
|
||||
header: 'Tipe Transaksi',
|
||||
accessorFn: (row) => {
|
||||
if (row.transaction_type === 'INCREASE') return 'Peningkatan';
|
||||
if (row.transaction_type === 'DECREASE') return 'Penurunan';
|
||||
return '-';
|
||||
},
|
||||
cell: (props) => {
|
||||
const type = props.row.original.transaction_type;
|
||||
const label =
|
||||
type === 'INCREASE'
|
||||
? 'Peningkatan'
|
||||
: type === 'DECREASE'
|
||||
? 'Penurunan'
|
||||
: '-';
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`small mx-auto badge badge-soft ${
|
||||
type === 'INCREASE' ? 'badge-success' : 'badge-error'
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'created_by',
|
||||
header: 'Oleh',
|
||||
accessorFn: (row) => row.created_user?.name ?? '-',
|
||||
},
|
||||
];
|
||||
|
||||
// Handler
|
||||
const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
|
||||
const newVal = val as OptionType;
|
||||
setPageSize(newVal.value as number);
|
||||
};
|
||||
|
||||
const updateSortingFilter = useCallback(
|
||||
(
|
||||
sortName: Exclude<keyof typeof tableFilterState, 'page' | 'pageSize'>,
|
||||
sortFilter: ColumnSort | undefined
|
||||
) => {
|
||||
if (!sortFilter) {
|
||||
updateFilter(sortName, '');
|
||||
} else {
|
||||
updateFilter(sortName, sortFilter.desc ? 'desc' : 'asc');
|
||||
}
|
||||
},
|
||||
[updateFilter]
|
||||
);
|
||||
|
||||
// Effect
|
||||
useEffect(() => {
|
||||
const productCategorySortFilter = sorting.find(
|
||||
(sortItem) => sortItem.id === 'productCategory'
|
||||
);
|
||||
const productSortFilter = sorting.find(
|
||||
(sortItem) => sortItem.id === 'product'
|
||||
);
|
||||
const warehouseSortFilter = sorting.find(
|
||||
(sortItem) => sortItem.id === 'warehouse'
|
||||
);
|
||||
const stockSortFilter = sorting.find((sortItem) => sortItem.id === 'stock');
|
||||
|
||||
updateSortingFilter('productCategorySort', productCategorySortFilter);
|
||||
updateSortingFilter('productSort', productSortFilter);
|
||||
updateSortingFilter('warehouseSort', warehouseSortFilter);
|
||||
updateSortingFilter('stockSort', stockSortFilter);
|
||||
}, [sorting, updateSortingFilter]);
|
||||
|
||||
// Utils Function
|
||||
const formatNumber = (value: string) => {
|
||||
const numericValue = value.replace(/[^0-9.]/g, '');
|
||||
const [integer, decimal] = numericValue.split('.');
|
||||
const formattedInteger = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
return decimal ? `${formattedInteger}.${decimal}` : formattedInteger;
|
||||
};
|
||||
|
||||
// Render
|
||||
return (
|
||||
<>
|
||||
<div className='w-full p-0 sm:p-4'>
|
||||
<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'>
|
||||
<div className='flex flex-row'>
|
||||
<Button href='/inventory/adjustment/add' color='primary'>
|
||||
<Icon icon='ic:round-plus' width={24} height={24} />
|
||||
Tambah
|
||||
</Button>
|
||||
|
||||
{/* <DebouncedTextInput
|
||||
name='search'
|
||||
placeholder='Cari Stock Adjustment'
|
||||
value={tableFilterState.search}
|
||||
onChange={searchChangeHandler}
|
||||
className={{ wrapper: 'sm:max-w-3xs' }}
|
||||
/> */}
|
||||
</div>
|
||||
|
||||
<div className='flex flex-row justify-end'>
|
||||
<SelectInput
|
||||
label='Baris'
|
||||
options={ROWS_OPTIONS}
|
||||
value={{
|
||||
label: String(tableFilterState.pageSize),
|
||||
value: tableFilterState.pageSize,
|
||||
}}
|
||||
onChange={pageSizeChangeHandler}
|
||||
className={{ wrapper: 'max-w-28' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Table<InventoryAdjustment>
|
||||
data={
|
||||
isResponseSuccess(inventoryAdjustments)
|
||||
? inventoryAdjustments?.data
|
||||
: []
|
||||
}
|
||||
columns={inventoryAdjustmentsColumns}
|
||||
pageSize={tableFilterState.pageSize}
|
||||
page={
|
||||
isResponseSuccess(inventoryAdjustments)
|
||||
? inventoryAdjustments?.meta?.page
|
||||
: 0
|
||||
}
|
||||
totalItems={
|
||||
isResponseSuccess(inventoryAdjustments)
|
||||
? inventoryAdjustments?.meta?.total_results
|
||||
: 0
|
||||
}
|
||||
onPageChange={setPage}
|
||||
isLoading={isLoading}
|
||||
sorting={sorting}
|
||||
setSorting={setSorting}
|
||||
className={{
|
||||
containerClassName: cn({
|
||||
'mb-20':
|
||||
isResponseSuccess(inventoryAdjustments) &&
|
||||
inventoryAdjustments?.data?.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',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default InventoryAdjustmentTable;
|
||||
@@ -0,0 +1,43 @@
|
||||
import * as Yup from 'yup';
|
||||
|
||||
export const InventoryAdjustmentFormSchema = Yup.object({
|
||||
product_category: Yup.object({
|
||||
value: Yup.number().required('ID Kategori Produk wajib diisi!'),
|
||||
label: Yup.string().required('Nama Kategori Produk wajib diisi!'),
|
||||
})
|
||||
.nullable(),
|
||||
|
||||
product_category_id: Yup.number().nullable(),
|
||||
|
||||
product: Yup.object({
|
||||
value: Yup.number().required('ID Produk wajib diisi!'),
|
||||
label: Yup.string().required('Nama Produk wajib diisi!'),
|
||||
})
|
||||
.nullable(),
|
||||
|
||||
product_id: Yup.number().nullable(),
|
||||
|
||||
warehouse: Yup.object({
|
||||
value: Yup.number().required('ID Gudang wajib diisi!'),
|
||||
label: Yup.string().required('Nama Gudang wajib diisi!'),
|
||||
})
|
||||
.nullable(),
|
||||
|
||||
warehouse_id: Yup.number().nullable(),
|
||||
|
||||
transaction_type: Yup.string()
|
||||
.oneOf(['increase', 'decrease'], 'Tipe transaksi tidak valid')
|
||||
.nullable()
|
||||
.required('Tipe transaksi wajib diisi'),
|
||||
|
||||
quantity: Yup.number()
|
||||
.typeError('Kuantitas harus berupa angka')
|
||||
.min(1, 'Minimal kuantitas adalah 1')
|
||||
.required('Kuantitas wajib diisi'),
|
||||
|
||||
note: Yup.string().required('Catatan wajib diisi!'),
|
||||
});
|
||||
|
||||
export type InventoryAdjustmentFormValues = Yup.InferType<
|
||||
typeof InventoryAdjustmentFormSchema
|
||||
>;
|
||||
@@ -0,0 +1,447 @@
|
||||
'use client';
|
||||
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import { inventoryAdjustmentApi } from '@/services/api/inventory';
|
||||
import {
|
||||
CreateInventoryAdjustmentPayload,
|
||||
InventoryAdjustment,
|
||||
} from '@/types/api/inventory/adjustment';
|
||||
import { useFormik } from 'formik';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import toast from 'react-hot-toast';
|
||||
import {
|
||||
InventoryAdjustmentFormSchema,
|
||||
InventoryAdjustmentFormValues,
|
||||
} from './InventoryAdjustmentForm.schema';
|
||||
import useSWR from 'swr';
|
||||
import {
|
||||
ProductApi,
|
||||
ProductCategoryApi,
|
||||
WarehouseApi,
|
||||
} from '@/services/api/master-data';
|
||||
import Button from '@/components/Button';
|
||||
import { Icon } from '@iconify/react';
|
||||
import SelectInput, { OptionType } from '@/components/input/SelectInput';
|
||||
import TextInput from '@/components/input/TextInput';
|
||||
import RadioInput from '@/components/input/RadioInput';
|
||||
import TextArea from '@/components/input/TextArea';
|
||||
|
||||
interface InventoryAdjustmentFormProps {
|
||||
type?: 'add' | 'edit' | 'detail';
|
||||
initialValues?: InventoryAdjustment;
|
||||
}
|
||||
|
||||
const InventoryAdjustmentForm = ({
|
||||
type = 'add',
|
||||
initialValues,
|
||||
}: InventoryAdjustmentFormProps) => {
|
||||
// State
|
||||
const router = useRouter();
|
||||
const [
|
||||
InventoryAdjustmentFormErrorMessage,
|
||||
setInventoryAdjustmentFormErrorMessage,
|
||||
] = useState('');
|
||||
const [selectedProductCategories, setSelectedProductCategories] =
|
||||
useState('');
|
||||
const [disabledProduct, setDisabledProduct] = useState(true);
|
||||
const [optionsProduct, setOptionsProduct] = useState<OptionType[]>([]);
|
||||
const [quantityLabel, setQuantityLabel] = useState('Tambah Stok');
|
||||
|
||||
// Submit Handler
|
||||
const createInventoryAdjustmentHandler = useCallback(
|
||||
async (payload: CreateInventoryAdjustmentPayload) => {
|
||||
const createInventoryAdjustmentRes = await inventoryAdjustmentApi.create(
|
||||
payload
|
||||
);
|
||||
|
||||
if (isResponseError(createInventoryAdjustmentRes)) {
|
||||
setInventoryAdjustmentFormErrorMessage(
|
||||
createInventoryAdjustmentRes.message
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
toast.success(createInventoryAdjustmentRes?.message as string);
|
||||
router.push('/inventory/adjustment');
|
||||
},
|
||||
[router]
|
||||
);
|
||||
|
||||
const formikInitialValues = useMemo<Partial<InventoryAdjustmentFormValues>>(() => {
|
||||
return {
|
||||
product_category_id: initialValues?.product_category?.id ?? 0,
|
||||
product_id: initialValues?.product?.id ?? 0,
|
||||
warehouse_id: initialValues?.warehouse?.id ?? 0,
|
||||
product_category: undefined,
|
||||
product: undefined,
|
||||
warehouse: undefined,
|
||||
quantity: initialValues?.quantity ?? 0,
|
||||
transaction_type: undefined,
|
||||
note: initialValues?.note ?? '',
|
||||
};
|
||||
}, [initialValues]);
|
||||
|
||||
// Formik
|
||||
const formik = useFormik<InventoryAdjustmentFormValues>({
|
||||
enableReinitialize: true,
|
||||
initialValues: formikInitialValues as InventoryAdjustmentFormValues,
|
||||
validationSchema: InventoryAdjustmentFormSchema,
|
||||
onSubmit: async (values) => {
|
||||
setInventoryAdjustmentFormErrorMessage('');
|
||||
const payload: CreateInventoryAdjustmentPayload = {
|
||||
product_id: values.product_id as number,
|
||||
warehouse_id: values.warehouse_id as number,
|
||||
quantity: values.quantity as number,
|
||||
transaction_type: values.transaction_type as string,
|
||||
note: values.note,
|
||||
};
|
||||
|
||||
switch (type) {
|
||||
case 'add':
|
||||
await createInventoryAdjustmentHandler(payload);
|
||||
break;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
// Fetch Data
|
||||
const productCategoriesUrl = `${
|
||||
ProductCategoryApi.basePath
|
||||
}?${new URLSearchParams({
|
||||
search: '',
|
||||
}).toString()}`;
|
||||
const { data: productCategories, isLoading: isLoadingProductCategories } =
|
||||
useSWR(productCategoriesUrl, ProductCategoryApi.getAllFetcher);
|
||||
|
||||
const productUrl = `${ProductApi.basePath}?${new URLSearchParams({
|
||||
search: '',
|
||||
product_category_id: selectedProductCategories,
|
||||
}).toString()}`;
|
||||
const { data: products, isLoading: isLoadingProducts } = useSWR(
|
||||
productUrl,
|
||||
ProductApi.getAllFetcher
|
||||
);
|
||||
|
||||
const warehouseUrl = `${WarehouseApi.basePath}?${new URLSearchParams({
|
||||
search: '',
|
||||
}).toString()}`;
|
||||
const { data: warehouses, isLoading: isLoadingWarehouses } = useSWR(
|
||||
warehouseUrl,
|
||||
WarehouseApi.getAllFetcher
|
||||
);
|
||||
|
||||
// Map Data to Options
|
||||
const optionsProductCategory = isResponseSuccess(productCategories)
|
||||
? productCategories?.data.map((productCategory) => ({
|
||||
value: productCategory.id,
|
||||
label: productCategory.name,
|
||||
}))
|
||||
: [];
|
||||
const optionsWarehouse = isResponseSuccess(warehouses)
|
||||
? warehouses?.data.map((warehouse) => ({
|
||||
value: warehouse.id,
|
||||
label: warehouse.name,
|
||||
}))
|
||||
: [];
|
||||
|
||||
// Options Handler
|
||||
const productCategoryChangeHandler = (
|
||||
val: OptionType | OptionType[] | null
|
||||
) => {
|
||||
formik.setFieldTouched('product_category_id', true);
|
||||
formik.setFieldValue('product_category_id', (val as OptionType)?.value);
|
||||
|
||||
formik.setFieldValue('product_category', val);
|
||||
|
||||
setSelectedProductCategories((val as OptionType)?.value as string);
|
||||
const disabled = (val as OptionType)?.value == null;
|
||||
setDisabledProduct(disabled);
|
||||
formik.setFieldValue('product_id', 0);
|
||||
formik.setFieldValue('product', null);
|
||||
formik.setFieldTouched('product', false);
|
||||
formik.setFieldTouched('product_id', false);
|
||||
};
|
||||
|
||||
const productChangeHandler = (val: OptionType | OptionType[] | null) => {
|
||||
formik.setFieldValue('product', val);
|
||||
|
||||
formik.setFieldTouched('product_id', true);
|
||||
formik.setFieldValue('product_id', (val as OptionType)?.value);
|
||||
};
|
||||
|
||||
const warehouseChangeHandler = (val: OptionType | OptionType[] | null) => {
|
||||
formik.setFieldValue('warehouse', val);
|
||||
|
||||
formik.setFieldTouched('warehouse_id', true);
|
||||
formik.setFieldValue('warehouse_id', (val as OptionType)?.value);
|
||||
};
|
||||
|
||||
const resetHandler = () => {
|
||||
formik.resetForm();
|
||||
setQuantityLabel('Tambah Stok');
|
||||
productCategoryChangeHandler(null);
|
||||
productChangeHandler(null);
|
||||
warehouseChangeHandler(null);
|
||||
};
|
||||
|
||||
|
||||
const { setValues: formikSetValues } = formik;
|
||||
|
||||
// Effect
|
||||
useEffect(() => {
|
||||
if (initialValues?.product_warehouse?.product?.id) {
|
||||
setSelectedProductCategories(
|
||||
String(initialValues.product_warehouse.product.id)
|
||||
);
|
||||
setDisabledProduct(false);
|
||||
formik.setFieldValue(
|
||||
'product_id',
|
||||
initialValues.product_warehouse.product.id
|
||||
);
|
||||
formik.setFieldValue('product', {
|
||||
value: initialValues.product_warehouse.product.id,
|
||||
label: initialValues.product_warehouse.product.name,
|
||||
});
|
||||
formik.setFieldValue(
|
||||
'warehouse_id',
|
||||
initialValues.product_warehouse.warehouse.id
|
||||
);
|
||||
formik.setFieldValue('warehouse', {
|
||||
value: initialValues.product_warehouse.warehouse.id,
|
||||
label: initialValues.product_warehouse.warehouse.name,
|
||||
});
|
||||
formik.setFieldValue(
|
||||
'quantity',
|
||||
initialValues.product_warehouse.quantity
|
||||
);
|
||||
formik.setFieldValue(
|
||||
'transaction_type',
|
||||
initialValues.transaction_type.toLowerCase()
|
||||
);
|
||||
formik.setFieldValue('note', initialValues.note);
|
||||
}
|
||||
if (initialValues?.transaction_type) {
|
||||
const type = initialValues.transaction_type.toLowerCase();
|
||||
setQuantityLabel(type === 'increase' ? 'Tambah Stok' : 'Kurangi Stok');
|
||||
}
|
||||
}, [formik, initialValues, setQuantityLabel, setDisabledProduct, setSelectedProductCategories]);
|
||||
useEffect(() => {
|
||||
formikSetValues(formikInitialValues as InventoryAdjustmentFormValues);
|
||||
}, [formikSetValues, formikInitialValues]);
|
||||
useEffect(() => {
|
||||
if (isResponseSuccess(products)) {
|
||||
const options = products.data.map((p) => ({
|
||||
value: p.id,
|
||||
label: p.name,
|
||||
}));
|
||||
setOptionsProduct(options);
|
||||
}
|
||||
}, [products]);
|
||||
|
||||
// Utils Function
|
||||
const formatNumber = (value: string) => {
|
||||
const numericValue = value.replace(/[^0-9.]/g, '');
|
||||
const [integer, decimal] = numericValue.split('.');
|
||||
const formattedInteger = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
return decimal ? `${formattedInteger}.${decimal}` : formattedInteger;
|
||||
};
|
||||
|
||||
// Render
|
||||
return (
|
||||
<>
|
||||
<section className='w-full max-w-xl'>
|
||||
<header className='flex flex-col gap-4'>
|
||||
<Button
|
||||
href='/inventory/adjustment'
|
||||
variant='link'
|
||||
className='w-fit p-0 text-primary'
|
||||
>
|
||||
<Icon icon='uil:arrow-left' width={24} height={24} />
|
||||
Kembali
|
||||
</Button>
|
||||
|
||||
<h1 className='text-2xl font-bold text-center'>
|
||||
{type === 'add' && 'Tambah Penyesuaian Persediaan'}
|
||||
{type === 'detail' && 'Detail Penyesuaian Persediaan'}
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
<form
|
||||
onSubmit={formik.handleSubmit}
|
||||
onReset={formik.handleReset}
|
||||
className='w-full mt-8 flex flex-col gap-6'
|
||||
>
|
||||
<div className='flex flex-col gap-4'>
|
||||
{/* Text Input Before Quantity */}
|
||||
{type === 'detail' && initialValues && (
|
||||
<>
|
||||
<TextInput
|
||||
label='Stok Sebelum'
|
||||
name='before_quantity'
|
||||
type='text'
|
||||
value={formatNumber(String(initialValues.before_quantity))}
|
||||
readOnly={true}
|
||||
/>
|
||||
<TextInput
|
||||
label='Stok Setelah'
|
||||
name='after_quantity'
|
||||
type='text'
|
||||
readOnly={true}
|
||||
value={formatNumber(String(initialValues.after_quantity))}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Select Input Product Category */}
|
||||
<SelectInput
|
||||
required
|
||||
label='Kategori Produk'
|
||||
value={formik.values.product_category as OptionType}
|
||||
onChange={productCategoryChangeHandler}
|
||||
onInputChange={setSelectedProductCategories}
|
||||
options={optionsProductCategory}
|
||||
isLoading={isLoadingProductCategories}
|
||||
isError={
|
||||
formik.touched.product_category &&
|
||||
Boolean(formik.errors.product_category)
|
||||
}
|
||||
errorMessage={formik.errors.product_category as string}
|
||||
isDisabled={type === 'detail'}
|
||||
isClearable
|
||||
/>
|
||||
|
||||
{/* Select Input Product */}
|
||||
<SelectInput
|
||||
required
|
||||
label='Produk'
|
||||
value={formik.values.product as OptionType}
|
||||
onChange={productChangeHandler}
|
||||
options={optionsProduct}
|
||||
isLoading={isLoadingProducts}
|
||||
isError={formik.touched.product && Boolean(formik.errors.product)}
|
||||
errorMessage={formik.errors.product as string}
|
||||
isDisabled={type === 'detail' || disabledProduct}
|
||||
isClearable
|
||||
/>
|
||||
|
||||
{/* Select Input Warehouse */}
|
||||
<SelectInput
|
||||
required
|
||||
label='Warehouse'
|
||||
value={formik.values.warehouse as OptionType}
|
||||
onChange={warehouseChangeHandler}
|
||||
options={optionsWarehouse}
|
||||
isLoading={isLoadingWarehouses}
|
||||
isError={
|
||||
formik.touched.warehouse && Boolean(formik.errors.warehouse)
|
||||
}
|
||||
errorMessage={formik.errors.warehouse as string}
|
||||
isDisabled={type === 'detail'}
|
||||
isClearable
|
||||
/>
|
||||
|
||||
{/* Radio Button Flag Stock */}
|
||||
<RadioInput
|
||||
name='transaction_type'
|
||||
label='Tipe Transaksi'
|
||||
options={[
|
||||
{ label: 'Tambah', value: 'increase' },
|
||||
{ label: 'Kurang', value: 'decrease' },
|
||||
]}
|
||||
value={formik.values.transaction_type}
|
||||
onChange={(e) => {
|
||||
formik.handleChange(e);
|
||||
setQuantityLabel(
|
||||
e.target.value === 'increase' ? 'Tambah Stok' : 'Kurangi Stok'
|
||||
);
|
||||
}}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={
|
||||
formik.touched.transaction_type &&
|
||||
Boolean(formik.errors.transaction_type)
|
||||
}
|
||||
errorMessage={formik.errors.transaction_type as string}
|
||||
variant='radio-primary'
|
||||
required
|
||||
bottomLabel={formik.values.transaction_type == undefined ? 'Pilih salah satu tipe transaksi' : undefined}
|
||||
disabled={type === 'detail'}
|
||||
/>
|
||||
|
||||
{/* Number Input Stock */}
|
||||
<TextInput
|
||||
className={{
|
||||
wrapper: `${formik.values.transaction_type != undefined ? '' : 'hidden'}`,
|
||||
}}
|
||||
required
|
||||
label={quantityLabel}
|
||||
name='quantity'
|
||||
type='text'
|
||||
value={formatNumber(String(formik.values.quantity))}
|
||||
onChange={(e) => {
|
||||
const rawValue = e.target.value.replace(/,/g, '');
|
||||
const numericValue = parseFloat(rawValue);
|
||||
if (!isNaN(numericValue)) {
|
||||
formik.setFieldValue('quantity', numericValue);
|
||||
} else {
|
||||
formik.setFieldValue('quantity', 0);
|
||||
}
|
||||
}}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={
|
||||
formik.touched.quantity && Boolean(formik.errors.quantity)
|
||||
}
|
||||
errorMessage={formik.errors.quantity as string}
|
||||
readOnly={type === 'detail'}
|
||||
/>
|
||||
|
||||
|
||||
|
||||
{/* Text Area Input Reason */}
|
||||
<TextArea
|
||||
required
|
||||
label='Alasan'
|
||||
name='note'
|
||||
value={formik.values.note as string}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={formik.touched.note && Boolean(formik.errors.note)}
|
||||
errorMessage={formik.errors.note as string}
|
||||
readOnly={type === 'detail'}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-row justify-between gap-2 flex-wrap'>
|
||||
{type !== 'detail' && (
|
||||
<div className='flex flex-row justify-end gap-2'>
|
||||
<Button type='button' color='warning' className='px-4' onClick={resetHandler}>
|
||||
Reset
|
||||
</Button>
|
||||
<Button
|
||||
type='submit'
|
||||
color='primary'
|
||||
isLoading={formik.isSubmitting}
|
||||
disabled={!formik.isValid || formik.isSubmitting || formik.values.product == undefined}
|
||||
className='px-4'
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{InventoryAdjustmentFormErrorMessage && (
|
||||
<div role='alert' className='alert alert-error'>
|
||||
<Icon
|
||||
icon='material-symbols:error-outline'
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
<span>{InventoryAdjustmentFormErrorMessage}</span>
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default InventoryAdjustmentForm;
|
||||
@@ -41,7 +41,6 @@ const CustomerForm = ({
|
||||
const [customerFormErrorMessage, setCustomerFormErrorMessage] = useState('');
|
||||
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
||||
const [picSelectInputValue, setPicSelectInputValue] = useState('');
|
||||
const [typeSelectInputValue, setTypeSelectInputValue] = useState('');
|
||||
|
||||
// Fetch Data
|
||||
const picUrl = `${UserApi.basePath}?${new URLSearchParams({
|
||||
@@ -252,7 +251,6 @@ const CustomerForm = ({
|
||||
}
|
||||
onChange={typeChangeHandler}
|
||||
options={typeOptions}
|
||||
onInputChange={setTypeSelectInputValue}
|
||||
isError={formik.touched.type && Boolean(formik.errors.type)}
|
||||
errorMessage={formik.errors.type as string}
|
||||
isDisabled={formType === 'detail'}
|
||||
@@ -309,7 +307,6 @@ const CustomerForm = ({
|
||||
isError={formik.touched.address && Boolean(formik.errors.address)}
|
||||
errorMessage={formik.errors.address}
|
||||
readOnly={formType === 'detail'}
|
||||
cols={8}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -2,7 +2,10 @@ import * as Yup from 'yup';
|
||||
|
||||
export const SupplierFormSchema = Yup.object({
|
||||
name: Yup.string().required('Nama wajib diisi!'),
|
||||
alias: Yup.string().required('Alias wajib diisi!'),
|
||||
alias: Yup.string()
|
||||
.matches(/^[A-Za-z0-9]+$/, 'Alias hanya boleh berisi huruf dan angka tanpa spasi atau simbol!')
|
||||
.max(5, 'Alias maksimal 5 karakter!')
|
||||
.required('Alias wajib diisi!'),
|
||||
pic: Yup.string().required('PIC wajib diisi!'),
|
||||
type: Yup.object({
|
||||
value: Yup.string().required(),
|
||||
|
||||
@@ -21,7 +21,6 @@ import SelectInput, { OptionType } from '@/components/input/SelectInput';
|
||||
import { Icon } from '@iconify/react';
|
||||
import Button from '@/components/Button';
|
||||
import TextInput from '@/components/input/TextInput';
|
||||
import TagInput from '@/components/input/TagInput';
|
||||
import TextArea from '@/components/input/TextArea';
|
||||
import { cn } from '@/lib/helper';
|
||||
import ConfirmationModal from '@/components/modal/ConfirmationModal';
|
||||
@@ -42,9 +41,7 @@ const SupplierForm = ({
|
||||
// Setup State
|
||||
const [supplierFormErrorMessage, setSupplierFormErrorMessage] = useState('');
|
||||
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
||||
const [typeSelectInputValue, setTypeSelectInputValue] = useState('');
|
||||
const [categorySelectInputValue, setCategorySelectInputValue] = useState('');
|
||||
const [hatcheryTagInputValue, setHatcheryTagInputValue] = useState('');
|
||||
const [hatcheryOptionsValues, setHatcheryOptionValues] = useState<OptionType[]>([]);
|
||||
|
||||
// -- Options data mapping
|
||||
const typeOptions = TYPE_OPTIONS;
|
||||
@@ -108,8 +105,6 @@ const SupplierForm = ({
|
||||
};
|
||||
|
||||
// Memo
|
||||
console.log('Memo');
|
||||
console.log(initialValues);
|
||||
const formikInitialValues = useMemo<SupplierFormValues>(() => {
|
||||
return {
|
||||
name: initialValues?.name ?? '',
|
||||
@@ -125,7 +120,7 @@ const SupplierForm = ({
|
||||
account_number: initialValues?.account_number ?? '',
|
||||
due_date: initialValues?.due_date ?? 1,
|
||||
};
|
||||
}, [initialValues]);
|
||||
}, [initialValues, typeOptions, categoryOptions]);
|
||||
|
||||
// Formik
|
||||
const formik = useFormik<SupplierFormValues>({
|
||||
@@ -172,8 +167,22 @@ const SupplierForm = ({
|
||||
// Initialize Formik
|
||||
useEffect(() => {
|
||||
formikSetValues(formikInitialValues);
|
||||
setHatcheryTagInputValue(formikInitialValues.hatchery);
|
||||
}, [formikSetValues, formikInitialValues, hatcheryTagInputValue]);
|
||||
if(formType != 'add'){
|
||||
const hatcheryArrays = formikInitialValues.hatchery.split(',');
|
||||
const hatcheryCreatedOptions = hatcheryArrays.map((item) => ({
|
||||
value: item,
|
||||
label: item,
|
||||
}));
|
||||
setHatcheryOptionValues(hatcheryCreatedOptions);
|
||||
}
|
||||
}, [formikSetValues, formikInitialValues, setHatcheryOptionValues]);
|
||||
useEffect(() => {
|
||||
const commaSeparatedValues = hatcheryOptionsValues.map((item) => item.value).join(',');
|
||||
formikSetValues({
|
||||
...formik.values,
|
||||
hatchery: commaSeparatedValues,
|
||||
})
|
||||
}, [hatcheryOptionsValues, formikSetValues]);
|
||||
|
||||
// Option Handler
|
||||
const typeChangeHandler = (val: OptionType | OptionType[] | null) => {
|
||||
@@ -260,7 +269,6 @@ const SupplierForm = ({
|
||||
}
|
||||
onChange={typeChangeHandler}
|
||||
options={typeOptions}
|
||||
onInputChange={setTypeSelectInputValue}
|
||||
isError={formik.touched.type && Boolean(formik.errors.type)}
|
||||
errorMessage={formik.errors.type as string}
|
||||
isDisabled={formType === 'detail'}
|
||||
@@ -278,7 +286,6 @@ const SupplierForm = ({
|
||||
}
|
||||
onChange={categoryChangeHandler}
|
||||
options={categoryOptions}
|
||||
onInputChange={setCategorySelectInputValue}
|
||||
isError={
|
||||
formik.touched.category && Boolean(formik.errors.category)
|
||||
}
|
||||
@@ -287,17 +294,25 @@ const SupplierForm = ({
|
||||
isClearable
|
||||
isSearchable={true}
|
||||
/>
|
||||
<TagInput
|
||||
name='hatchery'
|
||||
<SelectInput
|
||||
isMulti
|
||||
createables
|
||||
required
|
||||
placeholder='Pilih Hatchery'
|
||||
label='Hatchery'
|
||||
value={hatcheryTagInputValue}
|
||||
onChange={(value) => formik.setFieldValue('hatchery', value)}
|
||||
isError={
|
||||
formik.touched.hatchery && Boolean(formik.errors.hatchery)
|
||||
}
|
||||
errorMessage={formik.errors.hatchery}
|
||||
readOnly={formType === 'detail'}
|
||||
value={hatcheryOptionsValues}
|
||||
onChange={(val) => {
|
||||
console.log(val); // pastikan val = array of { value, label }
|
||||
setHatcheryOptionValues(val as OptionType[]);
|
||||
}}
|
||||
isError={formik.touched.hatchery && Boolean(formik.errors.hatchery)}
|
||||
errorMessage={formik.errors.hatchery as string}
|
||||
isDisabled={formType === 'detail'}
|
||||
isClearable
|
||||
isSearchable={true}
|
||||
options={[]}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
required
|
||||
label='Nomor Telepon'
|
||||
@@ -333,7 +348,6 @@ const SupplierForm = ({
|
||||
isError={formik.touched.address && Boolean(formik.errors.address)}
|
||||
errorMessage={formik.errors.address}
|
||||
readOnly={formType === 'detail'}
|
||||
cols={8}
|
||||
/>
|
||||
<TextInput
|
||||
required
|
||||
|
||||
Reference in New Issue
Block a user