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

Merge branch 'fix/adjustment-pf-report-penjualan' into 'development'

Browse Source 
[FIX/FE] Adjustment Project Flock Related, Penjualan Calculation (Both SO/DO) and Report Filter Display Issue

See merge request mbugroup/lti-web-client!332
This commit is contained in:
Rivaldi A N S
2026-02-24 03:24:42 +00:00
parent ac2d83a666 50424a25fc
commit 6a10849a84
25 changed files with 601 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/closing/ClosingDetailTabs.tsx
+2 -2
View File
@@ -18,7 +18,7 @@ import HppExpeditionClosingTab from '@/components/pages/closing/tab/HppExpeditio
import ClosingKandangList from '@/components/pages/closing/ClosingKandangList';
import { ProjectFlock } from '@/types/api/production/project-flock';
import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
import { useClosingTabStore } from '@/stores/closing/closing-tab.store';
import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
interface ClosingDetailProps {
id: number;
initialValue?: ClosingGeneralInformation;
@@ -33,7 +33,7 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
kandangData,
}) => {
const [activeTabId, setActiveTabId] = useState<string>('sapronak');
const tabActions = useClosingTabStore((state) => state.tabActions);
const tabActions = useTabActionsStore((state) => state.tabActions);
const closingDetailTabs = useMemo(() => {
const validTabs = [
src/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.tsx
+62 -35
View File
@@ -236,6 +236,25 @@ const DeliveryOrderProductForm = ({
});
};
// Handler untuk onChange - auto calculation real-time untuk field yang mempengaruhi total_price (total_peti, weight_per_convertion, price_per_convertion, sisa_berat, price_sisa_berat, price_per_qty, qty)
const handleFieldChange = (
field: string,
value: number | string,
callback?: () => void
) => {
formik.setFieldValue(field, value);
setTimeout(() => {
handleMarketingCalculation(field, {
values: { ...formik.values, [field]: value },
setFieldValue: formik.setFieldValue,
hasSisaBerat,
});
}, 0);
if (callback) callback();
};
// Handler khusus untuk toggle sisa berat - langsung pakai nilai baru
const handleSisaBeratToggle = (newHasSisaBerat: boolean) => {
setHasSisaBerat(newHasSisaBerat);
@@ -520,13 +539,11 @@ const DeliveryOrderProductForm = ({
} per ${formik.values.convertion_unit?.value}`}
value={formik.values.weight_per_convertion ?? ''}
onChange={(e) => {
formik.setFieldValue(
'weight_per_convertion',
Number(e.target.value)
const value = Number(e.target.value);
handleFieldChange('weight_per_convertion', value, () =>
setCurrentInput(e.target.name)
);
setCurrentInput(e.target.name);
}}
onBlur={() => handleBlurField('weight_per_convertion')}
/>
</div>
</div>
@@ -564,10 +581,11 @@ const DeliveryOrderProductForm = ({
name='total_peti'
value={formik.values.total_peti ?? undefined}
onChange={(e) => {
formik.handleChange(e);
setCurrentInput(e.target.name);
const value = Number(e.target.value);
handleFieldChange('total_peti', value, () =>
setCurrentInput(e.target.name)
);
}}
onBlur={() => handleBlurField('total_peti')}
isError={
formik.touched.total_peti && Boolean(formik.errors.total_peti)
}
@@ -592,10 +610,11 @@ const DeliveryOrderProductForm = ({
name='avg_weight'
value={formik.values.avg_weight}
onChange={(e) => {
formik.handleChange(e);
setCurrentInput(e.target.name);
const value = Number(e.target.value);
handleFieldChange('avg_weight', value, () =>
setCurrentInput('avg_weight')
);
}}
onBlur={() => handleBlurField('avg_weight')}
isError={
formik.touched.avg_weight &&
Boolean(formik.errors.avg_weight)
@@ -613,10 +632,11 @@ const DeliveryOrderProductForm = ({
name='total_weight'
value={formik.values.total_weight}
onChange={(e) => {
formik.handleChange(e);
setCurrentInput(e.target.name);
const value = Number(e.target.value);
handleFieldChange('total_weight', value, () =>
setCurrentInput('total_weight')
);
}}
onBlur={() => handleBlurField('total_weight')}
isError={
formik.touched.total_weight &&
Boolean(formik.errors.total_weight)
@@ -638,10 +658,11 @@ const DeliveryOrderProductForm = ({
name='qty'
value={formik.values.qty}
onChange={(e) => {
formik.handleChange(e);
setCurrentInput(e.target.name);
const value = Number(e.target.value);
handleFieldChange('qty', value, () =>
setCurrentInput(e.target.name)
);
}}
onBlur={() => handleBlurField('qty')}
isError={Boolean(formik.errors.qty)}
errorMessage={formik.errors.qty}
placeholder='Masukan Kuantitas'
@@ -677,10 +698,11 @@ const DeliveryOrderProductForm = ({
name='price_per_convertion'
value={formik.values.price_per_convertion ?? undefined}
onChange={(e) => {
formik.handleChange(e);
setCurrentInput(e.target.name);
const value = Number(e.target.value);
handleFieldChange('price_per_convertion', value, () =>
setCurrentInput(e.target.name)
);
}}
onBlur={() => handleBlurField('price_per_convertion')}
isError={
formik.touched.price_per_convertion &&
Boolean(formik.errors.price_per_convertion)
@@ -699,10 +721,11 @@ const DeliveryOrderProductForm = ({
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');
const value = Number(e.target.value);
handleFieldChange('price_per_qty', value, () =>
setCurrentInput('price_per_qty')
);
}}
onBlur={() => handleBlurField('price_per_qty')}
isError={
formik.touched.price_per_qty &&
Boolean(formik.errors.price_per_qty)
@@ -721,10 +744,11 @@ const DeliveryOrderProductForm = ({
name='unit_price'
value={formik.values.unit_price}
onChange={(e) => {
formik.handleChange(e);
setCurrentInput(e.target.name);
const value = Number(e.target.value);
handleFieldChange('unit_price', value, () =>
setCurrentInput(e.target.name)
);
}}
onBlur={() => handleBlurField('unit_price')}
isError={Boolean(formik.errors.unit_price)}
errorMessage={formik.errors.unit_price}
placeholder='Masukan Harga Satuan'
@@ -760,10 +784,11 @@ const DeliveryOrderProductForm = ({
name='sisa_berat'
value={formik.values.sisa_berat ?? undefined}
onChange={(e) => {
formik.handleChange(e);
setCurrentInput(e.target.name);
const value = Number(e.target.value);
handleFieldChange('sisa_berat', value, () =>
setCurrentInput(e.target.name)
);
}}
onBlur={() => handleBlurField('sisa_berat')}
isError={
formik.touched.sisa_berat && Boolean(formik.errors.sisa_berat)
}
@@ -776,10 +801,11 @@ const DeliveryOrderProductForm = ({
name='price_sisa_berat'
value={formik.values.price_sisa_berat ?? undefined}
onChange={(e) => {
formik.handleChange(e);
setCurrentInput(e.target.name);
const value = Number(e.target.value);
handleFieldChange('price_sisa_berat', value, () =>
setCurrentInput(e.target.name)
);
}}
onBlur={() => handleBlurField('price_sisa_berat')}
isError={
formik.touched.price_sisa_berat &&
Boolean(formik.errors.price_sisa_berat)
@@ -797,10 +823,11 @@ const DeliveryOrderProductForm = ({
name='total_price'
value={formik.values.total_price}
onChange={(e) => {
formik.handleChange(e);
setCurrentInput(e.target.name);
const value = Number(e.target.value);
handleFieldChange('total_price', value, () =>
setCurrentInput('total_price')
);
}}
onBlur={() => handleBlurField('total_price')}
isError={
formik.touched.total_price && Boolean(formik.errors.total_price)
}
src/components/pages/marketing/form/repeater/sales-order/SalesOrderProductForm.tsx
+62 -35
View File
@@ -250,6 +250,25 @@ const SalesOrderProductForm = ({
});
};
// Handler untuk onChange - auto calculation real-time untuk field yang mempengaruhi total_price (total_peti, weight_per_convertion, price_per_convertion, sisa_berat, price_sisa_berat, price_per_qty, qty)
const handleFieldChange = (
field: string,
value: number | string,
callback?: () => void
) => {
formik.setFieldValue(field, value);
setTimeout(() => {
handleMarketingCalculation(field, {
values: { ...formik.values, [field]: value },
setFieldValue: formik.setFieldValue,
hasSisaBerat,
});
}, 0);
if (callback) callback();
};
// Handler khusus untuk toggle sisa berat - langsung pakai nilai baru
const handleSisaBeratToggle = (newHasSisaBerat: boolean) => {
setHasSisaBerat(newHasSisaBerat);
@@ -475,13 +494,11 @@ const SalesOrderProductForm = ({
} per ${formik.values.convertion_unit?.value}`}
value={formik.values.weight_per_convertion ?? ''}
onChange={(e) => {
formik.setFieldValue(
'weight_per_convertion',
Number(e.target.value)
const value = Number(e.target.value);
handleFieldChange('weight_per_convertion', value, () =>
setCurrentInput(e.target.name)
);
setCurrentInput(e.target.name);
}}
onBlur={() => handleBlurField('weight_per_convertion')}
/>
</div>
</div>
@@ -519,10 +536,11 @@ const SalesOrderProductForm = ({
name='total_peti'
value={formik.values.total_peti ?? undefined}
onChange={(e) => {
formik.handleChange(e);
setCurrentInput(e.target.name);
const value = Number(e.target.value);
handleFieldChange('total_peti', value, () =>
setCurrentInput(e.target.name)
);
}}
onBlur={() => handleBlurField('total_peti')}
isError={
formik.touched.total_peti && Boolean(formik.errors.total_peti)
}
@@ -547,10 +565,11 @@ const SalesOrderProductForm = ({
name='avg_weight'
value={formik.values.avg_weight}
onChange={(e) => {
formik.handleChange(e);
setCurrentInput(e.target.name);
const value = Number(e.target.value);
handleFieldChange('avg_weight', value, () =>
setCurrentInput('avg_weight')
);
}}
onBlur={() => handleBlurField('avg_weight')}
isError={
formik.touched.avg_weight &&
Boolean(formik.errors.avg_weight)
@@ -568,10 +587,11 @@ const SalesOrderProductForm = ({
name='total_weight'
value={formik.values.total_weight}
onChange={(e) => {
formik.handleChange(e);
setCurrentInput(e.target.name);
const value = Number(e.target.value);
handleFieldChange('total_weight', value, () =>
setCurrentInput('total_weight')
);
}}
onBlur={() => handleBlurField('total_weight')}
isError={
formik.touched.total_weight &&
Boolean(formik.errors.total_weight)
@@ -593,10 +613,11 @@ const SalesOrderProductForm = ({
name='qty'
value={formik.values.qty}
onChange={(e) => {
formik.handleChange(e);
setCurrentInput(e.target.name);
const value = Number(e.target.value);
handleFieldChange('qty', value, () =>
setCurrentInput(e.target.name)
);
}}
onBlur={() => handleBlurField('qty')}
isError={formik.touched.qty && Boolean(formik.errors.qty)}
errorMessage={formik.errors.qty}
placeholder='Masukan Kuantitas'
@@ -630,10 +651,11 @@ const SalesOrderProductForm = ({
name='price_per_convertion'
value={formik.values.price_per_convertion ?? undefined}
onChange={(e) => {
formik.handleChange(e);
setCurrentInput(e.target.name);
const value = Number(e.target.value);
handleFieldChange('price_per_convertion', value, () =>
setCurrentInput(e.target.name)
);
}}
onBlur={() => handleBlurField('price_per_convertion')}
isError={
formik.touched.price_per_convertion &&
Boolean(formik.errors.price_per_convertion)
@@ -652,10 +674,11 @@ const SalesOrderProductForm = ({
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');
const value = Number(e.target.value);
handleFieldChange('price_per_qty', value, () =>
setCurrentInput('price_per_qty')
);
}}
onBlur={() => handleBlurField('price_per_qty')}
isError={
formik.touched.price_per_qty &&
Boolean(formik.errors.price_per_qty)
@@ -674,10 +697,11 @@ const SalesOrderProductForm = ({
name='unit_price'
value={formik.values.unit_price}
onChange={(e) => {
formik.handleChange(e);
setCurrentInput(e.target.name);
const value = Number(e.target.value);
handleFieldChange('unit_price', value, () =>
setCurrentInput(e.target.name)
);
}}
onBlur={() => handleBlurField('unit_price')}
isError={
formik.touched.unit_price && Boolean(formik.errors.unit_price)
}
@@ -715,10 +739,11 @@ const SalesOrderProductForm = ({
name='sisa_berat'
value={formik.values.sisa_berat ?? undefined}
onChange={(e) => {
formik.handleChange(e);
setCurrentInput(e.target.name);
const value = Number(e.target.value);
handleFieldChange('sisa_berat', value, () =>
setCurrentInput(e.target.name)
);
}}
onBlur={() => handleBlurField('sisa_berat')}
isError={
formik.touched.sisa_berat && Boolean(formik.errors.sisa_berat)
}
@@ -731,10 +756,11 @@ const SalesOrderProductForm = ({
name='price_sisa_berat'
value={formik.values.price_sisa_berat ?? undefined}
onChange={(e) => {
formik.handleChange(e);
setCurrentInput(e.target.name);
const value = Number(e.target.value);
handleFieldChange('price_sisa_berat', value, () =>
setCurrentInput(e.target.name)
);
}}
onBlur={() => handleBlurField('price_sisa_berat')}
isError={
formik.touched.price_sisa_berat &&
Boolean(formik.errors.price_sisa_berat)
@@ -752,10 +778,11 @@ const SalesOrderProductForm = ({
name='total_price'
value={formik.values.total_price}
onChange={(e) => {
formik.handleChange(e);
setCurrentInput(e.target.name);
const value = Number(e.target.value);
handleFieldChange('total_price', value, () =>
setCurrentInput('total_price')
);
}}
onBlur={() => handleBlurField('total_price')}
isError={
formik.touched.total_price && Boolean(formik.errors.total_price)
}
src/components/pages/production/project-flock/ProjectFlockTable.tsx
+343 -21
View File
@@ -3,7 +3,10 @@
import Button from '@/components/Button';
import CheckboxInput from '@/components/input/CheckboxInput';
import DebouncedTextInput from '@/components/input/DebouncedTextInput';
import { OptionType, useSelect } from '@/components/input/SelectInput';
import SelectInput, {
OptionType,
useSelect,
} from '@/components/input/SelectInput';
import { useModal } from '@/components/Modal';
import ConfirmationModal from '@/components/modal/ConfirmationModal';
import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
@@ -22,6 +25,7 @@ import { useRouter } from 'next/navigation';
import { ChangeEventHandler, useEffect, useMemo, useState } from 'react';
import toast from 'react-hot-toast';
import useSWR from 'swr';
import { useFormik } from 'formik';
import RequirePermission from '@/components/helper/RequirePermission';
import StatusBadge from '@/components/helper/StatusBadge';
@@ -32,6 +36,12 @@ import { useProjectFlockStore } from '@/stores/production/project-flock/project-
import { ProjectFlockFormValues } from './form/ProjectFlockForm.schema';
import { useChickinStore } from '@/stores/production/chickin/chickin.store';
import { useProjectFlockClosingStore } from '@/stores/production/project-flock-closing/project-flock-closing.store';
import {
ProjectFlockFilterSchema,
ProjectFlockFilterType,
} from './filter/ProjectFlockFilter';
import Modal from '@/components/Modal';
import SelectInputRadio from '@/components/input/SelectInputRadio';
const RowOptionsMenu = ({
props,
@@ -154,19 +164,21 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
} = useTableFilter({
initial: {
search: '',
areaFilter: '',
locationFilter: '',
kandangFilter: '',
periodFilter: '',
area_id: '',
location_id: '',
kandang_id: '',
category: '',
period: '',
},
paramMap: {
page: 'page',
pageSize: 'limit',
search: 'search',
areaFilter: 'area_id',
locationFilter: 'location_id',
kandangFilter: 'kandang_id',
periodFilter: 'period',
area_id: 'area_id',
location_id: 'location_id',
kandang_id: 'kandang_id',
category: 'category',
period: 'period',
},
});
const router = useRouter();
@@ -207,6 +219,190 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
setClosingLoading,
} = useProjectFlockClosingStore();
// ===== FILTER MODAL STATE =====
const filterModal = useModal();
// ===== FILTER DEPENDENCIES STATE =====
const [filterAreaId, setFilterAreaId] = useState<string | undefined>(
undefined
);
const [filterLocationId, setFilterLocationId] = useState<string | undefined>(
undefined
);
// ===== FORMIK SETUP FOR FILTER =====
const formik = useFormik<ProjectFlockFilterType>({
initialValues: {
area_id: null,
location_id: null,
kandang_id: null,
category: null,
period: null,
},
validationSchema: ProjectFlockFilterSchema,
onSubmit: (values, { setSubmitting }) => {
updateFilter('area_id', values.area_id || '');
updateFilter('location_id', values.location_id || '');
updateFilter('kandang_id', values.kandang_id || '');
updateFilter('category', values.category || '');
updateFilter('period', values.period || '');
filterModal.closeModal();
setSubmitting(false);
},
onReset: () => {
updateFilter('area_id', '');
updateFilter('location_id', '');
updateFilter('kandang_id', '');
updateFilter('category', '');
updateFilter('period', '');
setFilterAreaId(undefined);
setFilterLocationId(undefined);
filterModal.closeModal();
},
});
// ===== FILTER OPTIONS =====
const {
setInputValue: setAreaInputValue,
options: areaOptions,
isLoadingOptions: isLoadingAreaOptions,
loadMore: loadMoreAreas,
} = useSelect(AreaApi.basePath, 'id', 'name');
const {
setInputValue: setLocationInputValue,
options: locationOptions,
isLoadingOptions: isLoadingLocationOptions,
loadMore: loadMoreLocations,
} = useSelect(LocationApi.basePath, 'id', 'name', 'search', {
area_id: filterAreaId || '',
});
const {
setInputValue: setKandangInputValue,
options: kandangOptions,
isLoadingOptions: isLoadingKandangOptions,
loadMore: loadMoreKandangs,
} = useSelect(KandangApi.basePath, 'id', 'name', 'search', {
area_id: filterAreaId || '',
location_id: filterLocationId || '',
});
const categoryOptions = useMemo(
() => [
{ value: 'GROWING', label: 'Growing' },
{ value: 'LAYING', label: 'Laying' },
],
[]
);
const periodOptions = useMemo(
() => [
{ value: '1', label: 'Periode 1' },
{ value: '2', label: 'Periode 2' },
],
[]
);
// ===== FILTER HELPERS =====
const areaValue = useMemo(() => {
if (!formik.values.area_id) return null;
return (
areaOptions.find((opt) => String(opt.value) === formik.values.area_id) ||
null
);
}, [formik.values.area_id, areaOptions]);
const locationValue = useMemo(() => {
if (!formik.values.location_id) return null;
return (
locationOptions.find(
(opt) => String(opt.value) === formik.values.location_id
) || null
);
}, [formik.values.location_id, locationOptions]);
const kandangValue = useMemo(() => {
if (!formik.values.kandang_id) return null;
return (
kandangOptions.find(
(opt) => String(opt.value) === formik.values.kandang_id
) || null
);
}, [formik.values.kandang_id, kandangOptions]);
const categoryValue = useMemo(() => {
if (!formik.values.category) return null;
return (
categoryOptions.find((opt) => opt.value === formik.values.category) ||
null
);
}, [formik.values.category, categoryOptions]);
const periodValue = useMemo(() => {
if (!formik.values.period) return null;
return (
periodOptions.find((opt) => opt.value === formik.values.period) || null
);
}, [formik.values.period, periodOptions]);
// ===== ACTIVE FILTERS COUNT =====
const activeFiltersCount = useMemo(() => {
let count = 0;
if (tableFilterState.area_id) count += 1;
if (tableFilterState.location_id) count += 1;
if (tableFilterState.kandang_id) count += 1;
if (tableFilterState.category) count += 1;
if (tableFilterState.period) count += 1;
return count;
}, [
tableFilterState.area_id,
tableFilterState.location_id,
tableFilterState.kandang_id,
tableFilterState.category,
tableFilterState.period,
]);
const hasFilters = activeFiltersCount > 0;
// ===== FILTER DEPENDENCY HANDLERS =====
const handleFilterAreaChange = (area: OptionType | null) => {
const areaId = area?.value ? String(area.value) : undefined;
setFilterAreaId(areaId);
if (!areaId) {
setFilterLocationId(undefined);
formik.setFieldValue('location_id', null);
formik.setFieldValue('kandang_id', null);
}
};
const handleFilterLocationChange = (location: OptionType | null) => {
const locationId = location?.value ? String(location.value) : undefined;
setFilterLocationId(locationId);
if (!locationId) {
formik.setFieldValue('kandang_id', null);
}
};
// ===== HANDLE FILTER MODAL OPEN =====
const handleFilterModalOpen = () => {
const areaId = tableFilterState.area_id || null;
const locationId = tableFilterState.location_id || null;
formik.setValues({
area_id: areaId,
location_id: locationId,
kandang_id: tableFilterState.kandang_id || null,
category: tableFilterState.category || null,
period: tableFilterState.period || null,
});
setFilterAreaId(areaId || undefined);
setFilterLocationId(locationId || undefined);
filterModal.openModal();
};
// ===== Fetch Data =====
const {
data: projectFlocks,
@@ -768,26 +964,21 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
<Button
variant='outline'
color='none'
// onClick={filterModal.openModal}
onClick={handleFilterModalOpen}
className={cn(
'px-3 py-2.5 gap-1.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft transition-all',
{
// 'border-primary-gradient text-primary': isFilterActive,
'border-primary-gradient text-primary': hasFilters,
}
)}
>
<Icon icon='heroicons:funnel' width={20} height={20} />
Filter
{/* {isFilterActive && (
<Badge
className={{
badge:
'p-1.5 bg-[#FF3535] text-xs text-base-100 border border-base-300 rounded-lg',
}}
>
{filterCount}
</Badge>
)} */}
{hasFilters && (
<span className='w-5 h-5 text-white bg-[#FF3535] rounded-lg border border-base-300 flex items-center justify-center text-xs'>
{activeFiltersCount}
</span>
)}
</Button>
<Dropdown
@@ -1011,6 +1202,137 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
}}
/>
{/* Filter Modal */}
<Modal
ref={filterModal.ref}
className={{
modal: 'p-0',
modalBox: 'p-0 rounded-[0.875rem] xl:max-w-4/12 max-w-sm',
}}
>
{/* Modal Header */}
<div className='flex items-center justify-between gap-2 border-b border-base-content/10 p-4'>
<div className='flex items-center gap-2 text-primary'>
<Icon icon='heroicons:funnel' width={20} height={20} />
<h3 className='font-medium text-sm'>Filter Data</h3>
</div>
<Button
variant='link'
onClick={filterModal.closeModal}
className='text-base-content/50 hover:text-base-content transition-colors cursor-pointer'
>
<Icon icon='heroicons:x-mark' width={20} height={20} />
</Button>
</div>
<form onSubmit={formik.handleSubmit} onReset={formik.handleReset}>
<div className='p-4 flex flex-col gap-1.5'>
<SelectInput
label='Area'
placeholder='Pilih Area'
options={areaOptions}
value={areaValue}
onChange={(val) => {
if (!Array.isArray(val)) {
const areaValue = val?.value ? String(val.value) : null;
formik.setFieldValue('area_id', areaValue);
handleFilterAreaChange(val || null);
}
}}
onInputChange={setAreaInputValue}
isLoading={isLoadingAreaOptions}
isClearable
onMenuScrollToBottom={loadMoreAreas}
className={{ wrapper: 'w-full' }}
/>
<SelectInput
label='Lokasi'
placeholder='Pilih Lokasi'
options={locationOptions}
value={locationValue}
onChange={(val) => {
if (!Array.isArray(val)) {
const locationValue = val?.value ? String(val.value) : null;
formik.setFieldValue('location_id', locationValue);
handleFilterLocationChange(val || null);
}
}}
onInputChange={setLocationInputValue}
isLoading={isLoadingLocationOptions}
isClearable
onMenuScrollToBottom={loadMoreLocations}
className={{ wrapper: 'w-full' }}
/>
<SelectInput
label='Kandang'
placeholder='Pilih Kandang'
options={kandangOptions}
value={kandangValue}
onChange={(val) => {
if (!Array.isArray(val)) {
formik.setFieldValue(
'kandang_id',
val?.value ? String(val.value) : null
);
}
}}
onInputChange={setKandangInputValue}
isLoading={isLoadingKandangOptions}
isClearable
onMenuScrollToBottom={loadMoreKandangs}
className={{ wrapper: 'w-full' }}
/>
<SelectInputRadio
label='Kategori'
placeholder='Pilih Kategori'
options={categoryOptions}
value={categoryValue}
onChange={(val) => {
if (!Array.isArray(val)) {
formik.setFieldValue('category', val?.value || null);
}
}}
className={{ wrapper: 'w-full' }}
isClearable={true}
/>
<SelectInputRadio
label='Periode'
placeholder='Pilih Periode'
options={periodOptions}
value={periodValue}
onChange={(val) => {
if (!Array.isArray(val)) {
formik.setFieldValue('period', val?.value || null);
}
}}
className={{ wrapper: 'w-full' }}
isClearable
/>
</div>
{/* Modal Footer */}
<div className='flex justify-between items-center gap-4 p-4 border-t border-base-content/10 bg-gray-50'>
<Button
type='reset'
variant='soft'
className='rounded-lg text-base-content/65 bg-transparent border-none hover:bg-base-content/10 hover:text-base-content/65 transition-colors px-3 py-2'
>
Reset Filter
</Button>
<Button
type='submit'
className='min-w-40 text-sm rounded-lg py-3 text-white font-semibold'
disabled={!formik.isValid || formik.isSubmitting}
>
Apply Filter
</Button>
</div>
</form>
</Modal>
{/* Project Flock Closing Modal */}
<ConfirmationModal
ref={closingModal.ref}
src/components/pages/production/project-flock/detail/ProjectFlockDetail.tsx
+29 -4
View File
@@ -1,6 +1,7 @@
import Button from '@/components/Button';
import Card from '@/components/Card';
import { RadioGroup, RadioGroupItem } from '@/components/input/RadioInput';
import { useSelect } from '@/components/input/SelectInput';
import Tooltip from '@/components/Tooltip';
import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
import { cn, formatCurrency, formatDate, formatNumber } from '@/lib/helper';
@@ -37,10 +38,37 @@ const ProjectFlockDetail = ({
null
);
const { rawData: projectFlockRawData } = useSelect<ProjectFlock>(
ProjectFlockApi.basePath,
'id',
'flock_name',
'search',
selectedKandangId ? { kandang_id: `[${selectedKandangId}]` } : undefined
);
const selectedKandang = projectFlock.kandangs?.find(
(kandang) => kandang.id === Number(selectedKandangId)
);
// Cek apakah ada project aktif di kandang yang sama (selain project saat ini)
// Hanya boleh 1 kandang aktif, jadi jika ada project lain yang aktif, tidak bisa di-unclose baik kategori growing maupun laying
const hasActiveProjectWithSameKandang = isResponseSuccess(projectFlockRawData)
? projectFlockRawData.data.some((pf) =>
pf.kandangs?.some(
(k) =>
k.id === Number(selectedKandangId) &&
pf.id !== projectFlock.id &&
k.status !== 'NON_ACTIVE'
)
)
: false;
const isCloseButtonDisabled =
!selectedKandangId ||
projectFlock?.approval?.step_number == 1 ||
(selectedKandang?.status === 'NON_ACTIVE' &&
hasActiveProjectWithSameKandang);
const { data: projectFlockApprovalResponse } = useSWR(
projectFlock.id ? ['approval-project-flock', projectFlock.id] : undefined,
([, id]) => ProjectFlockApi.getApprovalLineHistory(Number(id))
@@ -419,10 +447,7 @@ const ProjectFlockDetail = ({
className='w-full px-2 py-1 text-sm'
variant='outline'
color='error'
disabled={
!selectedKandangId ||
projectFlock?.approval?.step_number == 1
}
disabled={isCloseButtonDisabled}
>
{selectedKandang?.status === 'NON_ACTIVE' ? (
<>
src/components/pages/production/project-flock/filter/ProjectFlockFilter.ts
+21
View File
@@ -0,0 +1,21 @@
import * as yup from 'yup';
export type ProjectFlockFilterType = {
area_id: string | null;
location_id: string | null;
kandang_id: string | null;
category: string | null;
period: string | null;
};
export const ProjectFlockFilterSchema = yup.object({
area_id: yup.string().nullable(),
location_id: yup.string().nullable(),
kandang_id: yup.string().nullable(),
category: yup.string().nullable(),
period: yup.string().nullable(),
});
export type ProjectFlockFilterValues = yup.InferType<
typeof ProjectFlockFilterSchema
>;
src/components/pages/report/expense/ReportExpenseTabs.tsx
+2 -2
View File
@@ -3,12 +3,12 @@
import { useState } from 'react';
import Tabs from '@/components/Tabs';
import { useReportTabStore } from '@/stores/report/report-tab.store';
import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
import ReportExpenseTab from './tab/ReportExpenseTab';
const ReportExpenseTabs = () => {
const [activeTabId, setActiveTabId] = useState<string>('1');
const tabActions = useReportTabStore((state) => state.tabActions);
const tabActions = useTabActionsStore((state) => state.tabActions);
const tabs = [
{
src/components/pages/report/expense/tab/ReportExpenseTab.tsx
+3 -3
View File
@@ -19,7 +19,7 @@ import { cn, formatCurrency, formatDate } from '@/lib/helper';
import { ReportExpense } from '@/types/api/report/report-expense';
import { ReportExpenseApi } from '@/services/api/report';
import { isResponseSuccess } from '@/lib/api-helper';
import { useReportTabStore } from '@/stores/report/report-tab.store';
import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
import Modal, { useModal } from '@/components/Modal';
import Pagination from '@/components/Pagination';
import ReportExpenseSkeleton from '@/components/pages/report/expense/skeleton/ReportExpenseSkeleton';
@@ -305,8 +305,8 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
]);
// ===== REGISTER TAB ACTIONS TO STORE =====
const setTabActions = useReportTabStore((state) => state.setTabActions);
const clearTabActions = useReportTabStore((state) => state.clearTabActions);
const setTabActions = useTabActionsStore((state) => state.setTabActions);
const clearTabActions = useTabActionsStore((state) => state.clearTabActions);
useEffect(() => {
setTabActions(
src/components/pages/report/finance/FinanceTabs.tsx
+2 -2
View File
@@ -4,11 +4,11 @@ import { useState } from 'react';
import Tabs from '@/components/Tabs';
import CustomerPaymentTab from '@/components/pages/report/finance/tab/CustomerPaymentTab';
import DebtSupplierTab from '@/components/pages/report/finance/tab/DebtSupplierTab';
import { useReportTabStore } from '@/stores/report/report-tab.store';
import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
const FinanceTabs = () => {
const [activeTabId, setActiveTabId] = useState<string>('1');
const tabActions = useReportTabStore((state) => state.tabActions);
const tabActions = useTabActionsStore((state) => state.tabActions);
const tabs = [
{
src/components/pages/report/finance/tab/CustomerPaymentTab.tsx
+3 -3
View File
@@ -34,7 +34,7 @@ import {
} from '@/components/pages/report/finance/filter/CustomerPaymentFilter';
import { generateCustomerPaymentExcel } from '@/components/pages/report/finance/export/CustomerPaymentExportXLSX';
import { generateCustomerPaymentPDF } from '@/components/pages/report/finance/export/CustomerPaymentExportPDF';
import { useReportTabStore } from '@/stores/report/report-tab.store';
import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
import CustomerSupplierSkeleton from '@/components/pages/report/finance/skeleton/CustomerSupplierSkeleton';
import { OptionType } from '@/components/table/TableRowSizeSelector';
import { Color } from '@/types/theme';
@@ -373,8 +373,8 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
}, [customerPaymentExport, filterParams, customerOptions]);
// ===== REGISTER TAB ACTIONS TO STORE =====
const setTabActions = useReportTabStore((state) => state.setTabActions);
const clearTabActions = useReportTabStore((state) => state.clearTabActions);
const setTabActions = useTabActionsStore((state) => state.setTabActions);
const clearTabActions = useTabActionsStore((state) => state.clearTabActions);
useEffect(() => {
setTabActions(
src/components/pages/report/finance/tab/DebtSupplierTab.tsx
+3 -3
View File
@@ -31,7 +31,7 @@ import { Color } from '@/types/theme';
import { Supplier } from '@/types/api/master-data/supplier';
import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
import SelectInputRadio from '@/components/input/SelectInputRadio';
import { useReportTabStore } from '@/stores/report/report-tab.store';
import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
import StatusBadge from '@/components/helper/StatusBadge';
import DebtSupplierSkeleton from '@/components/pages/report/finance/skeleton/DebtSupplierSkeleton';
@@ -265,8 +265,8 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
}, [debtSupplierExport]);
// ===== REGISTER TAB ACTIONS TO STORE =====
const setTabActions = useReportTabStore((state) => state.setTabActions);
const clearTabActions = useReportTabStore((state) => state.clearTabActions);
const setTabActions = useTabActionsStore((state) => state.setTabActions);
const clearTabActions = useTabActionsStore((state) => state.clearTabActions);
useEffect(() => {
setTabActions(
src/components/pages/report/logistic-stock/LogisticStockTabs.tsx
+2 -2
View File
@@ -3,11 +3,11 @@
import { useState } from 'react';
import Tabs from '@/components/Tabs';
import PurchasesPerSupplierTab from '@/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab';
import { useReportTabStore } from '@/stores/report/report-tab.store';
import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
const LogisticStockTabs = () => {
const [activeTabId, setActiveTabId] = useState<string>('1');
const tabActions = useReportTabStore((state) => state.tabActions);
const tabActions = useTabActionsStore((state) => state.tabActions);
const tabs = [
{
src/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab.tsx
+3 -3
View File
@@ -30,7 +30,7 @@ import {
} from '@/components/pages/report/logistic-stock/filter/PurchasesPerSupplierFilter';
import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
import SelectInputRadio from '@/components/input/SelectInputRadio';
import { useReportTabStore } from '@/stores/report/report-tab.store';
import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
import PurchasePerSupplierSkeleton from '@/components/pages/report/logistic-stock/skeleton/PurchasePerSupplierSkeleton';
interface PurchasesPerSupplierTabProps {
@@ -479,8 +479,8 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
]);
// ===== REGISTER TAB ACTIONS TO STORE =====
const setTabActions = useReportTabStore((state) => state.setTabActions);
const clearTabActions = useReportTabStore((state) => state.clearTabActions);
const setTabActions = useTabActionsStore((state) => state.setTabActions);
const clearTabActions = useTabActionsStore((state) => state.clearTabActions);
useEffect(() => {
setTabActions(
src/components/pages/report/marketing/MarketingTabs.tsx
+2 -2
View File
@@ -4,11 +4,11 @@ import { useState } from 'react';
import Tabs from '@/components/Tabs';
import DailyMarketingReportContent from '@/components/pages/report/marketing/tab/DailyMarketingTab';
import HppPerKandangTab from '@/components/pages/report/marketing/tab/HppPerKandangTab';
import { useReportTabStore } from '@/stores/report/report-tab.store';
import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
const MarketingReportContent = () => {
const [activeTabId, setActiveTabId] = useState<string>('1');
const tabActions = useReportTabStore((state) => state.tabActions);
const tabActions = useTabActionsStore((state) => state.tabActions);
const tabs = [
{
src/components/pages/report/marketing/tab/DailyMarketingTab.tsx
+3 -3
View File
@@ -37,7 +37,7 @@ import {
import SelectInput from '@/components/input/SelectInput';
import Modal, { useModal } from '@/components/Modal';
import { cn } from '@/lib/helper';
import { useReportTabStore } from '@/stores/report/report-tab.store';
import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
import DailyMarketingReportSkeleton from '@/components/pages/report/marketing/skeleton/DailyMarketingSkeleton';
import { useEffect as useEffectHook } from 'react';
import { httpClient } from '@/services/http/client';
@@ -390,8 +390,8 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
}, [dailyMarketingsExport, summaryTotal]);
// ===== REGISTER TAB ACTIONS TO STORE =====
const setTabActions = useReportTabStore((state) => state.setTabActions);
const clearTabActions = useReportTabStore((state) => state.clearTabActions);
const setTabActions = useTabActionsStore((state) => state.setTabActions);
const clearTabActions = useTabActionsStore((state) => state.clearTabActions);
useEffectHook(() => {
setTabActions(
src/components/pages/report/marketing/tab/HppPerKandangTab.tsx
+10 -7
View File
@@ -31,7 +31,7 @@ import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
import SelectInputRadio from '@/components/input/SelectInputRadio';
import Modal, { useModal } from '@/components/Modal';
import { cn } from '@/lib/helper';
import { useReportTabStore } from '@/stores/report/report-tab.store';
import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
import HppPerKandangSkeleton from '@/components/pages/report/marketing/skeleton/HppPerKandangSkeleton';
import { useEffect as useEffectHook } from 'react';
@@ -110,7 +110,7 @@ const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
weight_max: null,
period: null,
sort_by: null,
show_unrecorded: null,
show_unrecorded: false,
},
validationSchema: HppPerKandangFilterSchema,
onSubmit: (values, { setSubmitting }) => {
@@ -122,8 +122,7 @@ const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
weight_max: values.weight_max || undefined,
period: values.period || undefined,
sort_by: values.sort_by || undefined,
show_unrecorded:
values.show_unrecorded !== null ? values.show_unrecorded : undefined,
show_unrecorded: values.show_unrecorded ?? undefined,
});
filterModal.closeModal();
setIsSubmitted(true);
@@ -480,8 +479,8 @@ const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
]);
// ===== REGISTER TAB ACTIONS TO STORE =====
const setTabActions = useReportTabStore((state) => state.setTabActions);
const clearTabActions = useReportTabStore((state) => state.clearTabActions);
const setTabActions = useTabActionsStore((state) => state.setTabActions);
const clearTabActions = useTabActionsStore((state) => state.clearTabActions);
useEffectHook(() => {
setTabActions(
@@ -1026,7 +1025,11 @@ const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
if (!Array.isArray(val)) {
formik.setFieldValue(
'show_unrecorded',
val?.value === 'true' || null
val?.value === 'true'
? true
: val?.value === 'false'
? false
: null
);
}
}}
src/components/pages/report/production-result/ProductionResultTabs.tsx
+2 -3
View File
@@ -3,11 +3,10 @@
import { useState } from 'react';
import Tabs from '@/components/Tabs';
import ProductionResultTab from '@/components/pages/report/production-result/tab/ProductionResultProjectFlockKandangTab';
import { useReportTabStore } from '@/stores/report/report-tab.store';
import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
const ProductionResultTabs = () => {
const [activeTabId, setActiveTabId] = useState<string>('1');
const tabActions = useReportTabStore((state) => state.tabActions);
const tabActions = useTabActionsStore((state) => state.tabActions);
const tabs = [
{
src/components/pages/report/production-result/tab/ProductionResultProjectFlockKandangTab.tsx
+3 -3
View File
@@ -34,7 +34,7 @@ import { ColumnDef } from '@tanstack/react-table';
import { ProductionResult } from '@/types/api/report/production-result';
import ProductionResultReportPDF from '../export/ProductionResultExportPDF';
import { pdf } from '@react-pdf/renderer';
import { useReportTabStore } from '@/stores/report/report-tab.store';
import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
import Modal, { useModal } from '@/components/Modal';
import { cn, formatNumber } from '@/lib/helper';
import Pagination from '@/components/Pagination';
@@ -532,8 +532,8 @@ const ProductionResultContent = ({ tabId }: ProductionResultTabProps) => {
}, [filterParams]);
// ===== REGISTER TAB ACTIONS TO STORE =====
const setTabActions = useReportTabStore((state) => state.setTabActions);
const clearTabActions = useReportTabStore((state) => state.clearTabActions);
const setTabActions = useTabActionsStore((state) => state.setTabActions);
const clearTabActions = useTabActionsStore((state) => state.clearTabActions);
useEffect(() => {
setTabActions(
src/services/api/report/marketing-sale.ts
+1 -1
View File
@@ -35,7 +35,7 @@ export class MarketingSaleReportService extends BaseApiService<
weight_max: weight_max,
period: period,
sort_by: sort_by,
show_unrecorded: show_unrecorded,
show_unrecorded: show_unrecorded ?? false,
page: page,
limit: limit,
},
src/stores/closing/closing-tab.store.ts
-21
View File
@@ -1,21 +0,0 @@
'use client';
import { create } from 'zustand';
import { devtools } from 'zustand/middleware';
import {
createClosingTabSlice,
ClosingTabSlice,
} from '@/stores/closing/slices/closing-tab.slice';
export type ClosingTabStore = ClosingTabSlice;
export const useClosingTabStore = create<ClosingTabStore>()(
devtools(
(...args) => ({
...createClosingTabSlice(...args),
}),
{
name: 'ClosingTabStore',
}
)
);
src/stores/closing/slices/closing-tab.slice.ts
-37
View File
@@ -1,37 +0,0 @@
import { ReactNode } from 'react';
import { StateCreator } from 'zustand';
export type ClosingTabSlice = {
// State - actions per tab ID
tabActions: Record<string, ReactNode>;
// Actions
setTabActions: (tabId: string, actions: ReactNode) => void;
clearTabActions: (tabId: string) => void;
clearAllTabActions: () => void;
};
export const createClosingTabSlice: StateCreator<
ClosingTabSlice,
[],
[],
ClosingTabSlice
> = (set) => ({
tabActions: {},
setTabActions: (tabId, actions) =>
set((state) => ({
tabActions: {
...state.tabActions,
[tabId]: actions,
},
})),
clearTabActions: (tabId) =>
set((state) => {
const { [tabId]: _, ...rest } = state.tabActions;
return { tabActions: rest };
}),
clearAllTabActions: () => set({ tabActions: {} }),
});
src/stores/report/report-tab.store.ts
-21
View File
@@ -1,21 +0,0 @@
'use client';
import { create } from 'zustand';
import { devtools } from 'zustand/middleware';
import {
createReportTabSlice,
ReportTabSlice,
} from '@/stores/report/slices/report-tab.slice';
export type ReportTabStore = ReportTabSlice;
export const useReportTabStore = create<ReportTabStore>()(
devtools(
(...args) => ({
...createReportTabSlice(...args),
}),
{
name: 'ReportTabStore',
}
)
);
src/stores/report/slices/report-tab.slice.ts
-37
View File
@@ -1,37 +0,0 @@
import { ReactNode } from 'react';
import { StateCreator } from 'zustand';
export type ReportTabSlice = {
// State - actions per tab ID
tabActions: Record<string, ReactNode>;
// Actions
setTabActions: (tabId: string, actions: ReactNode) => void;
clearTabActions: (tabId: string) => void;
clearAllTabActions: () => void;
};
export const createReportTabSlice: StateCreator<
ReportTabSlice,
[],
[],
ReportTabSlice
> = (set) => ({
tabActions: {},
setTabActions: (tabId, actions) =>
set((state) => ({
tabActions: {
...state.tabActions,
[tabId]: actions,
},
})),
clearTabActions: (tabId) =>
set((state) => {
const { [tabId]: _, ...rest } = state.tabActions;
return { tabActions: rest };
}),
clearAllTabActions: () => set({ tabActions: {} }),
});
src/stores/tab-actions/tab-actions.store.ts
+42
View File
@@ -0,0 +1,42 @@
'use client';
import { create } from 'zustand';
import { devtools } from 'zustand/middleware';
import { ReactNode } from 'react';
export type TabActionsSlice = {
// State - actions per tab ID
tabActions: Record<string, ReactNode>;
// Actions
setTabActions: (tabId: string, actions: ReactNode) => void;
clearTabActions: (tabId: string) => void;
clearAllTabActions: () => void;
};
export const useTabActionsStore = create<TabActionsSlice>()(
devtools(
(set) => ({
tabActions: {},
setTabActions: (tabId, actions) =>
set((state) => ({
tabActions: {
...state.tabActions,
[tabId]: actions,
},
})),
clearTabActions: (tabId) =>
set((state) => {
const { [tabId]: _, ...rest } = state.tabActions;
return { tabActions: rest };
}),
clearAllTabActions: () => set({ tabActions: {} }),
}),
{
name: 'TabActionsStore',
}
)
);
src/types/api/production/project-flock.d.ts
Vendored
+1
View File
@@ -23,6 +23,7 @@ export type BaseProjectFlock = {
kandang_ids: number[];
kandangs: (Kandang & {
project_flock_kandang_id: number;
closed_at?: string;
})[];
project_budgets?: ProjectFlockBudget[];
approval: BaseApproval;