import { Head, Link, router } from '@inertiajs/react'; import { ChevronLeft, ChevronRight } from 'lucide-react'; import AppLayout from '@/layouts/app-layout'; import { cn } from '@/lib/utils'; import type { BreadcrumbItem } from '@/types'; type Task = { id: number; title: string; type: 'lesson' | 'quiz' | 'assignment' | 'personal'; status: 'pending' | 'completed' | 'missed'; is_priority: boolean; scheduled_date: string; }; type Props = { month: string; // 'YYYY-MM' tasksByDate: Record; }; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Planner', href: '/planner' }, { title: 'Kalender', href: '/planner/calendar' }, ]; const TYPE_DOT: Record = { lesson: 'bg-sky-300', quiz: 'bg-amber-400', assignment: 'bg-violet-400', personal: 'bg-slate-400', assigned: 'bg-sky-300', }; const DAY_NAMES = ['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab']; const MONTH_NAMES = [ 'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember', ]; function getMonthGrid(year: number, month: number): (number | null)[] { const firstDay = new Date(year, month, 1).getDay(); const daysInMonth = new Date(year, month + 1, 0).getDate(); const grid: (number | null)[] = Array(firstDay).fill(null); for (let d = 1; d <= daysInMonth; d++) { grid.push(d); } while (grid.length % 7 !== 0) { grid.push(null); } return grid; } export default function PlannerCalendar({ month, tasksByDate }: Props) { const [year, mon] = month.split('-').map(Number); const prevMonth = new Date(year, mon - 2, 1); const nextMonth = new Date(year, mon, 1); const grid = getMonthGrid(year, mon - 1); const today = new Date().toISOString().slice(0, 10); function nav(d: Date) { router.get('/planner/calendar', { month: `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`, }); } return ( <>
{/* Header */}

Kalender

← Kembali ke Planner
{MONTH_NAMES[mon - 1]} {year}
{/* Calendar */}
{/* Day names header */}
{DAY_NAMES.map((d) => (
{d}
))}
{grid.map((day, i) => { if (!day) { return (
); } const dateStr = `${year}-${String(mon).padStart(2, '0')}-${String(day).padStart(2, '0')}`; const dayTasks = tasksByDate[dateStr] ?? []; const isToday = dateStr === today; return (
{day}
{dayTasks.slice(0, 3).map((t) => (
{t.title}
))} {dayTasks.length > 3 && ( +{dayTasks.length - 3} lainnya )}
); })}
{/* Legend */}
Materi
Kuis
Tugas
Pribadi
); } PlannerCalendar.layout = (page: React.ReactNode) => {page};