118 lines
3.5 KiB
TypeScript
118 lines
3.5 KiB
TypeScript
import { FileCheck, Download, RefreshCw, Loader2 } from 'lucide-react'
|
|
import { useState } from 'react'
|
|
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
AlertDialogTrigger,
|
|
} from '@/components/ui/alert-dialog'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Card } from '@/components/ui/card'
|
|
|
|
interface DocumentoSEPTabProps {
|
|
pdfUrl: string | null
|
|
isLoading: boolean
|
|
onDownload: () => void
|
|
onRegenerate: () => void
|
|
isRegenerating: boolean
|
|
}
|
|
|
|
export function DocumentoSEPTab({
|
|
pdfUrl,
|
|
isLoading,
|
|
onDownload,
|
|
onRegenerate,
|
|
isRegenerating,
|
|
}: DocumentoSEPTabProps) {
|
|
const [showConfirmDialog, setShowConfirmDialog] = useState(false)
|
|
|
|
const handleRegenerate = () => {
|
|
setShowConfirmDialog(false)
|
|
onRegenerate()
|
|
}
|
|
|
|
return (
|
|
<div className="animate-fade-in space-y-6">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h2 className="font-display text-foreground flex items-center gap-2 text-2xl font-semibold">
|
|
<FileCheck className="text-accent h-6 w-6" />
|
|
Documento SEP
|
|
</h2>
|
|
<p className="text-muted-foreground mt-1 text-sm">
|
|
Previsualización del documento oficial generado
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
{pdfUrl && !isLoading && (
|
|
<Button variant="outline" onClick={onDownload}>
|
|
<Download className="mr-2 h-4 w-4" />
|
|
Descargar
|
|
</Button>
|
|
)}
|
|
|
|
<AlertDialog
|
|
open={showConfirmDialog}
|
|
onOpenChange={setShowConfirmDialog}
|
|
>
|
|
<AlertDialogTrigger asChild>
|
|
<Button disabled={isRegenerating}>
|
|
{isRegenerating ? (
|
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
|
) : (
|
|
<RefreshCw className="mr-2 h-4 w-4" />
|
|
)}
|
|
{isRegenerating ? 'Generando...' : 'Regenerar documento'}
|
|
</Button>
|
|
</AlertDialogTrigger>
|
|
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>¿Regenerar documento SEP?</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
Se generará una nueva versión del documento con la información
|
|
actual.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel>Cancelar</AlertDialogCancel>
|
|
<AlertDialogAction onClick={handleRegenerate}>
|
|
Regenerar
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</div>
|
|
</div>
|
|
|
|
{/* PDF Preview */}
|
|
<Card className="h-[800px] overflow-hidden">
|
|
{isLoading ? (
|
|
<div className="flex h-full items-center justify-center">
|
|
<Loader2 className="h-10 w-10 animate-spin" />
|
|
</div>
|
|
) : pdfUrl ? (
|
|
<iframe
|
|
src={`${pdfUrl}#toolbar=0`}
|
|
className="h-full w-full border-none"
|
|
title="Documento SEP"
|
|
/>
|
|
) : (
|
|
<div className="text-muted-foreground flex h-full items-center justify-center">
|
|
No se pudo cargar el documento.
|
|
</div>
|
|
)}
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|