main page

src/pages/PlanboardPage.jsx

@@ -0,0 +1,46 @@
+import { useState } from 'react'
+import { format, addDays, startOfWeek } from 'date-fns'
+
+export default function PlanboardPage() {
+  const [currentWeek, setCurrentWeek] = useState(startOfWeek(new Date(), { weekStartsOn: 1 }))
+
+  const weekDays = Array.from({ length: 7 }, (_, i) => addDays(currentWeek, i))
+
+  const navigateWeek = (direction) => {
+    setCurrentWeek(prev => addDays(prev, direction * 7))
+  }
+
+  return (
+    <div className="main-content">
+      <header className="text-center mb-2">
+        <h2>Planboard</h2>
+      </header>
+
+      <div className="planboard-nav text-center mb-2">
+        <button className="btn btn-dark" onClick={() => navigateWeek(-1)}>← Previous Week</button>
+        <span className="mx-2">
+          {format(currentWeek, 'dd.MM.yyyy')} - {format(addDays(currentWeek, 6), 'dd.MM.yyyy')}
+        </span>
+        <button className="btn btn-dark" onClick={() => navigateWeek(1)}>Next Week →</button>
+      </div>
+
+      <div className="planboard-grid">
+        {weekDays.map(day => (
+          <div key={day.toISOString()} className="planboard-day">
+            <div className="day-header">
+              <strong>{format(day, 'EEEE')}</strong>
+              <span>{format(day, 'dd.MM')}</span>
+            </div>
+            <div className="day-content">
+              <p className="text-grey text-small">No tasks scheduled</p>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="text-center mt-4 text-grey">
+        <p>Drag and drop tickets to schedule them on the planboard.</p>
+      </div>
+    </div>
+  )
+}