import { Head, usePage } from '@inertiajs/react';
import { IconButton } from '@/components/common/IconButton';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { TableActiveFilters, type TableActiveFilterItem } from '@/components/common/TableActiveFilters';
import { PageHeaderActions } from '@/components/page-header-actions';
import { TableListToolbar } from '@/components/common/TableListToolbar';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader } from '@/components/ui/card';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { VatRateFormSheet } from '@/features/vat-rates/components/vat-rate-form-sheet';
import { useVatRatesFilters } from '@/features/vat-rates/lib/use-vat-rates-filters';
import { useVatRatesColumns } from '@/features/vat-rates/table/vat-rates-columns';
import { VatRatesTable } from '@/features/vat-rates/table/vat-rates-table';
import type { VatRatesIndexPageProps, VatRatesSortColumn } from '@/features/vat-rates/types';
import { useAuthorization } from '@/hooks/use-authorization';
import { useI18n } from '@/hooks/use-i18n';
export default function VatRatesSettingsPage() {
const { t } = useI18n();
const { vat_rates, filters: initialFilters, editing_vat_rate } = usePage().props;
const { hasRole } = useAuthorization();
const canManage = hasRole('admin');
const { filters, search, setSearch, isApplying, applyFilters, openEdit, closeEdit } =
useVatRatesFilters(initialFilters);
const [createSheetOpen, setCreateSheetOpen] = useState(false);
const sheetOpen = createSheetOpen || Boolean(editing_vat_rate);
const sheetMode = editing_vat_rate ? 'edit' : 'create';
useEffect(() => {
if (editing_vat_rate) {
setCreateSheetOpen(false);
}
}, [editing_vat_rate]);
const onSort = useCallback(
(column: VatRatesSortColumn) => {
const nextDirection =
filters.sort_by === column && filters.sort_direction === 'asc' ? 'desc' : 'asc';
applyFilters({
page: 1,
sort_by: column,
sort_direction: nextDirection,
});
},
[applyFilters, filters.sort_by, filters.sort_direction],
);
const columns = useVatRatesColumns(onSort, canManage, openEdit);
const handleSheetOpenChange = (open: boolean) => {
if (!open) {
setCreateSheetOpen(false);
if (editing_vat_rate) {
closeEdit();
}
}
};
const clearAllFilters = () => {
setSearch('');
applyFilters({ page: 1, search: '' });
};
const activeFilterItems = useMemo((): TableActiveFilterItem[] => {
if (filters.search === '') {
return [];
}
return [
{
key: 'search',
label: t('common.active_filters.search', { value: filters.search }),
onRemove: clearAllFilters,
},
];
}, [filters.search, t]);
return (
<>
setCreateSheetOpen(true)}
icon="material-symbols:add"
/>
{t('settings.vat_rates.tooltips.add_rate')}
) : null
}
/>
applyFilters({ page: 1, search }),
placeholder: t('settings.vat_rates.search.placeholder'),
submitLabel: t('settings.vat_rates.search.submit'),
disabled: isApplying,
}}
/>
applyFilters({ page })}
isLoading={isApplying}
/>
{canManage && sheetOpen ? (
{
setCreateSheetOpen(false);
if (editing_vat_rate) {
closeEdit();
}
}}
/>
) : null}
);
}