import { Head, usePage } from '@inertiajs/react'; import { useCallback, useState } from 'react'; import { PageHeaderActions } from '@/components/page-header-actions'; import { Card, CardContent, CardHeader } from '@/components/ui/card'; import { DocumentsActiveFilters } from '@/features/documents/components/documents-active-filters'; import { DocumentsQueueAllAiButton } from '@/features/documents/components/documents-queue-all-ai-button'; import { DocumentsTableToolbar } from '@/features/documents/components/documents-table-toolbar'; import { useDocumentsListProcessingSync } from '@/features/documents/hooks/use-document-processing-sync'; import { useDocumentsFilters } from '@/features/documents/lib/use-documents-filters'; import { useDocumentsColumns } from '@/features/documents/table/documents-columns'; import { DocumentsTable } from '@/features/documents/table/documents-table'; import type { DocumentsIndexPageProps } from '@/features/documents/types'; import { useAuthorization } from '@/hooks/use-authorization'; import { useI18n } from '@/hooks/use-i18n'; export default function DocumentsIndexPage() { const { t } = useI18n(); const { documents, filters: initialFilters, options } = usePage().props; const { can, hasRole } = useAuthorization(); const { filters, search, setSearch, isApplying, applyFilters, resetFilters, goToDocument } = useDocumentsFilters(initialFilters); const canProcessDocuments = can('process documents') || can('reprocess documents'); const canDeleteDocuments = can('delete documents') || hasRole('admin') || hasRole('accountant'); const canReviewDocuments = can('review documents') || hasRole('admin') || hasRole('accountant'); const canValidateDocuments = can('validate documents') || can('approve documents') || hasRole('admin') || hasRole('accountant'); const [expandedDocumentId, setExpandedDocumentId] = useState(null); useDocumentsListProcessingSync(documents.data); const onToggleExpand = useCallback((documentId: number) => { setExpandedDocumentId((current) => (current === documentId ? null : documentId)); }, []); const onSort = useCallback( (column: 'created_at' | 'accountant_status' | 'ai_status') => { 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 = useDocumentsColumns( onSort, canProcessDocuments, canDeleteDocuments, canReviewDocuments, canValidateDocuments, goToDocument, onToggleExpand, ); return ( <>

) : null } /> applyFilters({ page: 1, search, }) } filters={filters} clientOptions={options.clients} uploaderOptions={options.uploaders} onApplyFilters={applyFilters} onResetFilters={resetFilters} /> { setSearch(''); applyFilters({ page: 1, search: '', }); }} onRemoveClient={() => applyFilters({ page: 1, client_id: null, }) } onRemoveUploader={() => applyFilters({ page: 1, uploaded_by_user_id: null, }) } onRemoveAccountantStatus={() => applyFilters({ page: 1, accountant_status: '', }) } onRemoveAiStatus={() => applyFilters({ page: 1, ai_status: '', }) } onRemoveExtractionStatus={() => applyFilters({ page: 1, extraction_status: '', }) } onRemoveUploadedFrom={() => applyFilters({ page: 1, uploaded_from: '', }) } onRemoveUploadedTo={() => applyFilters({ page: 1, uploaded_to: '', }) } onRemoveClientMismatch={() => applyFilters({ page: 1, client_mismatch: null, }) } /> applyFilters({ page })} isLoading={isApplying} expandedDocumentId={expandedDocumentId} canDelete={canDeleteDocuments} />

); }