platform/lms-adm-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

platform/lms-adm-fe release promotion snapshot

Browse Source
This commit is contained in:
web-admin
2026-08-03 05:08:15 +00:00
parent 14e0cee1a0
commit c1d3c660c2
8 changed files with 609 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/curriculum/CurriculumPage.tsx
+420 -22
View File
@@ -1,14 +1,77 @@
import { useEffect, useMemo, useRef, useState } from 'react';
import { CheckCircle2, CirclePlay, Clock3, FileCode2, FileText, Loader2, Plus, RadioTower, Save, Target, Trash2, Upload, type LucideIcon } from 'lucide-react';
import { CheckCircle2, CirclePlay, Clock3, FileCode2, FileText, Loader2, Map, Plus, RadioTower, Save, Target, Trash2, Upload, type LucideIcon } from 'lucide-react';
import { ConfirmDialog } from '../../components/ConfirmDialog';
import { PageHeader } from '../../components/PageHeader';
import { useToast } from '../../components/ToastProvider';
import { deleteCurriculumReference, deleteInstructorCurriculumWeek, getInstructorCurriculum, updateInstructorCurriculum, uploadCurriculumExampleCode, uploadCurriculumReference, type CurriculumWeek, type InstructorCurriculumResponse } from '../../lib/curriculum';
import { createInstructorCurriculumMap, deleteCurriculumReference, deleteInstructorCurriculumWeek, getInstructorCurriculum, updateInstructorCurriculum, uploadCurriculumExampleCode, uploadCurriculumReference, type CurriculumEnvironmentProfile, type CurriculumWeek, type InstructorCurriculumResponse } from '../../lib/curriculum';
import { listInstructorGroups, type InstructorGroup } from '../../lib/groups';
import type { AuthSession } from '../../types/auth';
const CURRICULUM_SELECTED_GROUP_STORAGE_PREFIX = 'lms-admin-curriculum-selected-group-id';
type ModuleParameterDraft = {
key: string;
value: string;
};
function parseModuleParameter(parameter: string): ModuleParameterDraft {
const separatorIndex = parameter.indexOf(':=');
if (separatorIndex < 0) return { key: parameter.trim(), value: '' };
return {
key: parameter.slice(0, separatorIndex).trim(),
value: parameter.slice(separatorIndex + 2).trim(),
};
}
function readEnvironmentModuleIds(profile: CurriculumEnvironmentProfile, modules: NonNullable<CurriculumWeek['modules']>): string[] {
const config = profile.config;
const moduleSet = config && typeof config.moduleSet === 'object' && config.moduleSet !== null && !Array.isArray(config.moduleSet)
? config.moduleSet as Record<string, unknown>
: null;
if (!moduleSet || moduleSet.includeUnlisted !== false || !Array.isArray(moduleSet.modules)) {
return modules.map((module) => module.id);
}
return moduleSet.modules.flatMap((item) => (
item && typeof item === 'object' && typeof (item as Record<string, unknown>).id === 'string'
? [(item as Record<string, unknown>).id as string]
: []
));
}
function readEnvironmentModuleParameters(profile: CurriculumEnvironmentProfile): Record<string, ModuleParameterDraft[]> {
const config = profile.config;
const moduleSet = config && typeof config.moduleSet === 'object' && config.moduleSet !== null && !Array.isArray(config.moduleSet)
? config.moduleSet as Record<string, unknown>
: null;
if (!moduleSet || !Array.isArray(moduleSet.modules)) return {};
return Object.fromEntries(moduleSet.modules.flatMap((item) => {
if (!item || typeof item !== 'object') return [];
const module = item as Record<string, unknown>;
if (typeof module.id !== 'string') return [];
const parameters = Array.isArray(module.defaultParameters)
? module.defaultParameters.filter((value): value is string => typeof value === 'string').map(parseModuleParameter)
: [];
return [[module.id, parameters]];
}));
}
function readEnvironmentModuleDockerImages(profile: CurriculumEnvironmentProfile): Record<string, string> {
const config = profile.config;
const moduleSet = config && typeof config.moduleSet === 'object' && config.moduleSet !== null && !Array.isArray(config.moduleSet)
? config.moduleSet as Record<string, unknown>
: null;
if (!moduleSet || !Array.isArray(moduleSet.modules)) return {};
return Object.fromEntries(moduleSet.modules.flatMap((item) => {
if (!item || typeof item !== 'object') return [];
const module = item as Record<string, unknown>;
return typeof module.id === 'string' && typeof module.dockerImage === 'string'
? [[module.id, module.dockerImage]]
: [];
}));
}
export function CurriculumPage({ session, selectedCourseId }: { session: AuthSession; selectedCourseId: string }) {
const { showToast } = useToast();
const [weeks, setWeeks] = useState<CurriculumWeek[]>([]);
@@ -31,9 +94,19 @@ export function CurriculumPage({ session, selectedCourseId }: { session: AuthSes
const [draftTopicConcepts, setDraftTopicConcepts] = useState<string[]>([]);
const [draftPracticeContents, setDraftPracticeContents] = useState<Array<{ title: string; description: string }>>([]);
const [moduleEnabledById, setModuleEnabledById] = useState<Record<string, boolean>>({});
const [moduleDefaultParametersById, setModuleDefaultParametersById] = useState<Record<string, ModuleParameterDraft[]>>({});
const [environmentModuleIdsByPlatformKey, setEnvironmentModuleIdsByPlatformKey] = useState<Record<string, string[]>>({});
const [environmentModuleParametersByPlatformKey, setEnvironmentModuleParametersByPlatformKey] = useState<Record<string, Record<string, ModuleParameterDraft[]>>>({});
const [environmentModuleDockerImagesByPlatformKey, setEnvironmentModuleDockerImagesByPlatformKey] = useState<Record<string, Record<string, string>>>({});
const [tagOptions, setTagOptions] = useState<NonNullable<InstructorCurriculumResponse['tagOptions']>>([]);
const [visualizationPlatforms, setVisualizationPlatforms] = useState<NonNullable<InstructorCurriculumResponse['visualizationPlatforms']>>([]);
const [visualizationEnabledByKey, setVisualizationEnabledByKey] = useState<Record<string, boolean>>({});
const [mapOptions, setMapOptions] = useState<NonNullable<InstructorCurriculumResponse['mapOptions']>>([]);
const [mapEnabledByKey, setMapEnabledByKey] = useState<Record<string, boolean>>({});
const [mapCreateOpen, setMapCreateOpen] = useState(false);
const [mapName, setMapName] = useState('');
const [mapDescription, setMapDescription] = useState('');
const [creatingMap, setCreatingMap] = useState(false);
const [referenceTitle, setReferenceTitle] = useState('');
const [referenceFile, setReferenceFile] = useState<File | null>(null);
const [exampleCodeTitle, setExampleCodeTitle] = useState('');
@@ -90,6 +163,7 @@ export function CurriculumPage({ session, selectedCourseId }: { session: AuthSes
setWeeks(payload.weeks);
setTagOptions(payload.tagOptions ?? []);
setVisualizationPlatforms(payload.visualizationPlatforms ?? []);
setMapOptions(payload.mapOptions ?? []);
const progress = resolveProgressSelection(payload.weeks, payload.setting);
setCurrentProgressWeek(progress.week);
setCurrentProgressLearningStep(progress.learningStep);
@@ -164,7 +238,21 @@ export function CurriculumPage({ session, selectedCourseId }: { session: AuthSes
setDraftTopicConcepts(selectedWeek.topics.map((_, index) => selectedWeek.detail.learningSteps?.[index]?.concepts?.join('\n') ?? ''));
setDraftPracticeContents(selectedWeek.detail.practiceContents?.length ? selectedWeek.detail.practiceContents : []);
setModuleEnabledById(Object.fromEntries((selectedWeek.modules ?? []).map((module) => [module.id, module.enabled !== false])));
setModuleDefaultParametersById(Object.fromEntries((selectedWeek.modules ?? []).map((module) => [module.id, (module.defaultParameters ?? []).map(parseModuleParameter)])));
setEnvironmentModuleIdsByPlatformKey(Object.fromEntries((selectedWeek.environmentProfiles ?? []).map((profile) => [
profile.platformKey,
readEnvironmentModuleIds(profile, selectedWeek.modules ?? []),
])));
setEnvironmentModuleParametersByPlatformKey(Object.fromEntries((selectedWeek.environmentProfiles ?? []).map((profile) => [
profile.platformKey,
readEnvironmentModuleParameters(profile),
])));
setEnvironmentModuleDockerImagesByPlatformKey(Object.fromEntries((selectedWeek.environmentProfiles ?? []).map((profile) => [
profile.platformKey,
readEnvironmentModuleDockerImages(profile),
])));
setVisualizationEnabledByKey(Object.fromEntries((selectedWeek.visualizationPlatforms ?? []).map((platform) => [platform.key, true])));
setMapEnabledByKey(Object.fromEntries((selectedWeek.mapKeys ?? []).map((key) => [key, true])));
setReferenceTitle('');
setReferenceFile(null);
setExampleCodeTitle('');
@@ -330,6 +418,23 @@ export function CurriculumPage({ session, selectedCourseId }: { session: AuthSes
const disabledModuleIds = (selectedWeek.modules ?? [])
.filter((module) => moduleEnabledById[module.id] === false)
.map((module) => module.id);
const moduleDefaultParameters = (selectedWeek.modules ?? []).map((module) => ({
moduleId: module.id,
parameters: (moduleDefaultParametersById[module.id] ?? [])
.filter((parameter) => parameter.key.trim())
.map((parameter) => `${parameter.key.trim()}:=${parameter.value.trim()}`),
}));
const environmentModuleSets = (selectedWeek.environmentProfiles ?? []).map((profile) => ({
platformKey: profile.platformKey,
moduleIds: environmentModuleIdsByPlatformKey[profile.platformKey] ?? [],
modules: (environmentModuleIdsByPlatformKey[profile.platformKey] ?? []).map((id) => ({
id,
defaultParameters: (environmentModuleParametersByPlatformKey[profile.platformKey]?.[id] ?? [])
.filter((parameter) => parameter.key.trim())
.map((parameter) => `${parameter.key.trim()}:=${parameter.value.trim()}`),
dockerImage: environmentModuleDockerImagesByPlatformKey[profile.platformKey]?.[id]?.trim() || undefined,
})),
}));
const payload = await updateInstructorCurriculum(session.accessToken, {
courseId: selectedCourseId || null,
groupId: selectedGroupId || null,
@@ -337,9 +442,12 @@ export function CurriculumPage({ session, selectedCourseId }: { session: AuthSes
activeLearningStep,
applyToStudents: false,
disabledModuleIds,
moduleDefaultParameters,
environmentModuleSets,
visualizationPlatformKeys: visualizationPlatforms
.filter((platform) => visualizationEnabledByKey[platform.key])
.map((platform) => platform.key),
mapKeys: mapOptions.filter((map) => mapEnabledByKey[map.key]).map((map) => map.key),
});
applyPayload(payload);
setActiveWeek(selectedWeek.week);
@@ -354,6 +462,29 @@ export function CurriculumPage({ session, selectedCourseId }: { session: AuthSes
}
};
const handleCreateMap = async () => {
const name = mapName.trim();
if (!name) return;
setCreatingMap(true);
try {
const map = await createInstructorCurriculumMap(session.accessToken, {
courseId: selectedCourseId || null,
name,
description: mapDescription.trim(),
});
setMapOptions((current) => [...current, map]);
setMapEnabledByKey((current) => ({ ...current, [map.key]: true }));
setMapCreateOpen(false);
setMapName('');
setMapDescription('');
showToast({ title: '학습 맵이 추가되었습니다.', message: '현재 주차에 선택된 상태입니다.' });
} catch (reason) {
setError(reason instanceof Error ? reason.message : '학습 맵을 등록하지 못했습니다.');
} finally {
setCreatingMap(false);
}
};
const handleAddWeek = async () => {
const nextWeek = Math.max(0, ...weeks.map((week) => week.week)) + 1;
setSaving(true);
@@ -767,34 +898,236 @@ export function CurriculumPage({ session, selectedCourseId }: { session: AuthSes
{selectedWeek?.modules?.length ? selectedWeek.modules.map((module) => {
const enabled = moduleEnabledById[module.id] !== false;
return (
<label
<div
key={module.id}
className={`flex cursor-pointer items-center gap-3 rounded-lg border px-4 py-3 transition ${enabled ? 'border-[#d1d9e6] bg-white hover:bg-[#f8fafc]' : 'border-[#cbd5e1] bg-[#f8fafc] opacity-70 hover:bg-[#f1f5f9]'}`}
className={`rounded-lg border px-4 py-3 transition ${enabled ? 'border-[#d1d9e6] bg-white hover:bg-[#f8fafc]' : 'border-[#cbd5e1] bg-[#f8fafc] opacity-70 hover:bg-[#f1f5f9]'}`}
>
<input
type="checkbox"
className="h-4 w-4 shrink-0 cursor-pointer rounded border-[#cbd5e1] text-[#2563eb] focus:ring-[#2563eb]"
checked={enabled}
onChange={(event) => {
const checked = event.target.checked;
setModuleEnabledById((current) => ({ ...current, [module.id]: checked }));
}}
/>
<span className="grid h-8 w-8 shrink-0 place-items-center rounded-md bg-[#ede9ff] text-[12px] font-black text-[#4f46e5]">{module.sortOrder}</span>
<span className="min-w-0 flex-1">
<span className="block truncate text-[14px] font-black text-[#111827]">{module.name}</span>
<span className="mt-1 block truncate text-[12px] font-bold text-[#64748b]">{module.category} · {module.folderName}</span>
</span>
<span className={`shrink-0 rounded-md px-2.5 py-1 text-[11px] font-black ${enabled ? 'bg-[#dcfce7] text-[#15803d]' : 'bg-[#e2e8f0] text-[#64748b]'}`}>
{enabled ? '사용' : '미사용'}
</span>
</label>
<div className="flex items-center gap-3">
<input
type="checkbox"
className="h-4 w-4 shrink-0 cursor-pointer rounded border-[#cbd5e1] text-[#2563eb] focus:ring-[#2563eb]"
checked={enabled}
onChange={(event) => {
const checked = event.target.checked;
setModuleEnabledById((current) => ({ ...current, [module.id]: checked }));
}}
/>
<span className="grid h-8 w-8 shrink-0 place-items-center rounded-md bg-[#ede9ff] text-[12px] font-black text-[#4f46e5]">{module.sortOrder}</span>
<span className="min-w-0 flex-1">
<span className="block truncate text-[14px] font-black text-[#111827]">{module.name}</span>
<span className="mt-1 block truncate text-[12px] font-bold text-[#64748b]">{module.category} · {module.folderName}</span>
</span>
<span className={`shrink-0 rounded-md px-2.5 py-1 text-[11px] font-black ${enabled ? 'bg-[#dcfce7] text-[#15803d]' : 'bg-[#e2e8f0] text-[#64748b]'}`}>
{enabled ? '사용' : '미사용'}
</span>
</div>
<div className="mt-3 border-t border-[#e2e8f0] pt-3">
<div className="flex items-center justify-between gap-3">
<span className="text-[12px] font-bold text-[#475569]">기본 파라미터</span>
<button
type="button"
className="inline-flex h-7 cursor-pointer items-center gap-1 rounded-md border border-[#bfdbfe] px-2 text-[12px] font-bold text-[#2563eb] transition hover:bg-[#eff6ff] disabled:cursor-not-allowed disabled:opacity-50"
disabled={!enabled}
onClick={() => setModuleDefaultParametersById((current) => ({
...current,
[module.id]: [...(current[module.id] ?? []), { key: '', value: '' }],
}))}
>
<Plus className="h-3.5 w-3.5" />
행 추가
</button>
</div>
<div className="mt-2 grid gap-2">
{(moduleDefaultParametersById[module.id] ?? []).map((parameter, parameterIndex) => (
<div className="grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_28px] items-center gap-2" key={`${module.id}-${parameterIndex}`}>
<input
className="h-8 min-w-0 rounded-md border border-[#cbd5e1] bg-white px-2.5 font-mono text-[12px] text-[#111827] outline-none transition focus:border-[#2563eb] focus:ring-2 focus:ring-[#bfdbfe] disabled:cursor-not-allowed disabled:bg-[#f1f5f9]"
value={parameter.key}
placeholder="키"
disabled={!enabled}
onChange={(event) => setModuleDefaultParametersById((current) => ({
...current,
[module.id]: (current[module.id] ?? []).map((item, index) => index === parameterIndex ? { ...item, key: event.target.value } : item),
}))}
/>
<input
className="h-8 min-w-0 rounded-md border border-[#cbd5e1] bg-white px-2.5 font-mono text-[12px] text-[#111827] outline-none transition focus:border-[#2563eb] focus:ring-2 focus:ring-[#bfdbfe] disabled:cursor-not-allowed disabled:bg-[#f1f5f9]"
value={parameter.value}
placeholder="값"
disabled={!enabled}
onChange={(event) => setModuleDefaultParametersById((current) => ({
...current,
[module.id]: (current[module.id] ?? []).map((item, index) => index === parameterIndex ? { ...item, value: event.target.value } : item),
}))}
/>
<button
type="button"
title="행 삭제"
aria-label="행 삭제"
className="grid h-7 w-7 cursor-pointer place-items-center rounded-md text-[#94a3b8] transition hover:bg-[#fef2f2] hover:text-[#dc2626] disabled:cursor-not-allowed disabled:opacity-50"
disabled={!enabled}
onClick={() => setModuleDefaultParametersById((current) => ({
...current,
[module.id]: (current[module.id] ?? []).filter((_, index) => index !== parameterIndex),
}))}
>
<Trash2 className="h-3.5 w-3.5" />
</button>
</div>
))}
</div>
</div>
</div>
);
}) : (
<p className="rounded-lg border border-dashed border-[#d1d9e6] px-4 py-10 text-center text-[13px] font-bold text-[#64748b]">등록된 모듈이 없습니다.</p>
)}
</div>
</section>
{(selectedWeek?.environmentProfiles?.length ?? 0) > 0 ? (
<section className="border-t border-[#cbd5e1] pt-4">
<div>
<h3 className="text-[15px] font-black text-[#111827]">환경별 모듈 구성</h3>
<p className="mt-1 text-[12px] font-bold text-[#64748b]">소스 저장소는 공통으로 유지하고, 로컬과 플랫폼에서 실행할 모듈만 다르게 선택합니다.</p>
</div>
<div className="mt-3 grid gap-3">
{(selectedWeek.environmentProfiles ?? []).map((profile) => {
const selectedModuleIds = new Set(environmentModuleIdsByPlatformKey[profile.platformKey] ?? []);
const selectedCount = (selectedWeek.modules ?? []).filter((module) => selectedModuleIds.has(module.id)).length;
const targetLabel = profile.platformKey === 'futuredrive-local-pc' ? '로컬' : '플랫폼';
return (
<div key={profile.id} className="rounded-lg border border-[#d1d9e6] bg-[#f8fafc] p-3">
<div className="flex items-center justify-between gap-3">
<div className="min-w-0">
<span className="block truncate text-[13px] font-black text-[#111827]">{profile.name}</span>
<span className="mt-0.5 block text-[11px] font-bold text-[#64748b]">{targetLabel} · {profile.profileType}</span>
</div>
<span className="shrink-0 rounded-md bg-white px-2.5 py-1 text-[11px] font-black text-[#475569]">{selectedCount}/{selectedWeek.modules?.length ?? 0}</span>
</div>
<div className="mt-3 grid gap-1.5 sm:grid-cols-2">
{(selectedWeek.modules ?? []).map((module) => {
const globallyEnabled = moduleEnabledById[module.id] !== false;
const checked = selectedModuleIds.has(module.id);
const parameterRows = environmentModuleParametersByPlatformKey[profile.platformKey]?.[module.id] ?? [];
return (
<div
key={module.id}
className={`min-w-0 rounded-md border px-2.5 py-2 text-[12px] font-bold transition ${globallyEnabled ? 'border-[#dbe3ee] bg-white hover:border-[#93c5fd]' : 'cursor-not-allowed border-[#e2e8f0] bg-[#f1f5f9] text-[#94a3b8]'}`}
>
<label className={`flex min-w-0 items-center gap-2 ${globallyEnabled ? 'cursor-pointer' : 'cursor-not-allowed'}`}>
<input
type="checkbox"
className="h-3.5 w-3.5 shrink-0 cursor-pointer rounded border-[#cbd5e1] text-[#2563eb] focus:ring-[#2563eb] disabled:cursor-not-allowed"
checked={checked}
disabled={!globallyEnabled}
onChange={(event) => {
const enabled = event.target.checked;
setEnvironmentModuleIdsByPlatformKey((current) => {
const currentIds = new Set(current[profile.platformKey] ?? []);
if (enabled) currentIds.add(module.id);
else currentIds.delete(module.id);
return { ...current, [profile.platformKey]: [...currentIds] };
});
if (!enabled) {
setEnvironmentModuleParametersByPlatformKey((current) => {
const profileParameters = { ...(current[profile.platformKey] ?? {}) };
delete profileParameters[module.id];
return { ...current, [profile.platformKey]: profileParameters };
});
setEnvironmentModuleDockerImagesByPlatformKey((current) => {
const profileImages = { ...(current[profile.platformKey] ?? {}) };
delete profileImages[module.id];
return { ...current, [profile.platformKey]: profileImages };
});
}
}}
/>
<span className="min-w-0 truncate">{module.name}</span>
</label>
{checked ? (
<div className="mt-2 border-t border-[#e2e8f0] pt-2">
<label className="mb-2 block text-[10px] text-[#64748b]">
<span className="mb-1 block">실행 이미지</span>
<input
value={environmentModuleDockerImagesByPlatformKey[profile.platformKey]?.[module.id] ?? ''}
placeholder={module.dockerImage ?? '기본 이미지 사용'}
className="h-7 w-full rounded border border-[#dbe3ee] px-1.5 font-mono text-[11px] font-medium outline-none focus:border-[#60a5fa]"
onChange={(event) => setEnvironmentModuleDockerImagesByPlatformKey((current) => ({
...current,
[profile.platformKey]: {
...(current[profile.platformKey] ?? {}),
[module.id]: event.target.value,
},
}))}
/>
</label>
<div className="mb-1 flex items-center justify-between gap-2 text-[10px] text-[#64748b]">
<span>실행 파라미터</span>
<button
type="button"
className="flex h-5 w-5 items-center justify-center rounded text-[#2563eb] hover:bg-[#eff6ff]"
aria-label={`${module.name} 파라미터 추가`}
onClick={() => setEnvironmentModuleParametersByPlatformKey((current) => ({
...current,
[profile.platformKey]: {
...(current[profile.platformKey] ?? {}),
[module.id]: [...(current[profile.platformKey]?.[module.id] ?? []), { key: '', value: '' }],
},
}))}
>
<Plus className="h-3.5 w-3.5" />
</button>
</div>
{parameterRows.map((parameter, parameterIndex) => (
<div key={`${module.id}-${parameterIndex}`} className="mb-1 flex items-center gap-1">
<input
value={parameter.key}
placeholder="키"
className="min-w-0 flex-1 rounded border border-[#dbe3ee] px-1.5 py-1 text-[11px] font-medium outline-none focus:border-[#60a5fa]"
onChange={(event) => setEnvironmentModuleParametersByPlatformKey((current) => {
const rows = [...(current[profile.platformKey]?.[module.id] ?? [])];
rows[parameterIndex] = { ...rows[parameterIndex], key: event.target.value };
return { ...current, [profile.platformKey]: { ...(current[profile.platformKey] ?? {}), [module.id]: rows } };
})}
/>
<input
value={parameter.value}
placeholder="값"
className="min-w-0 flex-1 rounded border border-[#dbe3ee] px-1.5 py-1 text-[11px] font-medium outline-none focus:border-[#60a5fa]"
onChange={(event) => setEnvironmentModuleParametersByPlatformKey((current) => {
const rows = [...(current[profile.platformKey]?.[module.id] ?? [])];
rows[parameterIndex] = { ...rows[parameterIndex], value: event.target.value };
return { ...current, [profile.platformKey]: { ...(current[profile.platformKey] ?? {}), [module.id]: rows } };
})}
/>
<button
type="button"
className="flex h-5 w-5 shrink-0 items-center justify-center rounded text-[#94a3b8] hover:bg-[#f1f5f9] hover:text-[#dc2626]"
aria-label={`${module.name} 파라미터 삭제`}
onClick={() => setEnvironmentModuleParametersByPlatformKey((current) => ({
...current,
[profile.platformKey]: {
...(current[profile.platformKey] ?? {}),
[module.id]: (current[profile.platformKey]?.[module.id] ?? []).filter((_, index) => index !== parameterIndex),
},
}))}
>
<Trash2 className="h-3 w-3" />
</button>
</div>
))}
</div>
) : null}
</div>
);
})}
</div>
</div>
);
})}
</div>
</section>
) : null}
<section className="border-t border-[#cbd5e1] pt-4">
<div className="flex items-center justify-between gap-3">
<div>
@@ -838,6 +1171,43 @@ export function CurriculumPage({ session, selectedCourseId }: { session: AuthSes
)}
</div>
</section>
<section className="border-t border-[#cbd5e1] pt-4">
<div className="flex items-center justify-between gap-3">
<div>
<h3 className="text-[15px] font-black text-[#111827]">학습 맵</h3>
<p className="mt-1 text-[12px] font-bold text-[#64748b]">학생이 맵 선택 화면에서 사용할 NAV2 학습 환경을 선택하세요.</p>
</div>
<button
type="button"
onClick={() => setMapCreateOpen(true)}
className="inline-flex h-8 items-center gap-1.5 rounded-md border border-[#d1d9e6] bg-white px-3 text-[12px] font-black text-[#475569] transition hover:border-[#2563eb] hover:bg-[#eff6ff] hover:text-[#2563eb]"
>
<Plus size={14} aria-hidden="true" />
맵 추가
</button>
</div>
<div className="mt-3 grid gap-2">
{mapOptions.map((map) => {
const enabled = Boolean(mapEnabledByKey[map.key]);
return (
<label key={map.key} className={`flex cursor-pointer items-center gap-3 rounded-lg border px-4 py-3 transition ${enabled ? 'border-[#d1d9e6] bg-white hover:bg-[#f8fafc]' : 'border-[#cbd5e1] bg-[#f8fafc] opacity-75 hover:bg-[#f1f5f9]'}`}>
<input
type="checkbox"
className="h-4 w-4 shrink-0 cursor-pointer rounded border-[#cbd5e1] text-[#2563eb] focus:ring-[#2563eb]"
checked={enabled}
onChange={(event) => setMapEnabledByKey((current) => ({ ...current, [map.key]: event.target.checked }))}
/>
<span className="grid h-8 w-8 shrink-0 place-items-center rounded-md bg-[#eff6ff] text-[#2563eb]"><Map size={15} /></span>
<span className="min-w-0 flex-1">
<span className="block truncate text-[14px] font-black text-[#111827]">{map.name}</span>
<span className="mt-1 block truncate text-[12px] font-bold text-[#64748b]">{map.description}</span>
</span>
{map.custom ? <span className="shrink-0 rounded-md bg-[#ede9ff] px-2.5 py-1 text-[11px] font-black text-[#6d28d9]">커스텀</span> : null}
</label>
);
})}
</div>
</section>
</div>
) : activeTab === 'examples' ? (
<div className="grid gap-4 p-5">
@@ -1218,6 +1588,34 @@ export function CurriculumPage({ session, selectedCourseId }: { session: AuthSes
</div>
</section>
{mapCreateOpen ? (
<div className="fixed inset-0 z-50 grid place-items-center bg-slate-950/45 p-5" role="dialog" aria-modal="true" aria-label="학습 맵 추가">
<section className="w-full max-w-[420px] rounded-lg border border-[#cbd5e1] bg-white shadow-2xl">
<header className="border-b border-[#e2e8f0] px-5 py-4">
<h2 className="text-[16px] font-black text-[#111827]">학습 맵 추가</h2>
<p className="mt-1 text-[12px] font-bold text-[#64748b]">등록 후 현재 주차에 선택된 상태로 추가됩니다.</p>
</header>
<div className="grid gap-4 px-5 py-4">
<label className="grid gap-1.5 text-[12px] font-black text-[#334155]">
맵 이름
<input autoFocus value={mapName} onChange={(event) => setMapName(event.target.value)} placeholder="예: 실습 장애물 맵" className="h-10 rounded-md border border-[#cbd5e1] px-3 text-[13px] font-semibold outline-none transition focus:border-[#2563eb] focus:ring-2 focus:ring-[#bfdbfe]" />
</label>
<label className="grid gap-1.5 text-[12px] font-black text-[#334155]">
설명
<input value={mapDescription} onChange={(event) => setMapDescription(event.target.value)} placeholder="학생에게 보여줄 맵 설명" className="h-10 rounded-md border border-[#cbd5e1] px-3 text-[13px] font-semibold outline-none transition focus:border-[#2563eb] focus:ring-2 focus:ring-[#bfdbfe]" />
</label>
</div>
<footer className="flex justify-end gap-2 border-t border-[#e2e8f0] px-5 py-3">
<button type="button" disabled={creatingMap} onClick={() => setMapCreateOpen(false)} className="h-8 rounded-md border border-[#d1d9e6] px-3 text-[12px] font-black text-[#475569] hover:bg-[#f8fafc] disabled:opacity-50">취소</button>
<button type="button" disabled={creatingMap || !mapName.trim()} onClick={() => void handleCreateMap()} className="inline-flex h-8 items-center gap-1.5 rounded-md bg-[#2563eb] px-3 text-[12px] font-black text-white hover:bg-[#1d4ed8] disabled:opacity-50">
{creatingMap ? <Loader2 className="animate-spin" size={13} /> : <Plus size={13} />}
추가
</button>
</footer>
</section>
</div>
) : null}
<ConfirmDialog
open={deleteConfirmOpen && Boolean(selectedWeek)}
title={selectedWeek ? `${selectedWeek.week}주차를 삭제할까요?` : '주차를 삭제할까요?'}
src/pages/platforms/PlatformsPage.tsx
+111 -37
View File
@@ -1,6 +1,6 @@
import { useEffect, useMemo, useState, type ReactNode } from 'react';
import { createPortal } from 'react-dom';
import { Activity, Battery, Car, CircleAlert, Loader2, Plus, Search, Settings, ShieldAlert, Timer, Trash2, Users, X, type LucideIcon } from 'lucide-react';
import { Activity, Battery, Car, CircleAlert, KeyRound, Loader2, Plus, Search, Settings, ShieldAlert, Timer, Trash2, Users, X, type LucideIcon } from 'lucide-react';
import { ConfirmDialog } from '../../components/ConfirmDialog';
import { PageHeader } from '../../components/PageHeader';
import { PaginationBar } from '../../components/PaginationBar';
@@ -11,6 +11,7 @@ import {
deleteInstructorPlatform,
listInstructorPlatformAgents,
listInstructorPlatforms,
issueInstructorPlatformRegistration,
PlatformInUseError,
updateInstructorPlatform,
type InstructorPlatform,
@@ -60,12 +61,15 @@ export function PlatformsPage({ session }: { session: AuthSession }) {
const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(10);
const [modalOpen, setModalOpen] = useState(false);
const [registrationModalOpen, setRegistrationModalOpen] = useState(false);
const [settingsTarget, setSettingsTarget] = useState<InstructorPlatform | null>(null);
const [selectedMasterId, setSelectedMasterId] = useState('');
const [selectedAgentId, setSelectedAgentId] = useState('');
const [platformName, setPlatformName] = useState('');
const [agentsLoading, setAgentsLoading] = useState(false);
const [agentsError, setAgentsError] = useState<string | null>(null);
const [registrationCode, setRegistrationCode] = useState<string | null>(null);
const [registrationExpiresAt, setRegistrationExpiresAt] = useState<string | null>(null);
const [settingsName, setSettingsName] = useState('');
const [settingsVehicleType, setSettingsVehicleType] = useState('MK-mini');
const [settingsWheelbaseMeters, setSettingsWheelbaseMeters] = useState(0.325);
@@ -90,7 +94,7 @@ export function PlatformsPage({ session }: { session: AuthSession }) {
const [assignmentGroupsError, setAssignmentGroupsError] = useState<string | null>(null);
const [selectedAssignmentGroupId, setSelectedAssignmentGroupId] = useState('');
const [assigningPlatformId, setAssigningPlatformId] = useState<string | null>(null);
const [forceAssignmentTarget, setForceAssignmentTarget] = useState<{ platform: InstructorPlatform; group: InstructorGroup; session: PlatformInUseError['activeSession'] } | null>(null);
const [forceAssignmentTarget, setForceAssignmentTarget] = useState<{ platform: InstructorPlatform; group: InstructorGroup | null; session: PlatformInUseError['activeSession'] } | null>(null);
const filteredPlatforms = useMemo(() => {
const keyword = query.trim().toLowerCase();
@@ -106,7 +110,7 @@ export function PlatformsPage({ session }: { session: AuthSession }) {
const keys = new Set<string>();
platforms.forEach((platform) => {
if (!platform.agent) return;
[platform.agent.nodeId, platform.agent.hostname, platform.agent.ip, platform.agent.ownerEmail]
[platform.agent.nodeId, platform.agent.hostname, platform.agent.ip]
.map(normalizeAgentKey)
.filter(Boolean)
.forEach((key) => keys.add(key));
@@ -121,6 +125,7 @@ export function PlatformsPage({ session }: { session: AuthSession }) {
{ label: '오류 발생', value: `${summary.errorPlatforms}대`, icon: CircleAlert, tone: 'bg-[#fff1f2] text-[#e11d48]' },
];
const selectedAssignmentGroup = assignmentGroups.find((group) => group.id === selectedAssignmentGroupId) ?? null;
const assignmentUnassignedSelected = selectedAssignmentGroupId === 'unassigned';
const applyPayload = (payload: InstructorPlatformsResponse) => {
setError(null);
@@ -159,13 +164,13 @@ export function PlatformsPage({ session }: { session: AuthSession }) {
}, [filteredPlatforms.length, page, pageSize]);
useEffect(() => {
if (!modalOpen && !settingsTarget && !deleteTarget && !assignmentTarget) return;
if (!modalOpen && !registrationModalOpen && !settingsTarget && !deleteTarget && !assignmentTarget) return;
const originalOverflow = document.body.style.overflow;
document.body.style.overflow = 'hidden';
return () => {
document.body.style.overflow = originalOverflow;
};
}, [assignmentTarget, modalOpen, settingsTarget, deleteTarget]);
}, [assignmentTarget, deleteTarget, modalOpen, registrationModalOpen, settingsTarget]);
useEffect(() => {
if (!modalOpen) return;
@@ -238,6 +243,20 @@ export function PlatformsPage({ session }: { session: AuthSession }) {
}
};
const handleIssueRegistrationCode = async () => {
setSaving(true);
setError(null);
try {
const payload = await issueInstructorPlatformRegistration(session.accessToken);
setRegistrationCode(payload.code);
setRegistrationExpiresAt(payload.expiresAt);
} catch (reason) {
setError(reason instanceof Error ? reason.message : '등록 키를 발급하지 못했습니다.');
} finally {
setSaving(false);
}
};
const handleDeletePlatform = async (platform: InstructorPlatform, force = false) => {
setDeletingPlatformId(platform.id);
setError(null);
@@ -283,20 +302,20 @@ export function PlatformsPage({ session }: { session: AuthSession }) {
const handleAssignPlatform = async (
platform: InstructorPlatform,
group: InstructorGroup,
group: InstructorGroup | null,
force = false,
) => {
setAssigningPlatformId(platform.id);
setError(null);
try {
const payload = await assignInstructorPlatform(session.accessToken, platform.id, group.id, { force });
const payload = await assignInstructorPlatform(session.accessToken, platform.id, group?.id ?? 'unassigned', { force });
applyPayload(payload);
setAssignmentTarget(null);
setForceAssignmentTarget(null);
setSelectedAssignmentGroupId('');
showToast({
title: '플랫폼이 배정되었습니다.',
message: `${platform.name} · ${group.name}`,
title: group ? '플랫폼이 배정되었습니다.' : '플랫폼 배정이 해제되었습니다.',
message: group ? `${platform.name} · ${group.name}` : platform.name,
});
} catch (reason) {
if (reason instanceof PlatformInUseError) {
@@ -353,10 +372,24 @@ export function PlatformsPage({ session }: { session: AuthSession }) {
<PageHeader
route="platforms"
action={
<button className="inline-flex h-9 items-center gap-2 rounded-md bg-[#2563eb] px-3 text-[13px] font-bold text-white hover:bg-[#1d4ed8]" type="button" onClick={handleOpenCreateModal}>
<Plus size={15} aria-hidden="true" />
플랫폼 추가
</button>
<div className="flex items-center gap-2">
<button
className="inline-flex h-9 items-center gap-2 rounded-md border border-[#2563eb] bg-white px-3 text-[13px] font-bold text-[#2563eb] hover:bg-[#eff6ff]"
type="button"
onClick={() => {
setRegistrationCode(null);
setRegistrationExpiresAt(null);
setRegistrationModalOpen(true);
}}
>
<KeyRound size={15} aria-hidden="true" />
키 발급
</button>
<button className="inline-flex h-9 items-center gap-2 rounded-md bg-[#2563eb] px-3 text-[13px] font-bold text-white hover:bg-[#1d4ed8]" type="button" onClick={handleOpenCreateModal}>
<Plus size={15} aria-hidden="true" />
플랫폼 추가
</button>
</div>
}
/>
@@ -370,7 +403,7 @@ export function PlatformsPage({ session }: { session: AuthSession }) {
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-[#cbd5e1] px-4 py-3">
<div>
<h2 className="text-[15px] font-black text-[#111827]">플랫폼 리스트</h2>
<p className="mt-1 text-[12px] font-bold text-[#64748b]">배터리, 가동 시간, 할당 그룹, 오류 상태 조회</p>
<p className="mt-1 text-[12px] font-bold text-[#64748b]">배터리, 가동 시간, 할당 그룹 상태 조회</p>
</div>
<label className="flex h-9 w-full max-w-[260px] items-center gap-2 rounded-md border border-[#d1d9e6] bg-white px-3 text-[#94a3b8]">
@@ -380,15 +413,14 @@ export function PlatformsPage({ session }: { session: AuthSession }) {
</div>
<div className="overflow-x-auto">
<div className="xl:min-w-[1100px]">
<div className="hidden select-none gap-4 grid-cols-[44px_200px_110px_92px_90px_110px_80px_150px_184px] items-center border-b border-[#cbd5e1] bg-[#f8fafc] px-4 py-3 text-center text-[11px] font-bold text-[#64748b] xl:grid">
<div className="xl:min-w-[1020px]">
<div className="hidden select-none gap-4 grid-cols-[44px_200px_110px_92px_90px_110px_150px_184px] items-center border-b border-[#cbd5e1] bg-[#f8fafc] px-4 py-3 text-center text-[11px] font-bold text-[#64748b] xl:grid">
<span>No.</span>
<span>플랫폼</span>
<span>연결</span>
<span>상태</span>
<span>배터리</span>
<span>가동 시간</span>
<span>오류</span>
<span>할당</span>
<span>관리</span>
</div>
@@ -400,7 +432,7 @@ export function PlatformsPage({ session }: { session: AuthSession }) {
</div>
) : pagedPlatforms.length > 0 ? (
pagedPlatforms.map((platform, index) => (
<article className="grid select-none gap-4 px-4 py-4 xl:grid-cols-[44px_200px_110px_92px_90px_110px_80px_150px_184px] xl:items-center" key={platform.id}>
<article className="grid select-none gap-4 px-4 py-4 xl:grid-cols-[44px_200px_110px_92px_90px_110px_150px_184px] xl:items-center" key={platform.id}>
<div className="text-center">
<p className="mb-2 text-[11px] font-bold text-[#94a3b8] xl:hidden">번호</p>
<span className="text-[13px] font-bold text-[#64748b]">{filteredPlatforms.length - ((page - 1) * pageSize + index)}</span>
@@ -449,8 +481,6 @@ export function PlatformsPage({ session }: { session: AuthSession }) {
</div>
<PlatformMeta icon={Timer} label="가동 시간" value={platform.uptime} />
<PlatformMeta icon={CircleAlert} label="오류" value={`${platform.errors}건`} danger={platform.errors > 0} />
<div className="text-center">
<p className="mb-2 text-[11px] font-bold text-[#94a3b8] xl:hidden">할당</p>
<div className="flex flex-wrap items-center justify-center gap-2">
@@ -498,6 +528,42 @@ export function PlatformsPage({ session }: { session: AuthSession }) {
/>
</section>
{registrationModalOpen ? createPortal(
<div className="fixed inset-0 z-[70] grid place-items-center bg-[#0f172a]/24 px-4 backdrop-blur-[2px]">
<section className="w-full max-w-[400px] rounded-lg border border-[#dbe3ef] bg-white shadow-[0_24px_70px_rgba(15,23,42,0.22)]">
<div className="flex items-start justify-between gap-4 border-b border-[#cbd5e1] px-5 py-4">
<div>
<h3 className="text-[16px] font-black text-[#111827]">교보재 등록 키</h3>
<p className="mt-1 text-[12px] font-bold text-[#64748b]">에이전트 설치 화면에서 강사 계정 이메일과 함께 입력하세요.</p>
</div>
<button className="grid h-8 w-8 place-items-center rounded-md text-[#64748b] hover:bg-[#f1f5f9] hover:text-[#111827]" type="button" onClick={() => setRegistrationModalOpen(false)} disabled={saving} aria-label="닫기" title="닫기">
<X size={17} aria-hidden="true" />
</button>
</div>
<div className="p-5">
{registrationCode ? (
<div className="rounded-md border border-[#bfdbfe] bg-[#eff6ff] px-4 py-4 text-center">
<p className="font-mono text-[26px] font-black tracking-[0.18em] text-[#1d4ed8]">{registrationCode}</p>
<p className="mt-2 text-[11px] font-bold text-[#476581]">{registrationExpiresAt ? `${new Date(registrationExpiresAt).toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit' })}까지 사용할 수 있습니다.` : '한 번만 사용할 수 있습니다.'}</p>
</div>
) : (
<p className="text-[13px] font-bold leading-6 text-[#475569]">키를 발급한 뒤 교보재 장비에 에이전트를 설치하세요. 설치가 완료되어 연결되면 플랫폼 추가에서 해당 에이전트를 선택할 수 있습니다.</p>
)}
</div>
<div className="flex justify-end gap-2 border-t border-[#cbd5e1] px-5 py-4">
<button className="h-9 rounded-md border border-[#d1d9e6] bg-white px-4 text-[13px] font-bold text-[#475569] hover:bg-[#f8fafc]" type="button" onClick={() => setRegistrationModalOpen(false)} disabled={saving}>닫기</button>
{!registrationCode ? (
<button className="inline-flex h-9 items-center gap-2 rounded-md bg-[#2563eb] px-4 text-[13px] font-bold text-white hover:bg-[#1d4ed8] disabled:cursor-not-allowed disabled:opacity-60" type="button" onClick={() => void handleIssueRegistrationCode()} disabled={saving}>
{saving ? <Loader2 className="animate-spin" size={15} aria-hidden="true" /> : <KeyRound size={15} aria-hidden="true" />}
키 발급
</button>
) : null}
</div>
</section>
</div>,
document.body,
) : null}
{modalOpen ? createPortal(
<div className="fixed inset-0 z-[70] grid place-items-center bg-[#0f172a]/24 px-4 backdrop-blur-[2px]">
<section className="w-full max-w-[420px] rounded-lg border border-[#dbe3ef] bg-white shadow-[0_24px_70px_rgba(15,23,42,0.22)]">
@@ -633,7 +699,19 @@ export function PlatformsPage({ session }: { session: AuthSession }) {
</div>
) : assignmentGroupsError ? (
<div className="rounded-md border border-dashed border-[#fecdd3] bg-[#fff1f2] px-3 py-10 text-center text-[12px] font-bold text-[#e11d48]">{assignmentGroupsError}</div>
) : assignmentGroups.length ? assignmentGroups.map((group) => {
) : <>
<button
type="button"
className={`flex w-full items-center justify-between gap-3 rounded-md border px-3 py-2.5 text-left transition-colors ${assignmentUnassignedSelected ? 'border-[#2563eb] bg-[#eff6ff]' : 'border-[#d1d9e6] bg-white hover:bg-[#f8fafc]'}`}
onClick={() => setSelectedAssignmentGroupId(assignmentUnassignedSelected ? '' : 'unassigned')}
>
<span className="min-w-0">
<span className="block truncate text-[13px] font-black text-[#111827]">미배정</span>
<span className="mt-0.5 block truncate text-[11px] font-bold text-[#64748b]">현재 플랫폼 배정을 해제합니다.</span>
</span>
<span className="shrink-0 rounded bg-[#f1f5f9] px-2 py-1 text-[10px] font-black text-[#64748b]">배정 해제</span>
</button>
{assignmentGroups.map((group) => {
const selected = selectedAssignmentGroupId === group.id;
const assigned = Boolean(group.instructorPlatformId);
return (
@@ -655,9 +733,8 @@ export function PlatformsPage({ session }: { session: AuthSession }) {
</span>
</button>
);
}) : (
<div className="rounded-md border border-dashed border-[#d1d9e6] px-3 py-10 text-center text-[12px] font-bold text-[#94a3b8]">등록된 그룹이 없습니다.</div>
)}
})}
</>}
</div>
</div>
</div>
@@ -668,12 +745,14 @@ export function PlatformsPage({ session }: { session: AuthSession }) {
className="inline-flex h-9 items-center gap-2 rounded-md bg-[#2563eb] px-4 text-[13px] font-bold text-white hover:bg-[#1d4ed8] disabled:cursor-not-allowed disabled:opacity-60"
type="button"
onClick={() => {
if (assignmentTarget && selectedAssignmentGroup) void handleAssignPlatform(assignmentTarget, selectedAssignmentGroup);
if (assignmentTarget && (selectedAssignmentGroup || assignmentUnassignedSelected)) {
void handleAssignPlatform(assignmentTarget, selectedAssignmentGroup);
}
}}
disabled={Boolean(assigningPlatformId) || !assignmentTarget || !selectedAssignmentGroup || Boolean(selectedAssignmentGroup.instructorPlatformId)}
disabled={Boolean(assigningPlatformId) || !assignmentTarget || (!selectedAssignmentGroup && !assignmentUnassignedSelected) || Boolean(selectedAssignmentGroup?.instructorPlatformId)}
>
{assigningPlatformId === assignmentTarget.id ? <Loader2 className="animate-spin" size={15} aria-hidden="true" /> : <Users size={15} aria-hidden="true" />}
배정
{assignmentUnassignedSelected ? '배정 해제' : '배정'}
</button>
</div>
</section>
@@ -848,12 +927,12 @@ export function PlatformsPage({ session }: { session: AuthSession }) {
<ConfirmDialog
open={Boolean(forceAssignmentTarget)}
title="사용 중인 플랫폼입니다"
message="배정을 변경하면 학생의 제어권과 실행 중인 플랫폼 세션이 강제로 종료됩니다. 계속 배정할까요?"
message={forceAssignmentTarget?.group ? '배정을 변경하면 학생의 제어권과 실행 중인 플랫폼 세션이 강제로 종료됩니다. 계속 배정할까요?' : '배정을 해제하면 학생의 제어권과 실행 중인 플랫폼 세션이 강제로 종료됩니다. 계속할까요?'}
detail={forceAssignmentTarget ? (
<div className="rounded-lg border border-[#fed7aa] bg-[#fff7ed] px-3 py-2">
<p className="text-[13px] font-black text-[#9a3412]">{forceAssignmentTarget.platform.name}</p>
<p className="mt-1 text-[12px] font-semibold text-[#c2410c]">
배정 대상: {forceAssignmentTarget.group.name}
{forceAssignmentTarget.group ? `배정 대상: ${forceAssignmentTarget.group.name}` : '배정 해제'}
</p>
<p className="mt-1 text-[12px] font-semibold text-[#c2410c]">
사용 중: {forceAssignmentTarget.session.holderName ?? forceAssignmentTarget.session.holderEmail ?? '알 수 없음'}
@@ -863,7 +942,7 @@ export function PlatformsPage({ session }: { session: AuthSession }) {
</p>
</div>
) : null}
confirmLabel="강제 종료 후 배정"
confirmLabel={forceAssignmentTarget?.group ? '강제 종료 후 배정' : '강제 종료 후 해제'}
danger
icon={ShieldAlert}
loading={Boolean(forceAssignmentTarget && assigningPlatformId === forceAssignmentTarget.platform.id)}
@@ -910,15 +989,10 @@ function normalizeAgentKey(value: string | null | undefined) {
}
function isRegisteredAgent(agent: TeachingAgent, registeredAgentKeys: Set<string>) {
const registeredKeys = Array.from(registeredAgentKeys);
return [agent.id, agent.hostname, agent.name, agent.ip, agent.user]
return [agent.id, agent.hostname, agent.name, agent.ip]
.map(normalizeAgentKey)
.filter(Boolean)
.some((agentKey) => registeredKeys.some((registeredKey) => (
agentKey === registeredKey ||
agentKey.includes(registeredKey) ||
registeredKey.includes(agentKey)
)));
.some((agentKey) => registeredAgentKeys.has(agentKey));
}
function SummaryCard({ label, value, icon: Icon, tone }: { label: string; value: string; icon: LucideIcon; tone: string }) {