Classroom düzenlemesi

ui/src/components/classroom/ClassList.tsx

@@ -16,14 +16,14 @@ import { initialScheduledClasses } from '@/proxy/classroom/data'
 import { useStoreState } from '@/store/store'
 import { ROUTES_ENUM } from '@/routes/route.constant'
 
-interface DashboardProps {
+interface ClassListProps {
   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> = ({
+export const ClassList: React.FC<ClassListProps> = ({
   onCreateClass,
   onJoinClass,
   onEditClass,
@@ -239,33 +239,9 @@ export const ClassList: React.FC<DashboardProps> = ({
   }
 
   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">
+      <div className="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
@@ -327,8 +303,18 @@ export const ClassList: React.FC<DashboardProps> = ({
 
         {/* Scheduled Classes */}
         <div className="bg-white rounded-lg shadow-md">
-          <div className="px-4 sm:px-6 py-4 border-b border-gray-200">
+          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 p-4 sm:px-6 border-b border-gray-200">
             <h2 className="text-lg sm:text-xl font-semibold text-gray-900">Programlı Sınıflar</h2>
+            {user.role === 'teacher' && (
+              <button
+                onClick={() => setShowCreateModal(true)}
+                className="flex items-center justify-center space-x-2 bg-blue-600 text-white px-3 sm:px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors sm:w-auto"
+              >
+                <FaPlus size={15} />
+                <span className="hidden sm:inline">Yeni Sınıf Oluştur</span>
+                <span className="sm:hidden">Yeni Sınıf</span>
+              </button>
+            )}
           </div>
           <div className="p-4 sm:p-6">
             {scheduledClasses.length === 0 ? (
@@ -346,14 +332,13 @@ export const ClassList: React.FC<DashboardProps> = ({
                     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 flex-col sm:flex-row sm:items-center sm:justify-between mb-2">
-                      <div className="flex-1">
+                      <div className="flex items-center space-x-3">
-                        <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 ${
+                          className={`px-2 py-1 rounded-full text-xs font-medium ${
                             classSession.isActive
                               ? 'bg-green-100 text-green-800'
                               : canJoinClass(classSession.scheduledStartTime)
@@ -369,59 +354,32 @@ export const ClassList: React.FC<DashboardProps> = ({
                         </span>
                       </div>
 
-                        <p className="text-gray-600 mb-3 text-sm sm:text-base">
+                      {/* Sağ kısım: buton */}
-                          {classSession.description}
+                      {canJoinClass(classSession.scheduledStartTime) && (
-                        </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">
+                          {user.role === 'teacher' && classSession.teacherId === user.id && (
+                            <>
                               <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"
+                                className="flex px-3 sm:px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700"
                                 title="Sınıfı Düzenle"
                               >
                                 <FaEdit size={14} />
+                                Düzenle
                               </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"
+                                className="flex px-3 sm:px-4 py-2 rounded-lg bg-red-600 text-white hover:bg-red-700"
                                 title="Sınıfı Sil"
                               >
                                 <FaTrash size={14} />
+                                Sil
                               </button>
-                          </div>
+                            </>
                           )}
 
-                        {canJoinClass(classSession.scheduledStartTime) && (
                           <button
                             onClick={() =>
                               user.role === 'teacher' && classSession.teacherId === user.id
@@ -437,7 +395,7 @@ export const ClassList: React.FC<DashboardProps> = ({
                                       )
                                   })()
                             }
-                            className={`px-3 sm:px-4 py-2 rounded-lg font-medium transition-colors text-sm sm:text-base w-full sm:w-auto ${
+                            className={`px-3 sm:px-4 py-2 rounded-lg transition-colors  ${
                               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'
@@ -449,8 +407,44 @@ export const ClassList: React.FC<DashboardProps> = ({
                                 : 'Dersi Başlat'
                               : 'Katıl'}
                           </button>
+                        </div>
                       )}
                     </div>
+
+                    <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
+                      <p className="text-gray-600 mb-3 text-sm sm:text-base">
+                        {classSession.description}
+                      </p>
+                    </div>
+
+                    <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
+                      <div className="grid grid-cols-4 gap-3 w-full text-xs sm:text-sm text-gray-600">
+                        <div className="col-span-1 flex items-center gap-2 px-3 py-2 rounded-lg">
+                          <FaCalendarAlt size={14} className="text-gray-500" />
+                          <span className="truncate">
+                            {formatDateTime(classSession.scheduledStartTime)}
+                          </span>
+                        </div>
+
+                        <div className="col-span-1 flex items-center gap-2 px-3 py-2 rounded-lg">
+                          <FaClock size={14} className="text-gray-500" />
+                          <span>{classSession.duration} dakika</span>
+                        </div>
+
+                        <div className="col-span-1 flex items-center gap-2 px-3 py-2 rounded-lg">
+                          <FaUsers size={14} className="text-gray-500" />
+                          <span>
+                            {classSession.participantCount}/{classSession.maxParticipants}
+                          </span>
+                        </div>
+
+                        <div className="col-span-1 flex items-center gap-2 px-3 py-2 rounded-lg">
+                          <FaEye size={14} className="text-gray-500" />
+                          <span className="truncate">
+                            {getTimeUntilClass(classSession.scheduledStartTime)}
+                          </span>
+                        </div>
+                      </div>
                     </div>
                   </motion.div>
                 ))}
@@ -468,7 +462,7 @@ export const ClassList: React.FC<DashboardProps> = ({
             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">
+            <div className="p-3 sm:p-3 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>
 
@@ -478,9 +472,10 @@ export const ClassList: React.FC<DashboardProps> = ({
                 <input
                   type="text"
                   required
+                  autoFocus
                   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"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                   placeholder="Örn: Matematik 101 - Diferansiyel Denklemler"
                 />
               </div>
@@ -491,7 +486,7 @@ export const ClassList: React.FC<DashboardProps> = ({
                   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"
+                  className="w-full px-3 py-2 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>
@@ -505,7 +500,7 @@ export const ClassList: React.FC<DashboardProps> = ({
                     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"
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                     placeholder="Örn: Matematik, Fizik, Kimya"
                   />
                 </div>
@@ -524,7 +519,7 @@ export const ClassList: React.FC<DashboardProps> = ({
                         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"
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                   />
                 </div>
               </div>
@@ -545,7 +540,7 @@ export const ClassList: React.FC<DashboardProps> = ({
                         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"
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                   />
                 </div>
 
@@ -564,14 +559,14 @@ export const ClassList: React.FC<DashboardProps> = ({
                         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"
+                    className="w-full px-3 py-2 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>
+                <h3 className="text-lg font-semibold text-gray-800 mb-2">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">
@@ -649,7 +644,7 @@ export const ClassList: React.FC<DashboardProps> = ({
                   <div className="space-y-4">
                     <h4 className="font-medium text-gray-700">Varsayılan Ayarlar</h4>
 
-                    <div>
+                    <div className="flex items-center justify-between">
                       <label className="block text-sm font-medium text-gray-700 mb-1">
                         Varsayılan mikrofon durumu
                       </label>
@@ -664,14 +659,14 @@ export const ClassList: React.FC<DashboardProps> = ({
                             },
                           })
                         }
-                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        className="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>
+                    <div className="flex items-center justify-between">
                       <label className="block text-sm font-medium text-gray-700 mb-1">
                         Varsayılan kamera durumu
                       </label>
@@ -686,14 +681,14 @@ export const ClassList: React.FC<DashboardProps> = ({
                             },
                           })
                         }
-                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        className="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>
+                    <div className="flex items-center justify-between">
                       <label className="block text-sm font-medium text-gray-700 mb-1">
                         Varsayılan layout
                       </label>
@@ -708,7 +703,7 @@ export const ClassList: React.FC<DashboardProps> = ({
                             },
                           })
                         }
-                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        className="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>

ui/src/components/classroom/Dashboard.tsx

@@ -6,30 +6,31 @@ import { ROUTES_ENUM } from '@/routes/route.constant'
 import { Room } from './Room'
 
 export function Dashboard() {
-  const {
+  const { roleState, currentClass, handleRoleSelect, handleLeaveClass } = useClassroomLogic()
-    roleState,
-    currentClass,
-    handleRoleSelect,
-    handleJoinClass,
-    handleLeaveClass,
-    handleCreateClass,
-    handleEditClass,
-    handleDeleteClass,
-  } = useClassroomLogic()
   const navigate = useNavigate()
 
+  // Eğer dashboard seçildiyse otomatik yönlendirme yap
   useEffect(() => {
     if (roleState === 'dashboard') {
       navigate(ROUTES_ENUM.protected.admin.classroom.classes, { replace: true })
     }
   }, [roleState, navigate])
 
-  if (roleState === 'role-selection') {
+  // Render edilecek içerik
+  const renderContent = () => {
+    switch (roleState) {
+      case 'role-selection':
         return <RoleSelector onRoleSelect={handleRoleSelect} />
-  } else if (roleState === 'dashboard') {
+
-    return null
+      case 'classroom':
-  } else if (roleState === 'classroom' && currentClass) {
+        return currentClass ? (
-    return <Room classSession={currentClass} onLeaveClass={handleLeaveClass} />
+          <Room classSession={currentClass} onLeaveClass={handleLeaveClass} />
-  }
+        ) : null
+
+      default:
         return null
     }
+  }
+
+  return renderContent()
+}

ui/src/components/classroom/RoleSelector.tsx

@@ -9,7 +9,7 @@ interface RoleSelectorProps {
 
 export const RoleSelector: React.FC<RoleSelectorProps> = ({ onRoleSelect }) => {
   return (
-    <div className="min-h-screen flex items-center justify-center p-4">
+    <div className="flex items-center justify-center p-4">
       <motion.div
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}

ui/src/proxy/classroom/data.ts

@@ -3,7 +3,7 @@ export const initialScheduledClasses = [
     id: '1',
     name: 'Matematik 101 - Diferansiyel Denklemler',
     description: 'İleri matematik konuları ve uygulamaları',
-    teacherId: 'teacher1',
+    teacherId: '0cc64443-fe3b-5f2c-bb22-3a1bf7acd82a',
     teacherName: 'Prof. Dr. Mehmet Özkan',
     scheduledStartTime: new Date(Date.now() - 300000).toISOString(), // 5 minutes ago (can join)
     startTime: '',

ui/src/views/classroom/ClassListPage.tsx

@@ -1,14 +1,17 @@
 import { ClassList } from '@/components/classroom/ClassList'
+import { Container } from '@/components/shared'
 import React from 'react'
 
 const ClassListPage: React.FC = () => {
   return (
+    <Container>
       <ClassList
         onCreateClass={() => {}}
         onJoinClass={() => {}}
         onEditClass={() => {}}
         onDeleteClass={() => {}}
       />
+    </Container>
   )
 }
 

ui/src/views/classroom/DashboardPage.tsx

@@ -1,8 +1,13 @@
 import React from 'react'
 import { Dashboard } from '@/components/classroom/Dashboard'
+import { Container } from '@/components/shared'
 
 const DashboardPage: React.FC = () => {
-  return <Dashboard />
+  return (
+    <Container>
+      <Dashboard />
+    </Container>
+  )
 }
 
 export default DashboardPage