feat: implement audit logging and add certificate template field to courses
This commit is contained in:
@@ -0,0 +1,137 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { cmsApi, AuditLog } from '@/lib/api';
|
||||
import { useAuth } from '@/context/AuthContext';
|
||||
import { ArrowLeft, Clock, ShieldAlert, X } from 'lucide-react';
|
||||
|
||||
export default function AuditLogsPage() {
|
||||
const router = useRouter();
|
||||
const { user, loading: authLoading } = useAuth();
|
||||
const [logs, setLogs] = useState<AuditLog[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [selectedLog, setSelectedLog] = useState<AuditLog | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!authLoading) {
|
||||
if (!user || user.role !== 'admin') {
|
||||
router.push('/');
|
||||
return;
|
||||
}
|
||||
loadLogs();
|
||||
}
|
||||
}, [user, authLoading, router]);
|
||||
|
||||
const loadLogs = async () => {
|
||||
try {
|
||||
const data = await cmsApi.getAuditLogs();
|
||||
setLogs(data);
|
||||
} catch (err) {
|
||||
console.error("Failed to load audit logs", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (authLoading || loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-950 flex items-center justify-center">
|
||||
<div className="w-12 h-12 border-4 border-blue-500/20 border-t-blue-500 rounded-full animate-spin"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-950 text-white font-sans">
|
||||
{/* Header */}
|
||||
<header className="sticky top-0 z-50 bg-gray-950/80 backdrop-blur-xl border-b border-white/5 py-4 px-8">
|
||||
<div className="max-w-7xl mx-auto flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<button onClick={() => router.push('/')} className="p-2 hover:bg-white/5 rounded-full transition-colors">
|
||||
<ArrowLeft className="w-5 h-5 text-gray-400" />
|
||||
</button>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-purple-500/10 flex items-center justify-center text-purple-400">
|
||||
<ShieldAlert size={20} />
|
||||
</div>
|
||||
<h1 className="text-xl font-bold">System Audit Logs</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-7xl mx-auto px-8 py-12">
|
||||
<div className="bg-white/5 border border-white/10 rounded-3xl overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left text-sm text-gray-400">
|
||||
<thead className="bg-white/5 uppercase font-bold text-xs tracking-wider text-gray-500">
|
||||
<tr>
|
||||
<th className="px-6 py-4">User</th>
|
||||
<th className="px-6 py-4">Action</th>
|
||||
<th className="px-6 py-4">Entity</th>
|
||||
<th className="px-6 py-4">Date</th>
|
||||
<th className="px-6 py-4 text-right">Details</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-white/5">
|
||||
{logs.map((log) => (
|
||||
<tr key={log.id} className="hover:bg-white/[0.02] transition-colors">
|
||||
<td className="px-6 py-4 font-medium text-white">
|
||||
{log.user_full_name || 'System / Unknown'}
|
||||
<div className="text-xs text-gray-600 font-mono mt-0.5">{log.user_id.slice(0, 8)}...</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium capitalize
|
||||
${log.action === 'CREATE' ? 'bg-green-500/10 text-green-400' :
|
||||
log.action === 'UPDATE' ? 'bg-blue-500/10 text-blue-400' :
|
||||
log.action === 'DELETE' ? 'bg-red-500/10 text-red-400' :
|
||||
'bg-gray-500/10 text-gray-400'}`}>
|
||||
{log.action}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="text-gray-300">{log.entity_type}</div>
|
||||
<div className="text-xs text-gray-600 font-mono mt-0.5">{log.entity_id}</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 flex items-center gap-2">
|
||||
<Clock size={14} />
|
||||
{new Date(log.created_at).toLocaleString()}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<button
|
||||
onClick={() => setSelectedLog(log)}
|
||||
className="text-blue-400 hover:text-blue-300 font-bold text-xs uppercase tracking-wider"
|
||||
>
|
||||
View Changes
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Changes Detail Modal */}
|
||||
{selectedLog && (
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm">
|
||||
<div className="bg-gray-900 border border-white/10 w-full max-w-2xl rounded-2xl shadow-2xl overflow-hidden flex flex-col max-h-[90vh]">
|
||||
<div className="flex items-center justify-between p-6 border-b border-white/5 bg-gray-900">
|
||||
<h3 className="text-lg font-bold text-white">Change Details</h3>
|
||||
<button onClick={() => setSelectedLog(null)} className="text-gray-500 hover:text-white transition-colors">
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-6 overflow-y-auto font-mono text-xs text-gray-300 bg-black/30">
|
||||
<pre className="whitespace-pre-wrap">
|
||||
{JSON.stringify(selectedLog.changes, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -27,27 +27,20 @@ export default function AnalyticsPage() {
|
||||
const fetchData = async () => {
|
||||
// Wait for auth to load
|
||||
if (!user) {
|
||||
console.log("AnalyticsPage: No user found yet.");
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("AnalyticsPage: User found:", user);
|
||||
console.log("AnalyticsPage: User Role:", user.role);
|
||||
|
||||
// Check authorization
|
||||
if (user.role !== 'admin' && user.role !== 'instructor') {
|
||||
console.warn("AnalyticsPage: Unauthorized role. Redirecting to home.", user.role);
|
||||
router.push('/');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
console.log("AnalyticsPage: Fetching data for course:", id);
|
||||
const [courseData, analyticsData] = await Promise.all([
|
||||
cmsApi.getCourseWithFullOutline(id),
|
||||
cmsApi.getCourseAnalytics(id)
|
||||
]);
|
||||
console.log("AnalyticsPage: Data fetched successfully", { courseData, analyticsData });
|
||||
setCourse(courseData);
|
||||
setAnalytics(analyticsData);
|
||||
} catch (err: unknown) {
|
||||
|
||||
@@ -3,13 +3,29 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { cmsApi, Course } from "@/lib/api";
|
||||
import { ArrowLeft, Save, Settings as SettingsIcon } from "lucide-react";
|
||||
import { ArrowLeft, Save, Settings as SettingsIcon, BookOpen } from "lucide-react";
|
||||
|
||||
const DEFAULT_CERTIFICATE_TEMPLATE = `
|
||||
<div style="width: 800px; height: 600px; padding: 40px; text-align: center; border: 10px solid #787878; font-family: 'Times New Roman', serif; background-color: #fff; color: #333;">
|
||||
<div style="width: 100%; height: 100%; padding: 20px; text-align: center; border: 5px solid #787878; display: flex; flex-direction: column; justify-content: center;">
|
||||
<span style="font-size: 50px; font-weight: bold; margin-bottom: 30px; display: block;">Certificate of Completion</span>
|
||||
<span style="font-size: 25px; display: block; margin-bottom: 20px;"><i>This is to certify that</i></span>
|
||||
<span style="font-size: 30px; font-weight: bold; display: block; margin-bottom: 20px; text-decoration: underline;">{{student_name}}</span>
|
||||
<span style="font-size: 25px; display: block; margin-bottom: 20px;"><i>has successfully completed the course</i></span>
|
||||
<span style="font-size: 30px; font-weight: bold; display: block; margin-bottom: 20px;">{{course_title}}</span>
|
||||
<span style="font-size: 20px; display: block; margin-bottom: 40px;">with a score of <b>{{score}}%</b></span>
|
||||
<span style="font-size: 25px; display: block; margin-bottom: 10px;"><i>Dated</i></span>
|
||||
<span style="font-size: 20px; display: block;">{{date}}</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
export default function CourseSettingsPage() {
|
||||
const { id } = useParams() as { id: string };
|
||||
const router = useRouter();
|
||||
const [course, setCourse] = useState<Course | null>(null);
|
||||
const [passingPercentage, setPassingPercentage] = useState(70);
|
||||
const [certificateTemplate, setCertificateTemplate] = useState("");
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
@@ -19,6 +35,7 @@ export default function CourseSettingsPage() {
|
||||
const data = await cmsApi.getCourse(id);
|
||||
setCourse(data);
|
||||
setPassingPercentage(data.passing_percentage || 70);
|
||||
setCertificateTemplate(data.certificate_template || DEFAULT_CERTIFICATE_TEMPLATE);
|
||||
} catch (err) {
|
||||
console.error("Failed to load course", err);
|
||||
} finally {
|
||||
@@ -31,7 +48,10 @@ export default function CourseSettingsPage() {
|
||||
const handleSave = async () => {
|
||||
setSaving(true);
|
||||
try {
|
||||
const updated = await cmsApi.updateCourse(id, { passing_percentage: passingPercentage });
|
||||
const updated = await cmsApi.updateCourse(id, {
|
||||
passing_percentage: passingPercentage,
|
||||
certificate_template: certificateTemplate
|
||||
});
|
||||
setCourse(updated);
|
||||
alert("Course settings updated successfully!");
|
||||
} catch (err) {
|
||||
@@ -142,6 +162,58 @@ export default function CourseSettingsPage() {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Certificate Template Section */}
|
||||
<section className="bg-white/5 border border-white/10 rounded-3xl p-8">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-12 h-12 rounded-2xl bg-indigo-500/10 flex items-center justify-center text-indigo-400">
|
||||
<BookOpen size={24} />
|
||||
</div>
|
||||
<h2 className="text-2xl font-black">Certificate Template</h2>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<p className="text-gray-400">
|
||||
Design the HTML certificate that students will receive upon passing the course.
|
||||
Available variables: <code className="text-blue-400">{"{{student_name}}"}</code>, <code className="text-blue-400">{"{{course_title}}"}</code>, <code className="text-blue-400">{"{{date}}"}</code>, <code className="text-blue-400">{"{{score}}"}</code>.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-bold text-gray-300">HTML Template</label>
|
||||
<textarea
|
||||
value={certificateTemplate}
|
||||
onChange={(e) => setCertificateTemplate(e.target.value)}
|
||||
className="w-full h-[400px] bg-black/30 border border-white/10 rounded-xl p-4 font-mono text-sm text-gray-300 focus:outline-none focus:border-blue-500 transition-colors resize-none"
|
||||
placeholder="Enter HTML code here..."
|
||||
/>
|
||||
<button
|
||||
onClick={() => setCertificateTemplate(DEFAULT_CERTIFICATE_TEMPLATE)}
|
||||
className="text-xs text-blue-400 hover:text-blue-300 underline"
|
||||
>
|
||||
Reset to Default Template
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-bold text-gray-300">Live Preview</label>
|
||||
<div className="w-full h-[400px] bg-white rounded-xl overflow-hidden relative group">
|
||||
<iframe
|
||||
srcDoc={certificateTemplate
|
||||
.replace(/{{student_name}}/g, "Jane Doe")
|
||||
.replace(/{{course_title}}/g, course?.title || "Demo Course")
|
||||
.replace(/{{date}}/g, new Date().toLocaleDateString())
|
||||
.replace(/{{score}}/g, "95")
|
||||
}
|
||||
className="w-full h-full transform scale-75 origin-top-left w-[133%] h-[133%]"
|
||||
style={{ border: "none" }}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 pointer-events-none transition-colors" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
|
||||
+19
-12
@@ -4,9 +4,11 @@ import { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { cmsApi, Course } from "@/lib/api";
|
||||
import Link from "next/link";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
|
||||
export default function Home() {
|
||||
const router = useRouter();
|
||||
const { user } = useAuth();
|
||||
const [courses, setCourses] = useState<Course[]>([]);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
@@ -15,18 +17,14 @@ export default function Home() {
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
|
||||
// Check authentication
|
||||
const savedUser = localStorage.getItem("studio_user");
|
||||
if (!savedUser) {
|
||||
// Authentication handled by AuthContext or manual check
|
||||
// We keep this manual check as a legacy safe-guard or rely on AuthContext if we trust it fully.
|
||||
// Given previous edits, we know AuthContext works.
|
||||
if (typeof window !== 'undefined' && !localStorage.getItem("studio_user")) {
|
||||
router.push("/auth/login");
|
||||
return;
|
||||
}
|
||||
|
||||
// The `setUser` function was not defined, causing a linting error.
|
||||
// If user data needs to be stored in state, a `useState` for `user` should be added.
|
||||
// For now, removing the call to fix the linting error.
|
||||
// setUser(JSON.parse(savedUser));
|
||||
|
||||
// Fetch courses
|
||||
const loadCourses = async () => {
|
||||
try {
|
||||
@@ -46,7 +44,6 @@ export default function Home() {
|
||||
}, [router]);
|
||||
|
||||
|
||||
|
||||
const handleCreateCourse = async () => {
|
||||
const title = prompt("Enter course title:");
|
||||
if (!title) return;
|
||||
@@ -66,6 +63,7 @@ export default function Home() {
|
||||
description: "A demo course to get started",
|
||||
instructor_id: "demo",
|
||||
passing_percentage: 70,
|
||||
certificate_template: undefined,
|
||||
created_at: new Date().toISOString()
|
||||
},
|
||||
];
|
||||
@@ -79,9 +77,18 @@ export default function Home() {
|
||||
<h2 className="text-3xl font-bold">My Courses</h2>
|
||||
<p className="text-gray-400">Manage and create your learning content</p>
|
||||
</div>
|
||||
<button onClick={handleCreateCourse} className="btn-premium">
|
||||
+ New Course
|
||||
</button>
|
||||
<div className="flex items-center gap-4">
|
||||
{user?.role === 'admin' && (
|
||||
<Link href="/admin/audit">
|
||||
<button className="px-4 py-2 text-sm font-bold text-gray-400 hover:text-white border border-white/10 hover:border-white/30 rounded-lg transition-colors flex items-center gap-2">
|
||||
🛡️ Audit Logs
|
||||
</button>
|
||||
</Link>
|
||||
)}
|
||||
<button onClick={handleCreateCourse} className="btn-premium">
|
||||
+ New Course
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
|
||||
Reference in New Issue
Block a user