Update src/app/teacher-dashboard/page.tsx
This commit is contained in:
@@ -2,48 +2,85 @@
|
||||
|
||||
import { useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import { LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from "recharts";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
|
||||
import {
|
||||
Home,
|
||||
Calendar,
|
||||
Users,
|
||||
MessageSquare,
|
||||
DollarSign,
|
||||
BarChart3,
|
||||
Settings,
|
||||
TrendingUp,
|
||||
Award,
|
||||
Star,
|
||||
Clock,
|
||||
CheckCircle,
|
||||
Clock3,
|
||||
Send,
|
||||
} from "lucide-react";
|
||||
|
||||
const TeacherDashboard = () => {
|
||||
const [comments, setComments] = useState<Array<{ id: string; name: string; text: string; date: string }>>([]);
|
||||
const [newComment, setNewComment] = useState("");
|
||||
const [newCommentName, setNewCommentName] = useState("");
|
||||
export default function TeacherDashboard() {
|
||||
const [activeMenu, setActiveMenu] = useState("home");
|
||||
|
||||
// Monthly earning data
|
||||
const earningData = [
|
||||
{ month: "Ocak", earning: 2400 },
|
||||
{ month: "Şubat", earning: 3200 },
|
||||
{ month: "Mart", earning: 2800 },
|
||||
{ month: "Nisan", earning: 3900 },
|
||||
{ month: "Mayıs", earning: 4200 },
|
||||
{ month: "Haziran", earning: 3800 },
|
||||
const navItems = [
|
||||
{ name: "Ana Sayfa", id: "/" },
|
||||
{ name: "Öğretmen Paneli", id: "/teacher-dashboard" },
|
||||
];
|
||||
|
||||
// Student count data
|
||||
const studentData = [
|
||||
{ month: "Ocak", students: 15 },
|
||||
{ month: "Şubat", students: 22 },
|
||||
{ month: "Mart", students: 28 },
|
||||
{ month: "Nisan", students: 35 },
|
||||
{ month: "Mayıs", students: 42 },
|
||||
{ month: "Haziran", students: 45 },
|
||||
const menuItems = [
|
||||
{ id: "home", label: "Ana Sayfa", icon: Home },
|
||||
{ id: "calendar", label: "Takvim", icon: Calendar },
|
||||
{ id: "students", label: "Öğrencilerim", icon: Users },
|
||||
{ id: "messages", label: "Mesajlar", icon: MessageSquare },
|
||||
{ id: "earnings", label: "Kazançlar", icon: DollarSign },
|
||||
{ id: "statistics", label: "İstatistikler", icon: BarChart3 },
|
||||
{ id: "settings", label: "Ayarlar", icon: Settings },
|
||||
];
|
||||
|
||||
const handleAddComment = () => {
|
||||
if (newComment.trim() && newCommentName.trim()) {
|
||||
setComments([
|
||||
...comments,
|
||||
{
|
||||
id: Date.now().toString(),
|
||||
name: newCommentName,
|
||||
text: newComment,
|
||||
date: new Date().toLocaleDateString("tr-TR"),
|
||||
},
|
||||
]);
|
||||
setNewComment("");
|
||||
setNewCommentName("");
|
||||
}
|
||||
};
|
||||
const todayLessons = [
|
||||
{
|
||||
id: "1", title: "Matematik - Cebir Temelleri", student: "Ahmet Demir", time: "09:00 - 10:00", status: "scheduled"},
|
||||
{
|
||||
id: "2", title: "İngilizce - Konuşma Pratiği", student: "Zeynep Kaya", time: "11:00 - 12:00", status: "scheduled"},
|
||||
{
|
||||
id: "3", title: "Fizik - Hareket Kanunları", student: "Mehmet Yılmaz", time: "14:00 - 15:00", status: "in-progress"},
|
||||
];
|
||||
|
||||
const pendingRequests = [
|
||||
{
|
||||
id: "1", student: "Ali Şahin", subject: "Kimya", date: "5 Şubat 2025", time: "15:00"},
|
||||
{
|
||||
id: "2", student: "Emine Çetin", subject: "Tarih", date: "6 Şubat 2025", time: "16:30"},
|
||||
];
|
||||
|
||||
const newMessages = [
|
||||
{
|
||||
id: "1", from: "Ahmet Demir", message: "Ders için teşekkürler, çok faydalı oldu!", time: "5 dakika önce"},
|
||||
{
|
||||
id: "2", from: "Zeynep Kaya", message: "Sonraki ders için kaynak önerebilir misiniz?", time: "2 saat önce"},
|
||||
{
|
||||
id: "3", from: "Mehmet Yılmaz", message: "Pazartesi dersini erteleyebilir miyim?", time: "4 saat önce"},
|
||||
];
|
||||
|
||||
const monthlyEarnings = [
|
||||
{ month: "Ocak", amount: 2400 },
|
||||
{ month: "Şubat", amount: 2800 },
|
||||
{ month: "Mart", amount: 2200 },
|
||||
{ month: "Nisan", amount: 3000 },
|
||||
{ month: "Mayıs", amount: 2600 },
|
||||
{ month: "Haziran", amount: 3200 },
|
||||
];
|
||||
|
||||
const studentCount = [
|
||||
{ month: "Ocak", count: 12 },
|
||||
{ month: "Şubat", count: 15 },
|
||||
{ month: "Mart", count: 18 },
|
||||
{ month: "Nisan", count: 16 },
|
||||
{ month: "Mayıs", count: 20 },
|
||||
{ month: "Haziran", count: 22 },
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
@@ -58,121 +95,273 @@ const TeacherDashboard = () => {
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<div className="min-h-screen p-8 bg-gradient-to-br from-slate-50 to-slate-100">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="mb-12">
|
||||
<h1 className="text-4xl font-bold text-slate-900 mb-2">Öğretmen Kontrol Paneli</h1>
|
||||
<p className="text-lg text-slate-600">Aylık kazanç, öğrenci sayısı ve yorumları takip edin</p>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="Öğretmen Platformu"
|
||||
bottomLeftText="Öğretmen Paneli"
|
||||
bottomRightText="info@platform.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Charts Grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
|
||||
{/* Monthly Earning Chart */}
|
||||
<div className="bg-white rounded-xl shadow-lg p-8 border border-slate-200">
|
||||
<h2 className="text-2xl font-semibold text-slate-900 mb-6">Aylık Kazançlar</h2>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<LineChart data={earningData}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
|
||||
<XAxis dataKey="month" stroke="#64748b" />
|
||||
<YAxis stroke="#64748b" />
|
||||
<Tooltip
|
||||
contentStyle={{ backgroundColor: "#1e293b", border: "1px solid #475569", borderRadius: "8px", color: "#fff" }}
|
||||
formatter={(value) => `₺${value}`}
|
||||
/>
|
||||
<Legend />
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="earning"
|
||||
stroke="#3b82f6"
|
||||
strokeWidth={3}
|
||||
dot={{ fill: "#3b82f6", r: 6 }}
|
||||
activeDot={{ r: 8 }}
|
||||
name="Kazanç (₺)"
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
{/* Student Count Chart */}
|
||||
<div className="bg-white rounded-xl shadow-lg p-8 border border-slate-200">
|
||||
<h2 className="text-2xl font-semibold text-slate-900 mb-6">Öğrenci Sayısı Artışı</h2>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<BarChart data={studentData}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
|
||||
<XAxis dataKey="month" stroke="#64748b" />
|
||||
<YAxis stroke="#64748b" />
|
||||
<Tooltip
|
||||
contentStyle={{ backgroundColor: "#1e293b", border: "1px solid #475569", borderRadius: "8px", color: "#fff" }}
|
||||
formatter={(value) => `${value} öğrenci`}
|
||||
/>
|
||||
<Legend />
|
||||
<Bar
|
||||
dataKey="students"
|
||||
fill="#10b981"
|
||||
radius={[8, 8, 0, 0]}
|
||||
name="Öğrenci Sayısı"
|
||||
/>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Comments Section */}
|
||||
<div className="bg-white rounded-xl shadow-lg p-8 border border-slate-200">
|
||||
<h2 className="text-2xl font-semibold text-slate-900 mb-6">Öğrenci Yorumları</h2>
|
||||
|
||||
{/* Add Comment Form */}
|
||||
<div className="mb-8 p-6 bg-slate-50 rounded-lg border border-slate-200">
|
||||
<h3 className="text-lg font-semibold text-slate-900 mb-4">Yeni Yorum Ekle</h3>
|
||||
<div className="space-y-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Adınız"
|
||||
value={newCommentName}
|
||||
onChange={(e) => setNewCommentName(e.target.value)}
|
||||
className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-slate-900 placeholder-slate-500"
|
||||
/>
|
||||
<textarea
|
||||
placeholder="Yorumunuz"
|
||||
value={newComment}
|
||||
onChange={(e) => setNewComment(e.target.value)}
|
||||
className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-slate-900 placeholder-slate-500 resize-none"
|
||||
rows={4}
|
||||
/>
|
||||
<div className="flex min-h-screen bg-background pt-24">
|
||||
{/* Left Sidebar Menu */}
|
||||
<aside className="w-64 bg-card border-r border-accent p-6 fixed left-0 top-20 bottom-0 overflow-y-auto">
|
||||
<nav className="space-y-2">
|
||||
{menuItems.map((item) => {
|
||||
const IconComponent = item.icon;
|
||||
return (
|
||||
<button
|
||||
onClick={handleAddComment}
|
||||
className="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200"
|
||||
key={item.id}
|
||||
onClick={() => setActiveMenu(item.id)}
|
||||
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${
|
||||
activeMenu === item.id
|
||||
? "bg-primary-cta text-background"
|
||||
: "text-foreground hover:bg-background-accent"
|
||||
}`}
|
||||
>
|
||||
Yorum Ekle
|
||||
<IconComponent size={20} />
|
||||
<span className="font-medium">{item.label}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="ml-64 flex-1 p-8">
|
||||
{activeMenu === "home" && (
|
||||
<div className="space-y-8">
|
||||
{/* Welcome Card */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div className="md:col-span-4 bg-card border border-accent rounded-lg p-6 shadow-lg">
|
||||
<h2 className="text-3xl font-bold text-foreground mb-2">
|
||||
Hoşgeldiniz, Ayşe!
|
||||
</h2>
|
||||
<p className="text-foreground/70 mb-6">
|
||||
Ocak ayında başarılı bir ay geçiriyorsunuz.
|
||||
</p>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div className="bg-background rounded-lg p-4">
|
||||
<div className="text-sm text-foreground/70 mb-1">
|
||||
Aylık Kazanç
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-primary-cta">
|
||||
₺2,400
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-background rounded-lg p-4">
|
||||
<div className="text-sm text-foreground/70 mb-1">
|
||||
Ders Sayısı
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-accent">24</div>
|
||||
</div>
|
||||
<div className="bg-background rounded-lg p-4">
|
||||
<div className="text-sm text-foreground/70 mb-1">
|
||||
Puan
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-secondary-cta">
|
||||
4.8/5
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-background rounded-lg p-4">
|
||||
<div className="text-sm text-foreground/70 mb-1">
|
||||
Yeni Öğrenci
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-accent">3</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Today's Lessons */}
|
||||
<div className="bg-card border border-accent rounded-lg p-6 shadow-lg">
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<Clock size={24} className="text-primary-cta" />
|
||||
<h3 className="text-2xl font-bold text-foreground">
|
||||
Bugünün Dersleri
|
||||
</h3>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{todayLessons.map((lesson) => (
|
||||
<div
|
||||
key={lesson.id}
|
||||
className="flex items-start gap-4 p-4 bg-background rounded-lg border border-background-accent"
|
||||
>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-semibold text-foreground">
|
||||
{lesson.title}
|
||||
</h4>
|
||||
<p className="text-sm text-foreground/70">
|
||||
Öğrenci: {lesson.student}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-sm font-medium text-foreground">
|
||||
{lesson.time}
|
||||
</p>
|
||||
<span
|
||||
className={`inline-block text-xs px-2 py-1 rounded-full mt-1 ${
|
||||
lesson.status === "in-progress"
|
||||
? "bg-primary-cta/20 text-primary-cta"
|
||||
: "bg-accent/20 text-accent"
|
||||
}`}
|
||||
>
|
||||
{lesson.status === "in-progress"
|
||||
? "Devam Ediyor"
|
||||
: "Planlandı"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pending Requests and New Messages */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Pending Requests */}
|
||||
<div className="bg-card border border-accent rounded-lg p-6 shadow-lg">
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<CheckCircle size={24} className="text-accent" />
|
||||
<h3 className="text-xl font-bold text-foreground">
|
||||
Bekleyen İstekler
|
||||
</h3>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{pendingRequests.map((request) => (
|
||||
<div
|
||||
key={request.id}
|
||||
className="p-4 bg-background rounded-lg border border-background-accent"
|
||||
>
|
||||
<p className="font-semibold text-foreground">
|
||||
{request.student}
|
||||
</p>
|
||||
<p className="text-sm text-foreground/70">
|
||||
{request.subject} • {request.date} {request.time}
|
||||
</p>
|
||||
<div className="flex gap-2 mt-3">
|
||||
<button className="flex-1 text-xs bg-primary-cta text-background px-3 py-1 rounded hover:opacity-90 transition-opacity">
|
||||
Onayla
|
||||
</button>
|
||||
<button className="flex-1 text-xs bg-background-accent text-foreground px-3 py-1 rounded hover:opacity-80 transition-opacity">
|
||||
İptal Et
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* New Messages */}
|
||||
<div className="bg-card border border-accent rounded-lg p-6 shadow-lg">
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<Send size={24} className="text-secondary-cta" />
|
||||
<h3 className="text-xl font-bold text-foreground">
|
||||
Yeni Mesajlar
|
||||
</h3>
|
||||
</div>
|
||||
<div className="space-y-3 max-h-64 overflow-y-auto">
|
||||
{newMessages.map((msg) => (
|
||||
<div
|
||||
key={msg.id}
|
||||
className="p-4 bg-background rounded-lg border border-background-accent hover:border-accent/50 transition-colors cursor-pointer"
|
||||
>
|
||||
<p className="font-semibold text-foreground">{msg.from}</p>
|
||||
<p className="text-sm text-foreground/70 mt-1">{msg.message}</p>
|
||||
<p className="text-xs text-foreground/50 mt-2">{msg.time}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Charts Section */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Monthly Earnings Chart */}
|
||||
<div className="bg-card border border-accent rounded-lg p-6 shadow-lg">
|
||||
<h3 className="text-xl font-bold text-foreground mb-6">
|
||||
Aylık Kazançlar
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
{monthlyEarnings.map((item, idx) => (
|
||||
<div key={idx} className="flex items-center gap-3">
|
||||
<span className="w-16 text-sm font-medium text-foreground/70">
|
||||
{item.month}
|
||||
</span>
|
||||
<div className="flex-1 bg-background rounded-full h-8 relative">
|
||||
<div
|
||||
className="bg-gradient-to-r from-primary-cta to-accent h-full rounded-full flex items-center justify-end px-3"
|
||||
style={{
|
||||
width: `${(item.amount / 3200) * 100}%`,
|
||||
}}
|
||||
>
|
||||
{item.amount > 2000 && (
|
||||
<span className="text-xs font-bold text-background">
|
||||
₺{item.amount}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{item.amount <= 2000 && (
|
||||
<span className="absolute inset-y-0 right-2 flex items-center text-xs font-bold text-foreground">
|
||||
₺{item.amount}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Student Count Chart */}
|
||||
<div className="bg-card border border-accent rounded-lg p-6 shadow-lg">
|
||||
<h3 className="text-xl font-bold text-foreground mb-6">
|
||||
Öğrenci Sayısı Gelişimi
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
{studentCount.map((item, idx) => (
|
||||
<div key={idx} className="flex items-center gap-3">
|
||||
<span className="w-16 text-sm font-medium text-foreground/70">
|
||||
{item.month}
|
||||
</span>
|
||||
<div className="flex-1 bg-background rounded-full h-8 relative">
|
||||
<div
|
||||
className="bg-gradient-to-r from-accent to-secondary-cta h-full rounded-full flex items-center justify-end px-3"
|
||||
style={{
|
||||
width: `${(item.count / 22) * 100}%`,
|
||||
}}
|
||||
>
|
||||
{item.count > 10 && (
|
||||
<span className="text-xs font-bold text-background">
|
||||
{item.count}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{item.count <= 10 && (
|
||||
<span className="absolute inset-y-0 right-2 flex items-center text-xs font-bold text-foreground">
|
||||
{item.count}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Comments List */}
|
||||
<div className="space-y-4">
|
||||
{comments.length === 0 ? (
|
||||
<p className="text-center text-slate-500 py-8">Henüz yorum yok. Öğrencilerden aldığınız ilk yorumu ekleyin.</p>
|
||||
) : (
|
||||
comments.map((comment) => (
|
||||
<div
|
||||
key={comment.id}
|
||||
className="p-4 border border-slate-200 rounded-lg bg-slate-50 hover:bg-slate-100 transition-colors duration-200"
|
||||
>
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<h4 className="font-semibold text-slate-900">{comment.name}</h4>
|
||||
<span className="text-sm text-slate-500">{comment.date}</span>
|
||||
</div>
|
||||
<p className="text-slate-700">{comment.text}</p>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
{activeMenu !== "home" && (
|
||||
<div className="text-center py-20">
|
||||
<h2 className="text-3xl font-bold text-foreground mb-4">
|
||||
{menuItems.find((m) => m.id === activeMenu)?.label}
|
||||
</h2>
|
||||
<p className="text-foreground/70 text-lg">
|
||||
Bu bölüm yakında hazırlanacaktır.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default TeacherDashboard;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user