feat: fixing certificate and block
This commit is contained in:
@@ -0,0 +1,154 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { cmsApi } from "@/lib/api";
|
||||
import { RefreshCw, Database, Users, CheckCircle2, AlertCircle, Loader2 } from "lucide-react";
|
||||
|
||||
interface IntegrationsSectionProps {
|
||||
courseId: string;
|
||||
}
|
||||
|
||||
export default function IntegrationsSection({ courseId }: IntegrationsSectionProps) {
|
||||
const [syncingAll, setSyncingAll] = useState(false);
|
||||
const [syncingStudents, setSyncingStudents] = useState(false);
|
||||
const [syncingAssignments, setSyncingAssignments] = useState(false);
|
||||
const [status, setStatus] = useState<{ type: 'success' | 'error', message: string } | null>(null);
|
||||
|
||||
const handleSyncAll = async () => {
|
||||
setSyncingAll(true);
|
||||
setStatus(null);
|
||||
try {
|
||||
const result = await cmsApi.syncSamAll();
|
||||
setStatus({
|
||||
type: 'success',
|
||||
message: `Sincronización completa finalizada. Estudiantes: ${result.students_synced}, Asignaciones: ${result.assignments_synced}`
|
||||
});
|
||||
} catch (err: any) {
|
||||
setStatus({ type: 'error', message: err.message || "Error al sincronizar con SAM" });
|
||||
} finally {
|
||||
setSyncingAll(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSyncStudents = async () => {
|
||||
setSyncingStudents(true);
|
||||
setStatus(null);
|
||||
try {
|
||||
const result = await cmsApi.syncSamStudents();
|
||||
setStatus({
|
||||
type: 'success',
|
||||
message: `Estudiantes sincronizados: ${result.students_synced}`
|
||||
});
|
||||
} catch (err: any) {
|
||||
setStatus({ type: 'error', message: err.message || "Error al sincronizar estudiantes" });
|
||||
} finally {
|
||||
setSyncingStudents(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSyncAssignments = async () => {
|
||||
setSyncingAssignments(true);
|
||||
setStatus(null);
|
||||
try {
|
||||
const result = await cmsApi.syncSamAssignments();
|
||||
setStatus({
|
||||
type: 'success',
|
||||
message: `Asignaciones sincronizadas: ${result.assignments_synced}`
|
||||
});
|
||||
} catch (err: any) {
|
||||
setStatus({ type: 'error', message: err.message || "Error al sincronizar asignaciones" });
|
||||
} finally {
|
||||
setSyncingAssignments(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl p-8 space-y-8 shadow-sm">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-12 h-12 rounded-2xl bg-indigo-600/10 flex items-center justify-center text-indigo-600 dark:text-indigo-400">
|
||||
<RefreshCw size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="section-title">Integraciones y Sincronización</h2>
|
||||
<p className="text-sm text-slate-500 dark:text-gray-400">Gestiona la conexión con sistemas externos (SAM y MySQL Legacy)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* SAM Integration Card */}
|
||||
<div className="bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl p-6 shadow-sm space-y-6">
|
||||
<div className="flex items-center gap-2 text-indigo-600 dark:text-indigo-400">
|
||||
<Database size={20} />
|
||||
<h3 className="font-bold uppercase tracking-wider text-sm">SAM (Sistema Académico)</h3>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-slate-500 dark:text-gray-400">
|
||||
Sincroniza la base de datos de estudiantes y las inscripciones a cursos desde el sistema SAM v3.
|
||||
</p>
|
||||
|
||||
<div className="space-y-3">
|
||||
<button
|
||||
onClick={handleSyncAll}
|
||||
disabled={syncingAll || syncingStudents || syncingAssignments}
|
||||
className="w-full flex items-center justify-between p-4 bg-slate-50 dark:bg-black/20 hover:bg-indigo-50 dark:hover:bg-indigo-500/10 border border-slate-200 dark:border-white/10 rounded-xl transition-all group"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<RefreshCw className={`w-5 h-5 text-indigo-500 ${syncingAll ? 'animate-spin' : 'group-hover:rotate-180 transition-transform duration-500'}`} />
|
||||
<div className="text-left">
|
||||
<div className="text-sm font-bold text-slate-900 dark:text-white">Sincronización Total</div>
|
||||
<div className="text-[10px] text-slate-500 dark:text-gray-500">Estudiantes + Inscripciones</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={handleSyncStudents}
|
||||
disabled={syncingAll || syncingStudents}
|
||||
className="flex-1 flex items-center gap-2 p-3 bg-white dark:bg-black/10 hover:bg-slate-50 dark:hover:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl text-xs font-bold text-slate-600 dark:text-gray-300 transition-all"
|
||||
>
|
||||
<Users size={14} />
|
||||
{syncingStudents ? "Sincronizando..." : "Solo Estudiantes"}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSyncAssignments}
|
||||
disabled={syncingAll || syncingAssignments}
|
||||
className="flex-1 flex items-center gap-2 p-3 bg-white dark:bg-black/10 hover:bg-slate-50 dark:hover:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl text-xs font-bold text-slate-600 dark:text-gray-300 transition-all"
|
||||
>
|
||||
<RefreshCw size={14} className={syncingAssignments ? 'animate-spin' : ''} />
|
||||
{syncingAssignments ? "Sincronizando..." : "Solo Inscripciones"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* MySQL Legacy Sync Card */}
|
||||
<div className="bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-2xl p-6 shadow-sm space-y-6 opacity-75 grayscale hover:grayscale-0 hover:opacity-100 transition-all">
|
||||
<div className="flex items-center gap-2 text-slate-600 dark:text-gray-400">
|
||||
<AlertCircle size={20} />
|
||||
<h3 className="font-bold uppercase tracking-wider text-sm">MySQL Legacy Sync</h3>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-slate-500 dark:text-gray-400">
|
||||
Importación manual de contenidos y estructuras de cursos desde el sistema antiguo.
|
||||
<span className="block mt-1 text-amber-500 font-bold">⚠️ Use con precaución: puede duplicar contenidos.</span>
|
||||
</p>
|
||||
|
||||
<button
|
||||
disabled={true}
|
||||
className="w-full flex items-center justify-center p-4 bg-slate-100 dark:bg-black/40 border border-dashed border-slate-300 dark:border-white/10 rounded-xl text-slate-400 text-xs font-bold"
|
||||
>
|
||||
Próximamente para este curso específico
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{status && (
|
||||
<div className={`p-4 rounded-2xl flex items-center gap-3 animate-in fade-in slide-in-from-bottom-2 ${status.type === 'success' ? 'bg-green-500/10 text-green-600 dark:text-green-400 border border-green-500/20' : 'bg-red-500/10 text-red-600 dark:text-red-400 border border-red-500/20'}`}>
|
||||
{status.type === 'success' ? <CheckCircle2 size={20} /> : <AlertCircle size={20} />}
|
||||
<p className="text-sm font-bold">{status.message}</p>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user