349 lines
16 KiB
TypeScript
349 lines
16 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react';
|
|
import { Activity, BarChart3, Car, ChevronRight, CircleAlert, Loader2, Users, Wifi, type LucideIcon } from 'lucide-react';
|
|
import { PageHeader } from '../../components/PageHeader';
|
|
import { useToast } from '../../components/ToastProvider';
|
|
import { listInstructorChatThreads, type InstructorChatThread } from '../../lib/chat';
|
|
import { listInstructorGroups, type InstructorGroup, type InstructorGroupsSummary } from '../../lib/groups';
|
|
import { listInstructorPlatforms, type InstructorPlatform, type InstructorPlatformsSummary } from '../../lib/platforms';
|
|
import type { AppRoute } from '../../routes';
|
|
import type { AuthSession } from '../../types/auth';
|
|
|
|
const emptyPlatformSummary: InstructorPlatformsSummary = {
|
|
totalPlatforms: 0,
|
|
activePlatforms: 0,
|
|
standbyPlatforms: 0,
|
|
errorPlatforms: 0,
|
|
};
|
|
|
|
const emptyGroupSummary: InstructorGroupsSummary = {
|
|
totalGroups: 0,
|
|
assignedPlatforms: 0,
|
|
totalStudents: 0,
|
|
averageProgress: 0,
|
|
};
|
|
|
|
export function DashboardPage({ session, selectedCourseId, onNavigate, onOpenChatThread }: { session: AuthSession; selectedCourseId: string; onNavigate?: (route: AppRoute) => void; onOpenChatThread?: (threadId: string) => void }) {
|
|
const { showToast } = useToast();
|
|
const [platforms, setPlatforms] = useState<InstructorPlatform[]>([]);
|
|
const [platformSummary, setPlatformSummary] = useState<InstructorPlatformsSummary>(emptyPlatformSummary);
|
|
const [groups, setGroups] = useState<InstructorGroup[]>([]);
|
|
const [groupSummary, setGroupSummary] = useState<InstructorGroupsSummary>(emptyGroupSummary);
|
|
const [threads, setThreads] = useState<InstructorChatThread[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
Promise.allSettled([
|
|
listInstructorPlatforms(session.accessToken),
|
|
listInstructorGroups(session.accessToken, selectedCourseId || null),
|
|
listInstructorChatThreads(session.accessToken),
|
|
])
|
|
.then(([platformResult, groupResult, chatResult]) => {
|
|
if (cancelled) return;
|
|
|
|
if (platformResult.status === 'fulfilled') {
|
|
setPlatforms(platformResult.value.platforms);
|
|
setPlatformSummary(platformResult.value.summary);
|
|
} else {
|
|
setPlatforms([]);
|
|
setPlatformSummary(emptyPlatformSummary);
|
|
}
|
|
|
|
if (groupResult.status === 'fulfilled') {
|
|
setGroups(groupResult.value.groups);
|
|
setGroupSummary(groupResult.value.summary);
|
|
} else {
|
|
setGroups([]);
|
|
setGroupSummary(emptyGroupSummary);
|
|
}
|
|
|
|
if (chatResult.status === 'fulfilled') {
|
|
setThreads(chatResult.value);
|
|
} else {
|
|
setThreads([]);
|
|
}
|
|
|
|
const failed = [platformResult, groupResult].filter((result) => result.status === 'rejected');
|
|
setError(failed.length > 0 ? '대시보드 일부 데이터를 불러오지 못했습니다.' : null);
|
|
})
|
|
.finally(() => {
|
|
if (!cancelled) setLoading(false);
|
|
});
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [session.accessToken, selectedCourseId]);
|
|
|
|
const waitingThreads = useMemo(() => threads.filter((thread) => thread.status === 'WAITING_INSTRUCTOR'), [threads]);
|
|
const activeUsers = useMemo(() => {
|
|
const groupActiveUsers = groups.reduce((sum, group) => sum + group.activeUsers, 0);
|
|
if (groupActiveUsers > 0) return groupActiveUsers;
|
|
return platforms.filter((platform) => platform.user).length;
|
|
}, [groups, platforms]);
|
|
|
|
const metrics = [
|
|
{ label: '활성 플랫폼', value: `${platformSummary.activePlatforms}/${platformSummary.totalPlatforms}`, icon: Activity, tone: 'bg-[#f0efff] text-[#4f46e5]' },
|
|
{ label: '총 수강생', value: `${groupSummary.totalStudents}명`, icon: Users, tone: 'bg-[#eff6ff] text-[#2563eb]' },
|
|
{ label: '현재 접속', value: `${activeUsers}명`, icon: Wifi, tone: 'bg-[#f8fafc] text-[#64748b]' },
|
|
{ label: '평균 진도', value: `${groupSummary.averageProgress}%`, icon: BarChart3, tone: 'bg-[#fff7ed] text-[#f97316]' },
|
|
];
|
|
|
|
return (
|
|
<div className="mx-auto max-w-[1220px]">
|
|
<PageHeader route="dashboard" />
|
|
|
|
{error ? <p className="mb-4 rounded-md border border-[#fecdd3] bg-[#fff1f2] px-4 py-3 text-[13px] font-bold text-[#e11d48]">{error}</p> : null}
|
|
|
|
<section className="mb-4 grid gap-3 md:grid-cols-2 xl:grid-cols-4">
|
|
{metrics.map((metric) => (
|
|
<MetricCard key={metric.label} {...metric} loading={loading} />
|
|
))}
|
|
</section>
|
|
|
|
<section className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
|
|
<div className="rounded-lg border border-[#c7d2e0] bg-white">
|
|
<div className="flex items-start justify-between gap-3 border-b border-[#cbd5e1] px-4 py-4">
|
|
<div>
|
|
<h2 className="text-[15px] font-black text-[#111827]">플랫폼 실시간 상태</h2>
|
|
<p className="mt-1 text-[12px] font-bold text-[#64748b]">하드웨어 모니터링</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
className="grid h-8 w-8 shrink-0 place-items-center rounded-md border border-[#dbe3ef] bg-white text-[#64748b] transition hover:border-[#bfdbfe] hover:bg-[#eff6ff] hover:text-[#2563eb]"
|
|
onClick={() => onNavigate?.('platforms')}
|
|
aria-label="플랫폼 관리로 이동"
|
|
title="플랫폼 관리로 이동"
|
|
>
|
|
<ChevronRight size={17} aria-hidden="true" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="max-h-[490px] space-y-3 overflow-y-auto p-4">
|
|
{loading ? (
|
|
<LoadingState message="플랫폼 상태를 불러오는 중입니다." />
|
|
) : platforms.length > 0 ? (
|
|
platforms.map((platform) => (
|
|
<PlatformStatusCard
|
|
key={platform.id}
|
|
platform={platform}
|
|
onEmergencyStop={() => {
|
|
showToast({
|
|
title: '긴급 정지 요청이 전송되었습니다.',
|
|
message: platform.name,
|
|
variant: 'error',
|
|
});
|
|
}}
|
|
/>
|
|
))
|
|
) : (
|
|
<EmptyState message="등록된 플랫폼이 없습니다." />
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-lg border border-[#c7d2e0] bg-white">
|
|
<div className="flex items-start justify-between gap-3 border-b border-[#cbd5e1] px-4 py-4">
|
|
<div>
|
|
<h2 className="text-[15px] font-black text-[#111827]">그룹 진행 요약</h2>
|
|
<p className="mt-1 text-[12px] font-bold text-[#64748b]">그룹 구성, 플랫폼 배정, 진행률 조회</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
className="grid h-8 w-8 shrink-0 place-items-center rounded-md border border-[#dbe3ef] bg-white text-[#64748b] transition hover:border-[#bfdbfe] hover:bg-[#eff6ff] hover:text-[#2563eb]"
|
|
onClick={() => onNavigate?.('groups')}
|
|
aria-label="그룹 관리로 이동"
|
|
title="그룹 관리로 이동"
|
|
>
|
|
<ChevronRight size={17} aria-hidden="true" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="max-h-[490px] space-y-3 overflow-y-auto p-4">
|
|
{loading ? (
|
|
<LoadingState message="그룹 진행 정보를 불러오는 중입니다." />
|
|
) : groups.length > 0 ? (
|
|
groups.map((group) => (
|
|
<GroupSummaryCard key={group.id} group={group} />
|
|
))
|
|
) : (
|
|
<EmptyState message="등록된 그룹이 없습니다." />
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="mt-4 rounded-lg border border-[#c7d2e0] bg-white">
|
|
<div className="flex items-start justify-between gap-4 border-b border-[#cbd5e1] px-4 py-4">
|
|
<div>
|
|
<h2 className="text-[15px] font-black text-[#111827]">AI 가이드 에스컬레이션</h2>
|
|
<p className="mt-1 text-[12px] font-bold text-[#64748b]">강사 지원이 필요한 질문</p>
|
|
</div>
|
|
<span className="rounded-full bg-[#fff1f2] px-2.5 py-1 text-[13px] font-bold text-[#e11d48]">{waitingThreads.length} 건</span>
|
|
</div>
|
|
|
|
<div className="divide-y divide-[#e2e8f0]">
|
|
{loading ? (
|
|
<LoadingState message="문의 목록을 불러오는 중입니다." />
|
|
) : waitingThreads.length > 0 ? (
|
|
waitingThreads.slice(0, 5).map((thread) => (
|
|
<EscalationRow key={thread.id} thread={thread} onRespond={() => onOpenChatThread?.(thread.id)} />
|
|
))
|
|
) : (
|
|
<EmptyState message="강사 지원이 필요한 질문이 없습니다." />
|
|
)}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function PlatformStatusCard({ platform, onEmergencyStop }: { platform: InstructorPlatform; onEmergencyStop: () => void }) {
|
|
return (
|
|
<article className="flex min-h-[72px] items-center gap-3 rounded-lg border border-[#c7d2e0] bg-white px-3 py-3">
|
|
<div className={`grid h-10 w-10 shrink-0 place-items-center rounded-md ${platform.status === '오류' ? 'bg-[#fff1f2] text-[#e11d48]' : 'bg-[#f0efff] text-[#4f46e5]'}`}>
|
|
<Car size={18} aria-hidden="true" />
|
|
</div>
|
|
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<h3 className="truncate text-[14px] font-bold text-[#111827]">{platform.name}</h3>
|
|
<span className={`inline-flex h-6 items-center rounded-full border border-current/20 px-2 text-[11px] font-bold ${statusTone(platform.status)}`}>{platform.status}</span>
|
|
</div>
|
|
<p className="mt-1 truncate text-[12px] font-bold text-[#64748b]">
|
|
{platform.user ? `사용자: ${platform.user} 배터리: ${platform.battery}% 속도: ${platform.speed}` : `배터리: ${platform.battery}%`}
|
|
</p>
|
|
</div>
|
|
|
|
{platform.emergencyStop ? (
|
|
<button className="inline-flex h-8 shrink-0 items-center gap-1.5 rounded-md bg-[#e11d48] px-3 text-[12px] font-bold text-white hover:bg-[#be123c]" type="button" onClick={onEmergencyStop}>
|
|
<CircleAlert size={14} aria-hidden="true" />
|
|
긴급 정지
|
|
</button>
|
|
) : null}
|
|
</article>
|
|
);
|
|
}
|
|
|
|
function GroupSummaryCard({ group }: { group: InstructorGroup }) {
|
|
return (
|
|
<article className="rounded-lg border border-[#c7d2e0] bg-white px-4 py-3">
|
|
<div className="mb-3 flex items-start justify-between gap-4">
|
|
<div className="min-w-0">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<h3 className="text-[14px] font-black text-[#111827]">{group.name}</h3>
|
|
<span className="inline-flex h-6 items-center rounded-full border border-[#c7d2e0] bg-[#f8fafc] px-2 text-[11px] font-bold text-[#64748b]">{group.status}</span>
|
|
</div>
|
|
<p className="mt-1 text-[12px] font-bold text-[#64748b]">{group.members.length}명 | {group.week}</p>
|
|
</div>
|
|
<span className={`inline-flex h-7 shrink-0 items-center rounded-full border px-2.5 text-[11px] font-black ${group.platform === '미배정' ? 'border-[#d1d9e6] bg-[#f8fafc] text-[#94a3b8]' : 'border-[#c7d2fe] bg-[#eef2ff] text-[#4f46e5]'}`}>{group.platform}</span>
|
|
</div>
|
|
|
|
<div className="mb-2 flex items-center justify-between text-[12px] font-bold text-[#475569]">
|
|
<span>진행률</span>
|
|
<span className="text-[#4f46e5]">{group.progress}%</span>
|
|
</div>
|
|
<div className="h-1.5 overflow-hidden rounded-full bg-[#dbe3ef]">
|
|
<div className="h-full rounded-full bg-[#4f46e5]" style={{ width: `${group.progress}%` }} />
|
|
</div>
|
|
|
|
<div className="mt-3 flex items-center gap-4 text-[11px] font-bold text-[#94a3b8]">
|
|
<span>
|
|
완료 <strong className="text-[#64748b]">{group.completedMissions}</strong>
|
|
</span>
|
|
<span>
|
|
활동 <strong className={group.activeUsers > 0 ? 'text-[#4f46e5]' : 'text-[#94a3b8]'}>{group.activeUsers}</strong>
|
|
</span>
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|
|
|
|
function EscalationRow({ thread, onRespond }: { thread: InstructorChatThread; onRespond?: () => void }) {
|
|
return (
|
|
<article className="grid gap-3 px-4 py-4 lg:grid-cols-[minmax(150px,180px)_minmax(0,1fr)_auto] lg:items-center">
|
|
<div className="flex min-w-0 items-center gap-2">
|
|
<span className="grid h-8 w-8 shrink-0 place-items-center rounded-md bg-[#fff1f2] text-[#e11d48]">
|
|
<CircleAlert size={16} aria-hidden="true" />
|
|
</span>
|
|
<div className="min-w-0">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<h3 className="truncate text-[14px] font-bold text-[#111827]">{thread.studentName}</h3>
|
|
<span className="rounded border border-[#d1d9e6] px-1.5 py-0.5 text-[11px] font-bold text-[#475569]">{thread.groupName ?? (thread.week ? `${thread.week}주차` : '미배정')}</span>
|
|
</div>
|
|
<p className="mt-1 text-[12px] font-medium text-[#94a3b8]">{formatRelativeTime(thread.lastMessageAt)}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="min-w-0 text-[13px] font-semibold leading-6 text-[#111827]">{thread.lastMessage}</p>
|
|
|
|
<button
|
|
className="h-8 cursor-pointer justify-self-start rounded-md border border-[#c7d2fe] bg-[#eef2ff] px-3 text-[12px] font-bold text-[#4f46e5] hover:bg-[#e0e7ff] lg:justify-self-end"
|
|
type="button"
|
|
onClick={onRespond}
|
|
>
|
|
응답하기
|
|
</button>
|
|
</article>
|
|
);
|
|
}
|
|
|
|
function MetricCard({ label, value, icon: Icon, tone, loading = false }: { label: string; value: string; icon: LucideIcon; tone: string; loading?: boolean }) {
|
|
return (
|
|
<article className="rounded-lg border border-[#c7d2e0] bg-white px-5 py-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-[12px] font-semibold text-[#64748b]">{label}</p>
|
|
<p className="mt-2 text-[20px] font-black leading-none text-[#111827]">{loading ? '-' : value}</p>
|
|
</div>
|
|
<span className={`grid h-11 w-11 shrink-0 place-items-center rounded-md ${tone}`}>
|
|
<Icon size={28} aria-hidden="true" />
|
|
</span>
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|
|
|
|
function LoadingState({ message }: { message: string }) {
|
|
return (
|
|
<div className="flex h-[180px] items-center justify-center text-[#64748b]">
|
|
<Loader2 className="mr-2 animate-spin" size={18} aria-hidden="true" />
|
|
<span className="text-[13px] font-bold">{message}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function EmptyState({ message }: { message: string }) {
|
|
return (
|
|
<div className="flex h-[180px] items-center justify-center px-4 text-center">
|
|
<p className="text-[13px] font-bold text-[#64748b]">{message}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function statusTone(status: string) {
|
|
if (status === '활성') return 'bg-[#f0efff] text-[#4f46e5]';
|
|
if (status === '오류') return 'bg-[#fff1f2] text-[#e11d48]';
|
|
return 'bg-[#f1f5f9] text-[#64748b]';
|
|
}
|
|
|
|
function formatRelativeTime(value: string | undefined) {
|
|
if (!value) return '-';
|
|
const time = new Date(value).getTime();
|
|
if (Number.isNaN(time)) return '-';
|
|
|
|
const diffMinutes = Math.max(0, Math.floor((Date.now() - time) / 60000));
|
|
if (diffMinutes < 1) return '방금 전';
|
|
if (diffMinutes < 60) return `${diffMinutes}분 전`;
|
|
|
|
const diffHours = Math.floor(diffMinutes / 60);
|
|
if (diffHours < 24) return `${diffHours}시간 전`;
|
|
|
|
const diffDays = Math.floor(diffHours / 24);
|
|
return `${diffDays}일 전`;
|
|
}
|