From de8a36b4abd009afe2cca9acfbfd2b1e73c7f321 Mon Sep 17 00:00:00 2001
From: BFLOWS <sandbox@bflows.net>
Date: Mon, 20 Apr 2026 19:54:56 +0200
Subject: [PATCH] style(docs-picker): fix spacing, icona search, paginazione
 client-side
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tre fix UX raggruppati sul CompanyDocumentPicker dopo feedback browser di Carlo:

1. Spacing banner informativo → filtri: aumentato a 1.5rem (era classe mb-3
   PrimeReact che non applicava abbastanza spazio)

2. Icona lente ricerca non allineata col placeholder: p-input-icon-left
   in PrimeReact 10 non aggiunge piu padding-left automatico. Sostituito
   lo span wrapper con div position:relative + icona absolute left 1rem
   pointer-events none zIndex 1, InputText paddingLeft 2.75rem. Portable
   tra versioni PrimeReact, funziona indipendentemente da eventuali CSS
   override.

3. Paginazione client-side sulla DataTable: paginator con default 10 righe,
   rowsPerPageOptions [10, 25, 50], template full con navigation + counter
   '1-10 di N'. Rimosso scrollable/scrollHeight 400px (la paginazione
   sostituisce lo scroll infinito, UX piu prevedibile per liste grandi).
   Sufficiente client-side per company con fino a qualche centinaio di
   doc (PMI tipicamente 20-50). Se in futuro servira server-side paginated
   dal BE Spring, e un evoluzione incrementale non bloccante.
---
 .../components/CompanyDocumentPicker.js       | 23 ++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/modules/rendicontazione/components/CompanyDocumentPicker.js b/src/modules/rendicontazione/components/CompanyDocumentPicker.js
index a94bf84..5c303da 100644
--- a/src/modules/rendicontazione/components/CompanyDocumentPicker.js
+++ b/src/modules/rendicontazione/components/CompanyDocumentPicker.js
@@ -195,19 +195,27 @@ const CompanyDocumentPicker = ({ visible, companyId, onHide, onSelect, currentSo
                 contentStyle={{ paddingTop: '1rem' }}>
 
             {/* info banner */}
-            <Message severity="info" className="mb-3" style={{ width: '100%' }}
+            <Message severity="info" style={{ width: '100%', marginBottom: '1.5rem' }}
                 content={
                     <small>{__('Seleziona un documento già caricato in fase di domanda. La scadenza viene controllata automaticamente — i documenti scaduti vengono esclusi dal repository.', 'gepafin')}</small>
                 } />
 
             {/* FILTRI — search full width, poi 2 dropdown affiancati con CSS grid rigido */}
             <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: '0.75rem', marginBottom: '1rem' }}>
-                <span className="p-input-icon-left" style={{ display: 'block', width: '100%' }}>
-                    <i className="pi pi-search" />
+                <div style={{ position: 'relative', width: '100%' }}>
+                    <i className="pi pi-search" style={{
+                        position: 'absolute',
+                        left: '1rem',
+                        top: '50%',
+                        transform: 'translateY(-50%)',
+                        color: 'var(--text-color-secondary)',
+                        pointerEvents: 'none',
+                        zIndex: 1
+                    }} />
                     <InputText placeholder={__('Cerca per nome o categoria...', 'gepafin')}
                         value={search} onChange={(e) => setSearch(e.target.value)}
-                        style={{ width: '100%' }} />
-                </span>
+                        style={{ width: '100%', paddingLeft: '2.75rem' }} />
+                </div>
                 <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.75rem' }}>
                     <Dropdown value={categoryFilter} onChange={(e) => setCategoryFilter(e.value)}
                         options={categoryOptions} placeholder={__('Categoria', 'gepafin')}
@@ -235,7 +243,10 @@ const CompanyDocumentPicker = ({ visible, companyId, onHide, onSelect, currentSo
                             ? __('Nessun documento nel repository della tua azienda', 'gepafin')
                             : __('Nessun documento corrisponde ai filtri', 'gepafin')}
                     </div>}
-                    scrollable scrollHeight="400px" size="small" stripedRows
+                    size="small" stripedRows
+                    paginator rows={10} rowsPerPageOptions={[10, 25, 50]}
+                    paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+                    currentPageReportTemplate="{first}-{last} di {totalRecords}"
                     selectionMode="single"
                     selection={chosenDoc}
                     onSelectionChange={(e) => e.value && setSelectedId(e.value.id)}