implement modal for xml visualization

src/app/factura/page.tsx

@@ -1,17 +1,20 @@
 "use client"
 
+import { useState } from "react"
 import { FacturaHeader } from "@/components/factura/FacturaHeader"
 import { InfoTributariaForm } from "@/components/factura/InfoTributariaForm"
 import { InfoFacturaForm } from "@/components/factura/InfoFacturaForm"
 import { DetallesList } from "@/components/factura/DetallesList"
 import { ResumenTotales } from "@/components/factura/ResumenTotales"
 import { FacturaActions } from "@/components/factura/FacturaActions"
-import { XmlViewer } from "@/components/factura/XmlViewer"
+import { XmlGenerationDialog } from "@/components/factura/XmlGenerationDialog"
 import { useFacturaState } from "@/hooks/factura/useFacturaState"
 import { useFacturaCalculations } from "@/hooks/factura/useFacturaCalculations"
 import { useXmlGeneration } from "@/hooks/factura/useXmlGeneration"
 
 export default function FacturaPage() {
+  const [dialogOpen, setDialogOpen] = useState(false)
+
   const {
     infoTributaria,
     infoFactura,
@@ -27,7 +30,7 @@ export default function FacturaPage() {
   } = useFacturaState()
 
   const { calcularTotalesImpuestos } = useFacturaCalculations(detalles, updateInfoFactura)
-  
+
   const { generarXml, descargarXml } = useXmlGeneration()
 
   const handleGenerarXml = () => {
@@ -39,6 +42,7 @@ export default function FacturaPage() {
       totalesImpuestos,
       setXmlGenerado
     )
+    setDialogOpen(true)
   }
 
   const handleDescargarXml = () => {
@@ -77,14 +81,15 @@ export default function FacturaPage() {
       />
 
       {/* Acciones */}
-      <FacturaActions
-        onGenerarXml={handleGenerarXml}
-        onDescargarXml={handleDescargarXml}
+      <FacturaActions onGenerarXml={handleGenerarXml} />
+
+      {/* Modal de XML Generado */}
+      <XmlGenerationDialog
+        open={dialogOpen}
+        onOpenChange={setDialogOpen}
         xmlGenerado={xmlGenerado}
+        onDescargarXml={handleDescargarXml}
       />
-
-      {/* XML Generado */}
-      <XmlViewer xmlGenerado={xmlGenerado} />
     </div>
   )
 }

src/components/factura/FacturaActions.tsx

@@ -1,24 +1,15 @@
 import { Button } from "@/components/ui/button"
-import { Download } from "lucide-react"
 
 interface FacturaActionsProps {
   onGenerarXml: () => void
-  onDescargarXml: () => void
-  xmlGenerado: string
 }
 
-export function FacturaActions({ onGenerarXml, onDescargarXml, xmlGenerado }: FacturaActionsProps) {
+export function FacturaActions({ onGenerarXml }: FacturaActionsProps) {
   return (
     <div className="flex gap-4">
       <Button onClick={onGenerarXml} className="flex-1">
         Generar XML
       </Button>
-      {xmlGenerado && (
-        <Button variant="outline" onClick={onDescargarXml} className="flex items-center gap-2">
-          <Download className="h-4 w-4" />
-          Descargar XML
-        </Button>
-      )}
     </div>
   )
 }

src/components/factura/XmlGenerationDialog.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Textarea } from "@/components/ui/textarea"
+import { Download } from "lucide-react"
+
+interface XmlGenerationDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  xmlGenerado: string
+  onDescargarXml: () => void
+}
+
+export function XmlGenerationDialog({ open, onOpenChange, xmlGenerado, onDescargarXml }: XmlGenerationDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-4xl max-h-[90vh]">
+        <DialogHeader>
+          <DialogTitle>XML Generado</DialogTitle>
+          <DialogDescription>
+            XML generado para el SRI. Puedes revisarlo y descargarlo cuando estés listo.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-hidden">
+          <Textarea
+            value={xmlGenerado}
+            readOnly
+            rows={20}
+            className="font-mono text-sm resize-none h-[60vh]"
+          />
+        </div>
+
+        <DialogFooter>
+          <Button onClick={onDescargarXml} className="flex items-center gap-2">
+            <Download className="h-4 w-4" />
+            Descargar XML
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}