From e4544ad1e7cf5032d705768a8309553a9b883c26 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sedat=20=C3=96ZT=C3=9CRK?=
 <76204082+iamsedatozturk@users.noreply.github.com>
Date: Tue, 26 Aug 2025 11:39:09 +0300
Subject: [PATCH] Classroom backend ve ui

---
 .../Seeds/SeederData.json                     |   91 +
 ui/dev-dist/sw.js                             |    2 +-
 ui/package-lock.json                          |  182 +-
 ui/package.json                               |    1 +
 ui/src/components/classroom/ClassList.tsx     |  941 ++++++++
 ui/src/components/classroom/Dashboard.tsx     |   38 +
 .../classroom/KickParticipantModal.tsx        |   81 +
 .../classroom/Panels/AttendancePanel.tsx      |  118 +
 .../components/classroom/Panels/ChatPanel.tsx |  249 ++
 .../classroom/Panels/ClassLayoutPanel.tsx     |  116 +
 .../classroom/Panels/DocumentPanel.tsx        |  244 ++
 .../classroom/Panels/HandRaisePanel.tsx       |  113 +
 .../classroom/Panels/ScreenSharePanel.tsx     |   76 +
 .../components/classroom/ParticipantGrid.tsx  |  297 +++
 ui/src/components/classroom/RoleSelector.tsx  |   65 +
 ui/src/components/classroom/Room.tsx          | 1998 +++++++++++++++++
 ui/src/components/classroom/VideoPlayer.tsx   |   72 +
 ui/src/proxy/classroom/data.ts                |   47 +
 ui/src/proxy/classroom/models.ts              |  135 ++
 ui/src/routes/route.constant.ts               |    5 +
 ui/src/services/classroom/signalr.ts          |  394 ++++
 ui/src/services/classroom/webrtc.ts           |  150 ++
 ui/src/store/auth.model.ts                    |    3 +
 ui/src/utils/hooks/useClassroomLogic.ts       |   68 +
 ui/src/views/classroom/ClassListPage.tsx      |   15 +
 ui/src/views/classroom/DashboardPage.tsx      |    8 +
 ui/src/views/classroom/RoomPage.tsx           |   23 +
 27 files changed, 5530 insertions(+), 2 deletions(-)
 create mode 100644 ui/src/components/classroom/ClassList.tsx
 create mode 100644 ui/src/components/classroom/Dashboard.tsx
 create mode 100644 ui/src/components/classroom/KickParticipantModal.tsx
 create mode 100644 ui/src/components/classroom/Panels/AttendancePanel.tsx
 create mode 100644 ui/src/components/classroom/Panels/ChatPanel.tsx
 create mode 100644 ui/src/components/classroom/Panels/ClassLayoutPanel.tsx
 create mode 100644 ui/src/components/classroom/Panels/DocumentPanel.tsx
 create mode 100644 ui/src/components/classroom/Panels/HandRaisePanel.tsx
 create mode 100644 ui/src/components/classroom/Panels/ScreenSharePanel.tsx
 create mode 100644 ui/src/components/classroom/ParticipantGrid.tsx
 create mode 100644 ui/src/components/classroom/RoleSelector.tsx
 create mode 100644 ui/src/components/classroom/Room.tsx
 create mode 100644 ui/src/components/classroom/VideoPlayer.tsx
 create mode 100644 ui/src/proxy/classroom/data.ts
 create mode 100644 ui/src/proxy/classroom/models.ts
 create mode 100644 ui/src/services/classroom/signalr.ts
 create mode 100644 ui/src/services/classroom/webrtc.ts
 create mode 100644 ui/src/utils/hooks/useClassroomLogic.ts
 create mode 100644 ui/src/views/classroom/ClassListPage.tsx
 create mode 100644 ui/src/views/classroom/DashboardPage.tsx
 create mode 100644 ui/src/views/classroom/RoomPage.tsx

diff --git a/api/src/Kurs.Platform.DbMigrator/Seeds/SeederData.json b/api/src/Kurs.Platform.DbMigrator/Seeds/SeederData.json
index e1afa0a9..32ce0d2b 100644
--- a/api/src/Kurs.Platform.DbMigrator/Seeds/SeederData.json
+++ b/api/src/Kurs.Platform.DbMigrator/Seeds/SeederData.json
@@ -99,6 +99,10 @@
         {
             "Name": "App.Contact",
             "DisplayName": "App.Contact"
+        },
+        {
+            "Name": "App.Classroom",
+            "DisplayName": "App.Classroom"
         }
     ],
     "PermissionDefinitionRecords": [
@@ -2799,6 +2803,38 @@
             "DisplayName": "Import",
             "IsEnabled": true,
             "MultiTenancySide": 2
+        },
+        {
+            "GroupName": "App.Classroom",
+            "Name": "App.Classroom",
+            "ParentName": null,
+            "DisplayName": "App.Classroom",
+            "IsEnabled": true,
+            "MultiTenancySide": 2
+        },
+        {
+            "GroupName": "App.Classroom",
+            "Name": "App.Classroom.Dashboard",
+            "ParentName": "App.Classroom",
+            "DisplayName": "App.Classroom.Dashboard",
+            "IsEnabled": true,
+            "MultiTenancySide": 2
+        },
+        {
+            "GroupName": "App.Classroom",
+            "Name": "App.Classroom.List",
+            "ParentName": "App.Classroom",
+            "DisplayName": "App.Classroom.List",
+            "IsEnabled": true,
+            "MultiTenancySide": 2
+        },
+        {
+            "GroupName": "App.Classroom",
+            "Name": "App.Classroom.RoomDetail",
+            "ParentName": "App.Classroom",
+            "DisplayName": "App.Classroom.RoomDetail",
+            "IsEnabled": true,
+            "MultiTenancySide": 2
         }
     ],
     "Menus": [
@@ -3501,6 +3537,16 @@
             "Icon": "FaSynagogue",
             "RequiredPermissionName": "App.Definitions.UomCategory",
             "IsDisabled": false
+        },
+        {
+            "ParentCode": "App.Administration",
+            "Code": "App.Classroom",
+            "DisplayName": "App.Classroom",
+            "Order": 5,
+            "Url": "/admin/classroom/dashboard",
+            "Icon": "FcNeutralDecision",
+            "RequiredPermissionName": "App.Classroom.Dashboard",
+            "IsDisabled": false
         }
     ],
     "Routes": [
@@ -3874,6 +3920,27 @@
             "componentPath": "@/views/report/ReportViewerPage",
             "routeType": "protected",
             "authority": ["App.Reports.Categories"]
+        },
+        {
+            "key": "admin.classroom.dashboard",
+            "path": "/admin/classroom/dashboard",
+            "componentPath": "@/views/classroom/DashboardPage",
+            "routeType": "protected",
+            "authority": ["App.Classroom.Dashboard"]
+        },
+        {
+            "key": "admin.classroom.classes",
+            "path": "/admin/classroom/classes",
+            "componentPath": "@/views/classroom/ClassListPage",
+            "routeType": "protected",
+            "authority": ["App.Classroom.List"]
+        },
+        {
+            "key": "admin.classroom.classroom",
+            "path": "/admin/classroom/room/:id",
+            "componentPath": "@/views/classroom/RoomPage",
+            "routeType": "protected",
+            "authority": ["App.Classroom.RoomDetail"]
         }
     ],
     "Languages": [
@@ -14095,6 +14162,30 @@
             "key": "App.Contact",
             "tr": "İletişim",
             "en": "Contact"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "App.Classroom",
+            "tr": "Sınıf",
+            "en": "Classroom"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "App.Classroom.Dashboard",
+            "tr": "Gösterge Paneli",
+            "en": "Dashboard"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "App.Classroom.List",
+            "tr": "Sınıflar",
+            "en": "Classes"
+        },
+        {
+            "resourceName": "Platform",
+            "key": "App.Classroom.RoomDetail",
+            "tr": "Virtul Classroom",
+            "en": "Sanal Sınıf"
         }
     ],
     "Settings": [
diff --git a/ui/dev-dist/sw.js b/ui/dev-dist/sw.js
index d283fbca..5c49a2d0 100644
--- a/ui/dev-dist/sw.js
+++ b/ui/dev-dist/sw.js
@@ -82,7 +82,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.c7pq42r4d5g"
+    "revision": "0.9qu602jrc3g"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
diff --git a/ui/package-lock.json b/ui/package-lock.json
index 8af9af75..07271747 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -22,6 +22,7 @@
         "@fullcalendar/react": "^6.1.8",
         "@fullcalendar/timegrid": "^6.1.8",
         "@marsidev/react-turnstile": "^0.2.1",
+        "@microsoft/signalr": "^9.0.6",
         "@monaco-editor/react": "^4.6.0",
         "@tanstack/react-query": "^4.29.19",
         "@tanstack/react-table": "^8.8.5",
@@ -2714,6 +2715,19 @@
         "react-dom": ">=16.8.0"
       }
     },
+    "node_modules/@microsoft/signalr": {
+      "version": "9.0.6",
+      "resolved": "https://registry.npmjs.org/@microsoft/signalr/-/signalr-9.0.6.tgz",
+      "integrity": "sha512-DrhgzFWI9JE4RPTsHYRxh4yr+OhnwKz8bnJe7eIi7mLLjqhJpEb62CiUy/YbFvLqLzcGzlzz1QWgVAW0zyipMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "abort-controller": "^3.0.0",
+        "eventsource": "^2.0.2",
+        "fetch-cookie": "^2.0.3",
+        "node-fetch": "^2.6.7",
+        "ws": "^7.5.10"
+      }
+    },
     "node_modules/@monaco-editor/loader": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.5.0.tgz",
@@ -3985,6 +3999,18 @@
         "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
       }
     },
+    "node_modules/abort-controller": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
+      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+      "license": "MIT",
+      "dependencies": {
+        "event-target-shim": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=6.5"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
@@ -6687,11 +6713,29 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/event-target-shim": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
+      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/eventemitter3": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
       "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
     },
+    "node_modules/eventsource": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz",
+      "integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/exceljs": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/exceljs/-/exceljs-4.4.0.tgz",
@@ -6804,6 +6848,16 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fetch-cookie": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/fetch-cookie/-/fetch-cookie-2.2.0.tgz",
+      "integrity": "sha512-h9AgfjURuCgA2+2ISl8GbavpUdR+WGAM2McW/ovn4tVccegp8ZqCKWSBR8uRdM8dDNlx5WdKRWxBYUwteLDCNQ==",
+      "license": "Unlicense",
+      "dependencies": {
+        "set-cookie-parser": "^2.4.8",
+        "tough-cookie": "^4.0.0"
+      }
+    },
     "node_modules/fflate": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
@@ -8770,6 +8824,48 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
+    "node_modules/node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/node-fetch/node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+      "license": "MIT"
+    },
+    "node_modules/node-fetch/node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/node-fetch/node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.19",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
@@ -9871,15 +9967,32 @@
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
     },
+    "node_modules/psl": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz",
+      "integrity": "sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==",
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/lupomontero"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
       "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
     },
+    "node_modules/querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
+      "license": "MIT"
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -10460,6 +10573,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+      "license": "MIT"
+    },
     "node_modules/resolve": {
       "version": "1.22.10",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
@@ -10709,6 +10828,12 @@
         "randombytes": "^2.1.0"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+      "license": "MIT"
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -11687,6 +11812,30 @@
       "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
       "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg=="
     },
+    "node_modules/tough-cookie": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
+      "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "psl": "^1.1.33",
+        "punycode": "^2.1.1",
+        "universalify": "^0.2.0",
+        "url-parse": "^1.5.3"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tough-cookie/node_modules/universalify": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
+      "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
     "node_modules/tr46": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
@@ -12144,6 +12293,16 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/url-parse": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+      "license": "MIT",
+      "dependencies": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
     "node_modules/use-isomorphic-layout-effect": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.2.1.tgz",
@@ -12921,6 +13080,27 @@
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
+    "node_modules/ws": {
+      "version": "7.5.10",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+      "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.3.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/xmlchars": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
diff --git a/ui/package.json b/ui/package.json
index dbd891fb..2255408f 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -15,6 +15,7 @@
     "format": "npm run prettier:fix && npm run lint:fix"
   },
   "dependencies": {
+    "@microsoft/signalr": "^9.0.6",
     "@babel/generator": "^7.28.3",
     "@babel/parser": "^7.28.0",
     "@babel/standalone": "^7.28.0",
diff --git a/ui/src/components/classroom/ClassList.tsx b/ui/src/components/classroom/ClassList.tsx
new file mode 100644
index 00000000..e1529466
--- /dev/null
+++ b/ui/src/components/classroom/ClassList.tsx
@@ -0,0 +1,941 @@
+import React, { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { motion } from 'framer-motion'
+import {
+  FaPlus,
+  FaCalendarAlt,
+  FaClock,
+  FaUsers,
+  FaPlay,
+  FaEdit,
+  FaTrash,
+  FaEye,
+} from 'react-icons/fa'
+import { ClassroomDto } from '@/proxy/classroom/models'
+import { initialScheduledClasses } from '@/proxy/classroom/data'
+import { useStoreState } from '@/store/store'
+import { ROUTES_ENUM } from '@/routes/route.constant'
+
+interface DashboardProps {
+  onCreateClass: (classData: Partial<ClassroomDto>) => void
+  onJoinClass: (classSession: ClassroomDto) => void
+  onEditClass: (classId: string, classData: Partial<ClassroomDto>) => void
+  onDeleteClass: (classId: string) => void
+}
+
+export const ClassList: React.FC<DashboardProps> = ({
+  onCreateClass,
+  onJoinClass,
+  onEditClass,
+  onDeleteClass,
+}) => {
+  const navigate = useNavigate()
+  const { user } = useStoreState((state) => state.auth)
+
+  const [showCreateModal, setShowCreateModal] = useState(false)
+  const [showEditModal, setShowEditModal] = useState(false)
+  const [editingClass, setEditingClass] = useState<ClassroomDto | null>(null)
+  const [showDeleteModal, setShowDeleteModal] = useState(false)
+  const [deletingClass, setDeletingClass] = useState<ClassroomDto | null>(null)
+  const [scheduledClasses, setScheduledClasses] = useState<ClassroomDto[]>(initialScheduledClasses)
+
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+    subject: '',
+    scheduledStartTime: '',
+    duration: 60,
+    maxParticipants: 30,
+    settings: {
+      allowHandRaise: true,
+      defaultMicrophoneState: 'muted' as 'muted' | 'unmuted',
+      defaultCameraState: 'on' as 'on' | 'off',
+      defaultLayout: 'grid',
+      allowStudentScreenShare: false,
+      allowStudentChat: true,
+      allowPrivateMessages: true,
+      autoMuteNewParticipants: true,
+      recordSession: false,
+      waitingRoomEnabled: false,
+    },
+  })
+
+  const canJoinClass = (scheduledTime: string) => {
+    const scheduled = new Date(scheduledTime)
+    const now = new Date()
+    const tenMinutesBefore = new Date(scheduled.getTime() - 10 * 60 * 1000)
+    const twoHoursAfter = new Date(scheduled.getTime() + 2 * 60 * 60 * 1000) // 2 saat sonrasına kadar
+    return now >= tenMinutesBefore && now <= twoHoursAfter
+  }
+
+  const getTimeUntilClass = (scheduledTime: string) => {
+    const scheduled = new Date(scheduledTime)
+    const now = new Date()
+    const diff = scheduled.getTime() - now.getTime()
+
+    if (diff <= 0) {
+      // Sınıf başladıysa, ne kadar süredir devam ettiğini göster
+      const elapsed = Math.abs(diff)
+      const elapsedMinutes = Math.floor(elapsed / (1000 * 60))
+      if (elapsedMinutes < 60) {
+        return `${elapsedMinutes} dakikadır devam ediyor`
+      }
+      const elapsedHours = Math.floor(elapsedMinutes / 60)
+      const remainingMinutes = elapsedMinutes % 60
+      return `${elapsedHours}s ${remainingMinutes}d devam ediyor`
+    }
+
+    const hours = Math.floor(diff / (1000 * 60 * 60))
+    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
+
+    if (hours > 0) {
+      return `${hours}s ${minutes}d kaldı`
+    }
+    return `${minutes}d kaldı`
+  }
+
+  const handleCreateClass = (e: React.FormEvent) => {
+    e.preventDefault()
+    const newClass: Partial<ClassroomDto> = {
+      ...formData,
+      id: `class-${Date.now()}`,
+      teacherId: user.id,
+      teacherName: user.name,
+      isActive: false,
+      isScheduled: true,
+      participantCount: 0,
+    }
+
+    onCreateClass(newClass)
+    setScheduledClasses((prev) => [...prev, newClass as ClassroomDto])
+    setShowCreateModal(false)
+    setFormData({
+      name: '',
+      description: '',
+      subject: '',
+      scheduledStartTime: '',
+      duration: 60,
+      maxParticipants: 30,
+      settings: {
+        allowHandRaise: true,
+        defaultMicrophoneState: 'muted',
+        defaultCameraState: 'on',
+        defaultLayout: 'grid',
+        allowStudentScreenShare: false,
+        allowStudentChat: true,
+        allowPrivateMessages: true,
+        autoMuteNewParticipants: true,
+        recordSession: false,
+        waitingRoomEnabled: false,
+      },
+    })
+    // Yeni oluşturulan sınıfa yönlendir
+    if (newClass.id) {
+      navigate(ROUTES_ENUM.protected.admin.classroom.classroom.replace(':id', newClass.id))
+    }
+  }
+
+  const handleEditClass = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!editingClass) return
+
+    const updatedClass = {
+      ...editingClass,
+      ...formData,
+    }
+
+    setScheduledClasses((prev) => prev.map((c) => (c.id === editingClass.id ? updatedClass : c)))
+    onEditClass(editingClass.id, formData)
+    setShowEditModal(false)
+    setEditingClass(null)
+    resetForm()
+  }
+
+  const handleDeleteClass = () => {
+    if (!deletingClass) return
+
+    setScheduledClasses((prev) => prev.filter((c) => c.id !== deletingClass.id))
+    onDeleteClass(deletingClass.id)
+    setShowDeleteModal(false)
+    setDeletingClass(null)
+  }
+
+  const openEditModal = (classSession: ClassroomDto) => {
+    setEditingClass(classSession)
+    setFormData({
+      name: classSession.name,
+      description: classSession.description || '',
+      subject: classSession.subject || '',
+      scheduledStartTime: new Date(classSession.scheduledStartTime).toISOString().slice(0, 16),
+      duration: classSession.duration || 60,
+      maxParticipants: classSession.maxParticipants || 30,
+      settings: classSession.settings || {
+        allowHandRaise: true,
+        defaultMicrophoneState: 'muted',
+        defaultCameraState: 'on',
+        defaultLayout: 'grid',
+        allowStudentScreenShare: false,
+        allowStudentChat: true,
+        allowPrivateMessages: true,
+        autoMuteNewParticipants: true,
+        recordSession: false,
+        waitingRoomEnabled: false,
+      },
+    })
+    setShowEditModal(true)
+  }
+
+  const openDeleteModal = (classSession: ClassroomDto) => {
+    setDeletingClass(classSession)
+    setShowDeleteModal(true)
+  }
+
+  const resetForm = () => {
+    setFormData({
+      name: '',
+      description: '',
+      subject: '',
+      scheduledStartTime: '',
+      duration: 60,
+      maxParticipants: 30,
+      settings: {
+        allowHandRaise: true,
+        defaultMicrophoneState: 'muted',
+        defaultCameraState: 'on',
+        defaultLayout: 'grid',
+        allowStudentScreenShare: false,
+        allowStudentChat: true,
+        allowPrivateMessages: true,
+        autoMuteNewParticipants: true,
+        recordSession: false,
+        waitingRoomEnabled: false,
+      },
+    })
+  }
+
+  const handleStartClass = (classSession: ClassroomDto) => {
+    const updatedClass = {
+      ...classSession,
+      isActive: true,
+      startTime: new Date().toISOString(),
+    }
+
+    setScheduledClasses((prev) => prev.map((c) => (c.id === classSession.id ? updatedClass : c)))
+    onJoinClass(updatedClass)
+    // Sınıf başlatıldığında classroom ekranına yönlendir
+    if (updatedClass.id) {
+      navigate(ROUTES_ENUM.protected.admin.classroom.classroom.replace(':id', updatedClass.id))
+    }
+  }
+
+  const formatDateTime = (dateString: string) => {
+    return new Date(dateString).toLocaleString('tr-TR', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    })
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
+      {/* Header */}
+      <div className="bg-white shadow-sm border-b border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+            <div>
+              <h1 className="text-2xl sm:text-3xl font-bold text-gray-900">
+                Sanal Sınıf Dashboard
+              </h1>
+              <p className="text-gray-600">Hoş geldiniz, {user.name}</p>
+            </div>
+            {user.role === 'teacher' && (
+              <button
+                onClick={() => setShowCreateModal(true)}
+                className="flex items-center justify-center space-x-2 bg-blue-600 text-white px-4 sm:px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors w-full sm:w-auto"
+              >
+                <FaPlus size={20} />
+                <span className="hidden sm:inline">Yeni Sınıf Oluştur</span>
+                <span className="sm:hidden">Yeni Sınıf</span>
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* Stats Cards */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 mb-6 sm:mb-8">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="bg-white rounded-lg shadow-md p-4 sm:p-6"
+          >
+            <div className="flex items-center">
+              <div className="p-2 sm:p-3 bg-blue-100 rounded-full">
+                <FaCalendarAlt className="text-blue-600" size={20} />
+              </div>
+              <div className="ml-3 sm:ml-4">
+                <p className="text-xs sm:text-sm font-medium text-gray-600">Toplam Sınıf</p>
+                <p className="text-xl sm:text-2xl font-bold text-gray-900">
+                  {scheduledClasses.length}
+                </p>
+              </div>
+            </div>
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.1 }}
+            className="bg-white rounded-lg shadow-md p-4 sm:p-6"
+          >
+            <div className="flex items-center">
+              <div className="p-2 sm:p-3 bg-green-100 rounded-full">
+                <FaPlay className="text-green-600" size={20} />
+              </div>
+              <div className="ml-3 sm:ml-4">
+                <p className="text-xs sm:text-sm font-medium text-gray-600">Aktif Sınıf</p>
+                <p className="text-xl sm:text-2xl font-bold text-gray-900">
+                  {scheduledClasses.filter((c) => c.isActive).length}
+                </p>
+              </div>
+            </div>
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.2 }}
+            className="bg-white rounded-lg shadow-md p-4 sm:p-6 sm:col-span-2 lg:col-span-1"
+          >
+            <div className="flex items-center">
+              <div className="p-2 sm:p-3 bg-purple-100 rounded-full">
+                <FaUsers className="text-purple-600" size={20} />
+              </div>
+              <div className="ml-3 sm:ml-4">
+                <p className="text-xs sm:text-sm font-medium text-gray-600">Toplam Katılımcı</p>
+                <p className="text-xl sm:text-2xl font-bold text-gray-900">
+                  {scheduledClasses.reduce((sum, c) => sum + c.participantCount, 0)}
+                </p>
+              </div>
+            </div>
+          </motion.div>
+        </div>
+
+        {/* Scheduled Classes */}
+        <div className="bg-white rounded-lg shadow-md">
+          <div className="px-4 sm:px-6 py-4 border-b border-gray-200">
+            <h2 className="text-lg sm:text-xl font-semibold text-gray-900">Programlı Sınıflar</h2>
+          </div>
+          <div className="p-4 sm:p-6">
+            {scheduledClasses.length === 0 ? (
+              <div className="text-center py-12">
+                <FaCalendarAlt size={48} className="mx-auto text-gray-400 mb-4" />
+                <p className="text-gray-500">Henüz programlanmış sınıf bulunmamaktadır.</p>
+              </div>
+            ) : (
+              <div className="grid gap-4 sm:gap-6">
+                {scheduledClasses.map((classSession, index) => (
+                  <motion.div
+                    key={classSession.id}
+                    initial={{ opacity: 0, x: -20 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    transition={{ delay: index * 0.1 }}
+                    className="border border-gray-200 rounded-lg p-4 sm:p-6 hover:shadow-md transition-shadow"
+                  >
+                    <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between space-y-4 lg:space-y-0">
+                      <div className="flex-1">
+                        <div className="flex flex-col sm:flex-row sm:items-center space-y-2 sm:space-y-0 sm:space-x-3 mb-2">
+                          <h3 className="text-base sm:text-lg font-semibold text-gray-900 break-words">
+                            {classSession.name}
+                          </h3>
+                          <span
+                            className={`px-2 py-1 rounded-full text-xs font-medium self-start ${
+                              classSession.isActive
+                                ? 'bg-green-100 text-green-800'
+                                : canJoinClass(classSession.scheduledStartTime)
+                                  ? 'bg-yellow-100 text-yellow-800'
+                                  : 'bg-gray-100 text-gray-800'
+                            }`}
+                          >
+                            {classSession.isActive
+                              ? 'Aktif'
+                              : canJoinClass(classSession.scheduledStartTime)
+                                ? 'Katılım Açık'
+                                : 'Beklemede'}
+                          </span>
+                        </div>
+
+                        <p className="text-gray-600 mb-3 text-sm sm:text-base">
+                          {classSession.description}
+                        </p>
+
+                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2 sm:gap-4 text-xs sm:text-sm text-gray-600">
+                          <div className="flex items-center space-x-2">
+                            <FaCalendarAlt size={12} className="flex-shrink-0" />
+                            <span className="truncate">
+                              {formatDateTime(classSession.scheduledStartTime)}
+                            </span>
+                          </div>
+                          <div className="flex items-center space-x-2">
+                            <FaClock size={12} className="flex-shrink-0" />
+                            <span>{classSession.duration} dakika</span>
+                          </div>
+                          <div className="flex items-center space-x-2">
+                            <FaUsers size={12} className="flex-shrink-0" />
+                            <span>
+                              {classSession.participantCount}/{classSession.maxParticipants}
+                            </span>
+                          </div>
+                          <div className="flex items-center space-x-2">
+                            <FaEye size={12} className="flex-shrink-0" />
+                            <span className="truncate">
+                              {getTimeUntilClass(classSession.scheduledStartTime)}
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className="flex flex-col sm:flex-row items-stretch sm:items-center space-y-2 sm:space-y-0 sm:space-x-2 lg:ml-4 w-full lg:w-auto">
+                        {user.role === 'teacher' && classSession.teacherId === user.id && (
+                          <div className="flex space-x-2">
+                            <button
+                              onClick={() => openEditModal(classSession)}
+                              disabled={classSession.isActive}
+                              className="p-2 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex-shrink-0"
+                              title="Sınıfı Düzenle"
+                            >
+                              <FaEdit size={14} />
+                            </button>
+                            <button
+                              onClick={() => openDeleteModal(classSession)}
+                              disabled={classSession.isActive}
+                              className="p-2 text-gray-600 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex-shrink-0"
+                              title="Sınıfı Sil"
+                            >
+                              <FaTrash size={14} />
+                            </button>
+                          </div>
+                        )}
+
+                        {canJoinClass(classSession.scheduledStartTime) && (
+                          <button
+                            onClick={() =>
+                              user.role === 'teacher' && classSession.teacherId === user.id
+                                ? handleStartClass(classSession)
+                                : (() => {
+                                    onJoinClass(classSession)
+                                    if (classSession.id)
+                                      navigate(
+                                        ROUTES_ENUM.protected.admin.classroom.classroom.replace(
+                                          ':id',
+                                          classSession.id,
+                                        ),
+                                      )
+                                  })()
+                            }
+                            className={`px-3 sm:px-4 py-2 rounded-lg font-medium transition-colors text-sm sm:text-base w-full sm:w-auto ${
+                              user.role === 'teacher' && classSession.teacherId === user.id
+                                ? 'bg-green-600 text-white hover:bg-green-700'
+                                : 'bg-blue-600 text-white hover:bg-blue-700'
+                            }`}
+                          >
+                            {user.role === 'teacher' && classSession.teacherId === user.id
+                              ? classSession.isActive
+                                ? 'Sınıfa Git'
+                                : 'Dersi Başlat'
+                              : 'Katıl'}
+                          </button>
+                        )}
+                      </div>
+                    </div>
+                  </motion.div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Create Class Modal */}
+      {showCreateModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            className="bg-white rounded-lg max-w-2xl w-full max-h-[95vh] overflow-y-auto"
+          >
+            <div className="p-4 sm:p-6 border-b border-gray-200">
+              <h2 className="text-xl sm:text-2xl font-bold text-gray-900">Yeni Sınıf Oluştur</h2>
+            </div>
+
+            <form onSubmit={handleCreateClass} className="p-4 sm:p-6 space-y-4 sm:space-y-6">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-2">Sınıf Adı *</label>
+                <input
+                  type="text"
+                  required
+                  value={formData.name}
+                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  placeholder="Örn: Matematik 101 - Diferansiyel Denklemler"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-2">Açıklama</label>
+                <textarea
+                  value={formData.description}
+                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                  rows={3}
+                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  placeholder="Ders hakkında kısa açıklama..."
+                />
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Ders Konusu
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.subject}
+                    onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    placeholder="Örn: Matematik, Fizik, Kimya"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Başlangıç Tarihi ve Saati *
+                  </label>
+                  <input
+                    type="datetime-local"
+                    required
+                    value={formData.scheduledStartTime}
+                    onChange={(e) =>
+                      setFormData({
+                        ...formData,
+                        scheduledStartTime: e.target.value,
+                      })
+                    }
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  />
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Süre (dakika)
+                  </label>
+                  <input
+                    type="number"
+                    min="15"
+                    max="480"
+                    value={formData.duration}
+                    onChange={(e) =>
+                      setFormData({
+                        ...formData,
+                        duration: parseInt(e.target.value),
+                      })
+                    }
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Maksimum Katılımcı
+                  </label>
+                  <input
+                    type="number"
+                    min="1"
+                    max="100"
+                    value={formData.maxParticipants}
+                    onChange={(e) =>
+                      setFormData({
+                        ...formData,
+                        maxParticipants: parseInt(e.target.value),
+                      })
+                    }
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  />
+                </div>
+              </div>
+
+              {/* Sınıf Ayarları */}
+              <div>
+                <h3 className="text-lg font-semibold text-gray-800 mb-4">Sınıf Ayarları</h3>
+
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
+                  <div className="space-y-4">
+                    <h4 className="font-medium text-gray-700">Katılımcı İzinleri</h4>{' '}
+                    <label className="flex items-center space-x-3">
+                      <input
+                        type="checkbox"
+                        checked={formData.settings.allowHandRaise}
+                        onChange={(e) =>
+                          setFormData({
+                            ...formData,
+                            settings: {
+                              ...formData.settings,
+                              allowHandRaise: e.target.checked,
+                            },
+                          })
+                        }
+                        className="rounded"
+                      />
+                      <span className="text-sm">Parmak kaldırma izni</span>
+                    </label>
+                    <label className="flex items-center space-x-3">
+                      <input
+                        type="checkbox"
+                        checked={formData.settings.allowStudentChat}
+                        onChange={(e) =>
+                          setFormData({
+                            ...formData,
+                            settings: {
+                              ...formData.settings,
+                              allowStudentChat: e.target.checked,
+                            },
+                          })
+                        }
+                        className="rounded"
+                      />
+                      <span className="text-sm">Öğrenci sohbet izni</span>
+                    </label>
+                    <label className="flex items-center space-x-3">
+                      <input
+                        type="checkbox"
+                        checked={formData.settings.allowPrivateMessages}
+                        onChange={(e) =>
+                          setFormData({
+                            ...formData,
+                            settings: {
+                              ...formData.settings,
+                              allowPrivateMessages: e.target.checked,
+                            },
+                          })
+                        }
+                        className="rounded"
+                      />
+                      <span className="text-sm">Özel mesaj izni</span>
+                    </label>
+                    <label className="flex items-center space-x-3">
+                      <input
+                        type="checkbox"
+                        checked={formData.settings.allowStudentScreenShare}
+                        onChange={(e) =>
+                          setFormData({
+                            ...formData,
+                            settings: {
+                              ...formData.settings,
+                              allowStudentScreenShare: e.target.checked,
+                            },
+                          })
+                        }
+                        className="rounded"
+                      />
+                      <span className="text-sm">Öğrenci ekran paylaşımı</span>
+                    </label>
+                  </div>
+
+                  <div className="space-y-4">
+                    <h4 className="font-medium text-gray-700">Varsayılan Ayarlar</h4>
+
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-1">
+                        Varsayılan mikrofon durumu
+                      </label>
+                      <select
+                        value={formData.settings.defaultMicrophoneState}
+                        onChange={(e) =>
+                          setFormData({
+                            ...formData,
+                            settings: {
+                              ...formData.settings,
+                              defaultMicrophoneState: e.target.value as 'muted' | 'unmuted',
+                            },
+                          })
+                        }
+                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                      >
+                        <option value="muted">Kapalı</option>
+                        <option value="unmuted">Açık</option>
+                      </select>
+                    </div>
+
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-1">
+                        Varsayılan kamera durumu
+                      </label>
+                      <select
+                        value={formData.settings.defaultCameraState}
+                        onChange={(e) =>
+                          setFormData({
+                            ...formData,
+                            settings: {
+                              ...formData.settings,
+                              defaultCameraState: e.target.value as 'on' | 'off',
+                            },
+                          })
+                        }
+                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                      >
+                        <option value="on">Açık</option>
+                        <option value="off">Kapalı</option>
+                      </select>
+                    </div>
+
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-1">
+                        Varsayılan layout
+                      </label>
+                      <select
+                        value={formData.settings.defaultLayout}
+                        onChange={(e) =>
+                          setFormData({
+                            ...formData,
+                            settings: {
+                              ...formData.settings,
+                              defaultLayout: e.target.value,
+                            },
+                          })
+                        }
+                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                      >
+                        <option value="grid">Izgara Görünümü</option>
+                        <option value="teacher-focus">Öğretmen Odaklı</option>
+                        <option value="presentation">Sunum Modu</option>
+                        <option value="sidebar">Yan Panel</option>
+                      </select>
+                    </div>
+
+                    <label className="flex items-center space-x-3">
+                      <input
+                        type="checkbox"
+                        checked={formData.settings.autoMuteNewParticipants}
+                        onChange={(e) =>
+                          setFormData({
+                            ...formData,
+                            settings: {
+                              ...formData.settings,
+                              autoMuteNewParticipants: e.target.checked,
+                            },
+                          })
+                        }
+                        className="rounded"
+                      />
+                      <span className="text-sm">Yeni katılımcıları otomatik sustur</span>
+                    </label>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex items-center justify-end space-x-4 pt-6 border-t border-gray-200">
+                <button
+                  type="button"
+                  onClick={() => setShowCreateModal(false)}
+                  className="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+                >
+                  İptal
+                </button>
+                <button
+                  type="submit"
+                  className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                >
+                  Sınıf Oluştur
+                </button>
+              </div>
+            </form>
+          </motion.div>
+        </div>
+      )}
+
+      {/* Edit Class Modal */}
+      {showEditModal && editingClass && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            className="bg-white rounded-lg max-w-2xl w-full max-h-[95vh] overflow-y-auto"
+          >
+            <div className="p-4 sm:p-6 border-b border-gray-200">
+              <h2 className="text-xl sm:text-2xl font-bold text-gray-900">Sınıfı Düzenle</h2>
+            </div>
+
+            <form onSubmit={handleEditClass} className="p-4 sm:p-6 space-y-4 sm:space-y-6">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-2">Sınıf Adı *</label>
+                <input
+                  type="text"
+                  required
+                  value={formData.name}
+                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  placeholder="Örn: Matematik 101 - Diferansiyel Denklemler"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-2">Açıklama</label>
+                <textarea
+                  value={formData.description}
+                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                  rows={3}
+                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  placeholder="Ders hakkında kısa açıklama..."
+                />
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Ders Konusu
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.subject}
+                    onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    placeholder="Örn: Matematik, Fizik, Kimya"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Başlangıç Tarihi ve Saati *
+                  </label>
+                  <input
+                    type="datetime-local"
+                    required
+                    value={formData.scheduledStartTime}
+                    onChange={(e) =>
+                      setFormData({
+                        ...formData,
+                        scheduledStartTime: e.target.value,
+                      })
+                    }
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  />
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Süre (dakika)
+                  </label>
+                  <input
+                    type="number"
+                    min="15"
+                    max="480"
+                    value={formData.duration}
+                    onChange={(e) =>
+                      setFormData({
+                        ...formData,
+                        duration: parseInt(e.target.value),
+                      })
+                    }
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Maksimum Katılımcı
+                  </label>
+                  <input
+                    type="number"
+                    min="1"
+                    max="100"
+                    value={formData.maxParticipants}
+                    onChange={(e) =>
+                      setFormData({
+                        ...formData,
+                        maxParticipants: parseInt(e.target.value),
+                      })
+                    }
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  />
+                </div>
+              </div>
+
+              <div className="flex items-center justify-end space-x-4 pt-6 border-t border-gray-200">
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowEditModal(false)
+                    setEditingClass(null)
+                    resetForm()
+                  }}
+                  className="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+                >
+                  İptal
+                </button>
+                <button
+                  type="submit"
+                  className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                >
+                  Değişiklikleri Kaydet
+                </button>
+              </div>
+            </form>
+          </motion.div>
+        </div>
+      )}
+
+      {/* Delete Confirmation Modal */}
+      {showDeleteModal && deletingClass && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            className="bg-white rounded-lg max-w-md w-full mx-4"
+          >
+            <div className="p-6">
+              <div className="flex items-center mb-4">
+                <div className="p-3 bg-red-100 rounded-full mr-4">
+                  <FaTrash className="text-red-600" size={24} />
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold text-gray-900">Sınıfı Sil</h3>
+                  <p className="text-sm text-gray-600">Bu işlem geri alınamaz</p>
+                </div>
+              </div>
+
+              <p className="text-gray-700 mb-6">
+                <strong>"{deletingClass.name}"</strong> adlı sınıfı silmek istediğinizden emin
+                misiniz?
+              </p>
+
+              <div className="flex items-center justify-end space-x-4">
+                <button
+                  onClick={() => {
+                    setShowDeleteModal(false)
+                    setDeletingClass(null)
+                  }}
+                  className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+                >
+                  İptal
+                </button>
+                <button
+                  onClick={handleDeleteClass}
+                  className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
+                >
+                  Sil
+                </button>
+              </div>
+            </div>
+          </motion.div>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/ui/src/components/classroom/Dashboard.tsx b/ui/src/components/classroom/Dashboard.tsx
new file mode 100644
index 00000000..1511a174
--- /dev/null
+++ b/ui/src/components/classroom/Dashboard.tsx
@@ -0,0 +1,38 @@
+import { useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { RoleSelector } from './RoleSelector'
+import { useClassroomLogic } from '@/utils/hooks/useClassroomLogic'
+import { useStoreState } from '@/store/store'
+import { ROUTES_ENUM } from '@/routes/route.constant'
+import { Room } from './Room'
+
+export function Dashboard() {
+  const {
+    appState,
+    currentClass,
+    handleRoleSelect,
+    handleJoinClass,
+    handleLeaveClass,
+    handleCreateClass,
+    handleEditClass,
+    handleDeleteClass,
+  } = useClassroomLogic()
+  const navigate = useNavigate()
+  const { user } = useStoreState((state) => state.auth)
+
+  useEffect(() => {
+    if (appState === 'dashboard') {
+      navigate(ROUTES_ENUM.protected.admin.classroom.classes, { replace: true })
+    }
+  }, [appState, navigate])
+
+  if (appState === 'role-selection') {
+    return <RoleSelector onRoleSelect={handleRoleSelect} />
+  } else if (appState === 'dashboard') {
+    // Yönlendirme yapılacağı için burada içerik render etmiyoruz
+    return null
+  } else if (appState === 'classroom' && currentClass) {
+    return <Room classSession={currentClass} onLeaveClass={handleLeaveClass} />
+  }
+  return null
+}
diff --git a/ui/src/components/classroom/KickParticipantModal.tsx b/ui/src/components/classroom/KickParticipantModal.tsx
new file mode 100644
index 00000000..c6e8fb93
--- /dev/null
+++ b/ui/src/components/classroom/KickParticipantModal.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { FaUserTimes, FaExclamationTriangle } from 'react-icons/fa';
+
+interface KickParticipantModalProps {
+  participant: { id: string; name: string } | null;
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: (participantId: string) => void;
+}
+
+export const KickParticipantModal: React.FC<KickParticipantModalProps> = ({
+  participant,
+  isOpen,
+  onClose,
+  onConfirm,
+}) => {
+  if (!isOpen || !participant) return null;
+
+  const handleConfirm = () => {
+    onConfirm(participant.id);
+    onClose();
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <motion.div
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{ opacity: 1, scale: 1 }}
+        className="bg-white rounded-lg max-w-md w-full mx-4"
+      >
+        <div className="p-6">
+          <div className="flex items-center mb-4">
+            <div className="p-3 bg-red-100 rounded-full mr-4">
+              <FaExclamationTriangle className="text-red-600" size={24} />
+            </div>
+            <div>
+              <h3 className="text-lg font-semibold text-gray-900">Katılımcıyı Çıkar</h3>
+              <p className="text-sm text-gray-600">Bu işlem geri alınamaz</p>
+            </div>
+          </div>
+          
+          <div className="mb-6">
+            <p className="text-gray-700 mb-2">
+              <strong>"{participant.name}"</strong> adlı katılımcıyı sınıftan çıkarmak istediğinizden emin misiniz?
+            </p>
+            <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
+              <div className="flex items-start">
+                <FaExclamationTriangle className="text-yellow-600 mt-0.5 mr-2" size={16} />
+                <div className="text-sm text-yellow-800">
+                  <p className="font-medium">Dikkat:</p>
+                  <ul className="mt-1 list-disc list-inside space-y-1">
+                    <li>Katılımcı anında sınıftan çıkarılacak</li>
+                    <li>Tekrar katılım için davet gerekebilir</li>
+                    <li>Katılım süresi kaydedilecek</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <div className="flex items-center justify-end space-x-4">
+            <button
+              onClick={onClose}
+              className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+            >
+              İptal
+            </button>
+            <button
+              onClick={handleConfirm}
+              className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors flex items-center space-x-2"
+            >
+              <FaUserTimes size={16} />
+              <span>Çıkar</span>
+            </button>
+          </div>
+        </div>
+      </motion.div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/ui/src/components/classroom/Panels/AttendancePanel.tsx b/ui/src/components/classroom/Panels/AttendancePanel.tsx
new file mode 100644
index 00000000..a84d93ed
--- /dev/null
+++ b/ui/src/components/classroom/Panels/AttendancePanel.tsx
@@ -0,0 +1,118 @@
+import { ClassAttendanceDto } from '@/proxy/classroom/models'
+import React, { useEffect, useState } from 'react'
+import { FaClock, FaUsers } from 'react-icons/fa'
+
+interface AttendancePanelProps {
+  attendanceRecords: ClassAttendanceDto[]
+  isOpen: boolean
+  onClose: () => void
+}
+
+export const AttendancePanel: React.FC<AttendancePanelProps> = ({
+  attendanceRecords,
+  isOpen,
+  onClose,
+}) => {
+  // Anlık süre güncellemesi için state ve timer
+  const [now, setNow] = useState(Date.now())
+  useEffect(() => {
+    if (!isOpen) return
+    const interval = setInterval(() => setNow(Date.now()), 60000) // her dakika
+    return () => clearInterval(interval)
+  }, [isOpen])
+
+  const formatDuration = (minutes: number) => {
+    const hours = Math.floor(minutes / 60)
+    const mins = minutes % 60
+    if (hours > 0) {
+      return `${hours}h ${mins}m`
+    }
+    return `${mins}m`
+  }
+
+  const formatTime = (timeString: string) => {
+    return new Date(timeString).toLocaleTimeString('tr-TR', {
+      hour: '2-digit',
+      minute: '2-digit',
+    })
+  }
+
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg max-w-4xl w-full mx-4 max-h-[80vh] overflow-hidden">
+        <div className="p-6 border-b border-gray-200">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-2">
+              <FaUsers className="text-blue-600" size={24} />
+              <h2 className="text-2xl font-bold text-gray-800">Katılım Raporu</h2>
+            </div>
+            <button
+              onClick={onClose}
+              className="text-gray-500 hover:text-gray-700 text-xl font-bold"
+            >
+              ×
+            </button>
+          </div>
+        </div>
+
+        <div className="p-6 overflow-y-auto max-h-96">
+          {attendanceRecords.length === 0 ? (
+            <div className="text-center py-8 text-gray-500">
+              <FaClock size={48} className="mx-auto mb-4" />
+              <p>Henüz katılım kaydı bulunmamaktadır.</p>
+            </div>
+          ) : (
+            <div className="overflow-x-auto">
+              <table className="w-full border-collapse border border-gray-300">
+                <thead>
+                  <tr className="bg-gray-50">
+                    <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-gray-700">
+                      Öğrenci Adı
+                    </th>
+                    <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-gray-700">
+                      Giriş Saati
+                    </th>
+                    <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-gray-700">
+                      Çıkış Saati
+                    </th>
+                    <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-gray-700">
+                      Toplam Süre
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {attendanceRecords.map((record) => (
+                    <tr key={record.id} className="hover:bg-gray-50">
+                      <td className="border border-gray-300 px-4 py-3 text-gray-800">
+                        {record.studentName}
+                      </td>
+                      <td className="border border-gray-300 px-4 py-3 text-gray-600">
+                        {formatTime(record.joinTime)}
+                      </td>
+                      <td className="border border-gray-300 px-4 py-3 text-gray-600">
+                        {record.leaveTime ? formatTime(record.leaveTime) : 'Devam ediyor'}
+                      </td>
+                      <td className="border border-gray-300 px-4 py-3 text-gray-800 font-semibold">
+                        {(() => {
+                          // Her zaman canlı süreyi hesapla, çıkış varsa oraya kadar, yoksa şimdiye kadar
+                          const endTime = record.leaveTime
+                            ? new Date(record.leaveTime).getTime()
+                            : now
+                          const join = new Date(record.joinTime).getTime()
+                          const mins = Math.floor((endTime - join) / 60000)
+                          return formatDuration(mins)
+                        })()}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/ui/src/components/classroom/Panels/ChatPanel.tsx b/ui/src/components/classroom/Panels/ChatPanel.tsx
new file mode 100644
index 00000000..bbcc62e8
--- /dev/null
+++ b/ui/src/components/classroom/Panels/ChatPanel.tsx
@@ -0,0 +1,249 @@
+import { ClassChatDto } from '@/proxy/classroom/models'
+import { useStoreState } from '@/store/store'
+import React, { useState, useRef, useEffect } from 'react'
+import { FaPaperPlane, FaComments, FaTimes, FaUsers, FaUser, FaBullhorn } from 'react-icons/fa'
+
+interface ChatPanelProps {
+  messages: ClassChatDto[]
+  isTeacher: boolean
+  isOpen: boolean
+  onClose: () => void
+  onSendMessage: (message: string) => void
+  participants: Array<{ id: string; name: string; isTeacher: boolean }>
+  onSendPrivateMessage: (message: string, recipientId: string, recipientName: string) => void
+  onSendAnnouncement?: (message: string) => void
+}
+
+export const ChatPanel: React.FC<ChatPanelProps> = ({
+  messages,
+  isTeacher,
+  isOpen,
+  onClose,
+  onSendMessage,
+  participants,
+  onSendPrivateMessage,
+  onSendAnnouncement,
+}) => {
+  const { user } = useStoreState((state) => state.auth)
+
+  const [newMessage, setNewMessage] = useState('')
+  const [messageMode, setMessageMode] = useState<'public' | 'private' | 'announcement'>('public')
+  const [selectedRecipient, setSelectedRecipient] = useState<{ id: string; name: string } | null>(
+    null,
+  )
+  const messagesEndRef = useRef<HTMLDivElement>(null)
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }
+
+  useEffect(() => {
+    scrollToBottom()
+  }, [messages])
+
+  const handleSendMessage = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (newMessage.trim()) {
+      if (messageMode === 'private' && selectedRecipient) {
+        onSendPrivateMessage(newMessage.trim(), selectedRecipient.id, selectedRecipient.name)
+      } else if (messageMode === 'announcement' && onSendAnnouncement) {
+        onSendAnnouncement(newMessage.trim())
+      } else {
+        onSendMessage(newMessage.trim())
+      }
+      setNewMessage('')
+    }
+  }
+
+  const formatTime = (timestamp: string) => {
+    return new Date(timestamp).toLocaleTimeString('tr-TR', {
+      hour: '2-digit',
+      minute: '2-digit',
+    })
+  }
+
+  if (!isOpen) return null
+
+  const availableRecipients = participants.filter((p) => p.id !== user.id)
+  return (
+    <div className="fixed right-4 bottom-4 w-96 h-[500px] bg-white rounded-lg shadow-xl border border-gray-200 flex flex-col z-50">
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 border-b border-gray-200 bg-blue-50 rounded-t-lg">
+        <div className="flex items-center space-x-2">
+          <FaComments className="text-blue-600" size={20} />
+          <h3 className="font-semibold text-gray-800">Sınıf Sohbeti</h3>
+        </div>
+        <button onClick={onClose} className="text-gray-500 hover:text-gray-700 transition-colors">
+          <FaTimes size={18} />
+        </button>
+      </div>
+
+      {/* Message Mode Selector */}
+      <div className="p-3 border-b border-gray-200 bg-gray-50">
+        <div className="flex space-x-2 mb-2">
+          <button
+            onClick={() => {
+              setMessageMode('public')
+              setSelectedRecipient(null)
+            }}
+            className={`flex items-center space-x-1 px-3 py-1 rounded-full text-xs ${
+              messageMode === 'public'
+                ? 'bg-blue-600 text-white'
+                : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+            }`}
+          >
+            <FaUsers size={12} />
+            <span>Herkese</span>
+          </button>
+
+          <button
+            onClick={() => setMessageMode('private')}
+            className={`flex items-center space-x-1 px-3 py-1 rounded-full text-xs ${
+              messageMode === 'private'
+                ? 'bg-green-600 text-white'
+                : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+            }`}
+          >
+            <FaUser size={12} />
+            <span>Özel</span>
+          </button>
+
+          {isTeacher && (
+            <button
+              onClick={() => {
+                setMessageMode('announcement')
+                setSelectedRecipient(null)
+              }}
+              className={`flex items-center space-x-1 px-3 py-1 rounded-full text-xs ${
+                messageMode === 'announcement'
+                  ? 'bg-red-600 text-white'
+                  : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+              }`}
+            >
+              <FaBullhorn size={12} />
+              <span>Duyuru</span>
+            </button>
+          )}
+        </div>
+
+        {messageMode === 'private' && (
+          <select
+            value={selectedRecipient?.id || ''}
+            onChange={(e) => {
+              const recipient = availableRecipients.find((p) => p.id === e.target.value)
+              setSelectedRecipient(recipient ? { id: recipient.id, name: recipient.name } : null)
+            }}
+            className="w-full px-2 py-1 text-xs border border-gray-300 rounded"
+          >
+            <option value="">Kişi seçin...</option>
+            {availableRecipients.map((participant) => (
+              <option key={participant.id} value={participant.id}>
+                {participant.name} {participant.isTeacher ? '(Öğretmen)' : ''}
+              </option>
+            ))}
+          </select>
+        )}
+      </div>
+      {/* Messages */}
+      <div className="flex-1 overflow-y-auto p-4 space-y-3">
+        {messages.length === 0 ? (
+          <div className="text-center text-gray-500 text-sm">Henüz mesaj bulunmamaktadır.</div>
+        ) : (
+          messages.map((message) => (
+            <div
+              key={message.id}
+              className={`${
+                message.messageType === 'announcement'
+                  ? 'w-full'
+                  : message.senderId === user.id
+                    ? 'flex justify-end'
+                    : 'flex justify-start'
+              }`}
+            >
+              <div
+                className={`max-w-xs px-3 py-2 rounded-lg ${
+                  message.messageType === 'announcement'
+                    ? 'bg-red-100 text-red-800 border border-red-200 w-full text-center'
+                    : message.messageType === 'private'
+                      ? message.senderId === user.id
+                        ? 'bg-green-600 text-white'
+                        : 'bg-green-100 text-green-800 border border-green-200'
+                      : message.senderId === user.id
+                        ? 'bg-blue-600 text-white'
+                        : message.isTeacher
+                          ? 'bg-yellow-100 text-yellow-800 border border-yellow-200'
+                          : 'bg-gray-100 text-gray-800'
+                }`}
+              >
+                {message.senderId !== user.id && (
+                  <div className="text-xs font-semibold mb-1">
+                    {message.senderName}
+                    {message.isTeacher && ' (Öğretmen)'}
+                    {message.messageType === 'private' &&
+                      message.recipientId === user.id &&
+                      ' (Size özel)'}
+                  </div>
+                )}
+                {message.messageType === 'private' && message.senderId === user.id && (
+                  <div className="text-xs mb-1 opacity-75">→ {message.recipientName}</div>
+                )}
+                {message.messageType === 'announcement' && (
+                  <div className="text-xs font-semibold mb-1">📢 DUYURU - {message.senderName}</div>
+                )}
+                <div className="text-sm">{message.message}</div>
+                <div
+                  className={`text-xs mt-1 opacity-75 ${
+                    message.messageType === 'announcement'
+                      ? 'text-red-600'
+                      : message.senderId === user.id
+                        ? 'text-white'
+                        : 'text-gray-500'
+                  }`}
+                >
+                  {formatTime(message.timestamp)}
+                </div>
+              </div>
+            </div>
+          ))
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* Message Input */}
+      <form onSubmit={handleSendMessage} className="p-4 border-t border-gray-200">
+        <div className="text-xs text-gray-500 mb-2">
+          {messageMode === 'public' && 'Herkese mesaj gönderiyorsunuz'}
+          {messageMode === 'private' &&
+            selectedRecipient &&
+            `${selectedRecipient.name} kişisine özel mesaj`}
+          {messageMode === 'private' && !selectedRecipient && 'Önce bir kişi seçin'}
+          {messageMode === 'announcement' && 'Sınıfa duyuru gönderiyorsunuz'}
+        </div>
+        <div className="flex space-x-2">
+          <input
+            type="text"
+            value={newMessage}
+            onChange={(e) => setNewMessage(e.target.value)}
+            placeholder={
+              messageMode === 'private' && !selectedRecipient
+                ? 'Önce kişi seçin...'
+                : messageMode === 'announcement'
+                  ? 'Duyuru mesajınız...'
+                  : 'Mesajınızı yazın...'
+            }
+            className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
+            maxLength={500}
+            disabled={messageMode === 'private' && !selectedRecipient}
+          />
+          <button
+            type="submit"
+            disabled={!newMessage.trim() || (messageMode === 'private' && !selectedRecipient)}
+            className="px-3 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
+          >
+            <FaPaperPlane size={16} />
+          </button>
+        </div>
+      </form>
+    </div>
+  )
+}
diff --git a/ui/src/components/classroom/Panels/ClassLayoutPanel.tsx b/ui/src/components/classroom/Panels/ClassLayoutPanel.tsx
new file mode 100644
index 00000000..40aac35c
--- /dev/null
+++ b/ui/src/components/classroom/Panels/ClassLayoutPanel.tsx
@@ -0,0 +1,116 @@
+import { VideoLayoutDto } from '@/proxy/classroom/models'
+import React from 'react'
+import { FaExpand, FaTh, FaColumns, FaDesktop, FaChalkboardTeacher } from 'react-icons/fa'
+
+interface ClassLayoutPanelProps {
+  currentLayout: VideoLayoutDto
+  isOpen: boolean
+  onClose: () => void
+}
+
+const layouts: VideoLayoutDto[] = [
+  {
+    id: 'grid',
+    name: 'Izgara Görünümü',
+    type: 'grid',
+    description: 'Tüm katılımcılar eşit boyutta görünür',
+  },
+  {
+    id: 'sidebar',
+    name: 'Yan Panel Görünümü',
+    type: 'sidebar',
+    description: 'Ana konuşmacı büyük, diğerleri yan panelde',
+  },
+  {
+    id: 'teacher-focus',
+    name: 'Öğretmen Odaklı',
+    type: 'teacher-focus',
+    description: 'Öğretmen tam ekranda görünür, öğrenciler küçük panelde',
+  },
+]
+
+export const ClassLayoutPanel: React.FC<ClassLayoutPanelProps> = ({
+  currentLayout,
+  isOpen,
+  onClose,
+}) => {
+  const getLayoutIcon = (type: string) => {
+    switch (type) {
+      case 'grid':
+        return <FaTh size={24} />
+      case 'speaker':
+        return <FaExpand size={24} />
+      case 'presentation':
+        return <FaDesktop size={24} />
+      case 'sidebar':
+        return <FaColumns size={24} />
+      case 'teacher-focus':
+        // Sade, tek kişilik bir ikon (öğretmen)
+        return <FaChalkboardTeacher size={26} />
+      default:
+        return <FaTh size={24} />
+    }
+  }
+
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="p-6 border-b border-gray-200">
+        <div className="flex items-center justify-between">
+          <h2 className="text-2xl font-bold text-gray-900">Video Layout Seçin</h2>
+          <button onClick={onClose} className="text-gray-500 hover:text-gray-700 text-xl font-bold">
+            ×
+          </button>
+        </div>
+      </div>
+
+      <div className="p-6">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {layouts.map((layout) => (
+            <div key={layout.id}>
+              <div className="flex items-center space-x-4 mb-3">
+                <div
+                  className={`p-3 rounded-full ${
+                    currentLayout.id === layout.id
+                      ? 'bg-blue-100 text-blue-600'
+                      : 'bg-gray-100 text-gray-600'
+                  }`}
+                >
+                  {getLayoutIcon(layout.type)}
+                </div>
+                <div>
+                  <h3 className="font-semibold text-gray-900">{layout.name}</h3>
+                  <p className="text-sm text-gray-600">{layout.description}</p>
+                </div>
+              </div>
+
+              <div className="bg-gray-100 rounded-lg p-4 h-24 flex items-center justify-center">
+                {layout.type === 'grid' && (
+                  <div className="grid grid-cols-2 gap-1">
+                    {[1, 2, 3, 4].map((i) => (
+                      <div key={i} className="w-6 h-4 bg-blue-300 rounded"></div>
+                    ))}
+                  </div>
+                )}
+                {layout.type === 'sidebar' && (
+                  <div className="flex items-center space-x-2">
+                    <div className="w-12 h-8 bg-blue-500 rounded"></div>
+                    <div className="grid grid-cols-3 gap-1">
+                      <div className="w-1 h-1 bg-blue-300 rounded"></div>
+                      <div className="w-1 h-1 bg-blue-300 rounded"></div>
+                      <div className="w-1 h-1 bg-blue-300 rounded"></div>
+                      <div className="w-1 h-1 bg-blue-300 rounded"></div>
+                      <div className="w-1 h-1 bg-blue-300 rounded"></div>
+                      <div className="w-1 h-1 bg-blue-300 rounded"></div>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/ui/src/components/classroom/Panels/DocumentPanel.tsx b/ui/src/components/classroom/Panels/DocumentPanel.tsx
new file mode 100644
index 00000000..4fbfd581
--- /dev/null
+++ b/ui/src/components/classroom/Panels/DocumentPanel.tsx
@@ -0,0 +1,244 @@
+import React, { useState, useRef } from 'react'
+import { motion } from 'framer-motion'
+import {
+  FaFile,
+  FaUpload,
+  FaDownload,
+  FaTrash,
+  FaEye,
+  FaTimes,
+  FaFilePdf,
+  FaFileWord,
+  FaFileImage,
+  FaFileAlt,
+  FaPlay,
+  FaStop,
+} from 'react-icons/fa'
+import { ClassDocumentDto } from '@/proxy/classroom/models'
+
+interface DocumentPanelProps {
+  documents: ClassDocumentDto[]
+  isOpen: boolean
+  onClose: () => void
+  onUpload?: (file: File) => void
+  onDelete?: (documentId: string) => void
+  onView?: (document: ClassDocumentDto) => void
+  isTeacher: boolean
+  onStartPresentation?: (document: ClassDocumentDto) => void
+  onStopPresentation?: () => void
+  activePresentationId?: string
+}
+
+export const DocumentPanel: React.FC<DocumentPanelProps> = ({
+  documents,
+  isOpen,
+  onClose,
+  onUpload,
+  onDelete,
+  onView,
+  isTeacher,
+  onStartPresentation,
+  onStopPresentation,
+  activePresentationId,
+}) => {
+  const [dragOver, setDragOver] = useState(false)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const getFileIcon = (type: string) => {
+    if (type.includes('pdf')) return <FaFilePdf className="text-red-500" />
+    if (
+      type.includes('word') ||
+      type.includes('doc') ||
+      type.includes('presentation') ||
+      type.includes('powerpoint')
+    )
+      return <FaFileWord className="text-blue-500" />
+    if (type.includes('image')) return <FaFileImage className="text-green-500" />
+    return <FaFileAlt className="text-gray-500" />
+  }
+
+  const formatFileSize = (bytes: number) => {
+    if (bytes === 0) return '0 Bytes'
+    const k = 1024
+    const sizes = ['Bytes', 'KB', 'MB', 'GB']
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+  }
+
+  const isPresentationFile = (type: string, name: string) => {
+    return (
+      type.includes('presentation') ||
+      type.includes('powerpoint') ||
+      name.toLowerCase().includes('.ppt') ||
+      name.toLowerCase().includes('.pptx') ||
+      type.includes('pdf')
+    )
+  }
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault()
+    setDragOver(false)
+
+    if (!isTeacher || !onUpload) return
+
+    const files = Array.from(e.dataTransfer.files)
+    files.forEach((file) => onUpload(file))
+  }
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!isTeacher || !onUpload) return
+
+    const files = Array.from(e.target.files || [])
+    files.forEach((file) => onUpload(file))
+
+    // Reset input
+    if (fileInputRef.current) {
+      fileInputRef.current.value = ''
+    }
+  }
+
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <motion.div
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{ opacity: 1, scale: 1 }}
+        className="bg-white rounded-lg max-w-4xl w-full mx-4 max-h-[80vh] overflow-hidden"
+      >
+        <div className="p-6 border-b border-gray-200">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-2">
+              <FaFile className="text-blue-600" size={24} />
+              <h2 className="text-2xl font-bold text-gray-800">Sınıf Dokümanları</h2>
+            </div>
+            <button
+              onClick={onClose}
+              className="text-gray-500 hover:text-gray-700 text-xl font-bold"
+            >
+              <FaTimes size={20} />
+            </button>
+          </div>
+        </div>
+
+        <div className="p-6 overflow-y-auto max-h-96">
+          {/* Upload Area (Teacher Only) */}
+          {isTeacher && (
+            <div
+              className={`border-2 border-dashed rounded-lg p-8 mb-6 text-center transition-colors ${
+                dragOver ? 'border-blue-500 bg-blue-50' : 'border-gray-300 hover:border-gray-400'
+              }`}
+              onDrop={handleDrop}
+              onDragOver={(e) => {
+                e.preventDefault()
+                setDragOver(true)
+              }}
+              onDragLeave={() => setDragOver(false)}
+            >
+              <FaUpload size={48} className="mx-auto text-gray-400 mb-4" />
+              <p className="text-lg font-medium text-gray-700 mb-2">Doküman Yükle</p>
+              <p className="text-gray-500 mb-4">Dosyaları buraya sürükleyin veya seçin</p>
+              <button
+                onClick={() => fileInputRef.current?.click()}
+                className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+              >
+                Dosya Seç
+              </button>
+              <input
+                ref={fileInputRef}
+                type="file"
+                multiple
+                onChange={handleFileSelect}
+                className="hidden"
+                accept=".pdf,.doc,.docx,.ppt,.pptx,.jpg,.jpeg,.png,.gif,.odp"
+              />
+            </div>
+          )}
+
+          {/* Documents List */}
+          {documents.length === 0 ? (
+            <div className="text-center py-8 text-gray-500">
+              <FaFile size={48} className="mx-auto mb-4 text-gray-300" />
+              <p>Henüz doküman yüklenmemiş.</p>
+            </div>
+          ) : (
+            <div className="grid gap-4">
+              {documents.map((doc) => (
+                <div
+                  key={doc.id}
+                  className="flex items-center justify-between p-4 border border-gray-200 rounded-lg hover:shadow-md transition-shadow"
+                >
+                  <div className="flex items-center space-x-4">
+                    <div className="text-2xl">{getFileIcon(doc.type)}</div>
+                    <div>
+                      <h3 className="font-semibold text-gray-800">{doc.name}</h3>
+                      <p className="text-sm text-gray-600">
+                        {formatFileSize(doc.size)} •{' '}
+                        {new Date(doc.uploadedAt).toLocaleDateString('tr-TR')}
+                      </p>
+                      <p className="text-xs text-gray-500">Yükleyen: {doc.uploadedBy}</p>
+                    </div>
+                  </div>
+
+                  <div className="flex items-center space-x-2">
+                    <button
+                      onClick={() => onView?.(doc)}
+                      className="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
+                      title="Görüntüle"
+                    >
+                      <FaEye size={16} />
+                    </button>
+
+                    {/* Sunum Başlat/Durdur Butonu */}
+                    {isTeacher && isPresentationFile(doc.type, doc.name) && (
+                      <button
+                        onClick={() => {
+                          if (activePresentationId === doc.id) {
+                            onStopPresentation?.()
+                          } else {
+                            onStartPresentation?.(doc)
+                          }
+                        }}
+                        className={`p-2 rounded-lg transition-colors ${
+                          activePresentationId === doc.id
+                            ? 'text-red-600 hover:bg-red-50'
+                            : 'text-green-600 hover:bg-green-50'
+                        }`}
+                        title={activePresentationId === doc.id ? 'Sunumu Durdur' : 'Sunum Başlat'}
+                      >
+                        {activePresentationId === doc.id ? (
+                          <FaStop size={16} />
+                        ) : (
+                          <FaPlay size={16} />
+                        )}
+                      </button>
+                    )}
+
+                    <a
+                      href={doc.url}
+                      download={doc.name}
+                      className="p-2 text-green-600 hover:bg-green-50 rounded-lg transition-colors"
+                      title="İndir"
+                    >
+                      <FaDownload size={16} />
+                    </a>
+
+                    {isTeacher && (
+                      <button
+                        onClick={() => onDelete?.(doc.id)}
+                        className="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                        title="Sil"
+                      >
+                        <FaTrash size={16} />
+                      </button>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </motion.div>
+    </div>
+  )
+}
diff --git a/ui/src/components/classroom/Panels/HandRaisePanel.tsx b/ui/src/components/classroom/Panels/HandRaisePanel.tsx
new file mode 100644
index 00000000..79569487
--- /dev/null
+++ b/ui/src/components/classroom/Panels/HandRaisePanel.tsx
@@ -0,0 +1,113 @@
+import { HandRaiseDto } from '@/proxy/classroom/models'
+import React from 'react'
+import { FaHandPaper, FaTimes, FaCheck } from 'react-icons/fa'
+
+interface HandRaisePanelProps {
+  handRaises: HandRaiseDto[]
+  isOpen: boolean
+  onClose: () => void
+  onApprove?: (handRaiseId: string) => void
+  onDismiss?: (handRaiseId: string) => void
+  isTeacher: boolean
+}
+
+export const HandRaisePanel: React.FC<HandRaisePanelProps> = ({
+  handRaises,
+  isOpen,
+  onClose,
+  onApprove,
+  onDismiss,
+  isTeacher,
+}) => {
+  const formatTime = (timestamp: string) => {
+    return new Date(timestamp).toLocaleTimeString('tr-TR', {
+      hour: '2-digit',
+      minute: '2-digit',
+    })
+  }
+
+  const getTimeSince = (timestamp: string) => {
+    const now = new Date()
+    const time = new Date(timestamp)
+    const diffMinutes = Math.floor((now.getTime() - time.getTime()) / 60000)
+
+    if (diffMinutes < 1) return 'Az önce'
+    if (diffMinutes < 60) return `${diffMinutes} dakika önce`
+    const hours = Math.floor(diffMinutes / 60)
+    return `${hours} saat önce`
+  }
+
+  if (!isOpen) return null
+
+  const activeHandRaises = handRaises.filter((hr) => hr.isActive)
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg max-w-2xl w-full mx-4 max-h-[80vh] overflow-hidden">
+        <div className="p-6 border-b border-gray-200">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-2">
+              <FaHandPaper className="text-yellow-600" size={24} />
+              <h2 className="text-2xl font-bold text-gray-800">
+                Parmak Kaldıranlar ({activeHandRaises.length})
+              </h2>
+            </div>
+            <button
+              onClick={onClose}
+              className="text-gray-500 hover:text-gray-700 text-xl font-bold"
+            >
+              ×
+            </button>
+          </div>
+        </div>
+
+        <div className="p-6 overflow-y-auto max-h-96">
+          {activeHandRaises.length === 0 ? (
+            <div className="text-center py-8 text-gray-500">
+              <FaHandPaper size={48} className="mx-auto mb-4 text-gray-300" />
+              <p>Şu anda parmak kaldıran öğrenci bulunmamaktadır.</p>
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {activeHandRaises.map((handRaise) => (
+                <div
+                  key={handRaise.id}
+                  className="flex items-center justify-between p-4 bg-yellow-50 border border-yellow-200 rounded-lg"
+                >
+                  <div className="flex items-center space-x-3">
+                    <FaHandPaper className="text-yellow-600" size={20} />
+                    <div>
+                      <h3 className="font-semibold text-gray-800">{handRaise.studentName}</h3>
+                      <p className="text-sm text-gray-600">
+                        {formatTime(handRaise.timestamp)} • {getTimeSince(handRaise.timestamp)}
+                      </p>
+                    </div>
+                  </div>
+
+                  {isTeacher && (
+                    <div className="flex space-x-2">
+                      <button
+                        onClick={() => onApprove?.(handRaise.id)}
+                        className="flex items-center space-x-1 px-3 py-1 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-sm"
+                      >
+                        <FaCheck size={14} />
+                        <span>Onayla</span>
+                      </button>
+                      <button
+                        onClick={() => onDismiss?.(handRaise.id)}
+                        className="flex items-center space-x-1 px-3 py-1 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm"
+                      >
+                        <FaTimes size={14} />
+                        <span>Reddet</span>
+                      </button>
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/ui/src/components/classroom/Panels/ScreenSharePanel.tsx b/ui/src/components/classroom/Panels/ScreenSharePanel.tsx
new file mode 100644
index 00000000..b3718576
--- /dev/null
+++ b/ui/src/components/classroom/Panels/ScreenSharePanel.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import { FaDesktop, FaStop, FaPlay } from 'react-icons/fa';
+
+interface ScreenSharePanelProps {
+  isSharing: boolean;
+  onStartShare: () => void;
+  onStopShare: () => void;
+  sharedScreen?: MediaStream;
+  sharerName?: string;
+}
+
+export const ScreenSharePanel: React.FC<ScreenSharePanelProps> = ({
+  isSharing,
+  onStartShare,
+  onStopShare,
+  sharedScreen,
+  sharerName,
+}) => {
+  return (
+    <div className="bg-white rounded-lg shadow-md p-4 mb-4">
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center space-x-2">
+          <FaDesktop className="text-blue-600" size={20} />
+          <h3 className="font-semibold text-gray-800">Ekran Paylaşımı</h3>
+        </div>
+        
+        {isSharing ? (
+          <button
+            onClick={onStopShare}
+            className="flex items-center space-x-2 px-3 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
+          >
+            <FaStop size={16} />
+            <span>Paylaşımı Durdur</span>
+          </button>
+        ) : (
+          <button
+            onClick={onStartShare}
+            className="flex items-center space-x-2 px-3 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+          >
+            <FaPlay size={16} />
+            <span>Ekranı Paylaş</span>
+          </button>
+        )}
+      </div>
+
+      {sharedScreen && (
+        <div className="relative bg-gray-900 rounded-lg overflow-hidden aspect-video">
+          <video
+            autoPlay
+            playsInline
+            muted
+            className="w-full h-full object-contain"
+            ref={(video) => {
+              if (video && sharedScreen) {
+                video.srcObject = sharedScreen;
+              }
+            }}
+          />
+          
+          {sharerName && (
+            <div className="absolute bottom-2 left-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded text-sm">
+              {sharerName} ekranını paylaşıyor
+            </div>
+          )}
+        </div>
+      )}
+
+      {isSharing && !sharedScreen && (
+        <div className="bg-gray-100 rounded-lg p-8 text-center">
+          <FaDesktop size={48} className="mx-auto text-gray-400 mb-4" />
+          <p className="text-gray-600">Ekran paylaşımı başlatılıyor...</p>
+        </div>
+      )}
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/ui/src/components/classroom/ParticipantGrid.tsx b/ui/src/components/classroom/ParticipantGrid.tsx
new file mode 100644
index 00000000..9634d9e6
--- /dev/null
+++ b/ui/src/components/classroom/ParticipantGrid.tsx
@@ -0,0 +1,297 @@
+import React from 'react'
+import { FaMicrophoneSlash, FaExpand, FaUserTimes } from 'react-icons/fa'
+import { VideoPlayer } from './VideoPlayer'
+import { ClassParticipantDto, VideoLayoutDto } from '@/proxy/classroom/models'
+
+interface ParticipantGridProps {
+  participants: ClassParticipantDto[]
+  localStream?: MediaStream
+  currentUserId: string
+  currentUserName: string
+  isTeacher: boolean
+  isAudioEnabled: boolean
+  isVideoEnabled: boolean
+  onToggleAudio: () => void
+  onToggleVideo: () => void
+  onLeaveCall: () => void
+  onMuteParticipant?: (participantId: string, isMuted: boolean) => void
+  layout: VideoLayoutDto
+  focusedParticipant?: string
+  onParticipantFocus?: (participantId: string | undefined) => void
+  onKickParticipant?: (participantId: string) => void
+  hasSidePanel?: boolean
+}
+
+export const ParticipantGrid: React.FC<ParticipantGridProps> = ({
+  participants,
+  localStream,
+  currentUserId,
+  currentUserName,
+  isTeacher,
+  isAudioEnabled,
+  isVideoEnabled,
+  onToggleAudio,
+  onToggleVideo,
+  onLeaveCall,
+  onMuteParticipant,
+  layout,
+  focusedParticipant,
+  onParticipantFocus,
+  onKickParticipant,
+  hasSidePanel = false,
+}) => {
+  // Only show current user's video once
+  const currentUserParticipant = {
+    id: currentUserId,
+    name: currentUserName,
+    isTeacher,
+    stream: localStream,
+  }
+
+  // Eğer hiç katılımcı yoksa ve localStream de yoksa hiçbir şey render etme
+  if (!localStream && (!participants || participants.length === 0)) {
+    return null
+  }
+
+  const allParticipants = [currentUserParticipant, ...participants]
+
+  // Ortak ana video kutusu container class'ı
+  const mainVideoContainerClass = 'w-full h-full flex flex-col justify-center'
+
+  const renderGridLayout = () => {
+    const getGridClass = (participantCount: number) => {
+      if (participantCount === 1) return 'grid-cols-1'
+      if (participantCount <= 2) return 'grid-cols-1 sm:grid-cols-2'
+      if (participantCount <= 4) return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-2'
+      if (participantCount <= 6) return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3'
+      if (participantCount <= 9) return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3'
+      return 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4'
+    }
+
+    const getGridRows = (participantCount: number) => {
+      if (participantCount === 1) return 'grid-rows-1'
+      if (participantCount <= 2) return 'grid-rows-1 sm:grid-rows-1'
+      if (participantCount <= 4) return 'grid-rows-2 lg:grid-rows-2'
+      if (participantCount <= 6) return 'grid-rows-3 sm:grid-rows-2'
+      if (participantCount <= 9) return 'grid-rows-3'
+      return 'grid-rows-4 sm:grid-rows-3'
+    }
+
+    const getPadding = (participantCount: number) => {
+      if (participantCount === 1) return ''
+      if (participantCount <= 4) return 'p-2 sm:p-4'
+      return 'p-1 sm:p-2'
+    }
+
+    const getGap = (participantCount: number) => {
+      if (participantCount === 1) return 'gap-0'
+      if (participantCount <= 4) return 'gap-2 sm:gap-3'
+      return 'gap-1 sm:gap-2'
+    }
+
+    // Mobilde: En üstte öğretmen, altında katılımcılar 2'li grid ve dikey scroll
+    const mainParticipant = allParticipants[0]
+    const otherParticipants = allParticipants.slice(1)
+    return (
+      <>
+        {/* Mobil özel layout */}
+        <div className="sm:hidden w-full h-full flex flex-col items-center overflow-hidden p-2">
+          {/* Ana katılımcı */}
+          <div className="w-full max-w-md mx-auto flex-none flex items-center justify-center mb-2">
+            <div className="w-full aspect-video max-h-[40vh] rounded-xl overflow-hidden flex bg-white/10 shadow-md border border-white/10">
+              {renderParticipant(mainParticipant, true)}
+            </div>
+          </div>
+          {/* Diğer katılımcılar 2'li grid ve dikey scroll */}
+          {otherParticipants.length > 0 && (
+            <div
+              className="w-full max-w-md mx-auto flex-1 overflow-y-auto grid grid-cols-1 gap-2 pb-2 min-h-0"
+              style={{ maxHeight: '55vh' }}
+            >
+              {Array.from({ length: Math.ceil(otherParticipants.length / 2) }).map((_, rowIdx) => (
+                <div key={rowIdx} className="flex gap-2">
+                  {otherParticipants.slice(rowIdx * 2, rowIdx * 2 + 2).map((participant) => (
+                    <div
+                      key={participant.id}
+                      className="flex-1 aspect-video rounded-lg overflow-hidden flex bg-white/10 shadow border border-white/10"
+                    >
+                      {renderParticipant(participant, false, true)}
+                    </div>
+                  ))}
+                  {otherParticipants.length % 2 === 1 &&
+                  rowIdx === Math.floor(otherParticipants.length / 2) ? (
+                    <div className="flex-1" />
+                  ) : null}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+        {/* Masaüstü ve tablet için eski grid layout */}
+        <div className="hidden sm:flex h-full items-center justify-center overflow-hidden">
+          <div
+            className={`w-full h-full flex flex-col justify-center ${getPadding(allParticipants.length)}`}
+          >
+            <div
+              className={`h-full grid ${getGridClass(allParticipants.length)} ${getGridRows(allParticipants.length)} ${getGap(allParticipants.length)} place-items-stretch`}
+            >
+              {allParticipants.map((participant) => (
+                <div
+                  key={participant.id}
+                  className="w-full h-full max-h-full flex items-stretch justify-stretch min-h-0"
+                >
+                  <div className="w-full h-full rounded-lg sm:rounded-xl overflow-hidden flex">
+                    {renderParticipant(participant, false)}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </>
+    )
+  }
+
+  const renderSidebarLayout = () => {
+    const mainParticipant = focusedParticipant
+      ? allParticipants.find((p) => p.id === focusedParticipant) || allParticipants[0]
+      : allParticipants[0]
+    const otherParticipants = allParticipants.filter((p) => p.id !== mainParticipant.id)
+
+    const sidebarWidth = hasSidePanel
+      ? 'w-20 sm:w-24 md:w-32 lg:w-40'
+      : 'w-24 sm:w-32 md:w-40 lg:w-48'
+
+    // Eğer hiç katılımcı yoksa, video player öğretmen odaklı gibi ortalanır ve geniş olur
+    return (
+      <div className="h-screen flex items-center justify-center p-0">
+        <div className={mainVideoContainerClass + ' h-full'}>
+          <div className="flex h-full">
+            <div className={`flex-1 min-w-0 flex items-center justify-center`}>
+              <div className="w-full h-full flex items-center justify-center">
+                <div className="w-full h-full rounded-xl overflow-hidden transition-all duration-200">
+                  {renderParticipant(mainParticipant, true)}
+                </div>
+              </div>
+            </div>
+            {otherParticipants.length > 0 && (
+              <div className={`${sidebarWidth} p-2 overflow-y-auto rounded-l-lg h-full`}>
+                <div className="flex flex-col gap-2 h-full min-w-0">
+                  {otherParticipants.map((participant) => (
+                    <div
+                      key={participant.id}
+                      className="rounded-lg border border-blue-300/40 shadow shadow-blue-200/20 backdrop-blur-sm transition-all duration-200"
+                    >
+                      {renderParticipant(participant, false, true)}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  const renderTeacherFocusLayout = () => {
+    // Sadece öğretmen gösterilecek, katılımcılar asla gösterilmeyecek
+    const teacher = allParticipants.find((p) => p.isTeacher) || allParticipants[0]
+    return (
+      <div className="h-full flex items-center justify-center overflow-hidden">
+        <div className="w-full h-full flex flex-col justify-center ">
+          <div className="h-full w-full max-h-full flex items-center justify-center">
+            <div className="w-full h-full rounded-lg sm:rounded-xl overflow-hidden">
+              {renderParticipant(teacher, true)}
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  const renderParticipant = (
+    participant: ClassParticipantDto,
+    isMain: boolean = false,
+    isSmall: boolean = false,
+  ) => (
+    <div
+      key={participant.id}
+      className={`relative w-full h-full ${isMain ? '' : isSmall ? 'aspect-video' : ''} ${!isMain && onParticipantFocus ? 'cursor-pointer' : ''}`}
+      onClick={() => !isMain && onParticipantFocus?.(participant.id)}
+      style={{ minHeight: 0, minWidth: 0 }}
+    >
+      <div className="absolute inset-0 w-full h-full">
+        <VideoPlayer
+          stream={participant.stream}
+          isLocal={participant.id === currentUserId}
+          userName={participant.name}
+          isAudioEnabled={
+            participant.id === currentUserId ? isAudioEnabled : !participant.isAudioMuted
+          }
+          isVideoEnabled={
+            participant.id === currentUserId ? isVideoEnabled : !participant.isVideoMuted
+          }
+          onToggleAudio={participant.id === currentUserId ? onToggleAudio : undefined}
+          onToggleVideo={participant.id === currentUserId ? onToggleVideo : undefined}
+          onLeaveCall={participant.id === currentUserId ? onLeaveCall : undefined}
+        />
+      </div>
+      {/* Teacher controls for students */}
+      {isTeacher && participant.id !== currentUserId && (
+        <div className="absolute top-2 left-2 flex space-x-1 z-10">
+          <button
+            onClick={(e) => {
+              e.stopPropagation()
+              onMuteParticipant?.(participant.id, !participant.isAudioMuted)
+            }}
+            className={`p-1 rounded-full text-white text-xs ${
+              participant.isAudioMuted ? 'bg-red-600' : 'bg-gray-600 hover:bg-gray-700'
+            } transition-colors`}
+            title={participant.isAudioMuted ? 'Sesi Aç' : 'Sesi Kapat'}
+          >
+            <FaMicrophoneSlash size={12} />
+          </button>
+          <button
+            onClick={(e) => {
+              e.stopPropagation()
+              onKickParticipant?.(participant.id)
+            }}
+            className="p-1 rounded-full bg-red-600 hover:bg-red-700 text-white text-xs transition-colors"
+            title="Sınıftan Çıkar"
+          >
+            <FaUserTimes size={12} />
+          </button>
+        </div>
+      )}
+      {/* Expand button for non-main participants */}
+      {!isMain && onParticipantFocus && (
+        <div className="absolute top-2 right-2 z-10">
+          <button
+            onClick={(e) => {
+              e.stopPropagation()
+              onParticipantFocus(participant.id)
+            }}
+            className="p-1 bg-black bg-opacity-50 text-white rounded-full hover:bg-opacity-70 transition-all"
+            title="Büyüt"
+          >
+            <FaExpand size={12} />
+          </button>
+        </div>
+      )}
+    </div>
+  )
+
+  const renderLayout = () => {
+    switch (layout.type) {
+      case 'sidebar':
+        return renderSidebarLayout()
+      case 'teacher-focus':
+        return renderTeacherFocusLayout()
+      default:
+        return renderGridLayout()
+    }
+  }
+
+  return <div className="h-full min-h-0 flex flex-col">{renderLayout()}</div>
+}
diff --git a/ui/src/components/classroom/RoleSelector.tsx b/ui/src/components/classroom/RoleSelector.tsx
new file mode 100644
index 00000000..c41da1dd
--- /dev/null
+++ b/ui/src/components/classroom/RoleSelector.tsx
@@ -0,0 +1,65 @@
+import React from 'react'
+import { motion } from 'framer-motion'
+import { FaGraduationCap, FaUserCheck, FaEye } from 'react-icons/fa'
+
+interface RoleSelectorProps {
+  onRoleSelect: (role: 'teacher' | 'student' | 'observer') => void
+}
+
+export const RoleSelector: React.FC<RoleSelectorProps> = ({ onRoleSelect }) => {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4">
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="text-center w-full max-w-4xl"
+      >
+        <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-800 mb-4">
+          Sanal Sınıf Sistemine Hoş Geldiniz
+        </h1>
+        <p className="text-lg sm:text-xl text-gray-600 mb-8 sm:mb-12">Lütfen rolünüzü seçin</p>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
+          <motion.button
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            onClick={() => onRoleSelect('teacher')}
+            className="bg-white rounded-lg shadow-lg p-6 sm:p-8 hover:shadow-xl transition-all duration-300 border-2 border-transparent hover:border-blue-500"
+          >
+            <FaGraduationCap size={48} className="mx-auto text-blue-600 mb-4 sm:mb-4" />
+            <h2 className="text-xl sm:text-2xl font-bold text-gray-800 mb-2">Öğretmen</h2>
+            <p className="text-gray-600 text-sm sm:text-base">
+              Ders başlatın, öğrencilerle iletişim kurun ve katılım raporlarını görün
+            </p>
+          </motion.button>
+
+          <motion.button
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            onClick={() => onRoleSelect('student')}
+            className="bg-white rounded-lg shadow-lg p-6 sm:p-8 hover:shadow-xl transition-all duration-300 border-2 border-transparent hover:border-green-500"
+          >
+            <FaUserCheck size={48} className="mx-auto text-green-600 mb-4 sm:mb-4" />
+            <h2 className="text-xl sm:text-2xl font-bold text-gray-800 mb-2">Öğrenci</h2>
+            <p className="text-gray-600 text-sm sm:text-base">
+              Aktif derslere katılın, öğretmeniniz ve diğer öğrencilerle etkileşim kurun
+            </p>
+          </motion.button>
+
+          <motion.button
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            onClick={() => onRoleSelect('observer')}
+            className="bg-white rounded-lg shadow-lg p-6 sm:p-8 hover:shadow-xl transition-all duration-300 border-2 border-transparent hover:border-purple-500 md:col-span-2 lg:col-span-1"
+          >
+            <FaEye size={48} className="mx-auto text-purple-600 mb-4 sm:mb-4" />
+            <h2 className="text-xl sm:text-2xl font-bold text-gray-800 mb-2">Gözlemci</h2>
+            <p className="text-gray-600 text-sm sm:text-base">
+              Sınıfı gözlemleyin, eğitim sürecini takip edin (ses/video paylaşımı yok)
+            </p>
+          </motion.button>
+        </div>
+      </motion.div>
+    </div>
+  )
+}
diff --git a/ui/src/components/classroom/Room.tsx b/ui/src/components/classroom/Room.tsx
new file mode 100644
index 00000000..72837501
--- /dev/null
+++ b/ui/src/components/classroom/Room.tsx
@@ -0,0 +1,1998 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { motion } from 'framer-motion'
+import {
+  FaUsers,
+  FaComments,
+  FaUserPlus,
+  FaTh,
+  FaExpand,
+  FaHandPaper,
+  FaVolumeMute,
+  FaVolumeUp,
+  FaFile,
+  FaDesktop,
+  FaMicrophone,
+  FaMicrophoneSlash,
+  FaVideo,
+  FaVideoSlash,
+  FaPhone,
+  FaTimes,
+  FaCompress,
+  FaUserFriends,
+  FaClipboardList,
+  FaLayerGroup,
+  FaWrench,
+  FaCheck,
+  FaUserTimes,
+  FaDownload,
+  FaTrash,
+  FaEye,
+  FaFilePdf,
+  FaFileWord,
+  FaFileImage,
+  FaFileAlt,
+  FaPaperPlane,
+  FaBullhorn,
+  FaUser,
+  FaBars,
+} from 'react-icons/fa'
+import { ParticipantGrid } from './ParticipantGrid'
+import { KickParticipantModal } from './KickParticipantModal'
+import { ScreenSharePanel } from './Panels/ScreenSharePanel'
+import { SignalRService } from '@/services/classroom/signalr'
+import { WebRTCService } from '@/services/classroom/webrtc'
+import {
+  ClassAttendanceDto,
+  ClassChatDto,
+  ClassDocumentDto,
+  ClassParticipantDto,
+  ClassroomDto,
+  ClassroomSettingsDto,
+  HandRaiseDto,
+  VideoLayoutDto,
+} from '@/proxy/classroom/models'
+import { useStoreState } from '@/store/store'
+
+interface RoomProps {
+  classSession: ClassroomDto
+  onLeaveClass: () => void
+}
+
+type SidePanelType =
+  | 'chat'
+  | 'participants'
+  | 'documents'
+  | 'handraises'
+  | 'layout'
+  | 'settings'
+  | null
+
+export const Room: React.FC<RoomProps> = ({ classSession, onLeaveClass }) => {
+  const { user } = useStoreState((state) => state.auth)
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+  const [participants, setParticipants] = useState<ClassParticipantDto[]>([])
+  const [localStream, setLocalStream] = useState<MediaStream>()
+  const [isAudioEnabled, setIsAudioEnabled] = useState(true)
+  const [isVideoEnabled, setIsVideoEnabled] = useState(true)
+  const [attendanceRecords, setAttendanceRecords] = useState<ClassAttendanceDto[]>([])
+  const [chatMessages, setChatMessages] = useState<ClassChatDto[]>([])
+  const [currentLayout, setCurrentLayout] = useState<VideoLayoutDto>({
+    id: 'grid',
+    name: 'Izgara Görünümü',
+    type: 'grid',
+    description: 'Tüm katılımcılar eşit boyutta görünür',
+  })
+  const [focusedParticipant, setFocusedParticipant] = useState<string>()
+  const [handRaises, setHandRaises] = useState<HandRaiseDto[]>([])
+  const [hasRaisedHand, setHasRaisedHand] = useState(false)
+  const [isAllMuted, setIsAllMuted] = useState(false)
+  const [kickingParticipant, setKickingParticipant] = useState<{ id: string; name: string } | null>(
+    null,
+  )
+  const [documents, setDocuments] = useState<ClassDocumentDto[]>([])
+  const [isScreenSharing, setIsScreenSharing] = useState(false)
+  const [screenStream, setScreenStream] = useState<MediaStream>()
+  const [screenSharer, setScreenSharer] = useState<string>()
+  const [isFullscreen, setIsFullscreen] = useState(false)
+  const [activeSidePanel, setActiveSidePanel] = useState<SidePanelType>(null)
+  const [newMessage, setNewMessage] = useState('')
+  const [messageMode, setMessageMode] = useState<'public' | 'private' | 'announcement'>('public')
+  const [selectedRecipient, setSelectedRecipient] = useState<{ id: string; name: string } | null>(
+    null,
+  )
+  const [dragOver, setDragOver] = useState(false)
+  const [participantsActiveTab, setParticipantsActiveTab] = useState<'participants' | 'attendance'>(
+    'participants',
+  )
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const messagesEndRef = useRef<HTMLDivElement>(null)
+  const [classSettings, setClassSettings] = useState<ClassroomSettingsDto>({
+    allowHandRaise: true,
+    defaultMicrophoneState: 'muted',
+    defaultCameraState: 'on',
+    defaultLayout: 'grid',
+    allowStudentScreenShare: false,
+    allowStudentChat: true,
+    allowPrivateMessages: true,
+    autoMuteNewParticipants: true,
+    recordSession: false,
+    waitingRoomEnabled: false,
+  })
+
+  const signalRServiceRef = useRef<SignalRService>()
+  const webRTCServiceRef = useRef<WebRTCService>()
+
+  const layouts: VideoLayoutDto[] = [
+    {
+      id: 'grid',
+      name: 'Izgara Görünümü',
+      type: 'grid',
+      description: 'Tüm katılımcılar eşit boyutta görünür',
+    },
+    {
+      id: 'sidebar',
+      name: 'Sunum Modu',
+      type: 'sidebar',
+      description: 'Ana konuşmacı büyük, diğerleri yan panelde',
+    },
+    {
+      id: 'teacher-focus',
+      name: 'Öğretmen Odaklı',
+      type: 'teacher-focus',
+      description: 'Öğretmen tam ekranda görünür, öğrenciler küçük panelde',
+    },
+  ]
+
+  useEffect(() => {
+    initializeServices()
+    return () => {
+      cleanup()
+    }
+  }, [])
+
+  // Apply class settings
+  useEffect(() => {
+    if (classSession.settings) {
+      setClassSettings(classSession.settings)
+      const selectedLayout =
+        layouts.find((l) => l.id === classSession.settings!.defaultLayout) || layouts[0]
+      setCurrentLayout(selectedLayout)
+
+      // Apply default audio/video states for new participants
+      if (user.role === 'student') {
+        setIsAudioEnabled(classSession.settings.defaultMicrophoneState === 'unmuted')
+        setIsVideoEnabled(classSession.settings.defaultCameraState === 'on')
+      }
+    }
+  }, [classSession.settings, user.role])
+
+  useEffect(() => {
+    scrollToBottom()
+  }, [chatMessages])
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }
+
+  const initializeServices = async () => {
+    try {
+      // Initialize SignalR
+      signalRServiceRef.current = new SignalRService()
+      await signalRServiceRef.current.start()
+
+      // Initialize WebRTC
+      webRTCServiceRef.current = new WebRTCService()
+      const stream = await webRTCServiceRef.current.initializeLocalStream()
+      setLocalStream(stream)
+
+      // Setup WebRTC remote stream handler
+      webRTCServiceRef.current.onRemoteStreamReceived((userId, stream) => {
+        console.log('Received remote stream from:', userId)
+        setParticipants((prev) => prev.map((p) => (p.id === userId ? { ...p, stream } : p)))
+      })
+
+      // Setup SignalR event handlers
+      signalRServiceRef.current.setParticipantJoinHandler((userId, name) => {
+        console.log(`Participant joined: ${name}`)
+
+        // Create WebRTC connection for new participant
+        if (webRTCServiceRef.current) {
+          webRTCServiceRef.current.createPeerConnection(userId)
+        }
+
+        setParticipants((prev) => {
+          const existing = prev.find((p) => p.id === userId)
+          if (existing) return prev
+          return [
+            ...prev,
+            {
+              id: userId,
+              name,
+              isTeacher: false,
+              isAudioMuted: classSettings.autoMuteNewParticipants,
+              isVideoMuted: classSettings.defaultCameraState === 'off',
+            },
+          ]
+        })
+      })
+
+      signalRServiceRef.current.setParticipantLeaveHandler((userId) => {
+        console.log(`Participant left: ${userId}`)
+        setParticipants((prev) => prev.filter((p) => p.id !== userId))
+        webRTCServiceRef.current?.closePeerConnection(userId)
+      })
+
+      signalRServiceRef.current.setAttendanceUpdatedHandler((record) => {
+        setAttendanceRecords((prev) => {
+          const existing = prev.find((r) => r.id === record.id)
+          if (existing) {
+            return prev.map((r) => (r.id === record.id ? record : r))
+          }
+          return [...prev, record]
+        })
+      })
+
+      signalRServiceRef.current.setChatMessageReceivedHandler((message) => {
+        setChatMessages((prev) => [...prev, message])
+      })
+
+      signalRServiceRef.current.setParticipantMutedHandler((userId, isMuted) => {
+        setParticipants((prev) =>
+          prev.map((p) => (p.id === userId ? { ...p, isAudioMuted: isMuted } : p)),
+        )
+      })
+
+      // Hand raise events
+      signalRServiceRef.current.setHandRaiseReceivedHandler?.((handRaise) => {
+        setHandRaises((prev) => [...prev, handRaise])
+      })
+
+      signalRServiceRef.current.setHandRaiseDismissedHandler?.((handRaiseId) => {
+        setHandRaises((prev) =>
+          prev.map((hr) => (hr.id === handRaiseId ? { ...hr, isActive: false } : hr)),
+        )
+      })
+
+      // Join the class
+      await signalRServiceRef.current.joinClass(classSession.id, user.id, user.name)
+    } catch (error) {
+      console.error('Failed to initialize services:', error)
+    }
+  }
+
+  const cleanup = async () => {
+    if (signalRServiceRef.current) {
+      await signalRServiceRef.current.leaveClass(classSession.id, user.id)
+      await signalRServiceRef.current.disconnect()
+    }
+
+    webRTCServiceRef.current?.closeAllConnections()
+  }
+
+  const handleToggleAudio = () => {
+    setIsAudioEnabled(!isAudioEnabled)
+    webRTCServiceRef.current?.toggleAudio(!isAudioEnabled)
+  }
+
+  const handleToggleVideo = () => {
+    setIsVideoEnabled(!isVideoEnabled)
+    webRTCServiceRef.current?.toggleVideo(!isVideoEnabled)
+  }
+
+  const handleLeaveCall = async () => {
+    await cleanup()
+    onLeaveClass()
+  }
+
+  const handleSendMessage = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (newMessage.trim() && signalRServiceRef.current) {
+      if (messageMode === 'private' && selectedRecipient) {
+        await signalRServiceRef.current.sendPrivateMessage(
+          classSession.id,
+          user.id,
+          user.name,
+          newMessage.trim(),
+          selectedRecipient.id,
+          selectedRecipient.name,
+          user.role === 'teacher',
+        )
+      } else if (messageMode === 'announcement' && user.role === 'teacher') {
+        await signalRServiceRef.current.sendAnnouncement(
+          classSession.id,
+          user.id,
+          user.name,
+          newMessage.trim(),
+        )
+      } else {
+        await signalRServiceRef.current.sendChatMessage(
+          classSession.id,
+          user.id,
+          user.name,
+          newMessage.trim(),
+          user.role === 'teacher',
+        )
+      }
+      setNewMessage('')
+    }
+  }
+
+  const handleMuteParticipant = async (participantId: string, isMuted: boolean) => {
+    if (signalRServiceRef.current && user.role === 'teacher') {
+      await signalRServiceRef.current.muteParticipant(classSession.id, participantId, isMuted)
+    }
+  }
+
+  const handleMuteAll = async () => {
+    if (signalRServiceRef.current && user.role === 'teacher') {
+      const newMuteState = !isAllMuted
+      setIsAllMuted(newMuteState)
+
+      // Mute all participants except teacher
+      for (const participant of participants) {
+        if (!participant.isTeacher) {
+          await signalRServiceRef.current.muteParticipant(
+            classSession.id,
+            participant.id,
+            newMuteState,
+          )
+        }
+      }
+    }
+  }
+
+  const handleRaiseHand = async () => {
+    if (
+      signalRServiceRef.current &&
+      user.role === 'student' &&
+      !hasRaisedHand &&
+      classSettings.allowHandRaise
+    ) {
+      await signalRServiceRef.current.raiseHand(classSession.id, user.id, user.name)
+      setHasRaisedHand(true)
+    }
+  }
+
+  const handleApproveHandRaise = async (handRaiseId: string) => {
+    if (signalRServiceRef.current && user.role === 'teacher') {
+      await signalRServiceRef.current.approveHandRaise(classSession.id, handRaiseId)
+      setHandRaises((prev) =>
+        prev.map((hr) => (hr.id === handRaiseId ? { ...hr, isActive: false } : hr)),
+      )
+    }
+  }
+
+  const handleDismissHandRaise = async (handRaiseId: string) => {
+    if (signalRServiceRef.current && user.role === 'teacher') {
+      await signalRServiceRef.current.dismissHandRaise(classSession.id, handRaiseId)
+      setHandRaises((prev) =>
+        prev.map((hr) => (hr.id === handRaiseId ? { ...hr, isActive: false } : hr)),
+      )
+    }
+  }
+
+  const handleKickParticipant = async (participantId: string) => {
+    if (signalRServiceRef.current && user.role === 'teacher') {
+      await signalRServiceRef.current.kickParticipant(classSession.id, participantId)
+      setParticipants((prev) => prev.filter((p) => p.id !== participantId))
+      // Update attendance record for kicked participant
+      setAttendanceRecords((prev) =>
+        prev.map((r) => {
+          if (r.studentId === participantId && !r.leaveTime) {
+            const leaveTime = new Date().toISOString()
+            const join = new Date(r.joinTime)
+            const leave = new Date(leaveTime)
+            const totalDurationMinutes = Math.max(
+              1,
+              Math.round((leave.getTime() - join.getTime()) / 60000),
+            )
+            return { ...r, leaveTime, totalDurationMinutes }
+          }
+          return r
+        }),
+      )
+    }
+  }
+
+  const handleUploadDocument = async (file: File) => {
+    // In a real app, this would upload to a server
+    const newDoc: ClassDocumentDto = {
+      id: `doc-${Date.now()}`,
+      name: file.name,
+      url: URL.createObjectURL(file),
+      type: file.type,
+      size: file.size,
+      uploadedAt: new Date().toISOString(),
+      uploadedBy: user.name,
+    }
+
+    setDocuments((prev) => [...prev, newDoc])
+  }
+
+  const handleDeleteDocument = (documentId: string) => {
+    setDocuments((prev) => prev.filter((d) => d.id !== documentId))
+  }
+
+  const handleViewDocument = (document: ClassDocumentDto) => {
+    window.open(document.url, '_blank')
+  }
+
+  const handleStartScreenShare = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getDisplayMedia({
+        video: true,
+        audio: true,
+      })
+
+      setScreenStream(stream)
+      setIsScreenSharing(true)
+      setScreenSharer(user.name)
+
+      // Handle stream end
+      stream.getVideoTracks()[0].onended = () => {
+        handleStopScreenShare()
+      }
+    } catch (error) {
+      console.error('Error starting screen share:', error)
+    }
+  }
+
+  const handleStopScreenShare = () => {
+    if (screenStream) {
+      screenStream.getTracks().forEach((track) => track.stop())
+      setScreenStream(undefined)
+    }
+    setIsScreenSharing(false)
+    setScreenSharer(undefined)
+  }
+
+  const handleLayoutChange = (layout: VideoLayoutDto) => {
+    setCurrentLayout(layout)
+    if (layout.type === 'grid') {
+      setFocusedParticipant(undefined)
+    }
+  }
+
+  const handleParticipantFocus = (participantId: string | undefined) => {
+    setFocusedParticipant(participantId)
+  }
+
+  const toggleFullscreen = () => {
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen()
+      setIsFullscreen(true)
+    } else {
+      document.exitFullscreen()
+      setIsFullscreen(false)
+    }
+  }
+
+  const toggleSidePanel = (panelType: SidePanelType) => {
+    setActiveSidePanel(activeSidePanel === panelType ? null : panelType)
+  }
+
+  // Demo: Simulate student joining
+  const simulateStudentJoin = () => {
+    const studentNames = ['Ahmet Yılmaz', 'Fatma Demir', 'Mehmet Kaya', 'Ayşe Özkan', 'Ali Çelik']
+    const availableNames = studentNames.filter((name) => !participants.some((p) => p.name === name))
+
+    if (availableNames.length === 0) {
+      alert('Tüm demo öğrenciler zaten sınıfta!')
+      return
+    }
+
+    const randomName = availableNames[Math.floor(Math.random() * availableNames.length)]
+    const studentId = `student-${Date.now()}`
+
+    setParticipants((prev) => {
+      return [
+        ...prev,
+        {
+          id: studentId,
+          name: randomName,
+          isTeacher: false,
+          isAudioMuted: classSettings.autoMuteNewParticipants,
+          isVideoMuted: classSettings.defaultCameraState === 'off',
+        },
+      ]
+    })
+
+    // Add attendance record
+    setAttendanceRecords((prev) => {
+      // Check if student already has an active attendance record
+      const existingRecord = prev.find((r) => r.studentId === studentId && !r.leaveTime)
+      if (existingRecord) return prev
+
+      return [
+        ...prev,
+        {
+          id: `attendance-${Date.now()}`,
+          sessionId: classSession.id,
+          studentId,
+          studentName: randomName,
+          joinTime: new Date().toISOString(),
+          totalDurationMinutes: 0,
+        },
+      ]
+    })
+  }
+
+  const handleSettingsChange = (newSettings: Partial<ClassroomSettingsDto>) => {
+    setClassSettings((prev) => ({ ...prev, ...newSettings }))
+  }
+
+  const formatTime = (timestamp: string) => {
+    return new Date(timestamp).toLocaleTimeString('tr-TR', {
+      hour: '2-digit',
+      minute: '2-digit',
+    })
+  }
+
+  const formatDuration = (minutes: number) => {
+    const hours = Math.floor(minutes / 60)
+    const mins = minutes % 60
+    if (hours > 0) {
+      return `${hours}h ${mins}m`
+    }
+    return `${mins}m`
+  }
+
+  const getTimeSince = (timestamp: string) => {
+    const now = new Date()
+    const time = new Date(timestamp)
+    const diffMinutes = Math.floor((now.getTime() - time.getTime()) / 60000)
+
+    if (diffMinutes < 1) return 'Az önce'
+    if (diffMinutes < 60) return `${diffMinutes} dakika önce`
+    const hours = Math.floor(diffMinutes / 60)
+    return `${hours} saat önce`
+  }
+
+  const getFileIcon = (type: string) => {
+    if (type.includes('pdf')) return <FaFilePdf className="text-red-500" />
+    if (
+      type.includes('word') ||
+      type.includes('doc') ||
+      type.includes('presentation') ||
+      type.includes('powerpoint')
+    )
+      return <FaFileWord className="text-blue-500" />
+    if (type.includes('image')) return <FaFileImage className="text-green-500" />
+    return <FaFileAlt className="text-gray-500" />
+  }
+
+  const formatFileSize = (bytes: number) => {
+    if (bytes === 0) return '0 Bytes'
+    const k = 1024
+    const sizes = ['Bytes', 'KB', 'MB', 'GB']
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+  }
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault()
+    setDragOver(false)
+
+    if (user.role !== 'teacher' || !handleUploadDocument) return
+
+    const files = Array.from(e.dataTransfer.files)
+    files.forEach((file) => handleUploadDocument(file))
+  }
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (user.role !== 'teacher' || !handleUploadDocument) return
+
+    const files = Array.from(e.target.files || [])
+    files.forEach((file) => handleUploadDocument(file))
+
+    // Reset input
+    if (fileInputRef.current) {
+      fileInputRef.current.value = ''
+    }
+  }
+
+  const getLayoutIcon = (type: string) => {
+    switch (type) {
+      case 'grid':
+        return <FaTh size={24} />
+      case 'speaker':
+        return <FaExpand size={24} />
+      case 'presentation':
+        return <FaDesktop size={24} />
+      case 'sidebar':
+        return <FaUsers size={24} />
+      default:
+        return <FaTh size={24} />
+    }
+  }
+
+  const renderSidePanel = () => {
+    if (!activeSidePanel) return null
+
+    const panelContent = () => {
+      switch (activeSidePanel) {
+        case 'chat': {
+          const availableRecipients = participants.filter((p) => p.id !== user.id)
+          return (
+            <div className="h-full bg-white flex flex-col text-gray-900">
+              <div className="p-3 sm:p-4 border-b border-gray-200">
+                <div className="flex items-center justify-between">
+                  <h3 className="text-base sm:text-lg font-semibold text-gray-900">
+                    Sınıf Sohbeti
+                  </h3>
+                  <button
+                    onClick={() => setActiveSidePanel(null)}
+                    className="p-1 hover:bg-gray-100 rounded lg:hidden"
+                  >
+                    <FaTimes className="text-gray-500" size={16} />
+                  </button>
+                </div>
+              </div>
+
+              {/* Message Mode Selector */}
+              <div className="p-3 border-b border-gray-200 bg-gray-50">
+                <div className="flex space-x-2 mb-2">
+                  <button
+                    onClick={() => {
+                      setMessageMode('public')
+                      setSelectedRecipient(null)
+                    }}
+                    className={`flex items-center space-x-1 px-3 py-1 rounded-full text-xs ${
+                      messageMode === 'public'
+                        ? 'bg-blue-600 text-white'
+                        : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+                    }`}
+                  >
+                    <FaUsers size={12} />
+                    <span>Herkese</span>
+                  </button>
+
+                  <button
+                    onClick={() => setMessageMode('private')}
+                    className={`flex items-center space-x-1 px-3 py-1 rounded-full text-xs ${
+                      messageMode === 'private'
+                        ? 'bg-green-600 text-white'
+                        : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+                    }`}
+                  >
+                    <FaUser size={12} />
+                    <span>Özel</span>
+                  </button>
+
+                  {user.role === 'teacher' && (
+                    <button
+                      onClick={() => {
+                        setMessageMode('announcement')
+                        setSelectedRecipient(null)
+                      }}
+                      className={`flex items-center space-x-1 px-3 py-1 rounded-full text-xs ${
+                        messageMode === 'announcement'
+                          ? 'bg-red-600 text-white'
+                          : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+                      }`}
+                    >
+                      <FaBullhorn size={12} />
+                      <span>Duyuru</span>
+                    </button>
+                  )}
+                </div>
+
+                {messageMode === 'private' && (
+                  <select
+                    value={selectedRecipient?.id || ''}
+                    onChange={(e) => {
+                      const recipient = availableRecipients.find((p) => p.id === e.target.value)
+                      setSelectedRecipient(
+                        recipient ? { id: recipient.id, name: recipient.name } : null,
+                      )
+                    }}
+                    className="w-full px-2 py-1 text-xs border border-gray-300 rounded"
+                  >
+                    <option value="">Kişi seçin...</option>
+                    {availableRecipients.map((participant) => (
+                      <option key={participant.id} value={participant.id}>
+                        {participant.name} {participant.isTeacher ? '(Öğretmen)' : ''}
+                      </option>
+                    ))}
+                  </select>
+                )}
+              </div>
+
+              {/* Messages */}
+              <div className="flex-1 overflow-y-auto p-4 space-y-3">
+                {chatMessages.length === 0 ? (
+                  <div className="text-center text-gray-500 text-sm">
+                    Henüz mesaj bulunmamaktadır.
+                  </div>
+                ) : (
+                  chatMessages.map((message) => (
+                    <div
+                      key={message.id}
+                      className={`${
+                        message.messageType === 'announcement'
+                          ? 'w-full'
+                          : message.senderId === user.id
+                            ? 'flex justify-end'
+                            : 'flex justify-start'
+                      }`}
+                    >
+                      <div
+                        className={`max-w-xs px-3 py-2 rounded-lg ${
+                          message.messageType === 'announcement'
+                            ? 'bg-red-100 text-red-800 border border-red-200 w-full text-center'
+                            : message.messageType === 'private'
+                              ? message.senderId === user.id
+                                ? 'bg-green-600 text-white'
+                                : 'bg-green-100 text-green-800 border border-green-200'
+                              : message.senderId === user.id
+                                ? 'bg-blue-600 text-white'
+                                : message.isTeacher
+                                  ? 'bg-yellow-100 text-yellow-800 border border-yellow-200'
+                                  : 'bg-gray-100 text-gray-800'
+                        }`}
+                      >
+                        {message.senderId !== user.id && (
+                          <div className="text-xs font-semibold mb-1">
+                            {message.senderName}
+                            {message.isTeacher && ' (Öğretmen)'}
+                            {message.messageType === 'private' &&
+                              message.recipientId === user.id &&
+                              ' (Size özel)'}
+                          </div>
+                        )}
+                        {message.messageType === 'private' && message.senderId === user.id && (
+                          <div className="text-xs mb-1 opacity-75">→ {message.recipientName}</div>
+                        )}
+                        {message.messageType === 'announcement' && (
+                          <div className="text-xs font-semibold mb-1">
+                            📢 DUYURU - {message.senderName}
+                          </div>
+                        )}
+                        <div className="text-sm">{message.message}</div>
+                        <div
+                          className={`text-xs mt-1 opacity-75 ${
+                            message.messageType === 'announcement'
+                              ? 'text-red-600'
+                              : message.senderId === user.id
+                                ? 'text-white'
+                                : 'text-gray-500'
+                          }`}
+                        >
+                          {formatTime(message.timestamp)}
+                        </div>
+                      </div>
+                    </div>
+                  ))
+                )}
+                <div ref={messagesEndRef} />
+              </div>
+
+              {/* Message Input */}
+              <form onSubmit={handleSendMessage} className="p-4 border-t border-gray-200">
+                <div className="text-xs text-gray-500 mb-2">
+                  {messageMode === 'public' && 'Herkese mesaj gönderiyorsunuz'}
+                  {messageMode === 'private' &&
+                    selectedRecipient &&
+                    `${selectedRecipient.name} kişisine özel mesaj`}
+                  {messageMode === 'private' && !selectedRecipient && 'Önce bir kişi seçin'}
+                  {messageMode === 'announcement' && 'Sınıfa duyuru gönderiyorsunuz'}
+                </div>
+                <div className="flex space-x-2">
+                  <input
+                    type="text"
+                    value={newMessage}
+                    onChange={(e) => setNewMessage(e.target.value)}
+                    placeholder={
+                      messageMode === 'private' && !selectedRecipient
+                        ? 'Önce kişi seçin...'
+                        : messageMode === 'announcement'
+                          ? 'Duyuru mesajınız...'
+                          : 'Mesajınızı yazın...'
+                    }
+                    className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
+                    maxLength={500}
+                    disabled={messageMode === 'private' && !selectedRecipient}
+                  />
+                  <button
+                    type="submit"
+                    disabled={
+                      !newMessage.trim() || (messageMode === 'private' && !selectedRecipient)
+                    }
+                    className="px-3 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
+                  >
+                    <FaPaperPlane size={16} />
+                  </button>
+                </div>
+              </form>
+            </div>
+          )
+        }
+
+        case 'participants': {
+          return (
+            <div className="h-full bg-white flex flex-col text-gray-900">
+              <div className="p-4 border-b border-gray-200">
+                <div className="flex items-center justify-between mb-3">
+                  <h3 className="text-lg font-semibold text-gray-900">
+                    Katılımcılar ({participants.length + 1})
+                  </h3>
+                  <button onClick={() => setActiveSidePanel(null)}>
+                    <FaTimes className="text-gray-500" />
+                  </button>
+                </div>
+
+                {/* Tab Navigation */}
+                <div className="flex space-x-1 bg-gray-100 rounded-lg p-1">
+                  <button
+                    onClick={() => setParticipantsActiveTab('participants')}
+                    className={`flex-1 px-3 py-2 text-sm font-medium rounded-md transition-all ${
+                      participantsActiveTab === 'participants'
+                        ? 'bg-white text-blue-600 shadow-sm'
+                        : 'text-gray-600 hover:text-gray-900'
+                    }`}
+                  >
+                    <FaUsers className="inline mr-1" size={14} />
+                    Katılımcılar
+                  </button>
+                  <button
+                    onClick={() => setParticipantsActiveTab('attendance')}
+                    className={`flex-1 px-3 py-2 text-sm font-medium rounded-md transition-all ${
+                      participantsActiveTab === 'attendance'
+                        ? 'bg-white text-blue-600 shadow-sm'
+                        : 'text-gray-600 hover:text-gray-900'
+                    }`}
+                  >
+                    <FaClipboardList className="inline mr-1" size={14} />
+                    Katılım Raporu
+                  </button>
+                </div>
+              </div>
+
+              {participantsActiveTab === 'participants' && (
+                <>
+                  {user.role === 'teacher' && participants.length > 0 && (
+                    <div className="flex">
+                      <button
+                        onClick={async () => {
+                          if (signalRServiceRef.current && user.role === 'teacher') {
+                            const now = new Date()
+                            // Remove all non-teacher participants
+                            const nonTeacherIds = participants
+                              .filter((p) => !p.isTeacher)
+                              .map((p) => p.id)
+                            for (const participantId of nonTeacherIds) {
+                              await signalRServiceRef.current.kickParticipant(
+                                classSession.id,
+                                participantId,
+                              )
+                            }
+                            setParticipants((prev) => prev.filter((p) => p.isTeacher))
+                            setAttendanceRecords((prev) =>
+                              prev.map((r) => {
+                                if (nonTeacherIds.includes(r.studentId) && !r.leaveTime) {
+                                  const leaveTime = now.toISOString()
+                                  const join = new Date(r.joinTime)
+                                  const leave = now
+                                  const totalDurationMinutes = Math.max(
+                                    1,
+                                    Math.round((leave.getTime() - join.getTime()) / 60000),
+                                  )
+                                  return { ...r, leaveTime, totalDurationMinutes }
+                                }
+                                return r
+                              }),
+                            )
+                          }
+                        }}
+                        className="w-full bg-red-600 hover:bg-red-700 text-white p-2 shadow text-sm transition-all"
+                      >
+                        Tüm Katılımcıları Çıkar
+                      </button>
+                    </div>
+                  )}
+                  <div className="flex-1 overflow-y-auto p-2">
+                    <div className="space-y-2">
+                      {/* Current User */}
+                      <div className="flex items-center justify-between p-2 rounded-lg bg-blue-50">
+                        <div className="flex items-center space-x-3">
+                          <div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white text-sm font-semibold">
+                            {user.name.charAt(0)}
+                          </div>
+                          <span className="text-gray-900">{user.name} (Siz)</span>
+                        </div>
+                        <div className="flex items-center space-x-1">
+                          {user.role === 'teacher' && (
+                            <span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">
+                              Öğretmen
+                            </span>
+                          )}
+                        </div>
+                      </div>
+
+                      {/* Other Participants */}
+                      {participants.map((participant) => (
+                        <div
+                          key={participant.id}
+                          className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50"
+                        >
+                          <div className="flex items-center space-x-3">
+                            <div className="w-8 h-8 bg-gray-500 rounded-full flex items-center justify-center text-white text-sm font-semibold">
+                              {participant.name.charAt(0)}
+                            </div>
+                            <span
+                              className="text-gray-900 cursor-pointer hover:underline"
+                              onClick={() => {
+                                setMessageMode('private')
+                                setSelectedRecipient({ id: participant.id, name: participant.name })
+                                setActiveSidePanel('chat')
+                              }}
+                            >
+                              {participant.name}
+                            </span>
+                          </div>
+                          <div className="flex items-center space-x-1">
+                            {/* Ses aç/kapat butonu */}
+                            {user.role === 'teacher' && !participant.isTeacher && (
+                              <button
+                                onClick={async () => {
+                                  await handleMuteParticipant(
+                                    participant.id,
+                                    !participant.isAudioMuted,
+                                  )
+                                }}
+                                className={`p-1 rounded transition-colors ${participant.isAudioMuted ? 'text-green-600 hover:bg-green-50' : 'text-yellow-600 hover:bg-yellow-50'}`}
+                                title={participant.isAudioMuted ? 'Sesi Aç' : 'Sesi Kapat'}
+                              >
+                                {participant.isAudioMuted ? (
+                                  <FaMicrophone />
+                                ) : (
+                                  <FaMicrophoneSlash />
+                                )}
+                              </button>
+                            )}
+                            {/* Video durumu gösterimi */}
+                            {participant.isVideoMuted && (
+                              <FaVideoSlash className="text-red-500 text-sm" />
+                            )}
+                            {participant.isTeacher && (
+                              <span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">
+                                Öğretmen
+                              </span>
+                            )}
+                            {user.role === 'teacher' && !participant.isTeacher && (
+                              <button
+                                onClick={() =>
+                                  setKickingParticipant({
+                                    id: participant.id,
+                                    name: participant.name,
+                                  })
+                                }
+                                className="p-1 text-red-600 hover:bg-red-50 rounded transition-colors"
+                                title="Sınıftan Çıkar"
+                              >
+                                <FaUserTimes size={12} />
+                              </button>
+                            )}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </>
+              )}
+
+              {participantsActiveTab === 'attendance' && (
+                <div className="flex-1 overflow-y-auto p-4">
+                  {attendanceRecords.length === 0 ? (
+                    <div className="text-center py-8 text-gray-500">
+                      <FaClipboardList size={32} className="mx-auto mb-4 text-gray-300" />
+                      <p className="text-sm text-gray-600">Henüz katılım kaydı bulunmamaktadır.</p>
+                    </div>
+                  ) : (
+                    <div className="space-y-3">
+                      {attendanceRecords.map((record) => (
+                        <div key={record.id} className="p-3 border border-gray-200 rounded-lg">
+                          <div className="flex items-center justify-between mb-2">
+                            <h4 className="font-medium text-gray-800">{record.studentName}</h4>
+                            <span className="text-sm font-semibold text-blue-600">
+                              {formatDuration(record.totalDurationMinutes)}
+                            </span>
+                          </div>
+                          <div className="text-xs text-gray-600 space-y-1">
+                            <div>Giriş: {formatTime(record.joinTime)}</div>
+                            <div>
+                              Çıkış:{' '}
+                              {record.leaveTime ? formatTime(record.leaveTime) : 'Devam ediyor'}
+                            </div>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          )
+        }
+
+        case 'documents':
+          return (
+            <div className="h-full bg-white flex flex-col text-gray-900">
+              <div className="p-4 border-b border-gray-200">
+                <div className="flex items-center justify-between">
+                  <h3 className="text-lg font-semibold text-gray-900">Sınıf Dokümanları</h3>
+                  <button onClick={() => setActiveSidePanel(null)}>
+                    <FaTimes className="text-gray-500" />
+                  </button>
+                </div>
+              </div>
+
+              <div className="flex-1 overflow-y-auto p-4">
+                {/* Upload Area (Teacher Only) */}
+                {user.role === 'teacher' && (
+                  <div
+                    className={`border-2 border-dashed rounded-lg p-6 mb-4 text-center transition-colors ${
+                      dragOver
+                        ? 'border-blue-500 bg-blue-50'
+                        : 'border-gray-300 hover:border-gray-400'
+                    }`}
+                    onDrop={handleDrop}
+                    onDragOver={(e) => {
+                      e.preventDefault()
+                      setDragOver(true)
+                    }}
+                    onDragLeave={() => setDragOver(false)}
+                  >
+                    <FaFile size={32} className="mx-auto text-gray-400 mb-2" />
+                    <p className="text-sm font-medium text-gray-700 mb-2">Doküman Yükle</p>
+                    <p className="text-xs text-gray-500 mb-3">
+                      Dosyaları buraya sürükleyin veya seçin
+                    </p>
+                    <button
+                      onClick={() => fileInputRef.current?.click()}
+                      className="px-3 py-1 bg-blue-600 text-white rounded text-sm hover:bg-blue-700 transition-colors"
+                    >
+                      Dosya Seç
+                    </button>
+                    <input
+                      ref={fileInputRef}
+                      type="file"
+                      multiple
+                      onChange={handleFileSelect}
+                      className="hidden"
+                      accept=".pdf,.doc,.docx,.ppt,.pptx,.jpg,.jpeg,.png,.gif,.odp"
+                    />
+                  </div>
+                )}
+
+                {/* Documents List */}
+                {documents.length === 0 ? (
+                  <div className="text-center py-8 text-gray-500">
+                    <FaFile size={32} className="mx-auto mb-4 text-gray-300" />
+                    <p className="text-sm">Henüz doküman yüklenmemiş.</p>
+                  </div>
+                ) : (
+                  <div className="space-y-3">
+                    {documents.map((doc) => (
+                      <div
+                        key={doc.id}
+                        className="flex items-center justify-between p-3 border border-gray-200 rounded-lg hover:shadow-sm transition-shadow"
+                      >
+                        <div className="flex items-center space-x-3 min-w-0 flex-1">
+                          <div className="text-lg flex-shrink-0">{getFileIcon(doc.type)}</div>
+                          <div className="min-w-0 flex-1">
+                            <h4 className="font-medium text-gray-800 text-sm truncate">
+                              {doc.name}
+                            </h4>
+                            <p className="text-xs text-gray-600">
+                              {formatFileSize(doc.size)} •{' '}
+                              {new Date(doc.uploadedAt).toLocaleDateString('tr-TR')}
+                            </p>
+                            <p className="text-xs text-gray-500">{doc.uploadedBy}</p>
+                          </div>
+                        </div>
+
+                        <div className="flex items-center space-x-1 flex-shrink-0">
+                          <button
+                            onClick={() => handleViewDocument(doc)}
+                            className="p-1 text-blue-600 hover:bg-blue-50 rounded transition-colors"
+                            title="Görüntüle"
+                          >
+                            <FaEye size={12} />
+                          </button>
+
+                          <a
+                            href={doc.url}
+                            download={doc.name}
+                            className="p-1 text-green-600 hover:bg-green-50 rounded transition-colors"
+                            title="İndir"
+                          >
+                            <FaDownload size={12} />
+                          </a>
+
+                          {user.role === 'teacher' && (
+                            <button
+                              onClick={() => handleDeleteDocument(doc.id)}
+                              className="p-1 text-red-600 hover:bg-red-50 rounded transition-colors"
+                              title="Sil"
+                            >
+                              <FaTrash size={12} />
+                            </button>
+                          )}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          )
+
+        case 'handraises': {
+          const activeHandRaises = handRaises.filter((hr) => hr.isActive)
+          return (
+            <div className="h-full bg-white flex flex-col">
+              <div className="p-4 border-b border-gray-200">
+                <div className="flex items-center justify-between">
+                  <h3 className="text-lg font-semibold text-gray-900">
+                    Parmak Kaldıranlar ({activeHandRaises.length})
+                  </h3>
+                  <button onClick={() => setActiveSidePanel(null)}>
+                    <FaTimes className="text-gray-500" />
+                  </button>
+                </div>
+              </div>
+
+              <div className="flex-1 overflow-y-auto p-4">
+                {activeHandRaises.length === 0 ? (
+                  <div className="text-center py-8 text-gray-500">
+                    <FaHandPaper size={32} className="mx-auto mb-4 text-gray-300" />
+                    <p className="text-sm text-gray-600">
+                      Şu anda parmak kaldıran öğrenci bulunmamaktadır.
+                    </p>
+                  </div>
+                ) : (
+                  <div className="space-y-3">
+                    {activeHandRaises.map((handRaise) => (
+                      <div
+                        key={handRaise.id}
+                        className="flex items-center justify-between p-3 bg-yellow-50 border border-yellow-200 rounded-lg"
+                      >
+                        <div className="flex items-center space-x-3">
+                          <FaHandPaper className="text-yellow-600" size={16} />
+                          <div>
+                            <h4 className="font-medium text-gray-800 text-sm">
+                              {handRaise.studentName}
+                            </h4>
+                            <p className="text-xs text-gray-600">
+                              {formatTime(handRaise.timestamp)} •{' '}
+                              {getTimeSince(handRaise.timestamp)}
+                            </p>
+                          </div>
+                        </div>
+
+                        {user.role === 'teacher' && (
+                          <div className="flex space-x-1">
+                            <button
+                              onClick={() => handleApproveHandRaise(handRaise.id)}
+                              className="flex items-center space-x-1 px-2 py-1 bg-green-600 text-white rounded text-xs hover:bg-green-700 transition-colors"
+                            >
+                              <FaCheck size={10} />
+                              <span>Onayla</span>
+                            </button>
+                            <button
+                              onClick={() => handleDismissHandRaise(handRaise.id)}
+                              className="flex items-center space-x-1 px-2 py-1 bg-red-600 text-white rounded text-xs hover:bg-red-700 transition-colors"
+                            >
+                              <FaTimes size={10} />
+                              <span>Reddet</span>
+                            </button>
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          )
+        }
+
+        case 'layout':
+          return (
+            <div className="h-full bg-white flex flex-col text-gray-900">
+              <div className="p-4 border-b border-gray-200">
+                <div className="flex items-center justify-between">
+                  <h3 className="text-lg font-semibold text-gray-900">Video Layout Seçin</h3>
+                  <button onClick={() => setActiveSidePanel(null)}>
+                    <FaTimes className="text-gray-500" />
+                  </button>
+                </div>
+              </div>
+
+              <div className="flex-1 overflow-y-auto p-2">
+                <div className="space-y-3">
+                  {layouts.map((layout) => (
+                    <button
+                      key={layout.id}
+                      onClick={() => {
+                        handleLayoutChange(layout)
+                      }}
+                      className={`w-full p-4 rounded-lg border-2 transition-all text-left ${
+                        currentLayout.id === layout.id
+                          ? 'border-blue-500 bg-blue-50'
+                          : 'border-gray-200 hover:border-blue-300 hover:bg-gray-50'
+                      }`}
+                    >
+                      <div className="flex items-center space-x-3 mb-2">
+                        <div
+                          className={`p-2 rounded-full ${
+                            currentLayout.id === layout.id
+                              ? 'bg-blue-100 text-blue-600'
+                              : 'bg-gray-100 text-gray-600'
+                          }`}
+                        >
+                          {getLayoutIcon(layout.type)}
+                        </div>
+                        <div>
+                          <h4 className="font-medium text-gray-900 text-sm">{layout.name}</h4>
+                          <p className="text-xs text-gray-600">{layout.description}</p>
+                        </div>
+                      </div>
+
+                      {/* Layout Preview */}
+                      <div className="bg-gray-100 rounded p-3 h-16 flex items-center justify-center">
+                        {layout.type === 'grid' && (
+                          <div className="grid grid-cols-2 gap-1">
+                            {[1, 2, 3, 4].map((i) => (
+                              <div key={i} className="w-4 h-3 bg-blue-300 rounded"></div>
+                            ))}
+                          </div>
+                        )}
+                        {layout.type === 'sidebar' && (
+                          <div className="flex items-center space-x-2">
+                            <div className="w-8 h-6 bg-blue-500 rounded"></div>
+                            <div className="grid grid-cols-3 gap-1">
+                              <div className="w-1 h-1 bg-blue-300 rounded"></div>
+                              <div className="w-1 h-1 bg-blue-300 rounded"></div>
+                              <div className="w-1 h-1 bg-blue-300 rounded"></div>
+                              <div className="w-1 h-1 bg-blue-300 rounded"></div>
+                              <div className="w-1 h-1 bg-blue-300 rounded"></div>
+                              <div className="w-1 h-1 bg-blue-300 rounded"></div>
+                            </div>
+                          </div>
+                        )}
+                        {layout.type === 'teacher-focus' && (
+                          <div className="space-y-1">
+                            <div className="w-12 h-4 bg-green-500 rounded"></div>
+                            <div className="flex space-x-1">
+                              <div className="w-1 h-1 bg-blue-300 rounded"></div>
+                              <div className="w-1 h-1 bg-blue-300 rounded"></div>
+                              <div className="w-1 h-1 bg-blue-300 rounded"></div>
+                              <div className="w-1 h-1 bg-blue-300 rounded"></div>
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </div>
+          )
+
+        case 'settings':
+          return (
+            <div className="h-full bg-white flex flex-col text-gray-900">
+              <div className="p-4 border-b border-gray-200">
+                <div className="flex items-center justify-between">
+                  <h3 className="text-lg font-semibold text-gray-900">Sınıf Ayarları</h3>
+                  <button onClick={() => setActiveSidePanel(null)}>
+                    <FaTimes className="text-gray-500" />
+                  </button>
+                </div>
+              </div>
+              <div className="flex-1 overflow-y-auto p-4">
+                <div className="space-y-6">
+                  {/* Katılımcı Davranışları */}
+                  <div>
+                    <h4 className="font-semibold text-gray-800 mb-3">Katılımcı İzinleri</h4>
+                    <div className="space-y-3">
+                      <label className="flex items-center justify-between">
+                        <span className="text-sm text-gray-700">Parmak kaldırma izni</span>
+                        <input
+                          type="checkbox"
+                          checked={classSettings.allowHandRaise}
+                          onChange={(e) =>
+                            handleSettingsChange({ allowHandRaise: e.target.checked })
+                          }
+                          className="rounded"
+                          disabled={user.role !== 'teacher'}
+                        />
+                      </label>
+                      <label className="flex items-center justify-between">
+                        <span className="text-sm text-gray-700">Öğrenci sohbet izni</span>
+                        <input
+                          type="checkbox"
+                          checked={classSettings.allowStudentChat}
+                          onChange={(e) =>
+                            handleSettingsChange({ allowStudentChat: e.target.checked })
+                          }
+                          className="rounded"
+                          disabled={user.role !== 'teacher'}
+                        />
+                      </label>
+                      <label className="flex items-center justify-between">
+                        <span className="text-sm">Özel mesaj izni</span>
+                        <input
+                          type="checkbox"
+                          checked={classSettings.allowPrivateMessages}
+                          onChange={(e) =>
+                            handleSettingsChange({ allowPrivateMessages: e.target.checked })
+                          }
+                          className="rounded"
+                          disabled={user.role !== 'teacher'}
+                        />
+                      </label>
+                      <label className="flex items-center justify-between">
+                        <span className="text-sm">Öğrenci ekran paylaşımı</span>
+                        <input
+                          type="checkbox"
+                          checked={classSettings.allowStudentScreenShare}
+                          onChange={(e) =>
+                            handleSettingsChange({ allowStudentScreenShare: e.target.checked })
+                          }
+                          className="rounded"
+                          disabled={user.role !== 'teacher'}
+                        />
+                      </label>
+                    </div>
+                  </div>
+
+                  {/* Varsayılan Ayarlar */}
+                  <div>
+                    <h4 className="font-semibold text-gray-800 mb-3">Varsayılan Ayarlar</h4>
+                    <div className="space-y-3">
+                      <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-1">
+                          Varsayılan mikrofon durumu
+                        </label>
+                        <select
+                          value={classSettings.defaultMicrophoneState}
+                          onChange={(e) =>
+                            handleSettingsChange({
+                              defaultMicrophoneState: e.target.value as 'muted' | 'unmuted',
+                            })
+                          }
+                          className="w-full p-2 border border-gray-300 rounded-md text-sm"
+                          disabled={user.role !== 'teacher'}
+                        >
+                          <option value="muted">Kapalı</option>
+                          <option value="unmuted">Açık</option>
+                        </select>
+                      </div>
+                      <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-1">
+                          Varsayılan kamera durumu
+                        </label>
+                        <select
+                          value={classSettings.defaultCameraState}
+                          onChange={(e) =>
+                            handleSettingsChange({
+                              defaultCameraState: e.target.value as 'on' | 'off',
+                            })
+                          }
+                          className="w-full p-2 border border-gray-300 rounded-md text-sm"
+                          disabled={user.role !== 'teacher'}
+                        >
+                          <option value="on">Açık</option>
+                          <option value="off">Kapalı</option>
+                        </select>
+                      </div>
+                      <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-1">
+                          Varsayılan layout
+                        </label>
+                        <select
+                          value={classSettings.defaultLayout}
+                          onChange={(e) => handleSettingsChange({ defaultLayout: e.target.value })}
+                          className="w-full p-2 border border-gray-300 rounded-md text-sm"
+                          disabled={user.role !== 'teacher'}
+                        >
+                          <option value="grid">Izgara Görünümü</option>
+                          <option value="sidebar">Sunum Modu</option>
+                          <option value="teacher-focus">Öğretmen Odaklı</option>
+                          <option value="interview">Karşılıklı Görüşme</option>
+                        </select>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Otomatik Ayarlar */}
+                  <div>
+                    <h4 className="font-semibold text-gray-800 mb-3">Otomatik Ayarlar</h4>
+                    <div className="space-y-3">
+                      <label className="flex items-center justify-between">
+                        <span className="text-sm text-gray-700">
+                          Yeni katılımcıları otomatik sustur
+                        </span>
+                        <input
+                          type="checkbox"
+                          checked={classSettings.autoMuteNewParticipants}
+                          onChange={(e) =>
+                            handleSettingsChange({ autoMuteNewParticipants: e.target.checked })
+                          }
+                          className="rounded"
+                          disabled={user.role !== 'teacher'}
+                        />
+                      </label>
+                      <label className="flex items-center justify-between">
+                        <span className="text-sm">Bekleme odası aktif</span>
+                        <input
+                          type="checkbox"
+                          checked={classSettings.waitingRoomEnabled}
+                          onChange={(e) =>
+                            handleSettingsChange({ waitingRoomEnabled: e.target.checked })
+                          }
+                          className="rounded"
+                          disabled={user.role !== 'teacher'}
+                        />
+                      </label>
+                      <label className="flex items-center justify-between">
+                        <span className="text-sm">Oturumu kaydet</span>
+                        <input
+                          type="checkbox"
+                          checked={classSettings.recordSession}
+                          onChange={(e) =>
+                            handleSettingsChange({ recordSession: e.target.checked })
+                          }
+                          className="rounded"
+                          disabled={user.role !== 'teacher'}
+                        />
+                      </label>
+                    </div>
+                  </div>
+
+                  {user.role !== 'teacher' && (
+                    <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
+                      <p className="text-sm text-yellow-800">
+                        ⚠️ Ayarları sadece öğretmen değiştirebilir.
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          )
+        default:
+          return null
+      }
+    }
+
+    return (
+      <div className="w-full lg:w-80 bg-white shadow-xl border-l border-gray-200 flex-shrink-0 h-full">
+        {panelContent()}
+        {/* Kapat butonu kaldırıldı, ana panelde gösterilecek */}
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen h-screen flex flex-col bg-gray-900 text-white overflow-hidden">
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        className="h-full flex flex-col relative overflow-hidden"
+      >
+        {/* Main Content Area */}
+        <div className="flex-1 flex flex-col lg:flex-row relative min-h-0 h-full">
+          {/* Left Content Area - Video and Screen Share */}
+          <div
+            className={`flex-1 flex flex-col min-h-0 h-full transition-all duration-300 ${!activeSidePanel ? 'flex items-center justify-center' : ''}`}
+          >
+            {/* Video Container - Panel kapalıyken ortalanmış */}
+            <div
+              className={`${!activeSidePanel ? 'w-full max-w-6xl' : 'w-full h-full'} flex flex-col min-h-0 h-full`}
+            >
+              {/* Screen Share Panel */}
+              {(isScreenSharing || screenStream) && (
+                <div className="p-2 sm:p-4 flex-shrink-0">
+                  <ScreenSharePanel
+                    isSharing={isScreenSharing}
+                    onStartShare={handleStartScreenShare}
+                    onStopShare={handleStopScreenShare}
+                    sharedScreen={screenStream}
+                    sharerName={screenSharer}
+                  />
+                </div>
+              )}
+              {/* Video Grid */}
+              <div className="flex-1 relative overflow-hidden min-h-0 h-full">
+                <ParticipantGrid
+                  participants={participants}
+                  localStream={user.role === 'observer' ? undefined : localStream}
+                  currentUserId={user.id}
+                  currentUserName={user.name}
+                  isTeacher={user.role === 'teacher'}
+                  isAudioEnabled={isAudioEnabled}
+                  isVideoEnabled={isVideoEnabled}
+                  onToggleAudio={user.role === 'observer' ? () => {} : handleToggleAudio}
+                  onToggleVideo={user.role === 'observer' ? () => {} : handleToggleVideo}
+                  onLeaveCall={handleLeaveCall}
+                  onMuteParticipant={handleMuteParticipant}
+                  layout={currentLayout}
+                  focusedParticipant={focusedParticipant}
+                  onParticipantFocus={handleParticipantFocus}
+                  hasSidePanel={!!activeSidePanel}
+                  onKickParticipant={
+                    user.role === 'teacher'
+                      ? (participantId) => {
+                          const participant = participants.find((p) => p.id === participantId)
+                          if (participant) {
+                            setKickingParticipant({ id: participant.id, name: participant.name })
+                          }
+                        }
+                      : undefined
+                  }
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Side Panel */}
+          {activeSidePanel && (
+            <div className="fixed inset-0 z-40 bg-white flex flex-col w-full h-full lg:relative lg:inset-auto lg:w-80 lg:h-full lg:z-0 lg:bg-white">
+              {renderSidePanel()}
+            </div>
+          )}
+        </div>
+
+        {/* Bottom Control Bar - Google Meet Style */}
+        <div className="bg-gray-800 p-2 sm:p-3 flex-shrink-0">
+          {/* Mobile Layout */}
+          <div className="flex lg:hidden items-center justify-between">
+            {/* Left Side - Main Controls */}
+            <div className="flex items-center space-x-1 sm:space-x-2">
+              {/* Audio Control */}
+              {user.role !== 'observer' && (
+                <button
+                  onClick={handleToggleAudio}
+                  className={`p-2 sm:p-3 rounded-full transition-all ${
+                    isAudioEnabled
+                      ? 'bg-gray-700 hover:bg-gray-600 text-white'
+                      : 'bg-red-600 hover:bg-red-700 text-white'
+                  }`}
+                  title={isAudioEnabled ? 'Mikrofonu Kapat' : 'Mikrofonu Aç'}
+                >
+                  {isAudioEnabled ? <FaMicrophone size={16} /> : <FaMicrophoneSlash size={16} />}
+                </button>
+              )}
+
+              {/* Video Control */}
+              {user.role !== 'observer' && (
+                <button
+                  onClick={handleToggleVideo}
+                  className={`p-2 sm:p-3 rounded-full transition-all ${
+                    isVideoEnabled
+                      ? 'bg-gray-700 hover:bg-gray-600 text-white'
+                      : 'bg-red-600 hover:bg-red-700 text-white'
+                  }`}
+                  title={isVideoEnabled ? 'Kamerayı Kapat' : 'Kamerayı Aç'}
+                >
+                  {isVideoEnabled ? <FaVideo size={16} /> : <FaVideoSlash size={16} />}
+                </button>
+              )}
+
+              {/* Screen Share */}
+              {(user.role === 'teacher' || classSettings.allowStudentScreenShare) && (
+                <button
+                  onClick={isScreenSharing ? handleStopScreenShare : handleStartScreenShare}
+                  className={`p-2 sm:p-3 rounded-full transition-all ${
+                    isScreenSharing
+                      ? 'bg-blue-600 hover:bg-blue-700 text-white'
+                      : 'bg-gray-700 hover:bg-gray-600 text-white'
+                  }`}
+                  title={isScreenSharing ? 'Paylaşımı Durdur' : 'Ekranı Paylaş'}
+                >
+                  <FaDesktop size={16} />
+                </button>
+              )}
+
+              {/* Hand Raise (Students) */}
+              {user.role === 'student' && classSettings.allowHandRaise && (
+                <button
+                  onClick={handleRaiseHand}
+                  disabled={hasRaisedHand}
+                  className={`p-2 sm:p-3 rounded-full transition-all ${
+                    hasRaisedHand
+                      ? 'bg-yellow-600 text-white cursor-not-allowed'
+                      : 'bg-gray-700 hover:bg-gray-600 text-white hover:bg-yellow-600'
+                  }`}
+                  title={hasRaisedHand ? 'Parmak Kaldırıldı' : 'Parmak Kaldır'}
+                >
+                  <FaHandPaper size={16} />
+                </button>
+              )}
+
+              {/* Leave Call */}
+              <button
+                onClick={handleLeaveCall}
+                className="p-2 sm:p-3 rounded-full bg-red-600 hover:bg-red-700 text-white transition-all"
+                title="Aramayı Sonlandır"
+              >
+                <FaPhone size={16} />
+              </button>
+            </div>
+
+            {/* Right Side - Panel Controls */}
+            <div className="flex items-center">
+              <button
+                className="p-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-white"
+                onClick={() => setMobileMenuOpen(true)}
+                aria-label="Menüyü Aç"
+              >
+                <FaBars size={20} />
+              </button>
+            </div>
+
+            {/* Hamburger Menu Modal */}
+            {mobileMenuOpen && (
+              <>
+                {/* Overlay */}
+                <div
+                  className="fixed inset-0 z-40 bg-black bg-opacity-40"
+                  onClick={() => setMobileMenuOpen(false)}
+                />
+                {/* Drawer */}
+                <motion.div
+                  initial={{ x: '100%' }}
+                  animate={{ x: 0 }}
+                  exit={{ x: '100%' }}
+                  transition={{ type: 'spring', stiffness: 300, damping: 30 }}
+                  className="fixed inset-0 z-50 w-full h-full bg-white shadow-2xl flex flex-col p-0 lg:top-0 lg:right-0 lg:w-80 lg:h-full lg:inset-y-0 lg:left-auto"
+                >
+                  <div className="flex items-center justify-between px-4 py-4 border-b">
+                    <span className="font-semibold text-gray-800 text-lg">Menü</span>
+                    <button
+                      onClick={() => setMobileMenuOpen(false)}
+                      className="p-2 rounded-full hover:bg-gray-100"
+                    >
+                      <FaTimes size={22} />
+                    </button>
+                  </div>
+                  <div className="flex-1 flex flex-col space-y-1 px-2 py-2 overflow-y-auto">
+                    <button
+                      onClick={() => {
+                        setMobileMenuOpen(false)
+                        setTimeout(() => toggleSidePanel('chat'), 200)
+                      }}
+                      className={`flex items-center space-x-2 p-3 rounded-lg transition-all text-base ${activeSidePanel === 'chat' ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-100 text-gray-700'}`}
+                    >
+                      <FaComments /> <span>Sohbet</span>
+                      {chatMessages.length > 0 && (
+                        <span className="ml-auto bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
+                          {chatMessages.length > 9 ? '9+' : chatMessages.length}
+                        </span>
+                      )}
+                    </button>
+                    <button
+                      onClick={() => {
+                        setMobileMenuOpen(false)
+                        setTimeout(() => toggleSidePanel('participants'), 200)
+                      }}
+                      className={`flex items-center space-x-2 p-3 rounded-lg transition-all text-base ${activeSidePanel === 'participants' ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-100 text-gray-700'}`}
+                    >
+                      <FaUserFriends /> <span>Katılımcılar</span>
+                    </button>
+                    <button
+                      onClick={() => {
+                        setMobileMenuOpen(false)
+                        setTimeout(() => toggleSidePanel('documents'), 200)
+                      }}
+                      className={`flex items-center space-x-2 p-3 rounded-lg transition-all text-base ${activeSidePanel === 'documents' ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-100 text-gray-700'}`}
+                    >
+                      <FaFile /> <span>Dokümanlar</span>
+                    </button>
+                    <button
+                      onClick={() => {
+                        setMobileMenuOpen(false)
+                        setTimeout(() => toggleSidePanel('handraises'), 200)
+                      }}
+                      className={`flex items-center space-x-2 p-3 rounded-lg transition-all text-base ${activeSidePanel === 'handraises' ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-100 text-gray-700'}`}
+                    >
+                      <FaHandPaper /> <span>Parmak Kaldıranlar</span>
+                      {handRaises.filter((hr) => hr.isActive).length > 0 && (
+                        <span className="ml-auto bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
+                          {handRaises.filter((hr) => hr.isActive).length}
+                        </span>
+                      )}
+                    </button>
+                    <button
+                      onClick={() => {
+                        setMobileMenuOpen(false)
+                        setTimeout(() => toggleSidePanel('layout'), 200)
+                      }}
+                      className={`flex items-center space-x-2 p-3 rounded-lg transition-all text-base ${activeSidePanel === 'layout' ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-100 text-gray-700'}`}
+                    >
+                      <FaLayerGroup /> <span>Görünüm</span>
+                    </button>
+                    <button
+                      onClick={() => {
+                        setMobileMenuOpen(false)
+                        setTimeout(() => toggleSidePanel('settings'), 200)
+                      }}
+                      className={`flex items-center space-x-2 p-3 rounded-lg transition-all text-base ${activeSidePanel === 'settings' ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-100 text-gray-700'}`}
+                    >
+                      <FaWrench /> <span>Ayarlar</span>
+                    </button>
+                    {user.role === 'teacher' && (
+                      <>
+                        <button
+                          onClick={() => {
+                            setMobileMenuOpen(false)
+                            setTimeout(() => simulateStudentJoin(), 200)
+                          }}
+                          className="flex items-center space-x-2 p-3 rounded-lg transition-all hover:bg-gray-100 text-gray-700 text-base"
+                        >
+                          <FaUserPlus /> <span>Öğrenci Ekle (Demo)</span>
+                        </button>
+                        <button
+                          onClick={() => {
+                            setMobileMenuOpen(false)
+                            setTimeout(() => handleMuteAll(), 200)
+                          }}
+                          className="flex items-center space-x-2 p-3 rounded-lg transition-all hover:bg-gray-100 text-gray-700 text-base"
+                        >
+                          {isAllMuted ? <FaVolumeUp /> : <FaVolumeMute />}{' '}
+                          <span>{isAllMuted ? 'Hepsinin Sesini Aç' : 'Hepsini Sustur'}</span>
+                        </button>
+                      </>
+                    )}
+                    <button
+                      onClick={() => {
+                        setMobileMenuOpen(false)
+                        setTimeout(() => toggleFullscreen(), 200)
+                      }}
+                      className="flex items-center space-x-2 p-3 rounded-lg transition-all hover:bg-gray-100 text-gray-700 text-base"
+                    >
+                      {isFullscreen ? <FaCompress /> : <FaExpand />}{' '}
+                      <span>{isFullscreen ? 'Tam Ekrandan Çık' : 'Tam Ekran'}</span>
+                    </button>
+                  </div>
+                </motion.div>
+              </>
+            )}
+          </div>
+
+          {/* Desktop Layout */}
+          <div className="hidden lg:flex items-center justify-center relative">
+            {/* Left Side - Meeting Info */}
+            <div className="flex items-center space-x-4 text-white absolute left-0">
+              <div className="flex items-center space-x-2">
+                <span className="text-sm font-medium truncate">{classSession.name}</span>
+                <div className="w-px h-4 bg-gray-600"></div>
+                <span className="text-sm text-gray-300">
+                  {new Date().toLocaleTimeString('tr-TR', { hour: '2-digit', minute: '2-digit' })}
+                </span>
+              </div>
+            </div>
+
+            {/* Center - Main Controls */}
+            <div className="flex items-center space-x-2">
+              {/* Audio Control */}
+              {user.role !== 'observer' && (
+                <button
+                  onClick={handleToggleAudio}
+                  className={`p-3 rounded-full transition-all ${
+                    isAudioEnabled
+                      ? 'bg-gray-700 hover:bg-gray-600 text-white'
+                      : 'bg-red-600 hover:bg-red-700 text-white'
+                  }`}
+                  title={isAudioEnabled ? 'Mikrofonu Kapat' : 'Mikrofonu Aç'}
+                >
+                  {isAudioEnabled ? <FaMicrophone size={16} /> : <FaMicrophoneSlash size={16} />}
+                </button>
+              )}
+
+              {/* Video Control */}
+              {user.role !== 'observer' && (
+                <button
+                  onClick={handleToggleVideo}
+                  className={`p-3 rounded-full transition-all ${
+                    isVideoEnabled
+                      ? 'bg-gray-700 hover:bg-gray-600 text-white'
+                      : 'bg-red-600 hover:bg-red-700 text-white'
+                  }`}
+                  title={isVideoEnabled ? 'Kamerayı Kapat' : 'Kamerayı Aç'}
+                >
+                  {isVideoEnabled ? <FaVideo size={16} /> : <FaVideoSlash size={16} />}
+                </button>
+              )}
+
+              {/* Screen Share */}
+              {(user.role === 'teacher' || classSettings.allowStudentScreenShare) && (
+                <button
+                  onClick={isScreenSharing ? handleStopScreenShare : handleStartScreenShare}
+                  className={`p-3 rounded-full transition-all ${
+                    isScreenSharing
+                      ? 'bg-blue-600 hover:bg-blue-700 text-white'
+                      : 'bg-gray-700 hover:bg-gray-600 text-white'
+                  }`}
+                  title={isScreenSharing ? 'Paylaşımı Durdur' : 'Ekranı Paylaş'}
+                >
+                  <FaDesktop size={16} />
+                </button>
+              )}
+
+              {/* Hand Raise (Students) */}
+              {user.role === 'student' && classSettings.allowHandRaise && (
+                <button
+                  onClick={handleRaiseHand}
+                  disabled={hasRaisedHand}
+                  className={`p-3 rounded-full transition-all ${
+                    hasRaisedHand
+                      ? 'bg-yellow-600 text-white cursor-not-allowed'
+                      : 'bg-gray-700 hover:bg-gray-600 text-white hover:bg-yellow-600'
+                  }`}
+                  title={hasRaisedHand ? 'Parmak Kaldırıldı' : 'Parmak Kaldır'}
+                >
+                  <FaHandPaper size={16} />
+                </button>
+              )}
+
+              {/* Leave Call */}
+              <button
+                onClick={handleLeaveCall}
+                className="p-3 rounded-full bg-red-600 hover:bg-red-700 text-white transition-all"
+                title="Aramayı Sonlandır"
+              >
+                <FaPhone size={16} />
+              </button>
+            </div>
+
+            {/* Right Side - Panel Controls & Participant Count */}
+            <div className="flex items-center space-x-2 absolute right-0">
+              {/* Participant Count */}
+              <div className="text-white text-sm mr-2">
+                <FaUsers size={14} className="inline mr-1" />
+                {participants.length + 1}
+              </div>
+
+              {/* Fullscreen Toggle */}
+              <button
+                onClick={toggleFullscreen}
+                className="p-2 rounded-lg bg-gray-700 hover:bg-gray-600 text-white transition-all"
+                title={isFullscreen ? 'Tam Ekrandan Çık' : 'Tam Ekran'}
+              >
+                {isFullscreen ? <FaCompress size={14} /> : <FaExpand size={14} />}
+              </button>
+
+              {/* Chat */}
+              {((user.role !== 'observer' && classSettings.allowStudentChat) ||
+                user.role === 'teacher') && (
+                <button
+                  onClick={() => toggleSidePanel('chat')}
+                  className={`p-2 rounded-lg transition-all relative ${
+                    activeSidePanel === 'chat'
+                      ? 'bg-blue-600 text-white'
+                      : 'bg-gray-700 hover:bg-gray-600 text-white'
+                  }`}
+                  title="Sohbet"
+                >
+                  <FaComments size={14} />
+                  {chatMessages.length > 0 && (
+                    <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center text-[10px]">
+                      {chatMessages.length > 9 ? '9+' : chatMessages.length}
+                    </span>
+                  )}
+                </button>
+              )}
+
+              {/* Participants */}
+              <button
+                onClick={() => toggleSidePanel('participants')}
+                className={`p-2 rounded-lg transition-all ${
+                  activeSidePanel === 'participants'
+                    ? 'bg-blue-600 text-white'
+                    : 'bg-gray-700 hover:bg-gray-600 text-white'
+                }`}
+                title="Katılımcılar"
+              >
+                <FaUserFriends size={14} />
+              </button>
+
+              {/* Teacher Only Options */}
+              {user.role === 'teacher' && (
+                <>
+                  {/* Documents Button */}
+                  <button
+                    onClick={() => toggleSidePanel('documents')}
+                    className={`p-2 rounded-lg transition-all ${
+                      activeSidePanel === 'documents'
+                        ? 'bg-blue-600 text-white'
+                        : 'bg-gray-700 hover:bg-gray-600 text-white'
+                    }`}
+                    title="Dokümanlar"
+                  >
+                    <FaFile size={14} />
+                  </button>
+
+                  {/* Hand Raises Button */}
+                  <button
+                    onClick={() => toggleSidePanel('handraises')}
+                    className={`p-2 rounded-lg transition-all relative ${
+                      activeSidePanel === 'handraises'
+                        ? 'bg-blue-600 text-white'
+                        : 'bg-gray-700 hover:bg-gray-600 text-white'
+                    }`}
+                    title="Parmak Kaldıranlar"
+                  >
+                    <FaHandPaper size={14} />
+                    {handRaises.filter((hr) => hr.isActive).length > 0 && (
+                      <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center text-[10px]">
+                        {handRaises.filter((hr) => hr.isActive).length}
+                      </span>
+                    )}
+                  </button>
+
+                  {/* Mute All Button */}
+                  <button
+                    onClick={handleMuteAll}
+                    className="p-2 rounded-lg transition-all bg-gray-700 hover:bg-gray-600 text-white"
+                    title={isAllMuted ? 'Hepsinin Sesini Aç' : 'Hepsini Sustur'}
+                  >
+                    {isAllMuted ? <FaVolumeUp size={14} /> : <FaVolumeMute size={14} />}
+                  </button>
+
+                  {/* Add Student Demo Button */}
+                  <button
+                    onClick={simulateStudentJoin}
+                    className="p-2 rounded-lg transition-all bg-gray-700 hover:bg-gray-600 text-white"
+                    title="Öğrenci Ekle (Demo)"
+                  >
+                    <FaUserPlus size={14} />
+                  </button>
+                </>
+              )}
+
+              {/* Layout Button */}
+              <button
+                onClick={() => toggleSidePanel('layout')}
+                className={`p-2 rounded-lg transition-all ${
+                  activeSidePanel === 'layout'
+                    ? 'bg-blue-600 text-white'
+                    : 'bg-gray-700 hover:bg-gray-600 text-white'
+                }`}
+                title="Layout"
+              >
+                <FaLayerGroup size={14} />
+              </button>
+
+              {/* Settings Button */}
+              <button
+                onClick={() => toggleSidePanel('settings')}
+                className={`p-2 rounded-lg transition-all ${
+                  activeSidePanel === 'settings'
+                    ? 'bg-blue-600 text-white'
+                    : 'bg-gray-700 hover:bg-gray-600 text-white'
+                }`}
+                title="Ayarlar"
+              >
+                <FaWrench size={14} />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Kick Participant Modal */}
+        <KickParticipantModal
+          participant={kickingParticipant}
+          isOpen={!!kickingParticipant}
+          onClose={() => setKickingParticipant(null)}
+          onConfirm={handleKickParticipant}
+        />
+      </motion.div>
+    </div>
+  )
+}
diff --git a/ui/src/components/classroom/VideoPlayer.tsx b/ui/src/components/classroom/VideoPlayer.tsx
new file mode 100644
index 00000000..d5b2f1a2
--- /dev/null
+++ b/ui/src/components/classroom/VideoPlayer.tsx
@@ -0,0 +1,72 @@
+import React, { useRef, useEffect } from 'react'
+import { FaMicrophoneSlash, FaVideoSlash } from 'react-icons/fa'
+
+// VideoOff component replacement
+const VideoOff: React.FC<{ size?: number; className?: string }> = ({
+  size = 24,
+  className = '',
+}) => <FaVideoSlash size={size} className={className} />
+
+interface VideoPlayerProps {
+  stream?: MediaStream
+  isLocal?: boolean
+  userName: string
+  isAudioEnabled?: boolean
+  isVideoEnabled?: boolean
+  onToggleAudio?: () => void
+  onToggleVideo?: () => void
+  onLeaveCall?: () => void
+}
+
+export const VideoPlayer: React.FC<VideoPlayerProps> = ({
+  stream,
+  isLocal = false,
+  userName,
+  isAudioEnabled = true,
+  isVideoEnabled = true,
+  onToggleAudio,
+  onToggleVideo,
+  onLeaveCall,
+}) => {
+  const videoRef = useRef<HTMLVideoElement>(null)
+
+  useEffect(() => {
+    if (videoRef.current && stream) {
+      videoRef.current.srcObject = stream
+    }
+  }, [stream])
+
+  return (
+    <div className="relative bg-gray-900 rounded-md sm:rounded-lg overflow-hidden p-1 sm:p-2 h-full">
+      <video
+        ref={videoRef}
+        autoPlay
+        playsInline
+        muted={isLocal}
+        className="w-full h-full object-cover"
+      />
+
+      {/* User name overlay */}
+      <div className="absolute bottom-1 sm:bottom-2 left-1 sm:left-2 bg-black bg-opacity-50 text-white px-1 sm:px-2 py-0.5 sm:py-1 rounded text-xs sm:text-sm">
+        {userName} {isLocal && '(You)'}
+      </div>
+
+      {/* Video disabled overlay */}
+      {!isVideoEnabled && (
+        <div className="absolute inset-0 flex items-center justify-center bg-gray-800">
+          <div className="text-center text-white">
+            <VideoOff size={24} className="mx-auto mb-1 sm:mb-2 text-white sm:size-8" />
+            <p className="text-xs sm:text-sm">{userName}</p>
+          </div>
+        </div>
+      )}
+
+      {/* Audio indicator */}
+      {!isAudioEnabled && (
+        <div className="absolute top-1 sm:top-2 right-1 sm:right-2 bg-red-500 rounded-full p-0.5 sm:p-1">
+          <FaMicrophoneSlash size={12} className="text-white sm:size-4" />
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/ui/src/proxy/classroom/data.ts b/ui/src/proxy/classroom/data.ts
new file mode 100644
index 00000000..f76cf3a2
--- /dev/null
+++ b/ui/src/proxy/classroom/data.ts
@@ -0,0 +1,47 @@
+export const initialScheduledClasses = [
+  {
+    id: '1',
+    name: 'Matematik 101 - Diferansiyel Denklemler',
+    description: 'İleri matematik konuları ve uygulamaları',
+    teacherId: 'teacher1',
+    teacherName: 'Prof. Dr. Mehmet Özkan',
+    scheduledStartTime: new Date(Date.now() - 300000).toISOString(), // 5 minutes ago (can join)
+    startTime: '',
+    isActive: false,
+    isScheduled: true,
+    participantCount: 0,
+    maxParticipants: 30,
+    subject: 'Matematik',
+    duration: 90,
+  },
+  {
+    id: '2',
+    name: 'Fizik 201 - Kuantum Mekaniği',
+    description: 'Modern fizik ve kuantum teorisi temelleri',
+    teacherId: 'teacher2',
+    teacherName: 'Dr. Ayşe Kaya',
+    scheduledStartTime: new Date(Date.now() + 1800000).toISOString(), // 30 minutes from now
+    startTime: '',
+    isActive: false,
+    isScheduled: true,
+    participantCount: 0,
+    maxParticipants: 25,
+    subject: 'Fizik',
+    duration: 120,
+  },
+  {
+    id: '3',
+    name: 'Kimya 301 - Organik Kimya',
+    description: 'Organik bileşikler ve reaksiyon mekanizmaları',
+    teacherId: 'current-teacher',
+    teacherName: 'Dr. Ali Veli',
+    scheduledStartTime: new Date(Date.now() - 120000).toISOString(), // 2 minutes ago (can join)
+    startTime: '',
+    isActive: false,
+    isScheduled: true,
+    participantCount: 0,
+    maxParticipants: 20,
+    subject: 'Kimya',
+    duration: 75,
+  },
+]
diff --git a/ui/src/proxy/classroom/models.ts b/ui/src/proxy/classroom/models.ts
new file mode 100644
index 00000000..1ec43a2d
--- /dev/null
+++ b/ui/src/proxy/classroom/models.ts
@@ -0,0 +1,135 @@
+export type Role = 'teacher' | 'student' | 'observer'
+
+export interface User {
+  id: string
+  name: string
+  email: string
+  role: Role
+}
+
+export interface ClassroomDto {
+  id: string
+  name: string
+  description?: string
+  teacherId: string
+  teacherName: string
+  startTime: string
+  scheduledStartTime: string
+  endTime?: string
+  isActive: boolean
+  isScheduled: boolean
+  participantCount: number
+  maxParticipants?: number
+  subject?: string
+  duration?: number // in minutes
+  settings?: ClassroomSettingsDto
+}
+
+export interface ClassroomSettingsDto {
+  allowHandRaise: boolean
+  defaultMicrophoneState: 'muted' | 'unmuted'
+  defaultCameraState: 'on' | 'off'
+  defaultLayout: string
+  allowStudentScreenShare: boolean
+  allowStudentChat: boolean
+  allowPrivateMessages: boolean
+  autoMuteNewParticipants: boolean
+  recordSession: boolean
+  waitingRoomEnabled: boolean
+}
+
+export interface ClassAttendanceDto {
+  id: string
+  sessionId: string
+  studentId: string
+  studentName: string
+  joinTime: string
+  leaveTime?: string
+  totalDurationMinutes: number
+}
+
+export type MediaType = 'audio' | 'video' | 'screen'
+
+export interface SignalingMessageDto {
+  type: MediaType
+  fromUserId: string
+  toUserId: string
+  data: any
+}
+
+export interface ClassParticipantDto {
+  id: string
+  name: string
+  isTeacher: boolean
+  isObserver?: boolean
+  isAudioMuted?: boolean
+  isVideoMuted?: boolean
+  stream?: MediaStream
+  screenStream?: MediaStream
+  isScreenSharing?: boolean
+  peerConnection?: RTCPeerConnection
+}
+
+export type messageType = 'public' | 'private' | 'announcement'
+
+export interface ClassChatDto {
+  id: string
+  senderId: string
+  senderName: string
+  message: string
+  timestamp: string
+  isTeacher: boolean
+  recipientId?: string // Özel mesaj için
+  recipientName?: string
+  messageType: messageType
+}
+
+export type VideoLayoutType = 'grid' | 'sidebar' | 'teacher-focus'
+
+export interface VideoLayoutDto {
+  id: string
+  name: string
+  type: VideoLayoutType
+  description: string
+}
+
+export interface TeacherLayoutDto extends VideoLayoutDto {
+  id: 'teacher-focus'
+  name: 'Öğretmen Odaklı'
+  type: 'teacher-focus'
+  description: 'Öğretmen tam ekranda, öğrenciler küçük panelde'
+}
+
+export interface ScheduledClassDto {
+  id: string
+  name: string
+  scheduledTime: string
+  duration: number
+  canJoin: boolean
+}
+
+export interface HandRaiseDto {
+  id: string
+  studentId: string
+  studentName: string
+  timestamp: string
+  isActive: boolean
+}
+
+export interface ClassDocumentDto {
+  id: string
+  name: string
+  url: string
+  type: string
+  size: number
+  uploadedAt: string
+  uploadedBy: string
+  isPresentation?: boolean
+  totalPages?: number
+}
+
+export interface ScreenShareRequestDto {
+  userId: string
+  userName: string
+  isActive: boolean
+}
diff --git a/ui/src/routes/route.constant.ts b/ui/src/routes/route.constant.ts
index 5293bf2e..d6134edc 100644
--- a/ui/src/routes/route.constant.ts
+++ b/ui/src/routes/route.constant.ts
@@ -76,6 +76,11 @@ export const ROUTES_ENUM = {
       formEdit: '/admin/form/:listFormCode/:id/edit',
       chart: '/admin/chart/:chartCode',
       pivot: '/admin/pivot/:listFormCode',
+      classroom: {
+        dashboard: '/admin/classroom/dashboard',
+        classes: '/admin/classroom/classes',
+        classroom: '/admin/classroom/room/:id',
+      },
     },
     accessDenied: '/admin/access-denied',
   },
diff --git a/ui/src/services/classroom/signalr.ts b/ui/src/services/classroom/signalr.ts
new file mode 100644
index 00000000..edbd3a41
--- /dev/null
+++ b/ui/src/services/classroom/signalr.ts
@@ -0,0 +1,394 @@
+import {
+  ClassAttendanceDto,
+  ClassChatDto,
+  HandRaiseDto,
+  SignalingMessageDto,
+} from '@/proxy/classroom/models'
+import * as signalR from '@microsoft/signalr'
+
+export class SignalRService {
+  private connection!: signalR.HubConnection
+  private isConnected: boolean = false
+  private demoMode: boolean = true // Start in demo mode by default
+  private onSignalingMessage?: (message: SignalingMessageDto) => void
+  private onAttendanceUpdate?: (record: ClassAttendanceDto) => void
+  private onParticipantJoined?: (userId: string, name: string) => void
+  private onParticipantLeft?: (userId: string) => void
+  private onChatMessage?: (message: ClassChatDto) => void
+  private onParticipantMuted?: (userId: string, isMuted: boolean) => void
+  private onHandRaiseReceived?: (handRaise: HandRaiseDto) => void
+  private onHandRaiseDismissed?: (handRaiseId: string) => void
+
+  constructor() {
+    // Only initialize connection if not in demo mode
+    if (!this.demoMode) {
+      // In production, replace with your actual SignalR hub URL
+      this.connection = new signalR.HubConnectionBuilder()
+        .withUrl('https://localhost:5001/classroomhub', {
+          skipNegotiation: true,
+          transport: signalR.HttpTransportType.WebSockets,
+        })
+        .withAutomaticReconnect()
+        .build()
+
+      this.setupEventHandlers()
+    }
+  }
+
+  private setupEventHandlers() {
+    if (this.demoMode || !this.connection) return
+
+    this.connection.on('ReceiveSignalingMessage', (message: SignalingMessageDto) => {
+      this.onSignalingMessage?.(message)
+    })
+
+    this.connection.on('AttendanceUpdated', (record: ClassAttendanceDto) => {
+      this.onAttendanceUpdate?.(record)
+    })
+
+    this.connection.on('ParticipantJoined', (userId: string, name: string) => {
+      this.onParticipantJoined?.(userId, name)
+    })
+
+    this.connection.on('ParticipantLeft', (userId: string) => {
+      this.onParticipantLeft?.(userId)
+    })
+
+    this.connection.on('ChatMessage', (message: any) => {
+      this.onChatMessage?.(message)
+    })
+
+    this.connection.on('ParticipantMuted', (userId: string, isMuted: boolean) => {
+      this.onParticipantMuted?.(userId, isMuted)
+    })
+
+    this.connection.on('HandRaiseReceived', (handRaise: HandRaiseDto) => {
+      this.onHandRaiseReceived?.(handRaise)
+    })
+
+    this.connection.on('HandRaiseDismissed', (handRaiseId: string) => {
+      this.onHandRaiseDismissed?.(handRaiseId)
+    })
+
+    this.connection.onreconnected(() => {
+      console.log('SignalR reconnected')
+    })
+
+    this.connection.onclose(() => {
+      console.log('SignalR connection closed')
+    })
+  }
+
+  async start(): Promise<void> {
+    if (this.demoMode) {
+      console.log('SignalR running in demo mode - no backend connection required')
+      return
+    }
+
+    try {
+      await this.connection.start()
+      this.isConnected = true
+      console.log('SignalR connection started')
+    } catch (error) {
+      console.error('Error starting SignalR connection:', error)
+      // Switch to demo mode if connection fails
+      this.demoMode = true
+      this.isConnected = false
+      console.log('Switched to demo mode - SignalR simulation active')
+    }
+  }
+
+  async joinClass(sessionId: string, userId: string, userName: string): Promise<void> {
+    if (this.demoMode || !this.isConnected) {
+      console.log('Demo mode: Simulating join class for', userName)
+      // Simulate successful join in demo mode
+      // Don't auto-add participants in demo mode - let manual simulation handle this
+      return
+    }
+
+    try {
+      await this.connection.invoke('JoinClass', sessionId, userId, userName)
+    } catch (error) {
+      console.error('Error joining class:', error)
+    }
+  }
+
+  async leaveClass(sessionId: string, userId: string): Promise<void> {
+    if (this.demoMode || !this.isConnected) {
+      console.log('Demo mode: Simulating leave class for user', userId)
+      // Simulate successful leave in demo mode
+      setTimeout(() => {
+        this.onParticipantLeft?.(userId)
+      }, 100)
+      return
+    }
+
+    try {
+      await this.connection.invoke('LeaveClass', sessionId, userId)
+    } catch (error) {
+      console.error('Error leaving class:', error)
+    }
+  }
+
+  async sendSignalingMessage(message: SignalingMessageDto): Promise<void> {
+    if (this.demoMode || !this.isConnected) {
+      console.log('Demo mode: Simulating signaling message', message.type)
+      // In demo mode, we can't send real signaling messages
+      // WebRTC will need to work in local-only mode
+      return
+    }
+
+    try {
+      await this.connection.invoke('SendSignalingMessage', message)
+    } catch (error) {
+      console.error('Error sending signaling message:', error)
+    }
+  }
+
+  async sendChatMessage(
+    sessionId: string,
+    senderId: string,
+    senderName: string,
+    message: string,
+    isTeacher: boolean,
+  ): Promise<void> {
+    if (this.demoMode || !this.isConnected) {
+      console.log('Demo mode: Simulating chat message from', senderName)
+      const chatMessage: ClassChatDto = {
+        id: `msg-${Date.now()}`,
+        senderId,
+        senderName,
+        message,
+        timestamp: new Date().toISOString(),
+        isTeacher,
+        messageType: 'public',
+      }
+      setTimeout(() => {
+        this.onChatMessage?.(chatMessage)
+      }, 100)
+      return
+    }
+
+    try {
+      await this.connection.invoke(
+        'SendChatMessage',
+        sessionId,
+        senderId,
+        senderName,
+        message,
+        isTeacher,
+        'public',
+      )
+    } catch (error) {
+      console.error('Error sending chat message:', error)
+    }
+  }
+
+  async sendPrivateMessage(
+    sessionId: string,
+    senderId: string,
+    senderName: string,
+    message: string,
+    recipientId: string,
+    recipientName: string,
+    isTeacher: boolean,
+  ): Promise<void> {
+    if (this.demoMode || !this.isConnected) {
+      console.log('Demo mode: Simulating private message from', senderName, 'to', recipientName)
+      const chatMessage: ClassChatDto = {
+        id: `msg-${Date.now()}`,
+        senderId,
+        senderName,
+        message,
+        timestamp: new Date().toISOString(),
+        isTeacher,
+        recipientId,
+        recipientName,
+        messageType: 'private',
+      }
+      setTimeout(() => {
+        this.onChatMessage?.(chatMessage)
+      }, 100)
+      return
+    }
+
+    try {
+      await this.connection.invoke(
+        'SendPrivateMessage',
+        sessionId,
+        senderId,
+        senderName,
+        message,
+        recipientId,
+        recipientName,
+        isTeacher,
+      )
+    } catch (error) {
+      console.error('Error sending private message:', error)
+    }
+  }
+
+  async sendAnnouncement(
+    sessionId: string,
+    senderId: string,
+    senderName: string,
+    message: string,
+  ): Promise<void> {
+    if (this.demoMode || !this.isConnected) {
+      console.log('Demo mode: Simulating announcement from', senderName)
+      const chatMessage: ClassChatDto = {
+        id: `msg-${Date.now()}`,
+        senderId,
+        senderName,
+        message,
+        timestamp: new Date().toISOString(),
+        isTeacher: true,
+        messageType: 'announcement',
+      }
+      setTimeout(() => {
+        this.onChatMessage?.(chatMessage)
+      }, 100)
+      return
+    }
+
+    try {
+      await this.connection.invoke('SendAnnouncement', sessionId, senderId, senderName, message)
+    } catch (error) {
+      console.error('Error sending chat message:', error)
+    }
+  }
+
+  async muteParticipant(sessionId: string, userId: string, isMuted: boolean): Promise<void> {
+    if (this.demoMode || !this.isConnected) {
+      console.log('Demo mode: Simulating mute participant', userId, isMuted)
+      setTimeout(() => {
+        this.onParticipantMuted?.(userId, isMuted)
+      }, 100)
+      return
+    }
+
+    try {
+      await this.connection.invoke('MuteParticipant', sessionId, userId, isMuted)
+    } catch (error) {
+      console.error('Error muting participant:', error)
+    }
+  }
+
+  async raiseHand(sessionId: string, studentId: string, studentName: string): Promise<void> {
+    if (this.demoMode || !this.isConnected) {
+      console.log('Demo mode: Simulating hand raise from', studentName)
+      const handRaise: HandRaiseDto = {
+        id: `hand-${Date.now()}`,
+        studentId,
+        studentName,
+        timestamp: new Date().toISOString(),
+        isActive: true,
+      }
+      setTimeout(() => {
+        this.onHandRaiseReceived?.(handRaise)
+      }, 100)
+      return
+    }
+
+    try {
+      await this.connection.invoke('RaiseHand', sessionId, studentId, studentName)
+    } catch (error) {
+      console.error('Error raising hand:', error)
+    }
+  }
+
+  async kickParticipant(sessionId: string, participantId: string): Promise<void> {
+    if (this.demoMode || !this.isConnected) {
+      console.log('Demo mode: Simulating kick participant', participantId)
+      setTimeout(() => {
+        this.onParticipantLeft?.(participantId)
+      }, 100)
+      return
+    }
+
+    try {
+      await this.connection.invoke('KickParticipant', sessionId, participantId)
+    } catch (error) {
+      console.error('Error kicking participant:', error)
+    }
+  }
+
+  async approveHandRaise(sessionId: string, handRaiseId: string): Promise<void> {
+    if (this.demoMode || !this.isConnected) {
+      console.log('Demo mode: Simulating hand raise approval')
+      setTimeout(() => {
+        this.onHandRaiseDismissed?.(handRaiseId)
+      }, 100)
+      return
+    }
+
+    try {
+      await this.connection.invoke('ApproveHandRaise', sessionId, handRaiseId)
+    } catch (error) {
+      console.error('Error approving hand raise:', error)
+    }
+  }
+
+  async dismissHandRaise(sessionId: string, handRaiseId: string): Promise<void> {
+    if (this.demoMode || !this.isConnected) {
+      console.log('Demo mode: Simulating hand raise dismissal')
+      setTimeout(() => {
+        this.onHandRaiseDismissed?.(handRaiseId)
+      }, 100)
+      return
+    }
+
+    try {
+      await this.connection.invoke('DismissHandRaise', sessionId, handRaiseId)
+    } catch (error) {
+      console.error('Error dismissing hand raise:', error)
+    }
+  }
+
+  setSignalingHandler(callback: (message: SignalingMessageDto) => void) {
+    this.onSignalingMessage = callback
+  }
+
+  setAttendanceUpdatedHandler(callback: (record: ClassAttendanceDto) => void) {
+    this.onAttendanceUpdate = callback
+  }
+
+  setParticipantJoinHandler(callback: (userId: string, name: string) => void) {
+    this.onParticipantJoined = callback
+  }
+
+  setParticipantLeaveHandler(callback: (userId: string) => void) {
+    this.onParticipantLeft = callback
+  }
+
+  setChatMessageReceivedHandler(callback: (message: ClassChatDto) => void) {
+    this.onChatMessage = callback
+  }
+
+  setParticipantMutedHandler(callback: (userId: string, isMuted: boolean) => void) {
+    this.onParticipantMuted = callback
+  }
+
+  setHandRaiseReceivedHandler(callback: (handRaise: HandRaiseDto) => void) {
+    this.onHandRaiseReceived = callback
+  }
+
+  setHandRaiseDismissedHandler(callback: (handRaiseId: string) => void) {
+    this.onHandRaiseDismissed = callback
+  }
+
+  async disconnect(): Promise<void> {
+    if (this.isConnected && this.connection) {
+      await this.connection.stop()
+      this.isConnected = false
+    }
+  }
+
+  isInDemoMode(): boolean {
+    return this.demoMode
+  }
+
+  getConnectionState(): boolean {
+    return this.isConnected
+  }
+}
diff --git a/ui/src/services/classroom/webrtc.ts b/ui/src/services/classroom/webrtc.ts
new file mode 100644
index 00000000..975eeb75
--- /dev/null
+++ b/ui/src/services/classroom/webrtc.ts
@@ -0,0 +1,150 @@
+export class WebRTCService {
+  private peerConnections: Map<string, RTCPeerConnection> = new Map()
+  private localStream: MediaStream | null = null
+  private onRemoteStream?: (userId: string, stream: MediaStream) => void
+
+  // STUN servers for NAT traversal
+  private rtcConfiguration: RTCConfiguration = {
+    iceServers: [
+      { urls: 'stun:stun.l.google.com:19302' },
+      { urls: 'stun:stun1.l.google.com:19302' },
+    ],
+  }
+
+  async initializeLocalStream(): Promise<MediaStream> {
+    try {
+      this.localStream = await navigator.mediaDevices.getUserMedia({
+        video: {
+          width: { ideal: 1280 },
+          height: { ideal: 720 },
+          frameRate: { ideal: 30 },
+        },
+        audio: {
+          echoCancellation: true,
+          noiseSuppression: true,
+          autoGainControl: true,
+        },
+      })
+      return this.localStream
+    } catch (error) {
+      console.error('Error accessing media devices:', error)
+      throw error
+    }
+  }
+
+  async createPeerConnection(userId: string): Promise<RTCPeerConnection> {
+    const peerConnection = new RTCPeerConnection(this.rtcConfiguration)
+    this.peerConnections.set(userId, peerConnection)
+
+    // Add local stream tracks to peer connection
+    if (this.localStream) {
+      this.localStream.getTracks().forEach((track) => {
+        peerConnection.addTrack(track, this.localStream!)
+      })
+    }
+
+    // Handle remote stream
+    peerConnection.ontrack = (event) => {
+      const [remoteStream] = event.streams
+      console.log('Remote stream received from user:', userId)
+      this.onRemoteStream?.(userId, remoteStream)
+    }
+
+    // Handle ICE candidates
+    peerConnection.onicecandidate = (event) => {
+      if (event.candidate) {
+        console.log('ICE candidate generated for user:', userId, event.candidate)
+        // In a real implementation, this would be sent via SignalR
+      }
+    }
+
+    peerConnection.onconnectionstatechange = () => {
+      console.log(`Connection state for ${userId}:`, peerConnection.connectionState)
+      if (peerConnection.connectionState === 'connected') {
+        console.log(`Successfully connected to ${userId}`)
+      }
+    }
+
+    return peerConnection
+  }
+
+  async createOffer(userId: string): Promise<RTCSessionDescriptionInit> {
+    const peerConnection = this.peerConnections.get(userId)
+    if (!peerConnection) throw new Error('Peer connection not found')
+
+    const offer = await peerConnection.createOffer()
+    await peerConnection.setLocalDescription(offer)
+    return offer
+  }
+
+  async createAnswer(
+    userId: string,
+    offer: RTCSessionDescriptionInit,
+  ): Promise<RTCSessionDescriptionInit> {
+    const peerConnection = this.peerConnections.get(userId)
+    if (!peerConnection) throw new Error('Peer connection not found')
+
+    await peerConnection.setRemoteDescription(offer)
+    const answer = await peerConnection.createAnswer()
+    await peerConnection.setLocalDescription(answer)
+    return answer
+  }
+
+  async handleAnswer(userId: string, answer: RTCSessionDescriptionInit): Promise<void> {
+    const peerConnection = this.peerConnections.get(userId)
+    if (!peerConnection) throw new Error('Peer connection not found')
+
+    await peerConnection.setRemoteDescription(answer)
+  }
+
+  async addIceCandidate(userId: string, candidate: RTCIceCandidateInit): Promise<void> {
+    const peerConnection = this.peerConnections.get(userId)
+    if (!peerConnection) throw new Error('Peer connection not found')
+
+    await peerConnection.addIceCandidate(candidate)
+  }
+
+  onRemoteStreamReceived(callback: (userId: string, stream: MediaStream) => void) {
+    this.onRemoteStream = callback
+  }
+
+  toggleVideo(enabled: boolean): void {
+    if (this.localStream) {
+      const videoTrack = this.localStream.getVideoTracks()[0]
+      if (videoTrack) {
+        videoTrack.enabled = enabled
+      }
+    }
+  }
+
+  toggleAudio(enabled: boolean): void {
+    if (this.localStream) {
+      const audioTrack = this.localStream.getAudioTracks()[0]
+      if (audioTrack) {
+        audioTrack.enabled = enabled
+      }
+    }
+  }
+
+  getLocalStream(): MediaStream | null {
+    return this.localStream
+  }
+
+  closePeerConnection(userId: string): void {
+    const peerConnection = this.peerConnections.get(userId)
+    if (peerConnection) {
+      peerConnection.close()
+      this.peerConnections.delete(userId)
+    }
+  }
+
+  closeAllConnections(): void {
+    this.peerConnections.forEach((pc) => pc.close())
+    this.peerConnections.clear()
+
+    if (this.localStream) {
+      this.localStream.getTracks().forEach((track) => track.stop())
+      this.localStream = null
+    }
+  }
+}
diff --git a/ui/src/store/auth.model.ts b/ui/src/store/auth.model.ts
index 4c496233..58866a0f 100644
--- a/ui/src/store/auth.model.ts
+++ b/ui/src/store/auth.model.ts
@@ -20,6 +20,7 @@ export interface AuthStoreModel {
     authority: string[]
     name: string
     avatar?: string
+    role: string
   }
   tenant?: {
     tenantId?: string
@@ -56,6 +57,7 @@ export const initialState: AuthStoreModel = {
     authority: [],
     name: '',
     avatar: '',
+    role: 'teacher',
   },
   tenant: {
     tenantId: '',
@@ -101,6 +103,7 @@ export const authModel: AuthModel = {
       state.authority = payload.authority
       state.email = payload.email
       state.avatar = payload.avatar
+      state.role = payload.role
     }),
   },
   tenant: {
diff --git a/ui/src/utils/hooks/useClassroomLogic.ts b/ui/src/utils/hooks/useClassroomLogic.ts
new file mode 100644
index 00000000..cbe330a0
--- /dev/null
+++ b/ui/src/utils/hooks/useClassroomLogic.ts
@@ -0,0 +1,68 @@
+import { ClassroomDto } from '@/proxy/classroom/models'
+import { useStoreActions, useStoreState } from '@/store/store'
+import { useState } from 'react'
+
+export type RoleState = 'role-selection' | 'dashboard' | 'classroom'
+
+export function useClassroomLogic() {
+  const { user } = useStoreState((state) => state.auth)
+  const { setUser } = useStoreActions((actions) => actions.auth.user)
+
+  const [roleState, setRoleState] = useState<RoleState>('role-selection')
+  const [currentClass, setCurrentClass] = useState<ClassroomDto | null>(null)
+  const [allClasses, setAllClasses] = useState<ClassroomDto[]>([])
+
+  const handleRoleSelect = (role: 'teacher' | 'student' | 'observer') => {
+    setUser({
+      ...user,
+      role,
+    })
+    setRoleState('dashboard')
+  }
+
+  const handleJoinClass = (classSession: ClassroomDto, userName?: string) => {
+    setCurrentClass(classSession)
+    setRoleState('classroom')
+  }
+
+  const handleLeaveClass = () => {
+    setCurrentClass(null)
+    setRoleState('dashboard')
+  }
+
+  const handleCreateClass = (classData: Partial<ClassroomDto>) => {
+    const newClass = {
+      ...classData,
+      id: `class-${Date.now()}`,
+      teacherId: '',
+      teacherName: '',
+      isActive: false,
+      isScheduled: true,
+      participantCount: 0,
+    } as ClassroomDto
+    setAllClasses((prev) => [...prev, newClass])
+  }
+
+  const handleEditClass = (classId: string, classData: Partial<ClassroomDto>) => {
+    setAllClasses((prev) => prev.map((c) => (c.id === classId ? { ...c, ...classData } : c)))
+  }
+
+  const handleDeleteClass = (classId: string) => {
+    setAllClasses((prev) => prev.filter((c) => c.id !== classId))
+  }
+
+  return {
+    appState: roleState,
+    setAppState: setRoleState,
+    currentClass,
+    setCurrentClass,
+    allClasses,
+    setAllClasses,
+    handleRoleSelect,
+    handleJoinClass,
+    handleLeaveClass,
+    handleCreateClass,
+    handleEditClass,
+    handleDeleteClass,
+  }
+}
diff --git a/ui/src/views/classroom/ClassListPage.tsx b/ui/src/views/classroom/ClassListPage.tsx
new file mode 100644
index 00000000..39dcb525
--- /dev/null
+++ b/ui/src/views/classroom/ClassListPage.tsx
@@ -0,0 +1,15 @@
+import { ClassList } from '@/components/classroom/ClassList'
+import React from 'react'
+
+const ClassListPage: React.FC = () => {
+  return (
+    <ClassList
+      onCreateClass={() => {}}
+      onJoinClass={() => {}}
+      onEditClass={() => {}}
+      onDeleteClass={() => {}}
+    />
+  )
+}
+
+export default ClassListPage
diff --git a/ui/src/views/classroom/DashboardPage.tsx b/ui/src/views/classroom/DashboardPage.tsx
new file mode 100644
index 00000000..983f3aa0
--- /dev/null
+++ b/ui/src/views/classroom/DashboardPage.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import { Dashboard } from '@/components/classroom/Dashboard'
+
+const DashboardPage: React.FC = () => {
+  return <Dashboard />
+}
+
+export default DashboardPage
diff --git a/ui/src/views/classroom/RoomPage.tsx b/ui/src/views/classroom/RoomPage.tsx
new file mode 100644
index 00000000..d94e04cc
--- /dev/null
+++ b/ui/src/views/classroom/RoomPage.tsx
@@ -0,0 +1,23 @@
+import { Room } from '@/components/classroom/Room'
+import React from 'react'
+
+const RoomPage: React.FC = () => {
+  return (
+    <Room
+      classSession={{
+        id: '',
+        name: '',
+        teacherId: '',
+        teacherName: '',
+        startTime: '',
+        scheduledStartTime: '',
+        isActive: false,
+        isScheduled: false,
+        participantCount: 0,
+      }}
+      onLeaveClass={() => {}}
+    />
+  )
+}
+
+export default RoomPage