diff --git a/frontend/src/api/client.ts b/frontend/src/api/client.ts new file mode 100644 index 0000000..60e3617 --- /dev/null +++ b/frontend/src/api/client.ts @@ -0,0 +1,20 @@ +import axios from 'axios'; +import { Reservation } from '../types'; + +const BASE = import.meta.env.VITE_API_URL ?? 'http://localhost:8080/api/v1'; + +const http = axios.create({ baseURL: BASE }); + +export const api = { + getTables: () => + http.get('/tables').then((r) => r.data), + + getReservations: (date?: string) => + http.get('/reservations', { params: { date } }).then((r) => r.data), + + createReservation: (payload: Partial) => + http.post('/reservations', payload).then((r) => r.data), + + updateStatus: (id: string, status: string) => + http.patch(`/reservations/${id}/status`, { status }).then((r) => r.data), +}; diff --git a/frontend/src/components/Timeline.tsx b/frontend/src/components/Timeline.tsx index d7146aa..e6a546f 100644 --- a/frontend/src/components/Timeline.tsx +++ b/frontend/src/components/Timeline.tsx @@ -1,7 +1,14 @@ import { useAppStore } from '../store/useAppStore'; import { Reservation, ReservationStatus } from '../types'; -const HOURS = Array.from({ length: 14 }, (_, i) => `${String(i + 10).padStart(2, '0')}:00`); +// 15-min slots from 10:00 to 24:00 +const SLOTS: string[] = []; +for (let h = 10; h < 24; h++) { + for (const m of [0, 15, 30, 45]) { + SLOTS.push(`${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`); + } +} +const HOUR_SLOTS = SLOTS.filter((s) => s.endsWith(':00')); const STATUS_DOT: Record = { PENDING: 'bg-slate-400', @@ -29,7 +36,8 @@ function timeToMinutes(t: string) { const TIMELINE_START = 10 * 60; // 10:00 const TIMELINE_END = 24 * 60; // 24:00 const TOTAL_MINUTES = TIMELINE_END - TIMELINE_START; -const COL_WIDTH = 72; // px per hour +const SLOT_WIDTH = 18; // px per 15-min slot +const HOUR_WIDTH = SLOT_WIDTH * 4; // 72px per hour export default function Timeline() { const { tables, reservations, openBookingModal } = useAppStore(); @@ -46,11 +54,12 @@ export default function Timeline() {
Tisch
- {HOURS.map((h) => ( + {/* Hour labels */} + {HOUR_SLOTS.map((h) => (
{h}
@@ -72,15 +81,16 @@ export default function Timeline() { {/* Timeline cells */} -
- {/* Click grid */} - {HOURS.map((_, i) => ( +
+ {/* 15-min clickable slots */} + {SLOTS.map((slot, i) => (