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

feat(FE-166-169): Slicing UI Penjualan Form dan Client side validation

Browse Source
This commit is contained in:
randy-ar
2025-11-06 13:45:52 +07:00
parent d8637923bd
commit 158971d904
13 changed files with 1344 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/globals.css
+5
View File
@@ -48,3 +48,8 @@
html {
scrollbar-gutter: initial;
}
.react-select__menu-portal {
position: relative;
z-index: 99999 !important;
}
src/app/marketing/sales-orders/add/page.tsx
+4 -2
View File
@@ -1,7 +1,9 @@
import SalesForm from '@/components/pages/marketing/sales-orders/form/SalesForm';
const AddSalesOrder = () => {
return (
<div>
<p>Tambah Sales Order</p>
<div className='size-full p-4'>
<SalesForm />
</div>
);
};
src/components/Modal.tsx
+9 -1
View File
@@ -48,6 +48,7 @@ export const useModal = () => {
interface ModalProps {
ref: RefObject<HTMLDialogElement | null>;
id?: string;
children?: ReactNode;
closeOnBackdrop?: boolean;
className?: {
@@ -56,7 +57,13 @@ interface ModalProps {
};
}
const Modal = ({ ref, children, closeOnBackdrop, className }: ModalProps) => {
const Modal = ({
ref,
id,
children,
closeOnBackdrop,
className,
}: ModalProps) => {
const handleBackdropClick = (e: React.MouseEvent<HTMLDialogElement>) => {
if (closeOnBackdrop && e.target === ref.current) {
ref.current?.close();
@@ -66,6 +73,7 @@ const Modal = ({ ref, children, closeOnBackdrop, className }: ModalProps) => {
return (
<dialog
ref={ref}
id={id}
className={cn('modal', className?.modal)}
onClick={handleBackdropClick}
>
src/components/input/PatternInput.tsx
+90
View File
@@ -0,0 +1,90 @@
'use client';
import { ChangeEvent } from 'react';
import {
PatternFormat,
NumberFormatBase,
NumberFormatBaseProps,
OnValueChange,
} from 'react-number-format';
import TextInput, { TextInputProps } from '@/components/input/TextInput';
interface PatternInputProps extends Omit<TextInputProps, 'type'> {
/**
* Format pattern, contoh: "##/##/####", "(###) ###-####", "####-####-####"
*/
format: string;
/** Mask karakter kosong, misal "_" */
mask?: string;
/** Menampilkan mask walau value kosong */
allowEmptyFormatting?: boolean;
/** Placeholder karakter format, default: "#" */
patternChar?: string;
/** Jika true, izinkan huruf (A-Z) selain angka */
inputVehicleNumber?: boolean;
type?: 'text' | 'password' | 'tel';
}
/**
* PatternInput – tetap backward-compatible dengan Storybook
* tapi bisa menerima huruf jika `allowCharacters={true}`
*/
const PatternInput = ({
type = 'text',
format,
mask = '_',
allowEmptyFormatting = false,
patternChar = '#',
inputVehicleNumber = false,
onChange,
...restProps
}: PatternInputProps) => {
const handleValueChange: OnValueChange = (values, { event }) => {
const newEvent = event as ChangeEvent<HTMLInputElement> | undefined;
if (newEvent) {
newEvent.target.value = values.value.toUpperCase();
onChange?.(newEvent);
}
};
if (inputVehicleNumber) {
return (
<NumberFormatBase
{...restProps}
type={type}
customInput={TextInput}
format={(value) => {
const clean = value.replace(/[^a-z0-9]/gi, '').toUpperCase();
const match = clean.match(/^([A-Z]{0,2})(\d{0,4})([A-Z]{0,3})$/);
if (!match) return clean;
const [, prefix, number, suffix] = match;
return [prefix, number, suffix].filter(Boolean).join(' ');
}}
removeFormatting={(val) => val.replace(/\s+/g, '')}
isValidInputCharacter={(char) => /^[a-z0-9]$/i.test(char)}
getCaretBoundary={(val) =>
Array(val.length + 1)
.fill(true)
.map(Boolean)
}
onValueChange={handleValueChange}
/>
);
}
return (
<PatternFormat
{...restProps}
type={type}
format={format}
mask={mask}
allowEmptyFormatting={allowEmptyFormatting}
patternChar={patternChar}
customInput={TextInput}
onValueChange={handleValueChange}
/>
);
};
export default PatternInput;
src/components/input/SelectInput.tsx
+10 -6
View File
@@ -55,6 +55,7 @@ interface SelectInputBaseProps<T = OptionType> {
delay?: number;
onInputChange?: (search: string) => void;
startAdornment?: ReactNode;
menuPortalTarget?: HTMLElement | null;
}
interface SelectInputProps<T = OptionType> extends SelectInputBaseProps<T> {
@@ -68,7 +69,7 @@ const animatedComponents = makeAnimated();
const CustomControl = <
Option,
IsMulti extends boolean,
Group extends GroupBase<Option>
Group extends GroupBase<Option>,
>(
props: ControlProps<Option, IsMulti, Group>
) => {
@@ -117,6 +118,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
createables = false,
onInputChange,
startAdornment,
menuPortalTarget,
} = props;
const [internalInputValue, setInternalInputValue] = useState('');
@@ -186,7 +188,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
<SelectComponent<T, boolean, GroupBase<T>>
instanceId='select'
value={value ?? (isMulti ? [] : undefined)}
value={value ?? (isMulti ? [] : null)}
onChange={onChange ? handleChange : undefined}
options={options}
menuIsOpen={openMenu}
@@ -257,7 +259,9 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
startAdornment,
})}
menuPortalTarget={
typeof document !== 'undefined' ? document.body : undefined
typeof document !== 'undefined'
? (menuPortalTarget ?? document.body)
: undefined
}
styles={{
menuPortal: (base) => ({ ...base, zIndex: 9999 }),
@@ -274,8 +278,8 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
const useSelect = <T,>(
basePath: string,
valueKey: keyof T,
labelKey: keyof T,
valueKey: keyof T | string,
labelKey: keyof T | string,
searchKey: string = 'search',
params?: { [key: string]: string }
) => {
@@ -286,7 +290,7 @@ const useSelect = <T,>(
[searchKey]: inputValue ?? '',
...params,
}).toString();
}, [inputValue, searchKey]);
}, [inputValue, searchKey, params]);
const optionsUrl = `${basePath}?${optionsUrlParams}`;
src/components/pages/marketing/sales-orders/SalesOrderTable.tsx
+278 -137
View File
@@ -1,13 +1,19 @@
'use client';
import Button from '@/components/Button';
import CheckboxInput from '@/components/input/CheckboxInput';
import { OptionType } from '@/components/input/SelectInput';
import { useModal } from '@/components/Modal';
import ConfirmationModal from '@/components/modal/ConfirmationModal';
import Table from '@/components/Table';
import RowCollapseOptions from '@/components/table/RowCollapseOptions';
import RowDropdownOptions from '@/components/table/RowDropdownOptions';
import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
import { TableToolbar } from '@/components/table/TableToolbar';
import { ROWS_OPTIONS } from '@/config/constant';
import { cn } from '@/lib/helper';
import { Marketing, MarketingProducts } from '@/types/api/marketing/marketing';
import { useTableFilter } from '@/services/hooks/useTableFilter';
import { Marketing, MarketingProduct } from '@/types/api/marketing/marketing';
import { Customer } from '@/types/api/master-data/customer';
import { Icon } from '@iconify/react';
import { CellContext } from '@tanstack/react-table';
@@ -35,7 +41,7 @@ const RowsOptionsMenu = ({
>
<div className='flex flex-col gap-1'>
<Button
href={`recording/detail/?recordingId=${props.row.original.id}`}
href={`/marketing/sales-orders/detail/?salesOrderId=${props.row.original.id}`}
variant='ghost'
color='primary'
className='justify-start text-sm'
@@ -44,7 +50,7 @@ const RowsOptionsMenu = ({
Detail
</Button>
<Button
href={`recording/detail/edit/?recordingId=${props.row.original.id}`}
href={`/marketing/sales-orders/detail/edit/?salesOrderId=${props.row.original.id}`}
variant='ghost'
color='warning'
className='justify-start text-sm'
@@ -56,25 +62,32 @@ const RowsOptionsMenu = ({
onClick={deleteClickHandler}
variant='ghost'
color='error'
className='text-error hover:text-inherit'
className='text-error hover:text-inherit justify-start text-sm'
>
<Icon
icon='mdi:delete-outline'
width={16}
height={16}
className='justify-start text-sm'
/>
<Icon icon='mdi:delete-outline' width={16} height={16} />
Delete
</Button>
</div>
</div>
);
};
const SalesOrderTable = () => {
const [search, setSearch] = useState('');
const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(10);
const [approveAction, setApproveAction] = useState<
'approve' | 'reject' | null
>(null);
const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
const selectedRowIds = Object.keys(rowSelection).filter(
(id) => rowSelection[id]
);
const deleteModal = useModal();
const confirmationModal = useModal();
const searchChangeHandler = useCallback(
(e: React.ChangeEvent<HTMLInputElement>) => {
setSearch(e.target.value);
@@ -91,139 +104,267 @@ const SalesOrderTable = () => {
[]
);
const approveClickHandler = () => {
setApproveAction('approve');
confirmationModal.openModal();
};
const rejectClickHandler = () => {
setApproveAction('reject');
confirmationModal.openModal();
};
const {
state: tableFilterState,
updateFilter,
toQueryString: getTableFilterToQueryString,
} = useTableFilter({
initial: {
search: '',
},
paramMap: {
page: 'page',
pageSize: 'limit',
},
});
return (
<div className='flex flex-col gap-4'>
<div className='flex flex-col gap-2 mb-4'>
<TableToolbar
addButton={{
href: 'recording/add',
label: 'Tambah Sales Order',
<>
<div className='flex flex-col gap-4'>
<div className='flex flex-col gap-2 mb-4'>
<TableToolbar
addButton={{
href: '/marketing/sales-orders/add',
label: 'Tambah Sales Order',
}}
search={{
value: search,
onChange: searchChangeHandler,
placeholder: 'Cari Sales Order',
}}
/>
<TableRowSizeSelector
value={pageSize}
onChange={pageSizeChangeHandler}
options={ROWS_OPTIONS}
/>
<div className='flex flex-row gap-2'>
<Button
color='success'
onClick={approveClickHandler}
className='justify-start text-sm'
>
<Icon icon='material-symbols:check' width={24} height={24} />
Approve
</Button>
<Button
color='error'
onClick={rejectClickHandler}
className='justify-start text-sm'
>
<Icon icon='material-symbols:close' width={24} height={24} />
Reject
</Button>
</div>
</div>
<Table
rowSelection={rowSelection}
setRowSelection={setRowSelection}
data={[
{
id: 1,
so_number: 'SO-001',
so_date: '2024-01-01',
so_docs: 'Dokumen SO 1.pdf',
customer: {
id: 1,
name: 'Customer A',
} as Customer,
sales_person: {
id: 1,
name: 'Sales Person A',
},
notes: 'Catatan untuk SO 1',
grand_total: 1000000,
approval: {
step_name: 'Approved',
},
marketing_products: [
{
id: 1,
qty: 10,
unit_price: 100000,
avg_weight: 1.5,
total_weight: 15,
total_price: 1000000,
product_warehouse: {
id: 1,
product: {
id: 1,
name: 'Product A',
},
},
} as MarketingProduct,
{
id: 2,
qty: 5,
unit_price: 200000,
avg_weight: 2.0,
total_weight: 10,
total_price: 1000000,
product_warehouse: {
id: 2,
product: {
id: 2,
name: 'Product B',
},
},
} as MarketingProduct,
],
} as Marketing,
]}
columns={[
{
id: 'select',
header: ({ table }) => (
<div className='w-full flex flex-row justify-center'>
<CheckboxInput
name='allRow'
checked={table.getIsAllRowsSelected()}
indeterminate={table.getIsSomeRowsSelected()}
onChange={table.getToggleAllRowsSelectedHandler()}
/>
</div>
),
cell: ({ row }) => (
<div>
<CheckboxInput
name='row'
checked={row.getIsSelected()}
disabled={!row.getCanSelect()}
indeterminate={row.getIsSomeSelected()}
onChange={row.getToggleSelectedHandler()}
/>
</div>
),
},
{
accessorKey: 'so_number',
header: 'No. Order',
},
{
accessorKey: 'so_date',
header: 'Tanggal',
},
{
accessorKey: 'approval.step_name',
header: 'Status',
},
{
accessorKey: 'customer.name',
header: 'Customer',
},
{
accessorKey: 'grand_total',
header: 'Grand Total',
},
{
accessorKey: 'marketing_products.length',
header: 'Product Details',
cell: (props) => (
<ul className='list-disc list-inside'>
{props.row.original.marketing_products?.map((product) => (
<li key={product.id}>
{product.product_warehouse.product.name} - Qty:{' '}
{product.qty}
</li>
))}
</ul>
),
},
{
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 = () => {};
return (
<>
{currentPageSize > 2 && (
<RowDropdownOptions isLast2Rows={isLast2Rows}>
<RowsOptionsMenu
type='dropdown'
props={props}
deleteClickHandler={deleteClickHandler}
/>
</RowDropdownOptions>
)}
{currentPageSize <= 2 && (
<RowCollapseOptions>
<RowsOptionsMenu
type='collapse'
props={props}
deleteClickHandler={deleteClickHandler}
/>
</RowCollapseOptions>
)}
</>
);
},
},
]}
pageSize={pageSize}
page={page}
onPageChange={setPage}
className={{
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',
}}
search={{
value: search,
onChange: searchChangeHandler,
placeholder: 'Cari Sales Order',
}}
/>
<TableRowSizeSelector
value={pageSize}
onChange={pageSizeChangeHandler}
options={ROWS_OPTIONS}
/>
</div>
<Table
data={[
{
id: 1,
so_number: 'SO-001',
so_date: '2024-01-01',
so_docs: 'Dokumen SO 1.pdf',
customer: {
id: 1,
name: 'Customer A',
} as Customer,
sales_person: {
id: 1,
name: 'Sales Person A',
},
notes: 'Catatan untuk SO 1',
grand_total: 1000000,
approval: {
step_name: 'Approved',
},
marketing_products: [
{
id: 1,
qty: 10,
unit_price: 100000,
avg_weigth: 1.5,
total_weight: 15,
total_price: 1000000,
product_warehouse: {
id: 1,
product: {
id: 1,
name: 'Product A',
},
},
} as MarketingProducts,
{
id: 2,
qty: 5,
unit_price: 200000,
avg_weigth: 2.0,
total_weight: 10,
total_price: 1000000,
product_warehouse: {
id: 2,
product: {
id: 2,
name: 'Product B',
},
},
} as MarketingProducts,
],
} as Marketing,
]}
columns={[
{
header: '#',
cell: (props) => pageSize * (page - 1) + props.row.index + 1,
},
{
accessorKey: 'so_number',
header: 'No. Order',
},
{
accessorKey: 'so_date',
header: 'Tanggal',
},
{
accessorKey: 'approval.step_name',
header: 'Status',
},
{
accessorKey: 'customer.name',
header: 'Customer',
},
{
accessorKey: 'grand_total',
header: 'Grand Total',
},
{
accessorKey: 'marketing_products.length',
header: 'Product Details',
cell: (props) => (
<ul className='list-disc list-inside'>
{props.row.original.marketing_products?.map((product) => (
<li key={product.id}>
{product.product_warehouse.product.name} - Qty:{' '}
{product.qty}
</li>
))}
</ul>
),
},
{
header: 'Aksi',
cell: (props) => {},
},
]}
pageSize={pageSize}
page={page}
onPageChange={setPage}
className={{
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',
<ConfirmationModal
ref={deleteModal.ref}
type='error'
text={`Apakah anda yakin ingin menghapus data Project Flock ini?`}
secondaryButton={{
text: 'Tidak',
}}
primaryButton={{
text: 'Ya',
color: 'error',
}}
/>
</div>
<ConfirmationModal
ref={confirmationModal.ref}
type={approveAction === 'approve' ? 'success' : 'error'}
text={`Apakah anda yakin ingin ${approveAction} data penjualan (${selectedRowIds.length} data)?`}
secondaryButton={{
text: 'Tidak',
}}
primaryButton={{
text: 'Ya',
color: approveAction === 'approve' ? 'success' : 'error',
}}
/>
</>
);
};
export default SalesOrderTable;
src/components/pages/marketing/sales-orders/form/SalesForm.schema.ts
+27
View File
@@ -0,0 +1,27 @@
import * as Yup from 'yup';
import { MarketingProduct } from '@/types/api/marketing/marketing';
import {
MarketingProductFormValues,
MarketingProductSchema,
} from './repeater/MarketingProduct.schema';
type MarketingSchema = {
customer_id: number | undefined;
so_date: string | undefined;
notes: string | undefined;
marketing_products: MarketingProductFormValues[];
};
export const MarketingSchema: Yup.ObjectSchema<MarketingSchema> = Yup.object({
customer_id: Yup.number().required('Customer wajib diisi!'),
so_date: Yup.string().required('Tanggal wajib diisi!'),
notes: Yup.string().required('Catatan wajib diisi!'),
marketing_products: Yup.array()
.of(MarketingProductSchema)
.min(1, 'Minimal harus ada 1 produk!')
.required('Produk wajib diisi!'),
});
export const UpdateMarketingSchema = MarketingSchema;
export type MarketingFormValues = Yup.InferType<typeof MarketingSchema>;
src/components/pages/marketing/sales-orders/form/SalesForm.tsx
+448
View File
@@ -0,0 +1,448 @@
'use client';
import Button from '@/components/Button';
import Card from '@/components/Card';
import { FormHeader } from '@/components/helper/form/FormHeader';
import DateInput from '@/components/input/DateInput';
import SelectInput, {
OptionType,
useSelect,
} from '@/components/input/SelectInput';
import TextArea from '@/components/input/TextArea';
import Modal, { useModal } from '@/components/Modal';
import Table from '@/components/Table';
import { cn, formatCurrency, formatNumber } from '@/lib/helper';
import {
CreateMarketingPayload,
CreateMarketingProductPayload,
Marketing,
MarketingProduct,
} from '@/types/api/marketing/marketing';
import { Icon } from '@iconify/react';
import { useEffect, useState } from 'react';
import MarketingProductForm from './repeater/MarketingProductForm';
import CheckboxInput from '@/components/input/CheckboxInput';
import { Customer } from '@/types/api/master-data/customer';
import { CustomerApi } from '@/services/api/master-data';
import { useFormik } from 'formik';
import { MarketingFormValues, MarketingSchema } from './SalesForm.schema';
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
import { MarketingApi } from '@/services/api/marketing';
import { MarketingProductFormValues } from './repeater/MarketingProduct.schema';
const SalesForm = ({
formType = 'add',
initialValues,
}: {
formType?: 'add' | 'edit';
initialValues?: Marketing;
}) => {
const addProductModal = useModal();
const [selectedMarketingProduct, setSelectedMarketingProduct] =
useState<MarketingProduct | null>(null);
const [marketingProducts, setMarketingProducts] = useState<
MarketingProduct[]
>(initialValues?.marketing_products || []);
const [selectedCustomer, setSelectedCustomer] = useState<OptionType | null>(
null
);
const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
const selectedRowIds = Object.keys(rowSelection).map((item) =>
parseInt(item)
);
const [grandTotal, setGrandTotal] = useState<number>(0);
const {
options: customerOptions,
rawData: customerRawData,
isLoadingOptions: isLoadingCustomerOptions,
} = useSelect<Customer>(CustomerApi.basePath, 'id', 'name');
const handleAddProduct = () => {
addProductModal.openModal();
};
const handleDeleteProduct = (id: number) => {
setMarketingProducts((prev) => prev.filter((product) => product.id !== id));
};
const handleBulkDeleteProduct = () => {
setMarketingProducts((prev) =>
prev.filter((product) => !selectedRowIds.includes(product.id))
);
};
const handleAddSubmitProduct = async (
values: CreateMarketingProductPayload
) => {
const newMarketingProduct: MarketingProduct = {
id: marketingProducts.length + 1,
product_warehouse: values.product_warehouse!,
unit_price: values.unit_price as number,
total_weight: values.total_weight as number,
qty: values.qty as number,
avg_weight: values.avg_weight as number,
total_price: values.total_price as number,
marketing_delivery_products: {
id: marketingProducts.length + 1,
vehicle_number: values.vehicle_number as string,
delivery_date: values.delivery_date as string,
unit_price: values.unit_price as number,
total_weight: values.total_weight as number,
qty: values.qty as number,
avg_weight: values.avg_weight as number,
total_price: values.total_price as number,
},
};
const newMarketingProductPayload: MarketingProductFormValues = {
vehicle_number: values.vehicle_number as string,
kandang_id: values.kandang_id as number,
kandang: {
value: values.kandang_id as number,
label: values.kandang?.name as string,
},
product_warehouse_id: values.product_warehouse_id as number,
product_warehouse: {
value: values.product_warehouse?.id as number,
label: values.product_warehouse?.product.name as string,
},
unit_price: values.unit_price,
total_weight: values.total_weight,
qty: values.qty,
uom: values.uom as string,
avg_weight: values.avg_weight,
total_price: values.total_price,
delivery_date: values.delivery_date as string,
};
setMarketingProducts((prev) => [...prev, newMarketingProduct]);
formik.setValues({
...formik.values,
marketing_products: [
...formik.values.marketing_products,
newMarketingProductPayload,
],
});
setGrandTotal((prev) => prev + (values.total_price as number));
addProductModal.closeModal();
};
const handleChangeCustomer = (val: OptionType | OptionType[] | null) => {
setSelectedCustomer(val as OptionType);
formik.setFieldValue('customer_id', (val as OptionType)?.value);
};
const createProjectFlockHandler = async (values: CreateMarketingPayload) => {
console.log(values);
const createMarketingRes = await MarketingApi.create(values);
if (isResponseSuccess(createMarketingRes)) {
console.log(createMarketingRes);
}
if (isResponseError(createMarketingRes)) {
console.log(createMarketingRes);
}
};
const updateProjectFlockHandler = async (values: CreateMarketingPayload) => {
console.log(values);
const createMarketingRes = await MarketingApi.update(
initialValues?.id as number,
values
);
if (isResponseSuccess(createMarketingRes)) {
console.log(createMarketingRes);
}
if (isResponseError(createMarketingRes)) {
console.log(createMarketingRes);
}
};
const formik = useFormik<MarketingFormValues>({
enableReinitialize: true,
initialValues: {
so_date: undefined,
notes: '',
customer_id: initialValues?.customer?.id || undefined,
marketing_products: [],
},
validationSchema: MarketingSchema,
onSubmit: async (values) => {
const payload = {
customer_id: values.customer_id as number,
date: values.so_date as string,
notes: values.notes as string,
marketing_products: values.marketing_products,
} as CreateMarketingPayload;
switch (formType) {
case 'add':
createProjectFlockHandler(payload);
break;
case 'edit':
updateProjectFlockHandler(payload);
break;
default:
break;
}
},
});
const { setValues: formikSetValues } = formik;
useEffect(() => {
formikSetValues(formik.initialValues);
}, [formikSetValues, formik.initialValues]);
return (
<>
<form
className='flex flex-col gap-4'
onSubmit={formik.handleSubmit}
onReset={formik.handleReset}
>
<FormHeader
title='Tambah Sales Order'
backUrl='/marketing/sales-orders'
/>
<Card
title='Informasi Order'
className={{
wrapper: 'bg-white w-full',
}}
>
<div className='grid grid-cols-2 gap-3 mt-3'>
<SelectInput
label='Pelanggan'
options={customerOptions}
isLoading={isLoadingCustomerOptions}
value={selectedCustomer}
onChange={handleChangeCustomer}
isError={
formik.touched.customer_id && Boolean(formik.errors.customer_id)
}
errorMessage={formik.errors.customer_id}
isClearable
placeholder='Pilih Pelanggan'
/>
<DateInput
name='so_date'
label='Tanggal'
value={formik.values.so_date}
onChange={formik.handleChange}
isError={formik.touched.so_date && Boolean(formik.errors.so_date)}
errorMessage={formik.errors.so_date}
placeholder='Pilih Tanggal'
/>
</div>
</Card>
<Card
title='Daftar Produk'
className={{
wrapper: 'bg-white w-full',
}}
>
<Table<MarketingProduct>
rowSelection={rowSelection}
setRowSelection={setRowSelection}
data={marketingProducts}
columns={[
{
id: 'select',
header: ({ table }) => (
<div className='w-full flex flex-row justify-center'>
<CheckboxInput
name='allRow'
checked={table.getIsAllRowsSelected()}
indeterminate={table.getIsSomeRowsSelected()}
onChange={table.getToggleAllRowsSelectedHandler()}
/>
</div>
),
cell: ({ row }) => (
<div>
<CheckboxInput
name='row'
checked={row.getIsSelected()}
disabled={!row.getCanSelect()}
indeterminate={row.getIsSomeSelected()}
onChange={row.getToggleSelectedHandler()}
/>
</div>
),
},
{
accessorFn(row) {
return row.marketing_delivery_products?.vehicle_number;
},
header: 'No. Polisi',
},
{
accessorFn(row) {
return row.product_warehouse.warehouse.name;
},
header: 'Kandang',
},
{
accessorFn(row) {
return row.product_warehouse.product.name;
},
header: 'Produk',
},
{
accessorFn(row) {
return formatCurrency(row.unit_price);
},
header: 'Harga Satuan (Rp)',
},
{
accessorFn(row) {
return formatNumber(row.total_weight);
},
header: 'Total Bobot (Kg)',
},
{
accessorFn(row) {
return formatNumber(row.qty);
},
header: 'Kuantitas',
},
{
accessorFn(row) {
return formatNumber(row.avg_weight);
},
header: 'Avg. Bobot (Kg)',
},
{
accessorFn(row) {
return formatCurrency(row.total_price);
},
header: 'Total Penjualan (Rp)',
},
{
header: 'Aksi',
cell: (props) => {
return (
<div className='flex flex-row gap-1 items-center justify-end h-full mt-2'>
<Button
color='error'
className='p-1'
onClick={() => {
handleDeleteProduct(props.row.original.id);
}}
>
<Icon icon='mdi:trash' width={16} height={16} />
</Button>
</div>
);
},
},
]}
className={{
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-2 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end first:flex first:flex-row first:justify-end',
bodyRowClassName: 'border-b border-b-gray-200',
bodyColumnClassName:
'px-2 py-2 last:flex last:flex-row last:justify-end first:flex first:flex-row first:justify-start',
paginationClassName: 'hidden',
}}
emptyContent={
<div
className={cn(
'w-full h-16 flex flex-col justify-center items-center gap-2'
)}
>
<span className='text-gray-500'>Belum ada data penjualan</span>
</div>
}
/>
<div className='flex flex-row gap-3 mt-3'>
<Button
type='button'
variant='outline'
className='justify-start w-fit py-1 text-sm'
onClick={handleAddProduct}
>
<Icon icon='mdi:plus' width={16} height={16} />
Tambah Produk
</Button>
{selectedRowIds.length > 0 && (
<Button
type='button'
variant='outline'
color='error'
className='justify-start w-fit py-1 text-sm'
onClick={handleBulkDeleteProduct}
>
<Icon icon='mdi:trash' width={16} height={16} />
Hapus
{selectedRowIds.length > 0
? ` (${selectedRowIds.length})`
: ''}{' '}
Produk
</Button>
)}
</div>
{JSON.stringify(formik.errors)}
</Card>
<div className='grid grid-cols-2 gap-3'>
<TextArea
name='notes'
label='Catatan'
rows={3}
placeholder='Masukan catatan penjualan'
value={formik.values.notes}
onChange={formik.handleChange}
isError={formik.touched.notes && Boolean(formik.errors.notes)}
errorMessage={formik.errors.notes}
/>
<div className='flex flex-col h-full justify-between items-end py-6'>
<span>Total Penjualan</span>
<span className='text-lg font-semibold'>
{formatCurrency(grandTotal)}
</span>
</div>
</div>
<div className='flex flex-row items-start justify-center gap-2 mt-4'>
<Button type='reset' color='warning' disabled={formik.isSubmitting}>
Reset
</Button>
<Button
type='submit'
disabled={!formik.isValid || formik.isSubmitting}
>
Submit
</Button>
</div>
</form>
<Modal
ref={addProductModal.ref}
closeOnBackdrop
className={{
modalBox: 'max-w-4/5 z-100',
}}
id='marketing-product-modal'
>
<div className='flex flex-col gap-4'>
<div className='flex flex-row items-center justify-between'>
<h3 className='text-lg font-semibold mb-4'>Tambah Produk</h3>
<Button
variant='ghost'
color='error'
className='rounded-full'
onClick={addProductModal.closeModal}
>
<Icon icon='mdi:close' width={20} height={20} />
</Button>
</div>
<div>
<MarketingProductForm
onSubmitForm={handleAddSubmitProduct}
modalRef={addProductModal.ref}
data={marketingProducts}
initialValues={selectedMarketingProduct ?? undefined}
/>
</div>
</div>
</Modal>
</>
);
};
export default SalesForm;
src/components/pages/marketing/sales-orders/form/repeater/MarketingProduct.schema.ts
+62
View File
@@ -0,0 +1,62 @@
import * as Yup from 'yup';
type MarketingProductSchemaType = {
vehicle_number: string | undefined;
kandang_id?: number;
kandang?: {
value: number;
label: string;
} | null;
product_warehouse?: {
value: number;
label: string;
} | null;
product_warehouse_id?: number;
unit_price: string | number | undefined;
total_weight: string | number | undefined;
qty: string | number | undefined;
uom: string | undefined | null;
avg_weight: string | number | undefined;
total_price: string | number | undefined;
delivery_date?: string | undefined | null;
};
export const MarketingProductSchema: Yup.ObjectSchema<MarketingProductSchemaType> =
Yup.object({
vehicle_number: Yup.string().required('No. Polisi wajib diisi!'),
kandang: Yup.object({
value: Yup.number().min(1).required(),
label: Yup.string().required(),
}).nullable(),
kandang_id: Yup.number()
.min(1, 'Kandang wajib diisi!')
.required('Kandang wajib diisi!'),
product_warehouse: Yup.object({
value: Yup.number().min(1).required(),
label: Yup.string().required(),
}).nullable(),
product_warehouse_id: Yup.number()
.min(1, 'Produk wajib diisi!')
.required('Produk wajib diisi!'),
unit_price: Yup.number()
.min(1, 'Harga Satuan wajib diisi!')
.required('Harga Satuan wajib diisi!'),
total_weight: Yup.number()
.min(1, 'Total Bobot wajib diisi!')
.required('Total Bobot wajib diisi!'),
qty: Yup.number()
.min(1, 'Kuantitas wajib diisi!')
.required('Kuantitas wajib diisi!'),
uom: Yup.string().nullable(),
avg_weight: Yup.number()
.min(1, 'Avg. Bobot wajib diisi!')
.required('Avg. Bobot wajib diisi!'),
total_price: Yup.number()
.min(1, 'Total Penjualan wajib diisi!')
.required('Total Penjualan wajib diisi!'),
delivery_date: Yup.string().required().nullable(),
});
export type MarketingProductFormValues = Yup.InferType<
typeof MarketingProductSchema
>;
src/components/pages/marketing/sales-orders/form/repeater/MarketingProductForm.tsx
+358
View File
@@ -0,0 +1,358 @@
'use client';
import TextInput from '@/components/input/TextInput';
import {
CreateMarketingPayload,
CreateMarketingProductPayload,
MarketingProduct,
} from '@/types/api/marketing/marketing';
import { useFormik } from 'formik';
import {
MarketingProductFormValues,
MarketingProductSchema,
} from './MarketingProduct.schema';
import { RefObject, use, useEffect, useRef, useState } from 'react';
import SelectInput, {
OptionType,
useSelect,
} from '@/components/input/SelectInput';
import { Kandang } from '@/types/api/master-data/kandang';
import { KandangApi } from '@/services/api/master-data';
import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
import { ProductWarehouseApi } from '@/services/api/inventory';
import NumberInput from '@/components/input/NumberInput';
import Button from '@/components/Button';
import { isResponseSuccess } from '@/lib/api-helper';
import PatternInput from '@/components/input/PatternInput';
import { formatVechicleNumber } from '@/lib/helper';
const MarketingProductForm = ({
initialValues,
data,
modalRef,
onSubmitForm,
}: {
initialValues?: MarketingProduct;
data: MarketingProduct[];
modalRef?: RefObject<HTMLDialogElement | null>;
onSubmitForm?: (values: CreateMarketingProductPayload) => Promise<void>;
}) => {
// State
const [selectedOptionsKandang, setSelectedOptionsKandang] =
useState<OptionType | null>(null);
const [selectedOptionsWarehouse, setSelectedOptionsWarehouse] = useState<
OptionType | null | undefined
>(undefined);
const [formErrorMessage, setFormErrorMessage] = useState('');
// Options Data
const {
options: kandangSourceOptions,
rawData: kandangSourceRawData,
isLoadingOptions: isLoadingKandangSourceOptions,
} = useSelect<Kandang>(KandangApi.basePath, 'id', 'name');
const {
options: warehouseSourceOptions,
rawData: warehouseSourceRawData,
isLoadingOptions: isLoadingWarehouseSourceOptions,
} = useSelect<ProductWarehouse>(
ProductWarehouseApi.basePath,
'id',
'product.name',
'search',
{
warehouse_id: selectedOptionsKandang?.value?.toString() ?? '',
}
);
// Handler
const kandangChangeHandler = (val: OptionType | OptionType[] | null) => {
setSelectedOptionsKandang(val as OptionType);
formik.setFieldValue('kandang', val as OptionType);
formik.setFieldValue('kandang_id', (val as OptionType)?.value);
formik.setFieldValue('product_warehouse_id', null);
formik.setFieldValue('qty', null);
warehouseChangeHandler(null);
};
const warehouseChangeHandler = (val: OptionType | OptionType[] | null) => {
setSelectedOptionsWarehouse(val as OptionType);
formik.setFieldValue('product_warehouse', val as OptionType);
formik.setFieldValue('product_warehouse_id', (val as OptionType)?.value);
if (isResponseSuccess(warehouseSourceRawData)) {
const productWarehouse = warehouseSourceRawData?.data.find(
(item: ProductWarehouse) => item.id === (val as OptionType)?.value
);
if (selectedOptionsWarehouse?.value !== null) {
formik.setFieldValue('qty', productWarehouse?.quantity);
handleBlurField('qty');
} else {
formik.setFieldValue('qty', null);
}
}
};
// Formik
const formik = useFormik<MarketingProductFormValues>({
enableReinitialize: true,
initialValues: {
vehicle_number:
initialValues?.marketing_delivery_products?.vehicle_number || undefined,
kandang_id: initialValues?.product_warehouse.warehouse.id || undefined,
kandang: {
value: initialValues?.product_warehouse.warehouse.id as number,
label: initialValues?.product_warehouse.warehouse.name as string,
},
product_warehouse: {
value: initialValues?.product_warehouse.product.id as number,
label: initialValues?.product_warehouse.product.name as string,
},
product_warehouse_id:
initialValues?.product_warehouse.product.id || undefined,
unit_price: initialValues?.unit_price || undefined,
total_weight: initialValues?.total_weight || undefined,
qty: initialValues?.qty || undefined,
uom: initialValues?.product_warehouse?.product?.uom?.name || undefined,
avg_weight: initialValues?.avg_weight || undefined,
total_price: initialValues?.total_price || undefined,
delivery_date:
initialValues?.marketing_delivery_products?.delivery_date ||
new Date().toDateString() ||
undefined,
},
validationSchema: MarketingProductSchema,
onSubmit: async (values) => {
setFormErrorMessage('');
if (
isResponseSuccess(kandangSourceRawData) &&
isResponseSuccess(warehouseSourceRawData)
) {
const productWarehouse = warehouseSourceRawData?.data.find(
(item: ProductWarehouse) => item.id === values.product_warehouse_id
);
const kandang = kandangSourceRawData?.data.find(
(item: Kandang) => item.id === values.kandang_id
);
const marketingProduct: CreateMarketingProductPayload = {
id: initialValues?.id || undefined,
vehicle_number: formatVechicleNumber(values.vehicle_number as string),
kandang_id: values.kandang_id as number,
kandang: kandang,
product_warehouse_id: values.product_warehouse_id as number,
product_warehouse: productWarehouse,
unit_price: values.unit_price as number,
total_weight: values.total_weight as number,
qty: values.qty as number,
uom: values.uom as string,
avg_weight: values.avg_weight as number,
total_price: values.total_price as number,
delivery_date: values.delivery_date as string,
};
onSubmitForm?.(marketingProduct);
handleResetForm();
}
},
});
const { setValues: formikSetValues } = formik;
useEffect(() => {
formikSetValues(formik.initialValues);
}, [formikSetValues, formik.initialValues]);
const handleResetForm = () => {
setSelectedOptionsKandang(null);
setSelectedOptionsWarehouse(null);
setFormErrorMessage('');
formik.resetForm({
values: {
vehicle_number: '',
kandang_id: undefined,
kandang: null,
product_warehouse: null,
product_warehouse_id: undefined,
unit_price: '',
total_weight: '',
qty: '',
uom: '',
avg_weight: '',
total_price: '',
delivery_date: new Date().toDateString(),
},
});
};
const handleBlurField = (field: string) => {
const { qty, unit_price, total_price, avg_weight, total_weight } =
formik.values;
if (field === 'unit_price' || field === 'total_price' || field === 'qty') {
if (qty && unit_price && field === 'unit_price') {
formik.setFieldValue(
'total_price',
(qty as number) * (unit_price as number)
);
} else if (qty && total_price && field === 'total_price') {
formik.setFieldValue(
'unit_price',
(total_price as number) / (qty as number)
);
}
}
if (field === 'avg_weight' || field === 'total_weight' || field === 'qty') {
if (qty && avg_weight && field === 'avg_weight') {
formik.setFieldValue(
'total_weight',
(qty as number) * (avg_weight as number)
);
} else if (qty && total_weight && field === 'total_weight') {
formik.setFieldValue(
'avg_weight',
(total_weight as number) / (qty as number)
);
}
}
};
return (
<>
<form
className='size-full'
onSubmit={formik.handleSubmit}
onReset={handleResetForm}
>
<div className='grid grid-cols-2 gap-4 z-200'>
<PatternInput
name='vehicle_number'
label='No. Polisi'
format='AA #### AAA'
mask='_'
inputVehicleNumber
required
type='text'
placeholder='B 1234 CDE'
value={formatVechicleNumber(formik.values.vehicle_number ?? '')}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
isError={
formik.touched.vehicle_number &&
Boolean(formik.errors.vehicle_number)
}
errorMessage={formik.errors.vehicle_number}
/>
<SelectInput
required
label='Kandang'
options={kandangSourceOptions}
isLoading={isLoadingKandangSourceOptions}
value={selectedOptionsKandang}
onChange={kandangChangeHandler}
isClearable
menuPortalTarget={modalRef?.current}
isError={
formik.touched.kandang_id && Boolean(formik.errors.kandang_id)
}
errorMessage={formik.errors.kandang_id}
placeholder='Pilih Kandang'
/>
<SelectInput
required
label='Produk'
options={warehouseSourceOptions}
isLoading={isLoadingWarehouseSourceOptions}
value={selectedOptionsWarehouse}
onChange={warehouseChangeHandler}
isClearable
menuPortalTarget={modalRef?.current}
placeholder='Pilih Kandang Terlebih Dahulu'
isDisabled={!selectedOptionsKandang?.value}
isError={
formik.touched.product_warehouse_id &&
Boolean(formik.errors.product_warehouse_id)
}
errorMessage={formik.errors.product_warehouse_id}
/>
<NumberInput
required
label='Kuantitas'
name='qty'
value={formik.values.qty}
onChange={formik.handleChange}
onBlur={() => handleBlurField('qty')}
isError={formik.touched.qty && Boolean(formik.errors.qty)}
errorMessage={formik.errors.qty}
placeholder='Masukan Kuantitas'
/>
<NumberInput
required
label='Avg. Bobot (Kg)'
name='avg_weight'
value={formik.values.avg_weight}
onChange={formik.handleChange}
onBlur={() => handleBlurField('avg_weight')}
isError={
formik.touched.avg_weight && Boolean(formik.errors.avg_weight)
}
errorMessage={formik.errors.avg_weight}
placeholder='Masukan Bobot Rata-rata'
/>
<NumberInput
required
label='Harga Satuan (Rp)'
name='unit_price'
value={formik.values.unit_price}
onChange={formik.handleChange}
onBlur={() => handleBlurField('unit_price')}
isError={
formik.touched.unit_price && Boolean(formik.errors.unit_price)
}
errorMessage={formik.errors.unit_price}
placeholder='Masukan Harga Satuan'
/>
<NumberInput
required
label='Total Bobot (Kg)'
name='total_weight'
value={formik.values.total_weight}
onChange={formik.handleChange}
onBlur={() => handleBlurField('total_weight')}
isError={
formik.touched.total_weight && Boolean(formik.errors.total_weight)
}
errorMessage={formik.errors.total_weight}
placeholder='Masukan Total Bobot'
/>
<NumberInput
required
label='Total Penjualan (Rp)'
name='total_price'
value={formik.values.total_price}
onChange={formik.handleChange}
onBlur={() => handleBlurField('total_price')}
isError={
formik.touched.total_price && Boolean(formik.errors.total_price)
}
errorMessage={formik.errors.total_price}
placeholder='Masukan Total Penjualan'
/>
</div>
<div className='flex flex-row justify-end gap-3 mt-4'>
<Button type='reset' color='warning' onClick={handleResetForm}>
Reset
</Button>
<Button
type='submit'
isLoading={formik.isSubmitting}
disabled={!formik.isValid || formik.isSubmitting}
>
Submit
</Button>
</div>
</form>
</>
);
};
export default MarketingProductForm;
src/lib/helper.ts
+23
View File
@@ -2,6 +2,7 @@ import moment from 'moment';
import 'moment/locale/id';
import { twMerge } from 'tailwind-merge';
import clsx, { ClassValue } from 'clsx';
import { ChangeEvent } from 'react';
// set locale globally
moment.locale('id');
@@ -29,6 +30,28 @@ export const formatNumber = (
}).format(value);
};
export function formatVechicleNumber(value: string): string {
let result = '';
for (let i = 0; i < value.length; i++) {
const curr = value[i];
const prev = value[i - 1];
// Cek apakah terjadi perpindahan dari huruf ke angka atau angka ke huruf
if (i > 0) {
const isCurrDigit = /\d/.test(curr);
const isPrevDigit = /\d/.test(prev);
if (isCurrDigit !== isPrevDigit) {
result += ' ';
}
}
result += curr;
}
return result.trim().replace(/\s+/g, ' ');
}
export const formatCurrency = (
value: number | bigint | Intl.StringNumericLiteral,
currency = 'IDR',
src/services/api/marketing.ts
+6
View File
@@ -0,0 +1,6 @@
import { Marketing } from '@/types/api/marketing/marketing';
import { BaseApiService } from './base';
export const MarketingApi = new BaseApiService<Marketing, unknown, unknown>(
'/marketing/sales-orders'
);
src/types/api/marketing/marketing.d.ts
Vendored
+24 -6
View File
@@ -4,7 +4,8 @@ import {
BaseMetadata,
CreatedUser,
} from '@/types/api/api-general';
import { ProductWarehouse } from '../inventory/product-warehouse';
import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
import { Kandang } from '@/types/api/master-data/kandang';
export type BaseMarketing = {
id: number;
@@ -17,14 +18,14 @@ export type BaseMarketing = {
notes: string;
grand_total: number;
approval: BaseApproval;
marketing_products?: MarketingProducts[];
marketing_products?: MarketingProduct[];
};
export type MarketingProducts = {
export type MarketingProduct = {
id: number;
qty: number;
unit_price: number;
avg_weigth: number;
avg_weight: number;
total_weight: number;
total_price: number;
product_warehouse: ProductWarehouse;
@@ -35,7 +36,7 @@ export type MarketingDeliveryProducts = {
id: number;
qty: number;
unit_price: number;
avg_weigth: number;
avg_weight: number;
total_weight: number;
total_price: number;
delivery_date: string;
@@ -48,6 +49,23 @@ export type CreateMarketingPayload = {
customer_id: number;
date: string;
notes: string;
marketing_products: CreateMarketingProductPayload[];
};
export type UpdateMarketingPayload = CreateMarketingPayload;
export type CreateMarketingProductPayload = {
id?: number;
vehicle_number: string;
kandang_id: string | number | undefined;
kandang: Kandang | undefined;
product_warehouse_id: string | number | undefined;
product_warehouse: ProductWarehouse | undefined;
unit_price: string | number | undefined;
total_weight: string | number | undefined;
qty: string | number | undefined;
uom: string | undefined;
avg_weight: string | number | undefined;
total_price: string | number | undefined;
delivery_date?: string | null;
};
export type UpdateMarketingProductPayload = CreateMarketingProductPayload;