feat: implement audit logging and add certificate template field to courses

.dockerignore

@@ -0,0 +1,13 @@
+target/
+.git/
+node_modules/
+.next/
+web/studio/node_modules/
+web/experience/node_modules/
+web/studio/.next/
+web/experience/.next/
+services/*/target/
+*.log
+.env
+.DS_Store
+.vscode/

services/cms-service/migrations/20231223000001_add_certificate_template.sql

@@ -0,0 +1,2 @@
+-- Add certificate_template to courses
+ALTER TABLE courses ADD COLUMN certificate_template TEXT;

services/cms-service/src/handlers.rs

@@ -167,17 +167,26 @@ pub async fn update_course(
     let title = payload.get("title").and_then(|v| v.as_str()).unwrap_or(&existing.title);
     let description = payload.get("description").and_then(|v| v.as_str()).unwrap_or(existing.description.as_deref().unwrap_or(""));
     let passing_percentage = payload.get("passing_percentage").and_then(|v| v.as_i64()).unwrap_or(existing.passing_percentage as i64) as i32;
+    
+    // Check if certificate_template is in payload (even if null to unset?)
+    // For simplicity: if provided as string, use it. If not provided, keep existing.
+    // To unset, user can send empty string maybe? 
+    let certificate_template = payload.get("certificate_template")
+        .and_then(|v| v.as_str())
+        .map(|s| s.to_string())
+        .or(existing.certificate_template);
 
     let course = sqlx::query_as::<_, Course>(
-        "UPDATE courses SET title = $1, description = $2, passing_percentage = $3, updated_at = NOW() WHERE id = $4 RETURNING *"
+        "UPDATE courses SET title = $1, description = $2, passing_percentage = $3, certificate_template = $4, updated_at = NOW() WHERE id = $5 RETURNING *"
     )
     .bind(title)
     .bind(description)
     .bind(passing_percentage)
+    .bind(certificate_template)
     .bind(id)
     .fetch_one(&pool)
     .await
-    .map_err(|_| (StatusCode::INTERNAL_SERVER_ERROR, "Failed to update course".into()))?;
+    .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, format!("Failed to update course: {}", e)))?;
 
     Ok(Json(course))
 }
@@ -673,3 +682,59 @@ pub async fn get_course_analytics(
 
     Ok(Json(analytics))
 }
+
+#[derive(Deserialize)]
+pub struct AuditQuery {
+    pub page: Option<i64>,
+    pub limit: Option<i64>,
+}
+
+pub async fn get_audit_logs(
+    State(pool): State<PgPool>,
+    headers: HeaderMap,
+    Query(query): Query<AuditQuery>,
+) -> Result<Json<Vec<common::models::AuditLogResponse>>, (StatusCode, String)> {
+    // 1. Auth check
+    let auth_header = headers.get("Authorization")
+        .and_then(|h| h.to_str().ok())
+        .ok_or((StatusCode::UNAUTHORIZED, "Missing Authorization header".into()))?;
+
+    if !auth_header.starts_with("Bearer ") {
+        return Err((StatusCode::UNAUTHORIZED, "Invalid Authorization header".into()));
+    }
+
+    let token = &auth_header[7..];
+    let token_data = decode::<Claims>(
+        token,
+        &DecodingKey::from_secret("secret".as_ref()),
+        &Validation::default(),
+    ).map_err(|e| {
+        tracing::error!("JWT decode failed: {}", e);
+        (StatusCode::UNAUTHORIZED, "Invalid token".into())
+    })?;
+
+    if token_data.claims.role != "admin" {
+        return Err((StatusCode::FORBIDDEN, "Only admins can view audit logs".into()));
+    }
+
+    // 2. Query
+    let limit = query.limit.unwrap_or(50);
+    let offset = (query.page.unwrap_or(1) - 1) * limit;
+
+    let logs = sqlx::query_as::<_, common::models::AuditLogResponse>(
+        r#"
+        SELECT a.id, a.user_id, u.full_name as user_full_name, a.action, a.entity_type, a.entity_id, a.changes, a.created_at
+        FROM audit_logs a
+        LEFT JOIN users u ON a.user_id = u.id
+        ORDER BY a.created_at DESC
+        LIMIT $1 OFFSET $2
+        "#
+    )
+    .bind(limit)
+    .bind(offset)
+    .fetch_all(&pool)
+    .await
+    .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+    Ok(Json(logs))
+}

services/cms-service/src/main.rs

@@ -47,6 +47,7 @@ async fn main() {
         .route("/grading", post(handlers::create_grading_category))
         .route("/grading/{id}", delete(handlers::delete_grading_category))
         .route("/courses/{id}/grading", get(handlers::get_grading_categories))
+        .route("/audit-logs", get(handlers::get_audit_logs))
         .route("/assets/upload", post(handlers::upload_asset))
         .nest_service("/assets", tower_http::services::ServeDir::new("uploads"))
         .layer(cors)

services/lms-service/migrations/20231223000001_add_certificate_template.sql

@@ -0,0 +1,2 @@
+-- Add certificate_template to courses
+ALTER TABLE courses ADD COLUMN certificate_template TEXT;

services/lms-service/src/handlers.rs

@@ -130,8 +130,8 @@ pub async fn ingest_course(
 
     // 1. Upsert Course
     sqlx::query(
-        "INSERT INTO courses (id, title, description, instructor_id, start_date, end_date, passing_percentage, updated_at)
+        "INSERT INTO courses (id, title, description, instructor_id, start_date, end_date, passing_percentage, certificate_template, updated_at)
-         VALUES ($1, $2, $3, $4, $5, $6, $7, $8)
+         VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9)
          ON CONFLICT (id) DO UPDATE SET
             title = EXCLUDED.title,
             description = EXCLUDED.description,
@@ -139,6 +139,7 @@ pub async fn ingest_course(
             start_date = EXCLUDED.start_date,
             end_date = EXCLUDED.end_date,
             passing_percentage = EXCLUDED.passing_percentage,
+            certificate_template = EXCLUDED.certificate_template,
             updated_at = EXCLUDED.updated_at"
     )
     .bind(payload.course.id)
@@ -148,6 +149,7 @@ pub async fn ingest_course(
     .bind(payload.course.start_date)
     .bind(payload.course.end_date)
     .bind(payload.course.passing_percentage)
+    .bind(&payload.course.certificate_template)
     .bind(payload.course.updated_at)
     .execute(&mut *tx)
     .await

shared/common/src/models.rs

@@ -11,6 +11,7 @@ pub struct Course {
     pub start_date: Option<DateTime<Utc>>,
     pub end_date: Option<DateTime<Utc>>,
     pub passing_percentage: i32,
+    pub certificate_template: Option<String>,
     pub created_at: DateTime<Utc>,
     pub updated_at: DateTime<Utc>,
 }
@@ -74,6 +75,18 @@ pub struct AuditLog {
     pub created_at: DateTime<Utc>,
 }
 
+#[derive(Debug, Serialize, Deserialize, sqlx::FromRow)]
+pub struct AuditLogResponse {
+    pub id: Uuid,
+    pub user_id: Uuid,
+    pub user_full_name: Option<String>,
+    pub action: String,
+    pub entity_type: String, 
+    pub entity_id: Uuid,
+    pub changes: serde_json::Value,
+    pub created_at: DateTime<Utc>,
+}
+
 #[derive(Debug, Serialize, Deserialize, sqlx::FromRow)]
 pub struct Enrollment {
     pub id: Uuid,
@@ -204,6 +217,7 @@ mod tests {
                 start_date: None,
                 end_date: None,
                 passing_percentage: 70,
+                certificate_template: None,
                 created_at: Utc::now(),
                 updated_at: Utc::now(),
             },

web/experience/src/app/courses/[id]/progress/page.tsx

@@ -214,18 +214,67 @@ export default function StudentProgressPage() {
                         </div>
                     </section>
 
-                    <section className="bg-indigo-600/10 border border-indigo-500/20 rounded-[2rem] p-8 flex items-center justify-between">
+                    {/* Certificate Section */}
-                        <div className="flex items-center gap-6">
+                    {totalWeightedGrade >= (course.passing_percentage || 70) ? (
-                            <div className="w-16 h-16 rounded-2xl bg-indigo-500/20 flex items-center justify-center text-indigo-400">
+                        <section className="bg-green-500/10 border border-green-500/20 rounded-[2rem] p-8 flex items-center justify-between">
-                                <TrendingUp className="w-8 h-8" />
+                            <div className="flex items-center gap-6">
+                                <div className="w-16 h-16 rounded-2xl bg-green-500/20 flex items-center justify-center text-green-400">
+                                    <Award className="w-8 h-8" />
+                                </div>
+                                <div>
+                                    <h3 className="text-lg font-bold text-green-400">Course Completed!</h3>
+                                    <p className="text-sm text-green-300/60 mt-0.5">
+                                        Congratulations! You have passed <b>{course.title}</b>.
+                                    </p>
+                                </div>
                             </div>
-                            <div>
+                            <button
-                                <h3 className="text-lg font-bold">Certification Track</h3>
+                                onClick={() => {
-                                <p className="text-sm text-indigo-300/60 mt-0.5">Maintain 60% or higher to earn your verified certificate.</p>
+                                    if (!course.certificate_template || !user) {
+                                        alert("Certificate template not available.");
+                                        return;
+                                    }
+                                    const filledTemplate = course.certificate_template
+                                        .replace(/{{student_name}}/g, user.full_name)
+                                        .replace(/{{course_title}}/g, course.title)
+                                        .replace(/{{date}}/g, new Date().toLocaleDateString())
+                                        .replace(/{{score}}/g, Math.round(totalWeightedGrade).toString());
+
+                                    const win = window.open('', '_blank');
+                                    if (win) {
+                                        win.document.write(filledTemplate);
+                                        win.document.close();
+                                        // Wait visuals to render then print
+                                        setTimeout(() => {
+                                            win.focus();
+                                            win.print();
+                                        }, 500);
+                                    }
+                                }}
+                                className="px-6 py-3 bg-green-500 hover:bg-green-600 text-white font-bold rounded-xl transition-colors shadow-lg shadow-green-900/20 flex items-center gap-2"
+                            >
+                                <Award className="w-4 h-4" />
+                                Download Certificate
+                            </button>
+                        </section>
+                    ) : (
+                        <section className="bg-indigo-600/10 border border-indigo-500/20 rounded-[2rem] p-8 flex items-center justify-between">
+                            <div className="flex items-center gap-6">
+                                <div className="w-16 h-16 rounded-2xl bg-indigo-500/20 flex items-center justify-center text-indigo-400">
+                                    <TrendingUp className="w-8 h-8" />
+                                </div>
+                                <div>
+                                    <h3 className="text-lg font-bold">Certification Track</h3>
+                                    <p className="text-sm text-indigo-300/60 mt-0.5">
+                                        Maintain {course.passing_percentage || 70}% or higher to earn your verified certificate.
+                                    </p>
+                                </div>
                             </div>
-                        </div>
+                            <div className="text-indigo-400 font-bold text-sm">
-                        <ChevronRight className="w-6 h-6 text-indigo-500/50" />
+                                {Math.max(0, (course.passing_percentage || 70) - Math.round(totalWeightedGrade))}% to go
-                    </section>
+                            </div>
+                        </section>
+                    )}
                 </div>
             </div>
         </div>

web/experience/src/lib/api.ts

@@ -6,6 +6,7 @@ export interface Course {
     description?: string;
     instructor_id: string;
     passing_percentage: number;
+    certificate_template?: string;
     created_at: string;
 }
 

web/studio/src/app/admin/audit/page.tsx

@@ -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>
+    );
+}

web/studio/src/app/courses/[id]/analytics/page.tsx

@@ -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) {

web/studio/src/app/courses/[id]/settings/page.tsx

@@ -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>
     );

web/studio/src/app/page.tsx

@@ -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
+    // Authentication handled by AuthContext or manual check
-    const savedUser = localStorage.getItem("studio_user");
+    // We keep this manual check as a legacy safe-guard or rely on AuthContext if we trust it fully.
-    if (!savedUser) {
+    // 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">
+        <div className="flex items-center gap-4">
-          + New Course
+          {user?.role === 'admin' && (
-        </button>
+            <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 && (

web/studio/src/lib/api.ts

@@ -6,6 +6,7 @@ export interface Course {
     description: string;
     instructor_id: string;
     passing_percentage: number;
+    certificate_template?: string;
     created_at: string;
 }
 
@@ -108,6 +109,18 @@ export interface AuthPayload {
     role?: string;
 }
 
+export interface AuditLog {
+    id: string;
+    user_id: string;
+    user_full_name?: string;
+    action: string;
+    entity_type: string;
+    entity_id: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    changes: any;
+    created_at: string;
+}
+
 export const cmsApi = {
     async getCourses(): Promise<Course[]> {
         const response = await fetch(`${API_BASE_URL}/courses`);
@@ -277,5 +290,16 @@ export const cmsApi = {
         });
         if (!response.ok) throw new Error('Failed to update course');
         return response.json();
+    },
+
+    async getAuditLogs(page: number = 1, limit: number = 50): Promise<AuditLog[]> {
+        const token = typeof window !== 'undefined' ? localStorage.getItem('studio_token') : null;
+        const response = await fetch(`${API_BASE_URL}/audit-logs?page=${page}&limit=${limit}`, {
+            headers: {
+                'Authorization': `Bearer ${token}`
+            }
+        });
+        if (!response.ok) throw new Error('Failed to fetch audit logs');
+        return response.json();
     }
 };