Adding new reservation

Figma Component: https://www.figma.com/design/NWu7ssnTfTJHFNDy13CnUt/Aplikacija-Vento---UI?node-id=2451-15853

GitHub Issue: #179

The "Nova rezervacija" page, opened from "+ NOVA REZERVACIJA" on the Kalendar zauzetosti (empty) or by clicking an empty calendar cell (Vozilo and Od prefilled). Fields are Vozilo, Od and Do (all mandatory; whole days, 00:00–23:59), and Tvrtka, Ime i prezime and Email / Telefon (optional, but Tvrtka or Ime i prezime must be filled in). The period cannot overlap another reservation or event of the same vehicle, and a Neispravno vehicle cannot be reserved from today on ("Vozilo nije dostupno u odabranom razdoblju."). Saving returns to the calendar with a success toast and a new blue bar.

Users with access to Vozni park can add a reservation. The page can be opened in two ways from the Kalendar zauzetosti:

• The “+ NOVA REZERVACIJA” button at the top of the calendar – Vozilo, Od and Do are empty and filled in manually.
• Clicking an empty cell on the calendar – Vozilo is prefilled from the row and Od from the day that was clicked.

Figma (note on the empty-cell click): https://www.figma.com/design/NWu7ssnTfTJHFNDy13CnUt/Aplikacija-Vento---UI?node-id=2055-7250

Page title: “Nova rezervacija”, with a back arrow that returns to the calendar. Breadcrumb: Kalendar zauzetosti.

Podaci o rezervaciji

(Figma has the section title “Podaci rezervacija”, which is not correct Croatian.)

• Vozilo – searchable dropdown, mandatory. Each option shows brand and model, with the registration plate in grey (e.g. “SEAT Leon FR ST-789-CC”). Archived vehicles are not shown.
• Od – date picker, mandatory. Start of the reservation.
• Do – date picker, mandatory. End of the reservation.

Reservations are stored as date-times. The form has dates only, so the reservation starts at 00:00 on the Od day and ends at 23:59 on the Do day.

Podaci o vozaču

• Tvrtka – text field, optional, see the rule below (placeholder “Unesite naziv”). Company the vehicle is reserved for.
• Ime i prezime – text field, optional, see the rule below (placeholder “Unesite ime i prezime”). Person the vehicle is reserved for.
• Email / Telefon – text field, optional (placeholder npr. email@primjer.hr). One contact field: either an e-mail address or a phone number.

(In Figma, the Ime i prezime placeholder repeats “Unesite naziv”, and the Email / Telefon placeholder has the English “eg.” instead of “npr.”.)

At least one of Tvrtka or Ime i prezime must be filled in. If both are empty, the error message is: “Barem jedno od polja Tvrtka ili Ime i prezime mora biti ispunjeno.”

To mark a vehicle as out of order for a set period, the user adds a normal reservation for that period and writes “Odjava” / “Out of order” or similar in Ime i prezime. It is shown in blue like any other reservation. (A vehicle that is out of order with no end date is set to “Neispravno” in the inventory instead.)

Availability

A vehicle is not available in the selected period if:

• the period overlaps another Vozni park reservation of the same vehicle, or
• the period overlaps an event the vehicle is added to, or
• the vehicle has status Neispravno in the inventory and the period includes today or a later day (Neispravno applies from today on).

Then the reservation is not saved and the error message is: “Vozilo nije dostupno u odabranom razdoblju.”

Vozni park reservations and event bookings are kept together as vehicle reservations, and no two vehicle reservations of the same vehicle can overlap. Because a reservation without times runs from 00:00 to 23:59, the next reservation of the same vehicle can start on the day after the previous one ends, not on the same day.

Saving

• The “PRIHVATI REZERVACIJU” button in the sticky footer saves the reservation.
• Mandatory fields and the rules above are validated before saving.
• After saving, the user returns to the calendar (in the month it showed), a success toast is shown, and the reservation is shown as a new blue bar on the vehicle’s row for the reserved dates.