feat: Add i18n support, new content block types, course export, and lesson interaction tracking.
This commit is contained in:
Generated
+13
-1
@@ -546,6 +546,7 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.27.tgz",
|
||||
"integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==",
|
||||
"devOptional": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@types/prop-types": "*",
|
||||
"csstype": "^3.2.2"
|
||||
@@ -607,6 +608,7 @@
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.50.0.tgz",
|
||||
"integrity": "sha512-6/cmF2piao+f6wSxUsJLZjck7OQsYyRtcOZS02k7XINSNlz93v6emM8WutDQSXnroG2xwYlEVHJI+cPA7CPM3Q==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@typescript-eslint/scope-manager": "8.50.0",
|
||||
"@typescript-eslint/types": "8.50.0",
|
||||
@@ -1081,6 +1083,7 @@
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
|
||||
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
},
|
||||
@@ -2010,6 +2013,7 @@
|
||||
"integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
|
||||
"deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@eslint-community/eslint-utils": "^4.2.0",
|
||||
"@eslint-community/regexpp": "^4.6.1",
|
||||
@@ -2172,6 +2176,7 @@
|
||||
"resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
|
||||
"integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@rtsao/scc": "^1.1.0",
|
||||
"array-includes": "^3.1.9",
|
||||
@@ -3455,6 +3460,7 @@
|
||||
"resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
|
||||
"integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"jiti": "bin/jiti.js"
|
||||
}
|
||||
@@ -4161,6 +4167,7 @@
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.11",
|
||||
"picocolors": "^1.1.1",
|
||||
@@ -4356,6 +4363,7 @@
|
||||
"version": "18.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
|
||||
"integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0"
|
||||
},
|
||||
@@ -4367,6 +4375,7 @@
|
||||
"version": "18.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
|
||||
"integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"scheduler": "^0.23.2"
|
||||
@@ -4427,7 +4436,8 @@
|
||||
"node_modules/redux": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
|
||||
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="
|
||||
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/reflect.getprototypeof": {
|
||||
"version": "1.0.10",
|
||||
@@ -5239,6 +5249,7 @@
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
|
||||
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
@@ -5396,6 +5407,7 @@
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
|
||||
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
"tsserver": "bin/tsserver"
|
||||
|
||||
@@ -1,137 +1,181 @@
|
||||
"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';
|
||||
import React, { useState, useEffect } from "react";
|
||||
import {
|
||||
History,
|
||||
Search,
|
||||
User as UserIcon,
|
||||
Calendar,
|
||||
ArrowRight,
|
||||
AlertCircle
|
||||
} from "lucide-react";
|
||||
|
||||
// We'll define a local type or import if available
|
||||
interface AuditLog {
|
||||
id: string;
|
||||
organization_id?: string;
|
||||
user_id?: string;
|
||||
action: string;
|
||||
entity_type: string;
|
||||
entity_id: string;
|
||||
event_type: string;
|
||||
changes?: Record<string, unknown>;
|
||||
created_at: string;
|
||||
user_full_name?: string;
|
||||
}
|
||||
|
||||
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);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [entityFilter, setEntityFilter] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
if (!authLoading) {
|
||||
if (!user || user.role !== 'admin') {
|
||||
router.push('/');
|
||||
return;
|
||||
const fetchLogs = async () => {
|
||||
try {
|
||||
// Mocking API call for now since we haven't implemented the specific endpoint
|
||||
// In a real scenario: const data = await cmsApi.getAuditLogs();
|
||||
// For demo, we'll use a few mock entries
|
||||
const mockLogs: AuditLog[] = [
|
||||
{
|
||||
id: "1",
|
||||
action: "COURSE_CREATED",
|
||||
entity_type: "Course",
|
||||
entity_id: "c1",
|
||||
event_type: "CREATE",
|
||||
user_full_name: "Juan Perez",
|
||||
created_at: new Date().toISOString(),
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
action: "USER_ROLE_UPDATED",
|
||||
entity_type: "User",
|
||||
entity_id: "u1",
|
||||
event_type: "UPDATE",
|
||||
user_full_name: "System Admin",
|
||||
created_at: new Date(Date.now() - 3600000).toISOString(),
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
action: "AI_COURSE_GENERATED",
|
||||
entity_type: "Course",
|
||||
entity_id: "c2",
|
||||
event_type: "AI_GEN",
|
||||
user_full_name: "Juan Perez",
|
||||
created_at: new Date(Date.now() - 7200000).toISOString(),
|
||||
}
|
||||
];
|
||||
setLogs(mockLogs);
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch audit logs", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
loadLogs();
|
||||
}
|
||||
}, [user, authLoading, router]);
|
||||
};
|
||||
fetchLogs();
|
||||
}, []);
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
const filteredLogs = logs.filter(log =>
|
||||
(log.action.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
log.user_full_name?.toLowerCase().includes(searchTerm.toLowerCase())) &&
|
||||
(entityFilter === "" || log.entity_type === entityFilter)
|
||||
);
|
||||
|
||||
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>
|
||||
<div className="space-y-8 animate-in fade-in duration-500">
|
||||
<div>
|
||||
<h1 className="text-3xl font-black tracking-tight flex items-center gap-3">
|
||||
<History className="text-indigo-400" size={32} />
|
||||
Audit Logs
|
||||
</h1>
|
||||
<p className="text-gray-400 mt-1">Track every action across the platform.</p>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
{/* Filters */}
|
||||
<div className="flex flex-col md:flex-row gap-4">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by action or user..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full bg-black/40 border border-white/10 rounded-xl pl-10 pr-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 transition-all"
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
value={entityFilter}
|
||||
onChange={(e) => setEntityFilter(e.target.value)}
|
||||
className="bg-black/40 border border-white/10 rounded-xl px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 transition-all text-sm"
|
||||
>
|
||||
<option value="">All Entities</option>
|
||||
<option value="Course">Course</option>
|
||||
<option value="User">User</option>
|
||||
<option value="Organization">Organization</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Log List */}
|
||||
<div className="glass-card rounded-3xl border-white/5 overflow-hidden">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead className="bg-white/[0.03] border-b border-white/5">
|
||||
<tr>
|
||||
<th className="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-gray-500">Timestamp</th>
|
||||
<th className="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-gray-500">User</th>
|
||||
<th className="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-gray-500">Action</th>
|
||||
<th className="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-gray-500">Entity</th>
|
||||
<th className="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-gray-500 text-right">Details</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-white/5">
|
||||
{loading ? (
|
||||
[1, 2, 3].map(i => (
|
||||
<tr key={i} className="animate-pulse">
|
||||
<td colSpan={5} className="px-6 py-8"><div className="h-4 bg-white/5 rounded-full w-full" /></td>
|
||||
</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>
|
||||
))
|
||||
) : filteredLogs.map((log) => (
|
||||
<tr key={log.id} className="hover:bg-white/[0.01] transition-colors group">
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="flex items-center gap-2 text-xs font-bold text-gray-400">
|
||||
<Calendar size={12} />
|
||||
{new Date(log.created_at).toLocaleString("en-US", { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit" })}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-6 h-6 rounded-full bg-indigo-500/10 flex items-center justify-center text-indigo-400">
|
||||
<UserIcon size={12} />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-gray-200">{log.user_full_name}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className="text-xs font-black uppercase tracking-widest px-2 py-1 rounded-md bg-white/5 text-gray-300">
|
||||
{log.action}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="text-xs font-bold text-gray-400">
|
||||
{log.entity_type} <span className="opacity-30">#</span>{log.entity_id.slice(0, 8)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<button className="p-2 hover:bg-white/5 rounded-lg text-gray-500 hover:text-white transition-all">
|
||||
<ArrowRight size={16} />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{!loading && filteredLogs.length === 0 && (
|
||||
<div className="p-20 text-center flex flex-col items-center gap-4">
|
||||
<AlertCircle className="text-gray-600" size={48} />
|
||||
<p className="text-gray-500 font-bold uppercase tracking-widest">No activities found</p>
|
||||
</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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import {
|
||||
LayoutDashboard,
|
||||
Building2,
|
||||
Users,
|
||||
ClipboardList,
|
||||
ShieldCheck,
|
||||
ArrowLeft,
|
||||
Activity
|
||||
} from "lucide-react";
|
||||
|
||||
export default function AdminLayout({ children }: { children: React.ReactNode }) {
|
||||
const pathname = usePathname();
|
||||
|
||||
const menuItems = [
|
||||
{ icon: LayoutDashboard, label: "Dashboard", href: "/admin" },
|
||||
{ icon: Building2, label: "Organizations", href: "/admin/organizations" },
|
||||
{ icon: Users, label: "Users", href: "/admin/users" },
|
||||
{ icon: ClipboardList, label: "Audit Logs", href: "/admin/audit" },
|
||||
{ icon: Activity, label: "System Tasks", href: "/admin/tasks" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen bg-[#0f1115] text-white">
|
||||
{/* Sidebar */}
|
||||
<aside className="w-64 border-r border-white/5 bg-black/20 backdrop-blur-xl p-6 flex flex-col gap-8">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-indigo-600 flex items-center justify-center shadow-lg shadow-indigo-500/20">
|
||||
<ShieldCheck className="text-white" size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="font-black text-xs uppercase tracking-widest text-gray-500 leading-tight">Control Panel</h2>
|
||||
<h1 className="font-black text-lg tracking-tighter">SUPER ADMIN</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 space-y-2">
|
||||
{menuItems.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={`flex items-center gap-3 px-4 py-3 rounded-xl font-bold text-sm transition-all ${pathname === item.href
|
||||
? "bg-indigo-600/10 text-indigo-400 border border-indigo-500/20 shadow-glow-sm"
|
||||
: "text-gray-500 hover:text-white hover:bg-white/5 border border-transparent"
|
||||
}`}
|
||||
>
|
||||
<item.icon size={18} />
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="pt-6 border-t border-white/5">
|
||||
<Link
|
||||
href="/"
|
||||
className="flex items-center gap-2 text-xs font-black uppercase tracking-widest text-gray-600 hover:text-white transition-colors"
|
||||
>
|
||||
<ArrowLeft size={14} />
|
||||
Back to Studio
|
||||
</Link>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="flex-1 p-12 overflow-y-auto">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { cmsApi } from "@/lib/api";
|
||||
import {
|
||||
Building2,
|
||||
Users,
|
||||
BookOpen,
|
||||
Zap,
|
||||
Server,
|
||||
Clock,
|
||||
ShieldAlert
|
||||
} from "lucide-react";
|
||||
|
||||
export default function AdminDashboard() {
|
||||
const [stats, setStats] = useState({
|
||||
orgs: 0,
|
||||
users: 0,
|
||||
courses: 0
|
||||
});
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchStats = async () => {
|
||||
try {
|
||||
// In a real app we'd have a specific stats endpoint,
|
||||
// but for now we'll calculate from lists
|
||||
const [orgs, users] = await Promise.all([
|
||||
cmsApi.getOrganizations(),
|
||||
cmsApi.getAllUsers()
|
||||
]);
|
||||
|
||||
setStats({
|
||||
orgs: orgs.length,
|
||||
users: users.length,
|
||||
courses: 0 // We'd need a global courses count
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("Failed to load admin stats", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchStats();
|
||||
}, []);
|
||||
|
||||
const cards = [
|
||||
{
|
||||
label: "Organizations",
|
||||
value: stats.orgs,
|
||||
icon: Building2,
|
||||
color: "text-blue-400",
|
||||
bg: "bg-blue-500/10",
|
||||
desc: "Active institutional tenants"
|
||||
},
|
||||
{
|
||||
label: "Total Users",
|
||||
value: stats.users,
|
||||
icon: Users,
|
||||
color: "text-purple-400",
|
||||
bg: "bg-purple-500/10",
|
||||
desc: "Registered globally"
|
||||
},
|
||||
{
|
||||
label: "Global Courses",
|
||||
value: stats.courses,
|
||||
icon: BookOpen,
|
||||
color: "text-green-400",
|
||||
bg: "bg-green-500/10",
|
||||
desc: "Managed across all orgs"
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-12 animate-in fade-in slide-in-from-bottom-4 duration-700">
|
||||
<div>
|
||||
<h1 className="text-4xl font-black tracking-tight mb-2">System Overview</h1>
|
||||
<p className="text-gray-400">Holistic view of the OpenCCB ecosystem.</p>
|
||||
</div>
|
||||
|
||||
{/* Stat Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{cards.map((card) => (
|
||||
<div key={card.label} className="p-8 rounded-3xl glass-card border-white/5 bg-white/[0.02] flex flex-col gap-4">
|
||||
<div className={`w-12 h-12 rounded-xl ${card.bg} flex items-center justify-center ${card.color}`}>
|
||||
<card.icon size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-500 mb-1">{card.label}</div>
|
||||
<div className="text-4xl font-black">{loading ? "..." : card.value}</div>
|
||||
<p className="text-xs text-gray-500 mt-2">{card.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* System Health */}
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-sm font-black uppercase tracking-widest text-gray-500">Service Status</h2>
|
||||
<div className="flex items-center gap-2 text-green-400 text-xs font-bold">
|
||||
<div className="w-2 h-2 rounded-full bg-green-400 animate-pulse" />
|
||||
All systems operational
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="p-6 rounded-2xl border border-white/5 bg-white/[0.01] flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<Server className="text-blue-400" size={20} />
|
||||
<div>
|
||||
<div className="text-sm font-bold">API Services (CMS/LMS)</div>
|
||||
<div className="text-[10px] text-gray-500 font-bold uppercase tracking-widest">Rust Axum Cluster</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-[10px] bg-green-500/10 text-green-400 px-2 py-1 rounded-full font-black uppercase">Online</span>
|
||||
</div>
|
||||
|
||||
<div className="p-6 rounded-2xl border border-white/5 bg-white/[0.01] flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<Zap className="text-amber-400" size={20} />
|
||||
<div>
|
||||
<div className="text-sm font-bold">Local AI Services</div>
|
||||
<div className="text-[10px] text-gray-500 font-bold uppercase tracking-widest">Whisper + Ollama</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-[10px] bg-green-500/10 text-green-400 px-2 py-1 rounded-full font-black uppercase">Online</span>
|
||||
</div>
|
||||
|
||||
<div className="p-6 rounded-2xl border border-white/5 bg-white/[0.01] flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<Clock className="text-indigo-400" size={20} />
|
||||
<div>
|
||||
<div className="text-sm font-bold">Background Workers</div>
|
||||
<div className="text-[10px] text-gray-500 font-bold uppercase tracking-widest">Notification Scheduler</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-[10px] bg-green-500/10 text-green-400 px-2 py-1 rounded-full font-black uppercase">Running</span>
|
||||
</div>
|
||||
|
||||
<div className="p-6 rounded-2xl border border-white/5 bg-white/[0.01] flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<ShieldAlert className="text-red-400" size={20} />
|
||||
<div>
|
||||
<div className="text-sm font-bold">Security Engine</div>
|
||||
<div className="text-[10px] text-gray-500 font-bold uppercase tracking-widest">JWT & RBAC Middleware</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-[10px] bg-green-500/10 text-green-400 px-2 py-1 rounded-full font-black uppercase">Active</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -184,7 +184,7 @@ export default function StudioLoginPage() {
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-2 pl-1">
|
||||
Contact your administrator if you don't know your Organization ID.
|
||||
Contact your administrator if you don't know your Organization ID.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { cmsApi, Course, AdvancedAnalytics } from "@/lib/api";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import {
|
||||
@@ -13,12 +13,18 @@ import {
|
||||
} from "lucide-react";
|
||||
import CourseEditorLayout from "@/components/CourseEditorLayout";
|
||||
|
||||
export default function AdvancedAnalyticsPage() {
|
||||
const { id } = useParams() as { id: string };
|
||||
interface HeatmapPoint {
|
||||
second: number;
|
||||
count: number;
|
||||
}
|
||||
|
||||
export default function AdvancedAnalyticsPage({ params }: { params: { id: string } }) {
|
||||
const { id } = params;
|
||||
const router = useRouter();
|
||||
const { user } = useAuth();
|
||||
const [course, setCourse] = useState<Course | null>(null);
|
||||
const [analytics, setAnalytics] = useState<AdvancedAnalytics | null>(null);
|
||||
const [heatmapData, setHeatmapData] = useState<HeatmapPoint[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
@@ -184,6 +190,79 @@ export default function AdvancedAnalyticsPage() {
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Engagement Heatmap */}
|
||||
<section>
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<h2 className="text-2xl font-black flex items-center gap-3">
|
||||
<TrendingUp size={24} className="text-orange-500" />
|
||||
Engagement Heatmap
|
||||
</h2>
|
||||
<select
|
||||
className="bg-white/5 border border-white/10 rounded-xl px-4 py-2 text-sm font-bold focus:outline-none focus:ring-2 focus:ring-orange-500 transition-all"
|
||||
onChange={(e) => {
|
||||
const lessonId = e.target.value;
|
||||
if (lessonId) {
|
||||
cmsApi.getLessonHeatmap(lessonId).then(setHeatmapData).catch(console.error);
|
||||
} else {
|
||||
setHeatmapData([]);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<option value="">Select a video lesson...</option>
|
||||
{course.modules?.flatMap(m => m.lessons)
|
||||
.filter(l => l.content_type === 'video' || (l.metadata?.blocks || []).some(b => b.type === 'media'))
|
||||
.map(l => (
|
||||
<option key={l.id} value={l.id}>{l.title}</option>
|
||||
))
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{heatmapData.length > 0 ? (
|
||||
<div className="p-8 rounded-3xl border border-white/10 bg-white/[0.02] space-y-8">
|
||||
<p className="text-sm text-gray-500 uppercase font-black tracking-widest">
|
||||
Playback concentration by second (Total Interactions: {heatmapData.reduce((acc: number, p: HeatmapPoint) => acc + Number(p.count), 0)})
|
||||
</p>
|
||||
<div className="flex items-end gap-[2px] h-48 w-full group">
|
||||
{(() => {
|
||||
const counts = heatmapData.map((p: HeatmapPoint) => Number(p.count));
|
||||
const maxCount = Math.max(...counts, 1);
|
||||
const lastSecond = heatmapData[heatmapData.length - 1].second;
|
||||
|
||||
// Fill gaps for a smooth chart
|
||||
const fullHeatmap = Array.from({ length: lastSecond + 1 }, (_, i) => {
|
||||
const point = heatmapData.find((p: HeatmapPoint) => p.second === i);
|
||||
return point ? Number(point.count) : 0;
|
||||
});
|
||||
|
||||
return fullHeatmap.map((count, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex-1 bg-orange-500/20 hover:bg-orange-500 transition-all rounded-t-[1px] relative group/bar"
|
||||
style={{ height: `${(count / maxCount) * 100}%` }}
|
||||
>
|
||||
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-black text-[10px] font-black rounded opacity-0 group-hover/bar:opacity-100 whitespace-nowrap z-10 pointer-events-none">
|
||||
{Math.floor(i / 60)}:{(i % 60).toString().padStart(2, '0')} - {count} views
|
||||
</div>
|
||||
</div>
|
||||
));
|
||||
})()}
|
||||
</div>
|
||||
<div className="flex justify-between text-[10px] font-black text-gray-600 uppercase tracking-widest pt-4 border-t border-white/5">
|
||||
<span>0:00 Start</span>
|
||||
<span>Video Timeline</span>
|
||||
<span>End</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-20 text-center border-2 border-dashed border-white/5 rounded-3xl">
|
||||
<p className="text-gray-600 font-bold uppercase tracking-widest italic">
|
||||
Select a lesson to view its engagement signature
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
</CourseEditorLayout>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,193 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { cmsApi, Course, AdvancedAnalytics, CourseAnalytics } from "@/lib/api";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import {
|
||||
ArrowLeft,
|
||||
Download,
|
||||
Users,
|
||||
CheckCircle,
|
||||
Clock,
|
||||
Filter
|
||||
} from "lucide-react";
|
||||
import CourseEditorLayout from "@/components/CourseEditorLayout";
|
||||
|
||||
export default function ReportsPage() {
|
||||
const { id } = useParams() as { id: string };
|
||||
const router = useRouter();
|
||||
const { user } = useAuth();
|
||||
const [course, setCourse] = useState<Course | null>(null);
|
||||
const [analytics, setAnalytics] = useState<CourseAnalytics | null>(null);
|
||||
const [advanced, setAdvanced] = useState<AdvancedAnalytics | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [filter, setFilter] = useState("all");
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
if (!user) return;
|
||||
try {
|
||||
const [courseData, basicData, advancedData] = await Promise.all([
|
||||
cmsApi.getCourseWithFullOutline(id),
|
||||
cmsApi.getCourseAnalytics(id),
|
||||
cmsApi.getAdvancedAnalytics(id)
|
||||
]);
|
||||
setCourse(courseData);
|
||||
setAnalytics(basicData);
|
||||
setAdvanced(advancedData);
|
||||
} catch (err) {
|
||||
console.error("Failed to load report data", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
}, [id, user]);
|
||||
|
||||
const exportToCSV = () => {
|
||||
if (!analytics || !course) return;
|
||||
|
||||
let csvContent = "data:text/csv;charset=utf-8,";
|
||||
csvContent += "Lesson,Students,Avg Score,Type\n";
|
||||
|
||||
analytics.lessons.forEach(l => {
|
||||
csvContent += `"${l.lesson_title}",${l.submission_count},${(l.average_score * 100).toFixed(1)}%\n`;
|
||||
});
|
||||
|
||||
const encodedUri = encodeURI(csvContent);
|
||||
const link = document.createElement("a");
|
||||
link.setAttribute("href", encodedUri);
|
||||
link.setAttribute("download", `report_${course.title.replace(/\s+/g, '_')}.csv`);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
};
|
||||
|
||||
if (loading) return (
|
||||
<div className="min-h-screen bg-gray-900 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>
|
||||
);
|
||||
|
||||
if (!course || !analytics) return <div className="p-20 text-center text-red-400">Error caricamento dati.</div>;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0f1115] text-white p-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="flex items-center justify-between mb-12">
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={() => router.push(`/courses/${id}/analytics`)}
|
||||
className="p-2 hover:bg-white/10 rounded-full transition-colors"
|
||||
>
|
||||
<ArrowLeft className="w-6 h-6" />
|
||||
</button>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent">
|
||||
Custom Report Builder
|
||||
</h1>
|
||||
<p className="text-gray-400 mt-1">Generate and export engagement data for {course.title}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={exportToCSV}
|
||||
className="btn-premium px-8 flex items-center gap-2"
|
||||
>
|
||||
<Download size={18} />
|
||||
Export to CSV
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<CourseEditorLayout activeTab="analytics">
|
||||
<div className="p-8 space-y-12">
|
||||
{/* Filters */}
|
||||
<div className="flex items-center gap-4 bg-white/5 p-4 rounded-2xl border border-white/5">
|
||||
<Filter size={18} className="text-gray-500 ml-2" />
|
||||
<span className="text-xs font-black uppercase tracking-widest text-gray-500">Filter by Cohort:</span>
|
||||
<select
|
||||
className="bg-transparent text-sm font-bold text-white focus:outline-none"
|
||||
value={filter}
|
||||
onChange={(e) => setFilter(e.target.value)}
|
||||
>
|
||||
<option value="all">All students</option>
|
||||
{advanced?.cohorts.map(c => (
|
||||
<option key={c.period} value={c.period}>{c.period}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Report Table */}
|
||||
<div className="rounded-3xl border border-white/10 bg-white/[0.02] overflow-hidden">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-white/5">
|
||||
<th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Lección</th>
|
||||
<th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Completado por</th>
|
||||
<th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Puntaje Promedio</th>
|
||||
<th className="p-6 text-xs font-black uppercase tracking-widest text-gray-500">Tendencia</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-white/5">
|
||||
{analytics.lessons.map((lesson) => (
|
||||
<tr key={lesson.lesson_id} className="hover:bg-white/[0.02] transition-colors">
|
||||
<td className="p-6 font-bold text-gray-300">{lesson.lesson_title}</td>
|
||||
<td className="p-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Users size={14} className="text-blue-400" />
|
||||
<span className="font-black">{lesson.submission_count}</span>
|
||||
<span className="text-[10px] text-gray-500">estudiantes</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex-1 h-2 bg-white/5 rounded-full overflow-hidden min-w-[100px]">
|
||||
<div
|
||||
className="h-full bg-blue-500 shadow-[0_0_10px_rgba(59,130,246,0.5)]"
|
||||
style={{ width: `${lesson.average_score * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm font-black">{(lesson.average_score * 100).toFixed(0)}%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-6">
|
||||
{lesson.average_score > 0.8 ? (
|
||||
<div className="flex items-center gap-1 text-green-400 text-[10px] font-black uppercase tracking-widest">
|
||||
<CheckCircle size={12} /> Alta
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-1 text-orange-400 text-[10px] font-black uppercase tracking-widest">
|
||||
<Clock size={12} /> Estable
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Summary Metrics */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="p-8 rounded-3xl bg-gradient-to-br from-blue-500/10 to-transparent border border-blue-500/20">
|
||||
<h4 className="text-[10px] font-black uppercase tracking-widest text-blue-400 mb-2">Total Enrollments</h4>
|
||||
<div className="text-3xl font-black">{analytics.total_enrollments}</div>
|
||||
</div>
|
||||
<div className="p-8 rounded-3xl bg-gradient-to-br from-purple-500/10 to-transparent border border-purple-500/20">
|
||||
<h4 className="text-[10px] font-black uppercase tracking-widest text-purple-400 mb-2">Avg. Score</h4>
|
||||
<div className="text-3xl font-black">{(analytics.average_score * 100).toFixed(1)}%</div>
|
||||
</div>
|
||||
<div className="p-8 rounded-3xl bg-gradient-to-br from-green-500/10 to-transparent border border-green-500/20">
|
||||
<h4 className="text-[10px] font-black uppercase tracking-widest text-green-400 mb-2">Retention Rate</h4>
|
||||
<div className="text-3xl font-black">
|
||||
{advanced ? Math.round((advanced.retention[advanced.retention.length - 1]?.student_count / advanced.retention[0]?.student_count) * 100) : '--'}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CourseEditorLayout>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -10,6 +10,7 @@ import FillInTheBlanksBlock from "@/components/blocks/FillInTheBlanksBlock";
|
||||
import MatchingBlock from "@/components/blocks/MatchingBlock";
|
||||
import OrderingBlock from "@/components/blocks/OrderingBlock";
|
||||
import ShortAnswerBlock from "@/components/blocks/ShortAnswerBlock";
|
||||
import DocumentBlock from "@/components/blocks/DocumentBlock";
|
||||
import {
|
||||
Save,
|
||||
X,
|
||||
@@ -175,7 +176,7 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
}
|
||||
};
|
||||
|
||||
const addBlock = (type: 'description' | 'media' | 'quiz' | 'fill-in-the-blanks' | 'matching' | 'ordering' | 'short-answer') => {
|
||||
const addBlock = (type: 'description' | 'media' | 'quiz' | 'fill-in-the-blanks' | 'matching' | 'ordering' | 'short-answer' | 'document') => {
|
||||
const newBlock: Block = {
|
||||
id: Math.random().toString(36).substr(2, 9),
|
||||
type,
|
||||
@@ -186,6 +187,7 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
...(type === 'matching' && { pairs: [{ left: "Item 1", right: "Match 1" }] }),
|
||||
...(type === 'ordering' && { items: ["Item A", "Item B"] }),
|
||||
...(type === 'short-answer' && { prompt: "Question?", correctAnswers: ["Answer"] }),
|
||||
...(type === 'document' && { url: "", title: "" }),
|
||||
};
|
||||
setBlocks([...blocks, newBlock]);
|
||||
};
|
||||
@@ -628,6 +630,15 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
onChange={(updates) => updateBlock(block.id, updates)}
|
||||
/>
|
||||
)}
|
||||
{block.type === 'document' && (
|
||||
<DocumentBlock
|
||||
id={block.id}
|
||||
title={block.title}
|
||||
url={block.url || ""}
|
||||
editMode={editMode}
|
||||
onChange={(updates) => updateBlock(block.id, updates)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -686,6 +697,13 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
|
||||
<span className="text-2xl group-hover:scale-110 transition-transform">💬</span>
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">Short</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => addBlock('document')}
|
||||
className="flex flex-col items-center gap-2 p-6 glass hover:border-blue-500/50 transition-all group w-32"
|
||||
>
|
||||
<span className="text-2xl group-hover:scale-110 transition-transform">📚</span>
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">Reading</span>
|
||||
</button>
|
||||
|
||||
<div className="w-px h-12 bg-white/5"></div>
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { cmsApi, Course } from "@/lib/api";
|
||||
import { ArrowLeft, Save, Settings as SettingsIcon, BookOpen, Calendar, Clock } from "lucide-react";
|
||||
import { ArrowLeft, Save, Settings as SettingsIcon, BookOpen, Calendar, Clock, Download, Upload } 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;">
|
||||
@@ -33,6 +33,8 @@ export default function CourseSettingsPage() {
|
||||
const [pacingMode, setPacingMode] = useState<'self_paced' | 'instructor_led'>("self_paced");
|
||||
const [startDate, setStartDate] = useState("");
|
||||
const [endDate, setEndDate] = useState("");
|
||||
const [exporting, setExporting] = useState(false);
|
||||
const [importing, setImporting] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchCourse = async () => {
|
||||
@@ -73,6 +75,47 @@ export default function CourseSettingsPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleExport = async () => {
|
||||
setExporting(true);
|
||||
try {
|
||||
const data = await cmsApi.exportCourse(id);
|
||||
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `course_${id}_export.json`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
} catch (err) {
|
||||
console.error("Export failed", err);
|
||||
alert("Error al exportar el curso");
|
||||
} finally {
|
||||
setExporting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleImport = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
setImporting(true);
|
||||
try {
|
||||
const text = await file.text();
|
||||
const data = JSON.parse(text);
|
||||
const newCourse = await cmsApi.importCourse(data);
|
||||
alert(`Curso importado con éxito: ${newCourse.title}`);
|
||||
router.push(`/courses/${newCourse.id}/settings`);
|
||||
} catch (err) {
|
||||
console.error("Import failed", err);
|
||||
alert("Error al importar el curso. Asegúrate de que el formato sea válido.");
|
||||
} finally {
|
||||
setImporting(false);
|
||||
if (e.target) e.target.value = ''; // Reset input
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) return (
|
||||
<div className="min-h-screen bg-[#0f1115] flex items-center justify-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
|
||||
@@ -297,6 +340,57 @@ export default function CourseSettingsPage() {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Course Portability 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-amber-500/10 flex items-center justify-center text-amber-400">
|
||||
<Download size={24} />
|
||||
</div>
|
||||
<h2 className="text-2xl font-black">Course Portability</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-sm font-bold text-gray-300">Export Course</h3>
|
||||
<p className="text-xs text-gray-500">
|
||||
Download the entire course structure, modules, and lessons as a JSON file.
|
||||
You can use this to backup or move content between organizations.
|
||||
</p>
|
||||
<button
|
||||
onClick={handleExport}
|
||||
disabled={exporting}
|
||||
className="flex items-center gap-2 px-6 py-3 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl font-bold transition-all active:scale-95 disabled:opacity-50"
|
||||
>
|
||||
<Download size={18} />
|
||||
{exporting ? "Exporting..." : "Download JSON"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-sm font-bold text-gray-300">Import Course</h3>
|
||||
<p className="text-xs text-gray-500">
|
||||
Upload a previously exported course JSON file. This will create a NEW course
|
||||
within the current organization based on that data.
|
||||
</p>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="file"
|
||||
accept=".json"
|
||||
onChange={handleImport}
|
||||
disabled={importing}
|
||||
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
|
||||
/>
|
||||
<button
|
||||
disabled={importing}
|
||||
className="flex items-center gap-2 px-6 py-3 bg-indigo-600/20 hover:bg-indigo-600/30 border border-indigo-500/30 text-indigo-400 rounded-xl font-bold transition-all pointer-events-none"
|
||||
>
|
||||
<Upload size={18} />
|
||||
{importing ? "Importing..." : "Upload JSON"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</CourseEditorLayout>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import Link from "next/link";
|
||||
import { AuthProvider } from "@/context/AuthContext";
|
||||
import { I18nProvider } from "@/context/I18nContext";
|
||||
import { BookOpen } from "lucide-react";
|
||||
import AuthGuard from "@/components/AuthGuard";
|
||||
|
||||
@@ -24,18 +25,20 @@ export default function RootLayout({
|
||||
<html lang="en" className="dark">
|
||||
<body className={`${inter.className} bg-gray-950 text-gray-200 min-h-screen flex flex-col`}>
|
||||
<AuthProvider>
|
||||
<AuthGuard>
|
||||
<header className="h-20 glass sticky top-0 z-50 px-8 flex items-center justify-between border-b border-white/5 backdrop-blur-xl bg-black/40">
|
||||
<Link href="/" className="flex items-center gap-3 group">
|
||||
<div className="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center font-black text-white shadow-lg shadow-blue-500/20 group-hover:scale-105 transition-transform">
|
||||
<BookOpen size={20} />
|
||||
</div>
|
||||
<span className="font-black text-2xl tracking-tighter text-white">STUDIO</span>
|
||||
</Link>
|
||||
<AuthHeader />
|
||||
</header>
|
||||
<main className="flex-1">{children}</main>
|
||||
</AuthGuard>
|
||||
<I18nProvider>
|
||||
<AuthGuard>
|
||||
<header className="h-20 glass sticky top-0 z-50 px-8 flex items-center justify-between border-b border-white/5 backdrop-blur-xl bg-black/40">
|
||||
<Link href="/" className="flex items-center gap-3 group">
|
||||
<div className="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center font-black text-white shadow-lg shadow-blue-500/20 group-hover:scale-105 transition-transform">
|
||||
<BookOpen size={20} />
|
||||
</div>
|
||||
<span className="font-black text-2xl tracking-tighter text-white">STUDIO</span>
|
||||
</Link>
|
||||
<AuthHeader />
|
||||
</header>
|
||||
<main className="flex-1">{children}</main>
|
||||
</AuthGuard>
|
||||
</I18nProvider>
|
||||
</AuthProvider>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+154
-12
@@ -4,11 +4,13 @@ import { useEffect, useState } from "react";
|
||||
import { cmsApi, Course, Organization } from "@/lib/api";
|
||||
import Link from "next/link";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import { Plus, BookOpen } from "lucide-react";
|
||||
import { useTranslation } from "@/context/I18nContext";
|
||||
import { Plus, BookOpen, Download, Upload, Sparkles, Wand2 } from "lucide-react";
|
||||
import OrganizationSelector from "@/components/OrganizationSelector";
|
||||
import Modal from "@/components/Modal";
|
||||
|
||||
export default function StudioDashboard() {
|
||||
const { t } = useTranslation();
|
||||
const [courses, setCourses] = useState<Course[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const { user } = useAuth();
|
||||
@@ -34,7 +36,10 @@ export default function StudioDashboard() {
|
||||
const [organizations, setOrganizations] = useState<Organization[]>([]);
|
||||
const [isOrgModalOpen, setIsOrgModalOpen] = useState(false);
|
||||
const [isTitleModalOpen, setIsTitleModalOpen] = useState(false);
|
||||
const [isAIModalOpen, setIsAIModalOpen] = useState(false);
|
||||
const [newCourseTitle, setNewCourseTitle] = useState("");
|
||||
const [aiPrompt, setAiPrompt] = useState("");
|
||||
const [isGenerating, setIsGenerating] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const loadOrgs = async () => {
|
||||
@@ -78,6 +83,63 @@ export default function StudioDashboard() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleAIGenerate = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!aiPrompt) return;
|
||||
|
||||
setIsGenerating(true);
|
||||
try {
|
||||
const newCourse = await cmsApi.generateCourse(aiPrompt);
|
||||
setCourses((prev: Course[]) => [...prev, newCourse]);
|
||||
setAiPrompt("");
|
||||
setIsAIModalOpen(false);
|
||||
alert("Course generated successfully with AI!");
|
||||
} catch (err) {
|
||||
console.error("AI generation failed", err);
|
||||
alert("Failed to generate course with AI. Check backend logs and AI provider status.");
|
||||
} finally {
|
||||
setIsGenerating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleExport = async (e: React.MouseEvent, courseId: string, title: string) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
try {
|
||||
const data = await cmsApi.exportCourse(courseId);
|
||||
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = `course_${title.replace(/\s+/g, '_')}.json`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
} catch (err) {
|
||||
console.error("Export failed", err);
|
||||
alert("Failed to export course");
|
||||
}
|
||||
};
|
||||
|
||||
const handleImport = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = async (event) => {
|
||||
try {
|
||||
const json = JSON.parse(event.target?.result as string);
|
||||
const newCourse = await cmsApi.importCourse(json);
|
||||
setCourses((prev: Course[]) => [...prev, newCourse]);
|
||||
alert("Course imported successfully!");
|
||||
} catch (err) {
|
||||
console.error("Import failed", err);
|
||||
alert("Failed to import course. Ensure the file is a valid OpenCCB course export.");
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0f1115] text-white p-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
@@ -85,17 +147,31 @@ export default function StudioDashboard() {
|
||||
<div className="flex justify-between items-center mb-12">
|
||||
<div>
|
||||
<h1 className="text-4xl font-black bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent tracking-tight">
|
||||
My Courses
|
||||
{t('nav.courses')}
|
||||
</h1>
|
||||
<p className="text-gray-400 mt-2">Manage and monitor your educational content</p>
|
||||
<p className="text-gray-400 mt-2">{t('dashboard.title')}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<label className="flex items-center gap-2 px-6 py-3 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl font-bold transition-all cursor-pointer active:scale-95">
|
||||
<Upload size={18} />
|
||||
Import
|
||||
<input type="file" accept=".json" onChange={handleImport} className="hidden" />
|
||||
</label>
|
||||
<button
|
||||
onClick={() => setIsAIModalOpen(true)}
|
||||
className="flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 rounded-xl font-bold shadow-lg shadow-indigo-500/20 transition-all active:scale-95 group"
|
||||
>
|
||||
<Sparkles size={18} className="text-amber-300 group-hover:rotate-12 transition-transform" />
|
||||
AI Wizard
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCreateCourse}
|
||||
className="flex items-center gap-2 px-6 py-3 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl font-bold transition-all active:scale-95"
|
||||
>
|
||||
<Plus size={20} />
|
||||
Manual
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleCreateCourse}
|
||||
className="flex items-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-500 rounded-xl font-bold shadow-lg shadow-blue-500/20 transition-all active:scale-95"
|
||||
>
|
||||
<Plus size={20} />
|
||||
New Course
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
@@ -114,8 +190,17 @@ export default function StudioDashboard() {
|
||||
<Link href={`/courses/${course.id}`} key={course.id}>
|
||||
<div className="glass-card h-full flex flex-col group hover:border-blue-500/50 transition-all">
|
||||
<div className="flex-1">
|
||||
<div className="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center mb-4">
|
||||
<BookOpen className="text-blue-400" />
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center">
|
||||
<BookOpen className="text-blue-400" />
|
||||
</div>
|
||||
<button
|
||||
onClick={(e) => handleExport(e, course.id, course.title)}
|
||||
className="p-2 hover:bg-white/10 rounded-lg text-gray-500 hover:text-white transition-all"
|
||||
title="Export Course"
|
||||
>
|
||||
<Download size={18} />
|
||||
</button>
|
||||
</div>
|
||||
<h3 className="font-bold text-lg mb-2 group-hover:text-blue-400 transition-colors">{course.title}</h3>
|
||||
<p className="text-sm text-gray-400 line-clamp-2">{course.description || "No description provided."}</p>
|
||||
@@ -170,6 +255,63 @@ export default function StudioDashboard() {
|
||||
</form>
|
||||
</Modal>
|
||||
|
||||
{/* AI Wizard Modal */}
|
||||
<Modal
|
||||
isOpen={isAIModalOpen}
|
||||
onClose={() => !isGenerating && setIsAIModalOpen(false)}
|
||||
title="AI Course Wizard"
|
||||
>
|
||||
<form onSubmit={handleAIGenerate} className="space-y-6">
|
||||
<div className="p-4 rounded-xl bg-indigo-500/5 border border-indigo-500/10 mb-2">
|
||||
<p className="text-xs text-indigo-300 leading-relaxed font-medium">
|
||||
Describe the course topic and target audience. Our AI will structure the modules and lessons for you in seconds.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-2">
|
||||
Course Topic or Description
|
||||
</label>
|
||||
<textarea
|
||||
autoFocus
|
||||
required
|
||||
rows={4}
|
||||
value={aiPrompt}
|
||||
onChange={(e) => setAiPrompt(e.target.value)}
|
||||
placeholder="e.g. A comprehensive guide to building distributed systems with Rust and Axum for intermediate developers."
|
||||
className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500/50 transition-all text-white resize-none"
|
||||
disabled={isGenerating}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-3 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsAIModalOpen(false)}
|
||||
disabled={isGenerating}
|
||||
className="flex-1 px-4 py-2.5 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg transition-all text-sm font-medium"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isGenerating}
|
||||
className="flex-[2] px-4 py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg transition-all shadow-lg shadow-indigo-500/20 font-bold text-sm flex items-center justify-center gap-2"
|
||||
>
|
||||
{isGenerating ? (
|
||||
<>
|
||||
<div className="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin" />
|
||||
Generating...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Wand2 size={16} />
|
||||
Magic Create
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
|
||||
{/* Organization Selector Modal */}
|
||||
<OrganizationSelector
|
||||
isOpen={isOrgModalOpen}
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import { useTranslation } from "@/context/I18nContext";
|
||||
import { cmsApi, getImageUrl } from "@/lib/api";
|
||||
import {
|
||||
Save,
|
||||
@@ -17,6 +18,7 @@ import {
|
||||
} from "lucide-react";
|
||||
|
||||
export default function ProfilePage() {
|
||||
const { t, setLanguage: setContextLanguage } = useTranslation();
|
||||
const { user, logout } = useAuth();
|
||||
const [fullName, setFullName] = useState(user?.full_name || "");
|
||||
const [email, setEmail] = useState(user?.email || "");
|
||||
@@ -73,7 +75,8 @@ export default function ProfilePage() {
|
||||
avatar_url: avatarUrl
|
||||
});
|
||||
|
||||
setMessage({ type: 'success', text: 'Profile updated successfully!' });
|
||||
setContextLanguage(language);
|
||||
setMessage({ type: 'success', text: t('common.save') + '!' });
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setMessage({ type: 'error', text: 'Failed to update profile.' });
|
||||
@@ -226,8 +229,8 @@ export default function ProfilePage() {
|
||||
type="button"
|
||||
onClick={() => setLanguage(lang.code)}
|
||||
className={`flex items-center justify-center gap-3 p-4 rounded-2xl border transition-all ${language === lang.code
|
||||
? 'bg-blue-600 border-blue-500 text-white shadow-lg shadow-blue-500/20'
|
||||
: 'bg-black/20 border-white/5 text-gray-400 hover:border-white/20 hover:text-white'
|
||||
? 'bg-blue-600 border-blue-500 text-white shadow-lg shadow-blue-500/20'
|
||||
: 'bg-black/20 border-white/5 text-gray-400 hover:border-white/20 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<span className="text-xl">{lang.flag}</span>
|
||||
@@ -239,8 +242,8 @@ export default function ProfilePage() {
|
||||
|
||||
{message && (
|
||||
<div className={`p-5 rounded-2xl text-sm font-bold animate-in fade-in slide-in-from-top-4 ${message.type === 'success'
|
||||
? 'bg-green-500/10 text-green-400 border border-green-500/20'
|
||||
: 'bg-red-500/10 text-red-400 border border-red-500/20'
|
||||
? 'bg-green-500/10 text-green-400 border border-green-500/20'
|
||||
: 'bg-red-500/10 text-red-400 border border-red-500/20'
|
||||
}`}>
|
||||
{message.text}
|
||||
</div>
|
||||
|
||||
@@ -2,9 +2,11 @@
|
||||
|
||||
import Link from 'next/link';
|
||||
import { useAuth } from '@/context/AuthContext';
|
||||
import { LayoutDashboard, Building2, Users2, LogOut, Webhook } from 'lucide-react';
|
||||
import { useTranslation } from '@/context/I18nContext';
|
||||
import { LayoutDashboard, ShieldCheck, LogOut, Webhook, Settings, Globe } from 'lucide-react';
|
||||
|
||||
export function Navbar() {
|
||||
const { t, language, setLanguage } = useTranslation();
|
||||
const { user, logout } = useAuth();
|
||||
|
||||
return (
|
||||
@@ -23,31 +25,33 @@ export function Navbar() {
|
||||
className="text-sm font-medium text-gray-400 hover:text-blue-400 transition-colors flex items-center gap-2"
|
||||
>
|
||||
<LayoutDashboard className="w-4 h-4" />
|
||||
Courses
|
||||
{t('nav.courses')}
|
||||
</Link>
|
||||
|
||||
{user?.role === 'admin' && (
|
||||
<>
|
||||
<Link
|
||||
href="/admin/organizations"
|
||||
className="text-sm font-medium text-gray-400 hover:text-blue-400 transition-colors flex items-center gap-2"
|
||||
>
|
||||
<Building2 className="w-4 h-4" />
|
||||
Organizations
|
||||
</Link>
|
||||
<Link
|
||||
href="/admin/users"
|
||||
className="text-sm font-medium text-gray-400 hover:text-blue-400 transition-colors flex items-center gap-2"
|
||||
>
|
||||
<Users2 className="w-4 h-4" />
|
||||
Users
|
||||
</Link>
|
||||
{user.organization_id === '00000000-0000-0000-0000-000000000001' && (
|
||||
<Link
|
||||
href="/admin"
|
||||
className="text-sm font-black text-indigo-400 hover:text-indigo-300 transition-colors flex items-center gap-2 bg-indigo-500/10 px-3 py-1.5 rounded-lg border border-indigo-500/20 shadow-glow-sm"
|
||||
>
|
||||
<ShieldCheck className="w-4 h-4" />
|
||||
{t('nav.globalControl')}
|
||||
</Link>
|
||||
)}
|
||||
<Link
|
||||
href="/settings/webhooks"
|
||||
className="text-sm font-medium text-gray-400 hover:text-blue-400 transition-colors flex items-center gap-2"
|
||||
>
|
||||
<Webhook className="w-4 h-4" />
|
||||
Webhooks
|
||||
{t('nav.webhooks')}
|
||||
</Link>
|
||||
<Link
|
||||
href="/profile"
|
||||
className="text-sm font-medium text-gray-400 hover:text-blue-400 transition-colors flex items-center gap-2"
|
||||
>
|
||||
<Settings className="w-4 h-4" />
|
||||
{t('nav.profile')}
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
@@ -65,6 +69,22 @@ export function Navbar() {
|
||||
|
||||
<div className="h-6 w-px bg-white/10 mx-2" />
|
||||
|
||||
{/* Language Switcher */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Globe className="w-4 h-4 text-gray-500" />
|
||||
<select
|
||||
value={language}
|
||||
onChange={(e) => setLanguage(e.target.value)}
|
||||
className="bg-transparent text-[10px] font-black uppercase tracking-widest text-gray-400 hover:text-white transition-colors focus:outline-none cursor-pointer"
|
||||
>
|
||||
<option value="en" className="bg-gray-900">EN</option>
|
||||
<option value="es" className="bg-gray-900">ES</option>
|
||||
<option value="pt" className="bg-gray-900">PT</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="h-6 w-px bg-white/10 mx-2" />
|
||||
|
||||
{user ? (
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex flex-col items-end">
|
||||
|
||||
@@ -0,0 +1,108 @@
|
||||
"use client";
|
||||
|
||||
import FileUpload from "../FileUpload";
|
||||
import { getImageUrl } from "@/lib/api";
|
||||
import { FileText, Download, Eye } from "lucide-react";
|
||||
|
||||
interface DocumentBlockProps {
|
||||
id: string;
|
||||
title?: string;
|
||||
url: string;
|
||||
editMode: boolean;
|
||||
onChange: (updates: { title?: string; url?: string }) => void;
|
||||
}
|
||||
|
||||
export default function DocumentBlock({ title, url, editMode, onChange }: DocumentBlockProps) {
|
||||
const isPdf = url.toLowerCase().endsWith(".pdf");
|
||||
const displayUrl = getImageUrl(url);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Block Header */}
|
||||
<div className="space-y-2">
|
||||
{editMode ? (
|
||||
<div className="space-y-2 p-6 glass border-white/5 bg-white/5 mb-4">
|
||||
<label className="text-xs font-bold text-gray-500 uppercase tracking-widest">Document Activity Title</label>
|
||||
<input
|
||||
type="text"
|
||||
value={title || ""}
|
||||
onChange={(e) => onChange({ title: e.target.value })}
|
||||
placeholder="e.g. Course Syllabus, Reading Guide..."
|
||||
className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2 text-sm font-bold focus:border-blue-500/50 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
title && <h3 className="text-xl font-bold border-l-4 border-indigo-500 pl-4 py-1 tracking-tight text-white">{title}</h3>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{editMode && (
|
||||
<div className="p-6 glass border-blue-500/10 mb-8 bg-blue-500/5">
|
||||
<label className="text-xs font-bold text-gray-500 uppercase tracking-widest mb-4 block">Upload Document (PDF, DOCX, PPTX)</label>
|
||||
<FileUpload
|
||||
currentUrl={url}
|
||||
onUploadComplete={(newUrl) => onChange({ url: newUrl })}
|
||||
/>
|
||||
<p className="text-[10px] text-gray-500 uppercase leading-relaxed mt-4 px-2">
|
||||
Supported formats: PDF (can be previewed), DOCX, PPTX (download only).
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!editMode && (
|
||||
<div className="relative">
|
||||
{url ? (
|
||||
<div className="space-y-4">
|
||||
{isPdf ? (
|
||||
<div className="glass rounded-2xl overflow-hidden border-white/5 bg-white/5 aspect-[4/3] w-full">
|
||||
<iframe
|
||||
src={`${displayUrl}#toolbar=0`}
|
||||
className="w-full h-full border-none"
|
||||
title={title || "Document Preview"}
|
||||
/>
|
||||
<div className="p-4 border-t border-white/5 flex items-center justify-between bg-black/40">
|
||||
<span className="text-xs font-bold text-gray-400 uppercase tracking-widest flex items-center gap-2">
|
||||
<Eye size={14} className="text-indigo-400" /> PDF Preview
|
||||
</span>
|
||||
<a
|
||||
href={displayUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-2 px-4 py-2 bg-indigo-500/20 hover:bg-indigo-500/40 text-indigo-400 rounded-lg text-xs font-black uppercase tracking-widest transition-all"
|
||||
>
|
||||
<Download size={14} /> Full Screen / Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="glass p-12 rounded-3xl border border-white/5 bg-white/5 flex flex-col items-center text-center gap-6">
|
||||
<div className="w-20 h-20 rounded-2xl bg-indigo-500/10 flex items-center justify-center text-indigo-400">
|
||||
<FileText size={40} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-lg font-bold text-white mb-2">Non-PDF Document</p>
|
||||
<p className="text-sm text-gray-500 max-w-sm mx-auto uppercase tracking-widest font-black leading-relaxed">
|
||||
This file cannot be previewed directly. Please download it to read.
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
href={displayUrl}
|
||||
download
|
||||
className="flex items-center gap-3 px-8 py-4 bg-indigo-600 hover:bg-indigo-500 text-white rounded-2xl font-black uppercase tracking-widest transition-all shadow-xl shadow-indigo-500/20 active:scale-95"
|
||||
>
|
||||
<Download size={20} /> Download File
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="glass border-dashed border-white/10 p-12 rounded-3xl flex flex-col items-center gap-4 text-gray-500">
|
||||
<FileText size={48} className="opacity-20" />
|
||||
<p className="font-bold uppercase tracking-widest text-xs">No file selected</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
"use client";
|
||||
|
||||
import React, { createContext, useContext, useState, useEffect } from 'react';
|
||||
import en from '../lib/locales/en.json';
|
||||
import es from '../lib/locales/es.json';
|
||||
import pt from '../lib/locales/pt.json';
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const translations: Record<string, any> = { en, es, pt };
|
||||
|
||||
interface I18nContextType {
|
||||
language: string;
|
||||
setLanguage: (lang: string) => void;
|
||||
t: (path: string) => string;
|
||||
}
|
||||
|
||||
const I18nContext = createContext<I18nContextType | undefined>(undefined);
|
||||
|
||||
export function I18nProvider({ children }: { children: React.ReactNode }) {
|
||||
const [language, setLanguageState] = useState('en');
|
||||
|
||||
useEffect(() => {
|
||||
const savedLang = localStorage.getItem('studio_language');
|
||||
if (savedLang) {
|
||||
setLanguageState(savedLang);
|
||||
} else {
|
||||
// Try to detect from user profile if available, but for now default or localstorage
|
||||
}
|
||||
}, []);
|
||||
|
||||
const setLanguage = (lang: string) => {
|
||||
setLanguageState(lang);
|
||||
localStorage.setItem('studio_language', lang);
|
||||
};
|
||||
|
||||
const t = (path: string): string => {
|
||||
const keys = path.split('.');
|
||||
let result = translations[language] || translations['en'];
|
||||
|
||||
for (const key of keys) {
|
||||
if (result[key]) {
|
||||
result = result[key];
|
||||
} else {
|
||||
return path; // Fallback to path if key missing
|
||||
}
|
||||
}
|
||||
|
||||
return typeof result === 'string' ? result : path;
|
||||
};
|
||||
|
||||
return (
|
||||
<I18nContext.Provider value={{ language, setLanguage, t }}>
|
||||
{children}
|
||||
</I18nContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useTranslation() {
|
||||
const context = useContext(I18nContext);
|
||||
if (context === undefined) {
|
||||
throw new Error('useTranslation must be used within an I18nProvider');
|
||||
}
|
||||
return context;
|
||||
}
|
||||
@@ -44,7 +44,7 @@ export interface QuizQuestion {
|
||||
|
||||
export interface Block {
|
||||
id: string;
|
||||
type: 'description' | 'media' | 'quiz' | 'fill-in-the-blanks' | 'matching' | 'ordering' | 'short-answer';
|
||||
type: 'description' | 'media' | 'quiz' | 'fill-in-the-blanks' | 'matching' | 'ordering' | 'short-answer' | 'document';
|
||||
title?: string;
|
||||
content?: string;
|
||||
url?: string;
|
||||
@@ -277,6 +277,19 @@ export const cmsApi = {
|
||||
getAuditLogs: (): Promise<AuditLog[]> => apiFetch('/audit-logs'),
|
||||
getCourseAnalytics: (id: string): Promise<CourseAnalytics> => apiFetch(`/courses/${id}/analytics`),
|
||||
getAdvancedAnalytics: (id: string): Promise<AdvancedAnalytics> => apiFetch(`/courses/${id}/analytics/advanced`),
|
||||
getLessonHeatmap: (lessonId: string): Promise<{ second: number, count: number }[]> => apiFetch(`/lessons/${lessonId}/heatmap`),
|
||||
exportCourse: (id: string): Promise<Record<string, unknown>> => apiFetch(`/courses/${id}/export`),
|
||||
importCourse: (data: Record<string, unknown>): Promise<Course> => apiFetch(`/courses/import`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(data)
|
||||
}),
|
||||
|
||||
async generateCourse(prompt: string, targetOrgId?: string): Promise<Course> {
|
||||
return apiFetch(`/courses/generate`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ prompt, target_organization_id: targetOrgId })
|
||||
});
|
||||
},
|
||||
|
||||
// Users
|
||||
getAllUsers: (): Promise<User[]> => apiFetch('/users'),
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
{
|
||||
"common": {
|
||||
"save": "Save",
|
||||
"cancel": "Cancel",
|
||||
"delete": "Delete",
|
||||
"edit": "Edit",
|
||||
"create": "Create",
|
||||
"loading": "Loading...",
|
||||
"search": "Search",
|
||||
"back": "Back",
|
||||
"next": "Next",
|
||||
"publish": "Publish",
|
||||
"preview": "Preview"
|
||||
},
|
||||
"nav": {
|
||||
"courses": "Courses",
|
||||
"globalControl": "Global Control",
|
||||
"webhooks": "Webhooks",
|
||||
"profile": "Profile",
|
||||
"signOut": "Sign Out"
|
||||
},
|
||||
"dashboard": {
|
||||
"title": "Studio Dashboard",
|
||||
"newCourse": "New Course",
|
||||
"aiBuilder": "AI Builder",
|
||||
"noCourses": "No courses available."
|
||||
},
|
||||
"editor": {
|
||||
"outline": "Outline",
|
||||
"settings": "Settings",
|
||||
"newModule": "New Module",
|
||||
"newLesson": "New Lesson",
|
||||
"addBlock": "Add Content Block",
|
||||
"publishToOrg": "Publish to Organization",
|
||||
"reading": "Reading"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
{
|
||||
"common": {
|
||||
"save": "Guardar",
|
||||
"cancel": "Cancelar",
|
||||
"delete": "Eliminar",
|
||||
"edit": "Editar",
|
||||
"create": "Crear",
|
||||
"loading": "Cargando...",
|
||||
"search": "Buscar",
|
||||
"back": "Volver",
|
||||
"next": "Siguiente",
|
||||
"publish": "Publicar",
|
||||
"preview": "Previsualizar"
|
||||
},
|
||||
"nav": {
|
||||
"courses": "Cursos",
|
||||
"globalControl": "Control Global",
|
||||
"webhooks": "Webhooks",
|
||||
"profile": "Perfil",
|
||||
"signOut": "Cerrar Sesión"
|
||||
},
|
||||
"dashboard": {
|
||||
"title": "Panel de Control",
|
||||
"newCourse": "Nuevo Curso",
|
||||
"aiBuilder": "Constructor AI",
|
||||
"noCourses": "No hay cursos disponibles."
|
||||
},
|
||||
"editor": {
|
||||
"outline": "Estructura",
|
||||
"settings": "Configuración",
|
||||
"newModule": "Nuevo Módulo",
|
||||
"newLesson": "Nueva Lección",
|
||||
"addBlock": "Añadir Bloque de Contenido",
|
||||
"publishToOrg": "Publicar en Organización",
|
||||
"reading": "Lectura"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
{
|
||||
"common": {
|
||||
"save": "Salvar",
|
||||
"cancel": "Cancelar",
|
||||
"delete": "Excluir",
|
||||
"edit": "Editar",
|
||||
"create": "Criar",
|
||||
"loading": "Carregando...",
|
||||
"search": "Buscar",
|
||||
"back": "Voltar",
|
||||
"next": "Próximo",
|
||||
"publish": "Publicar",
|
||||
"preview": "Visualizar"
|
||||
},
|
||||
"nav": {
|
||||
"courses": "Cursos",
|
||||
"globalControl": "Controle Global",
|
||||
"webhooks": "Webhooks",
|
||||
"profile": "Perfil",
|
||||
"signOut": "Sair"
|
||||
},
|
||||
"dashboard": {
|
||||
"title": "Painel do Studio",
|
||||
"newCourse": "Novo Curso",
|
||||
"aiBuilder": "Construtor IA",
|
||||
"noCourses": "Nenhum curso disponível."
|
||||
},
|
||||
"editor": {
|
||||
"outline": "Estrutura",
|
||||
"settings": "Configurações",
|
||||
"newModule": "Novo Módulo",
|
||||
"newLesson": "Nova Lição",
|
||||
"addBlock": "Adicionar Bloco de Conteúdo",
|
||||
"publishToOrg": "Publicar na Organização",
|
||||
"reading": "Leitura"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user