Разработка личного кабинета преподавателя для LMS

Разработка личного кабинета преподавателя для LMS

Личный кабинет преподавателя отличается от студенческого по принципиально иному набору задач: управление курсом, проверка заданий, коммуникация со студентами, аналитика успеваемости. Хороший кабинет минимизирует время на административные задачи.

Разделы кабинета

Дашборд преподавателя — сводка: непроверенные работы (с цифрой и приоритетом), статистика потока (активные студенты, средний прогресс), ближайшие события (вебинары).

Мои курсы — список курсов, которые ведёт преподаватель. Переключение между черновиком, опубликованным и архивом.

Конструктор курса — создание и редактирование структуры курса, уроков, заданий.

Журнал оценок (Gradebook) — таблица всех студентов × всех заданий. Оценки, средние по категориям, итоговые баллы.

Проверка заданий — очередь непроверенных работ с интерфейсом проверки.

Студенты — список записанных студентов с прогрессом, возможность написать, отчислить, продлить доступ.

Аналитика — графики прогресса, retention, проблемные уроки.

Дашборд: очередь проверки

Непроверенные работы — самая важная часть дашборда. Сортируем по дедлайну:

interface TeacherDashboard {
  pendingReviews: {
    submissionId: string;
    studentName: string;
    studentAvatar: string;
    assignmentTitle: string;
    courseName: string;
    submittedAt: Date;
    deadlineAt: Date | null;
    isOverdue: boolean;
  }[];
  activeCohortsStats: {
    cohortName: string;
    totalStudents: number;
    activeThisWeek: number;
    avgProgress: number;
    atRiskCount: number; // Не активны 7+ дней
  }[];
  upcomingWebinars: { title: string; startsAt: Date; enrolledCount: number }[];
}

Конструктор курса

Drag-and-drop редактор структуры курса:

function CourseStructureEditor({ courseId }) {
  const { sections, reorderSections, reorderLessons } = useCourseEditor(courseId);

  return (
    <DndContext onDragEnd={handleDragEnd}>
      <SortableContext items={sections}>
        {sections.map(section => (
          <SortableSection key={section.id} section={section}>
            <SortableContext items={section.lessons}>
              {section.lessons.map(lesson => (
                <SortableLesson key={lesson.id} lesson={lesson} />
              ))}
            </SortableContext>
          </SortableSection>
        ))}
      </SortableContext>
    </DndContext>
  );
}

Урок может быть: видео, текст, презентация (встроенный слайдер), задание, quiz, вебинар. Настройки урока: обязательный/факультативный, открыт сразу или по дедлайну, требует ли завершения предыдущего.

Gradebook

Виртуализированная таблица для больших потоков (200+ студентов × 50+ заданий):

import { useVirtualizer } from '@tanstack/react-virtual';

function Gradebook({ courseId }) {
  const { students, assignments, grades } = useGradebook(courseId);

  return (
    <div className="overflow-auto">
      <table>
        <thead>
          <tr>
            <th className="sticky left-0 z-10 bg-white">Студент</th>
            {assignments.map(a => (
              <th key={a.id} className="min-w-[80px]">{a.shortTitle}</th>
            ))}
            <th>Итог</th>
          </tr>
        </thead>
        <tbody>
          {students.map(student => (
            <tr key={student.id}>
              <td className="sticky left-0 bg-white">{student.name}</td>
              {assignments.map(a => {
                const grade = grades[student.id]?.[a.id];
                return (
                  <td key={a.id} className={gradeColor(grade)}>
                    {grade ? `${grade.score}/${a.maxScore}` : '—'}
                  </td>
                );
              })}
              <td className="font-bold">{calculateFinalGrade(student.id)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

Аналитика курса

Графики:

• Прогресс студентов по дням (гистограмма: сколько уроков пройдено по когорте)
• Retention: сколько % активны через 1/2/4 недели
• Проблемные уроки: на каком уроке чаще всего останавливаются

Таблица студентов с риском:

-- Студенты без активности 7+ дней с прогрессом < 50%
SELECT u.name, u.email, cp.percentage, cp.last_activity_at,
       (CURRENT_DATE - cp.last_activity_at::date) AS days_inactive
FROM course_progress cp
JOIN users u ON u.id = cp.student_id
WHERE cp.course_id = $1
  AND cp.completed_at IS NULL
  AND cp.percentage < 50
  AND cp.last_activity_at < NOW() - INTERVAL '7 days'
ORDER BY days_inactive DESC;

Коммуникация со студентами

Преподаватель может: написать конкретному студенту (личное сообщение), отправить сообщение группе (announcement с push+email), оставить комментарий к проверенному заданию.

Сроки

Дашборд с очередью проверки и статистикой — 4–5 дней. Конструктор курса с drag-and-drop — 7–10 дней. Gradebook с виртуализацией — 3–4 дня. Аналитика с графиками — 4–5 дней.