mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
Merge branch 'development' into fix/project-flock
This commit is contained in:
ValdiANS
@@ -1,11 +0,0 @@
|
||||
import SuspenseHelper from '@/components/helper/SuspenseHelper';
|
||||
|
||||
const Layout = ({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) => {
|
||||
return <SuspenseHelper>{children}</SuspenseHelper>;
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
@@ -1,54 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import MarketingForm from '@/components/pages/marketing/form/MarketingForm';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import { MarketingApi } from '@/services/api/marketing/marketing';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import toast from 'react-hot-toast';
|
||||
import useSWR from 'swr';
|
||||
|
||||
const EditMarketingDelivery = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const soId = searchParams.get('marketingId');
|
||||
|
||||
const {
|
||||
data: marketing,
|
||||
isLoading: isLoading,
|
||||
mutate: refreshMarketing,
|
||||
} = useSWR(`get-so-${soId}`, () =>
|
||||
MarketingApi.getSingle(soId ? parseInt(soId) : 0)
|
||||
);
|
||||
|
||||
if (!soId) {
|
||||
router.back();
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isLoading && (!marketing || isResponseError(marketing))) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full p-4'>
|
||||
{isLoading && <span className='loading loading-spinner loading-xl' />}
|
||||
{!isLoading && isResponseSuccess(marketing) && (
|
||||
<MarketingForm
|
||||
formType='add_deliver'
|
||||
initialValues={marketing.data}
|
||||
afterSubmit={() => {
|
||||
refreshMarketing();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default EditMarketingDelivery;
|
||||
@@ -1,11 +0,0 @@
|
||||
import MarketingForm from '@/components/pages/marketing/form/MarketingForm';
|
||||
|
||||
const AddSalesOrder = () => {
|
||||
return (
|
||||
<div className='size-full p-4'>
|
||||
<MarketingForm formType='add' />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddSalesOrder;
|
||||
@@ -1,11 +0,0 @@
|
||||
import SuspenseHelper from '@/components/helper/SuspenseHelper';
|
||||
|
||||
const Layout = ({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) => {
|
||||
return <SuspenseHelper>{children}</SuspenseHelper>;
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
@@ -1,62 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import MarketingForm from '@/components/pages/marketing/form/MarketingForm';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import { MarketingApi } from '@/services/api/marketing/marketing';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import toast from 'react-hot-toast';
|
||||
import useSWR from 'swr';
|
||||
|
||||
const EditMarketingDelivery = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const soId = searchParams.get('marketingId');
|
||||
|
||||
const {
|
||||
data: marketing,
|
||||
isLoading: isLoading,
|
||||
mutate: refreshMarketing,
|
||||
} = useSWR(`get-so-${soId}`, () =>
|
||||
MarketingApi.getSingle(soId ? parseInt(soId) : 0)
|
||||
);
|
||||
|
||||
if (!soId) {
|
||||
router.back();
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isLoading && (!marketing || isResponseError(marketing))) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
isResponseSuccess(marketing) &&
|
||||
marketing.data.latest_approval.step_number != 3
|
||||
) {
|
||||
toast.error('Data Marketing perlu dilakukan approval terlebih dahulu!');
|
||||
router.back();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full p-4'>
|
||||
{isLoading && <span className='loading loading-spinner loading-xl' />}
|
||||
{!isLoading && isResponseSuccess(marketing) && (
|
||||
<MarketingForm
|
||||
formType='edit_deliver'
|
||||
initialValues={marketing.data}
|
||||
afterSubmit={() => {
|
||||
refreshMarketing();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default EditMarketingDelivery;
|
||||
@@ -1,11 +0,0 @@
|
||||
import SuspenseHelper from '@/components/helper/SuspenseHelper';
|
||||
|
||||
const Layout = ({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) => {
|
||||
return <SuspenseHelper>{children}</SuspenseHelper>;
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
@@ -1,49 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import MarketingDetail from '@/components/pages/marketing/detail/MarketingDetail';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import { MarketingApi } from '@/services/api/marketing/marketing';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import useSWR from 'swr';
|
||||
|
||||
const DetailMarketing = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const soId = searchParams.get('marketingId');
|
||||
|
||||
const {
|
||||
data: marketing,
|
||||
isLoading: isLoading,
|
||||
mutate: refreshMarketing,
|
||||
} = useSWR(soId, (id: number) => MarketingApi.getSingle(id));
|
||||
|
||||
if (!soId) {
|
||||
router.back();
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isLoading && (!marketing || isResponseError(marketing))) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='w-full p-4'>
|
||||
{isLoading && <span className='loading loading-spinner loading-xl' />}
|
||||
{!isLoading && isResponseSuccess(marketing) && (
|
||||
<MarketingDetail
|
||||
initialValues={marketing.data}
|
||||
refresh={refreshMarketing}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DetailMarketing;
|
||||
@@ -1,11 +0,0 @@
|
||||
import SuspenseHelper from '@/components/helper/SuspenseHelper';
|
||||
|
||||
const Layout = ({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) => {
|
||||
return <SuspenseHelper>{children}</SuspenseHelper>;
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
@@ -1,52 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import MarketingForm from '@/components/pages/marketing/form/MarketingForm';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import { MarketingApi } from '@/services/api/marketing/marketing';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import useSWR from 'swr';
|
||||
|
||||
const EditSalesOrder = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const soId = searchParams.get('marketingId');
|
||||
|
||||
const {
|
||||
data: marketing,
|
||||
isLoading: isLoading,
|
||||
mutate: refreshMarketing,
|
||||
} = useSWR(`get-so-${soId}`, () =>
|
||||
MarketingApi.getSingle(soId ? parseInt(soId) : 0)
|
||||
);
|
||||
|
||||
if (!soId) {
|
||||
router.back();
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isLoading && (!marketing || isResponseError(marketing))) {
|
||||
router.replace('/404');
|
||||
return;
|
||||
}
|
||||
return (
|
||||
<div className='w-full p-4'>
|
||||
{isLoading && <span className='loading loading-spinner loading-xl' />}
|
||||
{!isLoading && isResponseSuccess(marketing) && (
|
||||
<MarketingForm
|
||||
formType='edit'
|
||||
initialValues={marketing.data}
|
||||
afterSubmit={() => {
|
||||
refreshMarketing();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default EditSalesOrder;
|
||||
@@ -49,7 +49,7 @@ const ExpenseStatusBadge = ({ approval }: ExpenseStatusBadgeProps) => {
|
||||
color={expenseStatusBadgeColor}
|
||||
text={isLatestApprovalRejected ? 'Ditolak' : (approval?.step_name ?? '')}
|
||||
className={{
|
||||
badge: 'w-fit',
|
||||
badge: 'whitespace-nowrap max-w-max w-fit',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -29,7 +29,7 @@ const RealizationStatusBadge = ({ approval }: RealizationStatusBadgeProps) => {
|
||||
color={realizationStatusBadgeColor}
|
||||
text={isLatestApprovalRejected ? 'Ditolak' : realizationStatus}
|
||||
className={{
|
||||
badge: 'w-fit',
|
||||
badge: 'whitespace-nowrap max-w-max w-fit',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -1,13 +1,8 @@
|
||||
import {
|
||||
ChangeEventHandler,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { CellContext } from '@tanstack/react-table';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import useSWR from 'swr';
|
||||
import { useFormik } from 'formik';
|
||||
|
||||
import Button from '@/components/Button';
|
||||
import Card from '@/components/Card';
|
||||
@@ -40,6 +35,10 @@ import { Icon } from '@iconify/react';
|
||||
import RowDropdownOptions from '@/components/table/RowDropdownOptions';
|
||||
import RowCollapseOptions from '@/components/table/RowCollapseOptions';
|
||||
import { useUiStore } from '@/stores/ui/ui.store';
|
||||
import {
|
||||
FinanceTableFilterSchema,
|
||||
FinanceTableFilterValues,
|
||||
} from './FinanceTableFilter.schema';
|
||||
|
||||
const RowOptionsMenu = ({
|
||||
type = 'dropdown',
|
||||
@@ -152,10 +151,10 @@ const FinanceTable = () => {
|
||||
} = useTableFilter({
|
||||
initial: {
|
||||
search: searchValue,
|
||||
transactionType: '',
|
||||
bankId: '',
|
||||
customerId: '',
|
||||
supplierId: '',
|
||||
transactionTypes: '',
|
||||
bankIds: '',
|
||||
customerIds: '',
|
||||
supplierIds: '',
|
||||
sortBy: '',
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
@@ -163,10 +162,10 @@ const FinanceTable = () => {
|
||||
paramMap: {
|
||||
page: 'page',
|
||||
pageSize: 'limit',
|
||||
transactionType: 'transaction_type',
|
||||
bankId: 'bank_id',
|
||||
customerId: 'customer_id',
|
||||
supplierId: 'supplier_id',
|
||||
transactionTypes: 'transaction_types',
|
||||
bankIds: 'bank_ids',
|
||||
customerIds: 'customer_ids',
|
||||
supplierIds: 'supplier_ids',
|
||||
sortBy: 'sort_date',
|
||||
startDate: 'start_date',
|
||||
endDate: 'end_date',
|
||||
@@ -174,18 +173,7 @@ const FinanceTable = () => {
|
||||
});
|
||||
|
||||
// ===== State =====
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const deleteModal = useModal();
|
||||
const [pendingFilters, setPendingFilters] = useState({
|
||||
search: searchValue,
|
||||
transactionType: '',
|
||||
bankId: '',
|
||||
customerId: '',
|
||||
supplierId: '',
|
||||
sortBy: '',
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
});
|
||||
const [selectedTransactionType, setSelectedTransactionType] = useState<
|
||||
OptionType | OptionType[] | null
|
||||
>(null);
|
||||
@@ -201,6 +189,34 @@ const FinanceTable = () => {
|
||||
const [selectedSortBy, setSelectedSortBy] = useState<OptionType | null>(null);
|
||||
const [selectedFinance, setSelectedFinance] = useState<Finance | null>(null);
|
||||
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
||||
const [dateErrorShown, setDateErrorShown] = useState(false);
|
||||
|
||||
// ===== Formik for Filter =====
|
||||
const filterFormik = useFormik<FinanceTableFilterValues>({
|
||||
initialValues: {
|
||||
search: searchValue,
|
||||
transaction_types: '',
|
||||
bank_ids: '',
|
||||
customer_ids: '',
|
||||
supplier_ids: '',
|
||||
sort_by: '',
|
||||
start_date: '',
|
||||
end_date: '',
|
||||
},
|
||||
validationSchema: FinanceTableFilterSchema,
|
||||
enableReinitialize: true,
|
||||
onSubmit: (values) => {
|
||||
updateFilter('search', values.search);
|
||||
setSearchValue(values.search);
|
||||
updateFilter('transactionTypes', values.transaction_types);
|
||||
updateFilter('bankIds', values.bank_ids);
|
||||
updateFilter('customerIds', values.customer_ids);
|
||||
updateFilter('supplierIds', values.supplier_ids);
|
||||
updateFilter('sortBy', values.sort_by);
|
||||
updateFilter('startDate', values.start_date);
|
||||
updateFilter('endDate', values.end_date);
|
||||
},
|
||||
});
|
||||
|
||||
// ===== Fetch Data =====
|
||||
const {
|
||||
@@ -237,84 +253,141 @@ const FinanceTable = () => {
|
||||
loadMore: bankLoadMore,
|
||||
} = useSelect<Bank>(BankApi.basePath, 'id', 'alias');
|
||||
|
||||
const bankSelectOptions = useMemo(() => {
|
||||
if (!isResponseSuccess(bankRawData)) return [];
|
||||
|
||||
return bankOptions.map((bank) => {
|
||||
const bankData = bankRawData.data.find((data) => data.id === bank?.value);
|
||||
return {
|
||||
label: bankData
|
||||
? `${bankData.alias} - ${bankData.account_number} - ${bankData.owner}`
|
||||
: '',
|
||||
value: bank?.value,
|
||||
};
|
||||
});
|
||||
}, [bankOptions, bankRawData]);
|
||||
|
||||
// ===== Handler =====
|
||||
const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
|
||||
setPendingFilters((prev) => ({ ...prev, search: e.target.value }));
|
||||
const searchChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
filterFormik.setFieldValue('search', e.target.value);
|
||||
};
|
||||
const transactionTypeChangeHandler = (
|
||||
val: OptionType | OptionType[] | null
|
||||
) => {
|
||||
setSelectedTransactionType(val);
|
||||
setPendingFilters((prev) => ({
|
||||
...prev,
|
||||
transactionType: val
|
||||
filterFormik.setFieldValue(
|
||||
'transaction_types',
|
||||
val
|
||||
? Array.isArray(val)
|
||||
? val.map((item) => item.value).join(',')
|
||||
: (val.value as string)
|
||||
: '',
|
||||
}));
|
||||
: ''
|
||||
);
|
||||
};
|
||||
const bankChangeHandler = (val: OptionType | OptionType[] | null) => {
|
||||
setSelectedBank(val);
|
||||
setPendingFilters((prev) => ({
|
||||
...prev,
|
||||
bankId: val
|
||||
filterFormik.setFieldValue(
|
||||
'bank_ids',
|
||||
val
|
||||
? Array.isArray(val)
|
||||
? val.map((item) => item.value).join(',')
|
||||
: (val.value as string)
|
||||
: '',
|
||||
}));
|
||||
: ''
|
||||
);
|
||||
};
|
||||
const customerIdChangeHandler = (val: OptionType | OptionType[] | null) => {
|
||||
setSelectedCustomerId(val);
|
||||
setPendingFilters((prev) => ({
|
||||
...prev,
|
||||
customerId: val
|
||||
filterFormik.setFieldValue(
|
||||
'customer_ids',
|
||||
val
|
||||
? Array.isArray(val)
|
||||
? val.map((item) => item.value).join(',')
|
||||
: (val.value as string)
|
||||
: '',
|
||||
}));
|
||||
: ''
|
||||
);
|
||||
};
|
||||
const supplierIdChangeHandler = (val: OptionType | OptionType[] | null) => {
|
||||
setSelectedSupplierId(val);
|
||||
setPendingFilters((prev) => ({
|
||||
...prev,
|
||||
supplierId: val
|
||||
filterFormik.setFieldValue(
|
||||
'supplier_ids',
|
||||
val
|
||||
? Array.isArray(val)
|
||||
? val.map((item) => item.value).join(',')
|
||||
: (val.value as string)
|
||||
: '',
|
||||
}));
|
||||
: ''
|
||||
);
|
||||
};
|
||||
const sortByChangeHandler = (val: OptionType | OptionType[] | null) => {
|
||||
setSelectedSortBy(val as OptionType);
|
||||
setPendingFilters((prev) => ({
|
||||
...prev,
|
||||
sortBy: val ? ((val as OptionType).value as string) : '',
|
||||
}));
|
||||
filterFormik.setFieldValue(
|
||||
'sort_by',
|
||||
val ? ((val as OptionType).value as string) : ''
|
||||
);
|
||||
};
|
||||
const startDateChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
|
||||
setPendingFilters((prev) => ({ ...prev, startDate: e.target.value }));
|
||||
|
||||
const startDateChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value;
|
||||
const endDate = filterFormik.values.end_date;
|
||||
|
||||
filterFormik.setFieldValue('start_date', value);
|
||||
|
||||
if (value && endDate) {
|
||||
const startDate = new Date(value);
|
||||
const endDateObj = new Date(endDate);
|
||||
|
||||
if (endDateObj < startDate) {
|
||||
filterFormik.setFieldError(
|
||||
'end_date',
|
||||
'Tanggal akhir tidak boleh masa lampau'
|
||||
);
|
||||
if (!dateErrorShown) {
|
||||
toast.error('Tanggal akhir tidak boleh masa lampau', {
|
||||
duration: Infinity,
|
||||
});
|
||||
setDateErrorShown(true);
|
||||
}
|
||||
} else {
|
||||
filterFormik.setFieldError('end_date', undefined);
|
||||
if (dateErrorShown) {
|
||||
toast.dismiss();
|
||||
setDateErrorShown(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
const endDateChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
|
||||
setPendingFilters((prev) => ({ ...prev, endDate: e.target.value }));
|
||||
};
|
||||
const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
|
||||
const newVal = val as OptionType;
|
||||
setPageSize(newVal.value as number);
|
||||
};
|
||||
const submitFilterHandler = () => {
|
||||
updateFilter('search', pendingFilters.search);
|
||||
setSearchValue(pendingFilters.search);
|
||||
updateFilter('transactionType', pendingFilters.transactionType);
|
||||
updateFilter('bankId', pendingFilters.bankId);
|
||||
updateFilter('customerId', pendingFilters.customerId);
|
||||
updateFilter('supplierId', pendingFilters.supplierId);
|
||||
updateFilter('sortBy', pendingFilters.sortBy);
|
||||
updateFilter('startDate', pendingFilters.startDate);
|
||||
updateFilter('endDate', pendingFilters.endDate);
|
||||
|
||||
const endDateChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value;
|
||||
const startDate = filterFormik.values.start_date;
|
||||
|
||||
filterFormik.setFieldValue('end_date', value);
|
||||
|
||||
if (value && startDate) {
|
||||
const startDateObj = new Date(startDate);
|
||||
const endDate = new Date(value);
|
||||
|
||||
if (endDate < startDateObj) {
|
||||
filterFormik.setFieldError(
|
||||
'end_date',
|
||||
'Tanggal akhir tidak boleh masa lampau'
|
||||
);
|
||||
if (!dateErrorShown) {
|
||||
toast.error('Tanggal akhir tidak boleh masa lampau', {
|
||||
duration: Infinity,
|
||||
});
|
||||
setDateErrorShown(true);
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
filterFormik.setFieldError('end_date', undefined);
|
||||
if (dateErrorShown) {
|
||||
toast.dismiss();
|
||||
setDateErrorShown(false);
|
||||
}
|
||||
};
|
||||
|
||||
const resetFilterHandler = () => {
|
||||
setSelectedTransactionType(null);
|
||||
setSelectedBank(null);
|
||||
@@ -322,24 +395,14 @@ const FinanceTable = () => {
|
||||
setSelectedSupplierId(null);
|
||||
setSelectedSortBy(null);
|
||||
|
||||
const emptyFilters = {
|
||||
search: '',
|
||||
transactionType: '',
|
||||
bankId: '',
|
||||
customerId: '',
|
||||
supplierId: '',
|
||||
sortBy: '',
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
};
|
||||
setPendingFilters(emptyFilters);
|
||||
filterFormik.resetForm();
|
||||
|
||||
updateFilter('search', '');
|
||||
resetSearchValue();
|
||||
updateFilter('transactionType', '');
|
||||
updateFilter('bankId', '');
|
||||
updateFilter('customerId', '');
|
||||
updateFilter('supplierId', '');
|
||||
updateFilter('transactionTypes', '');
|
||||
updateFilter('bankIds', '');
|
||||
updateFilter('customerIds', '');
|
||||
updateFilter('supplierIds', '');
|
||||
updateFilter('sortBy', '');
|
||||
updateFilter('startDate', '');
|
||||
updateFilter('endDate', '');
|
||||
@@ -464,26 +527,36 @@ const FinanceTable = () => {
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// Store current path on mount
|
||||
return () => {
|
||||
if (dateErrorShown) {
|
||||
toast.dismiss();
|
||||
}
|
||||
};
|
||||
}, [dateErrorShown]);
|
||||
|
||||
useEffect(() => {
|
||||
previousPathRef.current = window.location.pathname;
|
||||
|
||||
return () => {
|
||||
const currentPath = window.location.pathname;
|
||||
|
||||
// if both paths are within /finance module
|
||||
const isCurrentPathFinance = currentPath.includes('/finance');
|
||||
const isPreviousPathFinance =
|
||||
previousPathRef.current?.includes('/finance');
|
||||
|
||||
// reset if we outside finance module entirely
|
||||
if (isPreviousPathFinance && !isCurrentPathFinance) {
|
||||
resetSearchValue();
|
||||
}
|
||||
|
||||
if (dateErrorShown) {
|
||||
toast.dismiss();
|
||||
setDateErrorShown(false);
|
||||
}
|
||||
};
|
||||
}, [resetSearchValue]);
|
||||
}, [resetSearchValue, dateErrorShown]);
|
||||
|
||||
return (
|
||||
<section className='size-full p-6 flex flex-col gap-6'>
|
||||
<section className='size-full flex flex-col gap-6'>
|
||||
<div className='flex justify-end gap-2'>
|
||||
<RequirePermission permissions='lti.finance.injections.create'>
|
||||
<Button
|
||||
@@ -526,7 +599,7 @@ const FinanceTable = () => {
|
||||
<Button
|
||||
color='primary'
|
||||
className='min-w-24'
|
||||
onClick={submitFilterHandler}
|
||||
onClick={() => filterFormik.handleSubmit()}
|
||||
>
|
||||
Cari
|
||||
</Button>
|
||||
@@ -539,6 +612,7 @@ const FinanceTable = () => {
|
||||
label='Jenis Transaksi'
|
||||
value={selectedTransactionType}
|
||||
onChange={transactionTypeChangeHandler}
|
||||
closeMenuOnSelect={false}
|
||||
isClearable
|
||||
isMulti
|
||||
/>
|
||||
@@ -550,6 +624,7 @@ const FinanceTable = () => {
|
||||
onInputChange={customerInputValue}
|
||||
onMenuScrollToBottom={customerLoadMore}
|
||||
isLoading={customerIsLoadingOptions}
|
||||
closeMenuOnSelect={false}
|
||||
isClearable
|
||||
isMulti
|
||||
/>
|
||||
@@ -561,31 +636,18 @@ const FinanceTable = () => {
|
||||
onInputChange={supplierInputValue}
|
||||
onMenuScrollToBottom={supplierLoadMore}
|
||||
isLoading={supplierIsLoadingOptions}
|
||||
closeMenuOnSelect={false}
|
||||
isClearable
|
||||
isMulti
|
||||
/>
|
||||
<SelectInput
|
||||
options={
|
||||
isResponseSuccess(bankRawData)
|
||||
? bankOptions.map((bank) => ({
|
||||
label:
|
||||
bankRawData.data.find((data) => data.id === bank?.value)
|
||||
?.alias +
|
||||
' - ' +
|
||||
bankRawData.data.find((data) => data.id === bank?.value)
|
||||
?.account_number +
|
||||
' - ' +
|
||||
bankRawData.data.find((data) => data.id === bank?.value)
|
||||
?.owner,
|
||||
value: bank?.value,
|
||||
}))
|
||||
: []
|
||||
}
|
||||
options={bankSelectOptions}
|
||||
label='Bank'
|
||||
value={selectedBank}
|
||||
onChange={bankChangeHandler}
|
||||
onInputChange={bankInputValue}
|
||||
onMenuScrollToBottom={bankLoadMore}
|
||||
closeMenuOnSelect={false}
|
||||
isClearable
|
||||
isMulti
|
||||
/>
|
||||
@@ -597,22 +659,32 @@ const FinanceTable = () => {
|
||||
isClearable
|
||||
/>
|
||||
<DateInput
|
||||
name='startDate'
|
||||
name='start_date'
|
||||
label='Periode Tanggal (Mulai)'
|
||||
value={pendingFilters.startDate}
|
||||
value={filterFormik.values.start_date}
|
||||
onChange={startDateChangeHandler}
|
||||
errorMessage={
|
||||
filterFormik.errors.end_date
|
||||
? filterFormik.errors.end_date
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
<DateInput
|
||||
name='endDate'
|
||||
name='end_date'
|
||||
label='Periode Tanggal (Akhir)'
|
||||
value={pendingFilters.endDate}
|
||||
value={filterFormik.values.end_date}
|
||||
onChange={endDateChangeHandler}
|
||||
errorMessage={
|
||||
filterFormik.errors.end_date
|
||||
? filterFormik.errors.end_date
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
<DebouncedTextInput
|
||||
name='search'
|
||||
label='Cari'
|
||||
placeholder='Cari'
|
||||
value={pendingFilters.search}
|
||||
value={filterFormik.values.search}
|
||||
onChange={searchChangeHandler}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
import * as yup from 'yup';
|
||||
|
||||
export type FinanceTableFilterType = {
|
||||
search: string;
|
||||
transaction_types: string;
|
||||
bank_ids: string;
|
||||
customer_ids: string;
|
||||
supplier_ids: string;
|
||||
sort_by: string;
|
||||
start_date: string;
|
||||
end_date: string;
|
||||
};
|
||||
|
||||
export const FinanceTableFilterSchema = yup.object({
|
||||
search: yup.string().optional(),
|
||||
transaction_types: yup.string().optional(),
|
||||
bank_ids: yup.string().optional(),
|
||||
customer_ids: yup.string().optional(),
|
||||
supplier_ids: yup.string().optional(),
|
||||
sort_by: yup.string().optional(),
|
||||
start_date: yup.string().optional(),
|
||||
end_date: yup
|
||||
.string()
|
||||
.optional()
|
||||
.test(
|
||||
'is-greater-than-start',
|
||||
'Tanggal akhir tidak boleh masa lampau',
|
||||
function (value) {
|
||||
const { start_date } = this.parent;
|
||||
if (!start_date || !value) return true;
|
||||
return new Date(value) >= new Date(start_date);
|
||||
}
|
||||
),
|
||||
}) as yup.ObjectSchema<FinanceTableFilterType>;
|
||||
|
||||
export type FinanceTableFilterValues = yup.InferType<
|
||||
typeof FinanceTableFilterSchema
|
||||
>;
|
||||
@@ -1,16 +1,10 @@
|
||||
'use client';
|
||||
|
||||
import AlertErrorList from '@/components/helper/form/FormErrors';
|
||||
import { useSelect, OptionType } from '@/components/input/SelectInput';
|
||||
import { OptionType } from '@/components/input/SelectInput';
|
||||
import Modal, { useModal } from '@/components/Modal';
|
||||
import ConfirmationModal from '@/components/modal/ConfirmationModal';
|
||||
import {
|
||||
mergeSOwithDO,
|
||||
SalesProductToFieldValues,
|
||||
DeliveryProductToFieldValues,
|
||||
} from '@/components/pages/marketing/form/MarketingForm';
|
||||
import { DeliveryOrderProductFormValues } from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.schema';
|
||||
import { SalesOrderProductFormValues } from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema';
|
||||
import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
|
||||
import { formatCurrency, formatDate, formatTitleCase } from '@/lib/helper';
|
||||
import {
|
||||
@@ -18,16 +12,13 @@ import {
|
||||
MarketingApi,
|
||||
SalesOrderApi,
|
||||
} from '@/services/api/marketing/marketing';
|
||||
import { CustomerApi } from '@/services/api/master-data';
|
||||
import { UserApi } from '@/services/api/user';
|
||||
import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
|
||||
import { BaseApproval, CreatedUser } from '@/types/api/api-general';
|
||||
import { BaseApproval } from '@/types/api/api-general';
|
||||
import {
|
||||
CreateDeliveryOrderPayload,
|
||||
Marketing,
|
||||
UpdateDeliveryOrderPayload,
|
||||
} from '@/types/api/marketing/marketing';
|
||||
import { Customer } from '@/types/api/master-data/customer';
|
||||
import { useFormik } from 'formik';
|
||||
import { Icon } from '@iconify/react';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
@@ -47,6 +38,9 @@ import {
|
||||
DeliveryOrderSchema,
|
||||
getFilledMarketingFormInitialValues,
|
||||
SalesOrderFormValues,
|
||||
mergeSOwithDO,
|
||||
SalesProductToFieldValues,
|
||||
DeliveryProductToFieldValues,
|
||||
} from '@/components/pages/marketing/form/MarketingForm.schema';
|
||||
import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
|
||||
import RequirePermission from '@/components/helper/RequirePermission';
|
||||
@@ -116,13 +110,6 @@ const DeliveryOrderFormModal = ({
|
||||
const formRef = useRef<HTMLFormElement>(null);
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
const [grandTotal, setGrandTotal] = useState(
|
||||
isResponseSuccess(marketing) &&
|
||||
marketing?.data.sales_order
|
||||
?.map((item) => item.total_price)
|
||||
.reduce((a, b) => a + b, 0)
|
||||
);
|
||||
|
||||
const [formErrorMessage, setFormErrorMessage] = useState<string | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [selectedDeliveryProduct, setSelectedDeliveryProduct] =
|
||||
@@ -505,6 +492,14 @@ const DeliveryOrderFormModal = ({
|
||||
formik.setFieldValue('delivery_order', deliveryOrderValues);
|
||||
}, [deliveryOrderValues]);
|
||||
|
||||
const grandTotal = useMemo(() => {
|
||||
return deliveryOrderValues.reduce(
|
||||
(total, product) =>
|
||||
total + parseFloat((product.total_price as string) || '0'),
|
||||
0
|
||||
);
|
||||
}, [deliveryOrderValues]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
@@ -663,26 +658,28 @@ const DeliveryOrderFormModal = ({
|
||||
steps={MARKETING_APPROVAL_LINE}
|
||||
/>
|
||||
)}
|
||||
<div className='w-full p-4 gap-3 flex flex-col'>
|
||||
<h4 className='text-base font-medium text-base-content/50 font-roboto'>
|
||||
<div className='w-full gap-3 flex flex-col'>
|
||||
<h4 className='px-4 pt-4 text-base font-medium text-base-content/50 font-roboto'>
|
||||
{step == 2 && 'Ubah '} Informasi{' '}
|
||||
{step == 2 ? 'Delivery' : 'Produk'}
|
||||
</h4>
|
||||
{step === 1 && (
|
||||
<MemoizedDeliveryOrderProductTable
|
||||
marketing={marketing.data}
|
||||
formType={
|
||||
deliveryRejected
|
||||
? 'rejected'
|
||||
: isPending
|
||||
? 'pending'
|
||||
: modalAction
|
||||
}
|
||||
data={deliveryOrderValues}
|
||||
onEdit={handleEditDO}
|
||||
onDelete={handleDeleteDO}
|
||||
onAddProductClick={handleAddDOClick}
|
||||
/>
|
||||
<div className='px-4'>
|
||||
<MemoizedDeliveryOrderProductTable
|
||||
marketing={marketing.data}
|
||||
formType={
|
||||
deliveryRejected
|
||||
? 'rejected'
|
||||
: isPending
|
||||
? 'pending'
|
||||
: modalAction
|
||||
}
|
||||
data={deliveryOrderValues}
|
||||
onEdit={handleEditDO}
|
||||
onDelete={handleDeleteDO}
|
||||
onAddProductClick={handleAddDOClick}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{step === 2 && (
|
||||
<MemoizedDeliveryOrderProductForm
|
||||
|
||||
@@ -1,572 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import Button from '@/components/Button';
|
||||
import Card from '@/components/Card';
|
||||
import { FormHeader } from '@/components/helper/form/FormHeader';
|
||||
import { useModal } from '@/components/Modal';
|
||||
import ConfirmationModal from '@/components/modal/ConfirmationModal';
|
||||
import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
|
||||
import ApprovalSteps, {
|
||||
useApprovalSteps,
|
||||
} from '@/components/pages/ApprovalSteps';
|
||||
import Table from '@/components/Table';
|
||||
import { MARKETING_APPROVAL_LINE } from '@/config/approval-line';
|
||||
import {
|
||||
cn,
|
||||
formatCurrency,
|
||||
formatDate,
|
||||
formatNumber,
|
||||
formatTitleCase,
|
||||
formatVechicleNumber,
|
||||
} from '@/lib/helper';
|
||||
import {
|
||||
MarketingApi,
|
||||
SalesOrderApi,
|
||||
} from '@/services/api/marketing/marketing';
|
||||
import {
|
||||
BaseDelivery,
|
||||
BaseSalesOrder,
|
||||
Marketing,
|
||||
} from '@/types/api/marketing/marketing';
|
||||
import { Icon } from '@iconify/react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import toast from 'react-hot-toast';
|
||||
import SalesOrderExport from '@/components/pages/marketing/pdf/SalesOrderExport';
|
||||
import DeliveryOrderExport from '@/components/pages/marketing/pdf/DeliveryOrderExport';
|
||||
import RequirePermission from '@/components/helper/RequirePermission';
|
||||
import Badge from '@/components/Badge';
|
||||
|
||||
const MarketingDetail = ({
|
||||
initialValues,
|
||||
refresh,
|
||||
}: {
|
||||
initialValues?: Marketing;
|
||||
refresh?: () => void;
|
||||
}) => {
|
||||
const router = useRouter();
|
||||
const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(
|
||||
'APPROVED'
|
||||
);
|
||||
const [grandTotal, setGrandTotal] = useState(
|
||||
initialValues?.sales_order
|
||||
?.map((item) => item.total_price)
|
||||
.reduce((a, b) => a + b, 0)
|
||||
);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const deleteModal = useModal();
|
||||
const confirmationModal = useModal();
|
||||
const deliveryModal = useModal();
|
||||
const {
|
||||
approvals,
|
||||
isLoading: isLoadingApproval,
|
||||
refresh: refreshApproval,
|
||||
} = useApprovalSteps({
|
||||
latestApproval: initialValues?.latest_approval,
|
||||
approvalLines: MARKETING_APPROVAL_LINE,
|
||||
moduleName: 'MARKETINGS',
|
||||
moduleId: initialValues?.id as number as unknown as string,
|
||||
});
|
||||
|
||||
const approveClickHandler = () => {
|
||||
setApprovalAction('APPROVED');
|
||||
confirmationModal.openModal();
|
||||
};
|
||||
|
||||
const rejectClickHandler = () => {
|
||||
setApprovalAction('REJECTED');
|
||||
confirmationModal.openModal();
|
||||
};
|
||||
|
||||
const deleteClickHandler = () => {
|
||||
deleteModal.openModal();
|
||||
};
|
||||
|
||||
const confirmationModalDeleteClickHandler = async () => {
|
||||
setIsLoading(true);
|
||||
const res = await MarketingApi.delete(initialValues?.id as number);
|
||||
deleteModal.closeModal();
|
||||
router.push('/marketing');
|
||||
toast.success(res?.message as string);
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
const confirmationModalApproveClickHandler = async (notes: string) => {
|
||||
setIsLoading(true);
|
||||
const res = await SalesOrderApi.singleApproval(
|
||||
initialValues?.id as number,
|
||||
approvalAction,
|
||||
notes
|
||||
);
|
||||
setIsLoading(false);
|
||||
confirmationModal.closeModal();
|
||||
toast.success(res?.message as string);
|
||||
refresh?.();
|
||||
refreshApproval?.();
|
||||
};
|
||||
|
||||
const confirmationModalDeliveryClickHandler = async (notes: string) => {
|
||||
setIsLoading(true);
|
||||
const res = await SalesOrderApi.delivery(
|
||||
initialValues?.id as number,
|
||||
notes
|
||||
);
|
||||
setIsLoading(false);
|
||||
deliveryModal.closeModal();
|
||||
toast.success(res?.message as string);
|
||||
refresh?.();
|
||||
refreshApproval?.();
|
||||
router.push(
|
||||
`/marketing/detail/delivery-orders/edit?marketingId=${initialValues?.id}`
|
||||
);
|
||||
};
|
||||
|
||||
const approval = initialValues?.latest_approval;
|
||||
const isRejected = approval?.action == 'REJECTED';
|
||||
const isApproved = approval?.action == 'APPROVED';
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='flex flex-col w-full gap-4'>
|
||||
<FormHeader
|
||||
title={`Detail ${Number(initialValues?.latest_approval?.step_number) > 2 ? 'Delivery Order' : 'Sales Order'}`}
|
||||
backUrl='/marketing'
|
||||
/>
|
||||
{!isLoadingApproval && approvals && (
|
||||
<ApprovalSteps approvals={approvals} />
|
||||
)}
|
||||
<div className='flex-row flex gap-3'>
|
||||
{initialValues?.latest_approval?.step_number == 1 && (
|
||||
<>
|
||||
<RequirePermission permissions='lti.marketing.sales_order.approve'>
|
||||
<Button
|
||||
color='success'
|
||||
onClick={approveClickHandler}
|
||||
disabled={
|
||||
initialValues?.latest_approval?.step_number == 1 &&
|
||||
initialValues?.latest_approval?.action == 'REJECTED'
|
||||
}
|
||||
>
|
||||
<Icon icon='mdi:check' width={24} height={24} />
|
||||
Approve
|
||||
</Button>
|
||||
</RequirePermission>
|
||||
|
||||
<RequirePermission permissions='lti.marketing.sales_order.approve'>
|
||||
<Button
|
||||
color='error'
|
||||
onClick={rejectClickHandler}
|
||||
disabled={
|
||||
initialValues?.latest_approval?.step_number == 1 &&
|
||||
initialValues?.latest_approval?.action == 'REJECTED'
|
||||
}
|
||||
>
|
||||
<Icon icon='mdi:close' width={24} height={24} />
|
||||
Reject
|
||||
</Button>
|
||||
</RequirePermission>
|
||||
</>
|
||||
)}
|
||||
{initialValues?.latest_approval?.step_number != 1 && (
|
||||
<>
|
||||
<RequirePermission
|
||||
permissions={
|
||||
initialValues?.latest_approval?.step_number == 3
|
||||
? 'lti.marketing.delivery_order.update'
|
||||
: 'lti.marketing.delivery_order.create'
|
||||
}
|
||||
>
|
||||
<Button
|
||||
color='success'
|
||||
href={
|
||||
initialValues?.latest_approval?.step_number == 3
|
||||
? `/marketing/detail/delivery-orders/edit?marketingId=${initialValues?.id}`
|
||||
: `/marketing/add/delivery-orders?marketingId=${initialValues?.id}`
|
||||
}
|
||||
>
|
||||
<Icon icon='mdi:truck' width={24} height={24} />
|
||||
{initialValues?.latest_approval?.step_number == 3
|
||||
? 'Edit '
|
||||
: 'Tambah '}
|
||||
Delivery Order
|
||||
</Button>
|
||||
</RequirePermission>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Card
|
||||
title='Informasi Penjualan'
|
||||
className={{
|
||||
wrapper: 'w-full bg-white',
|
||||
}}
|
||||
>
|
||||
<div className='overflow-x-auto rounded-box border border-base-content/5 bg-base-100 mt-3'>
|
||||
<table className='table'>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td width='45%' className='font-semibold'>
|
||||
No. Sales Order
|
||||
</td>
|
||||
<td>:</td>
|
||||
<td width='50%' className='font-mono'>
|
||||
{initialValues?.so_number}
|
||||
</td>
|
||||
</tr>
|
||||
{Number(initialValues?.latest_approval?.step_number) > 2 && (
|
||||
<tr>
|
||||
<td width='45%' className='font-semibold'>
|
||||
No. Delivery Order
|
||||
</td>
|
||||
<td>:</td>
|
||||
<td width='50%' className='font-mono'>
|
||||
{initialValues?.delivery_order
|
||||
?.map((item) => item.do_number)
|
||||
.join(', ')}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
<tr>
|
||||
<td className='font-semibold'>Nama Pelanggan</td>
|
||||
<td>:</td>
|
||||
<td>{initialValues?.customer?.name}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='font-semibold'>Status</td>
|
||||
<td>:</td>
|
||||
<td>
|
||||
<Badge
|
||||
variant='soft'
|
||||
className={{
|
||||
badge:
|
||||
'rounded-lg px-2 w-fit flex flex-row justify-start whitespace-nowrap',
|
||||
}}
|
||||
color={
|
||||
isRejected
|
||||
? 'error'
|
||||
: isApproved
|
||||
? approval?.step_number == 1
|
||||
? 'neutral'
|
||||
: approval?.step_number == 2
|
||||
? 'primary'
|
||||
: approval?.step_number == 3
|
||||
? 'success'
|
||||
: 'neutral'
|
||||
: 'neutral'
|
||||
}
|
||||
>
|
||||
<Icon
|
||||
icon='mdi:circle'
|
||||
width={12}
|
||||
height={12}
|
||||
color={
|
||||
approval?.step_number == 1
|
||||
? 'neutral'
|
||||
: approval?.step_number == 2
|
||||
? 'primary'
|
||||
: approval?.step_number == 3
|
||||
? 'success'
|
||||
: 'neutral'
|
||||
}
|
||||
/>
|
||||
{isRejected
|
||||
? 'Ditolak'
|
||||
: formatTitleCase(approval?.step_name || '')}
|
||||
</Badge>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='font-semibold'>Tanggal Penjualan</td>
|
||||
<td>:</td>
|
||||
<td>{formatDate(initialValues?.so_date, 'DD MMM yyyy')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='font-semibold'>Total Penjualan</td>
|
||||
<td>:</td>
|
||||
<td>{formatCurrency(grandTotal as number)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='font-semibold'>Catatan</td>
|
||||
<td>:</td>
|
||||
<td>{initialValues?.notes ?? '-'}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='font-semibold'>Dokumen Penjualan</td>
|
||||
<td>:</td>
|
||||
<td>
|
||||
<SalesOrderExport data={initialValues} />
|
||||
</td>
|
||||
</tr>
|
||||
{Number(initialValues?.latest_approval?.step_number) > 2 && (
|
||||
<tr>
|
||||
<td className='font-semibold'>Dokumen Pengiriman</td>
|
||||
<td>:</td>
|
||||
<td className='flex flex-wrap gap-2'>
|
||||
{initialValues?.delivery_order?.map((item, index) => (
|
||||
<DeliveryOrderExport
|
||||
key={index}
|
||||
data={initialValues}
|
||||
deliveryOrder={item}
|
||||
/>
|
||||
))}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
{initialValues?.sales_order && (
|
||||
<Card
|
||||
title='Informasi Produk'
|
||||
className={{
|
||||
wrapper: 'w-full bg-white',
|
||||
}}
|
||||
>
|
||||
<Table<BaseSalesOrder>
|
||||
data={initialValues?.sales_order}
|
||||
columns={[
|
||||
{
|
||||
header: 'Kandang',
|
||||
accessorFn(row) {
|
||||
return row.product_warehouse.warehouse.name;
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Produk',
|
||||
accessorFn(row) {
|
||||
return row.product_warehouse.product.name;
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Harga Satuan (Rp)',
|
||||
accessorFn(row) {
|
||||
return formatCurrency(row.unit_price);
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Total Bobot (Kg)',
|
||||
accessorFn(row) {
|
||||
return formatNumber(row.total_weight);
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Kuantitas',
|
||||
accessorFn(row) {
|
||||
return formatNumber(row.qty);
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Avg. Bobot (Kg)',
|
||||
accessorFn(row) {
|
||||
return formatNumber(row.avg_weight);
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Total Penjualan (Rp)',
|
||||
accessorFn(row) {
|
||||
return formatCurrency(row.total_price);
|
||||
},
|
||||
},
|
||||
]}
|
||||
className={{
|
||||
containerClassName: cn({
|
||||
'mb-20':
|
||||
initialValues?.sales_order &&
|
||||
initialValues?.sales_order?.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',
|
||||
paginationClassName: 'hidden',
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
)}
|
||||
{initialValues?.delivery_order && (
|
||||
<Card
|
||||
title='Informasi Pengiriman'
|
||||
className={{
|
||||
wrapper: 'w-full bg-white',
|
||||
}}
|
||||
>
|
||||
{initialValues?.delivery_order.map((delivery, index) => {
|
||||
return (
|
||||
<div key={index}>
|
||||
<Card
|
||||
className={{
|
||||
wrapper: 'w-full',
|
||||
}}
|
||||
>
|
||||
<div className='flex flex-row gap-3'>
|
||||
<div className='font-semibold'>
|
||||
Nomor DO : {delivery.do_number}
|
||||
</div>
|
||||
</div>
|
||||
<Table<BaseDelivery>
|
||||
data={delivery.deliveries}
|
||||
columns={[
|
||||
{
|
||||
header: 'Tanggal Pengiriman',
|
||||
accessorFn() {
|
||||
return formatDate(
|
||||
delivery.delivery_date,
|
||||
'DD MMM yyyy'
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'No. Polisi',
|
||||
accessorFn(row) {
|
||||
return formatVechicleNumber(row.vehicle_number);
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Kandang',
|
||||
accessorFn(row) {
|
||||
return row.product_warehouse.warehouse.name;
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Produk',
|
||||
accessorFn(row) {
|
||||
return row.product_warehouse.product.name;
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Harga Satuan (Rp)',
|
||||
accessorFn(row) {
|
||||
return formatCurrency(row.unit_price);
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Total Bobot (Kg)',
|
||||
accessorFn(row) {
|
||||
return formatNumber(row.total_weight);
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Kuantitas',
|
||||
accessorFn(row) {
|
||||
return formatNumber(row.qty);
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Avg. Bobot (Kg)',
|
||||
accessorFn(row) {
|
||||
return formatNumber(row.avg_weight);
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Total Penjualan (Rp)',
|
||||
accessorFn(row) {
|
||||
return formatCurrency(row.total_price);
|
||||
},
|
||||
},
|
||||
]}
|
||||
className={{
|
||||
containerClassName: cn({
|
||||
'mb-20':
|
||||
initialValues?.sales_order &&
|
||||
initialValues?.sales_order?.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',
|
||||
paginationClassName: 'hidden',
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
<div className='flex flex-row gap-3 my-3'>
|
||||
<DeliveryOrderExport
|
||||
data={initialValues}
|
||||
deliveryOrder={delivery}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</Card>
|
||||
)}
|
||||
<div className='flex flex-row gap-3'>
|
||||
{initialValues?.latest_approval?.step_number != 3 && (
|
||||
<>
|
||||
<RequirePermission permissions='lti.marketing.sales_order.update'>
|
||||
<Button
|
||||
color='warning'
|
||||
type='button'
|
||||
href={`/marketing/detail/${initialValues?.latest_approval?.step_number == 3 ? 'delivery-orders' : 'sales-orders'}/edit?marketingId=${initialValues?.id}`}
|
||||
>
|
||||
<Icon icon='mdi:pencil' width={24} height={24} />
|
||||
Edit
|
||||
</Button>
|
||||
</RequirePermission>
|
||||
</>
|
||||
)}
|
||||
<RequirePermission permissions='lti.marketing.sales_order.delete'>
|
||||
<Button color='error' onClick={deleteClickHandler}>
|
||||
<Icon icon='mdi:delete' width={24} height={24} />
|
||||
Hapus
|
||||
</Button>
|
||||
</RequirePermission>
|
||||
</div>
|
||||
</div>
|
||||
<ConfirmationModal
|
||||
ref={deleteModal.ref}
|
||||
type='error'
|
||||
text={`Apakah anda yakin ingin menghapus data penjualan ini?`}
|
||||
secondaryButton={{
|
||||
text: 'Tidak',
|
||||
}}
|
||||
primaryButton={{
|
||||
text: 'Ya',
|
||||
color: 'error',
|
||||
isLoading: isLoading,
|
||||
onClick: confirmationModalDeleteClickHandler,
|
||||
}}
|
||||
/>
|
||||
<ConfirmationModalWithNotes
|
||||
ref={confirmationModal.ref}
|
||||
type={approvalAction === 'APPROVED' ? 'success' : 'error'}
|
||||
text={`Apakah anda yakin ingin ${approvalAction == 'APPROVED' ? 'approve' : 'reject'} data penjualan ini?`}
|
||||
secondaryButton={{
|
||||
text: 'Tidak',
|
||||
}}
|
||||
primaryButton={{
|
||||
text: 'Ya',
|
||||
color: approvalAction === 'APPROVED' ? 'success' : 'error',
|
||||
isLoading: isLoading,
|
||||
onClick: confirmationModalApproveClickHandler,
|
||||
}}
|
||||
/>
|
||||
<ConfirmationModalWithNotes
|
||||
ref={deliveryModal.ref}
|
||||
type={'success'}
|
||||
text={`Apakah anda yakin ingin deliver penjualan ini?`}
|
||||
secondaryButton={{
|
||||
text: 'Tidak',
|
||||
}}
|
||||
primaryButton={{
|
||||
text: 'Ya',
|
||||
color: 'success',
|
||||
isLoading: isLoading,
|
||||
onClick: confirmationModalDeliveryClickHandler,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MarketingDetail;
|
||||
@@ -623,7 +623,10 @@ const MarketingTable = () => {
|
||||
data={allData}
|
||||
columns={columns}
|
||||
pageSize={tableFilterState.pageSize}
|
||||
page={tableFilterState.page}
|
||||
page={isResponseSuccess(marketing) ? marketing?.meta?.page : 1}
|
||||
totalItems={
|
||||
isResponseSuccess(marketing) ? marketing?.meta?.total_results : 0
|
||||
}
|
||||
isLoading={isLoadingMarketing}
|
||||
className={{
|
||||
containerClassName: cn('p-3', {
|
||||
|
||||
@@ -14,8 +14,6 @@ import {
|
||||
DeliveryProductToFieldValues,
|
||||
mergeSOwithDO,
|
||||
SalesProductToFieldValues,
|
||||
} from '@/components/pages/marketing/form/MarketingForm';
|
||||
import {
|
||||
DeliveryOrderFormValues,
|
||||
DeliveryOrderSchema,
|
||||
getFilledMarketingFormInitialValues,
|
||||
@@ -186,15 +184,31 @@ const SalesOrderFormModal = ({
|
||||
date: formatDate(values.so_date as string, 'yyyy-MM-DD'),
|
||||
notes: values.notes as string,
|
||||
marketing_products: values.sales_order.map((product) => {
|
||||
// Workaround untuk TELUR + QTY: kirim "KG" karena BE tidak support "QTY"
|
||||
const convertionUnitValue =
|
||||
product.convertion_unit?.value?.toUpperCase();
|
||||
const normalizedConvertionUnit =
|
||||
product.marketing_type?.value?.toLowerCase() === 'telur'
|
||||
? convertionUnitValue === 'PETI'
|
||||
? 'PETI'
|
||||
: 'KG' // termasuk "QTY" dan "KG"
|
||||
: undefined;
|
||||
|
||||
return {
|
||||
vehicle_number: product.vehicle_number as string,
|
||||
kandang_id: product.kandang_id as number,
|
||||
product_warehouse_id: product.product_warehouse_id as number,
|
||||
unit_price: parseFloat(product.unit_price as string),
|
||||
total_weight: parseFloat(product.total_weight as string),
|
||||
qty: parseFloat(product.qty as string),
|
||||
avg_weight: parseFloat(product.avg_weight as string),
|
||||
total_price: parseFloat(product.total_price as string),
|
||||
unit_price: parseFloat(String(product.unit_price || 0)),
|
||||
total_weight: parseFloat(String(product.total_weight || 0)),
|
||||
qty: parseFloat(String(product.qty || 0)),
|
||||
avg_weight: parseFloat(String(product.avg_weight || 0)),
|
||||
total_price: parseFloat(String(product.total_price || 0)),
|
||||
marketing_type:
|
||||
product.marketing_type?.value?.toUpperCase() || '',
|
||||
convertion_unit: normalizedConvertionUnit,
|
||||
weight_per_convertion:
|
||||
product.weight_per_convertion ?? undefined,
|
||||
week: product.week?.value ?? undefined,
|
||||
} as CreateSalesOrderProductPayload;
|
||||
}),
|
||||
} as CreateSalesOrderPayload)
|
||||
@@ -282,6 +296,7 @@ const SalesOrderFormModal = ({
|
||||
|
||||
// ================== HANDLER ==================
|
||||
const nextButtonHandler = () => {
|
||||
setSelectedMarketingProduct(null);
|
||||
setStep(step + 1);
|
||||
};
|
||||
const prevButtonHandler = () => {
|
||||
@@ -375,6 +390,7 @@ const SalesOrderFormModal = ({
|
||||
}
|
||||
|
||||
formik.setFieldValue('sales_order', updatedProducts);
|
||||
console.log(formik.values);
|
||||
nextButtonHandler();
|
||||
},
|
||||
[memoSalesOrder, nextButtonHandler]
|
||||
@@ -650,8 +666,9 @@ const SalesOrderFormModal = ({
|
||||
</Button>
|
||||
</RequirePermission>
|
||||
</div>
|
||||
<div className='flex flex-1 flex-col p-4'>
|
||||
<div className='flex flex-1 flex-col'>
|
||||
<MemoizedSalesOrderProductForm
|
||||
key={selectedMarketingProduct?.id ?? 'new'}
|
||||
onSubmitForm={handleAddSubmitSO}
|
||||
initialValues={selectedMarketingProduct ?? undefined}
|
||||
exisitingValues={memoSalesOrder}
|
||||
|
||||
@@ -1,572 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import Button from '@/components/Button';
|
||||
import Card from '@/components/Card';
|
||||
import { FormHeader } from '@/components/helper/form/FormHeader';
|
||||
import { useModal } from '@/components/Modal';
|
||||
import ConfirmationModal from '@/components/modal/ConfirmationModal';
|
||||
import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
|
||||
import ApprovalSteps, {
|
||||
useApprovalSteps,
|
||||
} from '@/components/pages/ApprovalSteps';
|
||||
import Table from '@/components/Table';
|
||||
import { MARKETING_APPROVAL_LINE } from '@/config/approval-line';
|
||||
import {
|
||||
cn,
|
||||
formatCurrency,
|
||||
formatDate,
|
||||
formatNumber,
|
||||
formatTitleCase,
|
||||
formatVechicleNumber,
|
||||
} from '@/lib/helper';
|
||||
import {
|
||||
MarketingApi,
|
||||
SalesOrderApi,
|
||||
} from '@/services/api/marketing/marketing';
|
||||
import {
|
||||
BaseDelivery,
|
||||
BaseSalesOrder,
|
||||
Marketing,
|
||||
} from '@/types/api/marketing/marketing';
|
||||
import { Icon } from '@iconify/react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import toast from 'react-hot-toast';
|
||||
import SalesOrderExport from '@/components/pages/marketing/pdf/SalesOrderExport';
|
||||
import DeliveryOrderExport from '@/components/pages/marketing/pdf/DeliveryOrderExport';
|
||||
import RequirePermission from '@/components/helper/RequirePermission';
|
||||
import Badge from '@/components/Badge';
|
||||
|
||||
const MarketingDetail = ({
|
||||
initialValues,
|
||||
refresh,
|
||||
}: {
|
||||
initialValues?: Marketing;
|
||||
refresh?: () => void;
|
||||
}) => {
|
||||
const router = useRouter();
|
||||
const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(
|
||||
'APPROVED'
|
||||
);
|
||||
const [grandTotal, setGrandTotal] = useState(
|
||||
initialValues?.sales_order
|
||||
?.map((item) => item.total_price)
|
||||
.reduce((a, b) => a + b, 0)
|
||||
);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const deleteModal = useModal();
|
||||
const confirmationModal = useModal();
|
||||
const deliveryModal = useModal();
|
||||
const {
|
||||
approvals,
|
||||
isLoading: isLoadingApproval,
|
||||
refresh: refreshApproval,
|
||||
} = useApprovalSteps({
|
||||
latestApproval: initialValues?.latest_approval,
|
||||
approvalLines: MARKETING_APPROVAL_LINE,
|
||||
moduleName: 'MARKETINGS',
|
||||
moduleId: initialValues?.id as number as unknown as string,
|
||||
});
|
||||
|
||||
const approveClickHandler = () => {
|
||||
setApprovalAction('APPROVED');
|
||||
confirmationModal.openModal();
|
||||
};
|
||||
|
||||
const rejectClickHandler = () => {
|
||||
setApprovalAction('REJECTED');
|
||||
confirmationModal.openModal();
|
||||
};
|
||||
|
||||
const deleteClickHandler = () => {
|
||||
deleteModal.openModal();
|
||||
};
|
||||
|
||||
const confirmationModalDeleteClickHandler = async () => {
|
||||
setIsLoading(true);
|
||||
const res = await MarketingApi.delete(initialValues?.id as number);
|
||||
deleteModal.closeModal();
|
||||
router.push('/marketing');
|
||||
toast.success(res?.message as string);
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
const confirmationModalApproveClickHandler = async (notes: string) => {
|
||||
setIsLoading(true);
|
||||
const res = await SalesOrderApi.singleApproval(
|
||||
initialValues?.id as number,
|
||||
approvalAction,
|
||||
notes
|
||||
);
|
||||
setIsLoading(false);
|
||||
confirmationModal.closeModal();
|
||||
toast.success(res?.message as string);
|
||||
refresh?.();
|
||||
refreshApproval?.();
|
||||
};
|
||||
|
||||
const confirmationModalDeliveryClickHandler = async (notes: string) => {
|
||||
setIsLoading(true);
|
||||
const res = await SalesOrderApi.delivery(
|
||||
initialValues?.id as number,
|
||||
notes
|
||||
);
|
||||
setIsLoading(false);
|
||||
deliveryModal.closeModal();
|
||||
toast.success(res?.message as string);
|
||||
refresh?.();
|
||||
refreshApproval?.();
|
||||
router.push(
|
||||
`/marketing/detail/delivery-orders/edit?marketingId=${initialValues?.id}`
|
||||
);
|
||||
};
|
||||
|
||||
const approval = initialValues?.latest_approval;
|
||||
const isRejected = approval?.action == 'REJECTED';
|
||||
const isApproved = approval?.action == 'APPROVED';
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='flex flex-col w-full gap-4'>
|
||||
<FormHeader
|
||||
title={`Detail ${Number(initialValues?.latest_approval?.step_number) > 2 ? 'Delivery Order' : 'Sales Order'}`}
|
||||
backUrl='/marketing'
|
||||
/>
|
||||
{!isLoadingApproval && approvals && (
|
||||
<ApprovalSteps approvals={approvals} />
|
||||
)}
|
||||
<div className='flex-row flex gap-3'>
|
||||
{initialValues?.latest_approval?.step_number == 1 && (
|
||||
<>
|
||||
<RequirePermission permissions='lti.marketing.sales_order.approve'>
|
||||
<Button
|
||||
color='success'
|
||||
onClick={approveClickHandler}
|
||||
disabled={
|
||||
initialValues?.latest_approval?.step_number == 1 &&
|
||||
initialValues?.latest_approval?.action == 'REJECTED'
|
||||
}
|
||||
>
|
||||
<Icon icon='mdi:check' width={24} height={24} />
|
||||
Approve
|
||||
</Button>
|
||||
</RequirePermission>
|
||||
|
||||
<RequirePermission permissions='lti.marketing.sales_order.approve'>
|
||||
<Button
|
||||
color='error'
|
||||
onClick={rejectClickHandler}
|
||||
disabled={
|
||||
initialValues?.latest_approval?.step_number == 1 &&
|
||||
initialValues?.latest_approval?.action == 'REJECTED'
|
||||
}
|
||||
>
|
||||
<Icon icon='mdi:close' width={24} height={24} />
|
||||
Reject
|
||||
</Button>
|
||||
</RequirePermission>
|
||||
</>
|
||||
)}
|
||||
{initialValues?.latest_approval?.step_number != 1 && (
|
||||
<>
|
||||
<RequirePermission
|
||||
permissions={
|
||||
initialValues?.latest_approval?.step_number == 3
|
||||
? 'lti.marketing.delivery_order.update'
|
||||
: 'lti.marketing.delivery_order.create'
|
||||
}
|
||||
>
|
||||
<Button
|
||||
color='success'
|
||||
href={
|
||||
initialValues?.latest_approval?.step_number == 3
|
||||
? `/marketing/detail/delivery-orders/edit?marketingId=${initialValues?.id}`
|
||||
: `/marketing/add/delivery-orders?marketingId=${initialValues?.id}`
|
||||
}
|
||||
>
|
||||
<Icon icon='mdi:truck' width={24} height={24} />
|
||||
{initialValues?.latest_approval?.step_number == 3
|
||||
? 'Edit '
|
||||
: 'Tambah '}
|
||||
Delivery Order
|
||||
</Button>
|
||||
</RequirePermission>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Card
|
||||
title='Informasi Penjualan'
|
||||
className={{
|
||||
wrapper: 'w-full bg-white',
|
||||
}}
|
||||
>
|
||||
<div className='overflow-x-auto rounded-box border border-base-content/5 bg-base-100 mt-3'>
|
||||
<table className='table'>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td width='45%' className='font-semibold'>
|
||||
No. Sales Order
|
||||
</td>
|
||||
<td>:</td>
|
||||
<td width='50%' className='font-mono'>
|
||||
{initialValues?.so_number}
|
||||
</td>
|
||||
</tr>
|
||||
{Number(initialValues?.latest_approval?.step_number) > 2 && (
|
||||
<tr>
|
||||
<td width='45%' className='font-semibold'>
|
||||
No. Delivery Order
|
||||
</td>
|
||||
<td>:</td>
|
||||
<td width='50%' className='font-mono'>
|
||||
{initialValues?.delivery_order
|
||||
?.map((item) => item.do_number)
|
||||
.join(', ')}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
<tr>
|
||||
<td className='font-semibold'>Nama Pelanggan</td>
|
||||
<td>:</td>
|
||||
<td>{initialValues?.customer?.name}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='font-semibold'>Status</td>
|
||||
<td>:</td>
|
||||
<td>
|
||||
<Badge
|
||||
variant='soft'
|
||||
className={{
|
||||
badge:
|
||||
'rounded-lg px-2 w-fit flex flex-row justify-start whitespace-nowrap',
|
||||
}}
|
||||
color={
|
||||
isRejected
|
||||
? 'error'
|
||||
: isApproved
|
||||
? approval?.step_number == 1
|
||||
? 'neutral'
|
||||
: approval?.step_number == 2
|
||||
? 'primary'
|
||||
: approval?.step_number == 3
|
||||
? 'success'
|
||||
: 'neutral'
|
||||
: 'neutral'
|
||||
}
|
||||
>
|
||||
<Icon
|
||||
icon='mdi:circle'
|
||||
width={12}
|
||||
height={12}
|
||||
color={
|
||||
approval?.step_number == 1
|
||||
? 'neutral'
|
||||
: approval?.step_number == 2
|
||||
? 'primary'
|
||||
: approval?.step_number == 3
|
||||
? 'success'
|
||||
: 'neutral'
|
||||
}
|
||||
/>
|
||||
{isRejected
|
||||
? 'Ditolak'
|
||||
: formatTitleCase(approval?.step_name || '')}
|
||||
</Badge>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='font-semibold'>Tanggal Penjualan</td>
|
||||
<td>:</td>
|
||||
<td>{formatDate(initialValues?.so_date, 'DD MMM yyyy')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='font-semibold'>Total Penjualan</td>
|
||||
<td>:</td>
|
||||
<td>{formatCurrency(grandTotal as number)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='font-semibold'>Catatan</td>
|
||||
<td>:</td>
|
||||
<td>{initialValues?.notes ?? '-'}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='font-semibold'>Dokumen Penjualan</td>
|
||||
<td>:</td>
|
||||
<td>
|
||||
<SalesOrderExport data={initialValues} />
|
||||
</td>
|
||||
</tr>
|
||||
{Number(initialValues?.latest_approval?.step_number) > 2 && (
|
||||
<tr>
|
||||
<td className='font-semibold'>Dokumen Pengiriman</td>
|
||||
<td>:</td>
|
||||
<td className='flex flex-wrap gap-2'>
|
||||
{initialValues?.delivery_order?.map((item, index) => (
|
||||
<DeliveryOrderExport
|
||||
key={index}
|
||||
data={initialValues}
|
||||
deliveryOrder={item}
|
||||
/>
|
||||
))}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
{initialValues?.sales_order && (
|
||||
<Card
|
||||
title='Informasi Produk'
|
||||
className={{
|
||||
wrapper: 'w-full bg-white',
|
||||
}}
|
||||
>
|
||||
<Table<BaseSalesOrder>
|
||||
data={initialValues?.sales_order}
|
||||
columns={[
|
||||
{
|
||||
header: 'Kandang',
|
||||
accessorFn(row) {
|
||||
return row.product_warehouse.warehouse.name;
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Produk',
|
||||
accessorFn(row) {
|
||||
return row.product_warehouse.product.name;
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Harga Satuan (Rp)',
|
||||
accessorFn(row) {
|
||||
return formatCurrency(row.unit_price);
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Total Bobot (Kg)',
|
||||
accessorFn(row) {
|
||||
return formatNumber(row.total_weight);
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Kuantitas',
|
||||
accessorFn(row) {
|
||||
return formatNumber(row.qty);
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Avg. Bobot (Kg)',
|
||||
accessorFn(row) {
|
||||
return formatNumber(row.avg_weight);
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Total Penjualan (Rp)',
|
||||
accessorFn(row) {
|
||||
return formatCurrency(row.total_price);
|
||||
},
|
||||
},
|
||||
]}
|
||||
className={{
|
||||
containerClassName: cn({
|
||||
'mb-20':
|
||||
initialValues?.sales_order &&
|
||||
initialValues?.sales_order?.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',
|
||||
paginationClassName: 'hidden',
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
)}
|
||||
{initialValues?.delivery_order && (
|
||||
<Card
|
||||
title='Informasi Pengiriman'
|
||||
className={{
|
||||
wrapper: 'w-full bg-white',
|
||||
}}
|
||||
>
|
||||
{initialValues?.delivery_order.map((delivery, index) => {
|
||||
return (
|
||||
<div key={index}>
|
||||
<Card
|
||||
className={{
|
||||
wrapper: 'w-full',
|
||||
}}
|
||||
>
|
||||
<div className='flex flex-row gap-3'>
|
||||
<div className='font-semibold'>
|
||||
Nomor DO : {delivery.do_number}
|
||||
</div>
|
||||
</div>
|
||||
<Table<BaseDelivery>
|
||||
data={delivery.deliveries}
|
||||
columns={[
|
||||
{
|
||||
header: 'Tanggal Pengiriman',
|
||||
accessorFn() {
|
||||
return formatDate(
|
||||
delivery.delivery_date,
|
||||
'DD MMM yyyy'
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'No. Polisi',
|
||||
accessorFn(row) {
|
||||
return formatVechicleNumber(row.vehicle_number);
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Kandang',
|
||||
accessorFn(row) {
|
||||
return row.product_warehouse.warehouse.name;
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Produk',
|
||||
accessorFn(row) {
|
||||
return row.product_warehouse.product.name;
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Harga Satuan (Rp)',
|
||||
accessorFn(row) {
|
||||
return formatCurrency(row.unit_price);
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Total Bobot (Kg)',
|
||||
accessorFn(row) {
|
||||
return formatNumber(row.total_weight);
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Kuantitas',
|
||||
accessorFn(row) {
|
||||
return formatNumber(row.qty);
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Avg. Bobot (Kg)',
|
||||
accessorFn(row) {
|
||||
return formatNumber(row.avg_weight);
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Total Penjualan (Rp)',
|
||||
accessorFn(row) {
|
||||
return formatCurrency(row.total_price);
|
||||
},
|
||||
},
|
||||
]}
|
||||
className={{
|
||||
containerClassName: cn({
|
||||
'mb-20':
|
||||
initialValues?.sales_order &&
|
||||
initialValues?.sales_order?.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',
|
||||
paginationClassName: 'hidden',
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
<div className='flex flex-row gap-3 my-3'>
|
||||
<DeliveryOrderExport
|
||||
data={initialValues}
|
||||
deliveryOrder={delivery}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</Card>
|
||||
)}
|
||||
<div className='flex flex-row gap-3'>
|
||||
{initialValues?.latest_approval?.step_number != 3 && (
|
||||
<>
|
||||
<RequirePermission permissions='lti.marketing.sales_order.update'>
|
||||
<Button
|
||||
color='warning'
|
||||
type='button'
|
||||
href={`/marketing/detail/${initialValues?.latest_approval?.step_number == 3 ? 'delivery-orders' : 'sales-orders'}/edit?marketingId=${initialValues?.id}`}
|
||||
>
|
||||
<Icon icon='mdi:pencil' width={24} height={24} />
|
||||
Edit
|
||||
</Button>
|
||||
</RequirePermission>
|
||||
</>
|
||||
)}
|
||||
<RequirePermission permissions='lti.marketing.sales_order.delete'>
|
||||
<Button color='error' onClick={deleteClickHandler}>
|
||||
<Icon icon='mdi:delete' width={24} height={24} />
|
||||
Hapus
|
||||
</Button>
|
||||
</RequirePermission>
|
||||
</div>
|
||||
</div>
|
||||
<ConfirmationModal
|
||||
ref={deleteModal.ref}
|
||||
type='error'
|
||||
text={`Apakah anda yakin ingin menghapus data penjualan ini?`}
|
||||
secondaryButton={{
|
||||
text: 'Tidak',
|
||||
}}
|
||||
primaryButton={{
|
||||
text: 'Ya',
|
||||
color: 'error',
|
||||
isLoading: isLoading,
|
||||
onClick: confirmationModalDeleteClickHandler,
|
||||
}}
|
||||
/>
|
||||
<ConfirmationModalWithNotes
|
||||
ref={confirmationModal.ref}
|
||||
type={approvalAction === 'APPROVED' ? 'success' : 'error'}
|
||||
text={`Apakah anda yakin ingin ${approvalAction == 'APPROVED' ? 'approve' : 'reject'} data penjualan ini?`}
|
||||
secondaryButton={{
|
||||
text: 'Tidak',
|
||||
}}
|
||||
primaryButton={{
|
||||
text: 'Ya',
|
||||
color: approvalAction === 'APPROVED' ? 'success' : 'error',
|
||||
isLoading: isLoading,
|
||||
onClick: confirmationModalApproveClickHandler,
|
||||
}}
|
||||
/>
|
||||
<ConfirmationModalWithNotes
|
||||
ref={deliveryModal.ref}
|
||||
type={'success'}
|
||||
text={`Apakah anda yakin ingin deliver penjualan ini?`}
|
||||
secondaryButton={{
|
||||
text: 'Tidak',
|
||||
}}
|
||||
primaryButton={{
|
||||
text: 'Ya',
|
||||
color: 'success',
|
||||
isLoading: isLoading,
|
||||
onClick: confirmationModalDeliveryClickHandler,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MarketingDetail;
|
||||
@@ -12,7 +12,7 @@ import {
|
||||
BaseSalesOrder,
|
||||
Marketing,
|
||||
} from '@/types/api/marketing/marketing';
|
||||
import { formatDate } from '@/lib/helper';
|
||||
import { formatDate, formatTitleCase } from '@/lib/helper';
|
||||
|
||||
type MarketingSchemaType = {
|
||||
customer_id: number | undefined;
|
||||
@@ -94,7 +94,7 @@ export type SalesOrderFormValues = Yup.InferType<typeof SalesOrderSchema>;
|
||||
export type DeliveryOrderFormValues = Yup.InferType<typeof DeliveryOrderSchema>;
|
||||
|
||||
// ================ Helper Function ================
|
||||
const SalesProductToFieldValues = (
|
||||
export const SalesProductToFieldValues = (
|
||||
product: BaseSalesOrder
|
||||
): SalesOrderProductFormValues => {
|
||||
return {
|
||||
@@ -109,15 +109,37 @@ const SalesProductToFieldValues = (
|
||||
value: product.product_warehouse.id,
|
||||
label: product.product_warehouse.product.name,
|
||||
},
|
||||
product_warehouse_data: product.product_warehouse,
|
||||
product_warehouse_id: product.product_warehouse.id,
|
||||
unit_price: product.unit_price,
|
||||
total_weight: product.total_weight,
|
||||
qty: product.qty,
|
||||
avg_weight: product.avg_weight,
|
||||
total_price: product.total_price,
|
||||
marketing_type: product.marketing_type
|
||||
? {
|
||||
value: product.marketing_type,
|
||||
label: formatTitleCase(product.marketing_type),
|
||||
}
|
||||
: null,
|
||||
convertion_unit: product.convertion_unit
|
||||
? {
|
||||
value: product.convertion_unit,
|
||||
label: formatTitleCase(product.convertion_unit),
|
||||
}
|
||||
: null,
|
||||
week: product.week
|
||||
? {
|
||||
value: product.week,
|
||||
label: `Week ${product.week}`,
|
||||
}
|
||||
: null,
|
||||
total_peti: product.total_peti,
|
||||
weight_per_convertion: product.weight_per_convertion,
|
||||
uom: product.product_warehouse.product.uom.name,
|
||||
};
|
||||
};
|
||||
const DeliveryProductToFieldValues = (
|
||||
export const DeliveryProductToFieldValues = (
|
||||
salesOrders: BaseSalesOrder[],
|
||||
delivery: BaseDeliveryOrder
|
||||
): DeliveryOrderProductFormValues[] => {
|
||||
@@ -181,6 +203,24 @@ export const mergeSOwithDO = (
|
||||
avg_weight: autofill ? so.avg_weight : delivery?.avg_weight,
|
||||
total_price: autofill ? so.total_price : delivery?.total_price,
|
||||
marketing_product: so, // jika ada, override
|
||||
uom: autofill ? so.uom : delivery?.uom,
|
||||
weight_per_convertion: autofill
|
||||
? so.weight_per_convertion
|
||||
: delivery?.weight_per_convertion,
|
||||
price_per_convertion: autofill
|
||||
? so.price_per_convertion
|
||||
: delivery?.price_per_convertion,
|
||||
convertion_unit: autofill
|
||||
? so.convertion_unit
|
||||
: delivery?.convertion_unit,
|
||||
marketing_type: autofill ? so.marketing_type : delivery?.marketing_type,
|
||||
total_peti: autofill ? so.total_peti : delivery?.total_peti,
|
||||
price_per_qty: autofill ? so.price_per_qty : delivery?.price_per_qty,
|
||||
sisa_berat: autofill ? so.sisa_berat : delivery?.sisa_berat,
|
||||
price_sisa_berat: autofill
|
||||
? so.price_sisa_berat
|
||||
: delivery?.price_sisa_berat,
|
||||
week: autofill ? so.week : delivery?.week,
|
||||
} as DeliveryOrderProductFormValues;
|
||||
});
|
||||
};
|
||||
@@ -213,3 +253,11 @@ export const getFilledMarketingFormInitialValues = (
|
||||
),
|
||||
};
|
||||
};
|
||||
|
||||
export const getPricePerConvertion = (
|
||||
totalPrice: number,
|
||||
weightPerConvertion: number,
|
||||
totalPeti: number
|
||||
) => {
|
||||
return totalPrice / (weightPerConvertion * totalPeti);
|
||||
};
|
||||
|
||||
@@ -1,872 +0,0 @@
|
||||
'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 Modal, { useModal } from '@/components/Modal';
|
||||
import { formatCurrency, formatDate } from '@/lib/helper';
|
||||
import {
|
||||
BaseDeliveryOrder,
|
||||
BaseSalesOrder,
|
||||
CreateDeliveryOrderPayload,
|
||||
CreateSalesOrderPayload,
|
||||
CreateSalesOrderProductPayload,
|
||||
Marketing,
|
||||
UpdateDeliveryOrderPayload,
|
||||
UpdateSalesOrderPayload,
|
||||
} from '@/types/api/marketing/marketing';
|
||||
import { Icon } from '@iconify/react';
|
||||
import { memo, useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { Customer } from '@/types/api/master-data/customer';
|
||||
import { CustomerApi } from '@/services/api/master-data';
|
||||
import { useFormik } from 'formik';
|
||||
import {
|
||||
DeliveryOrderFormValues,
|
||||
DeliveryOrderSchema,
|
||||
SalesOrderFormValues,
|
||||
SalesOrderSchema,
|
||||
} from '@/components/pages/marketing/form/MarketingForm.schema';
|
||||
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
|
||||
import {
|
||||
DeliveryOrderApi,
|
||||
MarketingApi,
|
||||
SalesOrderApi,
|
||||
} from '@/services/api/marketing/marketing';
|
||||
import ConfirmationModal from '@/components/modal/ConfirmationModal';
|
||||
import toast from 'react-hot-toast';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import DebouncedTextArea from '@/components/input/DebouncedTextArea';
|
||||
import SalesOrderProductForm from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProductForm';
|
||||
import DeliveryOrderProductTable from '@/components/pages/marketing/form/table-view/DeliveryOrderProductTable';
|
||||
import DeliveryOrderProductForm from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct';
|
||||
import { SalesOrderProductFormValues } from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema';
|
||||
import { DeliveryOrderProductFormValues } from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.schema';
|
||||
import RequirePermission from '@/components/helper/RequirePermission';
|
||||
import AlertErrorList from '@/components/helper/form/FormErrors';
|
||||
import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
|
||||
import { CreatedUser } from '@/types/api/api-general';
|
||||
import { UserApi } from '@/services/api/user';
|
||||
|
||||
const MemoizedSalesOrderProductForm = memo(SalesOrderProductForm);
|
||||
const MemoizedDeliveryOrderProductTable = memo(DeliveryOrderProductTable);
|
||||
const MemoizedDeliveryOrderProductForm = memo(DeliveryOrderProductForm);
|
||||
|
||||
// ================== EXTERNAL HELPER FUNCTION ==================
|
||||
export interface ProductCalculationFields {
|
||||
qty: string | number | undefined;
|
||||
unit_price: string | number | undefined;
|
||||
total_price: string | number | undefined;
|
||||
avg_weight: string | number | undefined;
|
||||
total_weight: string | number | undefined;
|
||||
}
|
||||
|
||||
export const SalesProductToFieldValues = (
|
||||
product: BaseSalesOrder
|
||||
): SalesOrderProductFormValues => {
|
||||
return {
|
||||
id: product.id,
|
||||
vehicle_number: product.vehicle_number,
|
||||
kandang_id: product.product_warehouse.warehouse.id,
|
||||
kandang: {
|
||||
value: product.product_warehouse.warehouse.id,
|
||||
label: product.product_warehouse.warehouse.name,
|
||||
},
|
||||
product_warehouse: {
|
||||
value: product.product_warehouse.id,
|
||||
label: product.product_warehouse.product.name,
|
||||
},
|
||||
product_warehouse_id: product.product_warehouse.id,
|
||||
unit_price: product.unit_price,
|
||||
total_weight: product.total_weight,
|
||||
qty: product.qty,
|
||||
avg_weight: product.avg_weight,
|
||||
total_price: product.total_price,
|
||||
};
|
||||
};
|
||||
export const DeliveryProductToFieldValues = (
|
||||
salesOrders: BaseSalesOrder[],
|
||||
delivery: BaseDeliveryOrder
|
||||
): DeliveryOrderProductFormValues[] => {
|
||||
const data = delivery.deliveries.map((item) => {
|
||||
const soId = salesOrders.find(
|
||||
(so) => so.product_warehouse.id === item.product_warehouse.id
|
||||
)?.id;
|
||||
return {
|
||||
id: soId,
|
||||
unit_price: item.unit_price,
|
||||
total_weight: item.total_weight,
|
||||
qty: item.qty,
|
||||
avg_weight: item.avg_weight,
|
||||
total_price: item.total_price,
|
||||
vehicle_number: item.vehicle_number,
|
||||
delivery_date: formatDate(delivery.delivery_date, 'yyyy-MM-DD'),
|
||||
do_number: delivery.do_number,
|
||||
marketing_product_id: soId,
|
||||
marketing_product: {
|
||||
id: soId,
|
||||
vehicle_number: item.vehicle_number,
|
||||
kandang_id: item.product_warehouse.warehouse.id,
|
||||
kandang: {
|
||||
value: item.product_warehouse.warehouse.id,
|
||||
label: item.product_warehouse.warehouse.name,
|
||||
},
|
||||
product_warehouse: {
|
||||
value: item.product_warehouse.id,
|
||||
label: item.product_warehouse.product.name,
|
||||
},
|
||||
product_warehouse_id: item.product_warehouse.id,
|
||||
unit_price: item.unit_price,
|
||||
total_weight: item.total_weight,
|
||||
qty: item.qty,
|
||||
avg_weight: item.avg_weight,
|
||||
total_price: item.total_price,
|
||||
},
|
||||
} as DeliveryOrderProductFormValues;
|
||||
});
|
||||
return data;
|
||||
};
|
||||
export const mergeSOwithDO = (
|
||||
salesOrders: SalesOrderProductFormValues[],
|
||||
deliveryOrders: DeliveryOrderProductFormValues[],
|
||||
autofill?: boolean
|
||||
): DeliveryOrderProductFormValues[] => {
|
||||
return salesOrders.map((so) => {
|
||||
const delivery = deliveryOrders.find(
|
||||
(d) => d?.marketing_product_id === so.id
|
||||
);
|
||||
|
||||
return {
|
||||
...so, // nilai dasar dari sales order
|
||||
marketing_product_id: so.id,
|
||||
delivery_date: delivery?.delivery_date || undefined,
|
||||
do_number: delivery?.do_number || undefined,
|
||||
vehicle_number: delivery?.vehicle_number || so.vehicle_number,
|
||||
unit_price: autofill ? so.unit_price : delivery?.unit_price,
|
||||
total_weight: autofill ? so.total_weight : delivery?.total_weight,
|
||||
qty: autofill ? so.qty : delivery?.qty,
|
||||
avg_weight: autofill ? so.avg_weight : delivery?.avg_weight,
|
||||
total_price: autofill ? so.total_price : delivery?.total_price,
|
||||
marketing_product: so, // jika ada, override
|
||||
} as DeliveryOrderProductFormValues;
|
||||
});
|
||||
};
|
||||
export const recalculate = (
|
||||
field: string,
|
||||
values: ProductCalculationFields
|
||||
) => {
|
||||
const { qty, unit_price, total_price, avg_weight, total_weight } = values;
|
||||
const result: Partial<ProductCalculationFields> = {};
|
||||
if (field == 'unit_price' || field == 'total_price' || field == 'qty') {
|
||||
if (qty && unit_price && (field == 'unit_price' || field == 'qty')) {
|
||||
result.total_price = Number(qty) * Number(unit_price);
|
||||
} else if (qty && total_price && field == 'total_price') {
|
||||
result.unit_price = Number(total_price) / Number(qty);
|
||||
}
|
||||
}
|
||||
if (field == 'avg_weight' || field == 'total_weight' || field == 'qty') {
|
||||
if (qty && avg_weight && (field == 'avg_weight' || field == 'qty')) {
|
||||
result.total_weight = Number(qty) * Number(avg_weight);
|
||||
} else if (qty && total_weight && field == 'total_weight') {
|
||||
result.avg_weight = Number(total_weight) / Number(qty);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
};
|
||||
export const getSubmitField = (values: ProductCalculationFields) => {
|
||||
const { qty, unit_price, total_price, avg_weight, total_weight } = values;
|
||||
|
||||
// Harga logic
|
||||
if (qty && unit_price && !total_price) {
|
||||
return 'unit_price';
|
||||
}
|
||||
if (qty && total_price && !unit_price) {
|
||||
return 'total_price';
|
||||
}
|
||||
|
||||
// Bobot logic
|
||||
if (qty && avg_weight && !total_weight) {
|
||||
return 'avg_weight';
|
||||
}
|
||||
if (qty && total_weight && !avg_weight) {
|
||||
return 'total_weight';
|
||||
}
|
||||
|
||||
// Tidak ada yang perlu dihitung
|
||||
return '';
|
||||
};
|
||||
|
||||
const MarketingForm = ({
|
||||
formType = 'add',
|
||||
initialValues,
|
||||
afterSubmit,
|
||||
}: {
|
||||
formType?: 'add' | 'edit' | 'add_deliver' | 'edit_deliver';
|
||||
initialValues?: Marketing;
|
||||
afterSubmit?: () => void;
|
||||
}) => {
|
||||
const router = useRouter();
|
||||
const deleteModal = useModal();
|
||||
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [selectedMarketingProduct, setSelectedMarketingProduct] =
|
||||
useState<SalesOrderProductFormValues | null>(null);
|
||||
const [selectedDeliveryProduct, setSelectedDeliveryProduct] =
|
||||
useState<DeliveryOrderProductFormValues | null>(null);
|
||||
const [deliveryFormState, setDeliveryFormState] = useState<'add' | 'edit'>(
|
||||
'add'
|
||||
);
|
||||
const [deliveryOrderValues, setDeliveryOrderValues] = useState<
|
||||
DeliveryOrderProductFormValues[]
|
||||
>(
|
||||
mergeSOwithDO(
|
||||
initialValues?.sales_order?.map(SalesProductToFieldValues) ?? [],
|
||||
initialValues?.delivery_order?.flatMap((delivery) =>
|
||||
DeliveryProductToFieldValues(initialValues.sales_order, delivery)
|
||||
) ?? []
|
||||
)
|
||||
);
|
||||
|
||||
// ================== REPEATER ==================
|
||||
const addSOModal = useModal();
|
||||
const addDOModal = useModal();
|
||||
const [rowSOSelection, setRowSOSelection] = useState<Record<string, boolean>>(
|
||||
{}
|
||||
);
|
||||
const selectedRowSOIds = Object.keys(rowSOSelection).map((item) =>
|
||||
parseInt(item)
|
||||
);
|
||||
|
||||
// ================== FETCH OPTIONS ==================
|
||||
const {
|
||||
options: customerOptions,
|
||||
isLoadingOptions: isLoadingCustomerOptions,
|
||||
setInputValue: setInputCustomerValue,
|
||||
loadMore: loadMoreCustomer,
|
||||
} = useSelect<Customer>(CustomerApi.basePath, 'id', 'name');
|
||||
const {
|
||||
options: salesOptions,
|
||||
isLoadingOptions: isLoadingSalesOptions,
|
||||
setInputValue: setInputSalesValue,
|
||||
loadMore: loadMoreSales,
|
||||
} = useSelect<CreatedUser>(UserApi.basePath, 'id', 'name');
|
||||
|
||||
// ================== SETUP FORMIK ==================
|
||||
const formikInitialValues = useMemo<
|
||||
SalesOrderFormValues & DeliveryOrderFormValues
|
||||
>(() => {
|
||||
return {
|
||||
so_date: initialValues?.so_date || undefined,
|
||||
notes: initialValues?.notes || undefined,
|
||||
customer_id: initialValues?.customer?.id || undefined,
|
||||
sales_person_id: initialValues?.sales_person?.id || 1,
|
||||
sales_person: initialValues?.sales_person
|
||||
? {
|
||||
value: initialValues.sales_person.id,
|
||||
label: initialValues.sales_person.name,
|
||||
}
|
||||
: null,
|
||||
customer: initialValues?.customer
|
||||
? {
|
||||
value: initialValues.customer.id,
|
||||
label: initialValues.customer.name,
|
||||
}
|
||||
: null,
|
||||
sales_order:
|
||||
initialValues?.sales_order?.map((product) =>
|
||||
SalesProductToFieldValues(product)
|
||||
) ?? [],
|
||||
delivery_order: mergeSOwithDO(
|
||||
initialValues?.sales_order?.map(SalesProductToFieldValues) ?? [],
|
||||
initialValues?.delivery_order?.flatMap((delivery) =>
|
||||
DeliveryProductToFieldValues(initialValues.sales_order, delivery)
|
||||
) ?? []
|
||||
),
|
||||
};
|
||||
}, [initialValues]);
|
||||
const formik = useFormik<SalesOrderFormValues & DeliveryOrderFormValues>({
|
||||
enableReinitialize: true,
|
||||
initialValues: formikInitialValues,
|
||||
validationSchema:
|
||||
formType == 'add_deliver' || formType == 'edit_deliver'
|
||||
? DeliveryOrderSchema
|
||||
: SalesOrderSchema,
|
||||
validateOnMount: true,
|
||||
onSubmit: async (values) => {
|
||||
const payload =
|
||||
formType != 'add_deliver' && formType != 'edit_deliver'
|
||||
? ({
|
||||
customer_id: values.customer_id as number,
|
||||
sales_person_id: values.sales_person_id as number,
|
||||
date: formatDate(values.so_date as string, 'yyyy-MM-DD'),
|
||||
notes: values.notes as string,
|
||||
marketing_products: values.sales_order.map((product) => {
|
||||
return {
|
||||
vehicle_number: product.vehicle_number as string,
|
||||
kandang_id: product.kandang_id as number,
|
||||
product_warehouse_id: product.product_warehouse_id as number,
|
||||
unit_price: parseFloat(product.unit_price as string),
|
||||
total_weight: parseFloat(product.total_weight as string),
|
||||
qty: parseFloat(product.qty as string),
|
||||
avg_weight: parseFloat(product.avg_weight as string),
|
||||
total_price: parseFloat(product.total_price as string),
|
||||
} as CreateSalesOrderProductPayload;
|
||||
}),
|
||||
} as CreateSalesOrderPayload)
|
||||
: ({
|
||||
marketing_id: initialValues?.id as number,
|
||||
delivery_products: values.delivery_order
|
||||
.map((product) => {
|
||||
if (Boolean(product.delivery_date)) {
|
||||
return {
|
||||
marketing_product_id:
|
||||
product.marketing_product_id as number,
|
||||
unit_price: parseFloat(product.unit_price as string),
|
||||
total_weight: parseFloat(product.total_weight as string),
|
||||
qty: parseFloat(product.qty as string),
|
||||
avg_weight: parseFloat(product.avg_weight as string),
|
||||
total_price: parseFloat(product.total_price as string),
|
||||
delivery_date: formatDate(
|
||||
product.delivery_date as string,
|
||||
'yyyy-MM-DD'
|
||||
),
|
||||
vehicle_number: product.vehicle_number,
|
||||
};
|
||||
}
|
||||
})
|
||||
.filter((item) => Boolean(item)),
|
||||
} as UpdateDeliveryOrderPayload);
|
||||
switch (formType) {
|
||||
case 'add':
|
||||
await createMarketingHandler(payload as CreateSalesOrderPayload);
|
||||
break;
|
||||
case 'edit':
|
||||
await updateMarketingHandler(payload as UpdateSalesOrderPayload);
|
||||
break;
|
||||
case 'add_deliver':
|
||||
await createDeliveryHandler(payload as CreateDeliveryOrderPayload);
|
||||
break;
|
||||
case 'edit_deliver':
|
||||
await updateDeliveryHandler(payload as UpdateDeliveryOrderPayload);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
afterSubmit?.();
|
||||
},
|
||||
});
|
||||
|
||||
const memoSalesOrder = formik.values.sales_order;
|
||||
|
||||
// ================== FORM REPEATER HANDLER ==================
|
||||
const createMarketingHandler = async (values: CreateSalesOrderPayload) => {
|
||||
setIsLoading(true);
|
||||
const createMarketingRes = await SalesOrderApi.create(values);
|
||||
if (isResponseSuccess(createMarketingRes)) {
|
||||
toast.success(createMarketingRes?.message as string);
|
||||
router.push('/marketing');
|
||||
}
|
||||
if (isResponseError(createMarketingRes)) {
|
||||
toast.error(createMarketingRes?.message as string);
|
||||
}
|
||||
setIsLoading(false);
|
||||
};
|
||||
const updateMarketingHandler = async (values: UpdateSalesOrderPayload) => {
|
||||
setIsLoading(true);
|
||||
const updateMarketingRes = await SalesOrderApi.update(
|
||||
initialValues?.id as number,
|
||||
values
|
||||
);
|
||||
if (isResponseSuccess(updateMarketingRes)) {
|
||||
toast.success(updateMarketingRes?.message as string);
|
||||
router.push(`/marketing/detail?marketingId=${initialValues?.id}`);
|
||||
}
|
||||
if (isResponseError(updateMarketingRes)) {
|
||||
toast.error(updateMarketingRes?.message as string);
|
||||
}
|
||||
setIsLoading(false);
|
||||
};
|
||||
const createDeliveryHandler = async (values: CreateDeliveryOrderPayload) => {
|
||||
setIsLoading(true);
|
||||
const createDeliveryRes = await DeliveryOrderApi.create(values);
|
||||
if (isResponseSuccess(createDeliveryRes)) {
|
||||
toast.success(createDeliveryRes?.message as string);
|
||||
setDeliveryOrderValues(
|
||||
createDeliveryRes.data?.delivery_order?.flatMap((delivery) =>
|
||||
DeliveryProductToFieldValues(
|
||||
createDeliveryRes.data?.sales_order,
|
||||
delivery
|
||||
)
|
||||
) ?? []
|
||||
);
|
||||
router.push(`/marketing/detail?marketingId=${initialValues?.id}`);
|
||||
}
|
||||
if (isResponseError(createDeliveryRes)) {
|
||||
toast.error(createDeliveryRes?.message as string);
|
||||
}
|
||||
setIsLoading(false);
|
||||
};
|
||||
const updateDeliveryHandler = async (values: UpdateDeliveryOrderPayload) => {
|
||||
setIsLoading(true);
|
||||
const updateDeliveryRes = await DeliveryOrderApi.update(
|
||||
initialValues?.id as number,
|
||||
values
|
||||
);
|
||||
if (isResponseSuccess(updateDeliveryRes)) {
|
||||
toast.success(updateDeliveryRes?.message as string);
|
||||
setDeliveryOrderValues(
|
||||
mergeSOwithDO(
|
||||
formik.values.sales_order,
|
||||
updateDeliveryRes.data?.delivery_order?.flatMap((delivery) =>
|
||||
DeliveryProductToFieldValues(
|
||||
updateDeliveryRes.data?.sales_order,
|
||||
delivery
|
||||
)
|
||||
) ?? []
|
||||
)
|
||||
);
|
||||
router.push(`/marketing/detail?marketingId=${initialValues?.id}`);
|
||||
}
|
||||
if (isResponseError(updateDeliveryRes)) {
|
||||
toast.error(updateDeliveryRes?.message as string);
|
||||
}
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
// ================== MARKETING HANDLER ==================
|
||||
const deleteMarketingHandler = async () => {
|
||||
setIsLoading(true);
|
||||
const deleteMarketingRes = await MarketingApi.delete(
|
||||
initialValues?.id as number
|
||||
);
|
||||
if (isResponseSuccess(deleteMarketingRes)) {
|
||||
toast.success(deleteMarketingRes?.message as string);
|
||||
}
|
||||
if (isResponseError(deleteMarketingRes)) {
|
||||
toast.error(deleteMarketingRes?.message as string);
|
||||
}
|
||||
setIsLoading(false);
|
||||
deleteModal.closeModal();
|
||||
router.push('/marketing');
|
||||
};
|
||||
const handleChangeCustomer = useCallback(
|
||||
(val: OptionType | OptionType[] | null) => {
|
||||
formik.setFieldValue('customer_id', (val as OptionType)?.value);
|
||||
formik.setFieldValue('customer', val as OptionType);
|
||||
},
|
||||
[]
|
||||
);
|
||||
const handleChangeSalesPerson = useCallback(
|
||||
(val: OptionType | OptionType[] | null) => {
|
||||
formik.setFieldValue('sales_person_id', (val as OptionType)?.value);
|
||||
formik.setFieldValue('sales_person', val as OptionType);
|
||||
},
|
||||
[]
|
||||
);
|
||||
const handleDelete = useCallback(() => {
|
||||
deleteModal.openModal();
|
||||
}, [deleteModal]);
|
||||
|
||||
// ================== SALES ORDER HANDLER ==================
|
||||
const handleDeleteSO = useCallback(
|
||||
(id: number) => {
|
||||
const currentProducts = formik.values.sales_order;
|
||||
formik.setFieldValue(
|
||||
'sales_order',
|
||||
currentProducts.filter((p) => p.id != id)
|
||||
);
|
||||
},
|
||||
[memoSalesOrder]
|
||||
);
|
||||
const handleEditSO = useCallback(
|
||||
(id: number) => {
|
||||
const currentProducts = formik.values.sales_order;
|
||||
const selectedProduct = currentProducts.find((p) => p.id == id);
|
||||
setSelectedMarketingProduct(selectedProduct ?? null);
|
||||
addSOModal.openModal();
|
||||
},
|
||||
[memoSalesOrder]
|
||||
);
|
||||
const handleBulkDeleteSO = useCallback(() => {
|
||||
const currentProducts = formik.values.sales_order;
|
||||
formik.setFieldValue(
|
||||
'sales_order',
|
||||
currentProducts.filter(
|
||||
(product) => !selectedRowSOIds.includes(product.id ?? -1)
|
||||
)
|
||||
);
|
||||
setRowSOSelection({});
|
||||
}, [selectedRowSOIds, memoSalesOrder]);
|
||||
const handleAddSOClick = useCallback(() => {
|
||||
setSelectedMarketingProduct(null);
|
||||
addSOModal.openModal();
|
||||
}, [addSOModal]);
|
||||
const handleAddSubmitSO = useCallback(
|
||||
async (values: SalesOrderProductFormValues, id?: number) => {
|
||||
const currentProducts = formik.values.sales_order;
|
||||
|
||||
const newValues = {
|
||||
...values,
|
||||
id: values.id ?? Date.now(),
|
||||
};
|
||||
|
||||
let updatedProducts = [];
|
||||
|
||||
if (id) {
|
||||
// Overwrite
|
||||
updatedProducts = currentProducts.map((item) =>
|
||||
item.id === id ? newValues : item
|
||||
);
|
||||
} else {
|
||||
// Add new item
|
||||
updatedProducts = [...currentProducts, newValues];
|
||||
}
|
||||
|
||||
formik.setFieldValue('sales_order', updatedProducts);
|
||||
|
||||
addSOModal.closeModal();
|
||||
},
|
||||
[addSOModal, memoSalesOrder]
|
||||
);
|
||||
|
||||
// ================== DELIVERY ORDER HANDLER ==================
|
||||
const handleEditDO = useCallback(
|
||||
(id: number, values?: DeliveryOrderProductFormValues) => {
|
||||
setDeliveryFormState('edit');
|
||||
const currentProducts = formik.values.delivery_order.find(
|
||||
(product) => product.id == id
|
||||
);
|
||||
setSelectedDeliveryProduct(values ?? currentProducts ?? null);
|
||||
addDOModal.openModal();
|
||||
},
|
||||
[addDOModal]
|
||||
);
|
||||
const handleAddDOClick = useCallback(() => {
|
||||
setDeliveryFormState('add');
|
||||
setSelectedDeliveryProduct(null);
|
||||
addDOModal.openModal();
|
||||
}, [addDOModal]);
|
||||
const handleAddSubmitDO = useCallback(
|
||||
async (values: DeliveryOrderProductFormValues) => {
|
||||
const newValues = {
|
||||
...values,
|
||||
id: values.id ?? Date.now(),
|
||||
};
|
||||
|
||||
setDeliveryOrderValues((prev) => [...prev, newValues]);
|
||||
addDOModal.closeModal();
|
||||
setSelectedDeliveryProduct(null);
|
||||
},
|
||||
[addDOModal]
|
||||
);
|
||||
const handleUpdateDO = useCallback(
|
||||
async (id: number, values: DeliveryOrderProductFormValues) => {
|
||||
setDeliveryOrderValues((prev) =>
|
||||
prev.map((product) =>
|
||||
product.id === id ? { ...product, ...values } : product
|
||||
)
|
||||
);
|
||||
addDOModal.closeModal();
|
||||
setSelectedDeliveryProduct(null);
|
||||
},
|
||||
[addDOModal]
|
||||
);
|
||||
const handleDeleteDO = useCallback(
|
||||
async (id: number) => {
|
||||
setDeliveryOrderValues((prev) =>
|
||||
prev.map((product) =>
|
||||
product.id === id
|
||||
? {
|
||||
...product,
|
||||
...{
|
||||
unit_price: '',
|
||||
total_weight: '',
|
||||
qty: '',
|
||||
avg_weight: '',
|
||||
total_price: '',
|
||||
delivery_date: '',
|
||||
},
|
||||
}
|
||||
: product
|
||||
)
|
||||
);
|
||||
addDOModal.closeModal();
|
||||
setSelectedDeliveryProduct(null);
|
||||
},
|
||||
[addDOModal]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
formik.setFieldValue('delivery_order', deliveryOrderValues);
|
||||
}, [deliveryOrderValues, initialValues]);
|
||||
|
||||
const grandTotal = useMemo(() => {
|
||||
return memoSalesOrder.reduce(
|
||||
(total, product) =>
|
||||
total + parseFloat((product.total_price as string) || '0'),
|
||||
0
|
||||
);
|
||||
}, [memoSalesOrder]);
|
||||
|
||||
// ===== Formik Error List =====
|
||||
const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
|
||||
|
||||
return (
|
||||
<>
|
||||
<form
|
||||
className='flex flex-col gap-4'
|
||||
onSubmit={handleFormSubmit}
|
||||
onReset={formik.handleReset}
|
||||
>
|
||||
<FormHeader
|
||||
title={`${formType == 'add' || formType == 'add_deliver' ? 'Tambah' : 'Edit'} ${formType === 'add_deliver' || formType === 'edit_deliver' ? 'Delivery' : 'Sales'} Order`}
|
||||
backUrl='/marketing'
|
||||
/>
|
||||
{/* Input Cutomer And Date */}
|
||||
<Card
|
||||
title='Informasi Order'
|
||||
className={{
|
||||
wrapper: 'bg-white w-full',
|
||||
}}
|
||||
variant='bordered'
|
||||
>
|
||||
<div className='grid sm:grid-cols-2 gap-3 mt-3'>
|
||||
<SelectInput
|
||||
label='Pelanggan'
|
||||
options={customerOptions}
|
||||
isLoading={isLoadingCustomerOptions}
|
||||
value={formik.values.customer}
|
||||
onChange={handleChangeCustomer}
|
||||
onInputChange={setInputCustomerValue}
|
||||
onMenuScrollToBottom={loadMoreCustomer}
|
||||
isError={
|
||||
formik.touched.customer_id && Boolean(formik.errors.customer_id)
|
||||
}
|
||||
errorMessage={formik.errors.customer_id}
|
||||
isClearable
|
||||
placeholder='Pilih Pelanggan'
|
||||
isDisabled={
|
||||
formType === 'add_deliver' ||
|
||||
formType === 'edit_deliver' ||
|
||||
formType === 'edit'
|
||||
}
|
||||
/>
|
||||
<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'
|
||||
readOnly={formType == 'add_deliver' || formType == 'edit_deliver'}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Input Table Repeater Sales Order */}
|
||||
<Card
|
||||
title='Informasi Produk'
|
||||
className={{
|
||||
wrapper: 'bg-white w-full',
|
||||
}}
|
||||
variant='bordered'
|
||||
>
|
||||
{/* <MemoizedSalesOrderProductTable
|
||||
formType={formType}
|
||||
data={memoSalesOrder}
|
||||
rowSelection={rowSOSelection}
|
||||
setRowSelection={setRowSOSelection}
|
||||
selectedRowIds={selectedRowSOIds}
|
||||
onDelete={handleDeleteSO}
|
||||
onEdit={handleEditSO}
|
||||
onBulkDelete={handleBulkDeleteSO}
|
||||
onAddProductClick={handleAddSOClick}
|
||||
/> */}
|
||||
</Card>
|
||||
|
||||
{/* Input Table Repeater Delivery Order */}
|
||||
{(formType == 'add_deliver' || formType == 'edit_deliver') &&
|
||||
initialValues?.sales_order &&
|
||||
initialValues?.sales_order.length > 0 && (
|
||||
<Card
|
||||
title='Informasi Pengiriman'
|
||||
className={{
|
||||
wrapper: 'bg-white w-full',
|
||||
}}
|
||||
>
|
||||
<MemoizedDeliveryOrderProductTable
|
||||
marketing={initialValues}
|
||||
formType={formType}
|
||||
data={deliveryOrderValues}
|
||||
onEdit={handleEditDO}
|
||||
onDelete={handleDeleteDO}
|
||||
onAddProductClick={handleAddDOClick}
|
||||
/>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Input Notes */}
|
||||
<div className='grid sm:grid-cols-2 gap-3'>
|
||||
<div className='flex flex-col h-full items-end gap-3'>
|
||||
<SelectInput
|
||||
label='Sales'
|
||||
options={salesOptions}
|
||||
isLoading={isLoadingSalesOptions}
|
||||
value={formik.values.sales_person}
|
||||
onChange={handleChangeSalesPerson}
|
||||
onInputChange={setInputSalesValue}
|
||||
onMenuScrollToBottom={loadMoreSales}
|
||||
isError={
|
||||
formik.touched.sales_person_id &&
|
||||
Boolean(formik.errors.sales_person_id)
|
||||
}
|
||||
errorMessage={formik.errors.sales_person_id}
|
||||
isClearable
|
||||
placeholder='Pilih Sales'
|
||||
isDisabled={
|
||||
formType === 'add_deliver' || formType === 'edit_deliver'
|
||||
}
|
||||
/>
|
||||
<DebouncedTextArea
|
||||
required
|
||||
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}
|
||||
disabled={
|
||||
formType === 'add_deliver' || formType === 'edit_deliver'
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col h-full justify-end items-end'>
|
||||
<span>Total Penjualan</span>
|
||||
<span className='text-lg font-semibold'>
|
||||
{formatCurrency(grandTotal)}{' '}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AlertErrorList formErrorList={formErrorList} onClose={close} />
|
||||
|
||||
{/* Form Actions */}
|
||||
<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.isSubmitting}
|
||||
isLoading={formik.isSubmitting}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{/* Actions button */}
|
||||
{formType == 'edit' && (
|
||||
<div className='flex flex-row justify-start'>
|
||||
<RequirePermission permissions='lti.marketing.sales_order.delete'>
|
||||
<Button
|
||||
type='button'
|
||||
color='error'
|
||||
onClick={handleDelete}
|
||||
isLoading={isLoading}
|
||||
>
|
||||
<Icon icon='mdi:trash' width={24} height={24} />
|
||||
Hapus
|
||||
</Button>
|
||||
</RequirePermission>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Modals */}
|
||||
<Modal
|
||||
ref={addSOModal.ref}
|
||||
closeOnBackdrop
|
||||
className={{
|
||||
modalBox: 'max-w-4/5 z-100',
|
||||
}}
|
||||
>
|
||||
<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={addSOModal.closeModal}
|
||||
>
|
||||
<Icon icon='mdi:close' width={20} height={20} />
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<MemoizedSalesOrderProductForm
|
||||
onSubmitForm={handleAddSubmitSO}
|
||||
initialValues={selectedMarketingProduct ?? undefined}
|
||||
exisitingValues={memoSalesOrder}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
<Modal
|
||||
ref={addDOModal.ref}
|
||||
closeOnBackdrop
|
||||
className={{
|
||||
modalBox: 'max-w-4/5 z-100',
|
||||
}}
|
||||
>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<div className='flex flex-row items-center justify-between'>
|
||||
<h3 className='text-lg font-semibold mb-4'>
|
||||
{selectedDeliveryProduct ? 'Edit' : 'Tambah'} Pengiriman
|
||||
</h3>
|
||||
<Button
|
||||
variant='ghost'
|
||||
color='error'
|
||||
className='rounded-full'
|
||||
onClick={addDOModal.closeModal}
|
||||
>
|
||||
<Icon icon='mdi:close' width={20} height={20} />
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<MemoizedDeliveryOrderProductForm
|
||||
formState={deliveryFormState}
|
||||
salesOrders={initialValues?.sales_order ?? []}
|
||||
exisitingValues={deliveryOrderValues}
|
||||
onSubmitForm={handleAddSubmitDO}
|
||||
initialValues={selectedDeliveryProduct ?? undefined}
|
||||
onUpdateForm={handleUpdateDO}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
<ConfirmationModal
|
||||
ref={deleteModal.ref}
|
||||
type='error'
|
||||
text={`Apakah anda yakin ingin menghapus data penjualan ini?`}
|
||||
secondaryButton={{
|
||||
text: 'Tidak',
|
||||
onClick: deleteModal.closeModal,
|
||||
}}
|
||||
primaryButton={{
|
||||
text: 'Ya',
|
||||
color: 'error',
|
||||
onClick: deleteMarketingHandler,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MarketingForm;
|
||||
+61
@@ -13,6 +13,30 @@ type DeliveryOrderProductSchemaType = {
|
||||
vehicle_number: string | undefined;
|
||||
delivery_date: string | undefined | null;
|
||||
do_number?: string | undefined | null; // Uncertain
|
||||
uom?: string | null | undefined;
|
||||
convertion_unit?: {
|
||||
value: string;
|
||||
label: string;
|
||||
} | null;
|
||||
weight_per_convertion?: number | null | undefined;
|
||||
price_per_convertion?: number | null | undefined;
|
||||
marketing_type?: {
|
||||
value: string;
|
||||
label: string;
|
||||
} | null;
|
||||
total_peti?: number | null | undefined;
|
||||
sisa_berat?: number | null | undefined;
|
||||
price_sisa_berat?: number | null | undefined;
|
||||
/** Harga per butir telur untuk TELUR + QTY */
|
||||
price_per_qty?: number | null | undefined;
|
||||
/** Week untuk ayam pullet */
|
||||
week?:
|
||||
| {
|
||||
value?: number;
|
||||
label?: string;
|
||||
}
|
||||
| null
|
||||
| undefined;
|
||||
};
|
||||
|
||||
export const DeliveryOrderProductSchema: Yup.ObjectSchema<DeliveryOrderProductSchemaType> =
|
||||
@@ -40,6 +64,43 @@ export const DeliveryOrderProductSchema: Yup.ObjectSchema<DeliveryOrderProductSc
|
||||
vehicle_number: Yup.string().required('Nomor Kendaraan wajib diisi!'),
|
||||
delivery_date: Yup.string().required('Tanggal Pengiriman wajib diisi!'),
|
||||
do_number: Yup.string().nullable().optional(),
|
||||
uom: Yup.string().nullable().optional().notRequired(),
|
||||
convertion_unit: Yup.object({
|
||||
value: Yup.string().required('Konversi Satuan wajib diisi!'),
|
||||
label: Yup.string().required('Konversi Satuan wajib diisi!'),
|
||||
}).nullable(),
|
||||
weight_per_convertion: Yup.number().nullable().optional().notRequired(),
|
||||
marketing_type: Yup.object({
|
||||
value: Yup.string().required('Kategori Penjualan wajib diisi!'),
|
||||
label: Yup.string().required('Kategori Penjualan wajib diisi!'),
|
||||
}).nullable(),
|
||||
price_per_convertion: Yup.number().nullable().optional().notRequired(),
|
||||
total_peti: Yup.number().nullable().optional().notRequired(),
|
||||
sisa_berat: Yup.number().nullable().optional().notRequired(),
|
||||
price_sisa_berat: Yup.number().nullable().optional().notRequired(),
|
||||
price_per_qty: Yup.number().nullable().optional().notRequired(),
|
||||
week: Yup.object({
|
||||
value: Yup.number(),
|
||||
label: Yup.string(),
|
||||
})
|
||||
.nullable()
|
||||
.default(null)
|
||||
.when('marketing_type', {
|
||||
is: (marketingType: { value: string } | null | undefined) =>
|
||||
marketingType?.value?.toLowerCase() === 'ayam_pullet',
|
||||
then: (schema) =>
|
||||
schema
|
||||
.shape({
|
||||
value: Yup.number().required(
|
||||
'Week wajib diisi untuk Ayam Pullet!'
|
||||
),
|
||||
label: Yup.string().required(
|
||||
'Week wajib diisi untuk Ayam Pullet!'
|
||||
),
|
||||
})
|
||||
.required('Week wajib diisi untuk Ayam Pullet!'),
|
||||
otherwise: (schema) => schema.optional().notRequired(),
|
||||
}),
|
||||
});
|
||||
|
||||
export type DeliveryOrderProductFormValues = Yup.InferType<
|
||||
|
||||
+619
-289
@@ -1,4 +1,4 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import {
|
||||
DeliveryOrderProductFormValues,
|
||||
DeliveryOrderProductSchema,
|
||||
@@ -8,10 +8,10 @@ import Alert from '@/components/Alert';
|
||||
import Button from '@/components/Button';
|
||||
import NumberInput from '@/components/input/NumberInput';
|
||||
import PatternInput from '@/components/input/PatternInput';
|
||||
import { formatVechicleNumber } from '@/lib/helper';
|
||||
import { formatTitleCase, formatVechicleNumber } from '@/lib/helper';
|
||||
import DateInput from '@/components/input/DateInput';
|
||||
import { BaseSalesOrder } from '@/types/api/marketing/marketing';
|
||||
import { SalesProductToFieldValues } from '@/components/pages/marketing/form/MarketingForm';
|
||||
import { SalesProductToFieldValues } from '@/components/pages/marketing/form/MarketingForm.schema';
|
||||
import * as Yup from 'yup';
|
||||
import { isResponseSuccess } from '@/lib/api-helper';
|
||||
import AlertErrorList from '@/components/helper/form/FormErrors';
|
||||
@@ -21,9 +21,13 @@ import { ProductApi } from '@/services/api/master-data';
|
||||
import StatusBadge from '@/components/helper/StatusBadge';
|
||||
import SelectInputRadio from '@/components/input/SelectInputRadio';
|
||||
import { OptionType } from '@/components/input/SelectInput';
|
||||
|
||||
const roundWeight = (value: number) => Number(value.toFixed(2));
|
||||
const roundPrice = (value: number) => Math.round(value);
|
||||
import {
|
||||
MARKETING_CONVERTION_UNIT_OPTIONS,
|
||||
MARKETING_TYPE_OPTIONS,
|
||||
} from '@/config/constant';
|
||||
import Dropdown from '@/components/Dropdown';
|
||||
import { Icon } from '@iconify/react';
|
||||
import { handleMarketingCalculation } from '@/lib/marketing-calculation';
|
||||
|
||||
const DeliveryOrderProductForm = ({
|
||||
formState,
|
||||
@@ -49,6 +53,35 @@ const DeliveryOrderProductForm = ({
|
||||
);
|
||||
const [currentInput, setCurrentInput] = useState<string>('');
|
||||
|
||||
// Check jika ada sisa berat = total_weight - (weight_per_convertion * total_peti)
|
||||
const initialSisaBerat =
|
||||
initialValues?.total_weight &&
|
||||
initialValues?.weight_per_convertion &&
|
||||
initialValues?.total_peti
|
||||
? Number(initialValues.total_weight) -
|
||||
Number(initialValues.weight_per_convertion) *
|
||||
Number(initialValues.total_peti)
|
||||
: 0;
|
||||
|
||||
const initialPricePerConvertion =
|
||||
initialValues?.total_price &&
|
||||
initialValues?.total_peti &&
|
||||
Number(initialValues.total_peti) !== 0
|
||||
? (Number(initialValues.total_price) -
|
||||
initialSisaBerat * Number(initialValues.unit_price || 0)) /
|
||||
Number(initialValues.total_peti)
|
||||
: 0;
|
||||
|
||||
const initialPriceSisaBerat =
|
||||
initialValues?.total_price && initialValues?.total_peti
|
||||
? Number(initialValues.total_price) -
|
||||
initialPricePerConvertion * Number(initialValues.total_peti)
|
||||
: 0;
|
||||
|
||||
const [hasSisaBerat, setHasSisaBerat] = useState<boolean>(
|
||||
initialSisaBerat > 0
|
||||
);
|
||||
|
||||
// ============ Fetch Data ============
|
||||
const { data: productData } = useSWR(
|
||||
selectedProduct?.value
|
||||
@@ -60,6 +93,27 @@ const DeliveryOrderProductForm = ({
|
||||
: undefined
|
||||
);
|
||||
|
||||
// Options Week dari minggu 1 - 22
|
||||
const optionsWeek = useMemo(() => {
|
||||
return Array.from({ length: 22 }, (_, i) => ({
|
||||
value: i + 1,
|
||||
label: `Week ${i + 1}`,
|
||||
}));
|
||||
}, []);
|
||||
|
||||
const options = exisitingValues
|
||||
?.map((item) => {
|
||||
if (!Boolean(item.qty)) {
|
||||
return {
|
||||
value: item.id,
|
||||
label: `${item.marketing_product?.product_warehouse?.label} - ${item.marketing_product?.kandang?.label}`,
|
||||
} as OptionType;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
})
|
||||
?.filter((item) => item != null) as OptionType[];
|
||||
|
||||
const salesOrder = salesOrders.find(
|
||||
(item) => item.id === initialValues?.marketing_product_id
|
||||
);
|
||||
@@ -77,6 +131,19 @@ const DeliveryOrderProductForm = ({
|
||||
avg_weight: initialValues?.avg_weight || undefined,
|
||||
total_price: initialValues?.total_price || undefined,
|
||||
marketing_product: initialValues?.marketing_product || undefined,
|
||||
uom: initialValues?.uom || '',
|
||||
weight_per_convertion:
|
||||
initialValues?.weight_per_convertion != null
|
||||
? Number(initialValues.weight_per_convertion)
|
||||
: null,
|
||||
price_per_convertion: initialPricePerConvertion,
|
||||
convertion_unit: initialValues?.convertion_unit || null,
|
||||
marketing_type: initialValues?.marketing_type || null,
|
||||
total_peti: initialValues?.total_peti ?? null,
|
||||
price_per_qty: initialValues?.price_per_qty ?? null,
|
||||
sisa_berat: initialSisaBerat,
|
||||
price_sisa_berat: initialPriceSisaBerat,
|
||||
week: initialValues?.week ?? null,
|
||||
},
|
||||
isInitialValid: false,
|
||||
validationSchema: Yup.object().shape({
|
||||
@@ -124,6 +191,16 @@ const DeliveryOrderProductForm = ({
|
||||
avg_weight: '',
|
||||
total_price: '',
|
||||
marketing_product: undefined,
|
||||
total_peti: null,
|
||||
price_per_qty: null,
|
||||
price_sisa_berat: null,
|
||||
sisa_berat: null,
|
||||
convertion_unit: null,
|
||||
marketing_type: null,
|
||||
weight_per_convertion: null,
|
||||
price_per_convertion: null,
|
||||
uom: '',
|
||||
week: null,
|
||||
},
|
||||
});
|
||||
// setSelectedProduct(null);
|
||||
@@ -132,94 +209,34 @@ const DeliveryOrderProductForm = ({
|
||||
const handleBlurField = (field: string) => {
|
||||
setCurrentInput(field);
|
||||
|
||||
const qty = Number(formik.values.qty || 0);
|
||||
const avgWeight = Number(formik.values.avg_weight || 0);
|
||||
const totalWeight = Number(formik.values.total_weight || 0);
|
||||
const unitPrice = Number(formik.values.unit_price || 0);
|
||||
const totalPrice = Number(formik.values.total_price || 0);
|
||||
|
||||
if (qty <= 0) return;
|
||||
|
||||
switch (field) {
|
||||
// ===== SOURCE FIELDS =====
|
||||
case 'qty': {
|
||||
if (avgWeight > 0) {
|
||||
const tw = roundWeight(qty * avgWeight);
|
||||
formik.setFieldValue('total_weight', tw);
|
||||
|
||||
// Hitung total_price berdasarkan unit_price × total_weight
|
||||
if (unitPrice > 0) {
|
||||
formik.setFieldValue('total_price', roundPrice(unitPrice * tw));
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
case 'avg_weight': {
|
||||
if (avgWeight > 0) {
|
||||
const tw = roundWeight(qty * avgWeight);
|
||||
formik.setFieldValue('total_weight', tw);
|
||||
|
||||
// Hitung total_price berdasarkan unit_price × total_weight
|
||||
if (unitPrice > 0) {
|
||||
formik.setFieldValue('total_price', roundPrice(unitPrice * tw));
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
case 'unit_price': {
|
||||
if (unitPrice > 0 && totalWeight > 0) {
|
||||
// Hitung total_price berdasarkan unit_price × total_weight
|
||||
formik.setFieldValue(
|
||||
'total_price',
|
||||
roundPrice(unitPrice * totalWeight)
|
||||
);
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
// ===== TOTAL EDITABLE =====
|
||||
case 'total_weight': {
|
||||
if (totalWeight > 0) {
|
||||
formik.setFieldValue('avg_weight', roundWeight(totalWeight / qty));
|
||||
|
||||
// Hitung ulang total_price berdasarkan unit_price × total_weight
|
||||
if (unitPrice > 0) {
|
||||
formik.setFieldValue(
|
||||
'total_price',
|
||||
roundPrice(unitPrice * totalWeight)
|
||||
);
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
case 'total_price': {
|
||||
if (totalPrice > 0 && totalWeight > 0) {
|
||||
// Hitung unit_price berdasarkan total_price / total_weight
|
||||
formik.setFieldValue(
|
||||
'unit_price',
|
||||
roundPrice(totalPrice / totalWeight)
|
||||
);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
handleMarketingCalculation(field, {
|
||||
values: formik.values,
|
||||
setFieldValue: formik.setFieldValue,
|
||||
hasSisaBerat,
|
||||
});
|
||||
};
|
||||
|
||||
const options = exisitingValues
|
||||
?.map((item) => {
|
||||
if (!Boolean(item.qty)) {
|
||||
return {
|
||||
value: item.id,
|
||||
label: `${item.marketing_product?.product_warehouse?.label} - ${item.marketing_product?.kandang?.label}`,
|
||||
} as OptionType;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
})
|
||||
?.filter((item) => item != null) as OptionType[];
|
||||
// Handler khusus untuk toggle sisa berat - langsung pakai nilai baru
|
||||
const handleSisaBeratToggle = (newHasSisaBerat: boolean) => {
|
||||
setHasSisaBerat(newHasSisaBerat);
|
||||
|
||||
if (!newHasSisaBerat) {
|
||||
// Ketika OFF - set nilai ke 0 dan recalculate tanpa sisa
|
||||
formik.setFieldValue('sisa_berat', 0);
|
||||
formik.setFieldValue('price_sisa_berat', 0);
|
||||
}
|
||||
|
||||
// Langsung trigger recalculation dengan hasSisaBerat yang baru
|
||||
handleMarketingCalculation('total_peti', {
|
||||
values: {
|
||||
...formik.values,
|
||||
sisa_berat: newHasSisaBerat ? formik.values.sisa_berat : 0,
|
||||
price_sisa_berat: newHasSisaBerat ? formik.values.price_sisa_berat : 0,
|
||||
},
|
||||
setFieldValue: formik.setFieldValue,
|
||||
hasSisaBerat: newHasSisaBerat,
|
||||
});
|
||||
};
|
||||
|
||||
const { setValues: setFormikValues } = formik;
|
||||
|
||||
@@ -229,9 +246,6 @@ const DeliveryOrderProductForm = ({
|
||||
handleResetForm();
|
||||
} else {
|
||||
setFormikValues(initialValues);
|
||||
// const value = exisitingValues?.find(
|
||||
// (item) => item.id === initialValues?.id
|
||||
// );
|
||||
if (initialValues?.marketing_product_id) {
|
||||
setSelectedProduct({
|
||||
value: initialValues?.id,
|
||||
@@ -243,7 +257,23 @@ const DeliveryOrderProductForm = ({
|
||||
}, [initialValues]);
|
||||
|
||||
// ===== Formik Error List =====
|
||||
const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
|
||||
const { formErrorList, close, handleFormSubmit } = useFormikErrorList(
|
||||
formik,
|
||||
{
|
||||
onBeforeSubmit(e) {
|
||||
e.preventDefault();
|
||||
handleBlurField(currentInput);
|
||||
formik.setFieldValue(
|
||||
'uom',
|
||||
isResponseSuccess(productData) ? productData?.data?.uom?.name : ''
|
||||
);
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
handleBlurField('week');
|
||||
}, [formik.values.week]);
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -252,214 +282,514 @@ const DeliveryOrderProductForm = ({
|
||||
onSubmit={handleFormSubmit}
|
||||
onReset={handleResetForm}
|
||||
>
|
||||
{formikErrorMessage && (
|
||||
<div onClick={() => setFormErrorMessage('')} className='my-3 w-full'>
|
||||
<Alert color='error'>{formikErrorMessage}</Alert>
|
||||
</div>
|
||||
)}
|
||||
<DateInput
|
||||
name='delivery_date'
|
||||
label='Tanggal'
|
||||
value={formik.values.delivery_date ?? undefined}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={
|
||||
formik.touched.delivery_date && Boolean(formik.errors.delivery_date)
|
||||
}
|
||||
errorMessage={formik.errors.delivery_date}
|
||||
placeholder='Pilih Tanggal'
|
||||
className={{
|
||||
inputWrapper: 'bg-white',
|
||||
}}
|
||||
required
|
||||
/>
|
||||
<SelectInputRadio
|
||||
options={options}
|
||||
label='Produk'
|
||||
placeholder='Pilih Produk'
|
||||
readOnly={formState == 'edit'}
|
||||
value={
|
||||
selectedProduct
|
||||
? ({
|
||||
value: selectedProduct?.value,
|
||||
label: exisitingValues?.find(
|
||||
(item) => item.id === selectedProduct?.value
|
||||
)?.marketing_product?.product_warehouse?.label,
|
||||
} as OptionType)
|
||||
: null
|
||||
}
|
||||
onChange={(value) => {
|
||||
const selected = value as OptionType;
|
||||
setSelectedProduct(selected);
|
||||
<div className='flex flex-col px-4 pb-4 gap-1.5 border-b border-base-content/10'>
|
||||
{formikErrorMessage && (
|
||||
<div
|
||||
onClick={() => setFormErrorMessage('')}
|
||||
className='my-3 w-full'
|
||||
>
|
||||
<Alert color='error'>{formikErrorMessage}</Alert>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tanggal Pengiriman */}
|
||||
<DateInput
|
||||
name='delivery_date'
|
||||
label='Tanggal'
|
||||
value={formik.values.delivery_date ?? undefined}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={
|
||||
formik.touched.delivery_date &&
|
||||
Boolean(formik.errors.delivery_date)
|
||||
}
|
||||
errorMessage={formik.errors.delivery_date}
|
||||
placeholder='Pilih Tanggal'
|
||||
className={{
|
||||
inputWrapper: 'bg-white',
|
||||
}}
|
||||
required
|
||||
/>
|
||||
|
||||
{/* No. Polisi */}
|
||||
<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={Boolean(formik.errors.vehicle_number)}
|
||||
errorMessage={formik.errors.vehicle_number}
|
||||
/>
|
||||
|
||||
{/* Produk */}
|
||||
<SelectInputRadio
|
||||
options={options}
|
||||
label='Produk'
|
||||
placeholder='Pilih Produk'
|
||||
readOnly={formState == 'edit'}
|
||||
value={
|
||||
selectedProduct
|
||||
? ({
|
||||
value: selectedProduct?.value,
|
||||
label: exisitingValues?.find(
|
||||
(item) => item.id === selectedProduct?.value
|
||||
)?.marketing_product?.product_warehouse?.label,
|
||||
} as OptionType)
|
||||
: null
|
||||
}
|
||||
onChange={(value) => {
|
||||
const selected = value as OptionType;
|
||||
setSelectedProduct(selected);
|
||||
|
||||
const so = salesOrders?.find(
|
||||
(item) => item.id === selected?.value
|
||||
);
|
||||
if (!so) {
|
||||
formik.setValues({
|
||||
...formik.values,
|
||||
marketing_product_id: undefined,
|
||||
marketing_product: null,
|
||||
qty: '',
|
||||
unit_price: '',
|
||||
total_price: '',
|
||||
avg_weight: '',
|
||||
total_weight: '',
|
||||
vehicle_number: '',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const so = salesOrders?.find((item) => item.id === selected?.value);
|
||||
if (!so) {
|
||||
formik.setValues({
|
||||
...formik.values,
|
||||
marketing_product_id: undefined,
|
||||
marketing_product: null,
|
||||
qty: '',
|
||||
unit_price: '',
|
||||
total_price: '',
|
||||
avg_weight: '',
|
||||
total_weight: '',
|
||||
vehicle_number: '',
|
||||
marketing_product_id: selected.value as number,
|
||||
marketing_product: SalesProductToFieldValues(so),
|
||||
qty: so.qty,
|
||||
unit_price: so.unit_price,
|
||||
total_price: so.total_price,
|
||||
avg_weight: so.avg_weight,
|
||||
total_weight: so.total_weight,
|
||||
vehicle_number: so.vehicle_number,
|
||||
});
|
||||
return;
|
||||
}}
|
||||
startAdornment={
|
||||
selectedProduct && (
|
||||
<StatusBadge
|
||||
text={
|
||||
exisitingValues?.find(
|
||||
(item) => item.id === selectedProduct?.value
|
||||
)?.marketing_product?.kandang?.label ?? ''
|
||||
}
|
||||
color='success'
|
||||
className={{
|
||||
badge: 'whitespace-nowrap w-fit font-semibold',
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
isClearable
|
||||
isError={Boolean(formik.errors.marketing_product_id)}
|
||||
errorMessage={formik.errors.marketing_product_id}
|
||||
required
|
||||
/>
|
||||
|
||||
formik.setValues({
|
||||
...formik.values,
|
||||
marketing_product_id: selected.value as number,
|
||||
marketing_product: SalesProductToFieldValues(so),
|
||||
qty: so.qty,
|
||||
unit_price: so.unit_price,
|
||||
total_price: so.total_price,
|
||||
avg_weight: so.avg_weight,
|
||||
total_weight: so.total_weight,
|
||||
vehicle_number: so.vehicle_number,
|
||||
});
|
||||
}}
|
||||
startAdornment={
|
||||
selectedProduct && (
|
||||
<StatusBadge
|
||||
text={
|
||||
exisitingValues?.find(
|
||||
(item) => item.id === selectedProduct?.value
|
||||
)?.marketing_product?.kandang?.label ?? ''
|
||||
}
|
||||
color='success'
|
||||
className={{
|
||||
badge: 'whitespace-nowrap w-fit font-semibold',
|
||||
}}
|
||||
{/* Kategori */}
|
||||
<SelectInputRadio
|
||||
required
|
||||
label='Kategori '
|
||||
options={MARKETING_TYPE_OPTIONS}
|
||||
value={formik.values.marketing_type}
|
||||
onChange={(val) => {
|
||||
formik.setFieldValue('marketing_type', val);
|
||||
}}
|
||||
isClearable
|
||||
placeholder='Pilih Kategori'
|
||||
isDisabled
|
||||
/>
|
||||
|
||||
{/* Konversi Satuan Telur */}
|
||||
{formik.values.marketing_type &&
|
||||
formik.values.marketing_type.value.toLowerCase() === 'telur' &&
|
||||
(!formik.values.convertion_unit ||
|
||||
formik.values.convertion_unit.value.toLowerCase() !== 'peti') && (
|
||||
<SelectInputRadio
|
||||
required
|
||||
label='Tipe Konversi'
|
||||
options={MARKETING_CONVERTION_UNIT_OPTIONS}
|
||||
value={formik.values.convertion_unit}
|
||||
onChange={(val) => formik.setFieldValue('convertion_unit', val)}
|
||||
isClearable
|
||||
placeholder='Pilih Konversi Satuan'
|
||||
/>
|
||||
)
|
||||
}
|
||||
isClearable
|
||||
isError={Boolean(formik.errors.marketing_product_id)}
|
||||
errorMessage={formik.errors.marketing_product_id}
|
||||
required
|
||||
/>
|
||||
)}
|
||||
{formik.values.convertion_unit &&
|
||||
formik.values.convertion_unit.value.toLowerCase() === 'peti' && (
|
||||
<div className='flex flex-col'>
|
||||
<label className='font-semibold text-xs py-2 leading-5'>
|
||||
Tipe Konversi <span className='text-error'>*</span>
|
||||
</label>
|
||||
<div className='flex items-center gap-2 border border-base-content/10 rounded-lg pe-3 text-sm text-base-content'>
|
||||
<div>
|
||||
<Dropdown
|
||||
align='start'
|
||||
direction='bottom'
|
||||
trigger={
|
||||
<div className='flex flex-row items-stretch gap-2 py-1 ps-3 text-sm'>
|
||||
<div className='py-1.5 flex items-center gap-2'>
|
||||
{formatTitleCase(
|
||||
formik.values.convertion_unit.value
|
||||
)}
|
||||
<Icon
|
||||
icon='heroicons:chevron-down-solid'
|
||||
className='my-auto'
|
||||
/>
|
||||
</div>
|
||||
<div className='w-px border-none bg-base-content/10'></div>
|
||||
</div>
|
||||
}
|
||||
className={{
|
||||
wrapper: 'relative',
|
||||
content:
|
||||
'rounded-xl mt-1 border border-base-content/5 shadow-sm overflow-hidden min-w-68.5 sm:min-w-103.25 w-full',
|
||||
}}
|
||||
>
|
||||
<ul className='rounded-lg w-full'>
|
||||
{MARKETING_CONVERTION_UNIT_OPTIONS.map((option) => (
|
||||
<li className='w-full' key={option.value}>
|
||||
<Button
|
||||
variant='ghost'
|
||||
color='none'
|
||||
className='w-full p-3 gap-3 font-medium justify-start text-sm text-base-content/50'
|
||||
onClick={() =>
|
||||
formik.setFieldValue('convertion_unit', option)
|
||||
}
|
||||
>
|
||||
<input
|
||||
type='radio'
|
||||
checked={
|
||||
formik.values.convertion_unit?.value ===
|
||||
option.value
|
||||
}
|
||||
onChange={() => null}
|
||||
className='radio radio-md radio-primary pointer-events-none'
|
||||
/>{' '}
|
||||
{option.label}
|
||||
</Button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Dropdown>
|
||||
</div>
|
||||
<input
|
||||
type='number'
|
||||
className='w-full h-full focus:outline-none appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none'
|
||||
placeholder={`Berat ${
|
||||
formik.values.convertion_unit?.value === 'peti'
|
||||
? 'kg'
|
||||
: ''
|
||||
} per ${formik.values.convertion_unit?.value}`}
|
||||
value={formik.values.weight_per_convertion ?? ''}
|
||||
onChange={(e) => {
|
||||
formik.setFieldValue(
|
||||
'weight_per_convertion',
|
||||
Number(e.target.value)
|
||||
);
|
||||
setCurrentInput(e.target.name);
|
||||
}}
|
||||
onBlur={() => handleBlurField('weight_per_convertion')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<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={Boolean(formik.errors.vehicle_number)}
|
||||
errorMessage={formik.errors.vehicle_number}
|
||||
/>
|
||||
<NumberInput
|
||||
required
|
||||
label='Kuantitas'
|
||||
name='qty'
|
||||
value={formik.values.qty}
|
||||
onChange={(e) => {
|
||||
formik.handleChange(e);
|
||||
setCurrentInput(e.target.name);
|
||||
}}
|
||||
onBlur={() => handleBlurField('qty')}
|
||||
isError={Boolean(formik.errors.qty)}
|
||||
errorMessage={formik.errors.qty}
|
||||
placeholder='Masukan Kuantitas'
|
||||
endAdornment={
|
||||
<div className='flex items-center gap-2'>
|
||||
<span className='text-sm text-gray-500'>
|
||||
{isResponseSuccess(productData)
|
||||
? productData?.data?.uom.name
|
||||
: ''}
|
||||
{/* Konversi Satuan Week Pullet */}
|
||||
{formik.values.marketing_type?.value.toLowerCase() ===
|
||||
'ayam_pullet' && (
|
||||
<SelectInputRadio
|
||||
required
|
||||
label='Minggu'
|
||||
options={optionsWeek}
|
||||
value={
|
||||
formik.values.week?.value
|
||||
? (formik.values.week as { value: number; label: string })
|
||||
: null
|
||||
}
|
||||
onChange={(val) => {
|
||||
formik.setFieldValue('week', val);
|
||||
}}
|
||||
placeholder='Pilih Week'
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Total Peti */}
|
||||
{formik.values.convertion_unit?.value.toLowerCase() === 'peti' && (
|
||||
<NumberInput
|
||||
required
|
||||
label='Total Peti'
|
||||
name='total_peti'
|
||||
value={formik.values.total_peti ?? undefined}
|
||||
onChange={(e) => {
|
||||
formik.handleChange(e);
|
||||
setCurrentInput(e.target.name);
|
||||
}}
|
||||
onBlur={() => handleBlurField('total_peti')}
|
||||
isError={
|
||||
formik.touched.total_peti && Boolean(formik.errors.total_peti)
|
||||
}
|
||||
errorMessage={formik.errors.total_peti}
|
||||
placeholder='Masukan Total Peti'
|
||||
endAdornment={
|
||||
<div className='flex items-center gap-2'>
|
||||
<span className='text-sm text-base-content/50'>Kg</span>
|
||||
</div>
|
||||
}
|
||||
bottomLabel={`1 ${formik.values.convertion_unit?.value.toLowerCase()} = ${formik.values.weight_per_convertion ?? 0} Kg`}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Avg. Bobot */}
|
||||
{formik.values.marketing_type?.value.toLowerCase() === 'trading' ||
|
||||
(formik.values.convertion_unit?.value.toLowerCase() !== 'peti' &&
|
||||
formik.values.convertion_unit?.value.toLowerCase() !== 'kg' && (
|
||||
<NumberInput
|
||||
required
|
||||
label='Avg. Bobot (Kg)'
|
||||
name='avg_weight'
|
||||
value={formik.values.avg_weight}
|
||||
onChange={(e) => {
|
||||
formik.handleChange(e);
|
||||
setCurrentInput(e.target.name);
|
||||
}}
|
||||
onBlur={() => handleBlurField('avg_weight')}
|
||||
isError={
|
||||
formik.touched.avg_weight &&
|
||||
Boolean(formik.errors.avg_weight)
|
||||
}
|
||||
errorMessage={formik.errors.avg_weight}
|
||||
placeholder='Masukan Bobot Rata-rata'
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Total Bobot */}
|
||||
{formik.values.marketing_type?.value.toLowerCase() !== 'trading' && (
|
||||
<NumberInput
|
||||
required
|
||||
label='Total Bobot (Kg)'
|
||||
name='total_weight'
|
||||
value={formik.values.total_weight}
|
||||
onChange={(e) => {
|
||||
formik.handleChange(e);
|
||||
setCurrentInput(e.target.name);
|
||||
}}
|
||||
onBlur={() => handleBlurField('total_weight')}
|
||||
isError={
|
||||
formik.touched.total_weight &&
|
||||
Boolean(formik.errors.total_weight)
|
||||
}
|
||||
errorMessage={formik.errors.total_weight}
|
||||
placeholder='Masukan Total Bobot'
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Kuantitas */}
|
||||
<NumberInput
|
||||
required
|
||||
label={
|
||||
formik.values.marketing_type &&
|
||||
formik.values.marketing_type.value.toLowerCase() === 'telur'
|
||||
? `Total Butir Telur`
|
||||
: `Total Kuantitas`
|
||||
}
|
||||
name='qty'
|
||||
value={formik.values.qty}
|
||||
onChange={(e) => {
|
||||
formik.handleChange(e);
|
||||
setCurrentInput(e.target.name);
|
||||
}}
|
||||
onBlur={() => handleBlurField('qty')}
|
||||
isError={Boolean(formik.errors.qty)}
|
||||
errorMessage={formik.errors.qty}
|
||||
placeholder='Masukan Kuantitas'
|
||||
endAdornment={
|
||||
<div className='flex items-center gap-2'>
|
||||
<span className='text-sm text-gray-500'>
|
||||
{isResponseSuccess(productData)
|
||||
? productData?.data?.uom.name
|
||||
: ''}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
bottomLabel={
|
||||
formik.values.marketing_product_id
|
||||
? 'Stok dijual: ' +
|
||||
salesOrders?.find(
|
||||
(item) => item.id === formik.values.marketing_product_id
|
||||
)?.qty +
|
||||
' ' +
|
||||
(isResponseSuccess(productData)
|
||||
? productData?.data?.uom.name
|
||||
: '')
|
||||
: ''
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Harga per convertion unit (PETI / KG) */}
|
||||
{(formik.values.convertion_unit?.value.toLowerCase() === 'peti' ||
|
||||
formik.values.convertion_unit?.value.toLowerCase() === 'kg') && (
|
||||
<NumberInput
|
||||
required
|
||||
label={`Harga / ${formik.values.convertion_unit?.label ?? 'Produk'} (Rp)`}
|
||||
name='price_per_convertion'
|
||||
value={formik.values.price_per_convertion ?? undefined}
|
||||
onChange={(e) => {
|
||||
formik.handleChange(e);
|
||||
setCurrentInput(e.target.name);
|
||||
}}
|
||||
onBlur={() => handleBlurField('price_per_convertion')}
|
||||
isError={
|
||||
formik.touched.price_per_convertion &&
|
||||
Boolean(formik.errors.price_per_convertion)
|
||||
}
|
||||
errorMessage={formik.errors.price_per_convertion}
|
||||
placeholder='Masukan Harga Satuan'
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Harga per butir untuk TELUR + QTY */}
|
||||
{formik.values.marketing_type?.value.toLowerCase() === 'telur' &&
|
||||
formik.values.convertion_unit?.value.toLowerCase() === 'qty' && (
|
||||
<NumberInput
|
||||
required
|
||||
label='Harga / Butir (Rp)'
|
||||
name='price_per_qty'
|
||||
value={formik.values.price_per_qty ?? undefined}
|
||||
onChange={(e) => {
|
||||
formik.setFieldValue('price_per_qty', Number(e.target.value));
|
||||
setCurrentInput('price_per_qty');
|
||||
}}
|
||||
onBlur={() => handleBlurField('price_per_qty')}
|
||||
isError={
|
||||
formik.touched.price_per_qty &&
|
||||
Boolean(formik.errors.price_per_qty)
|
||||
}
|
||||
errorMessage={formik.errors.price_per_qty}
|
||||
placeholder='Masukan Harga per Butir'
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Harga Satuan */}
|
||||
{formik.values.convertion_unit?.value.toLowerCase() !== 'peti' &&
|
||||
formik.values.convertion_unit?.value.toLowerCase() !== 'kg' && (
|
||||
<NumberInput
|
||||
required
|
||||
label={`Harga / ${isResponseSuccess(productData) ? productData?.data?.uom?.name : 'Produk'} (Rp)`}
|
||||
name='unit_price'
|
||||
value={formik.values.unit_price}
|
||||
onChange={(e) => {
|
||||
formik.handleChange(e);
|
||||
setCurrentInput(e.target.name);
|
||||
}}
|
||||
onBlur={() => handleBlurField('unit_price')}
|
||||
isError={Boolean(formik.errors.unit_price)}
|
||||
errorMessage={formik.errors.unit_price}
|
||||
placeholder='Masukan Harga Satuan'
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Sisa kg diluar peti */}
|
||||
{formik.values.convertion_unit?.value.toLowerCase() === 'peti' && (
|
||||
<div className='flex flex-col'>
|
||||
<div className='py-2 gap-3 flex items-center'>
|
||||
<input
|
||||
type='checkbox'
|
||||
name='sisa_berat_toggle'
|
||||
checked={hasSisaBerat}
|
||||
onChange={() => handleSisaBeratToggle(!hasSisaBerat)}
|
||||
className='toggle toggle-primary rounded-full before:rounded-full before:bg-base-content/50 border-base-content/50 checked:border-primary checked:bg-primary checked:before:bg-base-100'
|
||||
/>
|
||||
<label className='text-sm text-base-content/50'>
|
||||
Apakah ada sisa berat di luar peti?
|
||||
</label>
|
||||
</div>
|
||||
<span className='text-xs text-base-content/30 leading-4 pt-1.5'>
|
||||
Jika ada, masukan berat di luar peti
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
bottomLabel={
|
||||
formik.values.marketing_product_id
|
||||
? 'Stok dijual: ' +
|
||||
salesOrders?.find(
|
||||
(item) => item.id === formik.values.marketing_product_id
|
||||
)?.qty +
|
||||
' ' +
|
||||
(isResponseSuccess(productData)
|
||||
? productData?.data?.uom.name
|
||||
: '')
|
||||
: ''
|
||||
}
|
||||
/>
|
||||
<NumberInput
|
||||
required
|
||||
label={`Harga / ${isResponseSuccess(productData) ? productData?.data?.uom?.name : 'Produk'} (Rp)`}
|
||||
name='unit_price'
|
||||
value={formik.values.unit_price}
|
||||
onChange={(e) => {
|
||||
formik.handleChange(e);
|
||||
setCurrentInput(e.target.name);
|
||||
}}
|
||||
onBlur={() => handleBlurField('unit_price')}
|
||||
isError={Boolean(formik.errors.unit_price)}
|
||||
errorMessage={formik.errors.unit_price}
|
||||
placeholder='Masukan Harga Satuan'
|
||||
/>
|
||||
<NumberInput
|
||||
required
|
||||
label='Avg. Bobot (Kg)'
|
||||
name='avg_weight'
|
||||
value={formik.values.avg_weight}
|
||||
onChange={(e) => {
|
||||
formik.handleChange(e);
|
||||
setCurrentInput(e.target.name);
|
||||
}}
|
||||
onBlur={() => handleBlurField('avg_weight')}
|
||||
isError={Boolean(formik.errors.avg_weight)}
|
||||
errorMessage={formik.errors.avg_weight}
|
||||
placeholder='Masukan Bobot Rata-rata'
|
||||
/>
|
||||
<NumberInput
|
||||
required
|
||||
label='Total Bobot (Kg)'
|
||||
name='total_weight'
|
||||
value={formik.values.total_weight}
|
||||
onChange={(e) => {
|
||||
formik.handleChange(e);
|
||||
setCurrentInput(e.target.name);
|
||||
}}
|
||||
onBlur={() => handleBlurField('total_weight')}
|
||||
isError={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={(e) => {
|
||||
formik.handleChange(e);
|
||||
setCurrentInput(e.target.name);
|
||||
}}
|
||||
onBlur={() => handleBlurField('total_price')}
|
||||
isError={Boolean(formik.errors.total_price)}
|
||||
errorMessage={formik.errors.total_price}
|
||||
placeholder='Masukan Total Penjualan'
|
||||
/>
|
||||
{hasSisaBerat && (
|
||||
<>
|
||||
<NumberInput
|
||||
required
|
||||
label='Sisa Berat (Kg)'
|
||||
name='sisa_berat'
|
||||
value={formik.values.sisa_berat ?? undefined}
|
||||
onChange={(e) => {
|
||||
formik.handleChange(e);
|
||||
setCurrentInput(e.target.name);
|
||||
}}
|
||||
onBlur={() => handleBlurField('sisa_berat')}
|
||||
isError={
|
||||
formik.touched.sisa_berat && Boolean(formik.errors.sisa_berat)
|
||||
}
|
||||
errorMessage={formik.errors.sisa_berat}
|
||||
placeholder='Masukan Sisa Berat'
|
||||
/>
|
||||
<NumberInput
|
||||
required
|
||||
label='Harga Sisa Berat (Rp)'
|
||||
name='price_sisa_berat'
|
||||
value={formik.values.price_sisa_berat ?? undefined}
|
||||
onChange={(e) => {
|
||||
formik.handleChange(e);
|
||||
setCurrentInput(e.target.name);
|
||||
}}
|
||||
onBlur={() => handleBlurField('price_sisa_berat')}
|
||||
isError={
|
||||
formik.touched.price_sisa_berat &&
|
||||
Boolean(formik.errors.price_sisa_berat)
|
||||
}
|
||||
errorMessage={formik.errors.price_sisa_berat}
|
||||
placeholder='Masukan Harga Sisa Berat'
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
<AlertErrorList
|
||||
className={{
|
||||
alert: 'w-full my-4',
|
||||
}}
|
||||
formErrorList={formErrorList}
|
||||
onClose={close}
|
||||
/>
|
||||
{/* Total Penjualan */}
|
||||
<NumberInput
|
||||
required
|
||||
label='Total Penjualan (Rp)'
|
||||
name='total_price'
|
||||
value={formik.values.total_price}
|
||||
onChange={(e) => {
|
||||
formik.handleChange(e);
|
||||
setCurrentInput(e.target.name);
|
||||
}}
|
||||
onBlur={() => handleBlurField('total_price')}
|
||||
isError={
|
||||
formik.touched.total_price && Boolean(formik.errors.total_price)
|
||||
}
|
||||
errorMessage={formik.errors.total_price}
|
||||
placeholder='Masukan Total Penjualan'
|
||||
/>
|
||||
|
||||
<AlertErrorList
|
||||
className={{
|
||||
alert: 'w-full my-4',
|
||||
}}
|
||||
formErrorList={formErrorList}
|
||||
onClose={close}
|
||||
/>
|
||||
</div>
|
||||
<div className='h-18' />
|
||||
|
||||
<div className='absolute sm:w-full bottom-0 right-0'>
|
||||
<div className='absolute sm:w-full bottom-0 right-0 p-4'>
|
||||
<Button
|
||||
type='submit'
|
||||
isLoading={formik.isSubmitting}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
|
||||
import * as Yup from 'yup';
|
||||
|
||||
type SalesOrderProductSchemaType = {
|
||||
@@ -11,6 +12,7 @@ type SalesOrderProductSchemaType = {
|
||||
value: number;
|
||||
label: string;
|
||||
} | null;
|
||||
product_warehouse_data?: ProductWarehouse | null | undefined;
|
||||
product_warehouse_id?: number;
|
||||
unit_price: string | number | undefined;
|
||||
total_weight: string | number | undefined;
|
||||
@@ -19,6 +21,29 @@ type SalesOrderProductSchemaType = {
|
||||
total_price: string | number | undefined;
|
||||
vehicle_number?: string | undefined;
|
||||
uom?: string | null | undefined;
|
||||
convertion_unit?: {
|
||||
value: string;
|
||||
label: string;
|
||||
} | null;
|
||||
weight_per_convertion?: number | null | undefined;
|
||||
price_per_convertion?: number | null | undefined;
|
||||
marketing_type?: {
|
||||
value: string;
|
||||
label: string;
|
||||
} | null;
|
||||
total_peti?: number | null | undefined;
|
||||
sisa_berat?: number | null | undefined;
|
||||
price_sisa_berat?: number | null | undefined;
|
||||
/** Harga per butir telur untuk TELUR + QTY */
|
||||
price_per_qty?: number | null | undefined;
|
||||
/** Week untuk ayam pullet */
|
||||
week?:
|
||||
| {
|
||||
value?: number;
|
||||
label?: string;
|
||||
}
|
||||
| null
|
||||
| undefined;
|
||||
};
|
||||
|
||||
export const SalesOrderProductSchema: Yup.ObjectSchema<SalesOrderProductSchemaType> =
|
||||
@@ -40,6 +65,10 @@ export const SalesOrderProductSchema: Yup.ObjectSchema<SalesOrderProductSchemaTy
|
||||
.required('Produk wajib diisi!'),
|
||||
label: Yup.string().required('Produk wajib diisi!'),
|
||||
}).nullable(),
|
||||
product_warehouse_data: Yup.mixed<ProductWarehouse>()
|
||||
.nullable()
|
||||
.optional()
|
||||
.notRequired(),
|
||||
product_warehouse_id: Yup.number()
|
||||
.min(1, 'Produk wajib diisi!')
|
||||
.required('Produk wajib diisi!'),
|
||||
@@ -59,6 +88,42 @@ export const SalesOrderProductSchema: Yup.ObjectSchema<SalesOrderProductSchemaTy
|
||||
.min(1, 'Total Penjualan wajib diisi!')
|
||||
.required('Total Penjualan wajib diisi!'),
|
||||
uom: Yup.string().nullable().optional().notRequired(),
|
||||
convertion_unit: Yup.object({
|
||||
value: Yup.string().required('Konversi Satuan wajib diisi!'),
|
||||
label: Yup.string().required('Konversi Satuan wajib diisi!'),
|
||||
}).nullable(),
|
||||
weight_per_convertion: Yup.number().nullable().optional().notRequired(),
|
||||
marketing_type: Yup.object({
|
||||
value: Yup.string().required('Kategori Penjualan wajib diisi!'),
|
||||
label: Yup.string().required('Kategori Penjualan wajib diisi!'),
|
||||
}).nullable(),
|
||||
price_per_convertion: Yup.number().nullable().optional().notRequired(),
|
||||
total_peti: Yup.number().nullable().optional().notRequired(),
|
||||
sisa_berat: Yup.number().nullable().optional().notRequired(),
|
||||
price_sisa_berat: Yup.number().nullable().optional().notRequired(),
|
||||
price_per_qty: Yup.number().nullable().optional().notRequired(),
|
||||
week: Yup.object({
|
||||
value: Yup.number(),
|
||||
label: Yup.string(),
|
||||
})
|
||||
.nullable()
|
||||
.default(null)
|
||||
.when('marketing_type', {
|
||||
is: (marketingType: { value: string } | null | undefined) =>
|
||||
marketingType?.value?.toLowerCase() === 'ayam_pullet',
|
||||
then: (schema) =>
|
||||
schema
|
||||
.shape({
|
||||
value: Yup.number().required(
|
||||
'Week wajib diisi untuk Ayam Pullet!'
|
||||
),
|
||||
label: Yup.string().required(
|
||||
'Week wajib diisi untuk Ayam Pullet!'
|
||||
),
|
||||
})
|
||||
.required('Week wajib diisi untuk Ayam Pullet!'),
|
||||
otherwise: (schema) => schema.optional().notRequired(),
|
||||
}),
|
||||
});
|
||||
|
||||
export type SalesOrderProductFormValues = Yup.InferType<
|
||||
|
||||
+568
-270
@@ -5,7 +5,7 @@ import {
|
||||
SalesOrderProductFormValues,
|
||||
SalesOrderProductSchema,
|
||||
} from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema';
|
||||
import { RefObject, useMemo, useState } from 'react';
|
||||
import { RefObject, useEffect, useMemo, useState } from 'react';
|
||||
import { OptionType, useSelect } from '@/components/input/SelectInput';
|
||||
import { Kandang } from '@/types/api/master-data/kandang';
|
||||
import { WarehouseApi } from '@/services/api/master-data';
|
||||
@@ -14,15 +14,23 @@ import { ProductWarehouseApi } from '@/services/api/inventory';
|
||||
import NumberInput from '@/components/input/NumberInput';
|
||||
import Button from '@/components/Button';
|
||||
import { isResponseSuccess } from '@/lib/api-helper';
|
||||
import { formatNumber, formatVechicleNumber } from '@/lib/helper';
|
||||
import {
|
||||
formatNumber,
|
||||
formatTitleCase,
|
||||
formatVechicleNumber,
|
||||
} from '@/lib/helper';
|
||||
import PatternInput from '@/components/input/PatternInput';
|
||||
import Alert from '@/components/Alert';
|
||||
import AlertErrorList from '@/components/helper/form/FormErrors';
|
||||
import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
|
||||
import SelectInputRadio from '@/components/input/SelectInputRadio';
|
||||
|
||||
const roundWeight = (value: number) => Number(value.toFixed(2));
|
||||
const roundPrice = (value: number) => Math.round(value);
|
||||
import {
|
||||
MARKETING_CONVERTION_UNIT_OPTIONS,
|
||||
MARKETING_TYPE_OPTIONS,
|
||||
} from '@/config/constant';
|
||||
import { Icon } from '@iconify/react';
|
||||
import Dropdown from '@/components/Dropdown';
|
||||
import { handleMarketingCalculation } from '@/lib/marketing-calculation';
|
||||
|
||||
const SalesOrderProductForm = ({
|
||||
initialValues,
|
||||
@@ -42,6 +50,35 @@ const SalesOrderProductForm = ({
|
||||
const [selectedProductWarehouse, setSelectedProductWarehouse] =
|
||||
useState<ProductWarehouse | null>(null);
|
||||
|
||||
// Check jika ada sisa berat = total_weight - (weight_per_convertion * total_peti)
|
||||
const initialSisaBerat =
|
||||
initialValues?.total_weight &&
|
||||
initialValues?.weight_per_convertion &&
|
||||
initialValues?.total_peti
|
||||
? Number(initialValues.total_weight) -
|
||||
Number(initialValues.weight_per_convertion) *
|
||||
Number(initialValues.total_peti)
|
||||
: 0;
|
||||
|
||||
const initialPricePerConvertion =
|
||||
initialValues?.total_price &&
|
||||
initialValues?.total_peti &&
|
||||
Number(initialValues.total_peti) !== 0
|
||||
? (Number(initialValues.total_price) -
|
||||
initialSisaBerat * Number(initialValues.unit_price || 0)) /
|
||||
Number(initialValues.total_peti)
|
||||
: 0;
|
||||
|
||||
const initialPriceSisaBerat =
|
||||
initialValues?.total_price && initialValues?.total_peti
|
||||
? Number(initialValues.total_price) -
|
||||
initialPricePerConvertion * Number(initialValues.total_peti)
|
||||
: 0;
|
||||
|
||||
const [hasSisaBerat, setHasSisaBerat] = useState<boolean>(
|
||||
initialSisaBerat > 0
|
||||
);
|
||||
|
||||
// ============ Formik ============
|
||||
const formik = useFormik<SalesOrderProductFormValues>({
|
||||
enableReinitialize: true,
|
||||
@@ -57,6 +94,18 @@ const SalesOrderProductForm = ({
|
||||
avg_weight: initialValues?.avg_weight || '',
|
||||
total_price: initialValues?.total_price || '',
|
||||
uom: initialValues?.uom || '',
|
||||
weight_per_convertion:
|
||||
initialValues?.weight_per_convertion != null
|
||||
? Number(initialValues.weight_per_convertion)
|
||||
: null,
|
||||
price_per_convertion: initialPricePerConvertion,
|
||||
convertion_unit: initialValues?.convertion_unit || null,
|
||||
marketing_type: initialValues?.marketing_type || null,
|
||||
total_peti: initialValues?.total_peti ?? null,
|
||||
price_per_qty: initialValues?.price_per_qty ?? null,
|
||||
sisa_berat: initialSisaBerat,
|
||||
price_sisa_berat: initialPriceSisaBerat,
|
||||
week: initialValues?.week ?? null,
|
||||
},
|
||||
validationSchema: SalesOrderProductSchema,
|
||||
onSubmit: async (values) => {
|
||||
@@ -76,6 +125,14 @@ const SalesOrderProductForm = ({
|
||||
loadMore: loadMoreKandang,
|
||||
} = useSelect<Kandang>(WarehouseApi.basePath, 'id', 'name');
|
||||
|
||||
// Options Week dari minggu 1 - 22
|
||||
const optionsWeek = useMemo(() => {
|
||||
return Array.from({ length: 22 }, (_, i) => ({
|
||||
value: i + 1,
|
||||
label: `Week ${i + 1}`,
|
||||
}));
|
||||
}, []);
|
||||
|
||||
const {
|
||||
options: warehouseSourceOptions,
|
||||
rawData: warehouseSourceRawData,
|
||||
@@ -89,6 +146,7 @@ const SalesOrderProductForm = ({
|
||||
'',
|
||||
{
|
||||
warehouse_id: formik.values.kandang_id?.toString() ?? '',
|
||||
type: formik.values.marketing_type?.value.toLocaleUpperCase() ?? '',
|
||||
}
|
||||
);
|
||||
|
||||
@@ -121,14 +179,18 @@ const SalesOrderProductForm = ({
|
||||
);
|
||||
setSelectedProductWarehouse(productWarehouse || null);
|
||||
formik.setFieldValue('qty', productWarehouse?.quantity);
|
||||
formik.setFieldValue('uom', productWarehouse?.product?.uom?.name || '');
|
||||
handleBlurField('qty');
|
||||
} else {
|
||||
formik.setFieldValue('qty', '');
|
||||
formik.setFieldValue('uom', '');
|
||||
}
|
||||
};
|
||||
|
||||
const handleResetForm = () => {
|
||||
setFormErrorMessage('');
|
||||
setHasSisaBerat(false);
|
||||
setSelectedProductWarehouse(null);
|
||||
formik.resetForm({
|
||||
values: {
|
||||
vehicle_number: '',
|
||||
@@ -141,6 +203,16 @@ const SalesOrderProductForm = ({
|
||||
qty: '',
|
||||
avg_weight: '',
|
||||
total_price: '',
|
||||
total_peti: null,
|
||||
price_per_qty: null,
|
||||
price_sisa_berat: null,
|
||||
sisa_berat: null,
|
||||
convertion_unit: null,
|
||||
marketing_type: null,
|
||||
weight_per_convertion: null,
|
||||
price_per_convertion: null,
|
||||
uom: '',
|
||||
week: null,
|
||||
},
|
||||
});
|
||||
};
|
||||
@@ -148,113 +220,33 @@ const SalesOrderProductForm = ({
|
||||
const handleBlurField = (field: string) => {
|
||||
setCurrentInput(field);
|
||||
|
||||
const qty = Number(formik.values.qty || 0);
|
||||
const avgWeight = Number(formik.values.avg_weight || 0);
|
||||
const totalWeight = Number(formik.values.total_weight || 0);
|
||||
const unitPrice = Number(formik.values.unit_price || 0);
|
||||
const totalPrice = Number(formik.values.total_price || 0);
|
||||
handleMarketingCalculation(field, {
|
||||
values: formik.values,
|
||||
setFieldValue: formik.setFieldValue,
|
||||
hasSisaBerat,
|
||||
});
|
||||
};
|
||||
|
||||
if (qty <= 0) return;
|
||||
// Handler khusus untuk toggle sisa berat - langsung pakai nilai baru
|
||||
const handleSisaBeratToggle = (newHasSisaBerat: boolean) => {
|
||||
setHasSisaBerat(newHasSisaBerat);
|
||||
|
||||
// Cek apakah produk memiliki flag OVK atau PAKAN
|
||||
const productFlags = selectedProductWarehouse?.product?.flags || [];
|
||||
const isOvkOrPakan =
|
||||
productFlags.includes('OVK') || productFlags.includes('PAKAN');
|
||||
|
||||
switch (field) {
|
||||
// ===== SOURCE FIELDS =====
|
||||
case 'qty': {
|
||||
if (avgWeight > 0) {
|
||||
const tw = roundWeight(qty * avgWeight);
|
||||
formik.setFieldValue('total_weight', tw);
|
||||
|
||||
// Hitung total_price berdasarkan flag produk
|
||||
if (unitPrice > 0) {
|
||||
if (isOvkOrPakan) {
|
||||
// Untuk OVK/PAKAN: total_price = qty × unit_price
|
||||
formik.setFieldValue('total_price', roundPrice(qty * unitPrice));
|
||||
} else {
|
||||
// Untuk produk lain: total_price = unit_price × total_weight
|
||||
formik.setFieldValue('total_price', roundPrice(unitPrice * tw));
|
||||
}
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
case 'avg_weight': {
|
||||
if (avgWeight > 0) {
|
||||
const tw = roundWeight(qty * avgWeight);
|
||||
formik.setFieldValue('total_weight', tw);
|
||||
|
||||
// Hitung total_price berdasarkan flag produk
|
||||
if (unitPrice > 0) {
|
||||
if (isOvkOrPakan) {
|
||||
// Untuk OVK/PAKAN: total_price = qty × unit_price
|
||||
formik.setFieldValue('total_price', roundPrice(qty * unitPrice));
|
||||
} else {
|
||||
// Untuk produk lain: total_price = unit_price × total_weight
|
||||
formik.setFieldValue('total_price', roundPrice(unitPrice * tw));
|
||||
}
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
case 'unit_price': {
|
||||
if (unitPrice > 0) {
|
||||
if (isOvkOrPakan) {
|
||||
// Untuk OVK/PAKAN: total_price = qty × unit_price
|
||||
formik.setFieldValue('total_price', roundPrice(qty * unitPrice));
|
||||
} else if (totalWeight > 0) {
|
||||
// Untuk produk lain: total_price = unit_price × total_weight
|
||||
formik.setFieldValue(
|
||||
'total_price',
|
||||
roundPrice(unitPrice * totalWeight)
|
||||
);
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
// ===== TOTAL EDITABLE =====
|
||||
case 'total_weight': {
|
||||
if (totalWeight > 0) {
|
||||
formik.setFieldValue('avg_weight', roundWeight(totalWeight / qty));
|
||||
|
||||
// Hitung ulang total_price berdasarkan flag produk
|
||||
if (unitPrice > 0) {
|
||||
if (isOvkOrPakan) {
|
||||
// Untuk OVK/PAKAN: total_price = qty × unit_price
|
||||
formik.setFieldValue('total_price', roundPrice(qty * unitPrice));
|
||||
} else {
|
||||
// Untuk produk lain: total_price = unit_price × total_weight
|
||||
formik.setFieldValue(
|
||||
'total_price',
|
||||
roundPrice(unitPrice * totalWeight)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
case 'total_price': {
|
||||
if (totalPrice > 0) {
|
||||
if (isOvkOrPakan && qty > 0) {
|
||||
// Untuk OVK/PAKAN: unit_price = total_price / qty
|
||||
formik.setFieldValue('unit_price', roundPrice(totalPrice / qty));
|
||||
} else if (totalWeight > 0) {
|
||||
// Untuk produk lain: unit_price = total_price / total_weight
|
||||
formik.setFieldValue(
|
||||
'unit_price',
|
||||
roundPrice(totalPrice / totalWeight)
|
||||
);
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
if (!newHasSisaBerat) {
|
||||
// Ketika OFF - set nilai ke 0 dan recalculate tanpa sisa
|
||||
formik.setFieldValue('sisa_berat', 0);
|
||||
formik.setFieldValue('price_sisa_berat', 0);
|
||||
}
|
||||
|
||||
// Langsung trigger recalculation dengan hasSisaBerat yang baru
|
||||
handleMarketingCalculation('total_peti', {
|
||||
values: {
|
||||
...formik.values,
|
||||
sisa_berat: newHasSisaBerat ? formik.values.sisa_berat : 0,
|
||||
price_sisa_berat: newHasSisaBerat ? formik.values.price_sisa_berat : 0,
|
||||
},
|
||||
setFieldValue: formik.setFieldValue,
|
||||
hasSisaBerat: newHasSisaBerat,
|
||||
});
|
||||
};
|
||||
|
||||
// ===== Formik Error List =====
|
||||
@@ -272,6 +264,10 @@ const SalesOrderProductForm = ({
|
||||
}
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
handleBlurField('week');
|
||||
}, [formik.values.week]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<form
|
||||
@@ -279,174 +275,476 @@ const SalesOrderProductForm = ({
|
||||
onSubmit={handleFormSubmit}
|
||||
onReset={handleResetForm}
|
||||
>
|
||||
{formErrorMessage && (
|
||||
<div onClick={() => setFormErrorMessage('')} className='my-3 w-full'>
|
||||
<Alert color='error'>
|
||||
{formErrorMessage ? formErrorMessage : ''}
|
||||
</Alert>
|
||||
</div>
|
||||
)}
|
||||
<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}
|
||||
/>
|
||||
<SelectInputRadio
|
||||
required
|
||||
label='Kandang'
|
||||
options={kandangSourceOptions}
|
||||
isLoading={isLoadingKandangSourceOptions}
|
||||
value={formik.values.kandang}
|
||||
onChange={kandangChangeHandler}
|
||||
isClearable
|
||||
onInputChange={setKandangInputValue}
|
||||
onMenuScrollToBottom={loadMoreKandang}
|
||||
isError={
|
||||
formik.touched.kandang_id && Boolean(formik.errors.kandang_id)
|
||||
}
|
||||
errorMessage={formik.errors.kandang_id}
|
||||
placeholder='Pilih Kandang'
|
||||
/>
|
||||
<SelectInputRadio
|
||||
required
|
||||
label='Produk'
|
||||
options={productOptionsFiltered}
|
||||
isLoading={isLoadingWarehouseSourceOptions}
|
||||
value={formik.values.product_warehouse}
|
||||
onChange={warehouseChangeHandler}
|
||||
onInputChange={setWarehouseInputValue}
|
||||
onMenuScrollToBottom={loadMoreWarehouse}
|
||||
isClearable
|
||||
placeholder={
|
||||
formik.values.kandang_id
|
||||
? productOptionsFiltered.length == 0
|
||||
? 'Tidak ada produk yang tersedia'
|
||||
: 'Pilih produk'
|
||||
: 'Pilih Kandang Terlebih Dahulu'
|
||||
}
|
||||
isDisabled={!formik.values.kandang_id}
|
||||
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={(e) => {
|
||||
formik.handleChange(e);
|
||||
setCurrentInput(e.target.name);
|
||||
}}
|
||||
onBlur={() => handleBlurField('qty')}
|
||||
isError={formik.touched.qty && Boolean(formik.errors.qty)}
|
||||
errorMessage={formik.errors.qty}
|
||||
placeholder='Masukan Kuantitas'
|
||||
endAdornment={
|
||||
<div className='flex items-center gap-2'>
|
||||
<span className='text-sm text-gray-500'>
|
||||
{selectedProductWarehouse?.product?.uom?.name}
|
||||
<div className='flex flex-col gap-1.5 p-4 border-b border-base-content/10'>
|
||||
{formErrorMessage && (
|
||||
<div
|
||||
onClick={() => setFormErrorMessage('')}
|
||||
className='my-3 w-full'
|
||||
>
|
||||
<Alert color='error'>
|
||||
{formErrorMessage ? formErrorMessage : ''}
|
||||
</Alert>
|
||||
</div>
|
||||
)}
|
||||
{/* Nomor Polisi */}
|
||||
<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}
|
||||
/>
|
||||
|
||||
{/* Gudang */}
|
||||
<SelectInputRadio
|
||||
required
|
||||
label='Gudang'
|
||||
options={kandangSourceOptions}
|
||||
isLoading={isLoadingKandangSourceOptions}
|
||||
value={formik.values.kandang}
|
||||
onChange={kandangChangeHandler}
|
||||
isClearable
|
||||
onInputChange={setKandangInputValue}
|
||||
onMenuScrollToBottom={loadMoreKandang}
|
||||
isError={
|
||||
formik.touched.kandang_id && Boolean(formik.errors.kandang_id)
|
||||
}
|
||||
errorMessage={formik.errors.kandang_id}
|
||||
placeholder='Pilih Gudang'
|
||||
/>
|
||||
|
||||
{/* Kategori */}
|
||||
<SelectInputRadio
|
||||
required
|
||||
label='Kategori '
|
||||
options={MARKETING_TYPE_OPTIONS}
|
||||
value={formik.values.marketing_type}
|
||||
onChange={(val) => {
|
||||
formik.setFieldValue('marketing_type', val);
|
||||
warehouseChangeHandler(null);
|
||||
formik.setFieldValue('product_warehouse', null);
|
||||
formik.setFieldValue('product_warehouse_id', null);
|
||||
formik.setFieldValue('convertion_unit', null);
|
||||
formik.setFieldValue('weight_per_convertion', null);
|
||||
formik.setFieldValue('total_peti', null);
|
||||
}}
|
||||
isClearable
|
||||
placeholder='Pilih Kategori'
|
||||
/>
|
||||
|
||||
{/* Produk */}
|
||||
<SelectInputRadio
|
||||
required
|
||||
label='Produk'
|
||||
options={productOptionsFiltered}
|
||||
isLoading={isLoadingWarehouseSourceOptions}
|
||||
value={formik.values.product_warehouse}
|
||||
onChange={warehouseChangeHandler}
|
||||
onInputChange={setWarehouseInputValue}
|
||||
onMenuScrollToBottom={loadMoreWarehouse}
|
||||
isClearable
|
||||
placeholder={
|
||||
formik.values.kandang_id
|
||||
? productOptionsFiltered.length == 0
|
||||
? 'Tidak ada produk yang tersedia'
|
||||
: 'Pilih produk'
|
||||
: 'Pilih Kandang Terlebih Dahulu'
|
||||
}
|
||||
isDisabled={!formik.values.kandang_id}
|
||||
isError={
|
||||
formik.touched.product_warehouse_id &&
|
||||
Boolean(formik.errors.product_warehouse_id)
|
||||
}
|
||||
errorMessage={formik.errors.product_warehouse_id}
|
||||
/>
|
||||
|
||||
{/* Konversi Satuan Telur */}
|
||||
{formik.values.marketing_type &&
|
||||
formik.values.marketing_type.value.toLowerCase() === 'telur' &&
|
||||
(!formik.values.convertion_unit ||
|
||||
formik.values.convertion_unit.value.toLowerCase() !== 'peti') && (
|
||||
<SelectInputRadio
|
||||
required
|
||||
label='Tipe Konversi'
|
||||
options={MARKETING_CONVERTION_UNIT_OPTIONS}
|
||||
value={formik.values.convertion_unit}
|
||||
onChange={(val) => formik.setFieldValue('convertion_unit', val)}
|
||||
isClearable
|
||||
placeholder='Pilih Konversi Satuan'
|
||||
/>
|
||||
)}
|
||||
{formik.values.convertion_unit &&
|
||||
formik.values.convertion_unit.value.toLowerCase() === 'peti' && (
|
||||
<div className='flex flex-col'>
|
||||
<label className='font-semibold text-xs py-2 leading-5'>
|
||||
Tipe Konversi <span className='text-error'>*</span>
|
||||
</label>
|
||||
<div className='flex items-center gap-2 border border-base-content/10 rounded-lg pe-3 text-sm text-base-content'>
|
||||
<div>
|
||||
<Dropdown
|
||||
align='start'
|
||||
direction='bottom'
|
||||
trigger={
|
||||
<div className='flex flex-row items-stretch gap-2 py-1 ps-3 text-sm'>
|
||||
<div className='py-1.5 flex items-center gap-2'>
|
||||
{formatTitleCase(
|
||||
formik.values.convertion_unit.value
|
||||
)}
|
||||
<Icon
|
||||
icon='heroicons:chevron-down-solid'
|
||||
className='my-auto'
|
||||
/>
|
||||
</div>
|
||||
<div className='w-px border-none bg-base-content/10'></div>
|
||||
</div>
|
||||
}
|
||||
className={{
|
||||
wrapper: 'relative',
|
||||
content:
|
||||
'rounded-xl mt-1 border border-base-content/5 shadow-sm overflow-hidden min-w-68.5 sm:min-w-103.25 w-full',
|
||||
}}
|
||||
>
|
||||
<ul className='rounded-lg w-full'>
|
||||
{MARKETING_CONVERTION_UNIT_OPTIONS.map((option) => (
|
||||
<li className='w-full' key={option.value}>
|
||||
<Button
|
||||
variant='ghost'
|
||||
color='none'
|
||||
className='w-full p-3 gap-3 font-medium justify-start text-sm text-base-content/50'
|
||||
onClick={() =>
|
||||
formik.setFieldValue('convertion_unit', option)
|
||||
}
|
||||
>
|
||||
<input
|
||||
type='radio'
|
||||
checked={
|
||||
formik.values.convertion_unit?.value ===
|
||||
option.value
|
||||
}
|
||||
onChange={() => null}
|
||||
className='radio radio-md radio-primary pointer-events-none'
|
||||
/>{' '}
|
||||
{option.label}
|
||||
</Button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Dropdown>
|
||||
</div>
|
||||
<input
|
||||
type='number'
|
||||
className='w-full h-full focus:outline-none appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none'
|
||||
placeholder={`Berat ${
|
||||
formik.values.convertion_unit?.value === 'peti'
|
||||
? 'kg'
|
||||
: ''
|
||||
} per ${formik.values.convertion_unit?.value}`}
|
||||
value={formik.values.weight_per_convertion ?? ''}
|
||||
onChange={(e) => {
|
||||
formik.setFieldValue(
|
||||
'weight_per_convertion',
|
||||
Number(e.target.value)
|
||||
);
|
||||
setCurrentInput(e.target.name);
|
||||
}}
|
||||
onBlur={() => handleBlurField('weight_per_convertion')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Konversi Satuan Week Pullet */}
|
||||
{formik.values.marketing_type?.value.toLowerCase() ===
|
||||
'ayam_pullet' && (
|
||||
<SelectInputRadio
|
||||
required
|
||||
label='Minggu'
|
||||
options={optionsWeek}
|
||||
value={
|
||||
formik.values.week?.value
|
||||
? (formik.values.week as { value: number; label: string })
|
||||
: null
|
||||
}
|
||||
onChange={(val) => {
|
||||
formik.setFieldValue('week', val);
|
||||
}}
|
||||
placeholder='Pilih Week'
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Total Peti */}
|
||||
{formik.values.convertion_unit?.value.toLowerCase() === 'peti' && (
|
||||
<NumberInput
|
||||
required
|
||||
label='Total Peti'
|
||||
name='total_peti'
|
||||
value={formik.values.total_peti ?? undefined}
|
||||
onChange={(e) => {
|
||||
formik.handleChange(e);
|
||||
setCurrentInput(e.target.name);
|
||||
}}
|
||||
onBlur={() => handleBlurField('total_peti')}
|
||||
isError={
|
||||
formik.touched.total_peti && Boolean(formik.errors.total_peti)
|
||||
}
|
||||
errorMessage={formik.errors.total_peti}
|
||||
placeholder='Masukan Total Peti'
|
||||
endAdornment={
|
||||
<div className='flex items-center gap-2'>
|
||||
<span className='text-sm text-base-content/50'>Kg</span>
|
||||
</div>
|
||||
}
|
||||
bottomLabel={`1 ${formik.values.convertion_unit?.value.toLowerCase()} = ${formik.values.weight_per_convertion ?? 0} Kg`}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Avg. Bobot */}
|
||||
{formik.values.marketing_type?.value.toLowerCase() === 'trading' ||
|
||||
(formik.values.convertion_unit?.value.toLowerCase() !== 'peti' &&
|
||||
formik.values.convertion_unit?.value.toLowerCase() !== 'kg' && (
|
||||
<NumberInput
|
||||
required
|
||||
label='Avg. Bobot (Kg)'
|
||||
name='avg_weight'
|
||||
value={formik.values.avg_weight}
|
||||
onChange={(e) => {
|
||||
formik.handleChange(e);
|
||||
setCurrentInput(e.target.name);
|
||||
}}
|
||||
onBlur={() => handleBlurField('avg_weight')}
|
||||
isError={
|
||||
formik.touched.avg_weight &&
|
||||
Boolean(formik.errors.avg_weight)
|
||||
}
|
||||
errorMessage={formik.errors.avg_weight}
|
||||
placeholder='Masukan Bobot Rata-rata'
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Total Bobot */}
|
||||
{formik.values.marketing_type?.value.toLowerCase() !== 'trading' && (
|
||||
<NumberInput
|
||||
required
|
||||
label='Total Bobot (Kg)'
|
||||
name='total_weight'
|
||||
value={formik.values.total_weight}
|
||||
onChange={(e) => {
|
||||
formik.handleChange(e);
|
||||
setCurrentInput(e.target.name);
|
||||
}}
|
||||
onBlur={() => handleBlurField('total_weight')}
|
||||
isError={
|
||||
formik.touched.total_weight &&
|
||||
Boolean(formik.errors.total_weight)
|
||||
}
|
||||
errorMessage={formik.errors.total_weight}
|
||||
placeholder='Masukan Total Bobot'
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Kuantitas */}
|
||||
<NumberInput
|
||||
required
|
||||
label={
|
||||
formik.values.marketing_type &&
|
||||
formik.values.marketing_type.value.toLowerCase() === 'telur'
|
||||
? `Total Butir Telur`
|
||||
: `Total Kuantitas`
|
||||
}
|
||||
name='qty'
|
||||
value={formik.values.qty}
|
||||
onChange={(e) => {
|
||||
formik.handleChange(e);
|
||||
setCurrentInput(e.target.name);
|
||||
}}
|
||||
onBlur={() => handleBlurField('qty')}
|
||||
isError={formik.touched.qty && Boolean(formik.errors.qty)}
|
||||
errorMessage={formik.errors.qty}
|
||||
placeholder='Masukan Kuantitas'
|
||||
endAdornment={
|
||||
formik.values.uom ? (
|
||||
<div className='flex items-center gap-2'>
|
||||
<span className='text-sm text-base-content/50'>
|
||||
{formik.values.uom}
|
||||
</span>
|
||||
</div>
|
||||
) : undefined
|
||||
}
|
||||
bottomLabel={
|
||||
isResponseSuccess(warehouseSourceRawData) &&
|
||||
formik.values.product_warehouse_id
|
||||
? `Stok tersedia: ${formatNumber(
|
||||
warehouseSourceRawData?.data?.find(
|
||||
(item) => item.id === formik.values.product_warehouse_id
|
||||
)?.quantity ?? 0
|
||||
)} ${formik.values.uom}`
|
||||
: ''
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Harga per convertion unit (PETI / KG) */}
|
||||
{(formik.values.convertion_unit?.value.toLowerCase() === 'peti' ||
|
||||
formik.values.convertion_unit?.value.toLowerCase() === 'kg') && (
|
||||
<NumberInput
|
||||
required
|
||||
label={`Harga / ${formik.values.convertion_unit?.label ?? 'Produk'} (Rp)`}
|
||||
name='price_per_convertion'
|
||||
value={formik.values.price_per_convertion ?? undefined}
|
||||
onChange={(e) => {
|
||||
formik.handleChange(e);
|
||||
setCurrentInput(e.target.name);
|
||||
}}
|
||||
onBlur={() => handleBlurField('price_per_convertion')}
|
||||
isError={
|
||||
formik.touched.price_per_convertion &&
|
||||
Boolean(formik.errors.price_per_convertion)
|
||||
}
|
||||
errorMessage={formik.errors.price_per_convertion}
|
||||
placeholder='Masukan Harga Satuan'
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Harga per butir untuk TELUR + QTY */}
|
||||
{formik.values.marketing_type?.value.toLowerCase() === 'telur' &&
|
||||
formik.values.convertion_unit?.value.toLowerCase() === 'qty' && (
|
||||
<NumberInput
|
||||
required
|
||||
label='Harga / Butir (Rp)'
|
||||
name='price_per_qty'
|
||||
value={formik.values.price_per_qty ?? undefined}
|
||||
onChange={(e) => {
|
||||
formik.setFieldValue('price_per_qty', Number(e.target.value));
|
||||
setCurrentInput('price_per_qty');
|
||||
}}
|
||||
onBlur={() => handleBlurField('price_per_qty')}
|
||||
isError={
|
||||
formik.touched.price_per_qty &&
|
||||
Boolean(formik.errors.price_per_qty)
|
||||
}
|
||||
errorMessage={formik.errors.price_per_qty}
|
||||
placeholder='Masukan Harga per Butir'
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Harga Satuan per Uom Produk Warehouse */}
|
||||
{formik.values.convertion_unit?.value.toLowerCase() !== 'peti' &&
|
||||
formik.values.convertion_unit?.value.toLowerCase() !== 'kg' && (
|
||||
<NumberInput
|
||||
required
|
||||
label={`Harga / ${formik.values.convertion_unit?.label !== 'qty' ? 'Kg' : (selectedProductWarehouse?.product?.uom?.name ?? 'Produk')} (Rp)`}
|
||||
name='unit_price'
|
||||
value={formik.values.unit_price}
|
||||
onChange={(e) => {
|
||||
formik.handleChange(e);
|
||||
setCurrentInput(e.target.name);
|
||||
}}
|
||||
onBlur={() => handleBlurField('unit_price')}
|
||||
isError={
|
||||
formik.touched.unit_price && Boolean(formik.errors.unit_price)
|
||||
}
|
||||
errorMessage={formik.errors.unit_price}
|
||||
placeholder='Masukan Harga Satuan'
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Sisa kg diluar peti */}
|
||||
{formik.values.convertion_unit?.value.toLowerCase() === 'peti' && (
|
||||
<div className='flex flex-col'>
|
||||
<div className='py-2 gap-3 flex items-center'>
|
||||
<input
|
||||
type='checkbox'
|
||||
name='sisa_berat_toggle'
|
||||
checked={hasSisaBerat}
|
||||
onChange={() => handleSisaBeratToggle(!hasSisaBerat)}
|
||||
className='toggle toggle-primary rounded-full before:rounded-full before:bg-base-content/50 border-base-content/50 checked:border-primary checked:bg-primary checked:before:bg-base-100'
|
||||
/>
|
||||
<label className='text-sm text-base-content/50'>
|
||||
Apakah ada sisa berat di luar peti?
|
||||
</label>
|
||||
</div>
|
||||
<span className='text-xs text-base-content/30 leading-4 pt-1.5'>
|
||||
Jika ada, masukan berat di luar peti
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
bottomLabel={
|
||||
isResponseSuccess(warehouseSourceRawData) &&
|
||||
formik.values.product_warehouse_id
|
||||
? `Stok tersedia: ${formatNumber(
|
||||
warehouseSourceRawData?.data?.find(
|
||||
(item) => item.id === formik.values.product_warehouse_id
|
||||
)?.quantity ?? 0
|
||||
)} ${selectedProductWarehouse?.product?.uom?.name}`
|
||||
: ''
|
||||
}
|
||||
/>
|
||||
<NumberInput
|
||||
required
|
||||
label={`Harga / ${selectedProductWarehouse?.product?.uom?.name ?? 'Produk'} (Rp)`}
|
||||
name='unit_price'
|
||||
value={formik.values.unit_price}
|
||||
onChange={(e) => {
|
||||
formik.handleChange(e);
|
||||
setCurrentInput(e.target.name);
|
||||
}}
|
||||
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='Avg. Bobot (Kg)'
|
||||
name='avg_weight'
|
||||
value={formik.values.avg_weight}
|
||||
onChange={(e) => {
|
||||
formik.handleChange(e);
|
||||
setCurrentInput(e.target.name);
|
||||
}}
|
||||
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='Total Bobot (Kg)'
|
||||
name='total_weight'
|
||||
value={formik.values.total_weight}
|
||||
onChange={(e) => {
|
||||
formik.handleChange(e);
|
||||
setCurrentInput(e.target.name);
|
||||
}}
|
||||
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={(e) => {
|
||||
formik.handleChange(e);
|
||||
setCurrentInput(e.target.name);
|
||||
}}
|
||||
onBlur={() => handleBlurField('total_price')}
|
||||
isError={
|
||||
formik.touched.total_price && Boolean(formik.errors.total_price)
|
||||
}
|
||||
errorMessage={formik.errors.total_price}
|
||||
placeholder='Masukan Total Penjualan'
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className='mt-4'>
|
||||
<AlertErrorList formErrorList={formErrorList} onClose={close} />
|
||||
{hasSisaBerat && (
|
||||
<>
|
||||
<NumberInput
|
||||
required
|
||||
label='Sisa Berat (Kg)'
|
||||
name='sisa_berat'
|
||||
value={formik.values.sisa_berat ?? undefined}
|
||||
onChange={(e) => {
|
||||
formik.handleChange(e);
|
||||
setCurrentInput(e.target.name);
|
||||
}}
|
||||
onBlur={() => handleBlurField('sisa_berat')}
|
||||
isError={
|
||||
formik.touched.sisa_berat && Boolean(formik.errors.sisa_berat)
|
||||
}
|
||||
errorMessage={formik.errors.sisa_berat}
|
||||
placeholder='Masukan Sisa Berat'
|
||||
/>
|
||||
<NumberInput
|
||||
required
|
||||
label='Harga Sisa Berat (Rp)'
|
||||
name='price_sisa_berat'
|
||||
value={formik.values.price_sisa_berat ?? undefined}
|
||||
onChange={(e) => {
|
||||
formik.handleChange(e);
|
||||
setCurrentInput(e.target.name);
|
||||
}}
|
||||
onBlur={() => handleBlurField('price_sisa_berat')}
|
||||
isError={
|
||||
formik.touched.price_sisa_berat &&
|
||||
Boolean(formik.errors.price_sisa_berat)
|
||||
}
|
||||
errorMessage={formik.errors.price_sisa_berat}
|
||||
placeholder='Masukan Harga Sisa Berat'
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Total Penjualan */}
|
||||
<NumberInput
|
||||
required
|
||||
label='Total Penjualan (Rp)'
|
||||
name='total_price'
|
||||
value={formik.values.total_price}
|
||||
onChange={(e) => {
|
||||
formik.handleChange(e);
|
||||
setCurrentInput(e.target.name);
|
||||
}}
|
||||
onBlur={() => handleBlurField('total_price')}
|
||||
isError={
|
||||
formik.touched.total_price && Boolean(formik.errors.total_price)
|
||||
}
|
||||
errorMessage={formik.errors.total_price}
|
||||
placeholder='Masukan Total Penjualan'
|
||||
/>
|
||||
|
||||
{formErrorList.length > 0 && (
|
||||
<div className='mt-4'>
|
||||
<AlertErrorList formErrorList={formErrorList} onClose={close} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className='h-18' />
|
||||
|
||||
<div className='absolute w-full bottom-0 right-0'>
|
||||
<div className='absolute w-full bottom-0 right-0 p-4'>
|
||||
<Button
|
||||
type='submit'
|
||||
isLoading={formik.isSubmitting}
|
||||
|
||||
@@ -208,8 +208,12 @@ const SalesOrderProductTable = ({
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='text-sm px-4 py-3'>Gudang</td>
|
||||
<td className='text-sm px-4 py-3'>{item.kandang?.label}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='text-sm px-4 py-3'>Kategori</td>
|
||||
<td className='text-sm px-4 py-3'>
|
||||
{item.product_warehouse?.label}
|
||||
{item.marketing_type?.label}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -218,33 +222,65 @@ const SalesOrderProductTable = ({
|
||||
{item.product_warehouse?.label}
|
||||
</td>
|
||||
</tr>
|
||||
{item.marketing_type?.value.toLowerCase() === 'telur' && (
|
||||
<tr>
|
||||
<td className='text-sm px-4 py-3'>Tipe Konversi</td>
|
||||
<td className='text-sm px-4 py-3'>
|
||||
{item.convertion_unit?.label}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{item.marketing_type?.value.toLowerCase() ===
|
||||
'ayam_pullet' && (
|
||||
<tr>
|
||||
<td className='text-sm px-4 py-3'>Tipe Konversi</td>
|
||||
<td className='text-sm px-4 py-3'>{item.week?.label}</td>
|
||||
</tr>
|
||||
)}
|
||||
{item.convertion_unit?.value.toLowerCase() === 'peti' && (
|
||||
<tr>
|
||||
<td className='text-sm px-4 py-3'>Total Peti</td>
|
||||
<td className='text-sm px-4 py-3'>
|
||||
{item.total_peti} {item.convertion_unit?.label}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{item.marketing_type?.value.toLowerCase() !== 'trading' && (
|
||||
<>
|
||||
<tr>
|
||||
<td className='text-sm px-4 py-3'>Total Bobot</td>
|
||||
<td className='text-sm px-4 py-3'>
|
||||
{item.total_weight
|
||||
? formatNumber(
|
||||
parseFloat(item.total_weight as string)
|
||||
) + ' Kg'
|
||||
: '0 Kg'}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='text-sm px-4 py-3'>Avg Bobot</td>
|
||||
<td className='text-sm px-4 py-3'>
|
||||
{item.avg_weight
|
||||
? formatNumber(
|
||||
parseFloat(item.avg_weight as string)
|
||||
) + ' Kg'
|
||||
: '0 Kg'}
|
||||
</td>
|
||||
</tr>
|
||||
</>
|
||||
)}
|
||||
<tr>
|
||||
<td className='text-sm px-4 py-3'>Total Bobot</td>
|
||||
<td className='text-sm px-4 py-3'>
|
||||
{item.total_weight
|
||||
? formatNumber(
|
||||
parseFloat(item.total_weight as string)
|
||||
) + ' Kg'
|
||||
: '-'}
|
||||
{item.marketing_type?.value === 'telur'
|
||||
? 'Total Butir Telur'
|
||||
: 'Qty'}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='text-sm px-4 py-3'>Avg Bobot</td>
|
||||
<td className='text-sm px-4 py-3'>
|
||||
{item.avg_weight
|
||||
? formatNumber(parseFloat(item.avg_weight as string)) +
|
||||
' Kg'
|
||||
: '-'}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='text-sm px-4 py-3'>Qty</td>
|
||||
<td className='text-sm px-4 py-3'>
|
||||
{`${formatNumber(parseFloat(item.qty as string))} ${item.uom || ''}`}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='text-sm px-4 py-3'>Total Harga Satuan</td>
|
||||
<td className='text-sm px-4 py-3'>Harga Satuan</td>
|
||||
<td className='text-sm px-4 py-3'>
|
||||
{formatCurrency(parseFloat(item.unit_price as string))}
|
||||
</td>
|
||||
|
||||
@@ -17,6 +17,7 @@ import RowCollapseOptions from '@/components/table/RowCollapseOptions';
|
||||
import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
|
||||
import RequirePermission from '@/components/helper/RequirePermission';
|
||||
import StatusBadge from '@/components/helper/StatusBadge';
|
||||
import PurchaseOrderInvoice from '@/components/pages/purchase/order/PurchaseOrderInvoice';
|
||||
|
||||
import { cn, formatDate } from '@/lib/helper';
|
||||
import { isResponseSuccess } from '@/lib/api-helper';
|
||||
@@ -158,6 +159,27 @@ const PurchaseTable = () => {
|
||||
PurchaseApi.getAllFetcher
|
||||
);
|
||||
|
||||
const [isDownloadingInvoice, setIsDownloadingInvoice] = useState(false);
|
||||
const [invoicePurchaseData, setInvoicePurchaseData] =
|
||||
useState<Purchase | null>(null);
|
||||
|
||||
const handleDownloadInvoice = async (purchaseId: number) => {
|
||||
setIsDownloadingInvoice(true);
|
||||
try {
|
||||
const response = await PurchaseApi.getSingle(purchaseId);
|
||||
if (isResponseSuccess(response) && response.data) {
|
||||
setInvoicePurchaseData(response.data);
|
||||
setTimeout(() => {
|
||||
setInvoicePurchaseData(null);
|
||||
}, 1000);
|
||||
}
|
||||
} catch {
|
||||
toast.error('Gagal mengambil data purchase order.');
|
||||
} finally {
|
||||
setIsDownloadingInvoice(false);
|
||||
}
|
||||
};
|
||||
|
||||
// ===== TABLE COLUMNS DEFINITION =====
|
||||
const purchaseColumns: ColumnDef<Purchase>[] = [
|
||||
{
|
||||
@@ -168,10 +190,66 @@ const PurchaseTable = () => {
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'supplier',
|
||||
accessorKey: 'po_expedition',
|
||||
header: 'PO Ekspedisi',
|
||||
cell: (props) => {
|
||||
const purchase = props.row.original;
|
||||
|
||||
if (!purchase.po_number || purchase.po_number === 'Belum dibuat') {
|
||||
return <span>-</span>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Button
|
||||
color='primary'
|
||||
className='w-fit min-w-32 flex items-center justify-start gap-1 px-2 py-1 text-sm font-mono'
|
||||
onClick={() => handleDownloadInvoice(purchase.id)}
|
||||
disabled={isDownloadingInvoice}
|
||||
>
|
||||
<Icon
|
||||
icon={
|
||||
isDownloadingInvoice
|
||||
? 'eos-icons:loading'
|
||||
: 'material-symbols:file-open-outline'
|
||||
}
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
{purchase.po_number}
|
||||
</Button>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'supplier.name',
|
||||
header: 'Vendor',
|
||||
cell: (props) => props.row.original.supplier.name,
|
||||
},
|
||||
{
|
||||
accessorKey: 'requester_name',
|
||||
header: 'Nama Pengaju',
|
||||
cell: (props) => props.row.original.requester_name || '-',
|
||||
},
|
||||
{
|
||||
accessorKey: 'products.name',
|
||||
header: 'Produk',
|
||||
cell: (props) => {
|
||||
const products = props.row.original.products;
|
||||
if (!products || products.length === 0) return '-';
|
||||
return (
|
||||
<ul className='list-disc pl-4'>
|
||||
{products.map((product, index) => (
|
||||
<li key={index}>{product.name}</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'location.name',
|
||||
header: 'Lokasi',
|
||||
cell: (props) => props.row.original.location?.name || '-',
|
||||
},
|
||||
{
|
||||
accessorKey: 'po_date',
|
||||
header: 'Tgl. PO',
|
||||
@@ -180,6 +258,14 @@ const PurchaseTable = () => {
|
||||
? formatDate(props.row.original.po_date, 'DD MMM YYYY')
|
||||
: '-',
|
||||
},
|
||||
{
|
||||
accessorKey: 'due_date',
|
||||
header: 'Jatuh Tempo',
|
||||
cell: (props) =>
|
||||
props.row.original.due_date
|
||||
? formatDate(props.row.original.due_date, 'DD MMM YYYY')
|
||||
: '-',
|
||||
},
|
||||
{
|
||||
header: 'Aging',
|
||||
cell: (props) => {
|
||||
@@ -231,7 +317,7 @@ const PurchaseTable = () => {
|
||||
color={statusColor}
|
||||
text={statusText}
|
||||
className={{
|
||||
badge: 'whitespace-nowrap',
|
||||
badge: 'whitespace-nowrap max-w-max w-fit',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
@@ -330,11 +416,21 @@ const PurchaseTable = () => {
|
||||
|
||||
<DebouncedTextInput
|
||||
name='search'
|
||||
placeholder='Cari Pembelian'
|
||||
placeholder='Search'
|
||||
value={tableFilterState.search}
|
||||
onChange={searchChangeHandler}
|
||||
startAdornment={
|
||||
<Icon
|
||||
icon='heroicons:magnifying-glass'
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
}
|
||||
className={{
|
||||
wrapper: 'sm:max-w-3xs',
|
||||
wrapper: 'w-full min-w-24 max-w-3xs',
|
||||
inputWrapper: 'rounded-xl! shadow-button-soft',
|
||||
input:
|
||||
'placeholder:font-semibold placeholder:text-base-content/50',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
@@ -409,6 +505,15 @@ const PurchaseTable = () => {
|
||||
onClick: confirmationModalDeleteClickHandler,
|
||||
}}
|
||||
/>
|
||||
|
||||
{invoicePurchaseData && (
|
||||
<div className='hidden'>
|
||||
<PurchaseOrderInvoice
|
||||
data={invoicePurchaseData}
|
||||
triggerDownloadOnMount={true}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { useMemo, useState } from 'react';
|
||||
import { useMemo, useState, useEffect, useCallback, useRef } from 'react';
|
||||
import {
|
||||
Page,
|
||||
Text,
|
||||
@@ -235,11 +235,16 @@ const pdfStyles = StyleSheet.create({
|
||||
interface PurchaseOrderInvoiceProps {
|
||||
data?: Purchase;
|
||||
className?: string;
|
||||
triggerDownloadOnMount?: boolean;
|
||||
}
|
||||
|
||||
const PurchaseOrderInvoice = ({ data }: PurchaseOrderInvoiceProps) => {
|
||||
const PurchaseOrderInvoice = ({
|
||||
data,
|
||||
triggerDownloadOnMount,
|
||||
}: PurchaseOrderInvoiceProps) => {
|
||||
const [, setIsGeneratingPDF] = useState(false);
|
||||
const purchaseData = data;
|
||||
const hasDownloadedRef = useRef(false);
|
||||
|
||||
const grandTotal = useMemo(() => {
|
||||
return (
|
||||
@@ -250,7 +255,7 @@ const PurchaseOrderInvoice = ({ data }: PurchaseOrderInvoiceProps) => {
|
||||
);
|
||||
}, [purchaseData?.items]);
|
||||
|
||||
const handleDownloadPDF = async () => {
|
||||
const handleDownloadPDF = useCallback(async () => {
|
||||
if (!purchaseData) {
|
||||
toast.error('No purchase order data available');
|
||||
return;
|
||||
@@ -510,7 +515,20 @@ const PurchaseOrderInvoice = ({ data }: PurchaseOrderInvoiceProps) => {
|
||||
} finally {
|
||||
setIsGeneratingPDF(false);
|
||||
}
|
||||
};
|
||||
}, [purchaseData]);
|
||||
|
||||
useEffect(() => {
|
||||
if (triggerDownloadOnMount && purchaseData && !hasDownloadedRef.current) {
|
||||
hasDownloadedRef.current = true;
|
||||
handleDownloadPDF();
|
||||
}
|
||||
}, [triggerDownloadOnMount, purchaseData]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!triggerDownloadOnMount) {
|
||||
hasDownloadedRef.current = false;
|
||||
}
|
||||
}, [triggerDownloadOnMount]);
|
||||
|
||||
if (!purchaseData) {
|
||||
return (
|
||||
@@ -520,6 +538,10 @@ const PurchaseOrderInvoice = ({ data }: PurchaseOrderInvoiceProps) => {
|
||||
);
|
||||
}
|
||||
|
||||
if (triggerDownloadOnMount) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return purchaseData?.po_number &&
|
||||
purchaseData.po_number !== 'Belum dibuat' ? (
|
||||
<Button
|
||||
|
||||
@@ -96,8 +96,7 @@ interface CustomerPaymentExportPDFParams {
|
||||
// sales?: string;
|
||||
start_date?: string;
|
||||
end_date?: string;
|
||||
// TODO: Uncomment when BE is ready
|
||||
// filter_by?: string;
|
||||
filter_by?: string;
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -3,18 +3,18 @@ import useSWR from 'swr';
|
||||
import { Icon } from '@iconify/react';
|
||||
import Card from '@/components/Card';
|
||||
import Badge from '@/components/Badge';
|
||||
import SelectInput, { useSelect } from '@/components/input/SelectInput';
|
||||
import { useSelect } from '@/components/input/SelectInput';
|
||||
import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
|
||||
import SelectInputRadio from '@/components/input/SelectInputRadio';
|
||||
import DateInput from '@/components/input/DateInput';
|
||||
import { CustomerApi } from '@/services/api/master-data';
|
||||
import { FinanceApi } from '@/services/api/report/finance-report';
|
||||
import { UserApi } from '@/services/api/user';
|
||||
// import { UserApi } from '@/services/api/user';
|
||||
import Table from '@/components/Table';
|
||||
import { ColumnDef } from '@tanstack/react-table';
|
||||
import { formatCurrency, formatDate, formatNumber, cn } from '@/lib/helper';
|
||||
import {
|
||||
CustomerPaymentReport,
|
||||
CustomerPaymentRow,
|
||||
CustomerPaymentSummary,
|
||||
} from '@/types/api/report/customer-payment';
|
||||
import { isResponseSuccess } from '@/lib/api-helper';
|
||||
@@ -48,38 +48,58 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
|
||||
const [isSubmitted, setIsSubmitted] = useState(false);
|
||||
|
||||
// ===== FILTER STATE =====
|
||||
const [appliedFilterCustomer, setAppliedFilterCustomer] = useState<
|
||||
typeof customerOptions
|
||||
>([]);
|
||||
// TODO: Uncomment when BE is ready
|
||||
// const [appliedFilterSales, setAppliedFilterSales] = useState<
|
||||
// typeof salesOptions
|
||||
// >([]);
|
||||
const [appliedFilterByType, setAppliedFilterByType] = useState<
|
||||
(typeof dataTypeOptions)[0] | null
|
||||
>(null);
|
||||
const [appliedFilterStartDate, setAppliedFilterStartDate] = useState('');
|
||||
const [appliedFilterEndDate, setAppliedFilterEndDate] = useState('');
|
||||
const [dateErrorShown, setDateErrorShown] = useState(false);
|
||||
const [hasDateError, setHasDateError] = useState(false);
|
||||
|
||||
const [filterCustomer, setFilterCustomer] = useState<typeof customerOptions>(
|
||||
[]
|
||||
);
|
||||
// TODO: Uncomment when BE is ready
|
||||
// const [filterSales, setFilterSales] = useState<typeof salesOptions>([]);
|
||||
const [filterSales, setFilterSales] = useState<typeof salesOptions>([]);
|
||||
const [filterStartDate, setFilterStartDate] = useState('');
|
||||
const [filterEndDate, setFilterEndDate] = useState('');
|
||||
|
||||
const filterModal = useModal();
|
||||
|
||||
const dataTypeOptions = useMemo(
|
||||
() => [
|
||||
{ value: 'trans_date', label: 'Tanggal Jual/Bayar' },
|
||||
{ value: 'realization_date', label: 'Tanggal Realisasi' },
|
||||
],
|
||||
[]
|
||||
);
|
||||
|
||||
const [filterByType, setFilterByType] = useState<
|
||||
(typeof dataTypeOptions)[0] | null
|
||||
>(null);
|
||||
|
||||
const {
|
||||
options: customerOptions,
|
||||
setInputValue: setCustomerInputValue,
|
||||
isLoadingOptions: isLoadingCustomers,
|
||||
loadMore: loadMoreCustomers,
|
||||
hasMore: hasMoreCustomers,
|
||||
} = useSelect(CustomerApi.basePath, 'id', 'name', 'search');
|
||||
|
||||
// TODO: Uncomment when BE is ready
|
||||
const {
|
||||
options: salesOptions,
|
||||
setInputValue: setSalesInputValue,
|
||||
isLoadingOptions: isLoadingSales,
|
||||
loadMore: loadMoreSales,
|
||||
hasMore: hasMoreSales,
|
||||
} = useSelect(UserApi.basePath, 'id', 'name', 'search');
|
||||
|
||||
const dataTypeOptions = useMemo(
|
||||
() => [{ value: 'do_date', label: 'Tanggal Jual' }],
|
||||
[]
|
||||
);
|
||||
// const {
|
||||
// options: salesOptions,
|
||||
// setInputValue: setSalesInputValue,
|
||||
// isLoadingOptions: isLoadingSales,
|
||||
// loadMore: loadMoreSales,
|
||||
// hasMore: hasMoreSales,
|
||||
// } = useSelect(UserApi.basePath, 'id', 'name', 'search');
|
||||
|
||||
const getPaymentStatusColor = (notes: string) => {
|
||||
const normalizedValue = notes.toLowerCase();
|
||||
@@ -119,49 +139,145 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
|
||||
|
||||
// ===== FILTER HANDLERS =====
|
||||
const handleFilterModalOpen = useCallback(() => {
|
||||
setFilterCustomer(appliedFilterCustomer);
|
||||
// setFilterSales(appliedFilterSales);
|
||||
setFilterByType(appliedFilterByType);
|
||||
setFilterStartDate(appliedFilterStartDate);
|
||||
setFilterEndDate(appliedFilterEndDate);
|
||||
filterModal.openModal();
|
||||
}, [filterModal]);
|
||||
}, [
|
||||
filterModal,
|
||||
appliedFilterCustomer,
|
||||
appliedFilterByType,
|
||||
appliedFilterStartDate,
|
||||
appliedFilterEndDate,
|
||||
]);
|
||||
|
||||
const handleResetFilters = useCallback(() => {
|
||||
setIsSubmitted(false);
|
||||
setFilterCustomer([]);
|
||||
setFilterSales([]);
|
||||
setFilterByType(null);
|
||||
setFilterStartDate('');
|
||||
setFilterEndDate('');
|
||||
}, []);
|
||||
setAppliedFilterCustomer([]);
|
||||
setAppliedFilterByType(null);
|
||||
setAppliedFilterStartDate('');
|
||||
setAppliedFilterEndDate('');
|
||||
setHasDateError(false);
|
||||
if (dateErrorShown) {
|
||||
toast.dismiss();
|
||||
setDateErrorShown(false);
|
||||
}
|
||||
}, [dateErrorShown]);
|
||||
|
||||
const handleApplyFilters = useCallback(() => {
|
||||
setAppliedFilterCustomer(filterCustomer);
|
||||
setAppliedFilterByType(filterByType);
|
||||
setAppliedFilterStartDate(filterStartDate);
|
||||
setAppliedFilterEndDate(filterEndDate);
|
||||
setIsSubmitted(true);
|
||||
setCurrentPage(1);
|
||||
filterModal.closeModal();
|
||||
}, [filterModal]);
|
||||
}, [
|
||||
filterModal,
|
||||
filterCustomer,
|
||||
filterByType,
|
||||
filterStartDate,
|
||||
filterEndDate,
|
||||
]);
|
||||
|
||||
const handleStartDateChange = useCallback(
|
||||
(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value;
|
||||
setFilterStartDate(value);
|
||||
|
||||
if (value && filterEndDate) {
|
||||
const startDate = new Date(value);
|
||||
const endDateObj = new Date(filterEndDate);
|
||||
|
||||
if (endDateObj < startDate) {
|
||||
setHasDateError(true);
|
||||
if (!dateErrorShown) {
|
||||
toast.error('Tanggal akhir tidak boleh masa lampau', {
|
||||
duration: Infinity,
|
||||
});
|
||||
setDateErrorShown(true);
|
||||
}
|
||||
} else {
|
||||
setHasDateError(false);
|
||||
if (dateErrorShown) {
|
||||
toast.dismiss();
|
||||
setDateErrorShown(false);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
setHasDateError(false);
|
||||
}
|
||||
},
|
||||
[filterEndDate, dateErrorShown]
|
||||
);
|
||||
|
||||
const handleEndDateChange = useCallback(
|
||||
(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value;
|
||||
setFilterEndDate(value);
|
||||
|
||||
if (value && filterStartDate) {
|
||||
const startDateObj = new Date(filterStartDate);
|
||||
const endDate = new Date(value);
|
||||
|
||||
if (endDate < startDateObj) {
|
||||
setHasDateError(true);
|
||||
if (!dateErrorShown) {
|
||||
toast.error('Tanggal akhir tidak boleh masa lampau', {
|
||||
duration: Infinity,
|
||||
});
|
||||
setDateErrorShown(true);
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
setHasDateError(false);
|
||||
if (dateErrorShown) {
|
||||
toast.dismiss();
|
||||
setDateErrorShown(false);
|
||||
}
|
||||
},
|
||||
[filterStartDate, dateErrorShown]
|
||||
);
|
||||
|
||||
// ===== ACTIVE FILTERS COUNT =====
|
||||
const activeFiltersCount = useMemo(() => {
|
||||
let count = 0;
|
||||
|
||||
// Date filter (start_date + end_date = 1 filter)
|
||||
if (filterStartDate || filterEndDate) {
|
||||
if (appliedFilterStartDate || appliedFilterEndDate) {
|
||||
count += 1;
|
||||
}
|
||||
|
||||
// Customer filter
|
||||
if (filterCustomer.length > 0) {
|
||||
if (appliedFilterCustomer.length > 0) {
|
||||
count += 1;
|
||||
}
|
||||
|
||||
// Filter by type filter (hanya dihitung jika ada nilai yang dipilih)
|
||||
if (appliedFilterByType) {
|
||||
count += 1;
|
||||
}
|
||||
|
||||
// TODO: Uncomment when BE is ready
|
||||
// // Sales filter
|
||||
// if (filterSales.length > 0) {
|
||||
// if (appliedFilterSales.length > 0) {
|
||||
// count += 1;
|
||||
// }
|
||||
|
||||
return count;
|
||||
}, [
|
||||
filterStartDate,
|
||||
filterEndDate,
|
||||
filterCustomer,
|
||||
// filterSales,
|
||||
appliedFilterStartDate,
|
||||
appliedFilterEndDate,
|
||||
appliedFilterCustomer,
|
||||
appliedFilterByType,
|
||||
]);
|
||||
|
||||
const hasFilters = activeFiltersCount > 0;
|
||||
@@ -172,17 +288,20 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
|
||||
? () => {
|
||||
const params = {
|
||||
customer_ids:
|
||||
filterCustomer.length > 0
|
||||
? filterCustomer.map((v) => String(v.value)).join(',')
|
||||
appliedFilterCustomer.length > 0
|
||||
? appliedFilterCustomer.map((v) => String(v.value)).join(',')
|
||||
: undefined,
|
||||
// TODO: Uncomment when BE is ready
|
||||
// sales_id:
|
||||
// filterSales.length > 0
|
||||
// ? filterSales.map((v) => String(v.value)).join(',')
|
||||
// appliedFilterSales.length > 0
|
||||
// ? appliedFilterSales.map((v) => String(v.value)).join(',')
|
||||
// : undefined,
|
||||
// filter_by: 'do_date' as const,
|
||||
start_date: filterStartDate || undefined,
|
||||
end_date: filterEndDate || undefined,
|
||||
filter_by: appliedFilterByType?.value as
|
||||
| 'trans_date'
|
||||
| 'realization_date'
|
||||
| undefined,
|
||||
start_date: appliedFilterStartDate || undefined,
|
||||
end_date: appliedFilterEndDate || undefined,
|
||||
page: currentPage,
|
||||
limit: pageSize,
|
||||
};
|
||||
@@ -193,8 +312,7 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
|
||||
([, params]) =>
|
||||
FinanceApi.getCustomerPaymentReport(
|
||||
params.customer_ids,
|
||||
undefined, // TODO: Change to params.sales_id when BE is ready
|
||||
undefined, // TODO: Change to params.filter_by when BE is ready
|
||||
params.filter_by,
|
||||
params.start_date,
|
||||
params.end_date,
|
||||
params.page,
|
||||
@@ -216,24 +334,27 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
|
||||
> => {
|
||||
const params = {
|
||||
customer_ids:
|
||||
filterCustomer.length > 0
|
||||
? filterCustomer.map((v) => String(v.value)).join(',')
|
||||
appliedFilterCustomer.length > 0
|
||||
? appliedFilterCustomer.map((v) => String(v.value)).join(',')
|
||||
: undefined,
|
||||
// TODO: Uncomment when BE is ready
|
||||
// sales_id:
|
||||
// filterSales.length > 0
|
||||
// ? filterSales.map((v) => String(v.value)).join(',')
|
||||
// appliedFilterSales.length > 0
|
||||
// ? appliedFilterSales.map((v) => String(v.value)).join(',')
|
||||
// : undefined,
|
||||
start_date: filterStartDate || undefined,
|
||||
end_date: filterEndDate || undefined,
|
||||
filter_by: appliedFilterByType?.value as
|
||||
| 'trans_date'
|
||||
| 'realization_date'
|
||||
| undefined,
|
||||
start_date: appliedFilterStartDate || undefined,
|
||||
end_date: appliedFilterEndDate || undefined,
|
||||
limit: 100,
|
||||
page: 1,
|
||||
};
|
||||
|
||||
const response = await FinanceApi.getCustomerPaymentReport(
|
||||
params.customer_ids,
|
||||
undefined, // TODO: Change to params.sales_id when BE is ready
|
||||
undefined, // TODO: Change to params.filter_by when BE is ready
|
||||
params.filter_by,
|
||||
params.start_date,
|
||||
params.end_date,
|
||||
params.page,
|
||||
@@ -243,7 +364,13 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
|
||||
return isResponseSuccess(response)
|
||||
? (response.data as unknown as CustomerPaymentReport[])
|
||||
: null;
|
||||
}, [filterCustomer, filterSales, filterStartDate, filterEndDate]);
|
||||
}, [
|
||||
appliedFilterCustomer,
|
||||
// appliedFilterSales,
|
||||
appliedFilterStartDate,
|
||||
appliedFilterEndDate,
|
||||
appliedFilterByType,
|
||||
]);
|
||||
|
||||
// ===== EXPORT HANDLERS =====
|
||||
const handleExportExcel = useCallback(async () => {
|
||||
@@ -287,18 +414,20 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
|
||||
data: allDataForExport,
|
||||
params: {
|
||||
customer_name:
|
||||
filterCustomer.length > 0
|
||||
? filterCustomer.map((c) => c.label).join(', ')
|
||||
appliedFilterCustomer.length > 0
|
||||
? appliedFilterCustomer.map((c) => c.label).join(', ')
|
||||
: undefined,
|
||||
// TODO: Uncomment when BE is ready
|
||||
// sales:
|
||||
// filterSales.length > 0
|
||||
// ? filterSales.map((s) => s.label).join(', ')
|
||||
// appliedFilterSales.length > 0
|
||||
// ? appliedFilterSales.map((s) => s.label).join(', ')
|
||||
// : undefined,
|
||||
start_date: filterStartDate || undefined,
|
||||
end_date: filterEndDate || undefined,
|
||||
// TODO: Uncomment when BE is ready
|
||||
// filter_by: 'do_date' as const,
|
||||
start_date: appliedFilterStartDate || undefined,
|
||||
end_date: appliedFilterEndDate || undefined,
|
||||
filter_by: appliedFilterByType?.value as
|
||||
| 'trans_date'
|
||||
| 'realization_date'
|
||||
| undefined,
|
||||
},
|
||||
});
|
||||
toast.success('PDF berhasil dibuat dan diunduh.');
|
||||
@@ -406,7 +535,7 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
|
||||
footer: () => <div className='font-semibold text-gray-900'>Total</div>,
|
||||
},
|
||||
{
|
||||
id: 'do_date_or_payment_date',
|
||||
id: 'trans_date',
|
||||
header: 'Tanggal Jual/Bayar',
|
||||
accessorKey: 'trans_date',
|
||||
enableSorting: false,
|
||||
@@ -811,9 +940,7 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
|
||||
<DateInput
|
||||
name='start_date'
|
||||
value={filterStartDate}
|
||||
onChange={(e) => {
|
||||
setFilterStartDate(e.target.value);
|
||||
}}
|
||||
onChange={handleStartDateChange}
|
||||
className={{ wrapper: 'w-full' }}
|
||||
isNestedModal
|
||||
/>
|
||||
@@ -822,9 +949,7 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
|
||||
<DateInput
|
||||
name='end_date'
|
||||
value={filterEndDate}
|
||||
onChange={(e) => {
|
||||
setFilterEndDate(e.target.value);
|
||||
}}
|
||||
onChange={handleEndDateChange}
|
||||
className={{ wrapper: 'w-full' }}
|
||||
isNestedModal
|
||||
/>
|
||||
@@ -864,17 +989,18 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
|
||||
/>
|
||||
</div> */}
|
||||
|
||||
{/* TODO: Uncomment when BE is ready */}
|
||||
{/* <div>
|
||||
<SelectInput
|
||||
label='Filter Berdasarkan'
|
||||
placeholder='Pilih Filter Berdasarkan'
|
||||
options={dataTypeOptions}
|
||||
value={dataTypeOptions[0]}
|
||||
isDisabled={true}
|
||||
className={{ wrapper: 'w-full' }}
|
||||
/>
|
||||
</div> */}
|
||||
<SelectInputRadio
|
||||
label='Filter Berdasarkan'
|
||||
placeholder='Pilih Filter Berdasarkan'
|
||||
options={dataTypeOptions}
|
||||
value={filterByType}
|
||||
onChange={(val) => {
|
||||
if (val && !Array.isArray(val)) {
|
||||
setFilterByType(val);
|
||||
}
|
||||
}}
|
||||
className={{ wrapper: 'w-full' }}
|
||||
/>
|
||||
|
||||
{/* Action Buttons */}
|
||||
</div>
|
||||
@@ -889,6 +1015,7 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
|
||||
<Button
|
||||
className='min-w-40 text-sm rounded-lg py-3 text-white font-semibold'
|
||||
onClick={handleApplyFilters}
|
||||
disabled={hasDateError}
|
||||
>
|
||||
Apply Filter
|
||||
</Button>
|
||||
|
||||
+24
-5
@@ -513,16 +513,35 @@ export const FILTER_TYPE_OPTIONS = [
|
||||
|
||||
export const MARKETING_TYPE_OPTIONS = [
|
||||
{
|
||||
label: 'Ayam',
|
||||
value: 'ayam',
|
||||
label: 'Ayam Pullet',
|
||||
value: 'AYAM_PULLET',
|
||||
},
|
||||
{
|
||||
label: 'Telur',
|
||||
value: 'telur',
|
||||
label: 'Ayam',
|
||||
value: 'AYAM',
|
||||
},
|
||||
{
|
||||
label: 'Trading',
|
||||
value: 'trading',
|
||||
value: 'TRADING',
|
||||
},
|
||||
{
|
||||
label: 'Telur',
|
||||
value: 'TELUR',
|
||||
},
|
||||
];
|
||||
|
||||
export const MARKETING_CONVERTION_UNIT_OPTIONS = [
|
||||
{
|
||||
label: 'Kg',
|
||||
value: 'kg',
|
||||
},
|
||||
{
|
||||
label: 'Qty',
|
||||
value: 'qty',
|
||||
},
|
||||
{
|
||||
label: 'Peti',
|
||||
value: 'peti',
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
@@ -0,0 +1,507 @@
|
||||
/**
|
||||
* Marketing Product Calculation Hook
|
||||
*
|
||||
* Reusable calculation logic for Sales Order and Delivery Order forms.
|
||||
* Handles 6 scenarios: TRADING, AYAM_PULLET, AYAM, TELUR+KG, TELUR+PETI, TELUR+QTY
|
||||
*/
|
||||
|
||||
// ============ Types ============
|
||||
|
||||
export type MarketingFormValues = {
|
||||
qty?: string | number;
|
||||
avg_weight?: string | number;
|
||||
total_weight?: string | number;
|
||||
unit_price?: string | number;
|
||||
total_price?: string | number;
|
||||
marketing_type?: { value: string; label: string } | null;
|
||||
convertion_unit?: { value: string; label: string } | null;
|
||||
week?: { value?: number; label?: string } | null;
|
||||
weight_per_convertion?: number | null;
|
||||
price_per_convertion?: number | null;
|
||||
total_peti?: number | null;
|
||||
sisa_berat?: number | null;
|
||||
price_sisa_berat?: number | null;
|
||||
/** Harga per butir telur untuk TELUR + QTY */
|
||||
price_per_qty?: number | null;
|
||||
};
|
||||
|
||||
export type SetFieldValueFn = (
|
||||
field: string,
|
||||
value: string | number | null
|
||||
) => void;
|
||||
|
||||
export type CalculationContext = {
|
||||
values: MarketingFormValues;
|
||||
setFieldValue: SetFieldValueFn;
|
||||
hasSisaBerat: boolean;
|
||||
};
|
||||
|
||||
// ============ Helper Functions ============
|
||||
|
||||
/**
|
||||
* Round weight untuk operasi perkalian (total_weight = avg_weight × qty)
|
||||
* Precision: 2 decimal places
|
||||
*/
|
||||
export const roundWeight = (value: number): number => Number(value.toFixed(2));
|
||||
|
||||
/**
|
||||
* Precise weight untuk operasi pembagian (avg_weight = total_weight / qty)
|
||||
* Tidak di-round untuk menjaga akurasi maksimal
|
||||
*/
|
||||
export const preciseWeight = (value: number): number => value;
|
||||
|
||||
export const roundPrice = (value: number): number => Math.round(value);
|
||||
|
||||
// ============ Calculation Handlers ============
|
||||
|
||||
/**
|
||||
* TRADING: Penjualan non-livestock (obat-obatan, pakan, dll)
|
||||
* - Formula: total_price = qty × unit_price
|
||||
* - Weight fields: always 0
|
||||
*/
|
||||
export const calculateTrading = (
|
||||
field: string,
|
||||
ctx: CalculationContext
|
||||
): void => {
|
||||
const { values, setFieldValue } = ctx;
|
||||
const unitPrice = Number(values.unit_price || 0);
|
||||
const qty = Number(values.qty || 0);
|
||||
const totalPrice = Number(values.total_price || 0);
|
||||
|
||||
// Trading: avg_weight = 0, total_weight = 0
|
||||
setFieldValue('avg_weight', 0);
|
||||
setFieldValue('total_weight', 0);
|
||||
|
||||
switch (field) {
|
||||
case 'unit_price':
|
||||
case 'qty': {
|
||||
if (unitPrice > 0 && qty > 0) {
|
||||
setFieldValue('total_price', roundPrice(unitPrice * qty));
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'total_price': {
|
||||
if (totalPrice > 0 && qty > 0) {
|
||||
setFieldValue('unit_price', roundPrice(totalPrice / qty));
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* AYAM_PULLET: Penjualan pullet dengan harga berdasarkan umur minggu
|
||||
* - Formula: total_price = unit_price × week × qty
|
||||
* - total_weight = avg_weight × qty
|
||||
*/
|
||||
export const calculateAyamPullet = (
|
||||
field: string,
|
||||
ctx: CalculationContext
|
||||
): void => {
|
||||
const { values, setFieldValue } = ctx;
|
||||
const unitPrice = Number(values.unit_price || 0);
|
||||
const week = Number(values.week?.value || 0);
|
||||
const qty = Number(values.qty || 0);
|
||||
const avgWeight = Number(values.avg_weight || 0);
|
||||
const totalWeight = Number(values.total_weight || 0);
|
||||
const totalPrice = Number(values.total_price || 0);
|
||||
|
||||
switch (field) {
|
||||
case 'unit_price':
|
||||
case 'week':
|
||||
case 'qty': {
|
||||
// total_price = unit_price × week × qty
|
||||
if (unitPrice > 0 && week > 0 && qty > 0) {
|
||||
setFieldValue('total_price', roundPrice(unitPrice * week * qty));
|
||||
}
|
||||
// total_weight = avg_weight × qty
|
||||
if (avgWeight > 0 && qty > 0) {
|
||||
setFieldValue('total_weight', roundWeight(avgWeight * qty));
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'avg_weight': {
|
||||
if (avgWeight > 0 && qty > 0) {
|
||||
setFieldValue('total_weight', roundWeight(avgWeight * qty));
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'total_weight': {
|
||||
if (totalWeight > 0 && qty > 0) {
|
||||
setFieldValue('avg_weight', preciseWeight(totalWeight / qty));
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'total_price': {
|
||||
// Reverse: unit_price = total_price / (week × qty)
|
||||
if (totalPrice > 0 && week > 0 && qty > 0) {
|
||||
setFieldValue('unit_price', roundPrice(totalPrice / (week * qty)));
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* AYAM: Penjualan ayam hidup/potong dengan harga per kg
|
||||
* - Formula: total_price = total_weight × unit_price
|
||||
* - total_weight = qty × avg_weight
|
||||
*/
|
||||
export const calculateAyam = (field: string, ctx: CalculationContext): void => {
|
||||
const { values, setFieldValue } = ctx;
|
||||
const unitPrice = Number(values.unit_price || 0);
|
||||
const qty = Number(values.qty || 0);
|
||||
const avgWeight = Number(values.avg_weight || 0);
|
||||
const totalWeight = Number(values.total_weight || 0);
|
||||
const totalPrice = Number(values.total_price || 0);
|
||||
|
||||
switch (field) {
|
||||
case 'qty':
|
||||
case 'avg_weight': {
|
||||
// total_weight = qty × avg_weight
|
||||
if (qty > 0 && avgWeight > 0) {
|
||||
const tw = roundWeight(qty * avgWeight);
|
||||
setFieldValue('total_weight', tw);
|
||||
// total_price = total_weight × unit_price
|
||||
if (unitPrice > 0) {
|
||||
setFieldValue('total_price', roundPrice(tw * unitPrice));
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'total_weight': {
|
||||
// avg_weight = total_weight / qty
|
||||
if (totalWeight > 0 && qty > 0) {
|
||||
setFieldValue('avg_weight', preciseWeight(totalWeight / qty));
|
||||
}
|
||||
// total_price = total_weight × unit_price
|
||||
if (unitPrice > 0 && totalWeight > 0) {
|
||||
setFieldValue('total_price', roundPrice(totalWeight * unitPrice));
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'unit_price': {
|
||||
// total_price = total_weight × unit_price
|
||||
if (unitPrice > 0 && totalWeight > 0) {
|
||||
setFieldValue('total_price', roundPrice(totalWeight * unitPrice));
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'total_price': {
|
||||
// unit_price = total_price / total_weight
|
||||
if (totalPrice > 0 && totalWeight > 0) {
|
||||
setFieldValue('unit_price', roundPrice(totalPrice / totalWeight));
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* TELUR + PETI: Penjualan telur dalam satuan peti
|
||||
*
|
||||
* Formulas:
|
||||
* - total_weight = (weight_per_convertion × total_peti) + sisa_berat
|
||||
* - total_price = (price_per_convertion × total_peti) + price_sisa_berat
|
||||
* - unit_price = total_price / total_weight (untuk BE)
|
||||
* - avg_weight = total_weight / qty
|
||||
*/
|
||||
export const calculateTelurPeti = (
|
||||
field: string,
|
||||
ctx: CalculationContext
|
||||
): void => {
|
||||
const { values, setFieldValue, hasSisaBerat } = ctx;
|
||||
const pricePerConvertion = Number(values.price_per_convertion || 0);
|
||||
const totalPeti = Number(values.total_peti || 0);
|
||||
const weightPerConvertion = Number(values.weight_per_convertion || 0);
|
||||
const sisaBerat = hasSisaBerat ? Number(values.sisa_berat || 0) : 0;
|
||||
const priceSisaBerat = hasSisaBerat
|
||||
? Number(values.price_sisa_berat || 0)
|
||||
: 0;
|
||||
const qty = Number(values.qty || 0);
|
||||
|
||||
// Helper untuk menghitung dan set unit_price = total_price / total_weight
|
||||
const updateUnitPrice = (tp: number, tw: number) => {
|
||||
if (tw > 0 && tp > 0) {
|
||||
setFieldValue('unit_price', roundPrice(tp / tw));
|
||||
}
|
||||
};
|
||||
|
||||
switch (field) {
|
||||
case 'price_per_convertion': {
|
||||
// Recalculate total_price = (price_per_convertion × total_peti) + price_sisa_berat
|
||||
if (pricePerConvertion > 0 && totalPeti > 0) {
|
||||
const totalPrice = pricePerConvertion * totalPeti + priceSisaBerat;
|
||||
setFieldValue('total_price', roundPrice(totalPrice));
|
||||
// Recalculate unit_price = total_price / total_weight
|
||||
const totalWeight = weightPerConvertion * totalPeti + sisaBerat;
|
||||
updateUnitPrice(totalPrice, totalWeight);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'total_peti': {
|
||||
// Recalculate total_weight = (weight_per_convertion × total_peti) + sisa_berat
|
||||
let totalWeight = 0;
|
||||
if (weightPerConvertion > 0 && totalPeti > 0) {
|
||||
totalWeight = weightPerConvertion * totalPeti + sisaBerat;
|
||||
setFieldValue('total_weight', roundWeight(totalWeight));
|
||||
// Recalculate avg_weight = total_weight / qty
|
||||
if (qty > 0) {
|
||||
setFieldValue('avg_weight', preciseWeight(totalWeight / qty));
|
||||
}
|
||||
}
|
||||
// Recalculate total_price = (price_per_convertion × total_peti) + price_sisa_berat
|
||||
if (pricePerConvertion > 0 && totalPeti > 0) {
|
||||
const totalPrice = pricePerConvertion * totalPeti + priceSisaBerat;
|
||||
setFieldValue('total_price', roundPrice(totalPrice));
|
||||
// Recalculate unit_price = total_price / total_weight
|
||||
updateUnitPrice(totalPrice, totalWeight);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'price_sisa_berat': {
|
||||
// Recalculate total_price
|
||||
if (pricePerConvertion > 0 && totalPeti > 0) {
|
||||
const totalPrice = pricePerConvertion * totalPeti + priceSisaBerat;
|
||||
setFieldValue('total_price', roundPrice(totalPrice));
|
||||
// Recalculate unit_price = total_price / total_weight
|
||||
const totalWeight = weightPerConvertion * totalPeti + sisaBerat;
|
||||
updateUnitPrice(totalPrice, totalWeight);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'weight_per_convertion': {
|
||||
// Recalculate total_weight = (weight_per_convertion × total_peti) + sisa_berat
|
||||
if (weightPerConvertion > 0 && totalPeti > 0) {
|
||||
const totalWeight = weightPerConvertion * totalPeti + sisaBerat;
|
||||
setFieldValue('total_weight', roundWeight(totalWeight));
|
||||
// Recalculate avg_weight = total_weight / qty
|
||||
if (qty > 0) {
|
||||
setFieldValue('avg_weight', preciseWeight(totalWeight / qty));
|
||||
}
|
||||
// Recalculate unit_price = total_price / total_weight
|
||||
const totalPrice = pricePerConvertion * totalPeti + priceSisaBerat;
|
||||
updateUnitPrice(totalPrice, totalWeight);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'sisa_berat': {
|
||||
// Recalculate total_weight
|
||||
if (weightPerConvertion > 0 && totalPeti > 0) {
|
||||
const totalWeight = weightPerConvertion * totalPeti + sisaBerat;
|
||||
setFieldValue('total_weight', roundWeight(totalWeight));
|
||||
// Recalculate avg_weight = total_weight / qty
|
||||
if (qty > 0) {
|
||||
setFieldValue('avg_weight', preciseWeight(totalWeight / qty));
|
||||
}
|
||||
// Recalculate unit_price = total_price / total_weight
|
||||
const totalPrice = pricePerConvertion * totalPeti + priceSisaBerat;
|
||||
updateUnitPrice(totalPrice, totalWeight);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'total_price': {
|
||||
const totalPrice = Number(values.total_price || 0);
|
||||
// Reverse calculate price_per_convertion
|
||||
if (totalPeti > 0 && totalPrice > priceSisaBerat) {
|
||||
setFieldValue(
|
||||
'price_per_convertion',
|
||||
roundPrice((totalPrice - priceSisaBerat) / totalPeti)
|
||||
);
|
||||
}
|
||||
// Update unit_price = total_price / total_weight
|
||||
const totalWeight = weightPerConvertion * totalPeti + sisaBerat;
|
||||
updateUnitPrice(totalPrice, totalWeight);
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* TELUR + KG: Penjualan telur dalam satuan kilogram
|
||||
* - Formula: total_price = total_weight × unit_price
|
||||
* - avg_weight = total_weight / qty (calculated)
|
||||
*/
|
||||
export const calculateTelurKg = (
|
||||
field: string,
|
||||
ctx: CalculationContext
|
||||
): void => {
|
||||
const { values, setFieldValue } = ctx;
|
||||
const qty = Number(values.qty || 0);
|
||||
const totalWeight = Number(values.total_weight || 0);
|
||||
const totalPrice = Number(values.total_price || 0);
|
||||
const pricePerConvertion = Number(values.price_per_convertion || 0);
|
||||
|
||||
switch (field) {
|
||||
case 'total_weight':
|
||||
case 'qty': {
|
||||
// avg_weight = total_weight / qty
|
||||
if (totalWeight > 0 && qty > 0) {
|
||||
setFieldValue('avg_weight', preciseWeight(totalWeight / qty));
|
||||
}
|
||||
// total_price = total_weight × unit_price
|
||||
if (pricePerConvertion > 0 && totalWeight > 0) {
|
||||
setFieldValue(
|
||||
'total_price',
|
||||
roundPrice(totalWeight * pricePerConvertion)
|
||||
);
|
||||
setFieldValue('unit_price', pricePerConvertion);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'price_per_convertion': {
|
||||
// total_price = total_weight × price_per_convertion
|
||||
if (pricePerConvertion > 0 && totalWeight > 0) {
|
||||
setFieldValue(
|
||||
'total_price',
|
||||
roundPrice(totalWeight * pricePerConvertion)
|
||||
);
|
||||
setFieldValue('unit_price', pricePerConvertion);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'total_price': {
|
||||
// unit_price = total_price / total_weight
|
||||
if (totalPrice > 0 && totalWeight > 0) {
|
||||
setFieldValue('unit_price', roundPrice(totalPrice / totalWeight));
|
||||
setFieldValue(
|
||||
'price_per_convertion',
|
||||
roundPrice(totalPrice / totalWeight)
|
||||
);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* TELUR + QTY Workaround:
|
||||
* - User inputs: qty, avg_weight, price_per_qty (harga per butir)
|
||||
* - FE calculates:
|
||||
* - total_weight = avg_weight × qty
|
||||
* - total_price = qty × price_per_qty
|
||||
* - unit_price = total_price / total_weight (normalisasi untuk BE)
|
||||
* - Kirim convertion_unit: "KG" karena BE tidak support "QTY"
|
||||
* - BE akan hitung: total_price = total_weight × unit_price (hasil sama)
|
||||
*/
|
||||
export const calculateTelurQty = (
|
||||
field: string,
|
||||
ctx: CalculationContext
|
||||
): void => {
|
||||
const { values, setFieldValue } = ctx;
|
||||
const qty = Number(values.qty || 0);
|
||||
const avgWeight = Number(values.avg_weight || 0);
|
||||
const totalWeight = Number(values.total_weight || 0);
|
||||
const pricePerQty = Number(values.price_per_qty || 0);
|
||||
const totalPrice = Number(values.total_price || 0);
|
||||
const unitPrice = Number(values.unit_price || 0);
|
||||
|
||||
switch (field) {
|
||||
case 'qty':
|
||||
case 'avg_weight': {
|
||||
// total_weight = avg_weight × qty
|
||||
if (avgWeight > 0 && qty > 0) {
|
||||
const tw = roundWeight(avgWeight * qty);
|
||||
setFieldValue('total_weight', tw);
|
||||
// total_price = qty × price_per_qty
|
||||
if (pricePerQty > 0) {
|
||||
const tp = roundPrice(qty * pricePerQty);
|
||||
setFieldValue('total_price', tp);
|
||||
// unit_price = total_price / total_weight (untuk BE)
|
||||
if (tw > 0) {
|
||||
setFieldValue('unit_price', roundPrice(tp / tw));
|
||||
}
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'total_weight': {
|
||||
// avg_weight = total_weight / qty
|
||||
if (totalWeight > 0 && qty > 0) {
|
||||
setFieldValue('avg_weight', preciseWeight(totalWeight / qty));
|
||||
// Recalculate total_price jika ada unit_price
|
||||
if (unitPrice > 0) {
|
||||
setFieldValue('total_price', roundPrice(totalWeight * unitPrice));
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'price_per_qty': {
|
||||
// total_price = qty × price_per_qty
|
||||
if (pricePerQty > 0 && qty > 0) {
|
||||
const tp = roundPrice(qty * pricePerQty);
|
||||
setFieldValue('total_price', tp);
|
||||
// unit_price = total_price / total_weight (untuk BE)
|
||||
if (totalWeight > 0) {
|
||||
setFieldValue('unit_price', roundPrice(tp / totalWeight));
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'total_price': {
|
||||
// price_per_qty = total_price / qty
|
||||
if (totalPrice > 0 && qty > 0) {
|
||||
setFieldValue('price_per_qty', roundPrice(totalPrice / qty));
|
||||
// unit_price = total_price / total_weight (untuk BE)
|
||||
if (totalWeight > 0) {
|
||||
setFieldValue('unit_price', roundPrice(totalPrice / totalWeight));
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'unit_price': {
|
||||
// total_price = total_weight × unit_price
|
||||
if (unitPrice > 0 && totalWeight > 0) {
|
||||
setFieldValue('total_price', roundPrice(totalWeight * unitPrice));
|
||||
}
|
||||
// price_per_qty = total_price / qty
|
||||
if (totalPrice > 0 && qty > 0) {
|
||||
setFieldValue('price_per_qty', roundPrice(totalPrice / qty));
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// ============ Main Dispatcher ============
|
||||
|
||||
/**
|
||||
* Handle field blur and dispatch to appropriate calculation handler
|
||||
* based on marketing_type and convertion_unit
|
||||
*/
|
||||
export const handleMarketingCalculation = (
|
||||
field: string,
|
||||
ctx: CalculationContext
|
||||
): void => {
|
||||
const { values } = ctx;
|
||||
const marketingType = values.marketing_type?.value?.toLowerCase();
|
||||
const convertionUnit = values.convertion_unit?.value?.toLowerCase();
|
||||
|
||||
if (!marketingType) return;
|
||||
|
||||
const qty = Number(values.qty || 0);
|
||||
if (qty <= 0) return;
|
||||
|
||||
switch (marketingType) {
|
||||
case 'trading':
|
||||
calculateTrading(field, ctx);
|
||||
break;
|
||||
case 'ayam_pullet':
|
||||
calculateAyamPullet(field, ctx);
|
||||
break;
|
||||
case 'telur':
|
||||
if (convertionUnit === 'peti') {
|
||||
calculateTelurPeti(field, ctx);
|
||||
} else if (convertionUnit === 'kg') {
|
||||
calculateTelurKg(field, ctx);
|
||||
} else {
|
||||
// QTY mode - workaround dengan kirim KG ke BE
|
||||
calculateTelurQty(field, ctx);
|
||||
}
|
||||
break;
|
||||
case 'ayam':
|
||||
default:
|
||||
calculateAyam(field, ctx);
|
||||
break;
|
||||
}
|
||||
};
|
||||
@@ -15,9 +15,7 @@ export class FinanceApiService extends BaseApiService<
|
||||
customer_ids?: string,
|
||||
// TODO: Uncomment when BE is ready
|
||||
// sales_id?: string,
|
||||
// filter_by?: 'do_date',
|
||||
sales_id?: string,
|
||||
filter_by?: 'do_date' | undefined,
|
||||
filter_by?: 'trans_date' | 'realization_date',
|
||||
start_date?: string,
|
||||
end_date?: string,
|
||||
page?: number,
|
||||
@@ -31,7 +29,7 @@ export class FinanceApiService extends BaseApiService<
|
||||
customer_ids: customer_ids,
|
||||
// TODO: Uncomment when BE is ready
|
||||
// sales_id: sales_id,
|
||||
// filter_by: filter_by,
|
||||
filter_by: filter_by,
|
||||
start_date: start_date,
|
||||
end_date: end_date,
|
||||
page: page,
|
||||
|
||||
+12
@@ -36,6 +36,12 @@ export type BaseSalesOrder = {
|
||||
total_price: number;
|
||||
product_warehouse: ProductWarehouse;
|
||||
vehicle_number: string;
|
||||
marketing_type: string;
|
||||
convertion_unit: string;
|
||||
total_peti: number;
|
||||
weight_per_convertion: number;
|
||||
/** Umur minggu untuk AYAM_PULLET */
|
||||
week?: number;
|
||||
};
|
||||
|
||||
export type BaseDeliveryOrder = {
|
||||
@@ -110,6 +116,12 @@ export type BaseCreateMarketingProductPayload = {
|
||||
qty: string | number | undefined;
|
||||
avg_weight: string | number | undefined;
|
||||
total_price: string | number | undefined;
|
||||
marketing_type: string;
|
||||
convertion_unit?: 'PETI' | 'KG';
|
||||
/** Berat per peti (kg), hanya untuk TELUR + PETI */
|
||||
weight_per_convertion?: number;
|
||||
/** Umur minggu untuk AYAM_PULLET */
|
||||
week?: number;
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
Vendored
+14
-4
@@ -1,10 +1,15 @@
|
||||
import { BaseApproval, BaseMetadata } from '@/types/api/api-general';
|
||||
import {
|
||||
BaseApproval,
|
||||
BaseMetadata,
|
||||
CreatedUser,
|
||||
} from '@/types/api/api-general';
|
||||
import { Supplier } from '@/types/api/master-data/supplier';
|
||||
import { Warehouse } from '@/types/api/master-data/warehouse';
|
||||
import { Product } from '@/types/api/master-data/product';
|
||||
import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
|
||||
import { Area } from '@/types/api/master-data/area';
|
||||
import { Location } from '@/types/api/master-data/location';
|
||||
import { Uom } from '@/types/api/master-data/uom';
|
||||
|
||||
export type PurchaseItemProduct = {
|
||||
id: number;
|
||||
@@ -12,14 +17,15 @@ export type PurchaseItemProduct = {
|
||||
flags?: string[];
|
||||
ProductPrice?: number;
|
||||
SellingPrice?: number;
|
||||
uom?: {
|
||||
name: string;
|
||||
};
|
||||
uom: Uom;
|
||||
product_category?:
|
||||
| {
|
||||
id: number;
|
||||
name: string;
|
||||
code: string;
|
||||
}
|
||||
| string;
|
||||
suppliers?: Supplier[];
|
||||
};
|
||||
|
||||
export type PurchaseItem = {
|
||||
@@ -69,6 +75,10 @@ export type BasePurchase = {
|
||||
warehouse?: Warehouse;
|
||||
items?: PurchaseItem[];
|
||||
latest_approval?: BaseApproval;
|
||||
requester_name?: string;
|
||||
po_expedition?: string[];
|
||||
created_user?: CreatedUser;
|
||||
products?: PurchaseItemProduct[];
|
||||
};
|
||||
|
||||
export type Purchase = BaseMetadata & BasePurchase;
|
||||
|
||||
Reference in New Issue
Block a user