import { Head, usePage } from '@inertiajs/react'; import { Upload } from 'lucide-react'; import { useCallback, useState } from 'react'; import { PageHeaderActions } from '@/components/page-header-actions'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader } from '@/components/ui/card'; import { Dialog, DialogBody, DialogContent, DialogDescription, DialogIconClose, DialogHeader, DialogTitle, } from '@/components/ui/dialog'; import { ClientDocumentSidePanel } from '@/features/documents/components/client-document-side-panel'; import { DocumentsActiveFilters } from '@/features/documents/components/documents-active-filters'; import { DocumentsTableToolbar } from '@/features/documents/components/documents-table-toolbar'; import { ClientDocumentUploadForm } from '@/features/documents/forms/client-document-upload-form'; import { useDocumentsListProcessingSync } from '@/features/documents/hooks/use-document-processing-sync'; import { useClientDocumentsFilters } from '@/features/documents/lib/use-client-documents-filters'; import { useClientDocumentsColumns } from '@/features/documents/table/client-documents-columns'; import { DocumentsTable } from '@/features/documents/table/documents-table'; import type { ClientDocumentsIndexPageProps } from '@/features/documents/types'; export default function ClientDocumentsIndexPage() { const { documents, filters: initialFilters, constraints, options, selected_document } = usePage().props; const { filters, search, setSearch, isApplying, applyFilters, resetFilters, openDocumentModal, closeDocumentModal } = useClientDocumentsFilters(initialFilters); const [expandedDocumentId, setExpandedDocumentId] = useState(null); const [uploadModalOpen, setUploadModalOpen] = useState(false); useDocumentsListProcessingSync(documents.data, ['documents', 'selected_document']); const onSort = useCallback( (column: 'accountant_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 onToggleExpand = useCallback((documentId: number) => { setExpandedDocumentId((current) => (current === documentId ? null : documentId)); }, []); const columns = useClientDocumentsColumns(onSort, openDocumentModal, expandedDocumentId, onToggleExpand); return ( <>

setUploadModalOpen(true)}> Incarca document } />

applyFilters({ page: 1, search, }) } filters={filters} clientOptions={options.clients} uploaderOptions={options.uploaders} onApplyFilters={applyFilters} onResetFilters={resetFilters} hidePipelineFilters /> { 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: '', }) } hidePipelineFilters /> applyFilters({ page })} isLoading={isApplying} expandedDocumentId={expandedDocumentId} /> {selected_document ? ( ) : null}

); }