feat: Introduce a dark-themed, time-grid calendar with hall support, updating page styling and lesson data model.

prisma/schema.prisma

@@ -60,6 +60,7 @@ model Lesson {
   startTime    DateTime
   endTime      DateTime
   type         String
+  hallNumber   Int         @default(1)
   branchId     String
   instructorId String
   classId      String?

src/app/page.module.css

@@ -1,41 +1,37 @@
 .page {
-  --primary: #b21f1f;
+  --primary: #8ab4f8;
-  --secondary: #1a2a6c;
+  --secondary: #202124;
-  --accent: #fdbb2d;
+  --accent: #f28b82;
-  --bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  --bg: #000000;
   --white: #ffffff;
-  --text: #333333;
+  --text: #e8eaed;
-  --text-muted: #666666;
+  --text-muted: #9aa0a6;
 
   min-height: 100vh;
   display: flex;
   flex-direction: column;
-  background: var(--bg-gradient);
+  background: var(--bg);
   font-family: var(--font-outfit, 'Outfit', sans-serif);
   color: var(--text);
 }
 
 .nav {
-  padding: 1.5rem 4rem;
+  padding: 0.75rem 2rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background: rgba(255, 255, 255, 0.9);
+  background: #000000;
-  backdrop-filter: blur(10px);
+  border-bottom: 1px solid #3c4043;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
   position: sticky;
   top: 0;
   z-index: 1000;
 }
 
 .logo {
-  font-size: 1.5rem;
+  font-size: 1.2rem;
-  font-weight: 800;
+  font-weight: 700;
-  background: linear-gradient(to right, var(--secondary), var(--primary));
+  color: #e8eaed;
-  -webkit-background-clip: text;
+  letter-spacing: -0.5px;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  letter-spacing: -1px;
 }
 
 .adminLink {
@@ -56,10 +52,8 @@
 
 .main {
   flex: 1;
-  padding: 4rem 2rem;
   display: flex;
   flex-direction: column;
-  gap: 3rem;
 }
 
 .hero {
@@ -82,12 +76,7 @@
 }
 
 .footer {
-  padding: 2rem;
+  display: none;
-  text-align: center;
-  background: rgba(255, 255, 255, 0.5);
-  border-top: 1px solid rgba(0, 0, 0, 0.05);
-  color: var(--text-muted);
-  font-size: 0.9rem;
 }
 
 @media (max-width: 768px) {

src/app/page.tsx

@@ -14,6 +14,10 @@ export default async function Home() {
   const endOfWeek = new Date(startOfWeek);
   endOfWeek.setDate(endOfWeek.getDate() + 7);
 
+  // Get the first branch to determine hallCount (or you could add a selector)
+  const branch = await prisma.branch.findFirst();
+  const hallCount = branch?.hallCount || 1;
+
   const lessons = await prisma.lesson.findMany({
     where: {
       startTime: {
@@ -34,19 +38,15 @@ export default async function Home() {
   return (
     <div className={styles.page}>
       <nav className={styles.nav}>
-        <div className={styles.logo}>Dance School</div>
+        <div className={styles.logo}>{branch?.name || "Dance School"}</div>
         <Link href="/admin/dashboard" className={styles.adminLink}>
           Yönetici Paneli
         </Link>
       </nav>
 
       <main className={styles.main}>
-        <section className={styles.hero}>
-          <h1>Dansın Ritmini Keşfedin</h1>
-          <p>Haftalık kurs programımızı aşağıdan takip edebilirsiniz.</p>
-        </section>
 
-        <ScheduleCalendar lessons={lessons} />
+        <ScheduleCalendar lessons={lessons} hallCount={hallCount} />
       </main>
 
       <footer className={styles.footer}>

src/components/ScheduleCalendar.module.css

@@ -1,93 +1,213 @@
 .container {
-    padding: 2rem;
+    width: 100%;
-    max-width: 1200px;
+    height: 100vh;
-    margin: 0 auto;
+    background-color: #000000;
-    font-family: var(--font-outfit, 'Outfit', sans-serif);
+    color: #e8eaed;
+    font-family: var(--font-outfit, 'Outfit', -apple-system, sans-serif);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
 }
 
 .title {
     text-align: center;
-    margin-bottom: 2rem;
+    padding: 0.75rem 0;
-    font-size: 2.5rem;
+    margin: 0;
-    background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
+    font-size: 1.25rem;
-    -webkit-background-clip: text;
+    font-weight: 500;
-    background-clip: text;
+    border-bottom: 1px solid #3c4043;
-    -webkit-text-fill-color: transparent;
-    font-weight: 800;
 }
 
-.calendar {
+.calendarWrapper {
-    display: grid;
+    flex: 1;
-    grid-template-columns: repeat(7, 1fr);
+    overflow: auto;
-    gap: 1rem;
+    position: relative;
-    background: rgba(255, 255, 255, 0.8);
-    backdrop-filter: blur(10px);
-    border-radius: 16px;
-    padding: 1.5rem;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.dayColumn {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+}
+
+.stickyHeader {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background: #000;
+    border-bottom: 1px solid #3c4043;
+}
+
+.headerRow {
+    display: flex;
+    margin-left: 60px;
+    /* Space for time axis */
 }
 
 .dayHeader {
+    flex: 1;
+    min-width: 120px;
     text-align: center;
-    padding: 1rem;
+    padding: 0.5rem 0;
-    background: #333;
+    border-right: 1px solid #3c4043;
-    color: white;
+    font-size: 0.75rem;
-    border-radius: 8px;
+    color: #9aa0a6;
-    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.dayHeader:last-child {
+    border-right: none;
+}
+
+.today .dayHeader {
+    color: #8ab4f8;
+    font-weight: 700;
+}
+
+.hallLabelsRow {
+    display: flex;
+    margin-left: 60px;
+    border-top: 1px solid rgba(60, 64, 67, 0.3);
+}
+
+.hallLabel {
+    flex: 1;
+    min-width: calc(120px / var(--hall-count, 1));
+    text-align: center;
+    font-size: 0.65rem;
+    color: #5f6368;
+    padding: 2px 0;
+    border-right: 1px solid rgba(60, 64, 67, 0.3);
+}
+
+.gridContainer {
+    position: relative;
+    display: flex;
+    min-height: 1440px;
+    /* 24 hours * 60px */
+}
+
+.timeAxis {
+    width: 60px;
+    background: #000;
+    border-right: 1px solid #3c4043;
+    position: sticky;
+    left: 0;
+    z-index: 50;
+    /* Ensure time axis fills the height */
+    height: 1440px;
+}
+
+.timeLabel {
+    height: 60px;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-end;
+    padding-right: 8px;
+    font-size: 0.7rem;
+    color: #9aa0a6;
+    /* Center the text vertically at the hour mark */
+    position: relative;
+    top: -8px;
+}
+
+.mainGrid {
+    flex: 1;
+    display: flex;
+    background-image: linear-gradient(#3c4043 1px, transparent 1px);
+    background-size: 100% 60px;
+    position: relative;
+}
+
+.dayColumn {
+    flex: 1;
+    min-width: 120px;
+    border-right: 1px solid #3c4043;
+    display: flex;
+    position: relative;
+}
+
+.dayColumn:last-child {
+    border-right: none;
+}
+
+.hallColumn {
+    flex: 1;
+    position: relative;
+    border-right: 1px solid rgba(60, 64, 67, 0.2);
+}
+
+.hallColumn:last-child {
+    border-right: none;
+}
+
+.nowLine {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: #ea4335;
+    z-index: 10;
+    pointer-events: none;
+}
+
+.nowLine::before {
+    content: '';
+    position: absolute;
+    left: -4px;
+    top: -4px;
+    width: 10px;
+    height: 10px;
+    background: #ea4335;
+    border-radius: 50%;
 }
 
 .lessonCard {
-    background: white;
+    position: absolute;
-    padding: 1rem;
+    left: 3px;
-    border-radius: 8px;
+    right: 3px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+    background: rgba(138, 180, 248, 0.2);
-    border-left: 4px solid #b21f1f;
+    border: 1px solid #8ab4f8;
-    transition: transform 0.2s, box-shadow 0.2s;
+    border-radius: 4px;
-    cursor: default;
+    padding: 4px;
+    font-size: 0.7rem;
+    overflow: hidden;
+    cursor: pointer;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
 }
 
 .lessonCard:hover {
-    transform: translateY(-4px);
+    background: rgba(138, 180, 248, 0.3);
-    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+    z-index: 5;
+}
+
+.lessonCard[data-type="Individual"] {
+    background: rgba(242, 139, 130, 0.2);
+    border-color: #f28b82;
 }
 
 .lessonTime {
-    font-size: 0.85rem;
+    color: #8ab4f8;
-    color: #666;
     font-weight: 500;
-    display: block;
+    font-size: 0.65rem;
-    margin-bottom: 0.5rem;
 }
 
-.lessonName {
+.lessonCard[data-type="Individual"] .lessonTime {
-    font-size: 1.1rem;
+    color: #f28b82;
-    font-weight: 700;
-    color: #333;
-    margin-bottom: 0.5rem;
 }
 
-.lessonDetails {
+.lessonTitle {
-    font-size: 0.8rem;
+    font-weight: 600;
-    color: #888;
+    color: #fff;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
 }
 
-.empty {
+.lessonMeta {
-    text-align: center;
+    color: #9aa0a6;
-    padding: 2rem;
+    font-size: 0.6rem;
-    color: #aaa;
+    white-space: nowrap;
-    font-style: italic;
+    text-overflow: ellipsis;
-    grid-column: span 7;
+    overflow: hidden;
-}
-
-@media (max-width: 1024px) {
-    .calendar {
-        grid-template-columns: 1fr;
-    }
 }

src/components/ScheduleCalendar.tsx

@@ -1,6 +1,5 @@
 'use client';
-import { useMemo } from 'react';
+import { useMemo, useEffect, useRef, useState } from 'react';
-import styles from './ScheduleCalendar.module.css';
 
 interface Lesson {
     id: string;
@@ -10,71 +9,167 @@ interface Lesson {
     type: string;
     class?: { name: string } | null;
     instructor: { name: string };
-    branch: { name: string };
+    branch: { name: string; hallCount?: number | null };
+    hallNumber?: number | null;
 }
 
-export function ScheduleCalendar({ lessons }: { lessons: Lesson[] }) {
+export function ScheduleCalendar({ lessons, hallCount = 1 }: { lessons: Lesson[], hallCount?: number }) {
     const days = ['Pazartesi', 'Salı', 'Çarşamba', 'Perşembe', 'Cuma', 'Cumartesi', 'Pazar'];
+    const hours = Array.from({ length: 24 }, (_, i) => i);
+
+    const scrollRef = useRef<HTMLDivElement>(null);
+    const [now, setNow] = useState(new Date());
+
+    useEffect(() => {
+        const timer = setInterval(() => setNow(new Date()), 60000);
+        if (scrollRef.current) {
+            const currentHour = now.getHours();
+            const scrollHour = Math.max(0, currentHour - 2);
+            scrollRef.current.scrollTop = scrollHour * 60;
+        }
+        return () => clearInterval(timer);
+    }, []);
+
+    const nowTop = (now.getHours() * 60) + now.getMinutes();
 
-    // Group lessons by day
     const groupedLessons = useMemo(() => {
-        const groups: Record<number, Lesson[]> = {};
+        const groups: Record<number, Record<number, any[]>> = {};
         lessons.forEach(lesson => {
-            const date = new Date(lesson.startTime);
+            const start = new Date(lesson.startTime);
-            // JS getDay() returns 0 for Sunday, 1 for Monday etc.
+            const end = new Date(lesson.endTime);
-            // We want 0 for Monday, 6 for Sunday
+            let dayIndex = start.getDay() - 1;
-            let dayIndex = date.getDay() - 1;
             if (dayIndex === -1) dayIndex = 6;
-
+            const hallNum = lesson.hallNumber || 1;
-            if (!groups[dayIndex]) groups[dayIndex] = [];
+            const top = (start.getHours() * 60) + start.getMinutes();
-            groups[dayIndex].push(lesson);
+            const bottom = (end.getHours() * 60) + end.getMinutes();
+            if (!groups[dayIndex]) groups[dayIndex] = {};
+            if (!groups[dayIndex][hallNum]) groups[dayIndex][hallNum] = [];
+            groups[dayIndex][hallNum].push({
+                ...lesson,
+                top,
+                height: Math.max(bottom - top, 20),
+                startTimeStr: start.toLocaleTimeString('tr-TR', { hour: '2-digit', minute: '2-digit' })
             });
-
-        // Sort lessons by time in each day
-        Object.keys(groups).forEach(day => {
-            groups[parseInt(day)].sort((a, b) =>
-                new Date(a.startTime).getTime() - new Date(b.startTime).getTime()
-            );
         });
-
         return groups;
     }, [lessons]);
 
-    const formatTime = (dateStr: string | Date) => {
+    // Dimensions
-        const date = new Date(dateStr);
+    const timeWidth = 60;
-        return date.toLocaleTimeString('tr-TR', { hour: '2-digit', minute: '2-digit', hour12: false });
+    const dayMinWidth = 150;
-    };
+    const hallMinWidth = dayMinWidth / hallCount;
 
     return (
-        <div className={styles.container}>
+        <div style={{
-            <h1 className={styles.title}>Haftalık Ders Programı</h1>
+            width: '100%',
-            <div className={styles.calendar}>
+            height: '100vh',
-                {days.map((day, index) => (
+            backgroundColor: '#000',
-                    <div key={day} className={styles.dayColumn}>
+            color: '#fff',
-                        <div className={styles.dayHeader}>{day}</div>
+            display: 'flex',
-                        {groupedLessons[index]?.map(lesson => (
+            flexDirection: 'column',
-                            <div key={lesson.id} className={styles.lessonCard}>
+            overflow: 'hidden',
-                                <span className={styles.lessonTime}>
+            fontFamily: 'sans-serif'
-                                    {formatTime(lesson.startTime)} - {formatTime(lesson.endTime)}
+        }}>
-                                </span>
+            <h1 style={{ textAlign: 'center', padding: '10px', margin: 0, fontSize: '1.2rem', borderBottom: '1px solid #333' }}>
-                                <div className={styles.lessonName}>
+                Haftalık Ders Programı (Rebuilt)
-                                    {lesson.class?.name || lesson.name || 'İsimsiz Ders'}
+            </h1>
+
+            <div ref={scrollRef} style={{ flex: 1, overflow: 'auto', position: 'relative' }}>
+                {/* Header (Sticky) */}
+                <div style={{ position: 'sticky', top: 0, zIndex: 100, backgroundColor: '#000', borderBottom: '1px solid #333' }}>
+                    <div style={{ display: 'flex', marginLeft: timeWidth }}>
+                        {days.map((day, idx) => {
+                            const isToday = ((new Date().getDay() - 1 + 7) % 7) === idx;
+                            return (
+                                <div key={day} style={{
+                                    flex: 1,
+                                    minWidth: dayMinWidth,
+                                    textAlign: 'center',
+                                    padding: '8px 0',
+                                    borderRight: '1px solid #333',
+                                    fontSize: '0.8rem',
+                                    color: isToday ? '#8ab4f8' : '#9aa0a6',
+                                    fontWeight: isToday ? 'bold' : 'normal'
+                                }}>
+                                    {day}
                                 </div>
-                                <div className={styles.lessonDetails}>
+                            );
-                                    <div> Eğitmen: {lesson.instructor.name}</div>
+                        })}
-                                    <div> Şube: {lesson.branch.name}</div>
-                                    <div> Tür: {lesson.type}</div>
                     </div>
+                    {hallCount > 1 && (
+                        <div style={{ display: 'flex', marginLeft: timeWidth, borderTop: '1px solid #222' }}>
+                            {days.map((_, dIdx) => (
+                                <div key={dIdx} style={{ flex: 1, minWidth: dayMinWidth, display: 'flex' }}>
+                                    {Array.from({ length: hallCount }).map((_, hIdx) => (
+                                        <div key={hIdx} style={{
+                                            flex: 1,
+                                            textAlign: 'center',
+                                            fontSize: '0.6rem',
+                                            color: '#666',
+                                            borderRight: '1px solid #222',
+                                            padding: '2px 0'
+                                        }}>
+                                            S{hIdx + 1}
+                                        </div>
+                                    ))}
                                 </div>
                             ))}
-                        {(!groupedLessons[index] || groupedLessons[index].length === 0) && (
-                            <div style={{ textAlign: 'center', padding: '1rem', color: '#ccc', fontSize: '0.8rem' }}>
-                                Ders yok
                         </div>
                     )}
                 </div>
+
+                {/* Grid Body */}
+                <div style={{ display: 'flex', minHeight: '1440px', position: 'relative' }}>
+                    {/* Time Axis */}
+                    <div style={{ width: timeWidth, position: 'sticky', left: 0, zIndex: 50, backgroundColor: '#000', borderRight: '1px solid #333' }}>
+                        {hours.map(h => (
+                            <div key={h} style={{ height: '60px', paddingRight: '5px', textAlign: 'right', fontSize: '0.7rem', color: '#666', paddingTop: '2px' }}>
+                                {h === 0 ? '12 AM' : h === 12 ? '12 PM' : h > 12 ? `${h - 12} PM` : `${h} AM`}
+                            </div>
                         ))}
                     </div>
+
+                    {/* Main Content Area */}
+                    <div style={{ flex: 1, position: 'relative', display: 'flex', backgroundImage: 'linear-gradient(#222 1px, transparent 1px)', backgroundSize: '100% 60px' }}>
+                        {/* Now Line */}
+                        <div style={{ position: 'absolute', top: nowTop, left: 0, right: 0, height: '2px', backgroundColor: 'red', zIndex: 40, pointerEvents: 'none' }}>
+                            <div style={{ position: 'absolute', left: '-5px', top: '-4px', width: '10px', height: '10px', borderRadius: '50%', backgroundColor: 'red' }} />
+                        </div>
+
+                        {days.map((_, dIdx) => (
+                            <div key={dIdx} style={{ flex: 1, minWidth: dayMinWidth, borderRight: '1px solid #333', position: 'relative', display: 'flex' }}>
+                                {Array.from({ length: hallCount }).map((_, hIdx) => {
+                                    const hNum = hIdx + 1;
+                                    return (
+                                        <div key={hIdx} style={{ flex: 1, position: 'relative', borderRight: hallCount > 1 ? '1px solid #111' : 'none' }}>
+                                            {groupedLessons[dIdx]?.[hNum]?.map(lesson => (
+                                                <div key={lesson.id} style={{
+                                                    position: 'absolute',
+                                                    top: lesson.top,
+                                                    height: lesson.height,
+                                                    left: '2px',
+                                                    right: '2px',
+                                                    backgroundColor: lesson.type === 'Individual' ? 'rgba(255,0,0,0.1)' : 'rgba(0,120,255,0.1)',
+                                                    borderLeft: `3px solid ${lesson.type === 'Individual' ? 'red' : '#0070ff'}`,
+                                                    borderRadius: '4px',
+                                                    padding: '4px',
+                                                    fontSize: '0.7rem',
+                                                    overflow: 'hidden',
+                                                    zIndex: 1
+                                                }}>
+                                                    <div style={{ fontWeight: 'bold', fontSize: '0.6rem', opacity: 0.8 }}>{lesson.startTimeStr}</div>
+                                                    <div style={{ fontWeight: 'bold', margin: '2px 0' }}>{lesson.class?.name || lesson.name}</div>
+                                                    <div style={{ opacity: 0.6 }}>{lesson.instructor.name}</div>
+                                                </div>
+                                            ))}
+                                        </div>
+                                    );
+                                })}
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
         </div>
     );
 }