Update src/app/teacher-dashboard/page.tsx

src/app/teacher-dashboard/page.tsx

@@ -1,148 +1,50 @@
 "use client";
 
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import { useState } from "react";
-import {
-  Home,
-  Calendar,
-  Users,
-  MessageSquare,
-  DollarSign,
-  BarChart3,
-  Settings,
-  LogOut,
-  Menu,
-  X,
-  Star,
-  Clock,
-  AlertCircle,
-  CheckCircle,
-} from "lucide-react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from "recharts";
 
-export default function TeacherDashboard() {
-  const [activeMenu, setActiveMenu] = useState("home");
-  const [sidebarOpen, setSidebarOpen] = useState(true);
+const TeacherDashboard = () => {
+  const [comments, setComments] = useState<Array<{ id: string; name: string; text: string; date: string }>>([]);
+  const [newComment, setNewComment] = useState("");
+  const [newCommentName, setNewCommentName] = useState("");
 
-  const menuItems = [
-    { id: "home", label: "Home", icon: Home },
-    { id: "calendar", label: "Calendar", icon: Calendar },
-    { id: "students", label: "My Students", icon: Users },
-    { id: "messages", label: "Messages", icon: MessageSquare },
-    { id: "earnings", label: "Earnings", icon: DollarSign },
-    { id: "statistics", label: "Statistics", icon: BarChart3 },
-    { id: "settings", label: "Settings", icon: Settings },
+  // 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 monthlyStats = {
-    earnings: "$4,280",    lessons: 24,
-    rating: 4.9,
-    newStudents: 5,
+  // 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 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,
-      studentName: "John Doe",      subject: "Mathematics",      time: "09:00 AM",      duration: "1 hour",      status: "upcoming"},
-    {
-      id: 2,
-      studentName: "Sarah Smith",      subject: "Physics",      time: "10:30 AM",      duration: "1 hour",      status: "upcoming"},
-    {
-      id: 3,
-      studentName: "Mike Johnson",      subject: "English",      time: "02:00 PM",      duration: "45 minutes",      status: "upcoming"},
-  ];
-
-  const pendingRequests = [
-    {
-      id: 1,
-      studentName: "Emma Wilson",      subject: "Chemistry",      message: "Requesting trial lesson",      requestDate: "2 hours ago"},
-    {
-      id: 2,
-      studentName: "Alex Brown",      subject: "Biology",      message: "Requesting regular classes",      requestDate: "5 hours ago"},
-    {
-      id: 3,
-      studentName: "Jordan Lee",      subject: "Mathematics",      message: "Requesting intensive tutoring",      requestDate: "1 day ago"},
-  ];
-
-  const MenuItem = ({ item }: any) => {
-    const Icon = item.icon;
-    const isActive = activeMenu === item.id;
-    return (
-      <button
-        onClick={() => setActiveMenu(item.id)}
-        className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 ${
-          isActive
-            ? "bg-primary-cta text-white"
-            : "text-foreground hover:bg-card"
-        }`}
-      >
-        <Icon size={20} />
-        {sidebarOpen && <span>{item.label}</span>}
-      </button>
-    );
-  };
-
-  const StatCard = ({ label, value, icon: Icon }: any) => (
-    <div className="bg-card rounded-lg p-6 border border-background-accent">
-      <div className="flex items-center justify-between">
-        <div>
-          <p className="text-foreground/60 text-sm">{label}</p>
-          <p className="text-3xl font-bold text-foreground mt-2">{value}</p>
-        </div>
-        <Icon size={32} className="text-primary-cta opacity-50" />
-      </div>
-    </div>
-  );
-
-  const LessonCard = ({ lesson }: any) => (
-    <div className="bg-card rounded-lg p-4 border border-background-accent hover:shadow-lg transition-shadow">
-      <div className="flex items-start justify-between">
-        <div className="flex-1">
-          <div className="flex items-center gap-2 mb-2">
-            <h3 className="font-semibold text-foreground">{lesson.studentName}</h3>
-            <span className="text-xs bg-primary-cta/10 text-primary-cta px-2 py-1 rounded">
-              {lesson.subject}
-            </span>
-          </div>
-          <div className="flex items-center gap-4 text-sm text-foreground/60">
-            <div className="flex items-center gap-1">
-              <Clock size={16} />
-              {lesson.time}
-            </div>
-            <span>{lesson.duration}</span>
-          </div>
-        </div>
-        <button className="px-4 py-2 bg-primary-cta text-white rounded-lg hover:bg-primary-cta/90 transition-colors text-sm">
-          Join
-        </button>
-      </div>
-    </div>
-  );
-
-  const RequestCard = ({ request }: any) => (
-    <div className="bg-card rounded-lg p-4 border border-background-accent">
-      <div className="flex items-start justify-between">
-        <div className="flex-1">
-          <div className="flex items-center gap-2 mb-2">
-            <h3 className="font-semibold text-foreground">{request.studentName}</h3>
-            <span className="text-xs bg-secondary-cta/10 text-secondary-cta px-2 py-1 rounded">
-              {request.subject}
-            </span>
-          </div>
-          <p className="text-sm text-foreground/70 mb-2">{request.message}</p>
-          <p className="text-xs text-foreground/50">{request.requestDate}</p>
-        </div>
-        <div className="flex gap-2">
-          <button className="p-2 bg-green-500/10 text-green-600 rounded-lg hover:bg-green-500/20 transition-colors">
-            <CheckCircle size={18} />
-          </button>
-          <button className="p-2 bg-red-500/10 text-red-600 rounded-lg hover:bg-red-500/20 transition-colors">
-            <X size={18} />
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-
   return (
     <ThemeProvider
       defaultButtonVariant="text-shift"
@@ -150,128 +52,127 @@ export default function TeacherDashboard() {
       borderRadius="rounded"
       contentWidth="compact"
       sizing="mediumSizeLargeTitles"
-      background="none"
+      background="circleGradient"
       cardStyle="layered-gradient"
       primaryButtonStyle="shadow"
       secondaryButtonStyle="layered"
       headingFontWeight="light"
     >
-      <div className="flex h-screen bg-background">
-        {/* Sidebar */}
-        <div
-          className={`${sidebarOpen ? "w-64" : "w-20"} bg-card border-r border-background-accent transition-all duration-300 flex flex-col`}
-        >
+      <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="p-4 flex items-center justify-between border-b border-background-accent">
-            {sidebarOpen && (
-              <h2 className="text-xl font-bold text-foreground">Dashboard</h2>
-            )}
-            <button
-              onClick={() => setSidebarOpen(!sidebarOpen)}
-              className="p-2 hover:bg-background rounded-lg transition-colors"
-            >
-              {sidebarOpen ? <X size={20} /> : <Menu size={20} />}
-            </button>
+          <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>
 
-          {/* Menu Items */}
-          <nav className="flex-1 p-4 space-y-2 overflow-y-auto">
-            {menuItems.map((item) => (
-              <MenuItem key={item.id} item={item} />
-            ))}
-          </nav>
+          {/* 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>
 
-          {/* Logout */}
-          <div className="p-4 border-t border-background-accent">
-            <button className="w-full flex items-center gap-3 px-4 py-3 text-red-600 hover:bg-red-500/10 rounded-lg transition-colors">
-              <LogOut size={20} />
-              {sidebarOpen && <span>Logout</span>}
-            </button>
+            {/* 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>
-        </div>
 
-        {/* Main Content */}
-        <div className="flex-1 overflow-y-auto">
-          <div className="p-8 max-w-7xl mx-auto">
-            {/* Welcome Header */}
-            <div className="mb-8">
-              <h1 className="text-4xl font-bold text-foreground mb-2">
-                Welcome back, Teacher!
-              </h1>
-              <p className="text-foreground/60">
-                Here's your teaching dashboard for today
-              </p>
+          {/* 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}
+                />
+                <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"
+                >
+                  Yorum Ekle
+                </button>
+              </div>
             </div>
 
-            {/* Monthly Stats */}
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-              <StatCard
-                label="Monthly Earnings"
-                value={monthlyStats.earnings}
-                icon={DollarSign}
-              />
-              <StatCard
-                label="Lessons This Month"
-                value={monthlyStats.lessons}
-                icon={Calendar}
-              />
-              <StatCard
-                label="Your Rating"
-                value={`${monthlyStats.rating} ⭐`}
-                icon={Star}
-              />
-              <StatCard
-                label="New Students"
-                value={monthlyStats.newStudents}
-                icon={Users}
-              />
-            </div>
-
-            {/* Content Grid */}
-            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-              {/* Today's Lessons */}
-              <div className="lg:col-span-2">
-                <div className="mb-6">
-                  <h2 className="text-2xl font-bold text-foreground mb-4">
-                    Today's Lessons
-                  </h2>
-                  <div className="space-y-4">
-                    {todayLessons.map((lesson) => (
-                      <LessonCard key={lesson.id} lesson={lesson} />
-                    ))}
+            {/* 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>
-                </div>
-              </div>
-
-              {/* Pending Requests */}
-              <div>
-                <div className="mb-6">
-                  <div className="flex items-center gap-2 mb-4">
-                    <h2 className="text-2xl font-bold text-foreground">
-                      Pending Requests
-                    </h2>
-                    <span className="text-xs bg-accent/10 text-accent px-2 py-1 rounded-full">
-                      {pendingRequests.length}
-                    </span>
-                  </div>
-                  <div className="space-y-4">
-                    {pendingRequests.length > 0 ? (
-                      pendingRequests.map((request) => (
-                        <RequestCard key={request.id} request={request} />
-                      ))
-                    ) : (
-                      <div className="bg-card rounded-lg p-6 border border-background-accent text-center">
-                        <AlertCircle size={32} className="mx-auto text-foreground/40 mb-2" />
-                        <p className="text-foreground/60">No pending requests</p>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </div>
+                ))
+              )}
             </div>
           </div>
         </div>
       </div>
     </ThemeProvider>
   );
-}
+};
+
+export default TeacherDashboard;