import { Head, Link, router, usePage } from '@inertiajs/react'; import { IconButton } from '@/components/common/IconButton'; import { Icon } from '@/components/ui/icon'; import { useCallback, useMemo } from 'react'; import { PageHeaderActions } from '@/components/page-header-actions'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader } from '@/components/ui/card'; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'; import { UsersFilters } from '@/features/users/components/users-filters'; import { useUsersFilters } from '@/features/users/lib/use-users-filters'; import { getUsersColumns } from '@/features/users/table/users-columns'; import { UsersTable } from '@/features/users/table/users-table'; import type { ManagedUser, UsersIndexPageProps } from '@/features/users/types'; import { useI18n } from '@/hooks/use-i18n'; export default function UsersIndexPage() { const { t, locale } = useI18n(); const { users, filters, options } = usePage().props; const { filters: normalizedFilters, applyFilters } = useUsersFilters(filters); const handleToggleUserStatus = useCallback((user: ManagedUser) => { const actionUrl = user.is_active ? `/admin/users/${user.id}/deactivate` : `/admin/users/${user.id}/reactivate`; router.patch(actionUrl, {}, { preserveScroll: true }); }, []); const columns = useMemo( () => getUsersColumns( (column) => { const nextDirection = normalizedFilters.sort_by === column && normalizedFilters.sort_direction === 'asc' ? 'desc' : 'asc'; applyFilters({ page: 1, sort_by: column, sort_direction: nextDirection, }); }, handleToggleUserStatus, t, locale, ), [applyFilters, handleToggleUserStatus, locale, normalizedFilters.sort_by, normalizedFilters.sort_direction, t], ); return ( <>

{t('users.admin_index.actions.add_user')} } />

applyFilters({ ...next, }) } /> applyFilters({ page, }) } onPerPageChange={(per_page) => applyFilters({ page: 1, per_page, }) } />

); }