Round 18: Seating Chart, Student Avatars, Newsletter, Badges, Deep Styling Polish

This commit is contained in:
Mustafa Cetin committed 2026-07-29 12:38:19 +00:00
1 parent cba8a8e724
commit 0363a40ca0
18 files changed
+1838 -50

No files matched your search

+123
View File
@@ -0,0 +1,123 @@
import { NextRequest, NextResponse } from 'next/server';
import { db } from '@/lib/db';
// GET /api/newsletters/[id] — get single newsletter
export async function GET(
_req: NextRequest,
{ params }: { params: Promise<{ id: string }> }
) {
try {
const { id } = await params;
const newsletter = await db.newsletter.findUnique({
where: { id },
include: {
author: { select: { id: true, firstName: true, lastName: true } },
},
});
if (!newsletter || newsletter.deletedAt) {
return NextResponse.json({ error: 'Newsletter not found' }, { status: 404 });
}
return NextResponse.json(newsletter);
} catch (error) {
console.error('Error fetching newsletter:', error);
return NextResponse.json({ error: 'Failed to fetch newsletter' }, { status: 500 });
}
}
// PUT /api/newsletters/[id] — update newsletter
export async function PUT(
req: NextRequest,
{ params }: { params: Promise<{ id: string }> }
) {
try {
const { id } = await params;
const body = await req.json();
const existing = await db.newsletter.findUnique({ where: { id } });
if (!existing || existing.deletedAt) {
return NextResponse.json({ error: 'Newsletter not found' }, { status: 404 });
}
const data: Record<string, unknown> = {};
if (body.title !== undefined) data.title = body.title;
if (body.content !== undefined) data.content = body.content;
if (body.summary !== undefined) data.summary = body.summary;
if (body.imageUrl !== undefined) data.imageUrl = body.imageUrl;
if (body.category !== undefined) data.category = body.category;
if (body.tags !== undefined) data.tags = JSON.stringify(body.tags);
const newsletter = await db.newsletter.update({
where: { id },
data,
include: {
author: { select: { id: true, firstName: true, lastName: true } },
},
});
return NextResponse.json(newsletter);
} catch (error) {
console.error('Error updating newsletter:', error);
return NextResponse.json({ error: 'Failed to update newsletter' }, { status: 500 });
}
}
// POST /api/newsletters/[id] — publish/unpublish newsletter
export async function POST(
req: NextRequest,
{ params }: { params: Promise<{ id: string }> }
) {
try {
const { id } = await params;
const body = await req.json();
const existing = await db.newsletter.findUnique({ where: { id } });
if (!existing || existing.deletedAt) {
return NextResponse.json({ error: 'Newsletter not found' }, { status: 404 });
}
const isPublished = body.action === 'publish' ? true : body.action === 'unpublish' ? false : !existing.isPublished;
const newsletter = await db.newsletter.update({
where: { id },
data: {
isPublished,
publishedAt: isPublished ? new Date() : null,
},
include: {
author: { select: { id: true, firstName: true, lastName: true } },
},
});
return NextResponse.json(newsletter);
} catch (error) {
console.error('Error toggling newsletter publish:', error);
return NextResponse.json({ error: 'Failed to toggle newsletter' }, { status: 500 });
}
}
// DELETE /api/newsletters/[id] — soft delete newsletter
export async function DELETE(
_req: NextRequest,
{ params }: { params: Promise<{ id: string }> }
) {
try {
const { id } = await params;
const existing = await db.newsletter.findUnique({ where: { id } });
if (!existing || existing.deletedAt) {
return NextResponse.json({ error: 'Newsletter not found' }, { status: 404 });
}
await db.newsletter.update({
where: { id },
data: { deletedAt: new Date() },
});
return NextResponse.json({ success: true });
} catch (error) {
console.error('Error deleting newsletter:', error);
return NextResponse.json({ error: 'Failed to delete newsletter' }, { status: 500 });
}
}
+85
View File
@@ -0,0 +1,85 @@
import { NextRequest, NextResponse } from 'next/server';
import { db } from '@/lib/db';
// GET /api/newsletters — list newsletters
export async function GET(req: NextRequest) {
try {
const { searchParams } = new URL(req.url);
const schoolId = searchParams.get('schoolId');
const published = searchParams.get('published');
const category = searchParams.get('category');
const limit = parseInt(searchParams.get('limit') || '20');
const offset = parseInt(searchParams.get('offset') || '0');
if (!schoolId) {
return NextResponse.json({ error: 'schoolId required' }, { status: 400 });
}
const where: Record<string, unknown> = {
schoolId,
deletedAt: null,
};
if (published === 'true') {
where.isPublished = true;
} else if (published === 'false') {
where.isPublished = false;
}
if (category) {
where.category = category;
}
const [newsletters, total] = await Promise.all([
db.newsletter.findMany({
where,
orderBy: [{ publishedAt: 'desc' }, { createdAt: 'desc' }],
skip: offset,
take: limit,
include: {
author: { select: { id: true, firstName: true, lastName: true } },
},
}),
db.newsletter.count({ where }),
]);
return NextResponse.json({ newsletters, total });
} catch (error) {
console.error('Error fetching newsletters:', error);
return NextResponse.json({ error: 'Failed to fetch newsletters' }, { status: 500 });
}
}
// POST /api/newsletters — create newsletter
export async function POST(req: NextRequest) {
try {
const body = await req.json();
const { schoolId, authorId, title, content, summary, imageUrl, category, tags, isDemo } = body;
if (!schoolId || !authorId || !title || !content) {
return NextResponse.json({ error: 'schoolId, authorId, title, content required' }, { status: 400 });
}
const newsletter = await db.newsletter.create({
data: {
schoolId,
authorId,
title,
content,
summary: summary || null,
imageUrl: imageUrl || null,
category: category || 'general',
tags: tags ? JSON.stringify(tags) : null,
isDemo: isDemo || false,
},
include: {
author: { select: { id: true, firstName: true, lastName: true } },
},
});
return NextResponse.json(newsletter, { status: 201 });
} catch (error) {
console.error('Error creating newsletter:', error);
return NextResponse.json({ error: 'Failed to create newsletter' }, { status: 500 });
}
}
@@ -23,6 +23,8 @@ export async function GET(
lastName: true,
dateOfBirth: true,
externalId: true,
avatarUrl: true,
avatarInitials: true,
createdAt: true,
schoolId: true,
school: { select: { id: true, name: true } },
+1
View File
@@ -143,6 +143,7 @@ export async function PUT(request: Request) {
.optional()
.transform((v) => (v ? new Date(v) : v === null ? null : undefined)),
externalId: z.string().nullable().optional(),
avatarUrl: z.string().nullable().optional(),
});
const parsed = updateSchema.safeParse(body);
+277
View File
@@ -2509,4 +2509,281 @@
.section-header-icon:hover {
opacity: 0.8;
}
/* ─── Gradient Card Background ─────────────────────────────────── */
.gradient-card-bg {
background: linear-gradient(135deg, oklch(0.97 0.02 155) 0%, oklch(0.98 0.01 175) 100%);
border: 1px solid oklch(0.90 0.02 155);
transition: all 0.3s ease;
}
.gradient-card-bg:hover {
box-shadow: 0 4px 12px oklch(0.55 0.17 155 / 0.1);
}
.dark .gradient-card-bg {
background: linear-gradient(135deg, oklch(0.18 0.02 260) 0%, oklch(0.16 0.01 155) 100%);
border-color: oklch(0.30 0.02 260);
}
/* ─── Sparkline Mini Chart ─────────────────────────────────────── */
.sparkline-mini {
display: inline-flex;
align-items: flex-end;
gap: 1px;
height: 16px;
}
.sparkline-mini span {
display: block;
width: 2px;
border-radius: 1px;
background: oklch(0.55 0.17 155);
transition: height 0.3s ease;
}
.dark .sparkline-mini span {
background: oklch(0.65 0.17 155);
}
/* ─── Grade Color Badges (German 1-6 System) ──────────────────── */
.grade-badge-1 {
background: linear-gradient(135deg, #10b981, #059669);
color: white;
border: 1px solid #059669;
}
.grade-badge-2 {
background: linear-gradient(135deg, #14b8a6, #0d9488);
color: white;
border: 1px solid #0d9488;
}
.grade-badge-3 {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
border: 1px solid #d97706;
}
.grade-badge-4 {
background: linear-gradient(135deg, #f97316, #ea580c);
color: white;
border: 1px solid #ea580c;
}
.grade-badge-5 {
background: linear-gradient(135deg, #f43f5e, #e11d48);
color: white;
border: 1px solid #e11d48;
}
.grade-badge-6 {
background: linear-gradient(135deg, #dc2626, #b91c1c);
color: white;
border: 1px solid #b91c1c;
}
/* ─── Mastery Level Badges ─────────────────────────────────────── */
.mastery-badge-low {
background: linear-gradient(135deg, #fda4af, #fb7185);
color: #9f1239;
border: 1px solid #fda4af;
}
.dark .mastery-badge-low {
color: #fda4af;
background: linear-gradient(135deg, rgba(253,164,175,0.15), rgba(251,113,133,0.15));
border-color: rgba(251,113,133,0.3);
}
.mastery-badge-medium {
background: linear-gradient(135deg, #fde68a, #fbbf24);
color: #92400e;
border: 1px solid #fde68a;
}
.dark .mastery-badge-medium {
color: #fde68a;
background: linear-gradient(135deg, rgba(253,230,138,0.15), rgba(251,191,36,0.15));
border-color: rgba(251,191,36,0.3);
}
.mastery-badge-high {
background: linear-gradient(135deg, #6ee7b7, #34d399);
color: #065f46;
border: 1px solid #6ee7b7;
}
.dark .mastery-badge-high {
color: #6ee7b7;
background: linear-gradient(135deg, rgba(110,231,183,0.15), rgba(52,211,153,0.15));
border-color: rgba(52,211,153,0.3);
}
/* ─── Newsletter Category Badge ────────────────────────────────── */
.category-badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.125rem 0.5rem;
border-radius: 9999px;
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: all 0.2s ease;
}
.category-badge-general {
background: oklch(0.95 0.01 260);
color: oklch(0.35 0.02 260);
}
.dark .category-badge-general {
background: oklch(0.22 0.02 260);
color: oklch(0.75 0.02 260);
}
.category-badge-academic {
background: #dbeafe;
color: #1e40af;
}
.dark .category-badge-academic {
background: rgba(59,130,246,0.15);
color: #93c5fd;
}
.category-badge-sports {
background: #dcfce7;
color: #166534;
}
.dark .category-badge-sports {
background: rgba(34,197,94,0.15);
color: #86efac;
}
.category-badge-arts {
background: #fae8ff;
color: #86198f;
}
.dark .category-badge-arts {
background: rgba(168,85,247,0.15);
color: #d8b4fe;
}
.category-badge-events {
background: #fef3c7;
color: #92400e;
}
.dark .category-badge-events {
background: rgba(245,158,11,0.15);
color: #fcd34d;
}
.category-badge-community {
background: #ffe4e6;
color: #9f1239;
}
.dark .category-badge-community {
background: rgba(244,63,94,0.15);
color: #fda4af;
}
/* ─── Newsletter Preview Card ──────────────────────────────────── */
.newsletter-card {
border-radius: 0.75rem;
overflow: hidden;
transition: all 0.3s ease;
border: 1px solid oklch(0.90 0.01 155);
background: white;
}
.newsletter-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px oklch(0.55 0.17 155 / 0.1);
}
.dark .newsletter-card {
background: oklch(0.18 0.015 260);
border-color: oklch(0.30 0.015 260);
}
/* ─── Student Avatar Circle ────────────────────────────────────── */
.avatar-circle {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
font-weight: 600;
font-size: 0.75rem;
line-height: 1;
transition: all 0.2s ease;
user-select: none;
flex-shrink: 0;
}
.avatar-circle:hover {
transform: scale(1.08);
}
/* ─── Student Photo Circle ─────────────────────────────────────── */
.avatar-photo {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
overflow: hidden;
transition: all 0.2s ease;
flex-shrink: 0;
}
.avatar-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.avatar-photo:hover {
transform: scale(1.08);
box-shadow: 0 0 0 2px oklch(0.55 0.17 155);
}
/* ─── Animated Section Underline ───────────────────────────────── */
.animated-underline {
position: relative;
display: inline-block;
}
.animated-underline::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, #10b981, #14b8a6);
border-radius: 1px;
transition: width 0.4s ease;
}
.animated-underline:hover::after {
width: 100%;
}
/* ─── Count-up Animation ───────────────────────────────────────── */
@keyframes count-up-fade {
0% { opacity: 0; transform: translateY(8px); }
100% { opacity: 1; transform: translateY(0); }
}
.animate-count-up {
animation: count-up-fade 0.6s ease-out forwards;
}
/* ─── Leaf Animation ───────────────────────────────────────────── */
@keyframes leaf-sway {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(5deg); }
75% { transform: rotate(-5deg); }
}
.animate-leaf-sway {
animation: leaf-sway 3s ease-in-out infinite;
}
/* ─── Staggered Card Entrance ──────────────────────────────────── */
@keyframes card-entrance {
0% { opacity: 0; transform: translateY(12px) scale(0.97); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.animate-card-entrance {
animation: card-entrance 0.4s ease-out forwards;
}
/* ─── Gradient Border for Class Cards ──────────────────────────── */
.gradient-border-card {
position: relative;
border-radius: 0.75rem;
overflow: hidden;
}
.gradient-border-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #10b981, #14b8a6);
border-radius: 0.75rem 0.75rem 0 0;
}
}