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 { CurrencyFormSheet } from '@/features/currencies/components/currency-form-sheet';
import { useCurrenciesFilters } from '@/features/currencies/lib/use-currencies-filters';
import { useCurrenciesColumns } from '@/features/currencies/table/currencies-columns';
import { CurrenciesTable } from '@/features/currencies/table/currencies-table';
import type { CurrenciesIndexPageProps, CurrenciesSortColumn } from '@/features/currencies/types';
import { useAuthorization } from '@/hooks/use-authorization';
import { useI18n } from '@/hooks/use-i18n';
export default function CurrenciesSettingsPage() {
const { t } = useI18n();
const { currencies, filters: initialFilters, editing_currency } = usePage().props;
const { hasRole } = useAuthorization();
const canManage = hasRole('admin');
const { filters, search, setSearch, isApplying, applyFilters, openEdit, closeEdit } =
useCurrenciesFilters(initialFilters);
const [createSheetOpen, setCreateSheetOpen] = useState(false);
const sheetOpen = createSheetOpen || Boolean(editing_currency);
const sheetMode = editing_currency ? 'edit' : 'create';
useEffect(() => {
if (editing_currency) {
setCreateSheetOpen(false);
}
}, [editing_currency]);
const onSort = useCallback(
(column: CurrenciesSortColumn) => {
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 = useCurrenciesColumns(onSort, canManage, openEdit, filters);
const handleSheetOpenChange = (open: boolean) => {
if (!open) {
setCreateSheetOpen(false);
if (editing_currency) {
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.currencies.tooltips.add_currency')}
) : null
}
/>
applyFilters({ page: 1, search }),
placeholder: t('settings.currencies.search.placeholder'),
submitLabel: t('settings.currencies.search.submit'),
disabled: isApplying,
}}
/>
applyFilters({ page })}
isLoading={isApplying}
/>
{canManage && sheetOpen ? (
{
setCreateSheetOpen(false);
if (editing_currency) {
closeEdit();
}
}}
/>
) : null}
);
}