Files
cargaMasiva_front/src/components/fuenteCard.tsx
T

86 lines
2.0 KiB
TypeScript

"use client";
import React, { useState } from "react";
import Button from "./button";
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
type FuenteCardProps = {
nombre: string;
fecha: string;
activa: boolean;
id_mov: number;
onValidated?: () => void;
};
const FuenteCard: React.FC<FuenteCardProps> = ({
nombre,
fecha,
activa,
id_mov,
onValidated,
}) => {
const [loading, setLoading] = useState(false); // ← nuevo estado
const handleActivar = async () => {
const token = localStorage.getItem("token");
if (!token) {
alert("Token no encontrado.");
return;
}
try {
setLoading(true); // ← activa estado de carga
const res = await fetch(
`${apiUrl}/excel/activar-servicios/${id_mov}`,
{
method: "POST",
headers: {
Authorization: `Bearer ${token}`,
},
}
);
const data = await res.json();
if (res.ok) {
alert("Usuarios validados correctamente");
onValidated?.();
} else {
alert(`Error: ${data.message || "No se pudo validar"}`);
}
} catch (error: any) {
alert(`Error en la solicitud: ${error.message}`);
} finally {
setLoading(false); // ← desactiva estado de carga
}
};
return (
<div className="border rounded shadow-sm p-4 bg-white w-44">
<div className="flex items-center justify-between mb-2">
<span className="font-semibold text-sm">{nombre}</span>
<span
className={`w-3 h-3 rounded-full ${activa ? "bg-green-500" : "bg-red-500"}`}
/>
</div>
<p className="text-xs text-gray-700 leading-tight">
Fecha de carga:
<br />
{fecha}
</p>
{activa && (
<Button
onClick={handleActivar}
className="mb-3 px-3 py-1 mt-3"
variant="success"
disabled={loading} // ← deshabilita mientras valida
>
{loading ? "Validando..." : "Validar"}
</Button>
)}
</div>
);
};
export default FuenteCard;