feat: initial commit

2026-05-29 11:45:50 +07:00
parent a43ea3cb2a
commit 3571499bf2
29 changed files with 1700 additions and 196 deletions
@@ -0,0 +1,181 @@
+import { useState } from 'react'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+
+interface Deadline {
+  date: number
+  month: number
+  year: number
+  label: string
+}
+
+const DEADLINES: Deadline[] = [
+  { date: 4, month: 4, year: 2025, label: 'Laporan Progress 1 Internify– 4 May' },
+  { date: 5, month: 4, year: 2025, label: 'Laporan Progress 1 Internify– 4 May' },
+]
+
+const DAY_LABELS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+const MONTH_NAMES = [
+  'January', 'February', 'March', 'April', 'May', 'June',
+  'July', 'August', 'September', 'October', 'November', 'December',
+]
+
+function getDaysInMonth(year: number, month: number) {
+  return new Date(year, month + 1, 0).getDate()
+}
+
+function getFirstDayOfMonth(year: number, month: number) {
+  return new Date(year, month, 1).getDay()
+}
+
+const HomeCalendar = () => {
+  const today = new Date()
+  const [currentYear, setCurrentYear] = useState(2025)
+  const [currentMonth, setCurrentMonth] = useState(4) // May = 4 (0-indexed)
+
+  const daysInMonth = getDaysInMonth(currentYear, currentMonth)
+  const firstDay = getFirstDayOfMonth(currentYear, currentMonth)
+
+  const prevMonth = () => {
+    if (currentMonth === 0) {
+      setCurrentMonth(11)
+      setCurrentYear(y => y - 1)
+    } else {
+      setCurrentMonth(m => m - 1)
+    }
+  }
+
+  const nextMonth = () => {
+    if (currentMonth === 11) {
+      setCurrentMonth(0)
+      setCurrentYear(y => y + 1)
+    } else {
+      setCurrentMonth(m => m + 1)
+    }
+  }
+
+  const isToday = (day: number) =>
+    day === today.getDate() &&
+    currentMonth === today.getMonth() &&
+    currentYear === today.getFullYear()
+
+  const hasDeadline = (day: number) =>
+    DEADLINES.some(d => d.date === day && d.month === currentMonth && d.year === currentYear)
+
+  const upcomingDeadlines = DEADLINES.filter(
+    d => d.month === currentMonth && d.year === currentYear
+  )
+
+  // Previous month trailing days
+  const prevMonthDays = getDaysInMonth(currentYear, currentMonth - 1 < 0 ? 11 : currentMonth - 1)
+  const trailingDays = Array.from({ length: firstDay }, (_, i) => prevMonthDays - firstDay + 1 + i)
+
+  // Current month days
+  const currentDays = Array.from({ length: daysInMonth }, (_, i) => i + 1)
+
+  // Next month leading days
+  const totalCells = Math.ceil((firstDay + daysInMonth) / 7) * 7
+  const leadingDays = Array.from({ length: totalCells - firstDay - daysInMonth }, (_, i) => i + 1)
+
+  // Bold dates (weekends or special)
+  const isBold = (day: number) => {
+    const d = new Date(currentYear, currentMonth, day).getDay()
+    return d === 0 || d === 6 // Sun or Sat
+  }
+
+  return (
+    <div className=" px-13 py-5">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-4">
+        <h2 className="text-base font-semibold text-gray-800">
+          {MONTH_NAMES[currentMonth]} {currentYear}
+        </h2>
+        <div className="flex items-center gap-1">
+          <button
+            onClick={prevMonth}
+            className="p-1 rounded hover:bg-gray-100 transition-colors"
+            aria-label="Previous month"
+          >
+            <ChevronLeft className="w-4 h-4 text-gray-500" />
+          </button>
+          <button
+            onClick={nextMonth}
+            className="p-1 rounded hover:bg-gray-100 transition-colors"
+            aria-label="Next month"
+          >
+            <ChevronRight className="w-4 h-4 text-gray-500" />
+          </button>
+        </div>
+      </div>
+
+      {/* Day labels */}
+      <div className="grid grid-cols-7 mb-1">
+        {DAY_LABELS.map(day => (
+          <div key={day} className="text-center text-xs text-gray-400 font-medium py-1">
+            {day}
+          </div>
+        ))}
+      </div>
+
+      {/* Calendar grid */}
+      <div className="grid grid-cols-7">
+        {/* Trailing days from prev month */}
+        {trailingDays.map(day => (
+          <div key={`prev-${day}`} className="text-center py-2">
+            <span className="text-xs text-gray-300">{day}</span>
+          </div>
+        ))}
+
+        {/* Current month days */}
+        {currentDays.map(day => (
+          <div key={day} className="flex justify-center items-center py-1 px-4">
+            {isToday(day) ? (
+              <span className="w-8 h-7 flex items-center justify-center rounded bg-red-800 text-white text-xs font-semibold">
+                {day}
+              </span>
+            ) : (
+              <span
+                className={`w-full h-7 flex items-center justify-center text-xs rounded
+                  ${isBold(day) ? 'font-bold text-gray-800' : 'text-gray-700'}
+                  ${hasDeadline(day) ? 'bg-red-700 text-white' : ''}
+                  hover:bg-gray-100 cursor-pointer transition-colors`}
+              >
+                {day}
+              </span>
+            )}
+          </div>
+        ))}
+
+        {/* Leading days from next month */}
+        {leadingDays.map(day => (
+          <div key={`next-${day}`} className="text-center py-2">
+            <span className="text-xs text-gray-300">{day}</span>
+          </div>
+        ))}
+      </div>
+
+      {/* Divider */}
+      <hr className="my-3 border-gray-100" />
+
+      {/* Upcoming Deadlines */}
+      <div>
+        <p className="text-[10px] font-semibold text-gray-400 uppercase tracking-widest mb-2">
+          Upcoming Deadlines
+        </p>
+        {upcomingDeadlines.length > 0 ? (
+          <ul className="flex flex-col gap-1">
+            {upcomingDeadlines.map((d, i) => (
+              <li key={i} className="flex items-center gap-2">
+                <span className="w-2 h-2 rounded-full bg-red-600 flex-shrink-0" />
+                <span className="text-xs text-gray-600">{d.label}</span>
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <p className="text-sm text-gray-400">No upcoming deadlines this month.</p>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default HomeCalendar