From c65e3455e691723a7d50395ecde4be128e84e222 Mon Sep 17 00:00:00 2001
From: Horux Dev <dev@horuxfin.com>
Date: Sun, 24 May 2026 19:28:45 +0000
Subject: [PATCH] fix(conciliacion): headers visibles aun sin resultados en
 filtros

---
 .../web/app/(dashboard)/conciliacion/page.tsx | 192 +++++++++---------
 1 file changed, 99 insertions(+), 93 deletions(-)

diff --git a/apps/web/app/(dashboard)/conciliacion/page.tsx b/apps/web/app/(dashboard)/conciliacion/page.tsx
index ef5be3b..f23f032 100644
--- a/apps/web/app/(dashboard)/conciliacion/page.tsx
+++ b/apps/web/app/(dashboard)/conciliacion/page.tsx
@@ -376,11 +376,6 @@ export default function ConciliacionPage() {
             <Card>
               <CardContent className="pt-6">
                 <h3 className="font-medium mb-4">Por conciliar ({pendientesOrdenados.length})</h3>
-                {pendientesOrdenados.length === 0 ? (
-                  <p className="text-sm text-muted-foreground">
-                    No hay CFDIs pendientes de conciliar
-                  </p>
-                ) : (
                   <div className="overflow-x-auto">
                     <table className="w-full text-sm">
                       <thead>
@@ -412,51 +407,58 @@ export default function ConciliacionPage() {
                         </tr>
                       </thead>
                       <tbody>
-                        {pendientesOrdenados.map((cfdi) => (
-                          <tr key={cfdi.id} className="border-b hover:bg-muted/50">
-                            {!isVisor && (
-                              <td className="py-2">
-                                <input
-                                  type="checkbox"
-                                  checked={selected.has(cfdi.id)}
-                                  onChange={() => toggleSelect(cfdi.id)}
-                                />
-                              </td>
-                            )}
-                            <td className="py-2 font-mono text-xs text-center" title={cfdi.uuid}>
-                              {cfdi.uuid?.substring(0, 8)}
-                            </td>
-                            <td className="py-2 text-xs text-center">
-                              {toCfdiDate(cfdi.fechaPagoP || cfdi.fechaEmision).toLocaleDateString('es-MX')}
-                            </td>
-                            <td className="py-2 font-mono text-xs text-center">{cfdi.rfcEmisor}</td>
-                            <td className="py-2 text-xs truncate max-w-[120px] text-center">
-                              {cfdi.nombreEmisor}
-                            </td>
-                            <td className="py-2 font-mono text-xs text-center">{cfdi.rfcReceptor}</td>
-                            <td className="py-2 text-xs truncate max-w-[120px] text-center">
-                              {cfdi.nombreReceptor}
-                            </td>
-                            <td className="py-2 text-xs font-medium text-center">
-                              {formatCurrencyConciliacion(getMonto(cfdi))}
-                            </td>
-                            <td className="py-2 text-xs text-center">{cfdi.metodoPago || '-'}</td>
-                            <td className="py-2 text-center">
-                              <Button
-                                variant="ghost"
-                                size="sm"
-                                onClick={() => setSelectedCfdi(cfdi)}
-                                title="Ver factura"
-                              >
-                                <Eye className="h-4 w-4" />
-                              </Button>
+                        {pendientesOrdenados.length === 0 ? (
+                          <tr>
+                            <td colSpan={isVisor ? 9 : 10} className="py-4 text-sm text-muted-foreground text-center">
+                              No hay CFDIs pendientes de conciliar
                             </td>
                           </tr>
-                        ))}
+                        ) : (
+                          pendientesOrdenados.map((cfdi) => (
+                            <tr key={cfdi.id} className="border-b hover:bg-muted/50">
+                              {!isVisor && (
+                                <td className="py-2">
+                                  <input
+                                    type="checkbox"
+                                    checked={selected.has(cfdi.id)}
+                                    onChange={() => toggleSelect(cfdi.id)}
+                                  />
+                                </td>
+                              )}
+                              <td className="py-2 font-mono text-xs text-center" title={cfdi.uuid}>
+                                {cfdi.uuid?.substring(0, 8)}
+                              </td>
+                              <td className="py-2 text-xs text-center">
+                                {toCfdiDate(cfdi.fechaPagoP || cfdi.fechaEmision).toLocaleDateString('es-MX')}
+                              </td>
+                              <td className="py-2 font-mono text-xs text-center">{cfdi.rfcEmisor}</td>
+                              <td className="py-2 text-xs truncate max-w-[120px] text-center">
+                                {cfdi.nombreEmisor}
+                              </td>
+                              <td className="py-2 font-mono text-xs text-center">{cfdi.rfcReceptor}</td>
+                              <td className="py-2 text-xs truncate max-w-[120px] text-center">
+                                {cfdi.nombreReceptor}
+                              </td>
+                              <td className="py-2 text-xs font-medium text-center">
+                                {formatCurrencyConciliacion(getMonto(cfdi))}
+                              </td>
+                              <td className="py-2 text-xs text-center">{cfdi.metodoPago || '-'}</td>
+                              <td className="py-2 text-center">
+                                <Button
+                                  variant="ghost"
+                                  size="sm"
+                                  onClick={() => setSelectedCfdi(cfdi)}
+                                  title="Ver factura"
+                                >
+                                  <Eye className="h-4 w-4" />
+                                </Button>
+                              </td>
+                            </tr>
+                          ))
+                        )}
                       </tbody>
                     </table>
                   </div>
-                )}
               </CardContent>
             </Card>
 
@@ -508,9 +510,6 @@ export default function ConciliacionPage() {
             <Card>
               <CardContent className="pt-6">
                 <h3 className="font-medium mb-4">Conciliadas ({conciliadasOrdenadas.length})</h3>
-                {conciliadasOrdenadas.length === 0 ? (
-                  <p className="text-sm text-muted-foreground">No hay CFDIs conciliados</p>
-                ) : (
                   <div className="overflow-x-auto">
                     <table className="w-full text-sm">
                       <thead>
@@ -530,60 +529,67 @@ export default function ConciliacionPage() {
                         </tr>
                       </thead>
                       <tbody>
-                        {conciliadasOrdenadas.map((cfdi) => (
-                          <tr key={cfdi.id} className="border-b hover:bg-muted/50">
-                            <td className="py-2 font-mono text-xs text-center" title={cfdi.uuid}>
-                              {cfdi.uuid?.substring(0, 8)}
+                        {conciliadasOrdenadas.length === 0 ? (
+                          <tr>
+                            <td colSpan={8} className="py-4 text-sm text-muted-foreground text-center">
+                              No hay CFDIs conciliados
                             </td>
-                            <td className="py-2 text-xs text-center">
-                              {toCfdiDate(cfdi.fechaPagoP || cfdi.fechaEmision).toLocaleDateString('es-MX')}
-                            </td>
-                            <td className="py-2 font-mono text-xs text-center">{activeTab === 'EMITIDO' ? cfdi.rfcReceptor : cfdi.rfcEmisor}</td>
-                            <td className="py-2 text-xs truncate max-w-[120px] text-center">
-                              {activeTab === 'EMITIDO' ? cfdi.nombreReceptor : cfdi.nombreEmisor}
-                            </td>
-                            <td className="py-2 text-xs font-medium text-center">
-                              {formatCurrencyConciliacion(getMonto(cfdi))}
-                            </td>
-                            <td className="py-2 text-xs text-center">
-                              {cfdi.conciliacion?.fechaDePago
-                                ? new Date(
-                                    (cfdi.conciliacion.fechaDePago.split('T')[0]) + 'T12:00:00',
-                                  ).toLocaleDateString('es-MX')
-                                : '-'}
-                            </td>
-                            <td className="py-2 text-xs text-center">
-                              {cfdi.conciliacion
-                                ? `${cfdi.conciliacion.banco} ****${cfdi.conciliacion.terminacionCuenta}`
-                                : '-'}
-                            </td>
-                            <td className="py-2 flex gap-1 justify-center">
-                              <Button
-                                variant="ghost"
-                                size="sm"
-                                onClick={() => setSelectedCfdi(cfdi)}
-                                title="Ver factura"
-                              >
-                                <Eye className="h-4 w-4" />
-                              </Button>
-                              {!isVisor && cfdi.conciliacion && (
+                          </tr>
+                        ) : (
+                          conciliadasOrdenadas.map((cfdi) => (
+                            <tr key={cfdi.id} className="border-b hover:bg-muted/50">
+                              <td className="py-2 font-mono text-xs text-center" title={cfdi.uuid}>
+                                {cfdi.uuid?.substring(0, 8)}
+                              </td>
+                              <td className="py-2 text-xs text-center">
+                                {toCfdiDate(cfdi.fechaPagoP || cfdi.fechaEmision).toLocaleDateString('es-MX')}
+                              </td>
+                              <td className="py-2 font-mono text-xs text-center">{activeTab === 'EMITIDO' ? cfdi.rfcReceptor : cfdi.rfcEmisor}</td>
+                              <td className="py-2 text-xs truncate max-w-[120px] text-center">
+                                {activeTab === 'EMITIDO' ? cfdi.nombreReceptor : cfdi.nombreEmisor}
+                              </td>
+                              <td className="py-2 text-xs font-medium text-center">
+                                {formatCurrencyConciliacion(getMonto(cfdi))}
+                              </td>
+                              <td className="py-2 text-xs text-center">
+                                {cfdi.conciliacion?.fechaDePago
+                                  ? new Date(
+                                      (cfdi.conciliacion.fechaDePago.split('T')[0]) + 'T12:00:00',
+                                    ).toLocaleDateString('es-MX')
+                                  : '-'}
+                              </td>
+                              <td className="py-2 text-xs text-center">
+                                {cfdi.conciliacion
+                                  ? `${cfdi.conciliacion.banco} ****${cfdi.conciliacion.terminacionCuenta}`
+                                  : '-'}
+                              </td>
+                              <td className="py-2 flex gap-1 justify-center">
                                 <Button
                                   variant="ghost"
                                   size="sm"
-                                  onClick={() => handleDesconciliar(cfdi.conciliacion!.id)}
-                                  title="Desconciliar"
-                                  className="text-destructive hover:text-destructive"
+                                  onClick={() => setSelectedCfdi(cfdi)}
+                                  title="Ver factura"
                                 >
-                                  <X className="h-4 w-4" />
+                                  <Eye className="h-4 w-4" />
                                 </Button>
-                              )}
-                            </td>
-                          </tr>
-                        ))}
+                                {!isVisor && cfdi.conciliacion && (
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    onClick={() => handleDesconciliar(cfdi.conciliacion!.id)}
+                                    title="Desconciliar"
+                                    className="text-destructive hover:text-destructive"
+                                  >
+                                    <X className="h-4 w-4" />
+                                  </Button>
+                                )}
+                              </td>
+                            </tr>
+                          ))
+                        )}
                       </tbody>
                     </table>
                   </div>
-                )}
               </CardContent>
             </Card>
           </>