Round 11: DrawingCanvas Integration, Notebook Versioning, Student Auth, Parent Portal, Calendar Recurring, Grade PDF, Data Import/Export
This commit is contained in:
Mustafa Cetin committed
1 parent
b90ad85b91
commit
c3d36aac67
22 files changed
+3984
-314
No files matched your search
@@ -199,6 +199,20 @@ const studentNavSections: NavSection[] = [
|
||||
},
|
||||
];
|
||||
|
||||
// Parent-specific navigation (simplified)
|
||||
const parentNavSections: NavSection[] = [
|
||||
{
|
||||
id: 'parent-main',
|
||||
labelKey: 'parent.dashboard_title',
|
||||
items: [
|
||||
{ key: 'dashboard', icon: LayoutDashboard, labelKey: 'nav.dashboard' },
|
||||
{ key: 'parents', icon: Mail, labelKey: 'parent.my_children' },
|
||||
{ key: 'parents', icon: MessageSquareText, labelKey: 'parent.messages' },
|
||||
{ key: 'calendar', icon: CalendarIconNav, labelKey: 'nav.calendar' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
function renderView(view: ViewName) {
|
||||
switch (view) {
|
||||
case 'dashboard': return <DashboardView />;
|
||||
@@ -264,10 +278,11 @@ export default function AppLayout() {
|
||||
? `${currentUser.firstName} ${currentUser.lastName}`
|
||||
: '';
|
||||
|
||||
const roleKey = currentUser?.role === 'TEACHER' ? 'role.teacher' : currentUser?.role === 'SCHOOL_ADMIN' ? 'role.school_admin' : currentUser?.role === 'STUDENT' ? 'role.student' : 'role.super_admin';
|
||||
const roleKey = currentUser?.role === 'TEACHER' ? 'role.teacher' : currentUser?.role === 'SCHOOL_ADMIN' ? 'role.school_admin' : currentUser?.role === 'STUDENT' ? 'role.student' : currentUser?.role === 'PARENT' ? 'role.parent' : 'role.super_admin';
|
||||
|
||||
const isStudent = currentUser?.role === 'STUDENT';
|
||||
const activeNavSections = isStudent ? studentNavSections : navSections;
|
||||
const isParent = currentUser?.role === 'PARENT';
|
||||
const activeNavSections = isStudent ? studentNavSections : isParent ? parentNavSections : navSections;
|
||||
|
||||
const isDemoUser = currentUser?.isDemo === true || (currentUser?.email?.endsWith('@competencetrack.org') && currentUser?.email?.startsWith('demo'));
|
||||
|
||||
|
||||
+189
-145
@@ -2,7 +2,7 @@
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { BookOpen, Mail, Lock, User, ArrowRight, GraduationCap, Heart, Sparkles, Flower2, Eye, EyeOff, KeyRound, Info, Shield, Leaf } from 'lucide-react';
|
||||
import { BookOpen, Mail, Lock, User, ArrowRight, GraduationCap, Heart, Sparkles, Flower2, Eye, EyeOff, KeyRound, Info, Shield, Leaf, Users as UsersIcon, HelpCircle } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
@@ -14,6 +14,8 @@ import { t } from '@/lib/i18n';
|
||||
import { login, register } from '@/lib/api';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
type LoginRole = 'teacher' | 'student' | 'parent';
|
||||
|
||||
const DEMO_ACCOUNTS = [
|
||||
{ email: 'demo@competencetrack.org', password: 'Demo2025!', role: 'SCHOOL_ADMIN', labelKey: 'auth.demo_admin', icon: Shield, colorClass: 'from-emerald-400 to-emerald-600 hover:from-emerald-500 hover:to-emerald-700 shadow-emerald-300/40 dark:shadow-emerald-900/40' },
|
||||
{ email: 'demo.teacher@competencetrack.org', password: 'Demo2025!', role: 'TEACHER', labelKey: 'auth.demo_teacher', icon: GraduationCap, colorClass: 'from-teal-400 to-teal-600 hover:from-teal-500 hover:to-teal-700 shadow-teal-300/40 dark:shadow-teal-900/40' },
|
||||
@@ -23,14 +25,17 @@ const DEMO_ACCOUNTS = [
|
||||
|
||||
export default function AuthView() {
|
||||
const [mode, setMode] = useState<'login' | 'register'>('login');
|
||||
const [loginRole, setLoginRole] = useState<LoginRole>('teacher');
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [firstName, setFirstName] = useState('');
|
||||
const [lastName, setLastName] = useState('');
|
||||
const [schoolIdInput, setSchoolIdInput] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [demoLoading, setDemoLoading] = useState(false);
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [rememberMe, setRememberMe] = useState(true);
|
||||
const [showForgotInfo, setShowForgotInfo] = useState(false);
|
||||
const setCurrentUser = useAppStore((s) => s.setCurrentUser);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
@@ -41,7 +46,13 @@ export default function AuthView() {
|
||||
if (mode === 'login') {
|
||||
const user = await login(email, password);
|
||||
setCurrentUser(user);
|
||||
toast.success(t('auth.welcome_back'));
|
||||
if (user.role === 'STUDENT') {
|
||||
toast.success(t('auth.student_welcome'));
|
||||
} else if (user.role === 'PARENT') {
|
||||
toast.success(t('auth.parent_welcome'));
|
||||
} else {
|
||||
toast.success(t('auth.welcome_back'));
|
||||
}
|
||||
} else {
|
||||
const user = await register({
|
||||
email,
|
||||
@@ -72,6 +83,7 @@ export default function AuthView() {
|
||||
setPassword('');
|
||||
setFirstName('');
|
||||
setLastName('');
|
||||
setSchoolIdInput('');
|
||||
};
|
||||
|
||||
const handleDemoLogin = async (demoEmail: string, demoPassword: string) => {
|
||||
@@ -83,7 +95,13 @@ export default function AuthView() {
|
||||
try {
|
||||
const user = await login(demoEmail, demoPassword);
|
||||
setCurrentUser(user);
|
||||
toast.success(t('auth.welcome_back'));
|
||||
if (user.role === 'STUDENT') {
|
||||
toast.success(t('auth.student_welcome'));
|
||||
} else if (user.role === 'PARENT') {
|
||||
toast.success(t('auth.parent_welcome'));
|
||||
} else {
|
||||
toast.success(t('auth.welcome_back'));
|
||||
}
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : t('auth.error.generic');
|
||||
if (message.includes('credentials') || message.includes('Invalid')) {
|
||||
@@ -96,25 +114,28 @@ export default function AuthView() {
|
||||
}
|
||||
};
|
||||
|
||||
// Role tab config
|
||||
const roleTabs: Array<{ key: LoginRole; icon: React.ElementType; labelKey: string; color: string; activeColor: string; bgGradient: string }> = [
|
||||
{ key: 'teacher', icon: GraduationCap, labelKey: 'auth.login', color: 'text-emerald-600 dark:text-emerald-400', activeColor: 'bg-emerald-500 text-white', bgGradient: 'from-emerald-50/50 to-teal-50/50 dark:from-emerald-950/10 dark:to-teal-950/10' },
|
||||
{ key: 'student', icon: UsersIcon, labelKey: 'auth.student_login', color: 'text-amber-600 dark:text-amber-400', activeColor: 'bg-amber-500 text-white', bgGradient: 'from-amber-50/50 to-orange-50/50 dark:from-amber-950/10 dark:to-orange-950/10' },
|
||||
{ key: 'parent', icon: Heart, labelKey: 'auth.parent_login', color: 'text-violet-600 dark:text-violet-400', activeColor: 'bg-violet-500 text-white', bgGradient: 'from-violet-50/50 to-purple-50/50 dark:from-violet-950/10 dark:to-purple-950/10' },
|
||||
];
|
||||
|
||||
const activeRoleTab = roleTabs.find((r) => r.key === loginRole)!;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-emerald-50 via-white to-teal-50 dark:from-gray-950 dark:via-gray-900 dark:to-emerald-950 p-4 md:p-8 relative overflow-hidden">
|
||||
{/* Animated floating geometric shapes background */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
{/* Large emerald circle */}
|
||||
<div className="absolute top-[15%] left-[10%] w-32 h-32 rounded-full bg-emerald-200/30 dark:bg-emerald-800/10 animate-float-slow" />
|
||||
{/* Medium teal square */}
|
||||
<div className="absolute top-[60%] right-[20%] w-20 h-20 rounded-xl bg-teal-200/25 dark:bg-teal-800/10 animate-float" />
|
||||
{/* Small amber circle */}
|
||||
<div className="absolute bottom-[25%] left-[25%] w-14 h-14 rounded-full bg-amber-200/20 dark:bg-amber-800/10 animate-float-reverse" />
|
||||
{/* Tiny emerald dot */}
|
||||
<div className="absolute top-[40%] right-[40%] w-8 h-8 rounded-full bg-emerald-300/15 dark:bg-emerald-700/10 animate-float" />
|
||||
{/* Medium violet square */}
|
||||
<div className="absolute top-[80%] left-[60%] w-16 h-16 rounded-lg bg-violet-200/20 dark:bg-violet-800/10 animate-float-reverse" />
|
||||
{/* Small teal circle */}
|
||||
<div className="absolute top-[30%] right-[70%] w-12 h-12 rounded-full bg-teal-200/20 dark:bg-teal-800/10 animate-float-slow" />
|
||||
{/* Dot grid overlay */}
|
||||
<div className="absolute inset-0 bg-dots opacity-30 dark:opacity-10" />
|
||||
</div>
|
||||
|
||||
{/* Left illustration side (hidden on small screens) */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
@@ -123,83 +144,52 @@ export default function AuthView() {
|
||||
className="hidden lg:flex flex-col items-center justify-center w-1/2 max-w-md mr-8"
|
||||
>
|
||||
<div className="relative">
|
||||
{/* Decorative circles */}
|
||||
<motion.div
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.3 }}
|
||||
className="absolute -top-6 -left-6 w-20 h-20 rounded-full bg-emerald-200/50 dark:bg-emerald-800/30"
|
||||
/>
|
||||
<motion.div
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.4 }}
|
||||
className="absolute -bottom-8 -right-8 w-24 h-24 rounded-full bg-teal-200/50 dark:bg-teal-800/30"
|
||||
/>
|
||||
<motion.div
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.5 }}
|
||||
className="absolute top-12 -right-4 w-12 h-12 rounded-full bg-amber-200/50 dark:bg-amber-800/30"
|
||||
/>
|
||||
{/* Main icon */}
|
||||
<motion.div initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ duration: 0.5, delay: 0.3 }} className="absolute -top-6 -left-6 w-20 h-20 rounded-full bg-emerald-200/50 dark:bg-emerald-800/30" />
|
||||
<motion.div initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ duration: 0.5, delay: 0.4 }} className="absolute -bottom-8 -right-8 w-24 h-24 rounded-full bg-teal-200/50 dark:bg-teal-800/30" />
|
||||
<motion.div initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ duration: 0.5, delay: 0.5 }} className="absolute top-12 -right-4 w-12 h-12 rounded-full bg-amber-200/50 dark:bg-amber-800/30" />
|
||||
{/* Main icon changes based on login role */}
|
||||
<motion.div
|
||||
initial={{ scale: 0.8 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.1 }}
|
||||
className="flex items-center justify-center w-28 h-28 rounded-3xl bg-gradient-to-br from-emerald-400 to-teal-500 text-white shadow-2xl shadow-emerald-300/40 dark:shadow-emerald-900/40"
|
||||
>
|
||||
<GraduationCap className="w-14 h-14" />
|
||||
<AnimatePresence mode="wait">
|
||||
{loginRole === 'teacher' && <motion.div key="teacher" initial={{ rotate: -90, opacity: 0 }} animate={{ rotate: 0, opacity: 1 }} exit={{ rotate: 90, opacity: 0 }} transition={{ duration: 0.3 }}><GraduationCap className="w-14 h-14" /></motion.div>}
|
||||
{loginRole === 'student' && <motion.div key="student" initial={{ rotate: -90, opacity: 0 }} animate={{ rotate: 0, opacity: 1 }} exit={{ rotate: 90, opacity: 0 }} transition={{ duration: 0.3 }}><UsersIcon className="w-14 h-14" /></motion.div>}
|
||||
{loginRole === 'parent' && <motion.div key="parent" initial={{ rotate: -90, opacity: 0 }} animate={{ rotate: 0, opacity: 1 }} exit={{ rotate: 90, opacity: 0 }} transition={{ duration: 0.3 }}><Heart className="w-14 h-14" /></motion.div>}
|
||||
</AnimatePresence>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Feature highlights */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.6 }}
|
||||
className="mt-10 space-y-4 text-center"
|
||||
>
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, delay: 0.6 }} className="mt-10 space-y-4 text-center">
|
||||
<h3 className="text-xl font-bold text-gray-800 dark:text-gray-200">{t('auth.mission_title')}</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400">
|
||||
<Sparkles className="w-4 h-4" />
|
||||
</div>
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400"><Sparkles className="w-4 h-4" /></div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">{t('auth.feature_competencies')}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-teal-100 dark:bg-teal-900/30 text-teal-600 dark:text-teal-400">
|
||||
<Heart className="w-4 h-4" />
|
||||
</div>
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-teal-100 dark:bg-teal-900/30 text-teal-600 dark:text-teal-400"><Heart className="w-4 h-4" /></div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">{t('auth.feature_student_centered')}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400">
|
||||
<BookOpen className="w-4 h-4" />
|
||||
</div>
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400"><BookOpen className="w-4 h-4" /></div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">{t('auth.feature_open_source')}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-violet-100 dark:bg-violet-900/30 text-violet-600 dark:text-violet-400">
|
||||
<GraduationCap className="w-4 h-4" />
|
||||
</div>
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-violet-100 dark:bg-violet-900/30 text-violet-600 dark:text-violet-400"><GraduationCap className="w-4 h-4" /></div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">{t('auth.feature_reports')}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-rose-100 dark:bg-rose-900/30 text-rose-600 dark:text-rose-400">
|
||||
<Flower2 className="w-4 h-4" />
|
||||
</div>
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-rose-100 dark:bg-rose-900/30 text-rose-600 dark:text-rose-400"><Flower2 className="w-4 h-4" /></div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">{t('auth.feature_flower')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mockup dashboard preview */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.8 }}
|
||||
className="mt-6 p-4 rounded-2xl bg-white/70 dark:bg-gray-800/50 backdrop-blur-sm border border-emerald-200/40 dark:border-emerald-900/30 shadow-lg shadow-emerald-100/30 dark:shadow-emerald-900/10"
|
||||
>
|
||||
<motion.div initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, delay: 0.8 }} className="mt-6 p-4 rounded-2xl bg-white/70 dark:bg-gray-800/50 backdrop-blur-sm border border-emerald-200/40 dark:border-emerald-900/30 shadow-lg shadow-emerald-100/30 dark:shadow-emerald-900/10">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<div className="w-2 h-2 rounded-full bg-red-400" />
|
||||
<div className="w-2 h-2 rounded-full bg-amber-400" />
|
||||
@@ -208,14 +198,7 @@ export default function AuthView() {
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-1.5">
|
||||
{[0, 1, 2, 3, 4, 5].map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`h-8 rounded-md ${
|
||||
i % 3 === 0 ? 'bg-gradient-to-br from-emerald-100 to-emerald-200/50 dark:from-emerald-900/30 dark:to-emerald-800/20'
|
||||
: i % 3 === 1 ? 'bg-gradient-to-br from-teal-100 to-teal-200/50 dark:from-teal-900/30 dark:to-teal-800/20'
|
||||
: 'bg-gradient-to-br from-amber-100 to-amber-200/50 dark:from-amber-900/30 dark:to-amber-800/20'
|
||||
}`}
|
||||
/>
|
||||
<div key={i} className={`h-8 rounded-md ${i % 3 === 0 ? 'bg-gradient-to-br from-emerald-100 to-emerald-200/50 dark:from-emerald-900/30 dark:to-emerald-800/20' : i % 3 === 1 ? 'bg-gradient-to-br from-teal-100 to-teal-200/50 dark:from-teal-900/30 dark:to-teal-800/20' : 'bg-gradient-to-br from-amber-100 to-amber-200/50 dark:from-amber-900/30 dark:to-amber-800/20'}`} />
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-3 space-y-1.5">
|
||||
@@ -228,80 +211,99 @@ export default function AuthView() {
|
||||
</motion.div>
|
||||
|
||||
{/* Auth form */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="w-full max-w-md md:max-w-lg"
|
||||
>
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} className="w-full max-w-md md:max-w-lg">
|
||||
{/* Branding */}
|
||||
<div className="text-center mb-8 lg:hidden">
|
||||
<motion.div
|
||||
initial={{ scale: 0.8 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.1 }}
|
||||
className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-br from-emerald-400 to-teal-500 text-white mb-4 shadow-lg shadow-emerald-200 dark:shadow-emerald-900"
|
||||
>
|
||||
<motion.div initial={{ scale: 0.8 }} animate={{ scale: 1 }} transition={{ duration: 0.5, delay: 0.1 }} className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-br from-emerald-400 to-teal-500 text-white mb-4 shadow-lg shadow-emerald-200 dark:shadow-emerald-900">
|
||||
<BookOpen className="w-8 h-8" />
|
||||
</motion.div>
|
||||
<h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">
|
||||
{t('app.name')}
|
||||
</h1>
|
||||
<p className="mt-2 text-sm text-emerald-600/70 dark:text-emerald-400/50">
|
||||
{t('app.subtitle')}
|
||||
</p>
|
||||
<h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">{t('app.name')}</h1>
|
||||
<p className="mt-2 text-sm text-emerald-600/70 dark:text-emerald-400/50">{t('app.subtitle')}</p>
|
||||
</div>
|
||||
|
||||
{/* Auth Card */}
|
||||
<Card className="shadow-xl border-0 shadow-emerald-100/50 dark:shadow-emerald-900/20 rounded-2xl overflow-hidden bg-white dark:bg-gray-950">
|
||||
<CardHeader className="text-center pb-2 pt-8 bg-gradient-to-r from-emerald-50/50 to-teal-50/50 dark:from-emerald-950/10 dark:to-teal-950/10">
|
||||
<CardTitle className="text-xl font-bold text-gray-900 dark:text-gray-100">
|
||||
{mode === 'login' ? t('auth.login') : t('auth.register_title')}
|
||||
</CardTitle>
|
||||
{/* Role tabs */}
|
||||
<div className="flex border-b border-gray-100 dark:border-gray-800">
|
||||
{roleTabs.map((tab) => (
|
||||
<button
|
||||
key={tab.key}
|
||||
type="button"
|
||||
onClick={() => { setLoginRole(tab.key); setShowForgotInfo(false); }}
|
||||
className={`flex-1 min-h-[44px] flex items-center justify-center gap-2 px-3 py-3 text-sm font-semibold transition-all duration-200 ${
|
||||
loginRole === tab.key
|
||||
? `${tab.activeColor} shadow-sm`
|
||||
: `${tab.color} bg-transparent hover:bg-gray-50 dark:hover:bg-gray-900/30`
|
||||
}`}
|
||||
>
|
||||
<tab.icon className="h-4 w-4" />
|
||||
<span>{t(tab.labelKey)}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<CardHeader className={`text-center pb-2 pt-6 bg-gradient-to-r ${activeRoleTab.bgGradient}`}>
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div key={loginRole} initial={{ opacity: 0, y: -8 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 8 }} transition={{ duration: 0.2 }}>
|
||||
<CardTitle className="text-xl font-bold text-gray-900 dark:text-gray-100">
|
||||
{loginRole === 'teacher' ? (mode === 'login' ? t('auth.login') : t('auth.register_title'))
|
||||
: loginRole === 'student' ? t('auth.student_login')
|
||||
: t('auth.parent_login')}
|
||||
</CardTitle>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||
{loginRole === 'teacher' ? (mode === 'login' ? t('auth.login_subtitle') : t('auth.register_subtitle'))
|
||||
: loginRole === 'student' ? t('auth.student_login_desc')
|
||||
: t('auth.parent_login_desc')}
|
||||
</p>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="pt-6 pb-6">
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<AnimatePresence mode="wait">
|
||||
{mode === 'register' && (
|
||||
<motion.div
|
||||
key="name-fields"
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="space-y-4"
|
||||
>
|
||||
{/* Name fields for register (teacher only) */}
|
||||
{mode === 'register' && loginRole === 'teacher' && (
|
||||
<motion.div key="name-fields" initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: 'auto' }} exit={{ opacity: 0, height: 0 }} transition={{ duration: 0.2 }} className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="firstName" className="text-sm font-medium">{t('auth.firstName')}</Label>
|
||||
<div className="relative">
|
||||
<User className="absolute left-3.5 top-1/2 -translate-y-1/2 h-5 w-5 text-emerald-400" />
|
||||
<Input
|
||||
id="firstName"
|
||||
value={firstName}
|
||||
onChange={(e) => setFirstName(e.target.value)}
|
||||
className="pl-10 h-12 min-h-[44px] border-emerald-200/50 dark:border-emerald-900/30 focus:border-emerald-400 focus:ring-emerald-400/20 text-base"
|
||||
placeholder={t('auth.firstName')}
|
||||
required
|
||||
/>
|
||||
<Input id="firstName" value={firstName} onChange={(e) => setFirstName(e.target.value)} className="pl-10 h-12 min-h-[44px] border-emerald-200/50 dark:border-emerald-900/30 focus:border-emerald-400 focus:ring-emerald-400/20 text-base" placeholder={t('auth.firstName')} required />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="lastName" className="text-sm font-medium">{t('auth.lastName')}</Label>
|
||||
<Input
|
||||
id="lastName"
|
||||
value={lastName}
|
||||
onChange={(e) => setLastName(e.target.value)}
|
||||
className="h-12 min-h-[44px] border-emerald-200/50 dark:border-emerald-900/30 focus:border-emerald-400 focus:ring-emerald-400/20 text-base"
|
||||
placeholder={t('auth.lastName')}
|
||||
required
|
||||
/>
|
||||
<Input id="lastName" value={lastName} onChange={(e) => setLastName(e.target.value)} className="h-12 min-h-[44px] border-emerald-200/50 dark:border-emerald-900/30 focus:border-emerald-400 focus:ring-emerald-400/20 text-base" placeholder={t('auth.lastName')} required />
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Student-specific: School ID field */}
|
||||
{loginRole === 'student' && (
|
||||
<motion.div key="school-id" initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: 'auto' }} exit={{ opacity: 0, height: 0 }} transition={{ duration: 0.2 }} className="space-y-2">
|
||||
<Label htmlFor="schoolId" className="text-sm font-medium">{t('auth.school_id')}</Label>
|
||||
<div className="relative">
|
||||
<Info className="absolute left-3.5 top-1/2 -translate-y-1/2 h-5 w-5 text-amber-400" />
|
||||
<Input id="schoolId" value={schoolIdInput} onChange={(e) => setSchoolIdInput(e.target.value)} className="pl-10 h-12 min-h-[44px] border-amber-200/50 dark:border-amber-900/30 focus:border-amber-400 focus:ring-amber-400/20 text-base" placeholder={t('auth.school_id')} />
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Parent-specific: name fields on login */}
|
||||
{loginRole === 'parent' && mode === 'login' && (
|
||||
<motion.div key="parent-name" initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: 'auto' }} exit={{ opacity: 0, height: 0 }} transition={{ duration: 0.2 }}>
|
||||
<div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-violet-50/50 dark:bg-violet-900/10 border border-violet-100/50 dark:border-violet-900/20 mb-4">
|
||||
<Heart className="h-4 w-4 text-violet-500" />
|
||||
<p className="text-xs text-violet-700 dark:text-violet-300 font-medium">{t('auth.parent_login_desc')}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Email field (always shown) */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email" className="text-sm font-medium">{t('auth.email')}</Label>
|
||||
<div className="relative">
|
||||
@@ -311,23 +313,28 @@ export default function AuthView() {
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="pl-10 h-12 min-h-[44px] border-emerald-200/50 dark:border-emerald-900/30 focus:border-emerald-400 focus:ring-emerald-400/20 text-base"
|
||||
placeholder="name@schule.de"
|
||||
className={`pl-10 h-12 min-h-[44px] border-emerald-200/50 dark:border-emerald-900/30 focus:border-emerald-400 focus:ring-emerald-400/20 text-base ${
|
||||
loginRole === 'student' ? 'focus:border-amber-400 focus:ring-amber-400/20'
|
||||
: loginRole === 'parent' ? 'focus:border-violet-400 focus:ring-violet-400/20'
|
||||
: ''
|
||||
}`}
|
||||
placeholder={loginRole === 'student' ? 'name@schule.de' : loginRole === 'parent' ? 'parent@email.de' : 'name@schule.de'}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Password field */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="password" className="text-sm font-medium">{t('auth.password')}</Label>
|
||||
{mode === 'login' && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toast.info('Demo: ' + t('polish.demo_email') + ' / ' + t('polish.demo_password'))}
|
||||
onClick={() => setShowForgotInfo(!showForgotInfo)}
|
||||
className="text-xs text-emerald-600 hover:text-emerald-700 dark:text-emerald-400 dark:hover:text-emerald-300 font-medium transition-colors"
|
||||
>
|
||||
{t('polish.forgot_password')}
|
||||
{t('auth.forgot_password')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
@@ -353,26 +360,43 @@ export default function AuthView() {
|
||||
{showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Forgot Password info */}
|
||||
<AnimatePresence>
|
||||
{showForgotInfo && (
|
||||
<motion.div initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: 'auto' }} exit={{ opacity: 0, height: 0 }} transition={{ duration: 0.2 }} className="mt-2">
|
||||
<div className="flex items-start gap-2 px-3 py-3 rounded-lg bg-emerald-50/50 dark:bg-emerald-900/10 border border-emerald-200/30 dark:border-emerald-900/20">
|
||||
<HelpCircle className="h-4 w-4 text-emerald-500 shrink-0 mt-0.5" />
|
||||
<p className="text-xs text-emerald-700 dark:text-emerald-300">
|
||||
{loginRole === 'student'
|
||||
? (t('polish.demo_email') + ': demo.student@competencetrack.org / ' + t('polish.demo_password') + ': Demo2025!')
|
||||
: loginRole === 'parent'
|
||||
? (t('polish.demo_email') + ': demo.parent@competencetrack.org / ' + t('polish.demo_password') + ': Demo2025!')
|
||||
: (t('polish.demo_email') + ': demo@competencetrack.org / ' + t('polish.demo_password') + ': Demo2025!')
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
{/* Remember me (login mode only) */}
|
||||
{mode === 'login' && (
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id="remember"
|
||||
checked={rememberMe}
|
||||
onCheckedChange={(v) => setRememberMe(v === true)}
|
||||
className="border-emerald-300 dark:border-emerald-700 data-[state=checked]:bg-emerald-500 data-[state=checked]:border-emerald-500"
|
||||
/>
|
||||
<Label htmlFor="remember" className="text-xs text-gray-600 dark:text-gray-400 cursor-pointer">
|
||||
{t('polish.remember_me')}
|
||||
</Label>
|
||||
<Checkbox id="remember" checked={rememberMe} onCheckedChange={(v) => setRememberMe(v === true)} className="border-emerald-300 dark:border-emerald-700 data-[state=checked]:bg-emerald-500 data-[state=checked]:border-emerald-500" />
|
||||
<Label htmlFor="remember" className="text-xs text-gray-600 dark:text-gray-400 cursor-pointer">{t('polish.remember_me')}</Label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Submit button */}
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full h-12 min-h-[44px] bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-600 hover:to-teal-600 text-white shadow-lg shadow-emerald-300/30 dark:shadow-emerald-900/30 rounded-xl text-base"
|
||||
className={`w-full h-12 min-h-[44px] text-white shadow-lg rounded-xl text-base ${
|
||||
loginRole === 'teacher' ? 'bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-600 hover:to-teal-600 shadow-emerald-300/30 dark:shadow-emerald-900/30'
|
||||
: loginRole === 'student' ? 'bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 shadow-amber-300/30 dark:shadow-amber-900/30'
|
||||
: 'bg-gradient-to-r from-violet-500 to-purple-500 hover:from-violet-600 hover:to-purple-600 shadow-violet-300/30 dark:shadow-violet-900/30'
|
||||
}`}
|
||||
disabled={loading || demoLoading}
|
||||
>
|
||||
{loading || demoLoading ? (
|
||||
@@ -391,12 +415,7 @@ export default function AuthView() {
|
||||
|
||||
{/* Role-specific demo login buttons */}
|
||||
{mode === 'login' && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.15 }}
|
||||
className="mt-5"
|
||||
>
|
||||
<motion.div initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.15 }} className="mt-5">
|
||||
<div className="text-center mb-3">
|
||||
<div className="flex items-center justify-center gap-1.5">
|
||||
<KeyRound className="h-3.5 w-3.5 text-amber-500" />
|
||||
@@ -423,24 +442,49 @@ export default function AuthView() {
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
<div className="mt-6 text-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleMode}
|
||||
className="text-sm text-emerald-600 hover:text-emerald-700 dark:text-emerald-400 dark:hover:text-emerald-300 font-medium transition-colors"
|
||||
>
|
||||
{mode === 'login' ? t('auth.no_account') : t('auth.has_account')}
|
||||
</button>
|
||||
</div>
|
||||
{/* Toggle register/login (only for teacher role) */}
|
||||
{loginRole === 'teacher' && (
|
||||
<div className="mt-6 text-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleMode}
|
||||
className="text-sm text-emerald-600 hover:text-emerald-700 dark:text-emerald-400 dark:hover:text-emerald-300 font-medium transition-colors"
|
||||
>
|
||||
{mode === 'login' ? t('auth.no_account') : t('auth.has_account')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Student info: accounts created by teachers */}
|
||||
{loginRole === 'student' && mode === 'login' && (
|
||||
<div className="mt-5 text-center">
|
||||
<div className="flex items-center justify-center gap-2 px-4 py-3 rounded-lg bg-amber-50/50 dark:bg-amber-900/10 border border-amber-200/30 dark:border-amber-900/20">
|
||||
<Info className="h-4 w-4 text-amber-500" />
|
||||
<p className="text-xs text-amber-700 dark:text-amber-300 font-medium">
|
||||
{t('auth.create_student_account')} — {t('auth.student_login_desc')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Parent info */}
|
||||
{loginRole === 'parent' && mode === 'login' && (
|
||||
<div className="mt-5 text-center">
|
||||
<div className="flex items-center justify-center gap-2 px-4 py-3 rounded-lg bg-violet-50/50 dark:bg-violet-900/10 border border-violet-200/30 dark:border-violet-900/20">
|
||||
<Heart className="h-4 w-4 text-violet-500" />
|
||||
<p className="text-xs text-violet-700 dark:text-violet-300 font-medium">
|
||||
{t('parent.my_children')} — {t('auth.parent_login_desc')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="mt-8 text-center flex items-center justify-center gap-1.5">
|
||||
<Leaf className="h-3.5 w-3.5 text-emerald-500/40 dark:text-emerald-400/30" />
|
||||
<p className="text-xs text-emerald-600/40 dark:text-emerald-400/30">
|
||||
{t('app.tagline')}
|
||||
</p>
|
||||
<p className="text-xs text-emerald-600/40 dark:text-emerald-400/30">{t('app.tagline')}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
@@ -19,6 +19,7 @@ import {
|
||||
Trash2,
|
||||
Bell,
|
||||
CheckCircle2,
|
||||
Repeat,
|
||||
} from 'lucide-react';
|
||||
import {
|
||||
format,
|
||||
@@ -96,6 +97,7 @@ import {
|
||||
updateCalendarEventItem,
|
||||
deleteCalendarEventItem,
|
||||
type CalendarEventItemType,
|
||||
type RecurrencePattern,
|
||||
fetchClasses,
|
||||
fetchSubjects,
|
||||
type ClassGroup,
|
||||
@@ -248,6 +250,12 @@ interface EventFormData {
|
||||
classGroupId: string;
|
||||
notes: string;
|
||||
allDay: boolean;
|
||||
recurrenceType: 'none' | 'daily' | 'weekly' | 'monthly' | 'yearly';
|
||||
recurrenceInterval: number;
|
||||
recurrenceEndType: 'never' | 'on_date';
|
||||
recurrenceEndDate: string;
|
||||
recurrenceDaysOfWeek: number[];
|
||||
editMode: 'series' | 'instance';
|
||||
}
|
||||
|
||||
const EMPTY_FORM: EventFormData = {
|
||||
@@ -260,6 +268,12 @@ const EMPTY_FORM: EventFormData = {
|
||||
classGroupId: '',
|
||||
notes: '',
|
||||
allDay: false,
|
||||
recurrenceType: 'none',
|
||||
recurrenceInterval: 1,
|
||||
recurrenceEndType: 'never',
|
||||
recurrenceEndDate: '',
|
||||
recurrenceDaysOfWeek: [],
|
||||
editMode: 'instance',
|
||||
};
|
||||
|
||||
/* ── Sub-components ───────────────────────────────────────────────── */
|
||||
@@ -350,6 +364,13 @@ function EventDetailContent({ event, onEdit, onDelete }: { event: CalendarEvent;
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{/* Recurring indicator */}
|
||||
{isCustomEvent && typeof meta.recurrencePattern === 'string' && meta.recurrencePattern && (
|
||||
<div className="flex items-center gap-1.5 pt-2 border-t border-gray-100 dark:border-gray-800">
|
||||
<Repeat className="h-3.5 w-3.5 text-emerald-500" />
|
||||
<span className="text-xs font-medium text-emerald-600 dark:text-emerald-400">{t('calendar.recurring')}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -638,6 +659,9 @@ export default function CalendarView() {
|
||||
|
||||
// Delete confirmation
|
||||
const [deleteConfirmEvent, setDeleteConfirmEvent] = useState<CalendarEvent | null>(null);
|
||||
// Edit mode dialog for recurring events
|
||||
const [showEditModeDialog, setShowEditModeDialog] = useState(false);
|
||||
const [pendingEditEvent, setPendingEditEvent] = useState<CalendarEvent | null>(null);
|
||||
|
||||
// Classes and subjects for form
|
||||
const [classes, setClasses] = useState<ClassGroup[]>([]);
|
||||
@@ -753,6 +777,15 @@ export default function CalendarView() {
|
||||
|
||||
const handleEditEvent = useCallback((event: CalendarEvent) => {
|
||||
const meta = event.meta as Record<string, unknown>;
|
||||
const isRecurring = typeof meta.recurrencePattern === 'string' && meta.recurrencePattern;
|
||||
const isChild = typeof meta.parentEventId === 'string' && meta.parentEventId;
|
||||
|
||||
if (isRecurring || isChild) {
|
||||
setPendingEditEvent(event);
|
||||
setShowEditModeDialog(true);
|
||||
return;
|
||||
}
|
||||
|
||||
setEditingEvent(event);
|
||||
setFormData({
|
||||
title: event.title,
|
||||
@@ -764,11 +797,48 @@ export default function CalendarView() {
|
||||
classGroupId: '',
|
||||
notes: (typeof meta.notes === 'string' && meta.notes) ? meta.notes : '',
|
||||
allDay: typeof meta.allDay === 'boolean' ? meta.allDay : false,
|
||||
recurrenceType: 'none',
|
||||
recurrenceInterval: 1,
|
||||
recurrenceEndType: 'never',
|
||||
recurrenceEndDate: '',
|
||||
recurrenceDaysOfWeek: [],
|
||||
editMode: 'instance',
|
||||
});
|
||||
setShowEventForm(true);
|
||||
setSelectedEvent(null);
|
||||
}, []);
|
||||
|
||||
const handleEditEventWithMode = useCallback((event: CalendarEvent, mode: 'series' | 'instance') => {
|
||||
const meta = event.meta as Record<string, unknown>;
|
||||
let parsedRecurrence: RecurrencePattern | null = null;
|
||||
if (typeof meta.recurrencePattern === 'string' && meta.recurrencePattern) {
|
||||
try { parsedRecurrence = JSON.parse(meta.recurrencePattern as string); } catch { /* ignore */ }
|
||||
}
|
||||
|
||||
setEditingEvent(event);
|
||||
setFormData({
|
||||
title: event.title,
|
||||
date: event.date,
|
||||
startTime: (typeof meta.startTime === 'string' && meta.startTime) ? meta.startTime : '08:00',
|
||||
endTime: (typeof meta.endTime === 'string' && meta.endTime) ? meta.endTime : '09:00',
|
||||
eventType: (typeof meta.eventType === 'string' ? meta.eventType : 'reminder') as CalendarEventItemType,
|
||||
subjectId: '',
|
||||
classGroupId: '',
|
||||
notes: (typeof meta.notes === 'string' && meta.notes) ? meta.notes : '',
|
||||
allDay: typeof meta.allDay === 'boolean' ? meta.allDay : false,
|
||||
recurrenceType: parsedRecurrence?.type ?? 'none',
|
||||
recurrenceInterval: parsedRecurrence?.interval ?? 1,
|
||||
recurrenceEndType: parsedRecurrence?.endDate ? 'on_date' : 'never',
|
||||
recurrenceEndDate: parsedRecurrence?.endDate ?? '',
|
||||
recurrenceDaysOfWeek: parsedRecurrence?.daysOfWeek ?? [],
|
||||
editMode: mode,
|
||||
});
|
||||
setShowEventForm(true);
|
||||
setSelectedEvent(null);
|
||||
setShowEditModeDialog(false);
|
||||
setPendingEditEvent(null);
|
||||
}, []);
|
||||
|
||||
const handleDeleteEvent = useCallback(async () => {
|
||||
if (!deleteConfirmEvent) return;
|
||||
try {
|
||||
@@ -786,6 +856,23 @@ export default function CalendarView() {
|
||||
if (!currentUser?.schoolId || !formData.title.trim()) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
const recurrencePattern: RecurrencePattern | null = formData.recurrenceType !== 'none'
|
||||
? {
|
||||
type: formData.recurrenceType,
|
||||
interval: formData.recurrenceInterval,
|
||||
...(formData.recurrenceEndType === 'on_date' && formData.recurrenceEndDate
|
||||
? { endDate: formData.recurrenceEndDate }
|
||||
: {}),
|
||||
...(formData.recurrenceType === 'weekly' && formData.recurrenceDaysOfWeek.length > 0
|
||||
? { daysOfWeek: formData.recurrenceDaysOfWeek }
|
||||
: {}),
|
||||
}
|
||||
: null;
|
||||
|
||||
const recurrenceEnd = formData.recurrenceEndType === 'on_date' && formData.recurrenceEndDate
|
||||
? formData.recurrenceEndDate
|
||||
: null;
|
||||
|
||||
if (editingEvent) {
|
||||
await updateCalendarEventItem(editingEvent.id, {
|
||||
title: formData.title,
|
||||
@@ -797,6 +884,9 @@ export default function CalendarView() {
|
||||
classGroupId: formData.classGroupId || null,
|
||||
notes: formData.notes || null,
|
||||
allDay: formData.allDay,
|
||||
recurrencePattern,
|
||||
recurrenceEnd,
|
||||
editMode: formData.editMode,
|
||||
});
|
||||
toast.success(t('calendar.event_updated'));
|
||||
} else {
|
||||
@@ -811,6 +901,8 @@ export default function CalendarView() {
|
||||
classGroupId: formData.classGroupId || null,
|
||||
notes: formData.notes || null,
|
||||
allDay: formData.allDay,
|
||||
recurrencePattern,
|
||||
recurrenceEnd,
|
||||
});
|
||||
toast.success(t('calendar.event_created'));
|
||||
}
|
||||
@@ -1561,6 +1653,132 @@ export default function CalendarView() {
|
||||
className="min-h-[44px] resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Recurrence options */}
|
||||
{!editingEvent || formData.editMode === 'series' ? (
|
||||
<div className="space-y-3 pt-2 border-t border-gray-100 dark:border-gray-800">
|
||||
<div className="flex items-center gap-2">
|
||||
<Repeat className="h-4 w-4 text-emerald-500" />
|
||||
<Label className="text-xs font-semibold text-emerald-700 dark:text-emerald-400">
|
||||
{t('calendar.recurring')}
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
{/* Repeat type */}
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs font-medium text-gray-700 dark:text-gray-300">
|
||||
{t('calendar.repeat_none')}
|
||||
</Label>
|
||||
<Select
|
||||
value={formData.recurrenceType}
|
||||
onValueChange={(value) => setFormData((f) => ({
|
||||
...f,
|
||||
recurrenceType: value as 'none' | 'daily' | 'weekly' | 'monthly' | 'yearly',
|
||||
recurrenceDaysOfWeek: value === 'weekly' ? [1] : [],
|
||||
}))}
|
||||
>
|
||||
<SelectTrigger className="min-h-[44px]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">{t('calendar.repeat_none')}</SelectItem>
|
||||
<SelectItem value="daily">{t('calendar.repeat_daily')}</SelectItem>
|
||||
<SelectItem value="weekly">{t('calendar.repeat_weekly')}</SelectItem>
|
||||
<SelectItem value="monthly">{t('calendar.repeat_monthly')}</SelectItem>
|
||||
<SelectItem value="yearly">{t('calendar.repeat_yearly')}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Interval */}
|
||||
{formData.recurrenceType !== 'none' && (
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs font-medium text-gray-700 dark:text-gray-300">
|
||||
{t('calendar.repeat_interval', { interval: formData.recurrenceInterval })}
|
||||
</Label>
|
||||
<Input
|
||||
type="number"
|
||||
min={1}
|
||||
max={30}
|
||||
value={formData.recurrenceInterval}
|
||||
onChange={(e) => setFormData((f) => ({ ...f, recurrenceInterval: parseInt(e.target.value) || 1 }))}
|
||||
className="min-h-[44px] w-20"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Days of week selector (for weekly) */}
|
||||
{formData.recurrenceType === 'weekly' && (
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs font-medium text-gray-700 dark:text-gray-300">
|
||||
{t('calendar.repeat_weekdays')}
|
||||
</Label>
|
||||
<div className="flex gap-1">
|
||||
{['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'].map((dayLabel, dayIndex) => {
|
||||
const dayNum = dayIndex === 6 ? 0 : dayIndex + 1;
|
||||
const isSelected = formData.recurrenceDaysOfWeek.includes(dayNum);
|
||||
return (
|
||||
<button
|
||||
key={dayNum}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setFormData((f) => ({
|
||||
...f,
|
||||
recurrenceDaysOfWeek: isSelected
|
||||
? f.recurrenceDaysOfWeek.filter((d) => d !== dayNum)
|
||||
: [...f.recurrenceDaysOfWeek, dayNum].sort(),
|
||||
}));
|
||||
}}
|
||||
className={`w-10 h-10 rounded-lg text-xs font-semibold flex items-center justify-center transition-colors ${
|
||||
isSelected
|
||||
? 'bg-emerald-500 text-white shadow-sm'
|
||||
: 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-emerald-100 dark:hover:bg-emerald-900/20'
|
||||
}`}
|
||||
>
|
||||
{dayLabel}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Recurrence end */}
|
||||
{formData.recurrenceType !== 'none' && (
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-medium text-gray-700 dark:text-gray-300">
|
||||
{t('calendar.repeat_end')}
|
||||
</Label>
|
||||
<div className="flex gap-3">
|
||||
<Button
|
||||
variant={formData.recurrenceEndType === 'never' ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
className={formData.recurrenceEndType === 'never' ? 'bg-emerald-500 hover:bg-emerald-600 text-white min-h-[44px]' : 'min-h-[44px]'}
|
||||
onClick={() => setFormData((f) => ({ ...f, recurrenceEndType: 'never' }))}
|
||||
>
|
||||
{t('calendar.repeat_end_never')}
|
||||
</Button>
|
||||
<Button
|
||||
variant={formData.recurrenceEndType === 'on_date' ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
className={formData.recurrenceEndType === 'on_date' ? 'bg-emerald-500 hover:bg-emerald-600 text-white min-h-[44px]' : 'min-h-[44px]'}
|
||||
onClick={() => setFormData((f) => ({ ...f, recurrenceEndType: 'on_date' }))}
|
||||
>
|
||||
{t('calendar.repeat_end_on')}
|
||||
</Button>
|
||||
</div>
|
||||
{formData.recurrenceEndType === 'on_date' && (
|
||||
<Input
|
||||
type="date"
|
||||
value={formData.recurrenceEndDate}
|
||||
onChange={(e) => setFormData((f) => ({ ...f, recurrenceEndDate: e.target.value }))}
|
||||
className="min-h-[44px]"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<DialogFooter className="mt-4 gap-2">
|
||||
@@ -1606,6 +1824,42 @@ export default function CalendarView() {
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
{/* Edit mode dialog for recurring events */}
|
||||
<AlertDialog
|
||||
open={showEditModeDialog}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
setShowEditModeDialog(false);
|
||||
setPendingEditEvent(null);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>{t('calendar.edit_series')}</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
{t('calendar.edit_instance')}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter className="flex flex-col sm:flex-row gap-2">
|
||||
<AlertDialogCancel className="min-h-[44px]">{t('action.cancel')}</AlertDialogCancel>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => pendingEditEvent && handleEditEventWithMode(pendingEditEvent, 'instance')}
|
||||
className="border-emerald-200/60 dark:border-emerald-900/30 text-emerald-700 dark:text-emerald-300 min-h-[44px]"
|
||||
>
|
||||
{t('calendar.edit_instance')}
|
||||
</Button>
|
||||
<AlertDialogAction
|
||||
onClick={() => pendingEditEvent && handleEditEventWithMode(pendingEditEvent, 'series')}
|
||||
className="bg-emerald-500 hover:bg-emerald-600 text-white min-h-[44px]"
|
||||
>
|
||||
{t('calendar.edit_series')}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -46,6 +46,7 @@ import {
|
||||
CalendarCheck,
|
||||
Calendar as CalendarIconNav,
|
||||
BookMarked,
|
||||
Heart,
|
||||
} from 'lucide-react';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
@@ -60,9 +61,9 @@ import {
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from '@/components/ui/tooltip';
|
||||
import { useAppStore, type ViewName } from '@/lib/store';
|
||||
import { useAppStore, type ViewName, type CurrentUser } from '@/lib/store';
|
||||
import { t } from '@/lib/i18n';
|
||||
import { fetchDashboard, type DashboardData, getStoredNotifications, type AppNotification, addNotification, markNotificationsRead } from '@/lib/api';
|
||||
import { fetchDashboard, type DashboardData, getStoredNotifications, type AppNotification, addNotification, markNotificationsRead, fetchParentLinks, type ParentStudentLinkData, fetchStudents } from '@/lib/api';
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
@@ -131,6 +132,284 @@ const motivationalTips = [
|
||||
{ text: 'Detailed records make parent conversations productive.', icon: MessageSquare },
|
||||
];
|
||||
|
||||
// ─── Parent Dashboard Component ────────────────────────────────────────
|
||||
function ParentDashboard({ currentUser, setCurrentView, locale }: {
|
||||
currentUser: CurrentUser;
|
||||
setCurrentView: (view: ViewName) => void;
|
||||
locale: string;
|
||||
}) {
|
||||
const [parentLinks, setParentLinks] = useState<ParentStudentLinkData[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
async function load() {
|
||||
try {
|
||||
const links = await fetchParentLinks(currentUser.id);
|
||||
setParentLinks(links);
|
||||
} catch {
|
||||
// ignore
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
load();
|
||||
}, [currentUser.id]);
|
||||
|
||||
const children = parentLinks.map((link) => ({
|
||||
linkId: link.id,
|
||||
studentId: link.student.id,
|
||||
firstName: link.student.firstName,
|
||||
lastName: link.student.lastName,
|
||||
relationship: link.relationship,
|
||||
className: link.student.enrollments?.[0]?.classGroup?.name ?? '--',
|
||||
gradeLevel: link.student.enrollments?.[0]?.classGroup?.gradeLevel ?? '--',
|
||||
}));
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Skeleton className="h-10 w-64" />
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<Skeleton key={i} className="h-40 rounded-xl" />
|
||||
))}
|
||||
</div>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<Skeleton className="h-64 rounded-xl" />
|
||||
<Skeleton className="h-64 rounded-xl" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
className="space-y-6 pb-8"
|
||||
>
|
||||
{/* Parent Welcome Header */}
|
||||
<motion.div variants={itemVariants}>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-wrap items-start justify-between gap-3">
|
||||
<div className="flex items-center gap-3.5">
|
||||
<div className="flex items-center justify-center w-12 h-12 rounded-2xl bg-gradient-to-br from-violet-400 to-purple-500 text-white shadow-lg shadow-violet-300/30 ring-2 ring-violet-200/30 dark:ring-violet-800/20">
|
||||
<Heart className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold bg-gradient-to-r from-violet-600 via-purple-600 to-violet-500 dark:from-violet-400 dark:via-purple-400 dark:to-violet-300 bg-clip-text text-transparent">
|
||||
{t('parent.welcome_back')}, {currentUser.firstName}!
|
||||
</h2>
|
||||
<p className="text-violet-600/60 dark:text-violet-400/40 mt-0.5 text-sm">{t('parent.dashboard_title')}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-gradient-to-r from-violet-50 to-purple-50/50 dark:from-violet-900/20 dark:to-purple-900/10 border border-violet-200/40 dark:border-violet-900/30 text-xs font-medium text-violet-700 dark:text-violet-300 shadow-sm">
|
||||
<CalendarDays className="h-3.5 w-3.5" />
|
||||
<span className="font-semibold">
|
||||
{new Date().toLocaleDateString(locale === 'de' ? 'de-DE' : 'en-GB', {
|
||||
weekday: 'long',
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric',
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Parent Cards Grid */}
|
||||
<motion.div variants={itemVariants} className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{/* My Children Card */}
|
||||
<Card className="border-0 shadow-sm rounded-xl overflow-hidden ring-1 ring-black/[0.03] dark:ring-white/[0.05] hover:ring-violet-200/40 dark:hover:ring-violet-700/30 transition-all duration-300 hover:shadow-lg hover:shadow-violet-200/60 dark:hover:shadow-violet-800/30 cursor-pointer min-h-[44px]">
|
||||
<CardHeader className="p-4 pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center justify-center w-9 h-9 rounded-lg bg-gradient-to-br from-violet-400 to-violet-500 text-white shadow-sm">
|
||||
<Users className="h-4 w-4" />
|
||||
</div>
|
||||
<CardTitle className="text-sm font-semibold">{t('parent.my_children')}</CardTitle>
|
||||
</div>
|
||||
<ChevronRight className="h-4 w-4 text-violet-500" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-4 pt-2">
|
||||
{children.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{children.map((child) => (
|
||||
<div key={child.studentId} className="flex items-center justify-between px-3 py-2 rounded-lg bg-violet-50/50 dark:bg-violet-900/10 border border-violet-100/50 dark:border-violet-900/20">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center justify-center w-6 h-6 rounded-full bg-violet-200 dark:bg-violet-800 text-violet-700 dark:text-violet-300 text-[10px] font-bold">
|
||||
{child.firstName[0]}{child.lastName[0]}
|
||||
</div>
|
||||
<span className="text-xs font-medium text-gray-700 dark:text-gray-300">{child.firstName} {child.lastName}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Badge variant="outline" className="text-[10px] px-1.5 py-0 bg-violet-50/50 dark:bg-violet-900/10 border-violet-200/50 dark:border-violet-900/30 text-violet-700 dark:text-violet-300 shrink-0">
|
||||
{child.className}
|
||||
</Badge>
|
||||
{child.relationship && (
|
||||
<span className="text-[10px] text-gray-400 dark:text-gray-500">{t(`parent.${child.relationship}`)}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center h-24 rounded-lg bg-gray-50 dark:bg-gray-900/20 border border-gray-200/30 dark:border-gray-800/20">
|
||||
<Users className="h-8 w-8 text-gray-300 dark:text-gray-600 mb-1" />
|
||||
<p className="text-xs text-gray-400 dark:text-gray-500">{t('parent.no_children')}</p>
|
||||
<p className="text-[10px] text-gray-400 dark:text-gray-500 mt-0.5">{t('parent.no_children_desc')}</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Recent Progress Card */}
|
||||
<Card className="border-0 shadow-sm rounded-xl overflow-hidden ring-1 ring-black/[0.03] dark:ring-white/[0.05] hover:ring-emerald-200/40 dark:hover:ring-emerald-700/30 transition-all duration-300 hover:shadow-lg hover:shadow-emerald-200/60 dark:hover:shadow-emerald-800/30 cursor-pointer min-h-[44px]" onClick={() => setCurrentView('flower')}>
|
||||
<CardHeader className="p-4 pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center justify-center w-9 h-9 rounded-lg bg-gradient-to-br from-emerald-400 to-emerald-500 text-white shadow-sm">
|
||||
<TrendingUp className="h-4 w-4" />
|
||||
</div>
|
||||
<CardTitle className="text-sm font-semibold">{t('parent.recent_progress')}</CardTitle>
|
||||
</div>
|
||||
<ChevronRight className="h-4 w-4 text-emerald-500" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-4 pt-2">
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mb-3">{t('parent.child_progress_desc')}</p>
|
||||
{children.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{children.slice(0, 3).map((child) => (
|
||||
<div key={child.studentId} className="flex items-center justify-between px-3 py-2 rounded-lg bg-emerald-50/50 dark:bg-emerald-900/10 border border-emerald-100/50 dark:border-emerald-900/20">
|
||||
<span className="text-xs font-medium text-gray-700 dark:text-gray-300">{child.firstName}</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<Sprout className="h-3.5 w-3.5 text-emerald-500" />
|
||||
<span className="text-xs text-emerald-600 dark:text-emerald-400 font-medium">{t('parent.view_progress')}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center h-24 rounded-lg bg-gray-50 dark:bg-gray-900/20 border border-gray-200/30 dark:border-gray-800/20">
|
||||
<TrendingUp className="h-8 w-8 text-gray-300 dark:text-gray-600 mb-1" />
|
||||
<p className="text-xs text-gray-400 dark:text-gray-500">{t('parent.no_children')}</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Upcoming Assessments Card */}
|
||||
<Card className="border-0 shadow-sm rounded-xl overflow-hidden ring-1 ring-black/[0.03] dark:ring-white/[0.05] hover:ring-amber-200/40 dark:hover:ring-amber-700/30 transition-all duration-300 hover:shadow-lg hover:shadow-amber-200/60 dark:hover:shadow-amber-800/30 cursor-pointer min-h-[44px]" onClick={() => setCurrentView('assessments')}>
|
||||
<CardHeader className="p-4 pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center justify-center w-9 h-9 rounded-lg bg-gradient-to-br from-amber-400 to-amber-500 text-white shadow-sm">
|
||||
<ClipboardCheck className="h-4 w-4" />
|
||||
</div>
|
||||
<CardTitle className="text-sm font-semibold">{t('parent.upcoming_assessments')}</CardTitle>
|
||||
</div>
|
||||
<ChevronRight className="h-4 w-4 text-amber-500" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-4 pt-2">
|
||||
<div className="flex flex-col items-center justify-center h-24 rounded-lg bg-amber-50/50 dark:bg-amber-900/10 border border-amber-200/30 dark:border-amber-900/20">
|
||||
<ClipboardCheck className="h-8 w-8 text-amber-400/60 dark:text-amber-600/40 mb-1" />
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">{t('parent.no_assessments')}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Messages from Teachers Card */}
|
||||
<Card className="border-0 shadow-sm rounded-xl overflow-hidden ring-1 ring-black/[0.03] dark:ring-white/[0.05] hover:ring-teal-200/40 dark:hover:ring-teal-700/30 transition-all duration-300 hover:shadow-lg hover:shadow-teal-200/60 dark:hover:shadow-teal-800/30 cursor-pointer min-h-[44px]" onClick={() => setCurrentView('parents')}>
|
||||
<CardHeader className="p-4 pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center justify-center w-9 h-9 rounded-lg bg-gradient-to-br from-teal-400 to-teal-500 text-white shadow-sm">
|
||||
<MessageSquare className="h-4 w-4" />
|
||||
</div>
|
||||
<CardTitle className="text-sm font-semibold">{t('parent.messages_from_teachers')}</CardTitle>
|
||||
</div>
|
||||
<ChevronRight className="h-4 w-4 text-teal-500" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-4 pt-2">
|
||||
<div className="flex flex-col items-center justify-center h-24 rounded-lg bg-teal-50/50 dark:bg-teal-900/10 border border-teal-200/30 dark:border-teal-900/20">
|
||||
<MessageSquare className="h-8 w-8 text-teal-400/60 dark:text-teal-600/40 mb-1" />
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">{t('parent.no_messages')}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Attendance Summary Card */}
|
||||
<Card className="border-0 shadow-sm rounded-xl overflow-hidden ring-1 ring-black/[0.03] dark:ring-white/[0.05] hover:ring-rose-200/40 dark:hover:ring-rose-700/30 transition-all duration-300 hover:shadow-lg hover:shadow-rose-200/60 dark:hover:shadow-rose-800/30 cursor-pointer min-h-[44px]" onClick={() => setCurrentView('attendance')}>
|
||||
<CardHeader className="p-4 pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center justify-center w-9 h-9 rounded-lg bg-gradient-to-br from-rose-400 to-rose-500 text-white shadow-sm">
|
||||
<CalendarCheck className="h-4 w-4" />
|
||||
</div>
|
||||
<CardTitle className="text-sm font-semibold">{t('parent.attendance_summary')}</CardTitle>
|
||||
</div>
|
||||
<ChevronRight className="h-4 w-4 text-rose-500" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-4 pt-2">
|
||||
{children.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{children.slice(0, 3).map((child) => (
|
||||
<div key={child.studentId} className="flex items-center justify-between px-3 py-2 rounded-lg bg-rose-50/50 dark:bg-rose-900/10 border border-rose-100/50 dark:border-rose-900/20">
|
||||
<span className="text-xs font-medium text-gray-700 dark:text-gray-300">{child.firstName}</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<CalendarCheck className="h-3.5 w-3.5 text-emerald-500" />
|
||||
<span className="text-xs text-emerald-600 dark:text-emerald-400 font-medium">{t('parent.view_attendance')}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center h-24 rounded-lg bg-gray-50 dark:bg-gray-900/20 border border-gray-200/30 dark:border-gray-800/20">
|
||||
<CalendarCheck className="h-8 w-8 text-gray-300 dark:text-gray-600 mb-1" />
|
||||
<p className="text-xs text-gray-400 dark:text-gray-500">{t('parent.no_children')}</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Calendar Card */}
|
||||
<Card className="border-0 shadow-sm rounded-xl overflow-hidden ring-1 ring-black/[0.03] dark:ring-white/[0.05] hover:ring-violet-200/40 dark:hover:ring-violet-700/30 transition-all duration-300 hover:shadow-lg hover:shadow-violet-200/60 dark:hover:shadow-violet-800/30 cursor-pointer min-h-[44px]" onClick={() => setCurrentView('calendar')}>
|
||||
<CardHeader className="p-4 pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center justify-center w-9 h-9 rounded-lg bg-gradient-to-br from-violet-400 to-purple-500 text-white shadow-sm">
|
||||
<CalendarIconNav className="h-4 w-4" />
|
||||
</div>
|
||||
<CardTitle className="text-sm font-semibold">{t('nav.calendar')}</CardTitle>
|
||||
</div>
|
||||
<ChevronRight className="h-4 w-4 text-violet-500" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-4 pt-2">
|
||||
<div className="flex items-center justify-center h-24 rounded-lg bg-gradient-to-br from-violet-50 to-purple-50/50 dark:from-violet-900/20 dark:to-purple-900/10 border border-violet-200/30 dark:border-violet-900/20">
|
||||
<div className="text-center">
|
||||
<p className="text-lg font-bold text-violet-600 dark:text-violet-400">
|
||||
{new Date().toLocaleDateString(locale === 'de' ? 'de-DE' : 'en-GB', { day: 'numeric', month: 'short' })}
|
||||
</p>
|
||||
<p className="text-[10px] text-gray-500 dark:text-gray-400">
|
||||
{new Date().toLocaleDateString(locale === 'de' ? 'de-DE' : 'en-GB', { weekday: 'long' })}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DashboardView() {
|
||||
const currentUser = useAppStore((s) => s.currentUser);
|
||||
const setCurrentView = useAppStore((s) => s.setCurrentView);
|
||||
@@ -514,6 +793,17 @@ export default function DashboardView() {
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Parent Dashboard ──────────────────────────────────────────────
|
||||
if (currentUser?.role === 'PARENT') {
|
||||
return (
|
||||
<ParentDashboard
|
||||
currentUser={currentUser}
|
||||
setCurrentView={setCurrentView}
|
||||
locale={locale}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
|
||||
@@ -23,6 +23,8 @@ import {
|
||||
Eye,
|
||||
EyeOff,
|
||||
ChevronDown,
|
||||
ZoomIn,
|
||||
ZoomOut,
|
||||
} from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Slider } from '@/components/ui/slider';
|
||||
@@ -431,6 +433,9 @@ export default function DrawingCanvas({
|
||||
// Canvas dimensions
|
||||
const [canvasSize, setCanvasSize] = useState({ width: 1200, height: 800 });
|
||||
|
||||
// Zoom state
|
||||
const [zoomLevel, setZoomLevel] = useState(100);
|
||||
|
||||
/* ── Load initial data ─────────────────────────────────────────── */
|
||||
|
||||
useEffect(() => {
|
||||
@@ -780,9 +785,9 @@ export default function DrawingCanvas({
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setActiveTool(tool.id)}
|
||||
className={`h-10 w-10 transition-all ${
|
||||
className={`h-10 w-10 transition-all rounded-lg ${
|
||||
activeTool === tool.id
|
||||
? 'bg-emerald-600 text-white shadow-md shadow-emerald-500/30'
|
||||
? 'bg-emerald-600 text-white shadow-md shadow-emerald-500/30 scale-105'
|
||||
: 'text-gray-300 hover:bg-gray-800 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
@@ -820,9 +825,9 @@ export default function DrawingCanvas({
|
||||
<button
|
||||
key={color}
|
||||
onClick={() => setStrokeColor(color)}
|
||||
className={`h-7 w-7 rounded-full border-2 transition-all hover:scale-110 ${
|
||||
className={`h-8 w-8 rounded-full border-2 transition-all hover:scale-110 ${
|
||||
strokeColor === color
|
||||
? 'border-emerald-500 ring-2 ring-emerald-500/30'
|
||||
? 'border-emerald-500 ring-2 ring-emerald-500/30 scale-110'
|
||||
: 'border-gray-300'
|
||||
}`}
|
||||
style={{ backgroundColor: color }}
|
||||
@@ -837,9 +842,9 @@ export default function DrawingCanvas({
|
||||
<button
|
||||
key={color}
|
||||
onClick={() => setStrokeColor(color)}
|
||||
className={`h-7 w-7 rounded-full border-2 transition-all hover:scale-110 ${
|
||||
className={`h-8 w-8 rounded-full border-2 transition-all hover:scale-110 ${
|
||||
strokeColor === color
|
||||
? 'border-emerald-500 ring-2 ring-emerald-500/30'
|
||||
? 'border-emerald-500 ring-2 ring-emerald-500/30 scale-110'
|
||||
: 'border-gray-300'
|
||||
}`}
|
||||
style={{ backgroundColor: color }}
|
||||
@@ -958,7 +963,7 @@ export default function DrawingCanvas({
|
||||
size="sm"
|
||||
onClick={handleUndo}
|
||||
disabled={strokes.length === 0}
|
||||
className="h-10 w-10 text-gray-300 hover:bg-gray-800 hover:text-white disabled:opacity-30"
|
||||
className="h-10 w-10 text-gray-300 hover:bg-gray-800 hover:text-white disabled:opacity-30 transition-transform active:scale-90"
|
||||
>
|
||||
<Undo2 className="h-5 w-5" />
|
||||
</Button>
|
||||
@@ -972,7 +977,7 @@ export default function DrawingCanvas({
|
||||
size="sm"
|
||||
onClick={handleRedo}
|
||||
disabled={redoStack.length === 0}
|
||||
className="h-10 w-10 text-gray-300 hover:bg-gray-800 hover:text-white disabled:opacity-30"
|
||||
className="h-10 w-10 text-gray-300 hover:bg-gray-800 hover:text-white disabled:opacity-30 transition-transform active:scale-90"
|
||||
>
|
||||
<Redo2 className="h-5 w-5" />
|
||||
</Button>
|
||||
@@ -981,6 +986,42 @@ export default function DrawingCanvas({
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="mx-1 h-8 w-px bg-gray-700" />
|
||||
|
||||
{/* Zoom controls */}
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setZoomLevel(Math.max(25, zoomLevel - 25))}
|
||||
disabled={zoomLevel <= 25}
|
||||
className="h-10 w-10 text-gray-300 hover:bg-gray-800 hover:text-white disabled:opacity-30"
|
||||
>
|
||||
<ZoomOut className="h-5 w-5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{t('drawing.zoom_out')}</TooltipContent>
|
||||
</Tooltip>
|
||||
<span className="text-xs text-gray-400 min-w-[2rem] text-center">{zoomLevel}%</span>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setZoomLevel(Math.min(200, zoomLevel + 25))}
|
||||
disabled={zoomLevel >= 200}
|
||||
className="h-10 w-10 text-gray-300 hover:bg-gray-800 hover:text-white disabled:opacity-30"
|
||||
>
|
||||
<ZoomIn className="h-5 w-5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{t('drawing.zoom_in')}</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
|
||||
{/* Spacer */}
|
||||
<div className="flex-1" />
|
||||
|
||||
@@ -1047,9 +1088,19 @@ export default function DrawingCanvas({
|
||||
{/* ── Canvas Area ────────────────────────────────────────────── */}
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="flex-1 overflow-hidden bg-gray-100 p-4"
|
||||
className="flex-1 overflow-auto bg-gray-100 p-4"
|
||||
>
|
||||
<div className="relative mx-auto h-full max-w-full overflow-hidden rounded-lg shadow-lg">
|
||||
<div
|
||||
className="relative mx-auto overflow-hidden rounded-lg shadow-lg canvas-toolbar"
|
||||
style={{
|
||||
width: `${zoomLevel}%`,
|
||||
maxWidth: '100%',
|
||||
height: `${zoomLevel}%`,
|
||||
maxHeight: '100%',
|
||||
transform: zoomLevel !== 100 ? `scale(${zoomLevel / 100})` : undefined,
|
||||
transformOrigin: 'center center',
|
||||
}}
|
||||
>
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
width={canvasSize.width}
|
||||
|
||||
@@ -14,6 +14,7 @@ import {
|
||||
User as UserIcon, GraduationCap, FileDown,
|
||||
Copy, FlaskConical, Languages, Calculator, Paintbrush, Megaphone,
|
||||
Strikethrough, Type, Highlighter, GripVertical,
|
||||
Clock, History, ZoomIn, ZoomOut, Image as ImageIcon,
|
||||
} from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
@@ -33,6 +34,7 @@ import { useAppStore } from '@/lib/store';
|
||||
import { t } from '@/lib/i18n';
|
||||
import { apiGet, apiPost, apiPut, apiDelete } from '@/lib/api';
|
||||
import { toast } from 'sonner';
|
||||
import DrawingCanvas from '@/components/drawing-canvas';
|
||||
|
||||
// ─── Types ───────────────────────────────────────────────────────────
|
||||
|
||||
@@ -87,6 +89,17 @@ interface ClassGroup {
|
||||
gradeLevel: number;
|
||||
}
|
||||
|
||||
interface PageVersion {
|
||||
id: string;
|
||||
pageId: string;
|
||||
version: number;
|
||||
textContent: string | null;
|
||||
drawingData: string | null;
|
||||
editedBy: string | null;
|
||||
editSummary: string | null;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
// ─── Constants ───────────────────────────────────────────────────────
|
||||
|
||||
const NOTEBOOK_TYPES: Array<{ key: string; icon: React.ElementType; labelKey: string; descKey: string }> = [
|
||||
@@ -946,7 +959,7 @@ function PageThumbnail({ page, notebookType }: { page: NotebookPage; notebookTyp
|
||||
|
||||
return (
|
||||
<div
|
||||
className="w-full h-24 rounded-md overflow-hidden border border-gray-200 dark:border-gray-600 relative"
|
||||
className="w-full h-24 rounded-md overflow-hidden border border-gray-200 dark:border-gray-600 relative group-hover:shadow-md transition-shadow duration-200"
|
||||
style={{ ...getPageBackgroundCSS(bgType), backgroundColor: '#fff' }}
|
||||
>
|
||||
<div className="p-1.5 text-xs text-gray-400 dark:text-gray-500 truncate leading-tight">
|
||||
@@ -964,6 +977,12 @@ function PageThumbnail({ page, notebookType }: { page: NotebookPage; notebookTyp
|
||||
<Bookmark className="w-3 h-3 text-amber-500 fill-amber-500" />
|
||||
</div>
|
||||
)}
|
||||
{/* Drawing indicator */}
|
||||
{page.drawingData && (
|
||||
<div className="absolute bottom-0 right-0">
|
||||
<ImageIcon className="w-3 h-3 text-emerald-500" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -998,6 +1017,13 @@ function NotebookDetailView({
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [autoSaveStatus, setAutoSaveStatus] = useState<'idle' | 'saving' | 'saved'>('idle');
|
||||
|
||||
// Version history state
|
||||
const [versionHistoryOpen, setVersionHistoryOpen] = useState(false);
|
||||
const [pageVersions, setPageVersions] = useState<PageVersion[]>([]);
|
||||
const [previewVersion, setPreviewVersion] = useState<PageVersion | null>(null);
|
||||
const [restoringVersion, setRestoringVersion] = useState(false);
|
||||
const [restoreConfirmVersion, setRestoreConfirmVersion] = useState<PageVersion | null>(null);
|
||||
|
||||
// Drag-and-drop state
|
||||
const [draggedPageId, setDraggedPageId] = useState<string | null>(null);
|
||||
const [dragOverPageId, setDragOverPageId] = useState<string | null>(null);
|
||||
@@ -1123,6 +1149,14 @@ function NotebookDetailView({
|
||||
lastSavedTitleRef.current = pageTitle;
|
||||
toast.success(t('notebooks.page_saved'));
|
||||
setAutoSaveStatus('idle');
|
||||
// Create version on manual save
|
||||
try {
|
||||
await apiPost(`/api/notebooks/${notebook.id}/pages/${currentPage.id}/versions`, {
|
||||
editSummary: null,
|
||||
});
|
||||
} catch {
|
||||
// version creation is non-critical
|
||||
}
|
||||
} catch {
|
||||
toast.error(t('notebooks.error_save'));
|
||||
} finally {
|
||||
@@ -1130,6 +1164,71 @@ function NotebookDetailView({
|
||||
}
|
||||
};
|
||||
|
||||
// Load version history
|
||||
const loadVersionHistory = useCallback(async () => {
|
||||
if (!currentPage) return;
|
||||
try {
|
||||
const versions = await apiGet<PageVersion[]>(`/api/notebooks/${notebook.id}/pages/${currentPage.id}/versions`);
|
||||
setPageVersions(versions);
|
||||
} catch {
|
||||
setPageVersions([]);
|
||||
}
|
||||
}, [notebook.id, currentPage]);
|
||||
|
||||
// Open version history dialog
|
||||
const handleOpenVersionHistory = useCallback(async () => {
|
||||
setVersionHistoryOpen(true);
|
||||
setPreviewVersion(null);
|
||||
await loadVersionHistory();
|
||||
}, [loadVersionHistory]);
|
||||
|
||||
// Restore a version
|
||||
const handleRestoreVersion = useCallback(async (version: PageVersion) => {
|
||||
setRestoringVersion(true);
|
||||
try {
|
||||
const result = await apiPut<{ page: NotebookPage; restoredVersion: PageVersion }>(`/api/notebooks/${notebook.id}/pages/${currentPage!.id}/versions`, {
|
||||
versionId: version.id,
|
||||
});
|
||||
// Update local state with restored page content
|
||||
await onUpdatePage(currentPage!.id, {
|
||||
textContent: result.page.textContent,
|
||||
drawingData: result.page.drawingData,
|
||||
});
|
||||
setEditorContent(result.page.textContent ?? '');
|
||||
setPageContent(result.page.textContent ?? '');
|
||||
lastSavedContentRef.current = result.page.textContent ?? '';
|
||||
toast.success(t('notebooks.version_restored'));
|
||||
setRestoreConfirmVersion(null);
|
||||
await loadVersionHistory();
|
||||
} catch {
|
||||
toast.error(t('notebooks.error_save'));
|
||||
} finally {
|
||||
setRestoringVersion(false);
|
||||
}
|
||||
}, [notebook.id, currentPage, onUpdatePage, setEditorContent, loadVersionHistory]);
|
||||
|
||||
// Handle drawing save from DrawingCanvas
|
||||
const handleDrawingSave = useCallback(async (drawingData: string, imageData: string) => {
|
||||
if (!currentPage) return;
|
||||
try {
|
||||
await onUpdatePage(currentPage.id, {
|
||||
drawingData,
|
||||
contentType: currentPage.textContent ? 'mixed' : 'drawing',
|
||||
});
|
||||
toast.success(t('notebooks.drawing_saved'));
|
||||
// Create version on drawing save
|
||||
try {
|
||||
await apiPost(`/api/notebooks/${notebook.id}/pages/${currentPage.id}/versions`, {
|
||||
editSummary: 'Drawing saved',
|
||||
});
|
||||
} catch {
|
||||
// non-critical
|
||||
}
|
||||
} catch {
|
||||
toast.error(t('notebooks.error_save'));
|
||||
}
|
||||
}, [currentPage, notebook.id, onUpdatePage]);
|
||||
|
||||
// Drag-and-drop handlers for page reorder
|
||||
const handleDragStart = useCallback((e: React.DragEvent, pageId: string) => {
|
||||
setDraggedPageId(pageId);
|
||||
@@ -1222,10 +1321,11 @@ function NotebookDetailView({
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
initial={{ opacity: 0, x: 30 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: -20 }}
|
||||
className="flex flex-col h-full"
|
||||
exit={{ opacity: 0, x: -30 }}
|
||||
transition={{ type: 'spring', stiffness: 200, damping: 25 }}
|
||||
className="flex flex-col h-full animate-slide-in"
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-3 p-4 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
|
||||
@@ -1280,19 +1380,20 @@ function NotebookDetailView({
|
||||
variant={drawingMode ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => setDrawingMode(!drawingMode)}
|
||||
className={`min-h-[44px] shrink-0 transition-all ${drawingMode ? 'bg-emerald-600 hover:bg-emerald-700 shadow-md shadow-emerald-500/20' : ''}`}
|
||||
>
|
||||
<PenLine className="w-4 h-4 mr-1" />
|
||||
{drawingMode ? t('notebooks.drawing_mode_exit') : t('notebooks.drawing_mode_toggle')}
|
||||
</Button>
|
||||
|
||||
{/* Version history button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleOpenVersionHistory}
|
||||
className="min-h-[44px] shrink-0"
|
||||
>
|
||||
{drawingMode ? (
|
||||
<>
|
||||
<PenLine className="w-4 h-4 mr-1" />
|
||||
{t('notebooks.drawing_mode_exit')}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<PenLine className="w-4 h-4 mr-1" />
|
||||
{t('notebooks.drawing_mode_toggle')}
|
||||
</>
|
||||
)}
|
||||
<Clock className="w-4 h-4" />
|
||||
</Button>
|
||||
|
||||
{/* Public toggle */}
|
||||
@@ -1418,6 +1519,16 @@ function NotebookDetailView({
|
||||
className="font-semibold text-lg border-0 bg-transparent shadow-none focus-visible:ring-0 h-10"
|
||||
/>
|
||||
|
||||
{/* Version history button in page title bar */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleOpenVersionHistory}
|
||||
className="min-h-[44px] shrink-0 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
|
||||
>
|
||||
<History className="w-4 h-4" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
@@ -1438,24 +1549,22 @@ function NotebookDetailView({
|
||||
</div>
|
||||
|
||||
{drawingMode ? (
|
||||
/* Drawing placeholder */
|
||||
<div className="flex-1 flex items-center justify-center p-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
className="w-full h-full max-w-3xl rounded-xl border-2 border-gray-200 dark:border-gray-700 bg-white flex flex-col items-center justify-center gap-4 p-8"
|
||||
style={{ ...getPageBackgroundCSS(currentPage.background ?? notebook.notebookType), backgroundColor: '#fff' }}
|
||||
>
|
||||
<PenLine className="w-12 h-12 text-gray-300 dark:text-gray-600" />
|
||||
<p className="text-gray-500 dark:text-gray-400 text-lg font-medium">
|
||||
{t('notebooks.drawing_placeholder')}
|
||||
</p>
|
||||
<Button variant="outline" onClick={() => setDrawingMode(false)} className="min-h-[44px]">
|
||||
<ChevronLeft className="w-4 h-4 mr-1" />
|
||||
{t('notebooks.drawing_mode_exit')}
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
/* Drawing mode - render DrawingCanvas */
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 30 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: -30 }}
|
||||
transition={{ type: 'spring', stiffness: 200, damping: 25 }}
|
||||
className="flex-1 flex flex-col overflow-hidden animate-slide-in"
|
||||
>
|
||||
<DrawingCanvas
|
||||
backgroundType={currentPage.background === 'music' || currentPage.background === 'calligraphy' ? 'blank' : (currentPage.background as 'blank' | 'lined' | 'grid' | 'dotted') ?? (notebook.notebookType as 'blank' | 'lined' | 'grid' | 'dotted')}
|
||||
initialDrawingData={currentPage.drawingData ?? undefined}
|
||||
onSave={handleDrawingSave}
|
||||
onExit={() => setDrawingMode(false)}
|
||||
title={currentPage.title ?? `${t('notebooks.page')} ${currentPage.pageNumber}`}
|
||||
/>
|
||||
</motion.div>
|
||||
) : (
|
||||
/* Text editing area with WYSIWYG toolbar and page background */
|
||||
<div className="flex-1 flex flex-col overflow-hidden">
|
||||
@@ -1491,22 +1600,43 @@ function NotebookDetailView({
|
||||
|
||||
{/* Save bar */}
|
||||
<div className="flex items-center justify-between px-4 py-2 border-t border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900">
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">
|
||||
{t('notebooks.page')} {currentPage.pageNumber} / {pages.length}
|
||||
</div>
|
||||
<Button
|
||||
onClick={handleSavePage}
|
||||
disabled={saving}
|
||||
size="sm"
|
||||
className="min-h-[44px] bg-emerald-600 hover:bg-emerald-700"
|
||||
>
|
||||
{saving ? (
|
||||
<div className="w-4 h-4 animate-spin rounded-full border-2 border-white border-t-transparent mr-2" />
|
||||
) : (
|
||||
<Edit3 className="w-4 h-4 mr-1" />
|
||||
<div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
<span>{t('notebooks.page')} {currentPage.pageNumber} / {pages.length}</span>
|
||||
{/* Drawing indicator when not in drawing mode */}
|
||||
{currentPage.drawingData && !drawingMode && (
|
||||
<Badge variant="outline" className="text-xs gap-1 border-emerald-300 text-emerald-600 dark:border-emerald-700 dark:text-emerald-400">
|
||||
<ImageIcon className="w-3 h-3" />
|
||||
{t('notebooks.view_drawing')}
|
||||
</Badge>
|
||||
)}
|
||||
{t('notebooks.save_page')}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{/* View drawing button if page has drawing data */}
|
||||
{currentPage.drawingData && !drawingMode && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setDrawingMode(true)}
|
||||
className="min-h-[44px]"
|
||||
>
|
||||
<ImageIcon className="w-4 h-4 mr-1" />
|
||||
{t('notebooks.edit_drawing')}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
onClick={handleSavePage}
|
||||
disabled={saving}
|
||||
size="sm"
|
||||
className="min-h-[44px] bg-emerald-600 hover:bg-emerald-700"
|
||||
>
|
||||
{saving ? (
|
||||
<div className="w-4 h-4 animate-spin rounded-full border-2 border-white border-t-transparent mr-2" />
|
||||
) : (
|
||||
<Edit3 className="w-4 h-4 mr-1" />
|
||||
)}
|
||||
{t('notebooks.save_page')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
@@ -1524,6 +1654,20 @@ function NotebookDetailView({
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Version History Dialog */}
|
||||
<VersionHistoryDialog
|
||||
open={versionHistoryOpen}
|
||||
onClose={() => setVersionHistoryOpen(false)}
|
||||
versions={pageVersions}
|
||||
previewVersion={previewVersion}
|
||||
onPreviewVersion={setPreviewVersion}
|
||||
onRestoreVersion={handleRestoreVersion}
|
||||
restoringVersion={restoringVersion}
|
||||
restoreConfirmVersion={restoreConfirmVersion}
|
||||
onSetRestoreConfirm={setRestoreConfirmVersion}
|
||||
currentPageContent={currentPage?.textContent ?? null}
|
||||
/>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -2421,3 +2565,207 @@ export default function NotebooksView() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Version History Dialog ──────────────────────────────────────────
|
||||
|
||||
function VersionHistoryDialog({
|
||||
open,
|
||||
onClose,
|
||||
versions,
|
||||
previewVersion,
|
||||
onPreviewVersion,
|
||||
onRestoreVersion,
|
||||
restoringVersion,
|
||||
restoreConfirmVersion,
|
||||
onSetRestoreConfirm,
|
||||
currentPageContent,
|
||||
}: {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
versions: PageVersion[];
|
||||
previewVersion: PageVersion | null;
|
||||
onPreviewVersion: (version: PageVersion) => void;
|
||||
onRestoreVersion: (version: PageVersion) => void;
|
||||
restoringVersion: boolean;
|
||||
restoreConfirmVersion: PageVersion | null;
|
||||
onSetRestoreConfirm: (version: PageVersion | null) => void;
|
||||
currentPageContent: string | null;
|
||||
}) {
|
||||
const formatDate = (dateStr: string) => {
|
||||
const date = new Date(dateStr);
|
||||
return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
||||
};
|
||||
|
||||
const getPreviewText = (content: string | null) => {
|
||||
if (!content) return '';
|
||||
// Strip HTML tags to get plain text preview
|
||||
const plain = content.replace(/<[^>]*>/g, '').trim();
|
||||
return plain.substring(0, 120) + (plain.length > 120 ? '...' : '');
|
||||
};
|
||||
|
||||
const isLatestVersion = versions.length > 0 && previewVersion?.id === versions[0]?.id;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog open={open} onOpenChange={(v) => { if (!v) onClose(); }}>
|
||||
<DialogContent className="max-w-2xl max-h-[80vh]">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<History className="w-5 h-5 text-emerald-500" />
|
||||
{t('notebooks.version_history_title')}
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
{t('notebooks.version_history')}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex flex-col gap-4 overflow-y-auto max-h-[60vh]">
|
||||
{versions.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-8 gap-3">
|
||||
<Clock className="w-10 h-10 text-gray-300 dark:text-gray-600" />
|
||||
<p className="text-gray-500 dark:text-gray-400 text-sm">
|
||||
{t('notebooks.version_no_history')}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="version-timeline">
|
||||
{versions.map((version, idx) => {
|
||||
const isCurrent = idx === 0;
|
||||
const isPreviewed = previewVersion?.id === version.id;
|
||||
return (
|
||||
<div key={version.id} className="flex items-start gap-3 group">
|
||||
{/* Timeline dot */}
|
||||
<div className="flex flex-col items-center shrink-0 pt-1">
|
||||
<div className={`w-3 h-3 rounded-full border-2 transition-all ${
|
||||
isCurrent
|
||||
? 'bg-emerald-500 border-emerald-500 animate-pulse-dot'
|
||||
: isPreviewed
|
||||
? 'bg-emerald-400 border-emerald-400'
|
||||
: 'bg-gray-300 dark:bg-gray-600 border-gray-400 dark:border-gray-500'
|
||||
}`} />
|
||||
{idx < versions.length - 1 && (
|
||||
<div className="w-0.5 h-full min-h-[40px] bg-gray-200 dark:bg-gray-700 mt-1" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Version content */}
|
||||
<div
|
||||
className={`flex-1 rounded-lg p-3 transition-all cursor-pointer ${
|
||||
isPreviewed
|
||||
? 'bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-300 dark:border-emerald-700'
|
||||
: 'bg-gray-50 dark:bg-gray-800/50 border border-transparent hover:border-gray-200 dark:hover:border-gray-600'
|
||||
}`}
|
||||
onClick={() => onPreviewVersion(version)}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-sm text-gray-700 dark:text-gray-300">
|
||||
{t('notebooks.version_number')} {version.version}
|
||||
</span>
|
||||
{isCurrent && (
|
||||
<Badge className="text-xs bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 border-0">
|
||||
{t('notebooks.version_current')}
|
||||
</Badge>
|
||||
)}
|
||||
{version.editSummary && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{version.editSummary}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-xs text-gray-400 dark:text-gray-500">
|
||||
{formatDate(version.createdAt)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Content preview */}
|
||||
<div className="mt-1 text-xs text-gray-500 dark:text-gray-400 line-clamp-2">
|
||||
{getPreviewText(version.textContent)}
|
||||
</div>
|
||||
|
||||
{/* Drawing indicator */}
|
||||
{version.drawingData && (
|
||||
<div className="mt-1 flex items-center gap-1 text-xs text-emerald-600 dark:text-emerald-400">
|
||||
<ImageIcon className="w-3 h-3" />
|
||||
{t('notebooks.drawing_page_label')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Preview panel */}
|
||||
{previewVersion && (
|
||||
<div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 bg-white dark:bg-gray-900">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h4 className="font-medium text-sm flex items-center gap-2">
|
||||
{t('notebooks.version_preview')} - {t('notebooks.version_number')} {previewVersion.version}
|
||||
{versions[0]?.id === previewVersion.id && (
|
||||
<Badge className="text-xs bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 border-0">
|
||||
{t('notebooks.version_current')}
|
||||
</Badge>
|
||||
)}
|
||||
</h4>
|
||||
{!isLatestVersion && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => onSetRestoreConfirm(previewVersion)}
|
||||
disabled={restoringVersion}
|
||||
className="min-h-[36px]"
|
||||
>
|
||||
<History className="w-3.5 h-3.5 mr-1" />
|
||||
{t('notebooks.version_restore')}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<ScrollArea className="max-h-[200px]">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400 whitespace-pre-wrap">
|
||||
{previewVersion.textContent ? getPreviewText(previewVersion.textContent) : t('notebooks.export_empty_page')}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={onClose} className="min-h-[44px]">
|
||||
{t('action.close')}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Restore confirmation */}
|
||||
<AlertDialog open={!!restoreConfirmVersion} onOpenChange={(v) => { if (!v) onSetRestoreConfirm(null); }}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle className="flex items-center gap-2">
|
||||
<History className="w-5 h-5 text-emerald-500" />
|
||||
{t('notebooks.version_restore_confirm')}
|
||||
</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
{t('notebooks.version_restore_desc')}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel className="min-h-[44px]">{t('action.cancel')}</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={() => { if (restoreConfirmVersion) onRestoreVersion(restoreConfirmVersion); }}
|
||||
disabled={restoringVersion}
|
||||
className="min-h-[44px] bg-emerald-600 hover:bg-emerald-700"
|
||||
>
|
||||
{restoringVersion ? (
|
||||
<div className="w-4 h-4 animate-spin rounded-full border-2 border-white border-t-transparent mr-2" />
|
||||
) : null}
|
||||
{t('notebooks.version_restore')}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -5,7 +5,7 @@ import { motion, AnimatePresence } from 'framer-motion';
|
||||
import {
|
||||
FileText, Plus, Eye, Download, Check, PenLine, BookOpen, Printer,
|
||||
School, Clock, Sparkles, FileEdit, FileCheck, FileType,
|
||||
CheckCircle, BarChart3, ClipboardList,
|
||||
CheckCircle, BarChart3, ClipboardList, FileDown, Users,
|
||||
} from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
@@ -70,6 +70,12 @@ export default function ReportsView() {
|
||||
// Preview dialog
|
||||
const [previewOpen, setPreviewOpen] = useState(false);
|
||||
|
||||
// PDF generation
|
||||
const [pdfTemplate, setPdfTemplate] = useState<'short' | 'full' | 'custom'>('full');
|
||||
const [generatingPdf, setGeneratingPdf] = useState(false);
|
||||
const [downloadHistory, setDownloadHistory] = useState<Array<{ id: string; studentName: string; template: string; date: string }>>([]);
|
||||
const [batchGenerating, setBatchGenerating] = useState(false);
|
||||
|
||||
// Edit section
|
||||
const [editingSection, setEditingSection] = useState<{ id: string; text: string } | null>(null);
|
||||
|
||||
@@ -160,6 +166,50 @@ export default function ReportsView() {
|
||||
setEditingSection(null);
|
||||
};
|
||||
|
||||
const handleGeneratePdf = async (reportId: string) => {
|
||||
setGeneratingPdf(true);
|
||||
try {
|
||||
const url = `/api/reports/pdf?reportId=${reportId}&template=${pdfTemplate}`;
|
||||
window.open(url, '_blank');
|
||||
const student = selectedReport?.student;
|
||||
if (student) {
|
||||
setDownloadHistory((prev) => [{
|
||||
id: Date.now().toString(),
|
||||
studentName: `${student.firstName} ${student.lastName}`,
|
||||
template: pdfTemplate,
|
||||
date: new Date().toLocaleDateString(),
|
||||
}, ...prev]);
|
||||
}
|
||||
toast.success(t('reports.generate_pdf'));
|
||||
} catch {
|
||||
toast.error(t('error.generic'));
|
||||
} finally {
|
||||
setGeneratingPdf(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBatchGenerate = async () => {
|
||||
if (!selectedClass) return;
|
||||
setBatchGenerating(true);
|
||||
try {
|
||||
for (const student of students) {
|
||||
const url = `/api/reports/pdf?studentId=${student.id}&template=${pdfTemplate}`;
|
||||
window.open(url, '_blank');
|
||||
setDownloadHistory((prev) => [{
|
||||
id: Date.now().toString() + student.id,
|
||||
studentName: `${student.firstName} ${student.lastName}`,
|
||||
template: pdfTemplate,
|
||||
date: new Date().toLocaleDateString(),
|
||||
}, ...prev]);
|
||||
}
|
||||
toast.success(t('reports.batch_generate'));
|
||||
} catch {
|
||||
toast.error(t('error.generic'));
|
||||
} finally {
|
||||
setBatchGenerating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const draftReports = reports.filter((r) => r.status === 'DRAFT');
|
||||
const finalReports = reports.filter((r) => r.status === 'FINAL');
|
||||
|
||||
@@ -484,6 +534,10 @@ export default function ReportsView() {
|
||||
<Printer className="h-4 w-4 mr-1" />
|
||||
{t('pdf.print_view')}
|
||||
</Button>
|
||||
<Button variant="outline" className="rounded-xl border-emerald-300 dark:border-emerald-700" onClick={() => handleGeneratePdf(selectedReport.id)} disabled={generatingPdf}>
|
||||
<FileDown className="h-4 w-4 mr-1" />
|
||||
{generatingPdf ? t('empty.loading') : t('reports.generate_pdf')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
@@ -758,6 +812,61 @@ export default function ReportsView() {
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* PDF Template Selection + Batch Generate */}
|
||||
{selectedClass && students.length > 0 && (
|
||||
<Card className="border-0 shadow-sm rounded-xl border-l-3 border-l-teal-500 overflow-hidden">
|
||||
<CardHeader className="pb-3 pt-6 bg-gradient-to-r from-teal-50/50 to-transparent dark:from-teal-900/10 dark:to-transparent">
|
||||
<CardTitle className="text-base font-bold flex items-center gap-2">
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-lg bg-teal-100 dark:bg-teal-900/30 text-teal-600 dark:text-teal-400">
|
||||
<FileDown className="h-4 w-4" />
|
||||
</div>
|
||||
{t('reports.generate_pdf')}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<Label className="text-sm font-medium text-gray-700 dark:text-gray-300">{t('reports.template')}</Label>
|
||||
<div className="flex gap-2">
|
||||
{(['short', 'full', 'custom'] as const).map((tmpl) => (
|
||||
<Button
|
||||
key={tmpl}
|
||||
variant={pdfTemplate === tmpl ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
className={pdfTemplate === tmpl ? 'bg-emerald-500 hover:bg-emerald-600 text-white min-h-[44px] rounded-xl' : 'min-h-[44px] rounded-xl'}
|
||||
onClick={() => setPdfTemplate(tmpl)}
|
||||
>
|
||||
<span className="badge-type">{t(`reports.template_${tmpl}`)}</span>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
className="bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-600 hover:to-teal-600 text-white shadow-md rounded-xl min-h-[44px]"
|
||||
onClick={handleBatchGenerate}
|
||||
disabled={batchGenerating}
|
||||
>
|
||||
<Users className="h-4 w-4 mr-1.5" />
|
||||
{batchGenerating ? t('empty.loading') : t('reports.batch_generate')}
|
||||
</Button>
|
||||
</div>
|
||||
{downloadHistory.length > 0 && (
|
||||
<div className="space-y-2 mt-2">
|
||||
<p className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">{t('reports.download_history')}</p>
|
||||
<div className="max-h-32 overflow-y-auto scrollbar-education space-y-1">
|
||||
{downloadHistory.map((item) => (
|
||||
<div key={item.id} className="flex items-center justify-between text-xs p-2 rounded-lg bg-gray-50 dark:bg-gray-800/50">
|
||||
<span className="text-gray-700 dark:text-gray-300">{item.studentName}</span>
|
||||
<span className="text-gray-500 dark:text-gray-400">{item.template} · {item.date}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Edit section dialog */}
|
||||
<Dialog open={!!editingSection} onOpenChange={() => setEditingSection(null)}>
|
||||
<DialogContent className="rounded-xl">
|
||||
|
||||
@@ -34,6 +34,12 @@ import {
|
||||
CheckCircle,
|
||||
Leaf,
|
||||
DatabaseIcon,
|
||||
Upload,
|
||||
FileDown,
|
||||
FileUp,
|
||||
Loader2,
|
||||
ClipboardCheck,
|
||||
CalendarDays,
|
||||
} from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
@@ -69,8 +75,12 @@ import {
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { useAppStore } from '@/lib/store';
|
||||
import { t } from '@/lib/i18n';
|
||||
import { apiGet, apiPost, apiPut, apiDelete } from '@/lib/api';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import {
|
||||
fetchSchools,
|
||||
updateSchool,
|
||||
@@ -87,14 +97,15 @@ import {
|
||||
createUser,
|
||||
updateUser,
|
||||
deleteUser,
|
||||
createStudentUserAccount,
|
||||
bulkCreateStudentAccounts,
|
||||
fetchStudents,
|
||||
type School as SchoolType,
|
||||
type SchoolYear,
|
||||
type Subject,
|
||||
type AuditLogEntry,
|
||||
type UserAccount,
|
||||
} from '@/lib/api';
|
||||
import { toast } from 'sonner';
|
||||
import { apiGet, apiPut, apiDelete } from '@/lib/api';
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
@@ -168,10 +179,28 @@ export default function SettingsView() {
|
||||
lastName: '',
|
||||
email: '',
|
||||
password: '',
|
||||
role: 'TEACHER' as 'TEACHER' | 'SCHOOL_ADMIN' | 'SUPER_ADMIN',
|
||||
role: 'TEACHER' as 'TEACHER' | 'SCHOOL_ADMIN' | 'SUPER_ADMIN' | 'STUDENT' | 'PARENT',
|
||||
});
|
||||
const [deleteUserId, setDeleteUserId] = useState<string | null>(null);
|
||||
|
||||
// Student account creation state
|
||||
const [showStudentAccountDialog, setShowStudentAccountDialog] = useState(false);
|
||||
const [showBulkStudentDialog, setShowBulkStudentDialog] = useState(false);
|
||||
const [studentAccountForm, setStudentAccountForm] = useState({
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
email: '',
|
||||
password: 'Schule2025!',
|
||||
studentId: '',
|
||||
});
|
||||
const [bulkForm, setBulkForm] = useState({
|
||||
defaultPassword: 'Schule2025!',
|
||||
emailDomain: 'schule.de',
|
||||
selectedStudentIds: [] as string[],
|
||||
});
|
||||
const [availableStudents, setAvailableStudents] = useState<Array<{ id: string; firstName: string; lastName: string }>>([]);
|
||||
const [bulkCreating, setBulkCreating] = useState(false);
|
||||
|
||||
// Demo accounts state
|
||||
const [demoAccounts, setDemoAccounts] = useState<Array<{
|
||||
id: string;
|
||||
@@ -188,6 +217,22 @@ export default function SettingsView() {
|
||||
const [deleteDemoId, setDeleteDemoId] = useState<string | null>(null);
|
||||
const [deleteAllDemoOpen, setDeleteAllDemoOpen] = useState(false);
|
||||
|
||||
// Data import state
|
||||
const [importType, setImportType] = useState<'students' | 'assessments' | 'grades'>('students');
|
||||
const [importFile, setImportFile] = useState<File | null>(null);
|
||||
const [importing, setImporting] = useState(false);
|
||||
const [importResult, setImportResult] = useState<{
|
||||
created: number;
|
||||
skipped: number;
|
||||
errorCount: number;
|
||||
errors: string[];
|
||||
detectedColumns: string[];
|
||||
} | null>(null);
|
||||
const [dragOver, setDragOver] = useState(false);
|
||||
|
||||
// Export history
|
||||
const [exportHistory, setExportHistory] = useState<Array<{ type: string; date: string }>>([]);
|
||||
|
||||
const isAdmin = currentUser?.role === 'SCHOOL_ADMIN' || currentUser?.role === 'SUPER_ADMIN';
|
||||
|
||||
const loadSchools = useCallback(async () => {
|
||||
@@ -388,15 +433,51 @@ export default function SettingsView() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleCsvExport = (type: 'students' | 'progress' | 'assessments' | 'grades') => {
|
||||
const handleCsvExport = (type: 'students' | 'progress' | 'assessments' | 'grades' | 'attendance') => {
|
||||
downloadCsvExport({
|
||||
type,
|
||||
schoolId: currentUser?.schoolId ?? undefined,
|
||||
schoolYearId: useAppStore.getState().schoolYearId ?? undefined,
|
||||
});
|
||||
setExportHistory((prev) => [{ type, date: new Date().toLocaleDateString() }, ...prev].slice(0, 20));
|
||||
toast.success(t('settings.data_export_started'));
|
||||
};
|
||||
|
||||
const handleImport = async () => {
|
||||
if (!importFile || !currentUser?.schoolId) return;
|
||||
setImporting(true);
|
||||
setImportResult(null);
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('file', importFile);
|
||||
formData.append('type', importType);
|
||||
formData.append('schoolId', currentUser.schoolId);
|
||||
|
||||
const res = await fetch('/api/data-import', {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({ error: 'Import failed' }));
|
||||
throw new Error(err.error || 'Import failed');
|
||||
}
|
||||
|
||||
const result = await res.json();
|
||||
setImportResult(result);
|
||||
toast.success(t('import.success'));
|
||||
setImportFile(null);
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : t('import.errors'));
|
||||
} finally {
|
||||
setImporting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDownloadSample = (type: 'students' | 'assessments' | 'grades') => {
|
||||
window.open(`/api/data-import?type=${type}`, '_blank');
|
||||
};
|
||||
|
||||
const handleErasureRequest = async () => {
|
||||
try {
|
||||
await requestDataErasure({
|
||||
@@ -496,6 +577,72 @@ export default function SettingsView() {
|
||||
setShowUserDialog(true);
|
||||
};
|
||||
|
||||
const openCreateStudentAccountDialog = async () => {
|
||||
setStudentAccountForm({ firstName: '', lastName: '', email: '', password: 'Schule2025!', studentId: '' });
|
||||
try {
|
||||
const students = await fetchStudents(currentUser?.schoolId ?? undefined);
|
||||
setAvailableStudents(students.map((s) => ({ id: s.id, firstName: s.firstName, lastName: s.lastName })));
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
setShowStudentAccountDialog(true);
|
||||
};
|
||||
|
||||
const openBulkStudentDialog = async () => {
|
||||
setBulkForm({ defaultPassword: 'Schule2025!', emailDomain: 'schule.de', selectedStudentIds: [] });
|
||||
try {
|
||||
const students = await fetchStudents(currentUser?.schoolId ?? undefined);
|
||||
setAvailableStudents(students.map((s) => ({ id: s.id, firstName: s.firstName, lastName: s.lastName })));
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
setShowBulkStudentDialog(true);
|
||||
};
|
||||
|
||||
const handleCreateStudentAccount = async () => {
|
||||
try {
|
||||
await createStudentUserAccount({
|
||||
schoolId: currentUser?.schoolId ?? '',
|
||||
email: studentAccountForm.email,
|
||||
password: studentAccountForm.password,
|
||||
firstName: studentAccountForm.firstName,
|
||||
lastName: studentAccountForm.lastName,
|
||||
role: 'STUDENT',
|
||||
studentId: studentAccountForm.studentId || undefined,
|
||||
});
|
||||
toast.success(t('settings.student_account_created'));
|
||||
setShowStudentAccountDialog(false);
|
||||
loadUsers();
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : t('error.generic');
|
||||
toast.error(message);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBulkCreateStudents = async () => {
|
||||
if (bulkForm.selectedStudentIds.length === 0) {
|
||||
toast.error(t('error.generic'));
|
||||
return;
|
||||
}
|
||||
setBulkCreating(true);
|
||||
try {
|
||||
const result = await bulkCreateStudentAccounts({
|
||||
schoolId: currentUser?.schoolId ?? '',
|
||||
defaultPassword: bulkForm.defaultPassword,
|
||||
studentIds: bulkForm.selectedStudentIds,
|
||||
emailDomain: bulkForm.emailDomain,
|
||||
});
|
||||
toast.success(t('settings.bulk_accounts_created') + ` (${result.count})`);
|
||||
setShowBulkStudentDialog(false);
|
||||
loadUsers();
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : t('error.generic');
|
||||
toast.error(message);
|
||||
} finally {
|
||||
setBulkCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const openEditUserDialog = (u: UserAccount) => {
|
||||
setEditingUser(u);
|
||||
setUserForm({
|
||||
@@ -503,7 +650,7 @@ export default function SettingsView() {
|
||||
lastName: u.lastName,
|
||||
email: u.email,
|
||||
password: '',
|
||||
role: u.role as 'TEACHER' | 'SCHOOL_ADMIN' | 'SUPER_ADMIN',
|
||||
role: u.role as 'TEACHER' | 'SCHOOL_ADMIN' | 'SUPER_ADMIN' | 'STUDENT' | 'PARENT',
|
||||
});
|
||||
setShowUserDialog(true);
|
||||
};
|
||||
@@ -1032,17 +1179,35 @@ export default function SettingsView() {
|
||||
<CardDescription>{t('users.subtitle')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center justify-between flex-wrap gap-2">
|
||||
<Badge className="bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-300 text-xs font-medium">
|
||||
{t('users.count', { count: users.length })}
|
||||
</Badge>
|
||||
<Button
|
||||
onClick={openCreateUserDialog}
|
||||
className="bg-gradient-to-r from-rose-500 to-amber-500 hover:from-rose-600 hover:to-amber-600 text-white shadow-md rounded-xl px-6"
|
||||
>
|
||||
<UserPlus className="h-4 w-4 mr-2" />
|
||||
{t('users.create_user')}
|
||||
</Button>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
onClick={openCreateStudentAccountDialog}
|
||||
variant="outline"
|
||||
className="border-amber-300 dark:border-amber-700 text-amber-700 dark:text-amber-300 hover:bg-amber-50 dark:hover:bg-amber-900/20 rounded-xl px-4 min-h-[44px]"
|
||||
>
|
||||
<UserCheck className="h-4 w-4 mr-2" />
|
||||
{t('settings.create_student_account')}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={openBulkStudentDialog}
|
||||
variant="outline"
|
||||
className="border-teal-300 dark:border-teal-700 text-teal-700 dark:text-teal-300 hover:bg-teal-50 dark:hover:bg-teal-900/20 rounded-xl px-4 min-h-[44px]"
|
||||
>
|
||||
<Zap className="h-4 w-4 mr-2" />
|
||||
{t('settings.bulk_create_students')}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={openCreateUserDialog}
|
||||
className="bg-gradient-to-r from-rose-500 to-amber-500 hover:from-rose-600 hover:to-amber-600 text-white shadow-md rounded-xl px-6 min-h-[44px]"
|
||||
>
|
||||
<UserPlus className="h-4 w-4 mr-2" />
|
||||
{t('users.create_user')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{usersLoading ? (
|
||||
@@ -1181,7 +1346,7 @@ export default function SettingsView() {
|
||||
<Label>{t('users.role')}</Label>
|
||||
<Select
|
||||
value={userForm.role}
|
||||
onValueChange={(v) => setUserForm({ ...userForm, role: v as 'TEACHER' | 'SCHOOL_ADMIN' | 'SUPER_ADMIN' })}
|
||||
onValueChange={(v) => setUserForm({ ...userForm, role: v as 'TEACHER' | 'SCHOOL_ADMIN' | 'SUPER_ADMIN' | 'STUDENT' | 'PARENT' })}
|
||||
>
|
||||
<SelectTrigger className="rounded-xl border-rose-200/50 dark:border-rose-900/30">
|
||||
<SelectValue />
|
||||
@@ -1189,6 +1354,8 @@ export default function SettingsView() {
|
||||
<SelectContent>
|
||||
<SelectItem value="TEACHER">{t('role.teacher')}</SelectItem>
|
||||
<SelectItem value="SCHOOL_ADMIN">{t('role.school_admin')}</SelectItem>
|
||||
<SelectItem value="STUDENT">{t('role.student')}</SelectItem>
|
||||
<SelectItem value="PARENT">{t('role.parent')}</SelectItem>
|
||||
{currentUser?.role === 'SUPER_ADMIN' && (
|
||||
<SelectItem value="SUPER_ADMIN">{t('role.super_admin')}</SelectItem>
|
||||
)}
|
||||
@@ -1247,6 +1414,113 @@ export default function SettingsView() {
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
{/* Create Student Account Dialog */}
|
||||
<Dialog open={showStudentAccountDialog} onOpenChange={(open) => { if (!open) setShowStudentAccountDialog(false); }}>
|
||||
<DialogContent className="sm:max-w-md" aria-describedby={undefined}>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<UserCheck className="h-4 w-4 text-amber-500" />
|
||||
{t('settings.create_student_account')}
|
||||
</DialogTitle>
|
||||
<DialogDescription>{t('auth.student_login_desc')}</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>{t('label.first_name')}</Label>
|
||||
<Input value={studentAccountForm.firstName} onChange={(e) => setStudentAccountForm({ ...studentAccountForm, firstName: e.target.value })} className="rounded-xl" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('label.last_name')}</Label>
|
||||
<Input value={studentAccountForm.lastName} onChange={(e) => setStudentAccountForm({ ...studentAccountForm, lastName: e.target.value })} className="rounded-xl" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label className="flex items-center gap-1"><Mail className="h-3 w-3" />{t('users.email')}</Label>
|
||||
<Input type="email" value={studentAccountForm.email} onChange={(e) => setStudentAccountForm({ ...studentAccountForm, email: e.target.value })} className="rounded-xl" placeholder="name@schule.de" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label className="flex items-center gap-1"><Key className="h-3 w-3" />{t('settings.default_password')}</Label>
|
||||
<Input type="text" value={studentAccountForm.password} onChange={(e) => setStudentAccountForm({ ...studentAccountForm, password: e.target.value })} className="rounded-xl" />
|
||||
</div>
|
||||
{availableStudents.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<Label>{t('settings.link_student')}</Label>
|
||||
<Select value={studentAccountForm.studentId} onValueChange={(v) => setStudentAccountForm({ ...studentAccountForm, studentId: v })}>
|
||||
<SelectTrigger className="rounded-xl"><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="">--</SelectItem>
|
||||
{availableStudents.map((s) => (
|
||||
<SelectItem key={s.id} value={s.id}>{s.firstName} {s.lastName}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setShowStudentAccountDialog(false)} className="rounded-xl">{t('action.cancel')}</Button>
|
||||
<Button onClick={handleCreateStudentAccount} disabled={!studentAccountForm.firstName || !studentAccountForm.lastName || !studentAccountForm.email || studentAccountForm.password.length < 6} className="bg-gradient-to-r from-amber-500 to-orange-500 text-white rounded-xl">{t('action.create')}</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Bulk Create Student Accounts Dialog */}
|
||||
<Dialog open={showBulkStudentDialog} onOpenChange={(open) => { if (!open) setShowBulkStudentDialog(false); }}>
|
||||
<DialogContent className="sm:max-w-lg" aria-describedby={undefined}>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<Zap className="h-4 w-4 text-teal-500" />
|
||||
{t('settings.bulk_create_students')}
|
||||
</DialogTitle>
|
||||
<DialogDescription>{t('auth.bulk_create')}</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label className="flex items-center gap-1"><Key className="h-3 w-3" />{t('settings.default_password')}</Label>
|
||||
<Input type="text" value={bulkForm.defaultPassword} onChange={(e) => setBulkForm({ ...bulkForm, defaultPassword: e.target.value })} className="rounded-xl" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label className="flex items-center gap-1"><Mail className="h-3 w-3" />{t('settings.generate_email')}</Label>
|
||||
<Input type="text" value={bulkForm.emailDomain} onChange={(e) => setBulkForm({ ...bulkForm, emailDomain: e.target.value })} className="rounded-xl" placeholder="schule.de" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{t('settings.link_student')} ({bulkForm.selectedStudentIds.length} {t('label.selected')})</Label>
|
||||
<div className="max-h-48 overflow-y-auto scrollbar-education rounded-xl border border-gray-200/30 dark:border-gray-800/20">
|
||||
{availableStudents.map((s) => (
|
||||
<label key={s.id} className="flex items-center gap-2 px-3 py-2 hover:bg-teal-50/50 dark:hover:bg-teal-900/10 cursor-pointer min-h-[44px]">
|
||||
<Checkbox
|
||||
checked={bulkForm.selectedStudentIds.includes(s.id)}
|
||||
onCheckedChange={(checked) => {
|
||||
if (checked) {
|
||||
setBulkForm({ ...bulkForm, selectedStudentIds: [...bulkForm.selectedStudentIds, s.id] });
|
||||
} else {
|
||||
setBulkForm({ ...bulkForm, selectedStudentIds: bulkForm.selectedStudentIds.filter((id) => id !== s.id) });
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<span className="text-sm font-medium">{s.firstName} {s.lastName}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setShowBulkStudentDialog(false)} className="rounded-xl">{t('action.cancel')}</Button>
|
||||
<Button onClick={handleBulkCreateStudents} disabled={bulkForm.selectedStudentIds.length === 0 || bulkCreating} className="bg-gradient-to-r from-teal-500 to-emerald-500 text-white rounded-xl">
|
||||
{bulkCreating ? (
|
||||
<span className="flex items-center gap-2">
|
||||
<span className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" />
|
||||
{t('empty.loading')}
|
||||
</span>
|
||||
) : (
|
||||
<span>{t('action.create')} ({bulkForm.selectedStudentIds.length})</span>
|
||||
)}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
@@ -1442,6 +1716,137 @@ export default function SettingsView() {
|
||||
{/* ── Data Management Tab ─────────────────────────────── */}
|
||||
<TabsContent value="data">
|
||||
<div className="space-y-6">
|
||||
{/* Data Import */}
|
||||
<Card className="border-0 shadow-sm rounded-xl border-l-3 border-l-amber-500 overflow-hidden">
|
||||
<CardHeader className="bg-gradient-to-r from-amber-50/50 to-transparent dark:from-amber-900/10 dark:to-transparent">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-lg bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400">
|
||||
<Upload className="h-4 w-4" />
|
||||
</div>
|
||||
{t('import.title')}
|
||||
</CardTitle>
|
||||
<CardDescription>{t('import.csv_upload')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* Import type selector */}
|
||||
<div className="space-y-2">
|
||||
<Label className="text-sm font-medium text-gray-700 dark:text-gray-300">{t('calendar.event_type')}</Label>
|
||||
<div className="flex gap-2">
|
||||
{(['students', 'assessments', 'grades'] as const).map((impType) => {
|
||||
const icons = { students: GraduationCap, assessments: ClipboardCheck, grades: BarChart3 };
|
||||
const Icon = icons[impType];
|
||||
return (
|
||||
<Button
|
||||
key={impType}
|
||||
variant={importType === impType ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
className={importType === impType ? 'bg-emerald-500 hover:bg-emerald-600 text-white min-h-[44px] rounded-xl' : 'min-h-[44px] rounded-xl'}
|
||||
onClick={() => { setImportType(impType); setImportResult(null); }}
|
||||
>
|
||||
<Icon className="h-4 w-4 mr-1.5" />
|
||||
{impType === 'students' ? t('label.student') : impType === 'assessments' ? t('nav.assessments') : t('nav.grading')}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Drag and drop zone */}
|
||||
<div
|
||||
className={`file-drop-zone ${dragOver ? 'drag-over' : ''}`}
|
||||
onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
|
||||
onDragLeave={() => setDragOver(false)}
|
||||
onDrop={(e) => {
|
||||
e.preventDefault();
|
||||
setDragOver(false);
|
||||
const file = e.dataTransfer.files[0];
|
||||
if (file && file.name.endsWith('.csv')) {
|
||||
setImportFile(file);
|
||||
setImportResult(null);
|
||||
} else {
|
||||
toast.error('Please upload a CSV file');
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Upload className="h-8 w-8 text-amber-400 dark:text-amber-500 mb-2" />
|
||||
<p className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{importFile ? importFile.name : t('import.csv_upload')}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||
Drag & drop or click to select
|
||||
</p>
|
||||
<input
|
||||
type="file"
|
||||
accept=".csv"
|
||||
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
|
||||
onChange={(e) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) {
|
||||
setImportFile(file);
|
||||
setImportResult(null);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Import button */}
|
||||
<div className="flex items-center gap-3">
|
||||
<Button
|
||||
onClick={handleImport}
|
||||
disabled={!importFile || importing}
|
||||
className="bg-gradient-to-r from-amber-500 to-emerald-500 hover:from-amber-600 hover:to-emerald-600 text-white shadow-md rounded-xl min-h-[44px]"
|
||||
>
|
||||
{importing ? <Loader2 className="h-4 w-4 mr-1.5 animate-spin" /> : <FileUp className="h-4 w-4 mr-1.5" />}
|
||||
{importing ? t('import.progress') : t('action.upload')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleDownloadSample(importType)}
|
||||
className="rounded-xl min-h-[44px]"
|
||||
>
|
||||
<Download className="h-4 w-4 mr-1.5" />
|
||||
{t('import.sample_csv')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Import result */}
|
||||
{importResult && (
|
||||
<div className="import-progress p-4 rounded-xl bg-gradient-to-r from-emerald-50/60 to-teal-50/30 dark:from-emerald-900/15 dark:to-teal-900/10 border border-emerald-200/30 dark:border-emerald-900/20">
|
||||
<p className="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">{t('import.summary')}</p>
|
||||
<div className="grid grid-cols-3 gap-3 mb-3">
|
||||
<div className="text-center">
|
||||
<p className="text-xl font-bold text-emerald-600 dark:text-emerald-400">{importResult.created}</p>
|
||||
<p className="text-[10px] text-gray-500 dark:text-gray-400">{t('import.success')}</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="text-xl font-bold text-amber-600 dark:text-amber-400">{importResult.skipped}</p>
|
||||
<p className="text-[10px] text-gray-500 dark:text-gray-400">Skipped</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="text-xl font-bold text-red-600 dark:text-red-400">{importResult.errorCount}</p>
|
||||
<p className="text-[10px] text-gray-500 dark:text-gray-400">{t('import.errors')}</p>
|
||||
</div>
|
||||
</div>
|
||||
{importResult.detectedColumns.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{importResult.detectedColumns.map((col) => (
|
||||
<Badge key={col} variant="outline" className="text-[10px] bg-gray-50 dark:bg-gray-800/50">{col}</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{importResult.errors.length > 0 && (
|
||||
<div className="mt-2 max-h-24 overflow-y-auto scrollbar-education">
|
||||
{importResult.errors.slice(0, 5).map((err, i) => (
|
||||
<p key={i} className="text-xs text-red-600 dark:text-red-400">{err}</p>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* CSV Export */}
|
||||
<Card className="border-0 shadow-sm rounded-xl border-l-3 border-l-emerald-500 overflow-hidden">
|
||||
<CardHeader className="bg-gradient-to-r from-emerald-50/50 to-transparent dark:from-emerald-900/10 dark:to-transparent">
|
||||
@@ -1454,12 +1859,13 @@ export default function SettingsView() {
|
||||
<CardDescription>{t('csv.export_title')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
|
||||
{[
|
||||
{ type: 'students' as const, iconComponent: GraduationCap, label: t('settings.data_export_students'), color: 'from-emerald-50/60 to-emerald-100/0 dark:from-emerald-900/15 dark:to-emerald-900/0', border: 'border-emerald-200/40 dark:border-emerald-900/30', iconBg: 'bg-gradient-to-br from-emerald-400 to-emerald-500' },
|
||||
{ type: 'progress' as const, iconComponent: TrendingUp, label: t('settings.data_export_progress'), color: 'from-amber-50/60 to-amber-100/0 dark:from-amber-900/15 dark:to-amber-900/0', border: 'border-amber-200/40 dark:border-amber-900/30', iconBg: 'bg-gradient-to-br from-amber-400 to-amber-500' },
|
||||
{ type: 'assessments' as const, iconComponent: CheckCircle, label: t('settings.data_export_assessments'), color: 'from-teal-50/60 to-teal-100/0 dark:from-teal-900/15 dark:to-teal-900/0', border: 'border-teal-200/40 dark:border-teal-900/30', iconBg: 'bg-gradient-to-br from-teal-400 to-teal-500' },
|
||||
{ type: 'grades' as const, iconComponent: BarChart3, label: t('settings.data_export_grades'), color: 'from-violet-50/60 to-violet-100/0 dark:from-violet-900/15 dark:to-violet-900/0', border: 'border-violet-200/40 dark:border-violet-900/30', iconBg: 'bg-gradient-to-br from-violet-400 to-violet-500' },
|
||||
{ type: 'students' as const, iconComponent: GraduationCap, label: t('export.students'), color: 'from-emerald-50/60 to-emerald-100/0 dark:from-emerald-900/15 dark:to-emerald-900/0', border: 'border-emerald-200/40 dark:border-emerald-900/30', iconBg: 'bg-gradient-to-br from-emerald-400 to-emerald-500' },
|
||||
{ type: 'progress' as const, iconComponent: TrendingUp, label: t('export.progress'), color: 'from-amber-50/60 to-amber-100/0 dark:from-amber-900/15 dark:to-amber-900/0', border: 'border-amber-200/40 dark:border-amber-900/30', iconBg: 'bg-gradient-to-br from-amber-400 to-amber-500' },
|
||||
{ type: 'assessments' as const, iconComponent: ClipboardCheck, label: t('export.assessments'), color: 'from-teal-50/60 to-teal-100/0 dark:from-teal-900/15 dark:to-teal-900/0', border: 'border-teal-200/40 dark:border-teal-900/30', iconBg: 'bg-gradient-to-br from-teal-400 to-teal-500' },
|
||||
{ type: 'grades' as const, iconComponent: BarChart3, label: t('export.grades'), color: 'from-violet-50/60 to-violet-100/0 dark:from-violet-900/15 dark:to-violet-900/0', border: 'border-violet-200/40 dark:border-violet-900/30', iconBg: 'bg-gradient-to-br from-violet-400 to-violet-500' },
|
||||
{ type: 'attendance' as const, iconComponent: CalendarDays, label: t('export.attendance'), color: 'from-rose-50/60 to-rose-100/0 dark:from-rose-900/15 dark:to-rose-900/0', border: 'border-rose-200/40 dark:border-rose-900/30', iconBg: 'bg-gradient-to-br from-rose-400 to-rose-500' },
|
||||
].map((item) => (
|
||||
<motion.div
|
||||
key={item.type}
|
||||
@@ -1468,7 +1874,7 @@ export default function SettingsView() {
|
||||
className={`p-5 rounded-xl bg-gradient-to-br ${item.color} border ${item.border} hover:shadow-lg transition-all cursor-pointer`}
|
||||
onClick={() => handleCsvExport(item.type)}
|
||||
>
|
||||
<div className="flex items-center justify-center w-10 h-10 rounded-xl bg-gradient-to-br ${item.iconBg} text-white shadow-sm mb-3">
|
||||
<div className={`flex items-center justify-center w-10 h-10 rounded-xl ${item.iconBg} text-white shadow-sm mb-3`}>
|
||||
<item.iconComponent className="w-5 h-5" />
|
||||
</div>
|
||||
<p className="font-semibold text-gray-900 dark:text-gray-100 text-sm">{item.label}</p>
|
||||
@@ -1476,6 +1882,21 @@ export default function SettingsView() {
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Export history */}
|
||||
{exportHistory.length > 0 && (
|
||||
<div className="mt-4 space-y-2">
|
||||
<p className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">{t('settings.export_history')}</p>
|
||||
<div className="max-h-24 overflow-y-auto scrollbar-education space-y-1">
|
||||
{exportHistory.map((item, idx) => (
|
||||
<div key={idx} className="flex items-center justify-between text-xs p-2 rounded-lg bg-gray-50 dark:bg-gray-800/50">
|
||||
<span className="text-gray-700 dark:text-gray-300 capitalize">{item.type}</span>
|
||||
<span className="text-gray-500 dark:text-gray-400">{item.date}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@ import {
|
||||
Calculator, Flower2, BookOpen, GraduationCap, TrendingUp, Award,
|
||||
Printer, ChevronRight, Sparkles, MessageSquare, Grid3X3, Trophy, Flag, Zap,
|
||||
Rocket, Target, PenLine, Pencil, Home, ClipboardList, Star, BarChart3,
|
||||
LucideIcon, Download, FileSpreadsheet, FileDown,
|
||||
LucideIcon, Download, FileSpreadsheet, FileDown, Heart, Users as UsersIcon,
|
||||
} from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
@@ -32,9 +32,9 @@ import {
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from '@/components/ui/tooltip';
|
||||
import { useAppStore } from '@/lib/store';
|
||||
import { useAppStore, type CurrentUser } from '@/lib/store';
|
||||
import { t } from '@/lib/i18n';
|
||||
import { fetchStudentDetail, getReportPdfUrl, type StudentDetailData } from '@/lib/api';
|
||||
import { fetchStudentDetail, getReportPdfUrl, type StudentDetailData, fetchParentLinks, type ParentStudentLinkData } from '@/lib/api';
|
||||
import { toast } from 'sonner';
|
||||
import TeacherNotesSection from './teacher-notes-section';
|
||||
|
||||
@@ -338,12 +338,24 @@ export default function StudentDetailView() {
|
||||
const currentStudentId = useAppStore((s) => s.currentStudentId);
|
||||
const navigateBack = useAppStore((s) => s.navigateBack);
|
||||
const setCurrentView = useAppStore((s) => s.setCurrentView);
|
||||
const currentUser = useAppStore((s) => s.currentUser);
|
||||
|
||||
const isStudentSelf = currentUser?.role === 'STUDENT';
|
||||
const isParent = currentUser?.role === 'PARENT';
|
||||
const [parentLinks, setParentLinks] = useState<ParentStudentLinkData[]>([]);
|
||||
|
||||
const [data, setData] = useState<StudentDetailData | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [selectedFlowerSubjectId, setSelectedFlowerSubjectId] = useState<string>('');
|
||||
const [timeRange, setTimeRange] = useState<JourneyTimeRange>('all');
|
||||
|
||||
// Load parent links for parent users
|
||||
useEffect(() => {
|
||||
if (isParent && currentUser?.id) {
|
||||
fetchParentLinks(currentUser.id).then(setParentLinks).catch(() => {});
|
||||
}
|
||||
}, [isParent, currentUser?.id]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!currentStudentId) {
|
||||
setLoading(false);
|
||||
@@ -1142,6 +1154,85 @@ export default function StudentDetailView() {
|
||||
|
||||
{/* Teacher notes — replaced with the dedicated TeacherNotesSection */}
|
||||
<TeacherNotesSection studentId={student.id} />
|
||||
|
||||
{/* My Progress section (for student self-view) */}
|
||||
{isStudentSelf && (
|
||||
<Card className="border-0 shadow-sm rounded-xl border-l-3 border-l-amber-500 overflow-hidden">
|
||||
<CardHeader className="pb-3 pt-6 bg-gradient-to-r from-amber-50/50 to-transparent dark:from-amber-900/10 dark:to-transparent">
|
||||
<CardTitle className="text-lg font-bold flex items-center gap-2">
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-lg bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400">
|
||||
<TrendingUp className="h-4 w-4" />
|
||||
</div>
|
||||
{t('student.my_competencies')}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-4 pt-2">
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mb-4">{t('student.progress_overview')}</p>
|
||||
{/* Mastery Level Visualization */}
|
||||
<div className="space-y-3">
|
||||
{stats.averageMastery > 0 && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs font-medium text-gray-700 dark:text-gray-300">{t('student_detail.avg_mastery')}</span>
|
||||
<span className="text-xs font-bold text-emerald-600 dark:text-emerald-400">{stats.averageMastery.toFixed(1)} / 4.0</span>
|
||||
</div>
|
||||
<div className="h-3 rounded-full bg-gray-100 dark:bg-gray-800 overflow-hidden">
|
||||
<div
|
||||
className="h-full rounded-full bg-gradient-to-r from-emerald-400 to-teal-500 transition-all duration-1000"
|
||||
style={{ width: `${Math.min(100, (stats.averageMastery / 4) * 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{stats.totalProgressEntries > 0 && (
|
||||
<div className="flex items-center justify-between px-3 py-2 rounded-lg bg-amber-50/50 dark:bg-amber-900/10 border border-amber-100/50 dark:border-amber-900/20">
|
||||
<span className="text-xs text-gray-600 dark:text-gray-400">{t('student_detail.total_entries')}</span>
|
||||
<span className="text-sm font-bold text-amber-600 dark:text-amber-400">{stats.totalProgressEntries}</span>
|
||||
</div>
|
||||
)}
|
||||
{stats.latestGrade && (
|
||||
<div className="flex items-center justify-between px-3 py-2 rounded-lg bg-teal-50/50 dark:bg-teal-900/10 border border-teal-100/50 dark:border-teal-900/20">
|
||||
<span className="text-xs text-gray-600 dark:text-gray-400">{t('student_detail.latest_grade')}</span>
|
||||
<span className="text-sm font-bold text-teal-600 dark:text-teal-400">{stats.latestGrade.value.toFixed(1)}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Parent Info section (for parent users) */}
|
||||
{isParent && parentLinks.length > 0 && (
|
||||
<Card className="border-0 shadow-sm rounded-xl border-l-3 border-l-violet-500 overflow-hidden">
|
||||
<CardHeader className="pb-3 pt-6 bg-gradient-to-r from-violet-50/50 to-transparent dark:from-violet-900/10 dark:to-transparent">
|
||||
<CardTitle className="text-lg font-bold flex items-center gap-2">
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-lg bg-violet-100 dark:bg-violet-900/30 text-violet-600 dark:text-violet-400">
|
||||
<Heart className="h-4 w-4" />
|
||||
</div>
|
||||
{t('parent.my_children')}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-4 pt-2">
|
||||
<div className="space-y-2">
|
||||
{parentLinks.map((link) => (
|
||||
<div key={link.id} className="flex items-center justify-between px-3 py-2 rounded-lg bg-violet-50/50 dark:bg-violet-900/10 border border-violet-100/50 dark:border-violet-900/20">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center justify-center w-6 h-6 rounded-full bg-violet-200 dark:bg-violet-800 text-violet-700 dark:text-violet-300 text-[10px] font-bold">
|
||||
{link.student.firstName[0]}{link.student.lastName[0]}
|
||||
</div>
|
||||
<span className="text-xs font-medium text-gray-700 dark:text-gray-300">{link.student.firstName} {link.student.lastName}</span>
|
||||
</div>
|
||||
{link.relationship && (
|
||||
<Badge variant="outline" className="text-[10px] px-1.5 py-0 bg-violet-50/50 dark:bg-violet-900/10 border-violet-200/50 dark:border-violet-900/30 text-violet-700 dark:text-violet-300 shrink-0">
|
||||
{t(`parent.${link.relationship}`)}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user