feat(web): integrate CFDI viewer modal into CFDI page

- Add Eye button to table rows to view invoice
- Add loading state while fetching CFDI details
- Integrate CfdiViewerModal component

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

apps/web/app/(dashboard)/cfdi/page.tsx

@@ -9,9 +9,11 @@ import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { useCfdis, useCreateCfdi, useDeleteCfdi } from '@/lib/hooks/use-cfdi';
 import { createManyCfdis } from '@/lib/api/cfdi';
-import type { CfdiFilters, TipoCfdi } from '@horux/shared';
+import type { CfdiFilters, TipoCfdi, Cfdi } from '@horux/shared';
 import type { CreateCfdiData } from '@/lib/api/cfdi';
-import { FileText, Search, ChevronLeft, ChevronRight, Plus, Upload, Trash2, X, FileUp, CheckCircle, AlertCircle, Loader2 } from 'lucide-react';
+import { FileText, Search, ChevronLeft, ChevronRight, Plus, Upload, Trash2, X, FileUp, CheckCircle, AlertCircle, Loader2, Eye } from 'lucide-react';
+import { CfdiViewerModal } from '@/components/cfdi/cfdi-viewer-modal';
+import { getCfdiById } from '@/lib/api/cfdi';
 import { useAuthStore } from '@/stores/auth-store';
 import { useTenantViewStore } from '@/stores/tenant-view-store';
 import { useQueryClient } from '@tanstack/react-query';
@@ -255,6 +257,23 @@ export default function CfdiPage() {
   const createCfdi = useCreateCfdi();
   const deleteCfdi = useDeleteCfdi();
 
+  // CFDI Viewer state
+  const [viewingCfdi, setViewingCfdi] = useState<Cfdi | null>(null);
+  const [loadingCfdi, setLoadingCfdi] = useState<string | null>(null);
+
+  const handleViewCfdi = async (id: string) => {
+    setLoadingCfdi(id);
+    try {
+      const cfdi = await getCfdiById(id);
+      setViewingCfdi(cfdi);
+    } catch (error) {
+      console.error('Error loading CFDI:', error);
+      alert('Error al cargar el CFDI');
+    } finally {
+      setLoadingCfdi(null);
+    }
+  };
+
   const canEdit = user?.role === 'admin' || user?.role === 'contador';
 
   const handleSearch = () => {
@@ -1067,6 +1086,7 @@ export default function CfdiPage() {
                       <th className="pb-3 font-medium">Receptor</th>
                       <th className="pb-3 font-medium text-right">Total</th>
                       <th className="pb-3 font-medium">Estado</th>
+                      <th className="pb-3 font-medium"></th>
                       {canEdit && <th className="pb-3 font-medium"></th>}
                     </tr>
                   </thead>
@@ -1122,6 +1142,21 @@ export default function CfdiPage() {
                             {cfdi.estado === 'vigente' ? 'Vigente' : 'Cancelado'}
                           </span>
                         </td>
+                        <td className="py-3">
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => handleViewCfdi(cfdi.id)}
+                            disabled={loadingCfdi === cfdi.id}
+                            title="Ver factura"
+                          >
+                            {loadingCfdi === cfdi.id ? (
+                              <Loader2 className="h-4 w-4 animate-spin" />
+                            ) : (
+                              <Eye className="h-4 w-4" />
+                            )}
+                          </Button>
+                        </td>
                         {canEdit && (
                           <td className="py-3">
                             <Button
@@ -1174,6 +1209,12 @@ export default function CfdiPage() {
           </CardContent>
         </Card>
       </main>
+
+      <CfdiViewerModal
+        cfdi={viewingCfdi}
+        open={viewingCfdi !== null}
+        onClose={() => setViewingCfdi(null)}
+      />
     </>
   );
 }