428 lines
15 KiB
JavaScript
428 lines
15 KiB
JavaScript
'use client';
|
||
|
||
import { useState, useEffect, useCallback } from 'react';
|
||
|
||
import Box from '@mui/material/Box';
|
||
import Card from '@mui/material/Card';
|
||
import Stack from '@mui/material/Stack';
|
||
import Divider from '@mui/material/Divider';
|
||
import Avatar from '@mui/material/Avatar';
|
||
import Button from '@mui/material/Button';
|
||
import Typography from '@mui/material/Typography';
|
||
import CircularProgress from '@mui/material/CircularProgress';
|
||
import LinearProgress from '@mui/material/LinearProgress';
|
||
import { useTheme } from '@mui/material/styles';
|
||
|
||
import { paths } from 'src/routes/paths';
|
||
import { useRouter } from 'src/routes/hooks';
|
||
import { fDateTime } from 'src/utils/format-time';
|
||
import { getClientDashboard, getChildDashboard } from 'src/utils/dashboard-api';
|
||
import { createLiveKitRoom } from 'src/utils/livekit-api';
|
||
import { DashboardContent } from 'src/layouts/dashboard';
|
||
import { useAuthContext } from 'src/auth/hooks';
|
||
import { CONFIG } from 'src/config-global';
|
||
import { varAlpha } from 'src/theme/styles';
|
||
import { Iconify } from 'src/components/iconify';
|
||
|
||
import { CourseWidgetSummary } from '../../course/course-widget-summary';
|
||
import { CourseProgress } from '../../course/course-progress';
|
||
import { CourseMyAccount } from '../../course/course-my-account';
|
||
|
||
// ----------------------------------------------------------------------
|
||
|
||
const formatDateTime = (str) => {
|
||
if (!str) return '—';
|
||
try {
|
||
const date = new Date(str);
|
||
if (isNaN(date.getTime())) return '—';
|
||
const today = new Date();
|
||
const tomorrow = new Date(today);
|
||
tomorrow.setDate(today.getDate() + 1);
|
||
const time = date.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' });
|
||
if (date.toDateString() === today.toDateString()) return `Сегодня, ${time}`;
|
||
if (date.toDateString() === tomorrow.toDateString()) return `Завтра, ${time}`;
|
||
return date.toLocaleDateString('ru-RU', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' });
|
||
} catch {
|
||
return '—';
|
||
}
|
||
};
|
||
|
||
// ----------------------------------------------------------------------
|
||
|
||
function LessonItem({ lesson }) {
|
||
const router = useRouter();
|
||
const [joining, setJoining] = useState(false);
|
||
|
||
const mentorName = lesson.mentor
|
||
? `${lesson.mentor.first_name || ''} ${lesson.mentor.last_name || ''}`.trim() || 'Ментор'
|
||
: 'Ментор';
|
||
|
||
const now = new Date();
|
||
const startTime = new Date(lesson.start_time);
|
||
const diffMin = (startTime - now) / 60000;
|
||
const canJoin = diffMin < 11 && diffMin > -90;
|
||
|
||
const handleJoin = async () => {
|
||
try {
|
||
setJoining(true);
|
||
const res = await createLiveKitRoom(lesson.id);
|
||
const token = res?.access_token || res?.token;
|
||
router.push(`${paths.dashboard.prejoin}?token=${encodeURIComponent(token)}&lesson_id=${lesson.id}`);
|
||
} catch (err) {
|
||
console.error('Join error:', err);
|
||
setJoining(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<Stack
|
||
direction="row"
|
||
spacing={2}
|
||
alignItems="center"
|
||
sx={{
|
||
py: 1.5,
|
||
px: 2,
|
||
borderRadius: 1.5,
|
||
'&:hover': { bgcolor: 'action.hover' },
|
||
}}
|
||
>
|
||
<Avatar sx={{ width: 40, height: 40, bgcolor: 'primary.main', fontSize: 14 }}>
|
||
{mentorName[0]?.toUpperCase()}
|
||
</Avatar>
|
||
<Box sx={{ flex: 1, minWidth: 0 }}>
|
||
<Typography variant="subtitle2" noWrap>
|
||
{lesson.title || lesson.subject || 'Занятие'}
|
||
</Typography>
|
||
<Typography variant="caption" sx={{ color: 'text.secondary' }}>
|
||
{mentorName}
|
||
</Typography>
|
||
</Box>
|
||
{canJoin ? (
|
||
<Button
|
||
size="small"
|
||
variant="contained"
|
||
color="success"
|
||
onClick={handleJoin}
|
||
disabled={joining}
|
||
startIcon={<Iconify icon="solar:videocamera-bold" width={16} />}
|
||
sx={{ flexShrink: 0, minWidth: 110 }}
|
||
>
|
||
{joining ? '...' : 'Подключиться'}
|
||
</Button>
|
||
) : (
|
||
<Typography variant="caption" sx={{ color: 'text.secondary', flexShrink: 0 }}>
|
||
{formatDateTime(lesson.start_time)}
|
||
</Typography>
|
||
)}
|
||
</Stack>
|
||
);
|
||
}
|
||
|
||
// ----------------------------------------------------------------------
|
||
|
||
function HomeworkItem({ homework }) {
|
||
const statusColor = {
|
||
pending: 'warning',
|
||
submitted: 'info',
|
||
reviewed: 'success',
|
||
completed: 'success',
|
||
}[homework.status] || 'default';
|
||
|
||
return (
|
||
<Stack
|
||
direction="row"
|
||
spacing={2}
|
||
alignItems="center"
|
||
sx={{
|
||
py: 1.5,
|
||
px: 2,
|
||
borderRadius: 1.5,
|
||
'&:hover': { bgcolor: 'action.hover' },
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
width: 40,
|
||
height: 40,
|
||
borderRadius: 1,
|
||
bgcolor: `${statusColor}.main`,
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
flexShrink: 0,
|
||
opacity: 0.8,
|
||
}}
|
||
>
|
||
<Iconify icon="solar:document-bold" width={20} sx={{ color: 'white' }} />
|
||
</Box>
|
||
<Box sx={{ flex: 1, minWidth: 0 }}>
|
||
<Typography variant="subtitle2" noWrap>
|
||
{homework.title}
|
||
</Typography>
|
||
<Typography variant="caption" sx={{ color: 'text.secondary' }}>
|
||
{homework.subject || 'Предмет не указан'}
|
||
</Typography>
|
||
</Box>
|
||
{homework.grade != null && (
|
||
<Typography variant="caption" sx={{ color: `${statusColor}.main`, fontWeight: 600, flexShrink: 0 }}>
|
||
{homework.grade}/5
|
||
</Typography>
|
||
)}
|
||
</Stack>
|
||
);
|
||
}
|
||
|
||
// ----------------------------------------------------------------------
|
||
|
||
export function OverviewClientView({ childId, childName }) {
|
||
const theme = useTheme();
|
||
const { user } = useAuthContext();
|
||
const [stats, setStats] = useState(null);
|
||
const [loading, setLoading] = useState(true);
|
||
|
||
const fetchData = useCallback(
|
||
async (signal) => {
|
||
try {
|
||
setLoading(true);
|
||
const data = childId
|
||
? await getChildDashboard(childId, { signal })
|
||
: await getClientDashboard({ signal });
|
||
if (!signal?.aborted) setStats(data);
|
||
} catch (err) {
|
||
if (err?.name === 'AbortError' || err?.name === 'CanceledError') return;
|
||
console.error('Client dashboard error:', err);
|
||
} finally {
|
||
if (!signal?.aborted) setLoading(false);
|
||
}
|
||
},
|
||
[childId]
|
||
);
|
||
|
||
useEffect(() => {
|
||
const controller = new AbortController();
|
||
fetchData(controller.signal);
|
||
return () => controller.abort();
|
||
}, [fetchData]);
|
||
|
||
// Периодическое обновление каждые 60 сек — кнопка «Подключиться» появляется автоматически
|
||
useEffect(() => {
|
||
const id = setInterval(() => {
|
||
const controller = new AbortController();
|
||
fetchData(controller.signal);
|
||
return () => controller.abort();
|
||
}, 60_000);
|
||
return () => clearInterval(id);
|
||
}, [fetchData]);
|
||
|
||
const displayName = childName || user?.first_name || 'Студент';
|
||
|
||
const completionPct =
|
||
stats?.total_lessons > 0
|
||
? Math.round((stats.completed_lessons / stats.total_lessons) * 100)
|
||
: 0;
|
||
|
||
if (loading && !stats) {
|
||
return (
|
||
<Box sx={{ display: 'flex', height: '80vh', alignItems: 'center', justifyContent: 'center' }}>
|
||
<CircularProgress />
|
||
</Box>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<DashboardContent
|
||
maxWidth={false}
|
||
disablePadding
|
||
sx={{ borderTop: { lg: `solid 1px ${varAlpha(theme.vars.palette.grey['500Channel'], 0.12)}` } }}
|
||
>
|
||
<Box sx={{ display: 'flex', flex: '1 1 auto', flexDirection: { xs: 'column', lg: 'row' } }}>
|
||
{/* LEFT */}
|
||
<Box
|
||
sx={{
|
||
gap: 3,
|
||
display: 'flex',
|
||
flex: '1 1 auto',
|
||
flexDirection: 'column',
|
||
px: { xs: 2, sm: 3, xl: 5 },
|
||
py: 3,
|
||
borderRight: { lg: `solid 1px ${varAlpha(theme.vars.palette.grey['500Channel'], 0.12)}` },
|
||
}}
|
||
>
|
||
{/* Stat widgets */}
|
||
<Box
|
||
sx={{
|
||
gap: 3,
|
||
display: 'grid',
|
||
gridTemplateColumns: { xs: 'repeat(2, 1fr)', md: 'repeat(4, 1fr)' },
|
||
}}
|
||
>
|
||
<CourseWidgetSummary
|
||
title="Занятий всего"
|
||
total={Number(stats?.total_lessons || 0)}
|
||
icon={`${CONFIG.site.basePath}/assets/icons/courses/ic-courses-progress.svg`}
|
||
color="primary"
|
||
/>
|
||
<CourseWidgetSummary
|
||
title="Пройдено"
|
||
total={Number(stats?.completed_lessons || 0)}
|
||
icon={`${CONFIG.site.basePath}/assets/icons/courses/ic-courses-certificates.svg`}
|
||
color="success"
|
||
/>
|
||
<CourseWidgetSummary
|
||
title="ДЗ к выполнению"
|
||
total={Number(stats?.homework_pending || 0)}
|
||
icon={`${CONFIG.site.basePath}/assets/icons/courses/ic-courses-completed.svg`}
|
||
color="warning"
|
||
/>
|
||
<CourseWidgetSummary
|
||
title="Средняя оценка"
|
||
total={
|
||
stats?.average_grade
|
||
? `${parseFloat(Number(stats.average_grade).toFixed(1))}/5`
|
||
: '—'
|
||
}
|
||
icon={`${CONFIG.site.basePath}/assets/icons/glass/ic-glass-bag.svg`}
|
||
color="info"
|
||
/>
|
||
</Box>
|
||
|
||
{/* Progress bar */}
|
||
<Card sx={{ p: 3 }}>
|
||
<Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ mb: 2 }}>
|
||
<Typography variant="h6">Прогресс занятий</Typography>
|
||
<Typography variant="h6" sx={{ color: 'primary.main' }}>
|
||
{completionPct}%
|
||
</Typography>
|
||
</Stack>
|
||
<LinearProgress
|
||
variant="determinate"
|
||
value={completionPct}
|
||
sx={{ height: 8, borderRadius: 1, bgcolor: 'background.neutral' }}
|
||
/>
|
||
<Stack direction="row" justifyContent="space-between" sx={{ mt: 1 }}>
|
||
<Typography variant="caption" sx={{ color: 'text.secondary' }}>
|
||
Пройдено: {stats?.completed_lessons || 0}
|
||
</Typography>
|
||
<Typography variant="caption" sx={{ color: 'text.secondary' }}>
|
||
Всего: {stats?.total_lessons || 0}
|
||
</Typography>
|
||
</Stack>
|
||
</Card>
|
||
|
||
{/* Upcoming lessons + homework */}
|
||
<Box
|
||
sx={{
|
||
gap: 3,
|
||
display: 'grid',
|
||
gridTemplateColumns: { xs: '1fr', md: 'repeat(2, 1fr)' },
|
||
}}
|
||
>
|
||
{/* Upcoming lessons */}
|
||
<Card>
|
||
<Stack
|
||
direction="row"
|
||
alignItems="center"
|
||
justifyContent="space-between"
|
||
sx={{ px: 3, py: 2 }}
|
||
>
|
||
<Typography variant="h6">Ближайшие занятия</Typography>
|
||
<Iconify icon="solar:calendar-bold" width={20} sx={{ color: 'primary.main' }} />
|
||
</Stack>
|
||
<Divider />
|
||
{loading ? (
|
||
<Box sx={{ p: 3, textAlign: 'center' }}>
|
||
<CircularProgress size={24} />
|
||
</Box>
|
||
) : stats?.upcoming_lessons?.length > 0 ? (
|
||
<Box sx={{ py: 1 }}>
|
||
{stats.upcoming_lessons.slice(0, 4).map((lesson) => (
|
||
<LessonItem key={lesson.id} lesson={lesson} />
|
||
))}
|
||
</Box>
|
||
) : (
|
||
<Box sx={{ p: 3, textAlign: 'center', color: 'text.secondary' }}>
|
||
<Iconify icon="solar:calendar-bold" width={40} sx={{ mb: 1, opacity: 0.3 }} />
|
||
<Typography variant="body2">Нет запланированных занятий</Typography>
|
||
</Box>
|
||
)}
|
||
</Card>
|
||
|
||
{/* Homework */}
|
||
<Card>
|
||
<Stack
|
||
direction="row"
|
||
alignItems="center"
|
||
justifyContent="space-between"
|
||
sx={{ px: 3, py: 2 }}
|
||
>
|
||
<Typography variant="h6">Домашние задания</Typography>
|
||
<Iconify icon="solar:document-bold" width={20} sx={{ color: 'warning.main' }} />
|
||
</Stack>
|
||
<Divider />
|
||
{loading ? (
|
||
<Box sx={{ p: 3, textAlign: 'center' }}>
|
||
<CircularProgress size={24} />
|
||
</Box>
|
||
) : stats?.recent_homework?.length > 0 ? (
|
||
<Box sx={{ py: 1 }}>
|
||
{stats.recent_homework.slice(0, 4).map((hw) => (
|
||
<HomeworkItem key={hw.id} homework={hw} />
|
||
))}
|
||
</Box>
|
||
) : (
|
||
<Box sx={{ p: 3, textAlign: 'center', color: 'text.secondary' }}>
|
||
<Iconify icon="solar:document-bold" width={40} sx={{ mb: 1, opacity: 0.3 }} />
|
||
<Typography variant="body2">Нет домашних заданий</Typography>
|
||
</Box>
|
||
)}
|
||
</Card>
|
||
</Box>
|
||
</Box>
|
||
|
||
{/* RIGHT sidebar */}
|
||
<Box
|
||
sx={{
|
||
width: 1,
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
px: { xs: 2, sm: 3, xl: 5 },
|
||
pt: { lg: 8 },
|
||
pb: { xs: 8, xl: 10 },
|
||
flexShrink: 0,
|
||
gap: 3,
|
||
maxWidth: { lg: 300, xl: 340 },
|
||
bgcolor: { lg: 'background.neutral' },
|
||
}}
|
||
>
|
||
<CourseMyAccount user={childId ? { first_name: childName } : user} />
|
||
|
||
{/* Next lesson highlight */}
|
||
{stats?.next_lesson && (
|
||
<Card sx={{ p: 2.5, bgcolor: 'primary.lighter' }}>
|
||
<Typography variant="subtitle2" sx={{ mb: 1, color: 'primary.dark' }}>
|
||
Следующее занятие
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ fontWeight: 600, mb: 0.5 }}>
|
||
{stats.next_lesson.title || 'Занятие'}
|
||
</Typography>
|
||
<Typography variant="caption" sx={{ color: 'text.secondary' }}>
|
||
{formatDateTime(stats.next_lesson.start_time)}
|
||
</Typography>
|
||
{stats.next_lesson.mentor && (
|
||
<Stack direction="row" alignItems="center" spacing={1} sx={{ mt: 1.5 }}>
|
||
<Avatar sx={{ width: 24, height: 24, fontSize: 10, bgcolor: 'primary.main' }}>
|
||
{(stats.next_lesson.mentor.first_name || 'М')[0]}
|
||
</Avatar>
|
||
<Typography variant="caption">
|
||
{`${stats.next_lesson.mentor.first_name || ''} ${stats.next_lesson.mentor.last_name || ''}`.trim()}
|
||
</Typography>
|
||
</Stack>
|
||
)}
|
||
</Card>
|
||
)}
|
||
</Box>
|
||
</Box>
|
||
</DashboardContent>
|
||
);
|
||
}
|