feat: introduce CourseEditorLayout and AppHeader, add organization domain migration, and update Docker configurations and auth scripts
This commit is contained in:
@@ -0,0 +1,13 @@
|
||||
target
|
||||
**/target
|
||||
node_modules
|
||||
**/node_modules
|
||||
.next
|
||||
**/.next
|
||||
.git
|
||||
**/.git
|
||||
.env
|
||||
**/.env
|
||||
**/.env.local
|
||||
**/.env.example
|
||||
*.log
|
||||
@@ -0,0 +1,14 @@
|
||||
#!/bin/bash
|
||||
# Script para limpiar tokens antiguos y forzar re-login
|
||||
|
||||
echo "=== Limpiando tokens antiguos de localStorage ==="
|
||||
echo ""
|
||||
echo "Por favor, ejecuta esto en la consola del navegador (F12 → Console):"
|
||||
echo ""
|
||||
echo "localStorage.removeItem('studio_token');"
|
||||
echo "localStorage.removeItem('studio_user');"
|
||||
echo "location.reload();"
|
||||
echo ""
|
||||
echo "Luego vuelve a hacer login con:"
|
||||
echo " Email: juan.allende@gmail.com"
|
||||
echo " Password: password123"
|
||||
Executable
+49
@@ -0,0 +1,49 @@
|
||||
#!/bin/bash
|
||||
echo "=== DIAGNÓSTICO DE AUTENTICACIÓN ==="
|
||||
echo ""
|
||||
|
||||
# 1. Verificar que el backend acepta login
|
||||
echo "1. Probando LOGIN directo al backend..."
|
||||
RESPONSE=$(curl -s -X POST http://localhost:3001/auth/login \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"email":"juan.allende@gmail.com","password":"password123"}')
|
||||
|
||||
TOKEN=$(echo $RESPONSE | grep -o '"token":"[^"]*"' | cut -d'"' -f4)
|
||||
|
||||
if [ -z "$TOKEN" ]; then
|
||||
echo "❌ ERROR: No se pudo obtener token del backend"
|
||||
echo "Respuesta: $RESPONSE"
|
||||
exit 1
|
||||
else
|
||||
echo "✅ Token obtenido exitosamente"
|
||||
echo "Token: ${TOKEN:0:50}..."
|
||||
fi
|
||||
|
||||
echo ""
|
||||
echo "2. Probando acceso a /courses CON el token..."
|
||||
HTTP_CODE=$(curl -s -o /dev/null -w "%{http_code}" \
|
||||
-H "Authorization: Bearer $TOKEN" \
|
||||
http://localhost:3001/courses)
|
||||
|
||||
if [ "$HTTP_CODE" -eq 200 ]; then
|
||||
echo "✅ Acceso a /courses exitoso (200)"
|
||||
else
|
||||
echo "❌ Acceso a /courses falló con código: $HTTP_CODE"
|
||||
# Mostrar respuesta completa
|
||||
curl -s -H "Authorization: Bearer $TOKEN" http://localhost:3001/courses
|
||||
fi
|
||||
|
||||
echo ""
|
||||
echo "3. Verificando JWT_SECRET en el contenedor..."
|
||||
JWT_SECRET=$(docker exec openccb-1-cms-service-1 env | grep JWT_SECRET | cut -d'=' -f2)
|
||||
echo "JWT_SECRET actual: $JWT_SECRET"
|
||||
|
||||
echo ""
|
||||
echo "=== INSTRUCCIONES ==="
|
||||
echo "Si el test 2 fue exitoso, el problema está en el navegador."
|
||||
echo "Ejecuta en la consola del navegador (F12):"
|
||||
echo ""
|
||||
echo " localStorage.clear();"
|
||||
echo " location.reload();"
|
||||
echo ""
|
||||
echo "Luego vuelve a hacer login."
|
||||
+16
-10
@@ -16,10 +16,12 @@ services:
|
||||
dockerfile: services/cms-service/Dockerfile
|
||||
environment:
|
||||
DATABASE_URL: postgresql://user:password@db:5432/openccb_cms
|
||||
JWT_SECRET: openccb_secret_key_2025_production
|
||||
ports:
|
||||
- "3001:3001"
|
||||
volumes:
|
||||
- uploads_data:/app/uploads
|
||||
env_file: .env
|
||||
depends_on:
|
||||
- db
|
||||
|
||||
@@ -29,8 +31,10 @@ services:
|
||||
dockerfile: services/lms-service/Dockerfile
|
||||
environment:
|
||||
DATABASE_URL: postgresql://user:password@db:5432/openccb_lms
|
||||
JWT_SECRET: openccb_secret_key_2025_production
|
||||
ports:
|
||||
- "3002:3002"
|
||||
env_file: .env
|
||||
depends_on:
|
||||
- db
|
||||
|
||||
@@ -53,22 +57,24 @@ services:
|
||||
NEXT_PUBLIC_LMS_API_URL: http://localhost:3002
|
||||
|
||||
whisper:
|
||||
image: fedirz/faster-whisper-server:latest-cuda
|
||||
image: fedirz/faster-whisper-server:latest-cpu
|
||||
ports:
|
||||
- "8000:8000"
|
||||
volumes:
|
||||
- whisper_cache:/root/.cache/huggingface
|
||||
environment:
|
||||
- WHISPER_MODEL=medium
|
||||
- DEVICE=cuda
|
||||
# - WHISPER_MODEL=medium
|
||||
# - DEVICE=cpu
|
||||
# GPU support commented out for stability if drivers missing
|
||||
- DEVICE=cpu
|
||||
# GPU support for RTX 2070 Super
|
||||
deploy:
|
||||
resources:
|
||||
reservations:
|
||||
devices:
|
||||
- driver: nvidia
|
||||
count: 1
|
||||
capabilities: [ gpu ]
|
||||
# deploy:
|
||||
# resources:
|
||||
# reservations:
|
||||
# devices:
|
||||
# - driver: nvidia
|
||||
# count: 1
|
||||
# capabilities: [ gpu ]
|
||||
|
||||
e2e:
|
||||
build:
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
target
|
||||
**/*.rs.bk
|
||||
.env
|
||||
.env.*
|
||||
! .env.example
|
||||
@@ -0,0 +1,2 @@
|
||||
-- Migration: Add domain to organizations
|
||||
ALTER TABLE organizations ADD COLUMN IF NOT EXISTS domain VARCHAR(255) UNIQUE;
|
||||
@@ -1474,3 +1474,50 @@ pub async fn update_user(
|
||||
|
||||
Ok(StatusCode::OK)
|
||||
}
|
||||
|
||||
// Organizations Management (Plural/Admin)
|
||||
pub async fn get_organizations(
|
||||
claims: common::auth::Claims,
|
||||
State(pool): State<PgPool>,
|
||||
) -> Result<Json<Vec<Organization>>, StatusCode> {
|
||||
if claims.role != "admin" {
|
||||
return Err(StatusCode::FORBIDDEN);
|
||||
}
|
||||
|
||||
let orgs = sqlx::query_as::<_, Organization>("SELECT * FROM organizations ORDER BY created_at DESC")
|
||||
.fetch_all(&pool)
|
||||
.await
|
||||
.map_err(|e| {
|
||||
tracing::error!("Failed to fetch organizations: {}", e);
|
||||
StatusCode::INTERNAL_SERVER_ERROR
|
||||
})?;
|
||||
|
||||
Ok(Json(orgs))
|
||||
}
|
||||
|
||||
pub async fn create_organization(
|
||||
claims: common::auth::Claims,
|
||||
State(pool): State<PgPool>,
|
||||
Json(payload): Json<serde_json::Value>,
|
||||
) -> Result<Json<Organization>, StatusCode> {
|
||||
if claims.role != "admin" {
|
||||
return Err(StatusCode::FORBIDDEN);
|
||||
}
|
||||
|
||||
let name = payload.get("name").and_then(|v| v.as_str()).ok_or(StatusCode::BAD_REQUEST)?;
|
||||
let domain = payload.get("domain").and_then(|v| v.as_str());
|
||||
|
||||
let org = sqlx::query_as::<_, Organization>(
|
||||
"INSERT INTO organizations (name, domain) VALUES ($1, $2) RETURNING *"
|
||||
)
|
||||
.bind(name)
|
||||
.bind(domain)
|
||||
.fetch_one(&pool)
|
||||
.await
|
||||
.map_err(|e| {
|
||||
tracing::error!("Failed to create organization: {}", e);
|
||||
StatusCode::INTERNAL_SERVER_ERROR
|
||||
})?;
|
||||
|
||||
Ok(Json(org))
|
||||
}
|
||||
|
||||
@@ -86,6 +86,7 @@ async fn main() {
|
||||
.route("/users/{id}", axum::routing::put(handlers::update_user))
|
||||
.route("/audit-logs", get(handlers::get_audit_logs))
|
||||
.route("/assets/upload", post(handlers::upload_asset))
|
||||
.route("/organizations", get(handlers::get_organizations).post(handlers::create_organization))
|
||||
.route("/organization", get(handlers::get_organization))
|
||||
.route(
|
||||
"/organizations/{id}/logo",
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
target
|
||||
**/*.rs.bk
|
||||
.env
|
||||
.env.*
|
||||
! .env.example
|
||||
@@ -101,6 +101,7 @@ pub async fn register(
|
||||
email: user.email,
|
||||
full_name: user.full_name,
|
||||
role: user.role,
|
||||
organization_id: user.organization_id,
|
||||
},
|
||||
token,
|
||||
}))
|
||||
@@ -129,6 +130,7 @@ pub async fn login(
|
||||
email: user.email,
|
||||
full_name: user.full_name,
|
||||
role: user.role,
|
||||
organization_id: user.organization_id,
|
||||
},
|
||||
token,
|
||||
}))
|
||||
|
||||
@@ -24,5 +24,6 @@ pub fn create_jwt(user_id: Uuid, organization_id: Uuid, role: &str) -> Result<St
|
||||
role: role.to_string(),
|
||||
};
|
||||
|
||||
encode(&Header::default(), &claims, &EncodingKey::from_secret("secret".as_ref()))
|
||||
let secret = std::env::var("JWT_SECRET").unwrap_or_else(|_| "secret".to_string());
|
||||
encode(&Header::default(), &claims, &EncodingKey::from_secret(secret.as_ref()))
|
||||
}
|
||||
|
||||
@@ -138,6 +138,7 @@ pub struct UserResponse {
|
||||
pub struct Organization {
|
||||
pub id: Uuid,
|
||||
pub name: String,
|
||||
pub domain: Option<String>,
|
||||
pub logo_url: Option<String>,
|
||||
pub primary_color: Option<String>,
|
||||
pub secondary_color: Option<String>,
|
||||
|
||||
Executable
+38
@@ -0,0 +1,38 @@
|
||||
#!/bin/bash
|
||||
# 1. Verify Juan Login
|
||||
echo "Testing Login for juan.allende@gmail.com..."
|
||||
HTTP_CODE=$(curl -s -o /dev/null -w "%{http_code}" -X POST http://localhost:3001/auth/login \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"email":"juan.allende@gmail.com","password":"password123"}')
|
||||
|
||||
if [ "$HTTP_CODE" -eq 200 ]; then
|
||||
echo "SUCCESS: Login worked for juan.allende@gmail.com with password123"
|
||||
else
|
||||
echo "FAIL: Login failed with status $HTTP_CODE"
|
||||
# Print body for debugging
|
||||
curl -s -X POST http://localhost:3001/auth/login \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"email":"juan.allende@gmail.com","password":"password123"}'
|
||||
echo ""
|
||||
fi
|
||||
|
||||
# 2. Verify New Registration
|
||||
echo "Testing Registration for newuser@test.com..."
|
||||
# Clear if exists
|
||||
docker exec openccb-1-db-1 psql -U user -d openccb_cms -c "DELETE FROM users WHERE email='newuser@test.com';" > /dev/null 2>&1
|
||||
|
||||
HTTP_CODE=$(curl -s -o /dev/null -w "%{http_code}" -X POST http://localhost:3001/auth/register \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"email":"newuser@test.com","password":"password123","full_name":"New User","role":"instructor"}')
|
||||
|
||||
if [ "$HTTP_CODE" -eq 200 ]; then
|
||||
echo "SUCCESS: Registration worked for newuser@test.com"
|
||||
# Cleanup
|
||||
docker exec openccb-1-db-1 psql -U user -d openccb_cms -c "DELETE FROM users WHERE email='newuser@test.com';" > /dev/null 2>&1
|
||||
else
|
||||
echo "FAIL: Registration failed with status $HTTP_CODE"
|
||||
curl -s -X POST http://localhost:3001/auth/register \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"email":"newuser@test.com","password":"password123","full_name":"New User","role":"instructor"}'
|
||||
echo ""
|
||||
fi
|
||||
@@ -0,0 +1,10 @@
|
||||
node_modules
|
||||
.next
|
||||
build
|
||||
dist
|
||||
.git
|
||||
.env
|
||||
.env.local
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
Generated
-12
@@ -521,7 +521,6 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.27.tgz",
|
||||
"integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@types/prop-types": "*",
|
||||
"csstype": "^3.2.2"
|
||||
@@ -578,7 +577,6 @@
|
||||
"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",
|
||||
@@ -1053,7 +1051,6 @@
|
||||
"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"
|
||||
},
|
||||
@@ -1454,7 +1451,6 @@
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"baseline-browser-mapping": "^2.9.0",
|
||||
"caniuse-lite": "^1.0.30001759",
|
||||
@@ -2060,7 +2056,6 @@
|
||||
"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",
|
||||
@@ -2223,7 +2218,6 @@
|
||||
"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",
|
||||
@@ -3520,7 +3514,6 @@
|
||||
"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"
|
||||
}
|
||||
@@ -4233,7 +4226,6 @@
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.11",
|
||||
"picocolors": "^1.1.1",
|
||||
@@ -4424,7 +4416,6 @@
|
||||
"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"
|
||||
},
|
||||
@@ -4436,7 +4427,6 @@
|
||||
"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"
|
||||
@@ -5277,7 +5267,6 @@
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
|
||||
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
@@ -5435,7 +5424,6 @@
|
||||
"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"
|
||||
|
||||
@@ -3,7 +3,7 @@ import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import Link from "next/link";
|
||||
import { AuthProvider } from "@/context/AuthContext";
|
||||
import { BrandingProvider, useBranding } from "@/context/BrandingContext";
|
||||
import { BrandingProvider } from "@/context/BrandingContext";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
@@ -12,35 +12,7 @@ export const metadata: Metadata = {
|
||||
description: "Consume high-fidelity educational content with OpenCCB",
|
||||
};
|
||||
|
||||
function AppHeader() {
|
||||
const { branding } = useBranding();
|
||||
|
||||
return (
|
||||
<header className="h-16 glass sticky top-0 z-50 px-6 flex items-center justify-between backdrop-blur-xl bg-black/40 border-b border-white/5">
|
||||
<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-all overflow-hidden relative">
|
||||
{branding?.logo_url ? (
|
||||
<img src={branding.logo_url} alt={branding.name} className="w-full h-full object-contain" />
|
||||
) : (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-blue-500 to-blue-700">L</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col -gap-1">
|
||||
<span className="font-black text-lg tracking-tighter text-white leading-none">
|
||||
{branding?.name?.toUpperCase() || 'LEARN'}
|
||||
</span>
|
||||
{!branding && <span className="text-[10px] font-black tracking-widest text-blue-500 uppercase">EXPERIENCE</span>}
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<nav className="hidden md:flex items-center gap-8">
|
||||
<Link href="/" className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-400 hover:text-white transition-colors">Catalog</Link>
|
||||
<Link href="#" className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-400 hover:text-white transition-colors">My Learning</Link>
|
||||
<div className="w-8 h-8 rounded-full bg-white/5 border border-white/10" />
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
import AppHeader from "@/components/AppHeader";
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
'use client';
|
||||
|
||||
import Link from "next/link";
|
||||
import { useBranding } from "@/context/BrandingContext";
|
||||
|
||||
export default function AppHeader() {
|
||||
const { branding } = useBranding();
|
||||
|
||||
return (
|
||||
<header className="h-16 glass sticky top-0 z-50 px-6 flex items-center justify-between backdrop-blur-xl bg-black/40 border-b border-white/5">
|
||||
<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-all overflow-hidden relative">
|
||||
{branding?.logo_url ? (
|
||||
<img src={branding.logo_url} alt={branding.name} className="w-full h-full object-contain" />
|
||||
) : (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-blue-500 to-blue-700">L</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col -gap-1">
|
||||
<span className="font-black text-lg tracking-tighter text-white leading-none">
|
||||
{branding?.name?.toUpperCase() || 'LEARN'}
|
||||
</span>
|
||||
{!branding && <span className="text-[10px] font-black tracking-widest text-blue-500 uppercase">EXPERIENCE</span>}
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<nav className="hidden md:flex items-center gap-8">
|
||||
<Link href="/" className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-400 hover:text-white transition-colors">Catalog</Link>
|
||||
<Link href="#" className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-400 hover:text-white transition-colors">My Learning</Link>
|
||||
<div className="w-8 h-8 rounded-full bg-white/5 border border-white/10" />
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,24 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
output: 'standalone',
|
||||
images: {
|
||||
remotePatterns: [
|
||||
{
|
||||
protocol: 'http',
|
||||
hostname: 'localhost',
|
||||
port: '3001',
|
||||
pathname: '/uploads/**',
|
||||
},
|
||||
],
|
||||
},
|
||||
async rewrites() {
|
||||
return [
|
||||
{
|
||||
source: '/uploads/:path*',
|
||||
destination: 'http://localhost:3001/uploads/:path*',
|
||||
},
|
||||
];
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
|
||||
Generated
+1
-13
@@ -545,7 +545,6 @@
|
||||
"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,7 +606,6 @@
|
||||
"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",
|
||||
@@ -1082,7 +1080,6 @@
|
||||
"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"
|
||||
},
|
||||
@@ -2003,7 +2000,6 @@
|
||||
"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",
|
||||
@@ -2166,7 +2162,6 @@
|
||||
"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",
|
||||
@@ -3450,7 +3445,6 @@
|
||||
"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"
|
||||
}
|
||||
@@ -4157,7 +4151,6 @@
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.11",
|
||||
"picocolors": "^1.1.1",
|
||||
@@ -4353,7 +4346,6 @@
|
||||
"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"
|
||||
},
|
||||
@@ -4365,7 +4357,6 @@
|
||||
"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"
|
||||
@@ -4426,8 +4417,7 @@
|
||||
"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==",
|
||||
"peer": true
|
||||
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="
|
||||
},
|
||||
"node_modules/reflect.getprototypeof": {
|
||||
"version": "1.0.10",
|
||||
@@ -5239,7 +5229,6 @@
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
|
||||
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
@@ -5397,7 +5386,6 @@
|
||||
"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,77 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { cmsApi, Organization } from "@/lib/api";
|
||||
import { Building2, Calendar, Hash } from "lucide-react";
|
||||
|
||||
export default function OrganizationPage() {
|
||||
const [org, setOrg] = useState<Organization | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchOrg = async () => {
|
||||
try {
|
||||
const data = await cmsApi.getOrganization();
|
||||
setOrg(data);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to load organization");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchOrg();
|
||||
}, []);
|
||||
|
||||
if (loading) return <div className="p-8 text-center text-gray-500">Loading organization details...</div>;
|
||||
if (error) return <div className="p-8 text-center text-red-500 font-bold">Error: {error}</div>;
|
||||
|
||||
return (
|
||||
<div className="p-8 max-w-5xl mx-auto space-y-8">
|
||||
<header>
|
||||
<h1 className="text-3xl font-black tracking-tighter text-white mb-2">Organization Settings</h1>
|
||||
<p className="text-gray-400">Manage your organization's profile and settings.</p>
|
||||
</header>
|
||||
|
||||
{org && (
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="glass-card p-6 space-y-4">
|
||||
<div className="flex items-center gap-3 text-blue-400 mb-2">
|
||||
<Building2 size={24} />
|
||||
<h2 className="text-xl font-bold text-white">Profile</h2>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] uppercase font-black tracking-widest text-gray-500">Organization Name</label>
|
||||
<div className="text-lg font-medium text-white">{org.name}</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] uppercase font-black tracking-widest text-gray-500">Organization ID</label>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-400 font-mono bg-black/20 p-2 rounded border border-white/5">
|
||||
<Hash size={14} />
|
||||
{org.id}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] uppercase font-black tracking-widest text-gray-500">Created At</label>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-400">
|
||||
<Calendar size={14} />
|
||||
{new Date(org.created_at).toLocaleDateString()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="glass-card p-6 flex items-center justify-center text-center text-gray-500">
|
||||
<div>
|
||||
<p className="mb-2 font-bold">More settings coming soon</p>
|
||||
<p className="text-xs">User management and billing features are under development.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -3,6 +3,7 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { cmsApi, Organization } from '@/lib/api';
|
||||
import { useAuth } from '@/context/AuthContext';
|
||||
import Image from 'next/image';
|
||||
import { Plus, Building2, Globe, Calendar, ExternalLink, ShieldCheck, Palette, Upload, Save, X } from 'lucide-react';
|
||||
|
||||
export default function OrganizationsPage() {
|
||||
@@ -141,9 +142,9 @@ export default function OrganizationsPage() {
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 mb-4">
|
||||
<div className="p-3 rounded-lg bg-blue-500/10 text-blue-400 overflow-hidden w-12 h-12 flex items-center justify-center">
|
||||
<div className="p-3 rounded-lg bg-blue-500/10 text-blue-400 overflow-hidden w-12 h-12 flex items-center justify-center relative">
|
||||
{org.logo_url ? (
|
||||
<img src={org.logo_url} alt={org.name} className="w-full h-full object-contain" />
|
||||
<Image src={org.logo_url} alt={org.name} fill className="object-contain" />
|
||||
) : (
|
||||
<Building2 className="w-6 h-6" />
|
||||
)}
|
||||
@@ -256,9 +257,9 @@ export default function OrganizationsPage() {
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-3 text-brand">Organization Logo</label>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-20 h-20 rounded-xl bg-black/40 border border-white/10 flex items-center justify-center overflow-hidden">
|
||||
<div className="w-20 h-20 rounded-xl bg-black/40 border border-white/10 flex items-center justify-center overflow-hidden relative">
|
||||
{selectedOrg.logo_url ? (
|
||||
<img src={selectedOrg.logo_url} alt="Preview" className="w-full h-full object-contain" />
|
||||
<Image src={selectedOrg.logo_url} alt="Preview" fill className="object-contain" />
|
||||
) : (
|
||||
<Building2 className="w-8 h-8 text-gray-600" />
|
||||
)}
|
||||
@@ -320,9 +321,9 @@ export default function OrganizationsPage() {
|
||||
{/* Mock Experience Header */}
|
||||
<div className="h-10 px-4 flex items-center justify-between border-b border-white/5" style={{ backgroundColor: primaryColor }}>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-5 h-5 bg-white/20 rounded flex items-center justify-center overflow-hidden">
|
||||
<div className="w-5 h-5 bg-white/20 rounded flex items-center justify-center overflow-hidden relative">
|
||||
{selectedOrg.logo_url ? (
|
||||
<img src={selectedOrg.logo_url} alt="Logo" className="w-full h-full object-contain" />
|
||||
<Image src={selectedOrg.logo_url} alt="Logo" fill className="object-contain" />
|
||||
) : <div className="w-3 h-3 bg-white" />}
|
||||
</div>
|
||||
<div className="w-16 h-2 bg-white/30 rounded" />
|
||||
@@ -366,7 +367,7 @@ export default function OrganizationsPage() {
|
||||
<button
|
||||
onClick={handleBrandingSave}
|
||||
disabled={isSavingBranding}
|
||||
className="flex-2 px-8 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl transition-all shadow-lg shadow-blue-500/20 font-bold flex items-center justify-center gap-2"
|
||||
className="flex-[2] px-8 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl transition-all shadow-lg shadow-blue-500/20 font-bold flex items-center justify-center gap-2"
|
||||
>
|
||||
{isSavingBranding ? <div className="w-5 h-5 border-2 border-white/20 border-t-white rounded-full animate-spin" /> : <Save className="w-5 h-5" />}
|
||||
Save Branding
|
||||
|
||||
@@ -100,6 +100,7 @@ export default function StudioLoginPage() {
|
||||
onChange={(e) => setFullName(e.target.value)}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl py-3 pl-11 pr-4 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="John Doe"
|
||||
autoComplete="name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
@@ -116,6 +117,7 @@ export default function StudioLoginPage() {
|
||||
onChange={(e) => setOrganizationName(e.target.value)}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl py-3 pl-11 pr-4 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="Your School or Company"
|
||||
autoComplete="organization"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-2 pl-1">
|
||||
@@ -137,6 +139,7 @@ export default function StudioLoginPage() {
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl py-3 pl-11 pr-4 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="instructor@example.com"
|
||||
autoComplete="email"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
@@ -154,6 +157,7 @@ export default function StudioLoginPage() {
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl py-3 pl-11 pr-4 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="••••••••"
|
||||
autoComplete="current-password"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { cmsApi, Course, CourseAnalytics } from "@/lib/api";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import {
|
||||
@@ -13,6 +14,7 @@ import {
|
||||
CheckCircle2,
|
||||
BookOpen
|
||||
} from "lucide-react";
|
||||
import CourseEditorLayout from "@/components/CourseEditorLayout";
|
||||
|
||||
export default function AnalyticsPage() {
|
||||
const { id } = useParams() as { id: string };
|
||||
@@ -97,114 +99,133 @@ export default function AnalyticsPage() {
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-7xl mx-auto px-8 mt-12 space-y-12">
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="bg-white/5 border border-white/10 rounded-3xl p-8 group hover:bg-white/[0.07] transition-all">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-12 h-12 rounded-2xl bg-blue-500/10 flex items-center justify-center text-blue-400">
|
||||
<Users size={24} />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-gray-400 uppercase tracking-widest">Enrollments</span>
|
||||
</div>
|
||||
<div className="text-4xl font-black">{analytics.total_enrollments}</div>
|
||||
<div className="text-xs text-green-400 font-bold mt-2">Active Learners</div>
|
||||
</div>
|
||||
<main className="max-w-7xl mx-auto px-8 mt-12 space-y-8">
|
||||
<div className="flex items-center gap-4 text-sm text-gray-400">
|
||||
<Link href="/" className="hover:text-white transition-colors">Courses</Link>
|
||||
<span>/</span>
|
||||
<span className="text-white">{course?.title}</span>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/5 border border-white/10 rounded-3xl p-8 group hover:bg-white/[0.07] transition-all">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-12 h-12 rounded-2xl bg-purple-500/10 flex items-center justify-center text-purple-400">
|
||||
<TrendingUp size={24} />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-gray-400 uppercase tracking-widest">Average Score</span>
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold">{course?.title}</h2>
|
||||
<div className="flex items-center gap-3 mt-1">
|
||||
<span className="text-gray-400 text-sm">Performance Insights</span>
|
||||
</div>
|
||||
<div className="text-4xl font-black">{Math.round(analytics.average_score * 100)}%</div>
|
||||
<div className="text-xs text-gray-500 font-bold mt-2">Across all assessments</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/5 border border-white/10 rounded-3xl p-8 group hover:bg-white/[0.07] transition-all">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-12 h-12 rounded-2xl bg-orange-500/10 flex items-center justify-center text-orange-400">
|
||||
<AlertTriangle size={24} />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-gray-400 uppercase tracking-widest">Attention Needed</span>
|
||||
</div>
|
||||
<div className="text-4xl font-black">{difficultLessons.length}</div>
|
||||
<div className="text-xs text-orange-400 font-bold mt-2">Struggling Lessons</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
{/* Lesson Breakdown */}
|
||||
<section>
|
||||
<h2 className="text-2xl font-black mb-6 flex items-center gap-3">
|
||||
<BarChart3 className="text-blue-500" />
|
||||
Lesson Performance
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{analytics.lessons.map((lesson) => (
|
||||
<div key={lesson.lesson_id} className="bg-white/5 border border-white/10 rounded-2xl p-6 hover:bg-white/[0.07] transition-all">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<h3 className="font-bold">{lesson.lesson_title}</h3>
|
||||
<p className="text-xs text-gray-500 mt-1">{lesson.submission_count} submissions</p>
|
||||
</div>
|
||||
<div className={`text-xl font-black ${lesson.average_score < 0.6 ? 'text-red-400' : lesson.average_score < 0.8 ? 'text-orange-400' : 'text-green-400'}`}>
|
||||
{Math.round(lesson.average_score * 100)}%
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-1.5 bg-white/5 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full rounded-full transition-all duration-1000 ${lesson.average_score < 0.6 ? 'bg-red-500' : lesson.average_score < 0.8 ? 'bg-orange-500' : 'bg-green-500'}`}
|
||||
style={{ width: `${lesson.average_score * 100}%` }}
|
||||
/>
|
||||
<CourseEditorLayout activeTab="analytics">
|
||||
<div className="p-8 space-y-12">
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="bg-white/5 border border-white/10 rounded-3xl p-8 group hover:bg-white/[0.07] transition-all">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-12 h-12 rounded-2xl bg-blue-500/10 flex items-center justify-center text-blue-400">
|
||||
<Users size={24} />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-gray-400 uppercase tracking-widest">Enrollments</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
<div className="text-4xl font-black">{analytics.total_enrollments}</div>
|
||||
<div className="text-xs text-green-400 font-bold mt-2">Active Learners</div>
|
||||
</div>
|
||||
|
||||
{/* Actionable Insights */}
|
||||
<section className="space-y-8">
|
||||
<div>
|
||||
<h2 className="text-2xl font-black mb-6 flex items-center gap-3">
|
||||
<AlertTriangle className="text-orange-500" />
|
||||
Struggling Lessons
|
||||
</h2>
|
||||
{difficultLessons.length > 0 ? (
|
||||
<div className="bg-white/5 border border-white/10 rounded-3xl p-8 group hover:bg-white/[0.07] transition-all">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-12 h-12 rounded-2xl bg-purple-500/10 flex items-center justify-center text-purple-400">
|
||||
<TrendingUp size={24} />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-gray-400 uppercase tracking-widest">Average Score</span>
|
||||
</div>
|
||||
<div className="text-4xl font-black">{Math.round(analytics.average_score * 100)}%</div>
|
||||
<div className="text-xs text-gray-500 font-bold mt-2">Across all assessments</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/5 border border-white/10 rounded-3xl p-8 group hover:bg-white/[0.07] transition-all">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-12 h-12 rounded-2xl bg-orange-500/10 flex items-center justify-center text-orange-400">
|
||||
<AlertTriangle size={24} />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-gray-400 uppercase tracking-widest">Attention Needed</span>
|
||||
</div>
|
||||
<div className="text-4xl font-black">{difficultLessons.length}</div>
|
||||
<div className="text-xs text-orange-400 font-bold mt-2">Struggling Lessons</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
{/* Lesson Breakdown */}
|
||||
<section>
|
||||
<h2 className="text-2xl font-black mb-6 flex items-center gap-3">
|
||||
<BarChart3 className="text-blue-500" />
|
||||
Lesson Performance
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{difficultLessons.map(l => (
|
||||
<div key={l.lesson_id} className="bg-red-500/10 border border-red-500/20 rounded-2xl p-6 flex items-center justify-between">
|
||||
<div>
|
||||
<h4 className="font-bold text-red-400">{l.lesson_title}</h4>
|
||||
<p className="text-xs text-red-300/60 mt-1 text-balance max-w-xs">
|
||||
Average score is below 70%. Consider reviewing the material or difficulty of questions.
|
||||
</p>
|
||||
{analytics.lessons.map((lesson) => (
|
||||
<div key={lesson.lesson_id} className="bg-white/5 border border-white/10 rounded-2xl p-6 hover:bg-white/[0.07] transition-all">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<h3 className="font-bold">{lesson.lesson_title}</h3>
|
||||
<p className="text-xs text-gray-500 mt-1">{lesson.submission_count} submissions</p>
|
||||
</div>
|
||||
<div className={`text-xl font-black ${lesson.average_score < 0.6 ? 'text-red-400' : lesson.average_score < 0.8 ? 'text-orange-400' : 'text-green-400'}`}>
|
||||
{Math.round(lesson.average_score * 100)}%
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-1.5 bg-white/5 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full rounded-full transition-all duration-1000 ${lesson.average_score < 0.6 ? 'bg-red-500' : lesson.average_score < 0.8 ? 'bg-orange-500' : 'bg-green-500'}`}
|
||||
style={{ width: `${lesson.average_score * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-2xl font-black text-red-500">{Math.round(l.average_score * 100)}%</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-green-500/10 border border-green-500/20 rounded-2xl p-8 text-center">
|
||||
<CheckCircle2 size={40} className="text-green-500 mx-auto mb-4" />
|
||||
<h4 className="font-bold text-green-400">All set!</h4>
|
||||
<p className="text-sm text-green-300/60 mt-2">No lessons currently fall below the difficulty threshold.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="bg-blue-600/10 border border-blue-500/20 rounded-3xl p-8">
|
||||
<h3 className="text-lg font-bold mb-4 flex items-center gap-2">
|
||||
<BookOpen className="text-blue-400" />
|
||||
Content Strategy Tip
|
||||
</h3>
|
||||
<p className="text-sm text-blue-200/70 leading-relaxed">
|
||||
High submission counts with low average scores often indicate that the assessment might be misleading or the prerequisites aren't clearly explained in previous lessons.
|
||||
</p>
|
||||
{/* Actionable Insights */}
|
||||
<section className="space-y-8">
|
||||
<div>
|
||||
<h2 className="text-2xl font-black mb-6 flex items-center gap-3">
|
||||
<AlertTriangle className="text-orange-500" />
|
||||
Struggling Lessons
|
||||
</h2>
|
||||
{difficultLessons.length > 0 ? (
|
||||
<div className="space-y-4">
|
||||
{difficultLessons.map(l => (
|
||||
<div key={l.lesson_id} className="bg-red-500/10 border border-red-500/20 rounded-2xl p-6 flex items-center justify-between">
|
||||
<div>
|
||||
<h4 className="font-bold text-red-400">{l.lesson_title}</h4>
|
||||
<p className="text-xs text-red-300/60 mt-1 text-balance max-w-xs">
|
||||
Average score is below 70%. Consider reviewing the material or difficulty of questions.
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-2xl font-black text-red-500">{Math.round(l.average_score * 100)}%</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-green-500/10 border border-green-500/20 rounded-2xl p-8 text-center">
|
||||
<CheckCircle2 size={40} className="text-green-500 mx-auto mb-4" />
|
||||
<h4 className="font-bold text-green-400">All set!</h4>
|
||||
<p className="text-sm text-green-300/60 mt-2">No lessons currently fall below the difficulty threshold.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="bg-blue-600/10 border border-blue-500/20 rounded-3xl p-8">
|
||||
<h3 className="text-lg font-bold mb-4 flex items-center gap-2">
|
||||
<BookOpen className="text-blue-400" />
|
||||
Content Strategy Tip
|
||||
</h3>
|
||||
<p className="text-sm text-blue-200/70 leading-relaxed">
|
||||
High submission counts with low average scores often indicate that the assessment might be misleading or the prerequisites aren't clearly explained in previous lessons.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</CourseEditorLayout>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -7,14 +7,13 @@ import {
|
||||
Calendar as CalendarIcon,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Plus,
|
||||
Layout,
|
||||
CheckCircle2,
|
||||
BarChart2,
|
||||
Settings,
|
||||
Clock,
|
||||
AlertCircle
|
||||
} from "lucide-react";
|
||||
import CourseEditorLayout from "@/components/CourseEditorLayout";
|
||||
|
||||
export default function CourseCalendarPage({ params }: { params: { id: string } }) {
|
||||
const [course, setCourse] = useState<Course | null>(null);
|
||||
@@ -73,9 +72,9 @@ export default function CourseCalendarPage({ params }: { params: { id: string }
|
||||
<div
|
||||
key={lesson.id}
|
||||
className={`text-[10px] p-1 rounded truncate flex items-center gap-1 ${lesson.important_date_type === 'exam' ? 'bg-red-500/20 text-red-400 border border-red-500/30' :
|
||||
lesson.important_date_type === 'assignment' ? 'bg-blue-500/20 text-blue-400 border border-blue-500/30' :
|
||||
lesson.important_date_type === 'live-session' ? 'bg-purple-500/20 text-purple-400 border border-purple-500/30' :
|
||||
'bg-green-500/20 text-green-400 border border-green-500/30'
|
||||
lesson.important_date_type === 'assignment' ? 'bg-blue-500/20 text-blue-400 border border-blue-500/30' :
|
||||
lesson.important_date_type === 'live-session' ? 'bg-purple-500/20 text-purple-400 border border-purple-500/30' :
|
||||
'bg-green-500/20 text-green-400 border border-green-500/30'
|
||||
}`}
|
||||
>
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-current"></span>
|
||||
@@ -121,25 +120,7 @@ export default function CourseCalendarPage({ params }: { params: { id: string }
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="glass p-1">
|
||||
<div className="flex border-b border-white/10">
|
||||
<Link href={`/courses/${params.id}`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium text-gray-500 hover:text-white transition-colors">
|
||||
<Layout className="w-4 h-4" /> Outline
|
||||
</Link>
|
||||
<Link href={`/courses/${params.id}/grading`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium text-gray-500 hover:text-white transition-colors">
|
||||
<CheckCircle2 className="w-4 h-4" /> Grading
|
||||
</Link>
|
||||
<Link href={`/courses/${params.id}/calendar`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium border-b-2 border-blue-500 bg-white/5">
|
||||
<CalendarIcon className="w-4 h-4" /> Calendar
|
||||
</Link>
|
||||
<Link href={`/courses/${params.id}/analytics`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium text-gray-500 hover:text-white transition-colors">
|
||||
<BarChart2 className="w-4 h-4" /> Analytics
|
||||
</Link>
|
||||
<Link href={`/courses/${params.id}/settings`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium text-gray-500 hover:text-white transition-colors">
|
||||
<Settings className="w-4 h-4" /> Settings
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<CourseEditorLayout activeTab="calendar">
|
||||
<div className="p-8">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div className="flex items-center gap-6">
|
||||
@@ -191,8 +172,8 @@ export default function CourseCalendarPage({ params }: { params: { id: string }
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<div className={`text-[10px] font-black uppercase tracking-widest mb-1 ${lesson.important_date_type === 'exam' ? 'text-red-400' :
|
||||
lesson.important_date_type === 'assignment' ? 'text-blue-400' :
|
||||
'text-green-400'
|
||||
lesson.important_date_type === 'assignment' ? 'text-blue-400' :
|
||||
'text-green-400'
|
||||
}`}>
|
||||
{lesson.important_date_type || 'Activity'}
|
||||
</div>
|
||||
@@ -209,7 +190,7 @@ export default function CourseCalendarPage({ params }: { params: { id: string }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CourseEditorLayout>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { cmsApi, GradingCategory, Course } from "@/lib/api";
|
||||
import { cmsApi, GradingCategory } from "@/lib/api";
|
||||
import {
|
||||
Plus,
|
||||
Trash2,
|
||||
@@ -19,6 +19,7 @@ import {
|
||||
import Link from "next/link";
|
||||
import { clsx, type ClassValue } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import CourseEditorLayout from "@/components/CourseEditorLayout";
|
||||
|
||||
function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
@@ -113,126 +114,110 @@ export default function GradingPolicyPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="glass p-1 mb-12">
|
||||
<div className="flex border-b border-white/10">
|
||||
<Link href={`/courses/${id}`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium text-gray-500 hover:text-white transition-colors">
|
||||
<Layout className="w-4 h-4" /> Outline
|
||||
</Link>
|
||||
<Link href={`/courses/${id}/grading`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium border-b-2 border-blue-500 bg-white/5">
|
||||
<CheckCircle2 className="w-4 h-4" /> Grading
|
||||
</Link>
|
||||
<Link href={`/courses/${id}/calendar`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium text-gray-500 hover:text-white transition-colors">
|
||||
<Calendar className="w-4 h-4" /> Calendar
|
||||
</Link>
|
||||
<Link href={`/courses/${id}/analytics`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium text-gray-500 hover:text-white transition-colors">
|
||||
<BarChart2 className="w-4 h-4" /> Analytics
|
||||
</Link>
|
||||
<Link href={`/courses/${id}/settings`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium text-gray-500 hover:text-white transition-colors">
|
||||
<Settings className="w-4 h-4" /> Settings
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<CourseEditorLayout activeTab="grading">
|
||||
<div className="p-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Categories List */}
|
||||
<div className="lg:col-span-2 space-y-4">
|
||||
<h2 className="text-sm font-semibold uppercase tracking-wider text-gray-500 mb-6 flex items-center gap-2">
|
||||
<Settings className="w-4 h-4" /> Assessment Categories
|
||||
</h2>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Categories List */}
|
||||
<div className="lg:col-span-2 space-y-4">
|
||||
<h2 className="text-sm font-semibold uppercase tracking-wider text-gray-500 mb-6 flex items-center gap-2">
|
||||
<Settings className="w-4 h-4" /> Assessment Categories
|
||||
</h2>
|
||||
|
||||
{categories.length === 0 ? (
|
||||
<div className="bg-white/5 border border-white/10 rounded-2xl p-12 text-center">
|
||||
<TrendingUp className="w-12 h-12 text-gray-600 mx-auto mb-4" />
|
||||
<p className="text-gray-400 italic">No grading categories defined yet.</p>
|
||||
</div>
|
||||
) : (
|
||||
categories.map((cat) => (
|
||||
<div
|
||||
key={cat.id}
|
||||
className="group bg-white/5 border border-white/10 p-6 rounded-2xl flex items-center justify-between hover:border-blue-500/50 hover:bg-white/[0.07] transition-all duration-300"
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center text-blue-400 font-bold group-hover:scale-110 transition-transform">
|
||||
{cat.weight}%
|
||||
{categories.length === 0 ? (
|
||||
<div className="bg-white/5 border border-white/10 rounded-2xl p-12 text-center">
|
||||
<TrendingUp className="w-12 h-12 text-gray-600 mx-auto mb-4" />
|
||||
<p className="text-gray-400 italic">No grading categories defined yet.</p>
|
||||
</div>
|
||||
) : (
|
||||
categories.map((cat) => (
|
||||
<div
|
||||
key={cat.id}
|
||||
className="group bg-white/5 border border-white/10 p-6 rounded-2xl flex items-center justify-between hover:border-blue-500/50 hover:bg-white/[0.07] transition-all duration-300"
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center text-blue-400 font-bold group-hover:scale-110 transition-transform">
|
||||
{cat.weight}%
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-100">{cat.name}</h3>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<span className="text-xs text-gray-500 bg-white/5 px-2 py-0.5 rounded-full capitalize">
|
||||
Weight: {cat.weight}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleDelete(cat.id)}
|
||||
className="p-3 bg-red-500/10 text-red-400 rounded-xl opacity-0 group-hover:opacity-100 hover:bg-red-500 hover:text-white transition-all duration-300"
|
||||
>
|
||||
<Trash2 className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Add New Category Form */}
|
||||
<div className="space-y-6">
|
||||
<div className="bg-gradient-to-br from-gray-800/50 to-gray-900/50 p-8 rounded-3xl border border-white/10 sticky top-8">
|
||||
<h2 className="text-xl font-bold mb-6 flex items-center gap-2">
|
||||
<Plus className="w-5 h-5 text-blue-400" /> New Format
|
||||
</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-100">{cat.name}</h3>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<span className="text-xs text-gray-500 bg-white/5 px-2 py-0.5 rounded-full capitalize">
|
||||
Weight: {cat.weight}%
|
||||
</span>
|
||||
<label className="text-xs font-semibold text-gray-400 uppercase tracking-widest ml-1">Type Name</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="e.g. Quizzes, Final Exam"
|
||||
value={newName}
|
||||
onChange={(e) => setNewName(e.target.value)}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 mt-1.5 focus:outline-none focus:border-blue-500 transition-all text-gray-100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-xs font-semibold text-gray-400 uppercase tracking-widest ml-1">Weight (%)</label>
|
||||
<div className="relative mt-1.5">
|
||||
<input
|
||||
type="number"
|
||||
placeholder="20"
|
||||
value={newWeight || ""}
|
||||
onChange={(e) => setNewWeight(parseInt(e.target.value) || 0)}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-blue-500 transition-all text-gray-100 pl-10"
|
||||
/>
|
||||
<Percent className="w-4 h-4 text-gray-500 absolute left-4 top-1/2 -translate-y-1/2" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleDelete(cat.id)}
|
||||
className="p-3 bg-red-500/10 text-red-400 rounded-xl opacity-0 group-hover:opacity-100 hover:bg-red-500 hover:text-white transition-all duration-300"
|
||||
>
|
||||
<Trash2 className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Add New Category Form */}
|
||||
<div className="space-y-6">
|
||||
<div className="bg-gradient-to-br from-gray-800/50 to-gray-900/50 p-8 rounded-3xl border border-white/10 sticky top-8">
|
||||
<h2 className="text-xl font-bold mb-6 flex items-center gap-2">
|
||||
<Plus className="w-5 h-5 text-blue-400" /> New Format
|
||||
</h2>
|
||||
<button
|
||||
onClick={handleAdd}
|
||||
disabled={submitting || !newName || newWeight <= 0}
|
||||
className="w-full bg-blue-600 hover:bg-blue-500 disabled:bg-gray-700 disabled:text-gray-500 text-white font-bold py-4 rounded-2xl mt-4 transition-all shadow-lg shadow-blue-500/20 active:scale-95 flex items-center justify-center gap-2"
|
||||
>
|
||||
{submitting ? "Adding..." : (
|
||||
<>
|
||||
<Plus className="w-5 h-5" />
|
||||
Add Category
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="text-xs font-semibold text-gray-400 uppercase tracking-widest ml-1">Type Name</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="e.g. Quizzes, Final Exam"
|
||||
value={newName}
|
||||
onChange={(e) => setNewName(e.target.value)}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 mt-1.5 focus:outline-none focus:border-blue-500 transition-all text-gray-100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-xs font-semibold text-gray-400 uppercase tracking-widest ml-1">Weight (%)</label>
|
||||
<div className="relative mt-1.5">
|
||||
<input
|
||||
type="number"
|
||||
placeholder="20"
|
||||
value={newWeight || ""}
|
||||
onChange={(e) => setNewWeight(parseInt(e.target.value) || 0)}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-blue-500 transition-all text-gray-100 pl-10"
|
||||
/>
|
||||
<Percent className="w-4 h-4 text-gray-500 absolute left-4 top-1/2 -translate-y-1/2" />
|
||||
{!isBalanced && (
|
||||
<div className="mt-6 p-4 rounded-xl bg-amber-500/10 border border-amber-500/20 flex gap-3">
|
||||
<AlertCircle className="w-5 h-5 text-amber-500 shrink-0 mt-0.5" />
|
||||
<p className="text-sm text-amber-200/80 leading-relaxed">
|
||||
The total weight of all categories must be exactly 100% for the course to be valid for certification. Currently: <strong>{totalWeight}%</strong>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleAdd}
|
||||
disabled={submitting || !newName || newWeight <= 0}
|
||||
className="w-full bg-blue-600 hover:bg-blue-500 disabled:bg-gray-700 disabled:text-gray-500 text-white font-bold py-4 rounded-2xl mt-4 transition-all shadow-lg shadow-blue-500/20 active:scale-95 flex items-center justify-center gap-2"
|
||||
>
|
||||
{submitting ? "Adding..." : (
|
||||
<>
|
||||
<Plus className="w-5 h-5" />
|
||||
Add Category
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{!isBalanced && (
|
||||
<div className="mt-6 p-4 rounded-xl bg-amber-500/10 border border-amber-500/20 flex gap-3">
|
||||
<AlertCircle className="w-5 h-5 text-amber-500 shrink-0 mt-0.5" />
|
||||
<p className="text-sm text-amber-200/80 leading-relaxed">
|
||||
The total weight of all categories must be exactly 100% for the course to be valid for certification. Currently: <strong>{totalWeight}%</strong>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CourseEditorLayout>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -20,6 +20,7 @@ import {
|
||||
GripVertical,
|
||||
Trash2
|
||||
} from "lucide-react";
|
||||
import CourseEditorLayout from "@/components/CourseEditorLayout";
|
||||
|
||||
interface FullModule extends Module {
|
||||
lessons: Lesson[];
|
||||
@@ -57,7 +58,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
|
||||
}, [params.id]);
|
||||
|
||||
const handleAddModule = async () => {
|
||||
const title = "New Module";
|
||||
const title = "";
|
||||
try {
|
||||
const newMod = await cmsApi.createModule(params.id, title, modules.length + 1);
|
||||
const fullMod = { ...newMod, lessons: [] };
|
||||
@@ -222,25 +223,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="glass p-1">
|
||||
<div className="flex border-b border-white/10">
|
||||
<Link href={`/courses/${params.id}`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium border-b-2 border-blue-500 bg-white/5">
|
||||
<Layout className="w-4 h-4" /> Outline
|
||||
</Link>
|
||||
<Link href={`/courses/${params.id}/grading`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium text-gray-500 hover:text-white transition-colors">
|
||||
<CheckCircle2 className="w-4 h-4" /> Grading
|
||||
</Link>
|
||||
<Link href={`/courses/${params.id}/calendar`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium text-gray-500 hover:text-white transition-colors">
|
||||
<Calendar className="w-4 h-4" /> Calendar
|
||||
</Link>
|
||||
<Link href={`/courses/${params.id}/analytics`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium text-gray-500 hover:text-white transition-colors">
|
||||
<BarChart2 className="w-4 h-4" /> Analytics
|
||||
</Link>
|
||||
<Link href={`/courses/${params.id}/settings`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium text-gray-500 hover:text-white transition-colors">
|
||||
<Settings className="w-4 h-4" /> Settings
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<CourseEditorLayout activeTab="outline">
|
||||
<div className="p-8 space-y-6">
|
||||
{modules.map((module, mIndex) => (
|
||||
<div key={module.id} className="glass rounded-xl overflow-hidden border-white/5">
|
||||
@@ -286,7 +269,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
|
||||
onClick={() => { setEditingId(module.id); setEditValue(module.title); }}
|
||||
className="font-semibold text-lg text-blue-400 cursor-pointer hover:text-blue-300 transition-colors"
|
||||
>
|
||||
Module {module.position}: {module.title}
|
||||
{module.title || `Module ${module.position}`}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => { setEditingId(module.id); setEditValue(module.title); }}
|
||||
@@ -404,7 +387,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
|
||||
<Plus className="w-6 h-6" /> Add New Module
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</CourseEditorLayout>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@ export default function AuthHeader() {
|
||||
<div className="flex items-center gap-4">
|
||||
{user?.role === 'admin' && (
|
||||
<>
|
||||
<Link href="/admin/organization" className="text-xs font-bold uppercase tracking-widest text-gray-400 hover:text-white transition-colors flex items-center gap-2">
|
||||
<Link href="/admin/organizations" className="text-xs font-bold uppercase tracking-widest text-gray-400 hover:text-white transition-colors flex items-center gap-2">
|
||||
<Building2 size={16} /> Org
|
||||
</Link>
|
||||
<Link href="/admin/audit" className="text-xs font-bold uppercase tracking-widest text-gray-400 hover:text-white transition-colors flex items-center gap-2">
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { useParams } from "next/navigation";
|
||||
import { Layout, CheckCircle2, Calendar, BarChart2, Settings } from "lucide-react";
|
||||
|
||||
interface CourseEditorLayoutProps {
|
||||
children: React.ReactNode;
|
||||
activeTab: "outline" | "grading" | "calendar" | "analytics" | "settings";
|
||||
}
|
||||
|
||||
export default function CourseEditorLayout({ children, activeTab }: CourseEditorLayoutProps) {
|
||||
const { id } = useParams() as { id: string };
|
||||
|
||||
const tabs = [
|
||||
{ key: "outline", label: "Outline", icon: Layout, href: `/courses/${id}` },
|
||||
{ key: "grading", label: "Grading", icon: CheckCircle2, href: `/courses/${id}/grading` },
|
||||
{ key: "calendar", label: "Calendar", icon: Calendar, href: `/courses/${id}/calendar` },
|
||||
{ key: "analytics", label: "Analytics", icon: BarChart2, href: `/courses/${id}/analytics` },
|
||||
{ key: "settings", label: "Settings", icon: Settings, href: `/courses/${id}/settings` },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{/* Tabs Navigation */}
|
||||
<div className="glass p-1">
|
||||
<div className="flex border-b border-white/10">
|
||||
{tabs.map((tab) => {
|
||||
const Icon = tab.icon;
|
||||
const isActive = tab.key === activeTab;
|
||||
return (
|
||||
<Link
|
||||
key={tab.key}
|
||||
href={tab.href}
|
||||
className={`flex items-center gap-2 px-6 py-4 text-sm font-medium transition-colors ${isActive
|
||||
? "border-b-2 border-blue-500 bg-white/5"
|
||||
: "text-gray-500 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
<Icon className="w-4 h-4" />
|
||||
{tab.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="space-y-6">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -156,9 +156,15 @@ const apiFetch = (url: string, options: RequestInit = {}) => {
|
||||
...(token ? { 'Authorization': `Bearer ${token}` } : {})
|
||||
};
|
||||
|
||||
return fetch(`${API_BASE_URL}${url}`, { ...options, headers }).then(res => {
|
||||
return fetch(`${API_BASE_URL}${url}`, { ...options, headers }).then(async res => {
|
||||
if (!res.ok) {
|
||||
return res.json().then(err => Promise.reject(err.message || 'An error occurred'));
|
||||
const text = await res.text();
|
||||
try {
|
||||
const json = JSON.parse(text);
|
||||
return Promise.reject(new Error(json.message || 'An error occurred'));
|
||||
} catch {
|
||||
return Promise.reject(new Error(text || res.statusText));
|
||||
}
|
||||
}
|
||||
// Handle no-content responses
|
||||
if (res.status === 204) return;
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user