Kerem/dance_school
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
kertenkerem
2026-01-08 02:39:18 +03:00
parent cd29713bca
commit 721e003253
6 changed files with 348 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
prisma/dev.db
View File

Binary file not shown.

1
prisma/schema.prisma
View File

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

41
src/app/page.module.css
View File

@@ -1,41 +1,37 @@
.page {
--primary: #b21f1f;
--secondary: #1a2a6c;
--accent: #fdbb2d;
--bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
--primary: #8ab4f8;
--secondary: #202124;
--accent: #f28b82;
--bg: #000000;
--white: #ffffff;
--text: #333333;
--text-muted: #666666;
--text: #e8eaed;
--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);
backdrop-filter: blur(10px);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
background: #000000;
border-bottom: 1px solid #3c4043;
position: sticky;
top: 0;
z-index: 1000;
}
.logo {
font-size: 1.5rem;
font-weight: 800;
background: linear-gradient(to right, var(--secondary), var(--primary));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -1px;
font-size: 1.2rem;
font-weight: 700;
color: #e8eaed;
letter-spacing: -0.5px;
}
.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;
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;
display: none;
}
@media (max-width: 768px) {

12
src/app/page.tsx
View File

@@ -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}>

246
src/components/ScheduleCalendar.module.css
View File

@@ -1,93 +1,213 @@
.container {
padding: 2rem;
max-width: 1200px;
margin: 0 auto;
font-family: var(--font-outfit, 'Outfit', sans-serif);
width: 100%;
height: 100vh;
background-color: #000000;
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;
font-size: 2.5rem;
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 800;
padding: 0.75rem 0;
margin: 0;
font-size: 1.25rem;
font-weight: 500;
border-bottom: 1px solid #3c4043;
}
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1rem;
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 {
.calendarWrapper {
flex: 1;
overflow: auto;
position: relative;
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;
background: #333;
color: white;
border-radius: 8px;
font-weight: 600;
padding: 0.5rem 0;
border-right: 1px solid #3c4043;
font-size: 0.75rem;
color: #9aa0a6;
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;
padding: 1rem;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
border-left: 4px solid #b21f1f;
transition: transform 0.2s, box-shadow 0.2s;
cursor: default;
position: absolute;
left: 3px;
right: 3px;
background: rgba(138, 180, 248, 0.2);
border: 1px solid #8ab4f8;
border-radius: 4px;
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);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
background: rgba(138, 180, 248, 0.3);
z-index: 5;
}
.lessonCard[data-type="Individual"] {
background: rgba(242, 139, 130, 0.2);
border-color: #f28b82;
}
.lessonTime {
font-size: 0.85rem;
color: #666;
color: #8ab4f8;
font-weight: 500;
display: block;
margin-bottom: 0.5rem;
font-size: 0.65rem;
}
.lessonName {
font-size: 1.1rem;
font-weight: 700;
color: #333;
margin-bottom: 0.5rem;
.lessonCard[data-type="Individual"] .lessonTime {
color: #f28b82;
}
.lessonDetails {
font-size: 0.8rem;
color: #888;
.lessonTitle {
font-weight: 600;
color: #fff;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.empty {
text-align: center;
padding: 2rem;
color: #aaa;
font-style: italic;
grid-column: span 7;
}
@media (max-width: 1024px) {
.calendar {
grid-template-columns: 1fr;
}
.lessonMeta {
color: #9aa0a6;
font-size: 0.6rem;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

191
src/components/ScheduleCalendar.tsx
View File

@@ -1,6 +1,5 @@
'use client';
import { useMemo } from 'react';
import styles from './ScheduleCalendar.module.css';
import { useMemo, useEffect, useRef, useState } from 'react';
interface Lesson {
id: string;
@@ -10,70 +9,166 @@ 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);
// JS getDay() returns 0 for Sunday, 1 for Monday etc.
// We want 0 for Monday, 6 for Sunday
let dayIndex = date.getDay() - 1;
const start = new Date(lesson.startTime);
const end = new Date(lesson.endTime);
let dayIndex = start.getDay() - 1;
if (dayIndex === -1) dayIndex = 6;
if (!groups[dayIndex]) groups[dayIndex] = [];
groups[dayIndex].push(lesson);
const hallNum = lesson.hallNumber || 1;
const top = (start.getHours() * 60) + start.getMinutes();
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) => {
const date = new Date(dateStr);
return date.toLocaleTimeString('tr-TR', { hour: '2-digit', minute: '2-digit', hour12: false });
};
// Dimensions
const timeWidth = 60;
const dayMinWidth = 150;
const hallMinWidth = dayMinWidth / hallCount;
return (
<div className={styles.container}>
<h1 className={styles.title}>Haftalık Ders Programı</h1>
<div className={styles.calendar}>
{days.map((day, index) => (
<div key={day} className={styles.dayColumn}>
<div className={styles.dayHeader}>{day}</div>
{groupedLessons[index]?.map(lesson => (
<div key={lesson.id} className={styles.lessonCard}>
<span className={styles.lessonTime}>
{formatTime(lesson.startTime)} - {formatTime(lesson.endTime)}
</span>
<div className={styles.lessonName}>
{lesson.class?.name || lesson.name || 'İsimsiz Ders'}
<div style={{
width: '100%',
height: '100vh',
backgroundColor: '#000',
color: '#fff',
display: 'flex',
flexDirection: 'column',
overflow: 'hidden',
fontFamily: 'sans-serif'
}}>
<h1 style={{ textAlign: 'center', padding: '10px', margin: 0, fontSize: '1.2rem', borderBottom: '1px solid #333' }}>
Haftalık Ders Programı (Rebuilt)
</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>
))}
</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>
))}
{(!groupedLessons[index] || groupedLessons[index].length === 0) && (
<div style={{ textAlign: 'center', padding: '1rem', color: '#ccc', fontSize: '0.8rem' }}>
Ders yok
</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>
);