refactor(FE): Replace active filter count logic with ButtonFilter

component
This commit is contained in:
rstubryan
2026-02-25 10:39:14 +07:00
parent 47a2439777
commit f701ab0d91
13 changed files with 147 additions and 605 deletions
@@ -42,6 +42,7 @@ import {
} from './filter/ProjectFlockFilter';
import Modal from '@/components/Modal';
import SelectInputRadio from '@/components/input/SelectInputRadio';
import ButtonFilter from '@/components/helper/ButtonFilter';
const RowOptionsMenu = ({
props,
@@ -346,25 +347,6 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
);
}, [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;
@@ -961,25 +943,12 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
}}
/>
<Button
variant='outline'
color='none'
<ButtonFilter
values={tableFilterState}
excludeFields={['page', 'pageSize', 'search']}
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': hasFilters,
}
)}
>
<Icon icon='heroicons:funnel' width={20} height={20} />
Filter
{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>
className='px-3 py-2.5'
/>
<Dropdown
align='end'