-
-
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+ data={isResponseSuccess(nonstocks) ? nonstocks?.data : []}
+ columns={nonstocksColumns}
+ pageSize={tableFilterState.pageSize}
+ page={isResponseSuccess(nonstocks) ? nonstocks?.meta?.page : 0}
+ totalItems={
+ isResponseSuccess(nonstocks) ? nonstocks?.meta?.total_results : 0
+ }
+ onPageChange={setPage}
+ isLoading={isLoading}
+ sorting={sorting}
+ setSorting={setSorting}
+ className={{
+ containerClassName: cn({
+ 'mb-20':
+ isResponseSuccess(nonstocks) && nonstocks?.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',
+ }}
/>
-
- data={isResponseSuccess(nonstocks) ? nonstocks?.data : []}
- columns={nonstocksColumns}
- pageSize={10}
- fuzzySearchValue={searchValue}
- onFuzzySearchValueChange={setSearchValue}
- isLoading={isLoading}
- className={{
- containerClassName: cn({
- 'mb-20':
- isResponseSuccess(nonstocks) && nonstocks?.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',
+
-
+
);
};
diff --git a/src/components/pages/master-data/nonstock/form/NonstockForm.schema.ts b/src/components/pages/master-data/nonstock/form/NonstockForm.schema.ts
index 50f69c7d..8039ef76 100644
--- a/src/components/pages/master-data/nonstock/form/NonstockForm.schema.ts
+++ b/src/components/pages/master-data/nonstock/form/NonstockForm.schema.ts
@@ -2,6 +2,22 @@ import * as Yup from 'yup';
export const NonstockFormSchema = Yup.object({
name: Yup.string().required('Nama wajib diisi!'),
+
+ uomId: Yup.number().min(1, 'UOM wajib diisi!').required('UOM wajib diisi!'),
+ uom: Yup.object({
+ value: Yup.number().min(1).required(),
+ label: Yup.string().required(),
+ }).nullable(),
+
+ supplierIds: Yup.array().of(Yup.number().min(0, 'Supplier wajib diisi!')),
+ suppliers: Yup.array().of(
+ Yup.object({
+ value: Yup.number().min(0).required(),
+ label: Yup.string().required(),
+ })
+ ),
+
+ flags: Yup.array().of(Yup.string()).notRequired(),
});
export const UpdateNonstockFormSchema = NonstockFormSchema;
diff --git a/src/components/pages/master-data/nonstock/form/NonstockForm.tsx b/src/components/pages/master-data/nonstock/form/NonstockForm.tsx
index 33dcba54..7a67c9a7 100644
--- a/src/components/pages/master-data/nonstock/form/NonstockForm.tsx
+++ b/src/components/pages/master-data/nonstock/form/NonstockForm.tsx
@@ -3,26 +3,31 @@
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useRouter } from 'next/navigation';
import { useFormik } from 'formik';
+import { toast } from 'react-hot-toast';
+import useSWR from 'swr';
import { Icon } from '@iconify/react';
import Button from '@/components/Button';
import TextInput from '@/components/input/TextInput';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
import {
NonstockFormSchema,
NonstockFormValues,
UpdateNonstockFormSchema,
} from '@/components/pages/master-data/nonstock/form/NonstockForm.schema';
-import { isResponseError } from '@/lib/api-helper';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
import {
- CreateNonstockPayload,
Nonstock,
+ CreateNonstockPayload,
UpdateNonstockPayload,
} from '@/types/api/master-data/nonstock';
-import {
- createNonstock,
- updateNonstock,
-} from '@/services/api/master-data/nonstock';
+import { NonstockApi, SupplierApi, UomApi } from '@/services/api/master-data';
+import { cn } from '@/lib/helper';
+import { flags } from '@/types/api/api-general';
+import { SUPPLIER_FLAG_OPTIONS } from '@/config/constant';
interface NonstockFormProps {
type?: 'add' | 'edit' | 'detail';
@@ -31,19 +36,21 @@ interface NonstockFormProps {
const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
const router = useRouter();
+ const deleteModal = useModal();
const [nonstockFormErrorMessage, setNonstockFormErrorMessage] = useState('');
+ const [isDeleteLoading, setIsDeleteLoading] = useState(false);
const createNonstockHandler = useCallback(
async (payload: CreateNonstockPayload) => {
- const createNonstockRes = await createNonstock(payload);
+ const createNonstockRes = await NonstockApi.create(payload);
if (isResponseError(createNonstockRes)) {
setNonstockFormErrorMessage(createNonstockRes.message);
return;
}
- alert(createNonstockRes?.message);
+ toast.success(createNonstockRes?.message as string);
router.push('/master-data/nonstock');
},
[router]
@@ -51,14 +58,14 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
const updateNonstockHandler = useCallback(
async (nonstockId: number, payload: UpdateNonstockPayload) => {
- const updateNonstockRes = await updateNonstock(nonstockId, payload);
+ const updateNonstockRes = await NonstockApi.update(nonstockId, payload);
if (updateNonstockRes?.status === 'error') {
setNonstockFormErrorMessage(updateNonstockRes.message);
return;
}
- alert(updateNonstockRes?.message);
+ toast.success(updateNonstockRes?.message as string);
router.refresh();
router.push('/master-data/nonstock');
},
@@ -68,6 +75,22 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
const formikInitialValues = useMemo
(() => {
return {
name: initialValues?.name ?? '',
+ uomId: initialValues?.uom_id ?? 0,
+ uom: initialValues?.uom
+ ? {
+ value: initialValues?.uom.id,
+ label: initialValues?.uom.name,
+ }
+ : null,
+ supplierIds:
+ initialValues?.suppliers.map((supplier) => supplier.id) ?? [],
+ suppliers:
+ initialValues?.suppliers.map((supplier) => ({
+ value: supplier.id,
+ label: supplier.name,
+ })) ?? [],
+
+ flags: initialValues?.flags ?? [],
};
}, [initialValues]);
@@ -80,6 +103,9 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
const nonstockPayload: CreateNonstockPayload = {
name: values.name,
+ uom_id: values.uomId,
+ supplier_ids: values.supplierIds as number[],
+ flags: values.flags as flags[],
};
switch (type) {
@@ -97,81 +123,268 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
},
});
+ const { setValues: formikSetValues } = formik;
+
+ // UOM
+ const [uomSelectInputValue, setUomSelectInputValue] = useState('');
+
+ const uomsUrl = `${UomApi.basePath}?${new URLSearchParams({
+ search: uomSelectInputValue ?? '',
+ }).toString()}`;
+
+ const { data: uoms, isLoading: isLoadingUoms } = useSWR(
+ uomsUrl,
+ UomApi.getAllFetcher
+ );
+
+ const uomOptions = isResponseSuccess(uoms)
+ ? uoms?.data.map((uom) => ({
+ value: uom.id,
+ label: uom.name,
+ }))
+ : [];
+
+ const uomChangeHandler = (val: OptionType | OptionType[] | null) => {
+ formik.setFieldTouched('uom', true);
+ formik.setFieldValue('uom', val);
+
+ formik.setFieldTouched('uomId', true);
+ formik.setFieldValue('uomId', (val as OptionType)?.value);
+ };
+
+ // supplier
+ const [supplierSelectInputValue, setSupplierSelectInputValue] = useState('');
+
+ const suppliersUrl = `${SupplierApi.basePath}?${new URLSearchParams({
+ search: supplierSelectInputValue ?? '',
+ }).toString()}`;
+
+ const { data: suppliers, isLoading: isLoadingSuppliers } = useSWR(
+ suppliersUrl,
+ SupplierApi.getAllFetcher
+ );
+
+ const supplierOptions = isResponseSuccess(suppliers)
+ ? suppliers?.data
+ .filter((sup) => sup.category === 'BOP')
+ .map((supplier) => ({
+ value: supplier.id,
+ label: supplier.name,
+ }))
+ : [];
+
+ const supplierChangeHandler = (val: OptionType | OptionType[] | null) => {
+ formik.setFieldTouched('suppliers', true);
+ formik.setFieldValue('suppliers', val);
+
+ const supplierIds = (val as OptionType[]).map(
+ (supplier) => supplier.value as number
+ );
+
+ formik.setFieldTouched('supplierIds', true);
+ formik.setFieldValue('supplierIds', supplierIds);
+ };
+
+ const deleteNonstockClickHandler = () => {
+ deleteModal.openModal();
+ };
+
+ const confirmationModalDeleteClickHandler = async () => {
+ setIsDeleteLoading(true);
+
+ await NonstockApi.delete(initialValues?.id as number);
+
+ deleteModal.closeModal();
+ toast.success('Successfully delete Nonstock!');
+ setIsDeleteLoading(false);
+ router.push('/master-data/nonstock');
+ };
+
+ const flagsChangeHandler = (val: OptionType | OptionType[] | null) => {
+ const formattedFlags = (val as OptionType[]).map(
+ (flag) => flag.value as string
+ );
+
+ formik.setFieldValue('flags', formattedFlags);
+ };
+
useEffect(() => {
- formik.setValues(formikInitialValues);
- }, [formikInitialValues]);
+ formikSetValues(formikInitialValues);
+ }, [formikSetValues, formikInitialValues]);
return (
-
-
-
+
+
-
- {type === 'add' && 'Tambah Non Stock'}
- {type === 'edit' && 'Edit Non Stock'}
- {type === 'detail' && 'Detail Non Stock'}
-
-
+
-
+ {type !== 'add' && (
+
+
- {nonstockFormErrorMessage && (
-
-
- {nonstockFormErrorMessage}
+ {type !== 'edit' && (
+
+ )}
)}
-
- )}
-
-
+
+ {type !== 'detail' && (
+
+
+
+
+
+ )}
+
+
+ {nonstockFormErrorMessage && (
+
+
+ {nonstockFormErrorMessage}
+
+ )}
+
+
+
+ {type !== 'add' && (
+
+ )}
+
);
};
diff --git a/src/components/pages/master-data/product-category/ProductCategoryTable.tsx b/src/components/pages/master-data/product-category/ProductCategoryTable.tsx
new file mode 100644
index 00000000..f8413ab6
--- /dev/null
+++ b/src/components/pages/master-data/product-category/ProductCategoryTable.tsx
@@ -0,0 +1,266 @@
+'use client';
+
+import { ChangeEventHandler, useEffect, useState } from 'react';
+import useSWR from 'swr';
+import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
+import toast from 'react-hot-toast';
+
+import { Icon } from '@iconify/react';
+import Table from '@/components/Table';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import Button from '@/components/Button';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+
+import { ProductCategory } from '@/types/api/master-data/product-category';
+import { ProductCategoryApi } from '@/services/api/master-data';
+import { cn } from '@/lib/helper';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { ROWS_OPTIONS } from '@/config/constant';
+
+const RowOptionsMenu = ({
+ type = 'dropdown',
+ props,
+ deleteClickHandler,
+}: {
+ type: 'dropdown' | 'collapse';
+ props: CellContext
;
+ deleteClickHandler: () => void;
+}) => {
+ return (
+
+
+
+
+
+ );
+};
+
+const ProductCategoryTable = () => {
+ const {
+ state: tableFilterState,
+ updateFilter,
+ setPage,
+ setPageSize,
+ toQueryString: getTableFilterQueryString,
+ } = useTableFilter({
+ initial: { search: '', nameSort: '' },
+ paramMap: { page: 'page', pageSize: 'limit', nameSort: 'sort_name' },
+ });
+
+ const {
+ data: productCategories,
+ isLoading,
+ mutate: refreshProductCategories,
+ } = useSWR(
+ `${ProductCategoryApi.basePath}${getTableFilterQueryString()}`,
+ ProductCategoryApi.getAllFetcher
+ );
+
+ const deleteModal = useModal();
+
+ const [selectedProductCategory, setSelectedProductCategory] = useState(undefined);
+ const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+ const [sorting, setSorting] = useState([]);
+
+ const productCategoryColumns: ColumnDef[] = [
+ {
+ header: '#',
+ cell: (props) =>
+ tableFilterState.pageSize * (tableFilterState.page - 1) +
+ props.row.index +
+ 1,
+ },
+ {
+ accessorKey: 'code',
+ header: 'Code',
+ },
+ {
+ accessorKey: 'name',
+ header: 'Nama',
+ },
+ {
+ header: 'Aksi',
+ cell: (props) => {
+ const currentPageSize = props.table.getPaginationRowModel().rows.length;
+ const currentPageRows = props.table.getPaginationRowModel().flatRows;
+ const currentRowRelativeIndex =
+ currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
+
+ const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+
+ const deleteClickHandler = () => {
+ setSelectedProductCategory(props.row.original);
+ deleteModal.openModal();
+ };
+
+ return (
+ <>
+ {currentPageSize > 2 && (
+
+
+
+ )}
+
+ {currentPageSize <= 2 && (
+
+
+
+ )}
+
+ );
+ },
+ },
+ ];
+
+ const confirmationModalDeleteClickHandler = async () => {
+ setIsDeleteLoading(true);
+
+ await ProductCategoryApi.delete(selectedProductCategory?.id as number);
+ refreshProductCategories();
+
+ deleteModal.closeModal();
+ toast.success('Successfully delete Product Category!');
+ setIsDeleteLoading(false);
+ };
+
+ const searchChangeHandler: ChangeEventHandler = (e) => {
+ updateFilter('search', e.target.value);
+ };
+
+ const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+ const newVal = val as OptionType;
+ setPageSize(newVal.value as number);
+ };
+
+ useEffect(() => {
+ const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
+ if (!isNameSorted) {
+ updateFilter('nameSort', '');
+ } else {
+ updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
+ }
+ }, [sorting]);
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+ data={isResponseSuccess(productCategories) ? productCategories?.data : []}
+ columns={productCategoryColumns}
+ pageSize={tableFilterState.pageSize}
+ page={isResponseSuccess(productCategories) ? productCategories?.meta?.page : 0}
+ totalItems={isResponseSuccess(productCategories) ? productCategories?.meta?.total_results : 0}
+ onPageChange={setPage}
+ isLoading={isLoading}
+ sorting={sorting}
+ setSorting={setSorting}
+ className={{
+ containerClassName: cn({
+ 'mb-20': isResponseSuccess(productCategories) && productCategories?.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',
+ }}
+ />
+
+ {type === 'add' && 'Tambah Product Category'}
+ {type === 'edit' && 'Edit Product Category'}
+ {type === 'detail' && 'Detail Product Category'}
+
+
+
+
+
+
+ {type !== 'add' && (
+
+ )}
+
+ );
+};
+
+export default ProductCategoryForm;
\ No newline at end of file
diff --git a/src/components/pages/master-data/product/ProductTable.tsx b/src/components/pages/master-data/product/ProductTable.tsx
new file mode 100644
index 00000000..ab256548
--- /dev/null
+++ b/src/components/pages/master-data/product/ProductTable.tsx
@@ -0,0 +1,350 @@
+'use client';
+
+import { ChangeEventHandler, useCallback, useEffect, useState } from 'react';
+import useSWR from 'swr';
+import {
+ CellContext,
+ ColumnDef,
+ ColumnSort,
+ SortingState,
+} from '@tanstack/react-table';
+import toast from 'react-hot-toast';
+
+import { Icon } from '@iconify/react';
+import Table from '@/components/Table';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import Button from '@/components/Button';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+
+import { Product } from '@/types/api/master-data/product';
+import { ProductApi } from '@/services/api/master-data';
+import { cn } from '@/lib/helper';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { ROWS_OPTIONS } from '@/config/constant';
+
+const RowOptionsMenu = ({
+ type = 'dropdown',
+ props,
+ deleteClickHandler,
+}: {
+ type: 'dropdown' | 'collapse';
+ props: CellContext;
+ deleteClickHandler: () => void;
+}) => (
+
+
+
+
+
+);
+
+const ProductsTable = () => {
+ const {
+ state: tableFilterState,
+ updateFilter,
+ setPage,
+ setPageSize,
+ toQueryString: getTableFilterQueryString,
+ } = useTableFilter({
+ initial: {
+ search: '',
+ nameSort: '',
+ skuSort: '',
+ brandSort: '',
+ categorySort: '',
+ },
+ paramMap: {
+ page: 'page',
+ pageSize: 'limit',
+ nameSort: 'sort_name',
+ skuSort: 'sort_sku',
+ brandSort: 'sort_brand',
+ categorySort: 'sort_category',
+ },
+ });
+
+ const {
+ data: products,
+ isLoading,
+ mutate: refreshProducts,
+ } = useSWR(
+ `${ProductApi.basePath}${getTableFilterQueryString()}`,
+ ProductApi.getAllFetcher
+ );
+
+ const deleteModal = useModal();
+ const [selectedProduct, setSelectedProduct] = useState(undefined);
+ const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+ const [sorting, setSorting] = useState([]);
+
+ const productsColumns: ColumnDef[] = [
+ {
+ header: '#',
+ cell: (props) =>
+ tableFilterState.pageSize * (tableFilterState.page - 1) +
+ props.row.index +
+ 1,
+ },
+ {
+ accessorKey: 'name',
+ header: 'Nama',
+ },
+ {
+ accessorKey: 'sku',
+ header: 'SKU',
+ },
+ {
+ accessorKey: 'brand',
+ header: 'Merek',
+ },
+ {
+ accessorKey: 'product_category',
+ header: 'Kategori',
+ cell: (props) => props.row.original.product_category?.name ?? '-',
+ },
+ {
+ accessorKey: 'uom',
+ header: 'Satuan',
+ cell: (props) => props.row.original.uom?.name ?? '-',
+ },
+ {
+ accessorKey: 'product_price',
+ header: 'Harga Produk',
+ cell: (props) => props.row.original.product_price?.toLocaleString() ?? '-',
+ },
+ {
+ accessorKey: 'selling_price',
+ header: 'Harga Jual',
+ cell: (props) => props.row.original.selling_price?.toLocaleString() ?? '-',
+ },
+ {
+ accessorKey: 'tax',
+ header: 'Pajak (%)',
+ cell: (props) => props.row.original.tax ?? '-',
+ },
+ {
+ accessorKey: 'expiry_period',
+ header: 'Kadaluarsa (hari)',
+ cell: (props) => props.row.original.expiry_period ?? '-',
+ },
+ {
+ accessorKey: 'suppliers',
+ header: 'Supplier',
+ cell: (props) =>
+ props.row.original.suppliers?.map((s) => s.name).join(', ') || '-',
+ },
+ {
+ accessorKey: 'flags',
+ header: 'Flags',
+ cell: (props) =>
+ props.row.original.flags?.length
+ ? props.row.original.flags.join(', ')
+ : '-',
+ },
+ {
+ header: 'Aksi',
+ cell: (props) => {
+ const currentPageSize = props.table.getPaginationRowModel().rows.length;
+ const currentPageRows = props.table.getPaginationRowModel().flatRows;
+ const currentRowRelativeIndex =
+ currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
+
+ const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+
+ const deleteClickHandler = () => {
+ setSelectedProduct(props.row.original);
+ deleteModal.openModal();
+ };
+
+ return (
+ <>
+ {currentPageSize > 2 && (
+
+
+
+ )}
+ {currentPageSize <= 2 && (
+
+
+
+ )}
+
+ );
+ },
+ },
+ ];
+
+ const confirmationModalDeleteClickHandler = async () => {
+ setIsDeleteLoading(true);
+ await ProductApi.delete(selectedProduct?.id as number);
+ refreshProducts();
+ deleteModal.closeModal();
+ toast.success('Successfully delete Product!');
+ setIsDeleteLoading(false);
+ };
+
+ const searchChangeHandler: ChangeEventHandler = (e) => {
+ updateFilter('search', e.target.value);
+ };
+
+ const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+ const newVal = val as OptionType;
+ setPageSize(newVal.value as number);
+ };
+
+ const updateSortingFilter = useCallback(
+ (
+ sortName: Exclude,
+ sortFilter: ColumnSort | undefined
+ ) => {
+ if (!sortFilter) {
+ updateFilter(sortName, '');
+ } else {
+ updateFilter(sortName, sortFilter.desc ? 'desc' : 'asc');
+ }
+ },
+ [updateFilter]
+ );
+
+ useEffect(() => {
+ const nameSortFilter = sorting.find((sortItem) => sortItem.id === 'name');
+ const skuSortFilter = sorting.find((sortItem) => sortItem.id === 'sku');
+ const brandSortFilter = sorting.find((sortItem) => sortItem.id === 'brand');
+ const categorySortFilter = sorting.find((sortItem) => sortItem.id === 'product_category');
+
+ updateSortingFilter('nameSort', nameSortFilter);
+ updateSortingFilter('skuSort', skuSortFilter);
+ updateSortingFilter('brandSort', brandSortFilter);
+ updateSortingFilter('categorySort', categorySortFilter);
+ }, [sorting]);
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+ data={isResponseSuccess(products) ? products?.data : []}
+ columns={productsColumns}
+ pageSize={tableFilterState.pageSize}
+ page={isResponseSuccess(products) ? products?.meta?.page : 0}
+ totalItems={
+ isResponseSuccess(products) ? products?.meta?.total_results : 0
+ }
+ onPageChange={setPage}
+ isLoading={isLoading}
+ sorting={sorting}
+ setSorting={setSorting}
+ className={{
+ containerClassName: cn({
+ 'mb-20':
+ isResponseSuccess(products) && products?.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',
+ }}
+ />
+
+ {type === 'add' && 'Tambah Produk'}
+ {type === 'edit' && 'Edit Produk'}
+ {type === 'detail' && 'Detail Produk'}
+
+
+
+
+ {type !== 'add' && (
+
+ )}
+
+ );
+};
+
+export default ProductForm;
\ No newline at end of file
diff --git a/src/components/pages/master-data/supplier/form/SupplierForm.tsx b/src/components/pages/master-data/supplier/form/SupplierForm.tsx
index 9e0ac83a..fb4630ae 100644
--- a/src/components/pages/master-data/supplier/form/SupplierForm.tsx
+++ b/src/components/pages/master-data/supplier/form/SupplierForm.tsx
@@ -11,7 +11,11 @@ import {
import { useRouter } from 'next/navigation';
import { useCallback, useEffect, useMemo, useState } from 'react';
import toast from 'react-hot-toast';
-import { SupplierFormSchema, SupplierFormValues, UpdateSupplierFormSchema } from './SupplierForm.schema';
+import {
+ SupplierFormSchema,
+ SupplierFormValues,
+ UpdateSupplierFormSchema,
+} from './SupplierForm.schema';
import { useFormik } from 'formik';
import SelectInput, { OptionType } from '@/components/input/SelectInput';
import { Icon } from '@iconify/react';
@@ -127,7 +131,8 @@ const SupplierForm = ({
const formik = useFormik({
initialValues: formikInitialValues,
enableReinitialize: true,
- validationSchema: formType === 'edit' ? UpdateSupplierFormSchema : SupplierFormSchema,
+ validationSchema:
+ formType === 'edit' ? UpdateSupplierFormSchema : SupplierFormSchema,
onSubmit: async (values) => {
// reset error message
setSupplierFormErrorMessage('');
@@ -274,7 +279,9 @@ const SupplierForm = ({
onChange={categoryChangeHandler}
options={categoryOptions}
onInputChange={setCategorySelectInputValue}
- isError={formik.touched.category && Boolean(formik.errors.category)}
+ isError={
+ formik.touched.category && Boolean(formik.errors.category)
+ }
errorMessage={formik.errors.category as string}
isDisabled={formType === 'detail'}
isClearable
@@ -285,7 +292,9 @@ const SupplierForm = ({
label='Hatchery'
value={hatcheryTagInputValue}
onChange={(value) => formik.setFieldValue('hatchery', value)}
- isError={formik.touched.hatchery && Boolean(formik.errors.hatchery)}
+ isError={
+ formik.touched.hatchery && Boolean(formik.errors.hatchery)
+ }
errorMessage={formik.errors.hatchery}
readOnly={formType === 'detail'}
/>
diff --git a/src/config/constant.ts b/src/config/constant.ts
index 5a9314bd..48cec0fe 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -1,4 +1,11 @@
-export const MAIN_DRAWER_LINKS = [
+type MAIN_DRAWER_MENU = {
+ title: string;
+ link: string;
+ icon: string;
+ submenu?: MAIN_DRAWER_MENU[];
+};
+
+export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
{
title: 'Dashboard',
link: '/dashboard',
@@ -62,7 +69,7 @@ export const MAIN_DRAWER_LINKS = [
},
{
title: 'FCR',
- link: '/master-data/FCR',
+ link: '/master-data/fcr',
icon: 'fluent:food-chicken-leg-16-regular',
},
{
@@ -129,3 +136,19 @@ export const CATEGORY_OPTIONS = [
value: 'SAPRONAK',
},
];
+
+export const PRODUCT_FLAG_OPTIONS = [
+ { label: 'DOC', value: 'DOC' },
+ { label: 'PAKAN', value: 'PAKAN' },
+ { label: 'PRE-STARTER', value: 'PRE-STARTER' },
+ { label: 'STARTER', value: 'STARTER' },
+ { label: 'FINISHER', value: 'FINISHER' },
+ { label: 'OVK', value: 'OVK' },
+ { label: 'OBAT', value: 'OBAT' },
+ { label: 'VITAMIN', value: 'VITAMIN' },
+ { label: 'KIMIA', value: 'KIMIA' },
+];
+
+export const SUPPLIER_FLAG_OPTIONS = [
+ { label: 'EKSPEDISI', value: 'EKSPEDISI' },
+];
diff --git a/src/services/api/master-data.ts b/src/services/api/master-data.ts
index 58c30953..dce528e7 100644
--- a/src/services/api/master-data.ts
+++ b/src/services/api/master-data.ts
@@ -29,11 +29,36 @@ import {
Customer,
UpdateCustomerPayload,
} from '@/types/api/master-data/customer';
+import {
+ CreateProductCategoryPayload,
+ ProductCategory,
+ UpdateProductCategoryPayload,
+} from '@/types/api/master-data/product-category';
+import {
+ CreateProductPayload,
+ Product,
+ UpdateProductPayload,
+} from '@/types/api/master-data/product';
import {
CreateSupplierPayload,
Supplier,
UpdateSupplierPayload,
} from '@/types/api/master-data/supplier';
+import {
+ CreateNonstockPayload,
+ Nonstock,
+ UpdateNonstockPayload,
+} from '@/types/api/master-data/nonstock';
+import {
+ Bank,
+ CreateBankPayload,
+ UpdateBankPayload,
+} from '@/types/api/master-data/bank';
+import {
+ CreateFcrPayload,
+ Fcr,
+ UpdateFcrPayload,
+} from '@/types/api/master-data/fcr';
export const UomApi = new BaseApiService<
Uom,
@@ -70,9 +95,38 @@ export const CustomerApi = new BaseApiService<
CreateCustomerPayload,
UpdateCustomerPayload
>('/master-data/customers');
+export const ProductCategoryApi = new BaseApiService<
+ ProductCategory,
+ CreateProductCategoryPayload,
+ UpdateProductCategoryPayload
+>('/master-data/product-categories');
+
+export const ProductApi = new BaseApiService<
+ Product,
+ CreateProductPayload,
+ UpdateProductPayload
+>('/master-data/products');
export const SupplierApi = new BaseApiService<
Supplier,
CreateSupplierPayload,
UpdateSupplierPayload
->('/master-data/suppliers');
\ No newline at end of file
+>('/master-data/suppliers');
+
+export const NonstockApi = new BaseApiService<
+ Nonstock,
+ CreateNonstockPayload,
+ UpdateNonstockPayload
+>('/master-data/nonstocks');
+
+export const BankApi = new BaseApiService<
+ Bank,
+ CreateBankPayload,
+ UpdateBankPayload
+>('/master-data/banks');
+
+export const FcrApi = new BaseApiService<
+ Fcr,
+ CreateFcrPayload,
+ UpdateFcrPayload
+>('/master-data/fcrs');
diff --git a/src/services/api/master-data/nonstock.ts b/src/services/api/master-data/nonstock.ts
deleted file mode 100644
index 7340e37b..00000000
--- a/src/services/api/master-data/nonstock.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import axios from 'axios';
-import { httpClient } from '@/services/http/client';
-
-import {
- CreateNonstockPayload,
- DeleteNonstockResponse,
- NonstockResponse,
- UpdateNonstockPayload,
-} from '@/types/api/master-data/nonstock';
-
-export const getNonstock = async (nonstockId: number) => {
- try {
- const getNonstockRes = await httpClient(
- `/master-data/nonstocks/${nonstockId}`
- );
-
- return getNonstockRes;
- } catch (error: unknown) {
- if (axios.isAxiosError(error)) {
- return error.response?.data;
- }
-
- return undefined;
- }
-};
-
-export const createNonstock = async (payload: CreateNonstockPayload) => {
- try {
- const createNonstockRes = await httpClient(
- '/master-data/nonstocks',
- {
- method: 'POST',
- body: payload,
- }
- );
-
- return createNonstockRes;
- } catch (error: unknown) {
- if (axios.isAxiosError(error)) {
- return error.response?.data;
- }
-
- return undefined;
- }
-};
-
-export const updateNonstock = async (
- nonstockId: number,
- payload: UpdateNonstockPayload
-) => {
- try {
- const updateNonstockRes = await httpClient(
- `/master-data/nonstocks/${nonstockId}`,
- {
- method: 'PATCH',
- body: payload,
- }
- );
-
- return updateNonstockRes;
- } catch (error: unknown) {
- if (axios.isAxiosError(error)) {
- return error.response?.data;
- }
-
- return undefined;
- }
-};
-
-export const deleteNonstock = async (nonstockId: number) => {
- try {
- const deleteNonstockRes = await httpClient(
- `/master-data/nonstocks/${nonstockId}`,
- {
- method: 'DELETE',
- }
- );
-
- return deleteNonstockRes;
- } catch (error) {
- if (axios.isAxiosError(error)) {
- return error.response?.data;
- }
-
- return undefined;
- }
-};
diff --git a/src/types/api/api-general.d.ts b/src/types/api/api-general.d.ts
index 8a4c4de7..6a3fc6be 100644
--- a/src/types/api/api-general.d.ts
+++ b/src/types/api/api-general.d.ts
@@ -53,3 +53,16 @@ export type BaseMetadata = {
export type Override = Omit &
Overrides;
+
+export type flags =
+ | 'PAKAN'
+ | 'OBAT'
+ | 'VITAMIN'
+ | 'KIMIA'
+ | 'EKSPEDISI'
+ | 'IS_ACTIVE'
+ | 'DOC'
+ | 'PRE-STARTER'
+ | 'STARTER'
+ | 'FINISHER'
+ | 'OVK';
diff --git a/src/types/api/master-data/bank.d.ts b/src/types/api/master-data/bank.d.ts
new file mode 100644
index 00000000..0b23b446
--- /dev/null
+++ b/src/types/api/master-data/bank.d.ts
@@ -0,0 +1,20 @@
+import { BaseMetadata } from '@/types/api/api-general';
+
+export type BaseBank = {
+ id: number;
+ name: string;
+ alias: string;
+ owner?: string;
+ account_number: string;
+};
+
+export type Bank = BaseMetadata & BaseBank;
+
+export type CreateBankPayload = {
+ name: string;
+ alias: string;
+ account_number: string;
+ owner?: string;
+};
+
+export type UpdateBankPayload = CreateBankPayload;
diff --git a/src/types/api/master-data/fcr.d.ts b/src/types/api/master-data/fcr.d.ts
new file mode 100644
index 00000000..45ad25e5
--- /dev/null
+++ b/src/types/api/master-data/fcr.d.ts
@@ -0,0 +1,30 @@
+import { BaseMetadata } from '@/types/api/api-general';
+
+export type BaseFcr = {
+ id: number;
+ name: string;
+};
+
+export type FcrStandard = {
+ id: number;
+ weight: number;
+ fcr_number: number;
+ mortality: number;
+};
+
+export type Fcr = BaseMetadata & BaseFcr;
+
+export type FcrWithStandards = Fcr & {
+ fcr_standards: FcrStandard[];
+};
+
+export type CreateFcrPayload = {
+ name: string;
+ fcr_standards: {
+ weight: number;
+ fcr_number: number;
+ mortality: number;
+ }[];
+};
+
+export type UpdateFcrPayload = CreateFcrPayload;
diff --git a/src/types/api/master-data/nonstock.d.ts b/src/types/api/master-data/nonstock.d.ts
index 682f7852..e4e79d8e 100644
--- a/src/types/api/master-data/nonstock.d.ts
+++ b/src/types/api/master-data/nonstock.d.ts
@@ -1,18 +1,23 @@
-import { BaseApiResponse } from '@/types/api/api-general';
+import { BaseApiResponse, BaseMetadata, flags } from '@/types/api/api-general';
+import { BaseUom } from '@/types/api/master-data/uom';
+import { BaseSupplier } from '@/types/api/master-data/supplier';
-export type Nonstock = {
+export type BaseNonstock = {
id: number;
name: string;
+ uom_id: number;
+ uom: BaseUom;
+ suppliers: BaseSupplier[];
+ flags: flags[];
};
+export type Nonstock = BaseMetadata & BaseNonstock;
+
export type CreateNonstockPayload = {
name: string;
+ uom_id: number;
+ supplier_ids: number[];
+ flags: flags[];
};
export type UpdateNonstockPayload = CreateNonstockPayload;
-
-export type NonstockResponse = BaseApiResponse;
-
-export type NonstocksResponse = BaseApiResponse;
-
-export type DeleteNonstockResponse = BaseApiResponse;
diff --git a/src/types/api/master-data/product-category.d.ts b/src/types/api/master-data/product-category.d.ts
new file mode 100644
index 00000000..3dd6203e
--- /dev/null
+++ b/src/types/api/master-data/product-category.d.ts
@@ -0,0 +1,16 @@
+import { BaseMetadata } from '@/types/api/api-general';
+
+export type BaseProductCategory = {
+ id: number;
+ code: string;
+ name: string;
+};
+
+export type ProductCategory = BaseMetadata & BaseProductCategory;
+
+export type CreateProductCategoryPayload = {
+ code: string;
+ name: string;
+};
+
+export type UpdateProductCategoryPayload = CreateProductCategoryPayload;
diff --git a/src/types/api/master-data/product.d.ts b/src/types/api/master-data/product.d.ts
new file mode 100644
index 00000000..d4039750
--- /dev/null
+++ b/src/types/api/master-data/product.d.ts
@@ -0,0 +1,37 @@
+import { BaseMetadata } from '@/types/api/api-general';
+import { Uom } from '@/types/api/master-data/uom';
+import { ProductCategory } from '@/types/api/master-data/product-category';
+import { Supplier } from '@/types/api/master-data/supplier';
+
+export type BaseProduct = {
+ id: number;
+ name: string;
+ brand: string;
+ sku: string;
+ product_price: number;
+ selling_price?: number;
+ tax?: number;
+ expiry_period: number;
+ uom: Uom;
+ product_category: ProductCategory;
+ suppliers: Supplier[];
+ flags: string[];
+};
+
+export type Product = BaseMetadata & BaseProduct;
+
+export type CreateProductPayload = {
+ name: string;
+ brand: string;
+ sku: string;
+ uom_id: number;
+ product_category_id: number;
+ product_price: number;
+ selling_price: number;
+ tax: number;
+ expiry_period: number;
+ supplier_ids: number[];
+ flags: string[];
+};
+
+export type UpdateProductPayload = CreateProductPayload;
\ No newline at end of file
diff --git a/src/types/api/master-data/supplier.d.ts b/src/types/api/master-data/supplier.d.ts
index eef3cba7..e6998a25 100644
--- a/src/types/api/master-data/supplier.d.ts
+++ b/src/types/api/master-data/supplier.d.ts
@@ -1,21 +1,4 @@
-// {
-// // "name": "PT CHAROEN POKPHAND INDONESIA Tbk",
-// "name": "BOP Vendor",
-// // "alias": "CPI",
-// "alias": "BOP",
-// "pic": "Super Admin",
-// "type": "BISNIS", // "BISNIS" | "INDIVIDUAL"
-// // "category": "SAPRONAK", // "BOP" | "SAPRONAK"
-// "category": "BOP", // "BOP" | "SAPRONAK"
-// "hatchery": "Kopo,Tasik", // Comma Separated // nullable
-// "phone": "086172527361",
-// "email": "abdulazis@gmail.com",
-// "address": "Banten",
-// "npwp": "0197239080712", // nullable
-// "account_number": "192039801283", // nullable
-// "due_date": 1 // day
-// }
-import { BaseMetadata, CreatedUser } from "@/types/api/api-general";
+import { BaseMetadata } from '@/types/api/api-general';
export type BaseSupplier = {
id: number;
@@ -31,6 +14,7 @@ export type BaseSupplier = {
npwp: string;
account_number: string;
due_date: number;
+ balance?: number;
}
export type Supplier = BaseMetadata & BaseSupplier;
@@ -48,6 +32,7 @@ export type CreateSupplierPayload = {
npwp: string;
account_number: string;
due_date: number;
+ balance?: number;
}
export type UpdateSupplierPayload = CreateSupplierPayload;
\ No newline at end of file