import { Head, useForm } from '@inertiajs/react'; import { AlertTriangle, History, ImageIcon, ImageUp } from 'lucide-react'; import type { FormEvent } from 'react'; import { useEffect, useMemo, useRef, useState } from 'react'; import { ConfirmActionModal } from '@/components/confirm-action-modal'; import Heading from '@/components/heading'; import { InertiaPaginatorFooter } from '@/components/inertia-paginator-footer'; import type { InertiaPaginatorSlice } from '@/components/inertia-paginator-footer'; import InputError from '@/components/input-error'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from '@/components/ui/card'; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from '@/components/ui/dialog'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Textarea } from '@/components/ui/textarea'; type SnapshotRow = { id: number; image_url: string; original_name: string; size_bytes: number; closing_date: string | null; note: string | null; is_active: boolean; uploaded_by: string | null; uploaded_at: string | null; replaced_by: string | null; replaced_at: string | null; }; type Props = { active: SnapshotRow | null; history: InertiaPaginatorSlice & { data: SnapshotRow[] }; max_upload_mb: number; }; type FormData = { image: File | null; closing_date: string; note: string; }; function todayIso(): string { const now = new Date(); const offset = now.getTimezoneOffset() * 60000; return new Date(now.getTime() - offset).toISOString().slice(0, 10); } function formatDateTime(iso: string | null): string { return iso ? new Date(iso).toLocaleString('es', { dateStyle: 'medium', timeStyle: 'short', }) : '—'; } function formatClosingDate(date: string | null): string { // `YYYY-MM-DD` sin hora: se fija al mediodía para que la zona horaria no cambie el día. return date ? new Date(`${date}T12:00:00`).toLocaleDateString('es', { dateStyle: 'long', }) : '—'; } export default function ProviderClosing({ active, history, max_upload_mb, }: Props) { const form = useForm({ image: null, closing_date: todayIso(), note: '', }); const [confirmOpen, setConfirmOpen] = useState(false); const [viewing, setViewing] = useState(null); const fileInput = useRef(null); const preview = useMemo( () => (form.data.image ? URL.createObjectURL(form.data.image) : null), [form.data.image], ); useEffect(() => { return () => { if (preview) { URL.revokeObjectURL(preview); } }; }, [preview]); function submit(event: FormEvent) { event.preventDefault(); setConfirmOpen(true); } function executeUpload() { form.post('/admin/cierre-proveedor', { forceFormData: true, preserveScroll: true, onSuccess: () => { form.reset(); if (fileInput.current) { fileInput.current.value = ''; } }, onFinish: () => setConfirmOpen(false), }); } return ( <>
Imagen activa Es la que ven hoy los inversionistas.
{active ? (
Cierre del
{formatClosingDate( active.closing_date, )}
Subida por
{active.uploaded_by ?? '—'} ·{' '} {formatDateTime(active.uploaded_at)}
{active.note ? ( <>
Nota
{active.note}
) : null}
) : (

Aún no se ha publicado ninguna imagen. Los inversionistas ven un aviso de que todavía no hay cierre disponible.

)}
Publicar nueva imagen Reemplaza la imagen activa. JPG, PNG o WEBP de hasta {max_upload_mb} MB.

Recorta la captura antes de subirla: las pantallas de MetaTrader suelen mostrar el número de cuenta, el servidor y el balance del proveedor, y todos los inversionistas los verían.

form.setData( 'image', event.target.files?.item(0) ?? null, ) } /> {preview ? ( Vista previa ) : null}
form.setData( 'closing_date', event.target.value, ) } />