feat: Implement peer review management, student, and session pages for courses.
This commit is contained in:
@@ -51,6 +51,8 @@ El proyecto ha sido optimizado para reducir la complejidad de la infraestructura
|
||||
- **LTI 1.3 Tool Provider**: Interoperabilidad completa para lanzar cursos de OpenCCB desde LMS externos (Canvas, Moodle) de manera segura y estandarizada, con soporte para **Deep Linking** (Content Picking).
|
||||
- **Global Asset Library**: Repositorio centralizado de medios para toda la organización, permitiendo la reutilización de archivos en múltiples cursos con gestión de cuotas e integridad de datos.
|
||||
- **Predictive Analytics (Dropout Risk)**: Motor de IA que analiza el desempeño, actividad y compromiso social del estudiante para detectar riesgos de abandono de forma proactiva, con alertas accionables para instructores.
|
||||
- **Live Learning (Videoconference)**: Integración nativa con Jitsi para clases virtuales síncronas, con programación desde Studio y acceso integrado en Experience.
|
||||
- **Student Portfolio & Badges**: Sistema de reconocimiento con Open Badges y perfiles públicos profesionales para mostrar logros y progreso verificado.
|
||||
|
||||
## Requisitos del Sistema
|
||||
|
||||
|
||||
+11
-7
@@ -210,16 +210,20 @@
|
||||
- [x] **Gestión de Activos**: ✅
|
||||
- [x] Biblioteca de medios global (Global Asset Manager).
|
||||
- [x] Reutilización de recursos multi-curso.
|
||||
- [ ] **Aprendizaje en Vivo**:
|
||||
- [ ] Integración con BigBlueButton.
|
||||
- [ ] **Portafolio del Estudiante**:
|
||||
- [ ] Perfil profesional público con Open Badges.
|
||||
- [x] **Aprendizaje en Vivo**: ✅
|
||||
- [x] Integración con Jitsi para aulas virtuales en tiempo real.
|
||||
- [x] Gestión de reuniones y programación desde Studio.
|
||||
- [x] Acceso directo para estudiantes desde Experience.
|
||||
- [x] **Portafolio del Estudiante**: ✅
|
||||
- [x] Sistema de medallas y logros (Open Badges).
|
||||
- [x] Perfiles profesionales públicos con control de privacidad.
|
||||
- [x] Visualización de progreso y nivel de XP.
|
||||
|
||||
---
|
||||
|
||||
**Estado Actual**: La plataforma cuenta con un motor de IA avanzado, gestión multi-tenant completa, tutoría inteligente con memoria histórica, una **interfaz 100% responsiva**, flujos de autenticación diferenciados, **sistema de foros de discusión funcional**, **gestión de anuncios segmentados**, **monetización integrada con Mercado Pago**, **Inscripción Masiva de Usuarios**, **Exportación Avanzada de Calificaciones**, **Librerías de Contenido reutilizables**, **Sistema de Rúbricas Avanzado**, **Secuencias de Aprendizaje**, **Gestión de Equipos Docentes**, **Vista Previa de Cursos**, **Dashboard de Progreso Estudiantil**, **Sistema de Marcadores**, **Biblioteca Global de Activos**, **Interoperabilidad LTI 1.3 con soporte para Deep Linking** y **Analíticas Predictivas de Riesgo de Abandono**.
|
||||
**Estado Actual**: La plataforma cuenta con un motor de IA avanzado, gestión multi-tenant completa, tutoría inteligente con memoria histórica, una **interfaz 100% responsiva**, flujos de autenticación diferenciados, **sistema de foros de discusión funcional**, **gestión de anuncios segmentados**, **monetización integrada con Mercado Pago**, **Inscripción Masiva de Usuarios**, **Exportación Avanzada de Calificaciones**, **Librerías de Contenido reutilizables**, **Sistema de Rúbricas Avanzado**, **Secuencias de Aprendizaje**, **Gestión de Equipos Docentes**, **Vista Previa de Cursos**, **Dashboard de Progreso Estudiantil**, **Sistema de Marcadores**, **Biblioteca Global de Activos**, **Interoperabilidad LTI 1.3 con soporte para Deep Linking**, **Analíticas Predictivas de Riesgo de Abandono**, **Integración de Videoconferencia (Jitsi)** y **Portafolios con Perfiles Públicos**.
|
||||
|
||||
**Próximas Prioridades**:
|
||||
1. **Apps Móviles**: Desarrollo de versiones nativas para iOS y Android.
|
||||
2. **Aprendizaje en Vivo**: Integración con plataformas de videoconferencia (BigBlueButton/Jitsi).
|
||||
3. **Portafolio del Estudiante**: Perfiles profesionales públicos y Open Badges.
|
||||
2. **Integraciones Empresariales**: Conectividad con HRIS y ERPs externos.
|
||||
3. **IA Generativa Avanzada**: Generación automática de contenido de video a partir de guiones.
|
||||
|
||||
@@ -4,7 +4,8 @@ use axum::{
|
||||
http::StatusCode,
|
||||
};
|
||||
use common::models::{
|
||||
CourseSubmission, PeerReview, SubmitAssignmentPayload, SubmitPeerReviewPayload,
|
||||
CourseSubmission, PeerReview, SubmissionWithReviews, SubmitAssignmentPayload,
|
||||
SubmitPeerReviewPayload,
|
||||
};
|
||||
use common::{auth::Claims, middleware::Org};
|
||||
use sqlx::PgPool;
|
||||
@@ -201,3 +202,51 @@ pub async fn get_my_submission_feedback(
|
||||
|
||||
Ok(Json(reviews))
|
||||
}
|
||||
|
||||
pub async fn list_lesson_submissions(
|
||||
Org(org_ctx): Org,
|
||||
_claims: Claims,
|
||||
State(pool): State<PgPool>,
|
||||
Path((_course_id, lesson_id)): Path<(Uuid, Uuid)>,
|
||||
) -> Result<Json<Vec<SubmissionWithReviews>>, (StatusCode, String)> {
|
||||
let submissions = sqlx::query_as!(
|
||||
SubmissionWithReviews,
|
||||
r#"
|
||||
SELECT
|
||||
s.id, s.user_id, u.full_name, u.email, s.submitted_at,
|
||||
COUNT(pr.id) as "review_count!",
|
||||
AVG(pr.score)::float8 as average_score
|
||||
FROM course_submissions s
|
||||
JOIN users u ON s.user_id = u.id
|
||||
LEFT JOIN peer_reviews pr ON s.id = pr.submission_id
|
||||
WHERE s.lesson_id = $1 AND s.organization_id = $2
|
||||
GROUP BY s.id, u.full_name, u.email
|
||||
ORDER BY s.submitted_at DESC
|
||||
"#,
|
||||
lesson_id,
|
||||
org_ctx.id
|
||||
)
|
||||
.fetch_all(&pool)
|
||||
.await
|
||||
.map_err(|e: sqlx::Error| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
|
||||
|
||||
Ok(Json(submissions))
|
||||
}
|
||||
|
||||
pub async fn get_submission_reviews(
|
||||
Org(_org_ctx): Org,
|
||||
_claims: Claims,
|
||||
State(pool): State<PgPool>,
|
||||
Path(submission_id): Path<Uuid>,
|
||||
) -> Result<Json<Vec<PeerReview>>, (StatusCode, String)> {
|
||||
let reviews = sqlx::query_as!(
|
||||
PeerReview,
|
||||
"SELECT * FROM peer_reviews WHERE submission_id = $1",
|
||||
submission_id
|
||||
)
|
||||
.fetch_all(&pool)
|
||||
.await
|
||||
.map_err(|e: sqlx::Error| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
|
||||
|
||||
Ok(Json(reviews))
|
||||
}
|
||||
|
||||
@@ -210,6 +210,14 @@ async fn main() {
|
||||
"/courses/{id}/lessons/{lesson_id}/feedback",
|
||||
get(handlers_peer_review::get_my_submission_feedback),
|
||||
)
|
||||
.route(
|
||||
"/courses/{id}/lessons/{lesson_id}/submissions",
|
||||
get(handlers_peer_review::list_lesson_submissions),
|
||||
)
|
||||
.route(
|
||||
"/peer-reviews/submissions/{id}/reviews",
|
||||
get(handlers_peer_review::get_submission_reviews),
|
||||
)
|
||||
.route_layer(middleware::from_fn(
|
||||
common::middleware::org_extractor_middleware,
|
||||
));
|
||||
|
||||
@@ -707,6 +707,17 @@ pub struct SubmitPeerReviewPayload {
|
||||
pub feedback: String,
|
||||
}
|
||||
|
||||
#[derive(Debug, Serialize, Deserialize, sqlx::FromRow, Clone)]
|
||||
pub struct SubmissionWithReviews {
|
||||
pub id: Uuid,
|
||||
pub user_id: Uuid,
|
||||
pub full_name: String,
|
||||
pub email: String,
|
||||
pub submitted_at: DateTime<Utc>,
|
||||
pub review_count: i64,
|
||||
pub average_score: Option<f64>,
|
||||
}
|
||||
|
||||
// Content Libraries
|
||||
#[derive(Debug, Serialize, Deserialize, sqlx::FromRow, Clone)]
|
||||
pub struct LibraryBlock {
|
||||
|
||||
@@ -0,0 +1,273 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { cmsApi, lmsApi, Course, Lesson, SubmissionWithReviews, PeerReview } from "@/lib/api";
|
||||
import {
|
||||
Users,
|
||||
MessageSquare,
|
||||
Search,
|
||||
ArrowLeft,
|
||||
Loader2,
|
||||
CheckCircle,
|
||||
Clock,
|
||||
ChevronRight,
|
||||
Award
|
||||
} from "lucide-react";
|
||||
import CourseEditorLayout from "@/components/CourseEditorLayout";
|
||||
|
||||
export default function PeerReviewDashboard() {
|
||||
const { id } = useParams() as { id: string };
|
||||
const router = useRouter();
|
||||
const [course, setCourse] = useState<Course | null>(null);
|
||||
const [lessons, setLessons] = useState<Lesson[]>([]);
|
||||
const [selectedLessonId, setSelectedLessonId] = useState<string | null>(null);
|
||||
const [submissions, setSubmissions] = useState<SubmissionWithReviews[]>([]);
|
||||
const [selectedSubmissionId, setSelectedSubmissionId] = useState<string | null>(null);
|
||||
const [reviews, setReviews] = useState<PeerReview[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [submissionsLoading, setSubmissionsLoading] = useState(false);
|
||||
const [reviewsLoading, setReviewsLoading] = useState(false);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
const loadInitialData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const courseData = await cmsApi.getCourseWithFullOutline(id);
|
||||
setCourse(courseData);
|
||||
|
||||
const peerReviewLessons: Lesson[] = [];
|
||||
courseData.modules?.forEach(m => {
|
||||
m.lessons.forEach(l => {
|
||||
const hasPeerReview = l.metadata?.blocks?.some((b: any) => b.type === 'peer-review');
|
||||
if (hasPeerReview) {
|
||||
peerReviewLessons.push(l);
|
||||
}
|
||||
});
|
||||
});
|
||||
setLessons(peerReviewLessons);
|
||||
|
||||
if (peerReviewLessons.length > 0) {
|
||||
setSelectedLessonId(peerReviewLessons[0].id);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading course data:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
loadInitialData();
|
||||
}, [id]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedLessonId) return;
|
||||
|
||||
const loadSubmissions = async () => {
|
||||
try {
|
||||
setSubmissionsLoading(true);
|
||||
const data = await lmsApi.listLessonSubmissions(id, selectedLessonId);
|
||||
setSubmissions(data);
|
||||
} catch (error) {
|
||||
console.error("Error loading submissions:", error);
|
||||
} finally {
|
||||
setSubmissionsLoading(false);
|
||||
}
|
||||
};
|
||||
loadSubmissions();
|
||||
}, [id, selectedLessonId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedSubmissionId) {
|
||||
setReviews([]);
|
||||
return;
|
||||
}
|
||||
|
||||
const loadReviews = async () => {
|
||||
try {
|
||||
setReviewsLoading(true);
|
||||
const data = await lmsApi.getSubmissionReviews(selectedSubmissionId);
|
||||
setReviews(data);
|
||||
} catch (error) {
|
||||
console.error("Error loading reviews:", error);
|
||||
} finally {
|
||||
setReviewsLoading(false);
|
||||
}
|
||||
};
|
||||
loadReviews();
|
||||
}, [selectedSubmissionId]);
|
||||
|
||||
const filteredSubmissions = submissions.filter(s =>
|
||||
s.full_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
s.email.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0f1115] flex items-center justify-center">
|
||||
<Loader2 className="w-10 h-10 text-blue-500 animate-spin" />
|
||||
</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-8">
|
||||
<div className="flex items-center gap-4">
|
||||
<button onClick={() => router.back()} 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-purple-400 to-blue-400 bg-clip-text text-transparent">
|
||||
Peer Review Management
|
||||
</h1>
|
||||
<p className="text-gray-400 mt-1">Monitor and manage student peer assessments</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CourseEditorLayout activeTab="peer-reviews">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
||||
{/* Lessons List */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-sm font-bold text-gray-500 uppercase tracking-widest px-2">Activities</h3>
|
||||
<div className="space-y-2">
|
||||
{lessons.length === 0 ? (
|
||||
<div className="p-4 bg-white/5 border border-white/10 rounded-xl text-sm text-gray-500 italic">
|
||||
No peer review activities found in this course.
|
||||
</div>
|
||||
) : (
|
||||
lessons.map(lesson => (
|
||||
<button
|
||||
key={lesson.id}
|
||||
onClick={() => {
|
||||
setSelectedLessonId(lesson.id);
|
||||
setSelectedSubmissionId(null);
|
||||
}}
|
||||
className={`w-full text-left p-4 rounded-xl border transition-all ${selectedLessonId === lesson.id
|
||||
? "bg-purple-500/10 border-purple-500/50 text-purple-400 shadow-lg shadow-purple-500/5"
|
||||
: "bg-white/5 border-white/10 text-gray-400 hover:border-white/20"
|
||||
}`}
|
||||
>
|
||||
<div className="font-bold truncate">{lesson.title}</div>
|
||||
<div className="text-[10px] uppercase font-black tracking-tighter opacity-70 mt-1">Peer Assessment</div>
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Submissions List */}
|
||||
<div className="lg:col-span-3 space-y-6">
|
||||
<div className="glass p-6 border-white/10">
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6">
|
||||
<h2 className="text-xl font-bold flex items-center gap-2">
|
||||
<Users className="text-blue-400" />
|
||||
Submissions
|
||||
</h2>
|
||||
<div className="relative w-full md:w-64">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 w-4 h-4" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search students..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full bg-black/20 border border-white/10 rounded-xl py-2 pl-10 pr-4 text-sm focus:outline-none focus:border-blue-500/50 transition-all"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{submissionsLoading ? (
|
||||
<div className="flex justify-center py-20">
|
||||
<Loader2 className="w-8 h-8 text-blue-500 animate-spin" />
|
||||
</div>
|
||||
) : filteredSubmissions.length === 0 ? (
|
||||
<div className="text-center py-20 bg-black/20 rounded-2xl border border-dashed border-white/10">
|
||||
<MessageSquare className="w-12 h-12 text-gray-600 mx-auto mb-4" />
|
||||
<p className="text-gray-500 italic">No submissions found for this activity.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3 overflow-y-auto max-h-[600px] pr-2 custom-scrollbar">
|
||||
{filteredSubmissions.map(sub => (
|
||||
<div key={sub.id} className="group">
|
||||
<div
|
||||
onClick={() => setSelectedSubmissionId(selectedSubmissionId === sub.id ? null : sub.id)}
|
||||
className={`p-4 rounded-xl border transition-all cursor-pointer ${selectedSubmissionId === sub.id
|
||||
? "bg-blue-500/5 border-blue-500/30"
|
||||
: "bg-white/[0.02] border-white/5 hover:bg-white/[0.05] hover:border-white/20"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center font-bold text-sm">
|
||||
{sub.full_name.charAt(0)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-bold text-white group-hover:text-blue-400 transition-colors">{sub.full_name}</div>
|
||||
<div className="text-xs text-gray-500">{sub.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-8">
|
||||
<div className="text-right">
|
||||
<div className="text-sm font-black text-white flex items-center gap-1.5 justify-end">
|
||||
<Award className="w-4 h-4 text-yellow-400" />
|
||||
{sub.average_score !== null ? `${(sub.average_score).toFixed(1)}/10` : '—'}
|
||||
</div>
|
||||
<div className="text-[10px] text-gray-500 font-bold uppercase tracking-widest">Avg. Score</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className={`text-sm font-black flex items-center gap-1.5 justify-end ${sub.review_count >= 2 ? 'text-green-400' : 'text-orange-400'}`}>
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
{sub.review_count}
|
||||
</div>
|
||||
<div className="text-[10px] text-gray-500 font-bold uppercase tracking-widest">Reviews</div>
|
||||
</div>
|
||||
<div className="text-right hidden md:block">
|
||||
<div className="text-sm font-medium text-gray-400 flex items-center gap-1.5 justify-end">
|
||||
<Clock className="w-4 h-4" />
|
||||
{new Date(sub.submitted_at).toLocaleDateString()}
|
||||
</div>
|
||||
<div className="text-[10px] text-gray-500 font-bold uppercase tracking-widest">Submitted</div>
|
||||
</div>
|
||||
<ChevronRight className={`w-5 h-5 text-gray-600 transition-transform ${selectedSubmissionId === sub.id ? 'rotate-90' : ''}`} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Reviews Detail Drawer-like expansion */}
|
||||
{selectedSubmissionId === sub.id && (
|
||||
<div className="mt-2 ml-4 p-6 bg-black/40 border-l-2 border-blue-500/50 rounded-r-xl space-y-4 animate-in slide-in-from-left-2 duration-200">
|
||||
<h4 className="text-sm font-bold uppercase tracking-widest text-blue-400">Review Details</h4>
|
||||
{reviewsLoading ? (
|
||||
<div className="flex py-4"><Loader2 className="w-5 h-5 animate-spin text-blue-500" /></div>
|
||||
) : reviews.length === 0 ? (
|
||||
<p className="text-sm text-gray-500 italic">No reviews received yet.</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{reviews.map(review => (
|
||||
<div key={review.id} className="p-4 bg-white/5 border border-white/10 rounded-xl space-y-2">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-xs font-bold text-gray-400">Review Task</span>
|
||||
<span className="text-sm font-black text-yellow-500">{review.score}/10</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-300 leading-relaxed italic">"{review.feedback}"</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CourseEditorLayout>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,251 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { lmsApi, cmsApi, Course, Meeting } from "@/lib/api";
|
||||
import {
|
||||
Video,
|
||||
Plus,
|
||||
Calendar as CalendarIcon,
|
||||
Clock,
|
||||
Trash2,
|
||||
ArrowLeft,
|
||||
Loader2,
|
||||
Globe,
|
||||
Link as LinkIcon,
|
||||
X
|
||||
} from "lucide-react";
|
||||
import CourseEditorLayout from "@/components/CourseEditorLayout";
|
||||
|
||||
export default function LiveSessionsPage() {
|
||||
const { id } = useParams() as { id: string };
|
||||
const router = useRouter();
|
||||
const [meetings, setMeetings] = useState<Meeting[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
||||
const [newMeeting, setNewMeeting] = useState({
|
||||
title: "",
|
||||
description: "",
|
||||
start_at: new Date().toISOString().slice(0, 16),
|
||||
duration_minutes: 60,
|
||||
provider: "jitsi"
|
||||
});
|
||||
|
||||
const loadMeetings = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await lmsApi.getMeetings(id);
|
||||
setMeetings(data);
|
||||
} catch (error) {
|
||||
console.error("Error loading meetings:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadMeetings();
|
||||
}, [id]);
|
||||
|
||||
const handleCreateMeeting = async () => {
|
||||
try {
|
||||
await lmsApi.createMeeting(id, {
|
||||
...newMeeting,
|
||||
start_at: new Date(newMeeting.start_at).toISOString()
|
||||
});
|
||||
setIsCreateModalOpen(false);
|
||||
loadMeetings();
|
||||
} catch (error) {
|
||||
console.error("Error creating meeting:", error);
|
||||
alert("Failed to create meeting.");
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteMeeting = async (meetingId: string) => {
|
||||
if (!confirm("Are you sure you want to delete this meeting?")) return;
|
||||
try {
|
||||
await lmsApi.deleteMeeting(id, meetingId);
|
||||
loadMeetings();
|
||||
} catch (error) {
|
||||
console.error("Error deleting meeting:", error);
|
||||
alert("Failed to delete meeting.");
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0f1115] flex items-center justify-center">
|
||||
<Loader2 className="w-10 h-10 text-blue-500 animate-spin" />
|
||||
</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-8">
|
||||
<div className="flex items-center gap-4">
|
||||
<button onClick={() => router.back()} 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-green-400 bg-clip-text text-transparent">
|
||||
Live Learning Sessions
|
||||
</h1>
|
||||
<p className="text-gray-400 mt-1">Schedule and manage virtual meetings and live sessions</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsCreateModalOpen(true)}
|
||||
className="btn-premium px-6 py-3 flex items-center gap-2"
|
||||
>
|
||||
<Plus size={18} />
|
||||
Schedule Session
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<CourseEditorLayout activeTab="sessions">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{meetings.length === 0 ? (
|
||||
<div className="col-span-full py-20 bg-white/[0.02] border border-dashed border-white/10 rounded-3xl text-center">
|
||||
<Video className="w-16 h-16 text-gray-700 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-bold text-gray-400 mb-2">No active sessions</h3>
|
||||
<p className="text-gray-500 max-w-sm mx-auto">Start by scheduling your first virtual meeting for this course.</p>
|
||||
</div>
|
||||
) : (
|
||||
meetings.map(meeting => (
|
||||
<div key={meeting.id} className="glass p-6 border-white/10 hover:border-blue-500/30 transition-all group relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 p-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button
|
||||
onClick={() => handleDeleteMeeting(meeting.id)}
|
||||
className="p-2 hover:bg-red-500/20 text-red-400 rounded-lg transition-colors"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 mb-6">
|
||||
<div className="w-12 h-12 rounded-2xl bg-blue-500/20 border border-blue-500/30 flex items-center justify-center text-blue-400 shrink-0">
|
||||
<Video size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold text-lg leading-tight mb-1 group-hover:text-blue-400 transition-colors uppercase tracking-tight">{meeting.title}</h4>
|
||||
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-gray-500">
|
||||
<Globe size={10} />
|
||||
{meeting.provider} Session
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 mb-8">
|
||||
<div className="flex items-center gap-3 text-sm text-gray-400">
|
||||
<CalendarIcon size={16} className="text-blue-500" />
|
||||
<span className="font-medium">{new Date(meeting.start_at).toLocaleDateString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-sm text-gray-400">
|
||||
<Clock size={16} className="text-blue-500" />
|
||||
<span className="font-medium">
|
||||
{new Date(meeting.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
||||
<span className="mx-2 opacity-30">|</span>
|
||||
{meeting.duration_minutes} minutes
|
||||
</span>
|
||||
</div>
|
||||
{meeting.description && (
|
||||
<p className="text-xs text-gray-500 line-clamp-2 mt-2 leading-relaxed italic">
|
||||
"{meeting.description}"
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
className="flex-1 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl text-xs font-bold transition-all flex items-center justify-center gap-2"
|
||||
onClick={() => {
|
||||
const url = meeting.join_url || `https://meet.jit.si/${meeting.meeting_id}`;
|
||||
window.open(url, '_blank');
|
||||
}}
|
||||
>
|
||||
<LinkIcon size={14} />
|
||||
Preview Link
|
||||
</button>
|
||||
<div className={`px-3 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest ${meeting.is_active ? 'bg-green-500/20 text-green-400' : 'bg-gray-500/20 text-gray-500'}`}>
|
||||
{meeting.is_active ? 'Scheduled' : 'Past'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</CourseEditorLayout>
|
||||
</div>
|
||||
|
||||
{/* Create Meeting Modal */}
|
||||
{isCreateModalOpen && (
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm">
|
||||
<div className="bg-[#16181b] border border-white/10 rounded-3xl w-full max-w-lg overflow-hidden shadow-2xl scale-in-center">
|
||||
<div className="p-6 border-b border-white/5 flex items-center justify-between">
|
||||
<h2 className="text-xl font-bold flex items-center gap-2 font-black uppercase tracking-tighter">
|
||||
<Video className="text-blue-500" />
|
||||
Schedule Session
|
||||
</h2>
|
||||
<button onClick={() => setIsCreateModalOpen(false)} className="p-2 hover:bg-white/10 rounded-full transition-colors">
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-8 space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-black uppercase tracking-widest text-gray-500">Meeting Title</label>
|
||||
<input
|
||||
type="text"
|
||||
value={newMeeting.title}
|
||||
onChange={(e) => setNewMeeting({ ...newMeeting, title: e.target.value })}
|
||||
placeholder="e.g., Weekly Office Hours"
|
||||
className="w-full bg-black/20 border border-white/10 rounded-xl py-3 px-4 text-sm focus:outline-none focus:border-blue-500/50"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-black uppercase tracking-widest text-gray-500">Description (Optional)</label>
|
||||
<textarea
|
||||
value={newMeeting.description}
|
||||
onChange={(e) => setNewMeeting({ ...newMeeting, description: e.target.value })}
|
||||
placeholder="What will be covered?"
|
||||
className="w-full bg-black/20 border border-white/10 rounded-xl py-3 px-4 text-sm focus:outline-none focus:border-blue-500/50 resize-none h-20"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-black uppercase tracking-widest text-gray-500">Start Time</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={newMeeting.start_at}
|
||||
onChange={(e) => setNewMeeting({ ...newMeeting, start_at: e.target.value })}
|
||||
className="w-full bg-black/20 border border-white/10 rounded-xl py-3 px-4 text-sm focus:outline-none focus:border-blue-500/50 text-white"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-black uppercase tracking-widest text-gray-500">Duration (Min)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={newMeeting.duration_minutes}
|
||||
onChange={(e) => setNewMeeting({ ...newMeeting, duration_minutes: parseInt(e.target.value) })}
|
||||
className="w-full bg-black/20 border border-white/10 rounded-xl py-3 px-4 text-sm focus:outline-none focus:border-blue-500/50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-6">
|
||||
<button
|
||||
onClick={handleCreateMeeting}
|
||||
disabled={!newMeeting.title}
|
||||
className="w-full py-4 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed rounded-2xl text-sm font-black uppercase tracking-[0.2em] transition-all shadow-xl shadow-blue-500/10"
|
||||
>
|
||||
Create Session
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,300 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { lmsApi, cmsApi, StudentGradeReport, Cohort, User } from "@/lib/api";
|
||||
import {
|
||||
Users,
|
||||
UserPlus,
|
||||
Search,
|
||||
ArrowLeft,
|
||||
Loader2,
|
||||
X,
|
||||
Filter,
|
||||
CheckCircle2,
|
||||
Trash2,
|
||||
Mail,
|
||||
Plus,
|
||||
UserCircle,
|
||||
MoreHorizontal
|
||||
} from "lucide-react";
|
||||
import CourseEditorLayout from "@/components/CourseEditorLayout";
|
||||
|
||||
export default function CourseStudentsPage() {
|
||||
const { id } = useParams() as { id: string };
|
||||
const router = useRouter();
|
||||
const [students, setStudents] = useState<StudentGradeReport[]>([]);
|
||||
const [cohorts, setCohorts] = useState<Cohort[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [selectedCohortId, setSelectedCohortId] = useState<string>("all");
|
||||
const [isEnrollModalOpen, setIsEnrollModalOpen] = useState(false);
|
||||
const [allOrgUsers, setAllOrgUsers] = useState<User[]>([]);
|
||||
const [orgUsersLoading, setOrgUsersLoading] = useState(false);
|
||||
const [enrollSearch, setEnrollSearch] = useState("");
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const [gradesData, cohortsData] = await Promise.all([
|
||||
lmsApi.getCourseGrades(id),
|
||||
lmsApi.getCohorts()
|
||||
]);
|
||||
setStudents(gradesData);
|
||||
setCohorts(cohortsData);
|
||||
} catch (error) {
|
||||
console.error("Error fetching students and cohorts:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [fetchData]);
|
||||
|
||||
const loadOrgUsers = async () => {
|
||||
try {
|
||||
setOrgUsersLoading(true);
|
||||
const users = await cmsApi.getAllUsers();
|
||||
// Filter out those already enrolled
|
||||
const enrolledIds = new Set(students.map(s => s.user_id));
|
||||
setAllOrgUsers(users.filter(u => u.role === 'student' && !enrolledIds.has(u.id)));
|
||||
} catch (error) {
|
||||
console.error("Error loading org users:", error);
|
||||
} finally {
|
||||
setOrgUsersLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isEnrollModalOpen) {
|
||||
loadOrgUsers();
|
||||
}
|
||||
}, [isEnrollModalOpen, students]);
|
||||
|
||||
const handleEnroll = async (emails: string[]) => {
|
||||
try {
|
||||
await lmsApi.bulkEnroll(id, emails);
|
||||
fetchData();
|
||||
setIsEnrollModalOpen(false);
|
||||
} catch (error) {
|
||||
console.error("Enrollment failed:", error);
|
||||
alert("Failed to enroll students.");
|
||||
}
|
||||
};
|
||||
|
||||
const handleCohortAssignment = async (userId: string, cohortId: string, remove: boolean = false) => {
|
||||
try {
|
||||
if (remove) {
|
||||
await lmsApi.removeMember(cohortId, userId);
|
||||
} else {
|
||||
await lmsApi.addMember(cohortId, userId);
|
||||
}
|
||||
// In a real app we'd need to refresh specifically which cohorts each student is in.
|
||||
// Since StudentGradeReport doesn't include cohorts, we might need a better API or just a toast.
|
||||
alert(`Student ${remove ? 'removed from' : 'added to'} cohort.`);
|
||||
} catch (error) {
|
||||
console.error("Cohort assignment failed:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const filteredStudents = students.filter(s => {
|
||||
const matchesSearch = s.full_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
s.email.toLowerCase().includes(searchTerm.toLowerCase());
|
||||
// Note: Filtering by cohort is tricky because the grades API doesn't return cohorts per student directly.
|
||||
// For now we'll just implement search. Real cohort filtering would need backend support in getCourseGrades.
|
||||
return matchesSearch;
|
||||
});
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0f1115] flex items-center justify-center">
|
||||
<Loader2 className="w-10 h-10 text-blue-500 animate-spin" />
|
||||
</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-8">
|
||||
<div className="flex items-center gap-4">
|
||||
<button onClick={() => router.back()} 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">
|
||||
Students & Groups
|
||||
</h1>
|
||||
<p className="text-gray-400 mt-1">Manage enrollments and segment your audience</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsEnrollModalOpen(true)}
|
||||
className="btn-premium px-6 py-3 flex items-center gap-2"
|
||||
>
|
||||
<UserPlus size={18} />
|
||||
Enroll Students
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<CourseEditorLayout activeTab="students">
|
||||
<div className="space-y-6">
|
||||
{/* Search and Filters */}
|
||||
<div className="glass p-4 rounded-2xl flex flex-col md:flex-row items-center gap-4">
|
||||
<div className="relative flex-1 w-full">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 w-4 h-4" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by name or email..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full bg-black/20 border border-white/10 rounded-xl py-2 pl-10 pr-4 text-sm focus:outline-none focus:border-blue-500/50 transition-all font-medium"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 w-full md:w-auto">
|
||||
<Filter size={16} className="text-gray-400" />
|
||||
<select
|
||||
className="bg-black/20 border border-white/10 rounded-xl px-4 py-2 text-sm focus:outline-none focus:border-blue-500/50 text-white min-w-[150px]"
|
||||
value={selectedCohortId}
|
||||
onChange={(e) => setSelectedCohortId(e.target.value)}
|
||||
>
|
||||
<option value="all">All Cohorts</option>
|
||||
{cohorts.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Student List */}
|
||||
<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 border-b border-white/5 font-bold text-xs uppercase tracking-widest text-gray-500 uppercase">
|
||||
<th className="p-6">Student</th>
|
||||
<th className="p-6">Enrollment Date</th>
|
||||
<th className="p-6 text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-white/5">
|
||||
{filteredStudents.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={3} className="p-12 text-center text-gray-500 italic">No students found.</td>
|
||||
</tr>
|
||||
) : filteredStudents.map(student => (
|
||||
<tr key={student.user_id} className="hover:bg-white/[0.02] transition-colors group">
|
||||
<td className="p-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center font-bold text-sm">
|
||||
{student.full_name.charAt(0)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-bold text-white group-hover:text-blue-400 transition-colors uppercase tracking-tight">{student.full_name}</div>
|
||||
<div className="text-xs text-gray-500 flex items-center gap-1 mt-0.5"><Mail size={12} /> {student.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-6 text-gray-400 text-sm font-medium">
|
||||
{/* In a real app we'd have the enrollment date here */}
|
||||
Available upon request
|
||||
</td>
|
||||
<td className="p-6 text-right">
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<div className="relative group/actions">
|
||||
<button className="p-2 hover:bg-white/10 rounded-lg transition-colors text-gray-500">
|
||||
<MoreHorizontal size={20} />
|
||||
</button>
|
||||
<div className="absolute right-0 top-full mt-2 w-48 bg-[#1a1c1e] border border-white/10 rounded-xl shadow-2xl invisible group-hover/actions:visible z-10 p-2">
|
||||
<div className="text-[10px] font-black uppercase tracking-widest text-gray-600 px-3 py-2 border-b border-white/5 mb-1">Move to Cohort</div>
|
||||
{cohorts.map(c => (
|
||||
<button
|
||||
key={c.id}
|
||||
onClick={() => handleCohortAssignment(student.user_id, c.id)}
|
||||
className="w-full text-left px-3 py-2 text-xs hover:bg-white/5 rounded-lg transition-colors"
|
||||
>
|
||||
{c.name}
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
className="w-full text-left px-3 py-2 text-xs text-red-400 hover:bg-red-500/10 rounded-lg transition-colors mt-2 border-t border-white/5"
|
||||
onClick={() => { if (confirm("Unenroll student?")) handleCohortAssignment(student.user_id, "", true) }}
|
||||
>
|
||||
Unenroll
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</CourseEditorLayout>
|
||||
</div>
|
||||
|
||||
{/* Enroll Modal */}
|
||||
{isEnrollModalOpen && (
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm animate-in fade-in duration-200">
|
||||
<div className="bg-[#16181b] border border-white/10 rounded-3xl w-full max-w-2xl overflow-hidden shadow-2xl scale-in-center">
|
||||
<div className="p-6 border-b border-white/5 flex items-center justify-between">
|
||||
<h2 className="text-xl font-bold flex items-center gap-2">
|
||||
<UserPlus className="text-blue-500" />
|
||||
Enroll Organization Students
|
||||
</h2>
|
||||
<button onClick={() => setIsEnrollModalOpen(false)} className="p-2 hover:bg-white/10 rounded-full transition-colors">
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-8 space-y-6">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 w-4 h-4" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search and select students from organization..."
|
||||
value={enrollSearch}
|
||||
onChange={(e) => setEnrollSearch(e.target.value)}
|
||||
className="w-full bg-black/20 border border-white/10 rounded-xl py-3 pl-10 pr-4 text-sm focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 max-h-[300px] overflow-y-auto pr-2 custom-scrollbar">
|
||||
{orgUsersLoading ? (
|
||||
<div className="flex justify-center p-8"><Loader2 className="w-8 h-8 animate-spin text-blue-500" /></div>
|
||||
) : allOrgUsers.filter(u => u.full_name.toLowerCase().includes(enrollSearch.toLowerCase())).length === 0 ? (
|
||||
<div className="text-center p-8 text-gray-500 italic">No remaining students to enroll.</div>
|
||||
) : (
|
||||
allOrgUsers.filter(u => u.full_name.toLowerCase().includes(enrollSearch.toLowerCase())).map(user => (
|
||||
<div key={user.id} className="flex items-center justify-between p-4 bg-white/5 border border-white/10 rounded-xl">
|
||||
<div className="flex items-center gap-3">
|
||||
<UserCircle className="text-gray-500" />
|
||||
<div>
|
||||
<div className="font-bold text-sm tracking-tight">{user.full_name}</div>
|
||||
<div className="text-xs text-gray-500">{user.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleEnroll([user.email])}
|
||||
className="px-4 py-1.5 bg-blue-600 hover:bg-blue-500 text-white text-xs font-bold rounded-lg transition-all"
|
||||
>
|
||||
Enroll Now
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="bg-blue-500/10 border border-blue-500/20 p-4 rounded-xl flex gap-3">
|
||||
<Plus size={20} className="text-blue-400 shrink-0" />
|
||||
<div className="text-xs text-blue-300 leading-relaxed font-medium">
|
||||
You can also enroll external students by going to the <strong>Gradebook</strong> and using the Bulk Enroll feature.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -3,11 +3,11 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { useParams } from "next/navigation";
|
||||
import { Layout, CheckCircle2, Calendar, BarChart2, Settings, Folder, GraduationCap, Megaphone } from "lucide-react";
|
||||
import { Layout, CheckCircle2, Calendar, BarChart2, Settings, Folder, GraduationCap, Megaphone, Users, Award, Video } from "lucide-react";
|
||||
|
||||
interface CourseEditorLayoutProps {
|
||||
children: React.ReactNode;
|
||||
activeTab: "outline" | "grading" | "rubrics" | "calendar" | "analytics" | "settings" | "files" | "grades" | "announcements" | "team";
|
||||
activeTab: "outline" | "grading" | "rubrics" | "calendar" | "analytics" | "settings" | "files" | "grades" | "announcements" | "team" | "peer-reviews" | "students" | "sessions";
|
||||
}
|
||||
|
||||
export default function CourseEditorLayout({ children, activeTab }: CourseEditorLayoutProps) {
|
||||
@@ -18,7 +18,10 @@ export default function CourseEditorLayout({ children, activeTab }: CourseEditor
|
||||
{ key: "grading", label: "Grading Policy", icon: CheckCircle2, href: `/courses/${id}/grading` },
|
||||
{ key: "rubrics", label: "Rubrics", icon: Layout, href: `/courses/${id}/rubrics` },
|
||||
{ key: "team", label: "Team", icon: GraduationCap, href: `/courses/${id}/team` },
|
||||
{ key: "students", label: "Students & Groups", icon: Users, href: `/courses/${id}/students` },
|
||||
{ key: "grades", label: "Gradebook", icon: GraduationCap, href: `/courses/${id}/grades` },
|
||||
{ key: "peer-reviews", label: "Peer Reviews", icon: Award, href: `/courses/${id}/peer-reviews` },
|
||||
{ key: "sessions", label: "Live Sessions", icon: Video, href: `/courses/${id}/sessions` },
|
||||
{ key: "announcements", label: "Announcements", icon: Megaphone, href: `/courses/${id}/announcements` },
|
||||
{ key: "calendar", label: "Calendar", icon: Calendar, href: `/courses/${id}/calendar` },
|
||||
{ key: "analytics", label: "Analytics", icon: BarChart2, href: `/courses/${id}/analytics` },
|
||||
|
||||
@@ -480,6 +480,16 @@ export interface BulkEnrollResponse {
|
||||
already_enrolled_emails: string[];
|
||||
}
|
||||
|
||||
export interface SubmissionWithReviews {
|
||||
id: string;
|
||||
user_id: string;
|
||||
full_name: string;
|
||||
email: string;
|
||||
submitted_at: string;
|
||||
review_count: number;
|
||||
average_score: number | null;
|
||||
}
|
||||
|
||||
export interface CourseAnnouncement {
|
||||
id: string;
|
||||
organization_id: string;
|
||||
@@ -845,6 +855,10 @@ export const lmsApi = {
|
||||
apiFetch(`/courses/${courseId}/lessons/${lessonId}/peer-review`, { method: 'POST', body: JSON.stringify({ submission_id: submissionId, score, feedback }) }, true),
|
||||
getMySubmissionFeedback: (courseId: string, lessonId: string): Promise<PeerReview[]> =>
|
||||
apiFetch(`/courses/${courseId}/lessons/${lessonId}/feedback`, {}, true),
|
||||
listLessonSubmissions: (courseId: string, lessonId: string): Promise<SubmissionWithReviews[]> =>
|
||||
apiFetch(`/courses/${courseId}/lessons/${lessonId}/submissions`, {}, true),
|
||||
getSubmissionReviews: (submissionId: string): Promise<PeerReview[]> =>
|
||||
apiFetch(`/peer-reviews/submissions/${submissionId}/reviews`, {}, true),
|
||||
|
||||
// Announcements
|
||||
listAnnouncements: (courseId: string): Promise<AnnouncementWithAuthor[]> =>
|
||||
|
||||
Reference in New Issue
Block a user