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

Merge branch 'development' into 'production'

Browse Source 
Development

See merge request mbugroup/lti-web-client!427
This commit is contained in:
Adnan Zahir
2026-04-23 12:38:36 +07:00
parent 4b62b02a13 a12b09eb5f
commit 6b95edfb72
24 changed files with 1115 additions and 309 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.husky/pre-commit
+2 -1
View File
@@ -1,3 +1,4 @@
npm run format
npm run lint
npm run typecheck
npm run typecheck
git add .
src/components/pages/expense/ExpensesTable.tsx
+156 -47
View File
@@ -41,7 +41,7 @@ import Dropdown from '@/components/dropdown/Dropdown';
import { Expense } from '@/types/api/expense';
import { ExpenseApi } from '@/services/api/expense';
import { cn, formatCurrency, formatDate } from '@/lib/helper';
import { isResponseSuccess } from '@/lib/api-helper';
import { getErrorMessage, isResponseSuccess } from '@/lib/api-helper';
import { useTableFilter } from '@/services/hooks/useTableFilter';
import { BaseApiResponse } from '@/types/api/api-general';
@@ -51,7 +51,16 @@ type ExpenseTableFilters = {
transactionDate: string;
realizationDate: string;
locationId: string;
locationName: string;
vendorId: string;
vendorName: string;
category: string;
approvalStatus: string;
realizationStatus: string;
projectFlockId: string;
projectFlockName: string;
projectFlockKandangId: string;
projectFlockKandangName: string;
userId: string;
};
@@ -75,43 +84,6 @@ type ApprovalStatusValue =
const isApprovalDateRequired = (status?: ApprovalStatusValue) =>
status === 'REALISASI' || status === 'SELESAI';
const getExportErrorMessage = async (
error: unknown,
fallbackMessage: string
) => {
if (axios.isAxiosError(error)) {
const responseData = error.response?.data;
if (responseData instanceof Blob) {
try {
const parsed = JSON.parse(await responseData.text()) as {
message?: string;
};
return parsed.message || fallbackMessage;
} catch {
return fallbackMessage;
}
}
if (
responseData &&
typeof responseData === 'object' &&
'message' in responseData &&
typeof responseData.message === 'string'
) {
return responseData.message;
}
return error.message || fallbackMessage;
}
if (error instanceof Error) {
return error.message;
}
return fallbackMessage;
};
const RowOptionsMenu = ({
popoverPosition = 'bottom',
props,
@@ -235,6 +207,7 @@ const ExpensesTable = () => {
setPage,
setPageSize,
toQueryString: getTableFilterQueryString,
reset: resetFilter,
} = useTableFilter<ExpenseTableFilters>({
initial: {
page: 1,
@@ -244,7 +217,16 @@ const ExpensesTable = () => {
transactionDate: '',
realizationDate: '',
locationId: '',
locationName: '',
vendorId: '',
vendorName: '',
category: '',
approvalStatus: '',
realizationStatus: '',
projectFlockId: '',
projectFlockName: '',
projectFlockKandangId: '',
projectFlockKandangName: '',
userId: '',
},
paramMap: {
@@ -254,7 +236,16 @@ const ExpensesTable = () => {
transactionDate: 'transaction_date',
realizationDate: 'realization_date',
locationId: 'location_id',
locationName: 'location_name',
vendorId: 'vendor_id',
vendorName: 'vendor_name',
category: 'category',
approvalStatus: 'approval_status',
realizationStatus: 'realization_status',
projectFlockId: 'project_flock_id',
projectFlockName: 'project_flock_name',
projectFlockKandangId: 'project_flock_kandang_id',
projectFlockKandangName: 'project_flock_kandang_name',
userId: 'user_id',
},
@@ -286,6 +277,8 @@ const ExpensesTable = () => {
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
const [isApproveLoading, setIsApproveLoading] = useState(false);
const [isRejectLoading, setIsRejectLoading] = useState(false);
const [isLoadingExportingToExcel, setIsLoadingExportingToExcel] =
useState(false);
const [isExportProgressLoading, setIsExportProgressLoading] = useState(false);
const [, setApprovalNotes] = useState('');
const [bulkApprovalStatus, setBulkApprovalStatus] =
@@ -575,7 +568,7 @@ const ExpensesTable = () => {
toast.success('Ekspor berhasil');
} catch (error) {
toast.error(
await getExportErrorMessage(error, 'Gagal mengekspor input progress')
await getErrorMessage(error, 'Gagal mengekspor input progress')
);
} finally {
setIsExportProgressLoading(false);
@@ -740,22 +733,70 @@ const ExpensesTable = () => {
const handleFilterSubmit = (values: {
transaction_date?: string | null;
realization_date?: string | null;
location_id?: string | null;
vendor_id?: string | null;
location?: { value: number; label: string } | null;
vendor?: { value: number; label: string } | null;
category?: OptionType<string> | null;
approval_status?: OptionType<string> | null;
realization_status?: OptionType<string> | null;
project_flock?: OptionType<number> | null;
project_flock_kandang?: OptionType<number> | null;
}) => {
updateFilter('transactionDate', values.transaction_date || '');
updateFilter('realizationDate', values.realization_date || '');
updateFilter('locationId', values.location_id || '');
updateFilter('vendorId', values.vendor_id || '');
updateFilter(
'locationId',
values.location?.value ? String(values.location?.value) : ''
);
updateFilter(
'locationName',
values.location?.label ? String(values.location?.label) : ''
);
updateFilter(
'vendorId',
values.vendor?.value ? String(values.vendor?.value) : ''
);
updateFilter(
'vendorName',
values.vendor?.label ? String(values.vendor?.label) : ''
);
updateFilter('category', values.category?.value || '');
updateFilter('approvalStatus', values.approval_status?.value || '');
updateFilter('realizationStatus', values.realization_status?.value || '');
updateFilter(
'projectFlockId',
values.project_flock?.value ? String(values.project_flock.value) : ''
);
updateFilter('projectFlockName', values.project_flock?.label || '');
updateFilter(
'projectFlockKandangId',
values.project_flock_kandang?.value
? String(values.project_flock_kandang.value)
: ''
);
updateFilter(
'projectFlockKandangName',
values.project_flock_kandang?.label || ''
);
};
const handleFilterReset = () => {
updateFilter('transactionDate', '');
updateFilter('realizationDate', '');
updateFilter('locationId', '');
updateFilter('vendorId', '');
resetFilter();
};
const exportToExcel = useCallback(async () => {
setIsLoadingExportingToExcel(true);
try {
await ExpenseApi.exportToExcel(getTableFilterQueryString());
} catch (error) {
toast.error(
await getErrorMessage(error, 'Gagal mengekspor data pengeluaran')
);
} finally {
setIsLoadingExportingToExcel(false);
}
}, [getTableFilterQueryString]);
// track sorting
useEffect(() => {
const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
@@ -927,6 +968,10 @@ const ExpensesTable = () => {
'search',
'nameSort',
'userId',
'locationName',
'vendorName',
'projectFlockName',
'projectFlockKandangName',
]}
onClick={handleFilterModalOpen}
className='px-3 py-2.5'
@@ -965,6 +1010,17 @@ const ExpensesTable = () => {
</Button>
}
>
<Button
variant='ghost'
color='none'
onClick={exportToExcel}
isLoading={isLoadingExportingToExcel}
className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
>
<Icon icon='heroicons:table-cells' width={20} height={20} />
Ekspor ke Excel
</Button>
<Button
variant='ghost'
color='none'
@@ -1245,6 +1301,59 @@ const ExpensesTable = () => {
ref={filterModal.ref}
onSubmit={handleFilterSubmit}
onReset={handleFilterReset}
initialValues={{
location:
tableFilterState.locationId && tableFilterState.locationName
? {
value: Number(tableFilterState.locationId),
label: tableFilterState.locationName,
}
: null,
vendor:
tableFilterState.vendorId && tableFilterState.vendorName
? {
value: Number(tableFilterState.vendorId),
label: tableFilterState.vendorName,
}
: null,
realization_date: tableFilterState.realizationDate,
transaction_date: tableFilterState.transactionDate,
category: tableFilterState.category
? {
value: tableFilterState.category,
label: tableFilterState.category,
}
: null,
approval_status: tableFilterState.approvalStatus
? approvalStatusOptions.find(
(item) => item.value === tableFilterState.approvalStatus
) || null
: null,
realization_status: tableFilterState.realizationStatus
? [
{ value: 'NOT_REALIZED', label: 'Belum Realisasi' },
{ value: 'REALIZED', label: 'Sudah Realisasi' },
{ value: 'REJECTED', label: 'Ditolak' },
].find(
(item) => item.value === tableFilterState.realizationStatus
) || null
: null,
project_flock:
tableFilterState.projectFlockId && tableFilterState.projectFlockName
? {
value: Number(tableFilterState.projectFlockId),
label: tableFilterState.projectFlockName,
}
: null,
project_flock_kandang:
tableFilterState.projectFlockKandangId &&
tableFilterState.projectFlockKandangName
? {
value: Number(tableFilterState.projectFlockKandangId),
label: tableFilterState.projectFlockKandangName,
}
: null,
}}
/>
</>
);
src/components/pages/expense/filter/ExpensesFilter.ts
+49 -4
View File
@@ -3,8 +3,13 @@ import * as yup from 'yup';
export type ExpensesFilterType = {
transaction_date: string | null;
realization_date: string | null;
location_id: string | null;
vendor_id: string | null;
location: { value: number; label: string } | null;
vendor: { value: number; label: string } | null;
category: { value: string; label: string } | null;
approval_status: { value: string; label: string } | null;
realization_status: { value: string; label: string } | null;
project_flock: { value: number; label: string } | null;
project_flock_kandang: { value: number; label: string } | null;
};
export const ExpensesFilterSchema = yup.object({
@@ -21,8 +26,48 @@ export const ExpensesFilterSchema = yup.object({
return new Date(value) >= new Date(transaction_date);
}
),
location_id: yup.string().nullable(),
vendor_id: yup.string().nullable(),
location: yup
.object({
value: yup.number().required(),
label: yup.string().required(),
})
.nullable(),
vendor: yup
.object({
value: yup.number().required(),
label: yup.string().required(),
})
.nullable(),
category: yup
.object({
value: yup.string().required(),
label: yup.string().required(),
})
.nullable(),
approval_status: yup
.object({
value: yup.string().required(),
label: yup.string().required(),
})
.nullable(),
realization_status: yup
.object({
value: yup.string().required(),
label: yup.string().required(),
})
.nullable(),
project_flock: yup
.object({
value: yup.number().required(),
label: yup.string().required(),
})
.nullable(),
project_flock_kandang: yup
.object({
value: yup.number().required(),
label: yup.string().required(),
})
.nullable(),
});
export type ExpensesFilterValues = yup.InferType<typeof ExpensesFilterSchema>;
src/components/pages/expense/filter/ExpensesFilterModal.tsx
+182 -26
View File
@@ -1,6 +1,6 @@
'use client';
import { RefObject } from 'react';
import { RefObject, useCallback, useEffect, useMemo, useState } from 'react';
import { useFormik } from 'formik';
import { Icon } from '@iconify/react';
@@ -11,8 +11,11 @@ import SelectInput from '@/components/input/SelectInput';
import { OptionType, useSelect } from '@/components/input/SelectInput';
import { LocationApi, SupplierApi } from '@/services/api/master-data';
import { ProjectFlockApi } from '@/services/api/production';
import { Location } from '@/types/api/master-data/location';
import { Supplier } from '@/types/api/master-data/supplier';
import { ProjectFlock } from '@/types/api/production/project-flock';
import { isResponseSuccess } from '@/lib/api-helper';
import {
ExpensesFilterSchema,
ExpensesFilterValues,
@@ -31,64 +34,143 @@ const ExpensesFilterModal = ({
onSubmit,
onReset,
}: ExpensesFilterModalProps) => {
const [selectedLocationId, setSelectedLocationId] = useState<string>(
initialValues?.location?.value ? String(initialValues.location.value) : ''
);
const closeModalHandler = () => {
ref.current?.close();
};
const categoryOptions = [
{ value: 'BOP', label: 'BOP' },
{ value: 'NON-BOP', label: 'NON-BOP' },
];
const approvalStatusOptions = [
{ value: 'HEAD_AREA', label: 'Approval Head Area' },
{ value: 'UNIT_VICE_PRESIDENT', label: 'Approval Unit Vice President' },
{ value: 'FINANCE', label: 'Approval Finance' },
{ value: 'REALISASI', label: 'Realisasi' },
{ value: 'SELESAI', label: 'Selesai' },
{ value: 'DITOLAK', label: 'Ditolak' },
];
const realizationStatusOptions = [
{ value: 'NOT_REALIZED', label: 'Belum Realisasi' },
{ value: 'REALIZED', label: 'Sudah Realisasi' },
{ value: 'REJECTED', label: 'Ditolak' },
];
const {
setInputValue: setLocationInputValue,
options: locationOptions,
isLoadingOptions: isLoadingLocationOptions,
loadMore: loadMoreLocations,
} = useSelect<Location>(LocationApi.basePath, 'id', 'name');
const {
setInputValue: setVendorInputValue,
options: vendorOptions,
isLoadingOptions: isLoadingVendorOptions,
loadMore: loadMoreVendors,
} = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name');
const {
setInputValue: setProjectFlockInputValue,
rawData: projectFlocksRawData,
options: projectFlockOptions,
isLoadingOptions: isLoadingProjectFlockOptions,
loadMore: loadMoreProjectFlocks,
} = useSelect<ProjectFlock>(
ProjectFlockApi.basePath,
'id',
'flock_name',
'search',
{
location_id: selectedLocationId || '',
}
);
const formik = useFormik<ExpensesFilterValues>({
enableReinitialize: true,
initialValues: initialValues || {
transaction_date: null,
realization_date: null,
location_id: null,
vendor_id: null,
location: null,
vendor: null,
category: null,
approval_status: null,
realization_status: null,
project_flock: null,
project_flock_kandang: null,
},
validationSchema: ExpensesFilterSchema,
onSubmit: async (values) => {
onSubmit?.(values);
closeModalHandler();
},
onReset: () => {
onReset?.();
closeModalHandler();
},
});
const locationValue = formik.values.location_id
? locationOptions.find(
(opt) => String(opt.value) === formik.values.location_id
) || null
: null;
useEffect(() => {
setSelectedLocationId(
initialValues?.location?.value ? String(initialValues.location.value) : ''
);
}, [initialValues?.location]);
const vendorValue = formik.values.vendor_id
? vendorOptions.find(
(opt) => String(opt.value) === formik.values.vendor_id
) || null
: null;
const { resetForm } = formik;
const formikResetHandler = useCallback(() => {
resetForm({
values: {
transaction_date: null,
realization_date: null,
location: null,
vendor: null,
category: null,
approval_status: null,
realization_status: null,
project_flock: null,
project_flock_kandang: null,
},
});
setSelectedLocationId('');
onReset?.();
closeModalHandler();
}, [resetForm, onReset, closeModalHandler]);
const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
const locationId =
val && !Array.isArray(val) ? (String(val.value) as string) : null;
formik.setFieldValue('location_id', locationId);
const value = val as OptionType | null;
formik.setFieldValue('location', value);
formik.setFieldValue('project_flock', null);
formik.setFieldValue('project_flock_kandang', null);
setSelectedLocationId(value?.value ? String(value.value) : '');
};
const vendorChangeHandler = (val: OptionType | OptionType[] | null) => {
const vendorId =
val && !Array.isArray(val) ? (String(val.value) as string) : null;
formik.setFieldValue('vendor_id', vendorId);
formik.setFieldValue('vendor', val as OptionType | null);
};
const projectFlockKandangOptions = useMemo(() => {
if (
!formik.values.project_flock ||
!projectFlocksRawData ||
!isResponseSuccess(projectFlocksRawData)
) {
return [];
}
const selectedProjectFlock = projectFlocksRawData.data.find(
(item) => item.id === formik.values.project_flock?.value
);
return (
selectedProjectFlock?.kandangs?.map((item) => ({
value: item.project_flock_kandang_id,
label: item.name,
})) || []
);
}, [formik.values.project_flock, projectFlocksRawData]);
return (
<Modal
ref={ref}
@@ -98,7 +180,7 @@ const ExpensesFilterModal = ({
>
<form
onSubmit={formik.handleSubmit}
onReset={formik.handleReset}
onReset={formikResetHandler}
className='w-full flex flex-col'
>
{/* Modal Header */}
@@ -160,10 +242,11 @@ const ExpensesFilterModal = ({
label='Lokasi'
placeholder='Pilih Lokasi'
options={locationOptions}
value={locationValue}
value={formik.values.location}
onChange={locationChangeHandler}
onInputChange={setLocationInputValue}
isLoading={isLoadingLocationOptions}
onMenuScrollToBottom={loadMoreLocations}
isClearable
isSearchable={true}
className={{ wrapper: 'w-full' }}
@@ -173,14 +256,87 @@ const ExpensesFilterModal = ({
label='Vendor'
placeholder='Pilih Vendor'
options={vendorOptions}
value={vendorValue}
value={formik.values.vendor}
onChange={vendorChangeHandler}
onInputChange={setVendorInputValue}
isLoading={isLoadingVendorOptions}
onMenuScrollToBottom={loadMoreVendors}
isClearable
isSearchable={true}
className={{ wrapper: 'w-full' }}
/>
<SelectInput
label='Kategori'
placeholder='Pilih Kategori'
options={categoryOptions}
value={formik.values.category}
onChange={(val) =>
formik.setFieldValue('category', val as OptionType | null)
}
isClearable
className={{ wrapper: 'w-full' }}
/>
<SelectInput
label='Status BOP'
placeholder='Pilih Status BOP'
options={approvalStatusOptions}
value={formik.values.approval_status}
onChange={(val) =>
formik.setFieldValue('approval_status', val as OptionType | null)
}
isClearable
className={{ wrapper: 'w-full' }}
/>
<SelectInput
label='Status Pencairan'
placeholder='Pilih Status Pencairan'
options={realizationStatusOptions}
value={formik.values.realization_status}
onChange={(val) =>
formik.setFieldValue(
'realization_status',
val as OptionType | null
)
}
isClearable
className={{ wrapper: 'w-full' }}
/>
<SelectInput
label='Project Flock'
placeholder='Pilih Project Flock'
options={projectFlockOptions}
value={formik.values.project_flock}
onChange={(val) => {
formik.setFieldValue('project_flock', val as OptionType | null);
formik.setFieldValue('project_flock_kandang', null);
}}
onInputChange={setProjectFlockInputValue}
isLoading={isLoadingProjectFlockOptions}
onMenuScrollToBottom={loadMoreProjectFlocks}
isClearable
isSearchable={true}
className={{ wrapper: 'w-full' }}
/>
<SelectInput
label='Kandang'
placeholder='Pilih Kandang'
options={projectFlockKandangOptions}
value={formik.values.project_flock_kandang}
onChange={(val) =>
formik.setFieldValue(
'project_flock_kandang',
val as OptionType | null
)
}
isClearable
isDisabled={!formik.values.project_flock}
className={{ wrapper: 'w-full' }}
/>
</div>
{/* Modal Footer */}
src/components/pages/marketing/MarketingFilter.tsx
+72
View File
@@ -20,6 +20,8 @@ import { MarketingApi } from '@/services/api/marketing/marketing';
import { CustomerApi } from '@/services/api/master-data';
import { isResponseSuccess } from '@/lib/api-helper';
import { BaseMarketing, BaseSalesOrder } from '@/types/api/marketing/marketing';
import { ProjectFlockApi } from '@/services/api/production';
import { ProjectFlock } from '@/types/api/production/project-flock';
interface MarketingFilterModal {
ref: RefObject<HTMLDialogElement | null>;
@@ -78,6 +80,19 @@ const MarketingFilterModal = ({
has_marketing: 'true',
});
const {
options: projectFlockOptions,
rawData: projectFlocksRawData,
isLoadingOptions: isLoadingProjectFlockOptions,
setInputValue: setProjectFlockInputValue,
loadMore: loadMoreProjectFlocks,
} = useSelect<ProjectFlock>(
ProjectFlockApi.basePath,
'id',
'flock_name',
'search'
);
const statusOptions = [
...MARKETING_APPROVAL_LINE.map((item) => ({
value: item.step_name.split(' ').join('_').toUpperCase(),
@@ -91,6 +106,8 @@ const MarketingFilterModal = ({
product_ids: [],
status: null,
customer: null,
project_flock: null,
project_flock_kandang: null,
},
validationSchema: MarketingFilterSchema,
@@ -99,6 +116,9 @@ const MarketingFilterModal = ({
product_ids: values.product_ids.map((item) => Number(item.value)),
status: values.status?.value.toString() || '',
customer_id: Number(values.customer?.value),
project_flock_id: Number(values.project_flock?.value) || undefined,
project_flock_kandang_id:
Number(values.project_flock_kandang?.value) || undefined,
};
onSubmit?.(formattedValues);
@@ -126,6 +146,27 @@ const MarketingFilterModal = ({
formik.setFieldValue('status', val as OptionType);
};
const projectFlockKandangOptions = useMemo(() => {
if (
!formik.values.project_flock ||
!projectFlocksRawData ||
!isResponseSuccess(projectFlocksRawData)
) {
return [];
}
const selectedProjectFlock = projectFlocksRawData.data.find(
(item) => item.id === formik.values.project_flock?.value
);
return (
selectedProjectFlock?.kandangs?.map((item) => ({
value: item.project_flock_kandang_id,
label: item.name,
})) || []
);
}, [formik.values.project_flock, projectFlocksRawData]);
return (
<Modal
ref={ref}
@@ -192,6 +233,37 @@ const MarketingFilterModal = ({
onInputChange={setCustomersInputValue}
onMenuScrollToBottom={loadMoreCustomers}
/>
<SelectInput
label='Project Flock'
isClearable
placeholder='Pilih Project Flock'
options={projectFlockOptions}
isLoading={isLoadingProjectFlockOptions}
value={formik.values.project_flock}
onChange={(val) => {
formik.setFieldValue(
'project_flock',
!Array.isArray(val) ? (val as OptionType<number> | null) : null
);
formik.setFieldValue('project_flock_kandang', null);
}}
onInputChange={setProjectFlockInputValue}
onMenuScrollToBottom={loadMoreProjectFlocks}
/>
<SelectInput
label='Kandang'
isClearable
placeholder='Pilih Kandang'
options={projectFlockKandangOptions}
value={formik.values.project_flock_kandang}
onChange={(val) =>
formik.setFieldValue(
'project_flock_kandang',
!Array.isArray(val) ? (val as OptionType<number> | null) : null
)
}
isDisabled={!formik.values.project_flock}
/>
</div>
{/* Modal Footer */}
src/components/pages/marketing/MarketingTable.tsx
+25 -40
View File
@@ -9,7 +9,11 @@ import Modal, { useModal } from '@/components/Modal';
import ConfirmationModal from '@/components/modal/ConfirmationModal';
import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
import Table from '@/components/Table';
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
import {
getErrorMessage,
isResponseError,
isResponseSuccess,
} from '@/lib/api-helper';
import { cn, formatCurrency, formatDate, formatTitleCase } from '@/lib/helper';
import {
MarketingApi,
@@ -37,43 +41,6 @@ import MarketingFilterModal from '@/components/pages/marketing/MarketingFilter';
import ButtonFilter from '@/components/helper/ButtonFilter';
import MarketingTableSkeleton from '@/components/pages/marketing/skeleton/MarketingTableSkeleton';
const getExportErrorMessage = async (
error: unknown,
fallbackMessage: string
) => {
if (axios.isAxiosError(error)) {
const responseData = error.response?.data;
if (responseData instanceof Blob) {
try {
const parsed = JSON.parse(await responseData.text()) as {
message?: string;
};
return parsed.message || fallbackMessage;
} catch {
return fallbackMessage;
}
}
if (
responseData &&
typeof responseData === 'object' &&
'message' in responseData &&
typeof responseData.message === 'string'
) {
return responseData.message;
}
return error.message || fallbackMessage;
}
if (error instanceof Error) {
return error.message;
}
return fallbackMessage;
};
const RowsOptionsMenu = ({
props,
deleteClickHandler,
@@ -224,6 +191,8 @@ const MarketingTable = () => {
product_ids: '',
status: '',
customer_id: '',
project_flock_id: '',
project_flock_kandang_id: '',
},
paramMap: {
page: 'page',
@@ -231,6 +200,8 @@ const MarketingTable = () => {
product_ids: 'product_ids',
status: 'status',
customer_id: 'customer_id',
project_flock_id: 'project_flock_id',
project_flock_kandang_id: 'project_flock_kandang_id',
},
persist: true,
@@ -260,6 +231,18 @@ const MarketingTable = () => {
values.customer_id ? values.customer_id.toString() : '',
true
);
updateFilter(
'project_flock_id',
values.project_flock_id ? values.project_flock_id.toString() : '',
true
);
updateFilter(
'project_flock_kandang_id',
values.project_flock_kandang_id
? values.project_flock_kandang_id.toString()
: '',
true
);
};
const [isLoadingExportingToExcel, setIsLoadingExportingToExcel] =
@@ -269,6 +252,8 @@ const MarketingTable = () => {
updateFilter('product_ids', '', true);
updateFilter('status', '', true);
updateFilter('customer_id', '', true);
updateFilter('project_flock_id', '', true);
updateFilter('project_flock_kandang_id', '', true);
};
const approveClickHandler = () => {
@@ -519,7 +504,7 @@ const MarketingTable = () => {
toast.success('Ekspor berhasil');
} catch (error) {
toast.error(
await getExportErrorMessage(error, 'Gagal mengekspor input progress')
await getErrorMessage(error, 'Gagal mengekspor input progress')
);
} finally {
setIsExportProgressLoading(false);
@@ -835,7 +820,7 @@ const MarketingTable = () => {
className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
>
<Icon icon='heroicons:table-cells' width={20} height={20} />
Export to Excel
Ekspor ke Excel
</Button>
<Button
src/components/pages/marketing/filter/MarketingFilter.ts
+4
View File
@@ -5,10 +5,14 @@ export const MarketingFilterSchema = object({
product_ids: array().of(mixed<OptionType<number>>().required()).required(),
status: mixed<OptionType<string>>().nullable(),
customer: mixed<OptionType<number>>().nullable(),
project_flock: mixed<OptionType<number>>().nullable(),
project_flock_kandang: mixed<OptionType<number>>().nullable(),
});
export type MarketingFilterFormValues = {
product_ids: OptionType<number>[];
status: OptionType<string> | null;
customer: OptionType<number> | null;
project_flock: OptionType<number> | null;
project_flock_kandang: OptionType<number> | null;
};
src/components/pages/production/recording/RecordingTable.tsx
+89 -44
View File
@@ -41,7 +41,7 @@ import Table from '@/components/Table';
import { type Recording } from '@/types/api/production/recording';
import { getRecordingRestriction } from './recording-utils';
import { RecordingApi } from '@/services/api/production';
import { isResponseSuccess } from '@/lib/api-helper';
import { getErrorMessage, isResponseSuccess } from '@/lib/api-helper';
import { useTableFilter } from '@/services/hooks/useTableFilter';
import toast from 'react-hot-toast';
import StatusBadge from '@/components/helper/StatusBadge';
@@ -52,43 +52,6 @@ import { Color } from '@/types/theme';
import ButtonFilter from '@/components/helper/ButtonFilter';
import Dropdown from '@/components/Dropdown';
const getExportErrorMessage = async (
error: unknown,
fallbackMessage: string
) => {
if (axios.isAxiosError(error)) {
const responseData = error.response?.data;
if (responseData instanceof Blob) {
try {
const parsed = JSON.parse(await responseData.text()) as {
message?: string;
};
return parsed.message || fallbackMessage;
} catch {
return fallbackMessage;
}
}
if (
responseData &&
typeof responseData === 'object' &&
'message' in responseData &&
typeof responseData.message === 'string'
) {
return responseData.message;
}
return error.message || fallbackMessage;
}
if (error instanceof Error) {
return error.message;
}
return fallbackMessage;
};
// ===== STATUS BADGE UTILITIES =====
const statusTextMap: Record<string, string> = {
APPROVED: 'Disetujui',
@@ -319,15 +282,23 @@ const RecordingTable = () => {
search: '',
areaFilter: '',
locationFilter: '',
projectFlockFilter: '',
kandangFilter: '',
projectFlockKandangFilter: '',
approvalStatusFilter: '',
projectFlockCategoryFilter: '',
},
paramMap: {
page: 'page',
pageSize: 'limit',
search: 'search',
areaFilter: 'area_id',
locationFilter: 'location_id',
projectFlockFilter: 'project_flock_id',
kandangFilter: 'kandang_id',
projectFlockKandangFilter: 'project_flock_kandang_id',
approvalStatusFilter: 'approval_status',
projectFlockCategoryFilter: 'project_flock_category',
},
});
@@ -356,26 +327,38 @@ const RecordingTable = () => {
initialValues: {
area_id: null,
location_id: null,
project_flock_id: null,
kandang_id: null,
project_flock_kandang_id: null,
approval_status: null,
project_flock_category: null,
},
validationSchema: RecordingFilterSchema,
onSubmit: (values, { setSubmitting }) => {
updateFilter('areaFilter', values.area_id || '');
updateFilter('locationFilter', values.location_id || '');
updateFilter('projectFlockFilter', values.project_flock_id || '');
updateFilter('kandangFilter', values.kandang_id || '');
updateFilter(
'projectFlockKandangFilter',
values.project_flock_kandang_id || ''
);
updateFilter('approvalStatusFilter', values.approval_status || '');
updateFilter(
'projectFlockCategoryFilter',
values.project_flock_category || ''
);
filterModal.closeModal();
setSubmitting(false);
},
onReset: () => {
updateFilter('areaFilter', '');
updateFilter('locationFilter', '');
updateFilter('projectFlockFilter', '');
updateFilter('kandangFilter', '');
updateFilter('projectFlockKandangFilter', '');
updateFilter('approvalStatusFilter', '');
updateFilter('projectFlockCategoryFilter', '');
},
});
@@ -537,6 +520,7 @@ const RecordingTable = () => {
formik.setFieldValue('area_id', areaId);
formik.setFieldValue('location_id', null);
formik.setFieldValue('project_flock_id', null);
formik.setFieldValue('kandang_id', null);
formik.setFieldValue('project_flock_kandang_id', null);
@@ -556,6 +540,7 @@ const RecordingTable = () => {
const locationId = location?.value ? String(location.value) : null;
formik.setFieldValue('location_id', locationId);
formik.setFieldValue('project_flock_id', null);
formik.setFieldValue('kandang_id', null);
formik.setFieldValue('project_flock_kandang_id', null);
@@ -570,7 +555,11 @@ const RecordingTable = () => {
const handleFilterProjectFlockChange = useCallback(
(val: OptionType | OptionType[] | null) => {
const projectFlock = val as OptionType | null;
const projectFlockId = projectFlock?.value
? String(projectFlock.value)
: null;
formik.setFieldValue('project_flock_id', projectFlockId);
formik.setFieldValue('kandang_id', null);
formik.setFieldValue('project_flock_kandang_id', null);
@@ -625,6 +614,36 @@ const RecordingTable = () => {
);
}, [formik.values.kandang_id, kandangOptions]);
const recordingApprovalStatusOptions: OptionType<string>[] = [
{ value: 'CREATED', label: 'Pengajuan' },
{ value: 'UPDATED', label: 'Diperbarui' },
{ value: 'APPROVED', label: 'Disetujui' },
{ value: 'REJECTED', label: 'Ditolak' },
];
const projectFlockCategoryOptions: OptionType<string>[] = [
{ value: 'GROWING', label: 'Growing' },
{ value: 'LAYING', label: 'Laying' },
];
const approvalStatusValue = useMemo(() => {
if (!formik.values.approval_status) return null;
return (
recordingApprovalStatusOptions.find(
(opt) => opt.value === formik.values.approval_status
) || null
);
}, [formik.values.approval_status]);
const projectFlockCategoryValue = useMemo(() => {
if (!formik.values.project_flock_category) return null;
return (
projectFlockCategoryOptions.find(
(opt) => opt.value === formik.values.project_flock_category
) || null
);
}, [formik.values.project_flock_category]);
// ===== HANDLE FILTER MODAL OPEN =====
const handleFilterModalOpen = () => {
filterModal.openModal();
@@ -783,7 +802,7 @@ const RecordingTable = () => {
toast.success('Ekspor berhasil');
} catch (error) {
toast.error(
await getExportErrorMessage(error, 'Gagal mengekspor input progress')
await getErrorMessage(error, 'Gagal mengekspor input progress')
);
} finally {
setIsExportProgressLoading(false);
@@ -1607,6 +1626,36 @@ const RecordingTable = () => {
isDisabled={!filterProjectFlock}
className={{ wrapper: 'w-full' }}
/>
<SelectInput
label='Kategori'
placeholder='Pilih Kategori'
options={projectFlockCategoryOptions}
value={projectFlockCategoryValue}
onChange={(val) => {
formik.setFieldValue(
'project_flock_category',
!Array.isArray(val) && val ? String(val.value) : null
);
}}
isClearable
className={{ wrapper: 'w-full' }}
/>
<SelectInput
label='Status Approval'
placeholder='Pilih Status Approval'
options={recordingApprovalStatusOptions}
value={approvalStatusValue}
onChange={(val) => {
formik.setFieldValue(
'approval_status',
!Array.isArray(val) && val ? String(val.value) : null
);
}}
isClearable
className={{ wrapper: 'w-full' }}
/>
</div>
{/* Modal Footer */}
@@ -1631,11 +1680,7 @@ const RecordingTable = () => {
<Button
type='submit'
className='min-w-40 text-sm rounded-lg py-3 text-white font-semibold'
disabled={
!formik.isValid ||
formik.isSubmitting ||
!formik.values.kandang_id
}
disabled={!formik.isValid || formik.isSubmitting}
>
Apply Filter
</Button>
src/components/pages/production/recording/filter/RecordingFilter.ts
+6
View File
@@ -3,13 +3,19 @@ import { string, object } from 'yup';
export const RecordingFilterSchema = object().shape({
area_id: string().nullable(),
location_id: string().nullable(),
project_flock_id: string().nullable(),
kandang_id: string().nullable(),
project_flock_kandang_id: string().nullable(),
approval_status: string().nullable(),
project_flock_category: string().nullable(),
});
export type RecordingFilterType = {
area_id: string | null;
location_id: string | null;
project_flock_id: string | null;
kandang_id: string | null;
project_flock_kandang_id: string | null;
approval_status: string | null;
project_flock_category: string | null;
};
src/components/pages/purchase/PurchaseFilterModal.tsx
+191 -1
View File
@@ -1,6 +1,6 @@
'use client';
import { RefObject, useState, useEffect } from 'react';
import { RefObject, useState, useEffect, useMemo } from 'react';
import { useFormik } from 'formik';
import toast from 'react-hot-toast';
@@ -9,12 +9,20 @@ import Modal from '@/components/Modal';
import Button from '@/components/Button';
import DateInput from '@/components/input/DateInput';
import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
import SelectInput from '@/components/input/SelectInput';
import { OptionType, useSelect } from '@/components/input/SelectInput';
import { PurchaseFilter } from '@/types/api/purchase/purchase';
import { AreaApi, LocationApi, SupplierApi } from '@/services/api/master-data';
import { ProductCategory } from '@/types/api/master-data/product-category';
import { ProductCategoryApi } from '@/services/api/master-data';
import { Area } from '@/types/api/master-data/area';
import { Location } from '@/types/api/master-data/location';
import { Supplier } from '@/types/api/master-data/supplier';
import { PURCHASE_ORDER_APPROVAL_LINE } from '@/config/approval-line';
import { ProjectFlockApi } from '@/services/api/production';
import { ProjectFlock } from '@/types/api/production/project-flock';
import { isResponseSuccess } from '@/lib/api-helper';
interface PurchaseFilterModalProps {
ref: RefObject<HTMLDialogElement | null>;
@@ -73,32 +81,112 @@ const PurchaseFilterModal = ({
'search'
);
const [selectedAreaId, setSelectedAreaId] = useState('');
const [selectedLocationId, setSelectedLocationId] = useState('');
const {
setInputValue: setSupplierInputValue,
options: supplierOptions,
isLoadingOptions: isLoadingSupplierOptions,
loadMore: loadMoreSuppliers,
} = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name', 'search');
const {
setInputValue: setAreaInputValue,
options: areaOptions,
isLoadingOptions: isLoadingAreaOptions,
loadMore: loadMoreAreas,
} = useSelect<Area>(AreaApi.basePath, 'id', 'name', 'search');
const {
setInputValue: setLocationInputValue,
options: locationOptions,
isLoadingOptions: isLoadingLocationOptions,
loadMore: loadMoreLocations,
} = useSelect<Location>(LocationApi.basePath, 'id', 'name', 'search', {
area_id: selectedAreaId || '',
});
const {
setInputValue: setProjectFlockInputValue,
options: projectFlockOptions,
rawData: projectFlocksRawData,
isLoadingOptions: isLoadingProjectFlockOptions,
loadMore: loadMoreProjectFlocks,
} = useSelect<ProjectFlock>(
ProjectFlockApi.basePath,
'id',
'flock_name',
'search',
{
location_id: selectedLocationId || '',
}
);
const formik = useFormik<{
poDate: string;
category: { label: string; value: number }[];
status: { label: string; value: string }[];
supplier: OptionType<number> | null;
area: OptionType<number> | null;
location: OptionType<number> | null;
project_flock: OptionType<number> | null;
project_flock_kandang: OptionType<number> | null;
}>({
initialValues: {
poDate: '',
category: [],
status: [],
supplier: null,
area: null,
location: null,
project_flock: null,
project_flock_kandang: null,
},
onSubmit: async (values) => {
const formattedValues = {
...values,
category: values.category.map((item) => String(item.value)),
status: values.status.map((item) => String(item.value)),
supplier_id: values.supplier?.value,
area_id: values.area?.value,
location_id: values.location?.value,
project_flock_id: values.project_flock?.value,
project_flock_kandang_id: values.project_flock_kandang?.value,
};
onSubmit?.(formattedValues);
closeModalHandler();
},
onReset: () => {
setSelectedAreaId('');
setSelectedLocationId('');
onReset?.();
closeModalHandler();
},
});
const projectFlockKandangOptions = useMemo(() => {
if (
!formik.values.project_flock ||
!projectFlocksRawData ||
!isResponseSuccess(projectFlocksRawData)
) {
return [];
}
const selectedProjectFlock = projectFlocksRawData.data.find(
(item) => item.id === formik.values.project_flock?.value
);
return (
selectedProjectFlock?.kandangs?.map((item) => ({
value: item.project_flock_kandang_id,
label: item.name,
})) || []
);
}, [formik.values.project_flock, projectFlocksRawData]);
const productCategoryChangeHandler = (
val: OptionType | OptionType[] | null
) => {
@@ -172,6 +260,108 @@ const PurchaseFilterModal = ({
value: item.step_name,
}))}
/>
<SelectInput
label='Vendor'
placeholder='Pilih Vendor'
value={formik.values.supplier}
onChange={(val) =>
formik.setFieldValue(
'supplier',
!Array.isArray(val)
? (val as OptionType<number> | null)
: null
)
}
options={supplierOptions}
isLoading={isLoadingSupplierOptions}
onInputChange={setSupplierInputValue}
onMenuScrollToBottom={loadMoreSuppliers}
isClearable
/>
<SelectInput
label='Area'
placeholder='Pilih Area'
value={formik.values.area}
onChange={(val) => {
const nextValue = !Array.isArray(val)
? (val as OptionType<number> | null)
: null;
formik.setFieldValue('area', nextValue);
formik.setFieldValue('location', null);
formik.setFieldValue('project_flock', null);
formik.setFieldValue('project_flock_kandang', null);
setSelectedAreaId(
nextValue?.value ? String(nextValue.value) : ''
);
setSelectedLocationId('');
}}
options={areaOptions}
isLoading={isLoadingAreaOptions}
onInputChange={setAreaInputValue}
onMenuScrollToBottom={loadMoreAreas}
isClearable
/>
<SelectInput
label='Lokasi'
placeholder='Pilih Lokasi'
value={formik.values.location}
onChange={(val) => {
const nextValue = !Array.isArray(val)
? (val as OptionType<number> | null)
: null;
formik.setFieldValue('location', nextValue);
formik.setFieldValue('project_flock', null);
formik.setFieldValue('project_flock_kandang', null);
setSelectedLocationId(
nextValue?.value ? String(nextValue.value) : ''
);
}}
options={locationOptions}
isLoading={isLoadingLocationOptions}
onInputChange={setLocationInputValue}
onMenuScrollToBottom={loadMoreLocations}
isClearable
isDisabled={!formik.values.area}
/>
<SelectInput
label='Project Flock'
placeholder='Pilih Project Flock'
value={formik.values.project_flock}
onChange={(val) => {
const nextValue = !Array.isArray(val)
? (val as OptionType<number> | null)
: null;
formik.setFieldValue('project_flock', nextValue);
formik.setFieldValue('project_flock_kandang', null);
}}
options={projectFlockOptions}
isLoading={isLoadingProjectFlockOptions}
onInputChange={setProjectFlockInputValue}
onMenuScrollToBottom={loadMoreProjectFlocks}
isClearable
isDisabled={!formik.values.location}
/>
<SelectInput
label='Kandang'
placeholder='Pilih Kandang'
value={formik.values.project_flock_kandang}
onChange={(val) =>
formik.setFieldValue(
'project_flock_kandang',
!Array.isArray(val)
? (val as OptionType<number> | null)
: null
)
}
options={projectFlockKandangOptions}
isClearable
isDisabled={!formik.values.project_flock}
/>
</div>
</div>
src/components/pages/purchase/PurchaseTable.tsx
+63 -39
View File
@@ -33,7 +33,7 @@ import PurchaseFilterModal from '@/components/pages/purchase/PurchaseFilterModal
import Dropdown from '@/components/dropdown/Dropdown';
import { cn, formatDate } from '@/lib/helper';
import { isResponseSuccess } from '@/lib/api-helper';
import { getErrorMessage, isResponseSuccess } from '@/lib/api-helper';
import { BaseApiResponse } from '@/types/api/api-general';
import { useTableFilter } from '@/services/hooks/useTableFilter';
@@ -43,43 +43,6 @@ import { ExpenseApi } from '@/services/api/expense';
import { Expense } from '@/types/api/expense';
import { Color } from '@/types/theme';
const getExportErrorMessage = async (
error: unknown,
fallbackMessage: string
) => {
if (axios.isAxiosError(error)) {
const responseData = error.response?.data;
if (responseData instanceof Blob) {
try {
const parsed = JSON.parse(await responseData.text()) as {
message?: string;
};
return parsed.message || fallbackMessage;
} catch {
return fallbackMessage;
}
}
if (
responseData &&
typeof responseData === 'object' &&
'message' in responseData &&
typeof responseData.message === 'string'
) {
return responseData.message;
}
return error.message || fallbackMessage;
}
if (error instanceof Error) {
return error.message;
}
return fallbackMessage;
};
// ===== STATUS BADGE UTILITIES =====
const statusTextMap: Record<string, string> = {
APPROVED: 'Disetujui',
@@ -192,6 +155,8 @@ const PurchaseTable = () => {
// ===== STATE MANAGEMENT =====
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
const [isLoadingExportingToExcel, setIsLoadingExportingToExcel] =
useState(false);
const [isExportProgressLoading, setIsExportProgressLoading] = useState(false);
const [selectedPurchase, setSelectedPurchase] = useState<Purchase | null>(
null
@@ -213,6 +178,11 @@ const PurchaseTable = () => {
po_date: '',
approval_status: '',
product_category_id: '',
supplier_id: '',
area_id: '',
location_id: '',
project_flock_id: '',
project_flock_kandang_id: '',
},
paramMap: {
page: 'page',
@@ -220,6 +190,11 @@ const PurchaseTable = () => {
po_date: 'po_date',
approval_status: 'approval_status',
product_category_id: 'product_category_id',
supplier_id: 'supplier_id',
area_id: 'area_id',
location_id: 'location_id',
project_flock_id: 'project_flock_id',
project_flock_kandang_id: 'project_flock_kandang_id',
},
});
@@ -467,14 +442,52 @@ const PurchaseTable = () => {
updateFilter('po_date', values.poDate);
updateFilter('product_category_id', values.category.join(','));
updateFilter('approval_status', values.status.join(','));
updateFilter(
'supplier_id',
values.supplier_id ? String(values.supplier_id) : ''
);
updateFilter('area_id', values.area_id ? String(values.area_id) : '');
updateFilter(
'location_id',
values.location_id ? String(values.location_id) : ''
);
updateFilter(
'project_flock_id',
values.project_flock_id ? String(values.project_flock_id) : ''
);
updateFilter(
'project_flock_kandang_id',
values.project_flock_kandang_id
? String(values.project_flock_kandang_id)
: ''
);
};
const filterResetHandler = () => {
updateFilter('po_date', '');
updateFilter('product_category_id', '');
updateFilter('approval_status', '');
updateFilter('supplier_id', '');
updateFilter('area_id', '');
updateFilter('location_id', '');
updateFilter('project_flock_id', '');
updateFilter('project_flock_kandang_id', '');
};
const exportToExcel = useCallback(async () => {
setIsLoadingExportingToExcel(true);
try {
await PurchaseApi.exportToExcel(getTableFilterQueryString());
} catch (error) {
toast.error(
await getErrorMessage(error, 'Gagal mengekspor data pembelian')
);
} finally {
setIsLoadingExportingToExcel(false);
}
}, [getTableFilterQueryString]);
const resetExportProgressForm = useCallback(() => {
setExportProgressStartDate('');
setExportProgressEndDate('');
@@ -513,7 +526,7 @@ const PurchaseTable = () => {
toast.success('Ekspor berhasil');
} catch (error) {
toast.error(
await getExportErrorMessage(error, 'Gagal mengekspor input progress')
await getErrorMessage(error, 'Gagal mengekspor input progress')
);
} finally {
setIsExportProgressLoading(false);
@@ -610,6 +623,17 @@ const PurchaseTable = () => {
</Button>
}
>
<Button
variant='ghost'
color='none'
onClick={exportToExcel}
isLoading={isLoadingExportingToExcel}
className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
>
<Icon icon='heroicons:table-cells' width={20} height={20} />
Ekspor ke Excel
</Button>
<Button
variant='ghost'
color='none'
src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
+1 -1
View File
@@ -55,7 +55,6 @@ const PurchaseRequestForm = ({
const deleteModal = useModal();
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
const [, setLocationSelectInputValue] = useState('');
const [selectedPurchaseItems, setSelectedPurchaseItems] = useState<number[]>(
[]
);
@@ -163,6 +162,7 @@ const PurchaseRequestForm = ({
options: locationOptions,
isLoadingOptions: isLoadingLocations,
loadMore: loadMoreLocations,
setInputValue: setLocationSelectInputValue,
} = useSelect(LocationApi.basePath, 'id', 'name', '', {
area_id:
selectedArea != ''
src/components/pages/report/expense/tab/ReportExpenseTab.tsx
+50 -45
View File
@@ -24,7 +24,7 @@ import Table from '@/components/Table';
import { formatCurrency, formatDate } from '@/lib/helper';
import { ReportExpense } from '@/types/api/report/report-expense';
import { ReportExpenseApi } from '@/services/api/report/expense-report';
import { isResponseSuccess } from '@/lib/api-helper';
import { getErrorMessage, isResponseSuccess } from '@/lib/api-helper';
import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
import Modal, { useModal } from '@/components/Modal';
import Pagination from '@/components/Pagination';
@@ -189,26 +189,47 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
[formik.values.category]
);
const buildReportExpenseQueryString = useCallback(
(extraParams?: Record<string, string>) => {
const params = new URLSearchParams();
if (filterParams.location_id) {
params.append('location_id', filterParams.location_id);
}
if (filterParams.supplier_id) {
params.append('supplier_id', filterParams.supplier_id);
}
if (filterParams.kandang_id) {
params.append('project_flock_kandang_id', filterParams.kandang_id);
}
if (filterParams.nonstock_id) {
params.append('nonstock_id', filterParams.nonstock_id);
}
if (filterParams.realization_date) {
params.append('realization_date', filterParams.realization_date);
}
if (filterParams.category) {
params.append('category', filterParams.category);
}
Object.entries(extraParams ?? {}).forEach(([key, value]) => {
params.set(key, value);
});
return params.toString();
},
[filterParams]
);
// ===== DATA FETCHING =====
const { data: reportExpenseResponse, isLoading } = useSWR(
() => {
const params = new URLSearchParams();
if (filterParams.location_id)
params.append('location_id', filterParams.location_id);
if (filterParams.supplier_id)
params.append('supplier_id', filterParams.supplier_id);
if (filterParams.kandang_id)
params.append('project_flock_kandang_id', filterParams.kandang_id);
if (filterParams.nonstock_id)
params.append('nonstock_id', filterParams.nonstock_id);
if (filterParams.realization_date)
params.append('realization_date', filterParams.realization_date);
if (filterParams.category)
params.append('category', filterParams.category);
params.append('page', String(page));
params.append('limit', String(pageSize));
const queryString = buildReportExpenseQueryString({
page: String(page),
limit: String(pageSize),
});
return [`${ReportExpenseApi.basePath}?${params.toString()}`];
return [`${ReportExpenseApi.basePath}?${queryString}`];
},
([url]: string[]) => httpClient<BaseApiResponse<ReportExpense[]>>(url)
);
@@ -233,47 +254,31 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
const reportExpenseExport = useCallback(async (): Promise<
ReportExpense[] | null
> => {
const params = new URLSearchParams();
if (filterParams.location_id)
params.append('location_id', filterParams.location_id);
if (filterParams.supplier_id)
params.append('supplier_id', filterParams.supplier_id);
if (filterParams.kandang_id)
params.append('kandang_id', filterParams.kandang_id);
if (filterParams.nonstock_id)
params.append('nonstock_id', filterParams.nonstock_id);
if (filterParams.realization_date)
params.append('realization_date', filterParams.realization_date);
if (filterParams.category) params.append('category', filterParams.category);
params.append('limit', '100');
params.append('page', '1');
const queryString = buildReportExpenseQueryString({
page: '1',
limit: '100',
});
const response = await httpClient<BaseApiResponse<ReportExpense[]>>(
`${ReportExpenseApi.basePath}?${params.toString()}`
`${ReportExpenseApi.basePath}?${queryString}`
);
return isResponseSuccess(response) ? response.data : null;
}, [filterParams]);
}, [buildReportExpenseQueryString]);
// ===== EXPORT HANDLERS =====
const handleExportExcel = useCallback(async () => {
setIsExcelExportLoading(true);
try {
const allDataForExport = await reportExpenseExport();
if (!allDataForExport || allDataForExport.length === 0) {
toast.error('Tidak ada data untuk diekspor.');
return;
}
await generateReportExpenseExcel(allDataForExport);
toast.success('Excel berhasil dibuat dan diunduh.');
} catch {
toast.error('Gagal membuat Excel. Silakan coba lagi.');
await ReportExpenseApi.exportToExcel(buildReportExpenseQueryString());
} catch (error) {
toast.error(
await getErrorMessage(error, 'Gagal mengekspor data pengeluaran')
);
} finally {
setIsExcelExportLoading(false);
}
}, [reportExpenseExport]);
}, [buildReportExpenseQueryString]);
const handleExportPDF = useCallback(async () => {
setIsPdfExportLoading(true);
src/figma-make/components/pages/daily-checklist/DailyChecklistContent.tsx
+68 -4
View File
@@ -59,6 +59,7 @@ const CATEGORIES = [
{ value: 'pullet_close', label: 'Pullet Close' },
{ value: 'produksi_open', label: 'Produksi Open' },
{ value: 'produksi_close', label: 'Produksi Close' },
{ value: 'empty_kandang', label: 'Kandang Kosong' },
];
const TIME_TYPE_ORDER = ['Umum', 'Pagi', 'Siang', 'Sore', 'Malam'];
@@ -94,6 +95,8 @@ export function DailyChecklistContent() {
const [selectedCategory, setSelectedCategory] = useState(
searchParams.get('category') || ''
);
const [emptyKandang, setEmptyKandang] = useState(false);
const [emptyKandangEndDate, setEmptyKandangEndDate] = useState('');
const {
options: kandangOptions,
@@ -225,6 +228,22 @@ export function DailyChecklistContent() {
}
}, [date, kandangId, selectedCategory, pathname, router, searchParams]);
useEffect(() => {
if (!emptyKandang) {
setEmptyKandangEndDate('');
setSelectedCategory('');
return;
}
setSelectedCategory('empty_kandang');
}, [emptyKandang]);
useEffect(() => {
if (selectedCategory === 'empty_kandang') {
setEmptyKandang(true);
}
}, [selectedCategory]);
// Format date for display
const formatDateForDisplay = (dateStr: string) => {
if (!dateStr) return 'Pilih tanggal';
@@ -246,7 +265,7 @@ export function DailyChecklistContent() {
// Check for existing checklist when unique key changes
useEffect(() => {
const checkAndLoadChecklist = async () => {
if (!date || !kandangId || !selectedCategory) {
if (!date || !kandangId || (!emptyKandang && !selectedCategory)) {
setDailyChecklistId(null);
setChecklistStatus('DRAFT');
// setIsEditMode(false);
@@ -257,12 +276,24 @@ export function DailyChecklistContent() {
return;
}
if (emptyKandang && !emptyKandangEndDate) {
setDailyChecklistId(null);
setChecklistStatus('DRAFT');
setSelectedPhaseIds([]);
setActivitiesByPhase({});
setTaskIdsByPhaseActivityId({});
setAssignments({});
return;
}
try {
const checklist = await DailyChecklistApi.create({
date,
kandang_id: Number(kandangId),
category: selectedCategory,
category: emptyKandang ? 'empty_kandang' : selectedCategory,
status: 'DRAFT',
empty_kandang: emptyKandang,
empty_kandang_end_date: emptyKandang ? emptyKandangEndDate : '',
});
if (isResponseError(checklist)) {
@@ -313,7 +344,7 @@ export function DailyChecklistContent() {
};
checkAndLoadChecklist();
}, [date, kandangId, selectedCategory]);
}, [date, kandangId, selectedCategory, emptyKandang, emptyKandangEndDate]);
// Load activities and tasks when phases change
useEffect(() => {
@@ -1034,7 +1065,7 @@ export function DailyChecklistContent() {
<Select
value={selectedCategory}
onValueChange={setSelectedCategory}
disabled={!isChecklistStatusDraft}
disabled={!isChecklistStatusDraft || emptyKandang}
>
<SelectTrigger
id='category'
@@ -1053,6 +1084,39 @@ export function DailyChecklistContent() {
</div>
</div>
<div className='mb-6 pb-6 border-b border-gray-200'>
<div className='flex flex-col gap-4 md:flex-row md:items-end md:gap-6'>
<label className='flex items-center gap-2 text-sm font-medium text-gray-900'>
<input
type='checkbox'
checked={emptyKandang}
onChange={(e) => setEmptyKandang(e.target.checked)}
disabled={!isChecklistStatusDraft}
className='checkbox-clean'
/>
<span>Kandang Kosong</span>
</label>
{emptyKandang && (
<div className='w-full md:max-w-md'>
<Label htmlFor='empty_kandang_end_date'>
Tanggal Akhir Kandang Kosong{' '}
<span className='text-red-500'>*</span>
</Label>
<div className='mt-1.5'>
<DatePicker
date={emptyKandangEndDate}
onDateChange={setEmptyKandangEndDate}
disabled={!isChecklistStatusDraft}
placeholder='Pilih tanggal akhir kandang kosong'
formatDisplay={formatDateForDisplay}
/>
</div>
</div>
)}
</div>
</div>
{/* Phase Selection Section */}
{dailyChecklistId && (
<div className='mb-6 pb-6 border-b border-gray-200'>
src/figma-make/components/pages/list-daily-checklist/ListDailyChecklistContent.tsx
+1
View File
@@ -60,6 +60,7 @@ const CATEGORY_LABELS: { [key: string]: string } = {
pullet_close: 'Pullet Close',
produksi_open: 'Produksi Open',
produksi_close: 'Produksi Close',
empty_kandang: 'Kandang Kosong',
};
export function ListDailyChecklistContent() {
src/figma-make/components/pages/master-data/employee/MasterEmployeeContent.tsx
+6 -2
View File
@@ -217,7 +217,9 @@ export function MasterEmployeeContent() {
'Error creating employee:',
createEmployeeResponse.message
);
toast.error('Gagal menambahkan ABK');
toast.error(
'Gagal menambahkan ABK: ' + createEmployeeResponse.message
);
return;
}
@@ -238,7 +240,9 @@ export function MasterEmployeeContent() {
'Error updating employee:',
updateEmployeeResponse.message
);
toast.error('Gagal menambahkan ABK');
toast.error(
'Gagal memperbarui ABK: ' + updateEmployeeResponse.message
);
return;
}
src/lib/api-helper.ts
+38
View File
@@ -1,3 +1,4 @@
import axios from 'axios';
import {
BaseApiResponse,
ErrorApiResponse,
@@ -15,3 +16,40 @@ export const isResponseError = <T>(
): res is ErrorApiResponse => {
return res?.status === 'error';
};
export const getErrorMessage = async (
error: unknown,
fallbackMessage: string
) => {
if (axios.isAxiosError(error)) {
const responseData = error.response?.data;
if (responseData instanceof Blob) {
try {
const parsed = JSON.parse(await responseData.text()) as {
message?: string;
};
return parsed.message || fallbackMessage;
} catch {
return fallbackMessage;
}
}
if (
responseData &&
typeof responseData === 'object' &&
'message' in responseData &&
typeof responseData.message === 'string'
) {
return responseData.message;
}
return error.message || fallbackMessage;
}
if (error instanceof Error) {
return error.message;
}
return fallbackMessage;
};
src/services/api/expense.ts
+27
View File
@@ -708,6 +708,33 @@ export class ExpenseApiService extends BaseApiService<
return formData;
};
async exportToExcel(initialQueryString: string) {
const params = new URLSearchParams(initialQueryString);
params.set('export', 'excel');
params.set('type', 'all');
params.set('page', '1');
params.set('limit', '99999999999');
const queryString = `?${params.toString()}`;
const res = await httpClient<Blob>(`${this.basePath}${queryString}`, {
method: 'GET',
responseType: 'blob',
});
const url = window.URL.createObjectURL(new Blob([res]));
const link = document.createElement('a');
link.href = url;
const fileName = `BOP-${formatDate(Date.now(), 'DD-MM-YYYY')}.xlsx`;
link.setAttribute('download', fileName);
document.body.appendChild(link);
link.click();
link.remove();
}
async exportInputProgressToExcel(startDate: string, endDate: string) {
const params = new URLSearchParams();
src/services/api/marketing/marketing.ts
+18 -54
View File
@@ -149,67 +149,31 @@ class MarketingExportService extends BaseApiService<
}
}
/**
* Export to Excel
*/
async exportToExcel(initialQueryString: string) {
const params = new URLSearchParams(initialQueryString);
params.set('export', 'excel');
params.set('type', 'all');
params.set('page', '1');
params.set('limit', '99999999999');
const queryString = `?${params.toString()}`;
try {
const marketingData = await httpClientFetcher<
BaseApiResponse<Marketing[]>
>(`${this.basePath}${queryString}`);
const res = await httpClient<Blob>(`${this.basePath}${queryString}`, {
method: 'GET',
responseType: 'blob',
});
if (isResponseError(marketingData)) {
toast.error('Gagal melakukan export marketing! Coba lagi.');
return;
}
const url = window.URL.createObjectURL(new Blob([res]));
const link = document.createElement('a');
link.href = url;
const rows = marketingData.data;
const fileName = `penjualan-${formatDate(Date.now(), 'DD-MM-YYYY')}.xlsx`;
link.setAttribute('download', fileName);
const formattedRows = [];
for (let i = 0; i < rows.length; i++) {
const row = rows[i];
const approval = row.latest_approval;
const isRejected = approval?.action === 'REJECTED';
// Calculate grand total from sales_order products
const grandTotal =
row.sales_order
?.map((product) => product.total_price)
.reduce((a, b) => a + b, 0) ?? 0;
// Get product names
const products =
row.sales_order
?.map((product) => product.product_warehouse?.product?.name)
.filter(Boolean)
.join(', ') ?? '';
formattedRows.push({
'No. Order': row.so_number,
Tanggal: formatDate(row.so_date, 'DD-MM-YYYY'),
Status: isRejected
? 'Ditolak'
: formatTitleCase(approval?.step_name || ''),
Customer: row.customer?.name || '',
'Grand Total': formatCurrency(grandTotal),
Products: products,
Notes: row.notes || '',
});
}
const ws = XLSX.utils.json_to_sheet(formattedRows);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, 'marketing');
// triggers download in browser
XLSX.writeFile(wb, 'marketing.xlsx');
} catch {
toast.error('Gagal melakukan export marketing! Coba lagi.');
}
document.body.appendChild(link);
link.click();
link.remove();
}
async exportInputProgressToExcel(startDate: string, endDate: string) {
src/services/api/purchase.ts
+27
View File
@@ -115,6 +115,33 @@ export const PurchaseApi = {
},
},
async exportToExcel(initialQueryString: string) {
const params = new URLSearchParams(initialQueryString);
params.set('export', 'excel');
params.set('type', 'all');
params.set('page', '1');
params.set('limit', '99999999999');
const queryString = `?${params.toString()}`;
const res = await httpClient<Blob>(`${this.basePath}${queryString}`, {
method: 'GET',
responseType: 'blob',
});
const url = window.URL.createObjectURL(new Blob([res]));
const link = document.createElement('a');
link.href = url;
const fileName = `pembelian-${formatDate(Date.now(), 'DD-MM-YYYY')}.xlsx`;
link.setAttribute('download', fileName);
document.body.appendChild(link);
link.click();
link.remove();
},
async exportInputProgressToExcel(startDate: string, endDate: string) {
const params = new URLSearchParams();
src/services/api/report/expense-report.ts
+29 -1
View File
@@ -1,5 +1,6 @@
import { formatDate } from '@/lib/helper';
import { BaseApiService } from '@/services/api/base';
import { httpClientFetcher } from '@/services/http/client';
import { httpClient, httpClientFetcher } from '@/services/http/client';
import { BaseApiResponse } from '@/types/api/api-general';
import {
ReportDepreciation,
@@ -20,6 +21,33 @@ export class ReportExpenseApiService extends BaseApiService<
): Promise<BaseApiResponse<ReportExpense[]>> {
return await httpClientFetcher<BaseApiResponse<ReportExpense[]>>(endpoint);
}
async exportToExcel(initialQueryString: string) {
const params = new URLSearchParams(initialQueryString);
params.set('export', 'excel');
params.set('type', 'all');
params.set('page', '1');
params.set('limit', '99999999999');
const queryString = `?${params.toString()}`;
const res = await httpClient<Blob>(`${this.basePath}${queryString}`, {
method: 'GET',
responseType: 'blob',
});
const url = window.URL.createObjectURL(new Blob([res]));
const link = document.createElement('a');
link.href = url;
const fileName = `Laporan-BOP-${formatDate(Date.now(), 'DD-MM-YYYY')}.xlsx`;
link.setAttribute('download', fileName);
document.body.appendChild(link);
link.click();
link.remove();
}
}
export const ReportExpenseApi = new ReportExpenseApiService('/reports/expense');
src/types/api/daily-checklist/daily-checklist.d.ts
Vendored
+4
View File
@@ -12,6 +12,8 @@ export type BaseDailyChecklist = {
status: string;
category: string;
date: string;
empty_kandang?: boolean;
empty_kandang_end_date?: string | null;
kandang?: Pick<BaseKandang, 'id' | 'name' | 'status' | 'capacity'>;
total_phase: number;
total_activity: number;
@@ -57,6 +59,8 @@ export type CreateDailyChecklistPayload = {
kandang_id: number;
category: string;
status: string;
empty_kandang: boolean;
empty_kandang_end_date: string;
};
export type PerformanceOverviewItem = {
src/types/api/marketing/marketing.d.ts
Vendored
+2
View File
@@ -97,6 +97,8 @@ export type MarketingFilter = {
product_ids: number[];
status: string;
customer_id: number;
project_flock_id?: number;
project_flock_kandang_id?: number;
};
/**
src/types/api/purchase/purchase.d.ts
Vendored
+5
View File
@@ -149,4 +149,9 @@ export type PurchaseFilter = {
poDate: string;
category: string[];
status: string[];
supplier_id?: number;
area_id?: number;
location_id?: number;
project_flock_id?: number;
project_flock_kandang_id?: number;
};