Kalendar zauzetosti

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

GitHub Issue: #182

Monthly calendar of all inventory vehicles, including archived ones (grouped into Vozni park by Namen, and Događaji). It shows blue bars for Vozni park reservations (labeled with Tvrtka and/or Ime i prezime), green bars for events (event name) and grey "Neispravno" from today on for vehicles with that status, based on reservations only, not on pickup/return records. It has "+ NOVA REZERVACIJA", a brand filter, month navigation, a vehicle info tooltip (Šasija, Boja), an empty-cell click that opens a prefilled new reservation, and a reservation menu (Uredi rezervaciju / Otvori zapisnik o preuzimanju / Ukloni rezervaciju) with a delete confirmation modal.

Users with access to Vozni park open the calendar from the side menu: Vozni park → Kalendar zauzetosti. It is the start page of the module.

Page title: “Kalendar zauzetosti”. Breadcrumb: Kalendar zauzetosti.

The calendar shows the booking status of all vehicles from the general inventory (Inventar), whichever area they are designated for. Both Vozni park vehicles and Događaji (Events) vehicles appear on the same calendar.

Archived vehicles are also shown, so that their past reservations stay visible. They cannot be selected for new reservations.

Header

• “+ NOVA REZERVACIJA” button – opens Adding new reservation with Vozilo and dates empty
• Brand filter dropdown, default “SVE MARKE” – filters the calendar by brand
• Month navigation: “‹ Prosinac 2025 ›” – the arrows go to the previous and next month

Calendar grid

• First column: vehicles, with the heading “VOZNI PARK”.
• One column per day of the month, labeled with the day number and the weekday (PON, UTO, SRI, ČET, PET, SUB, NED). Saturday and Sunday columns are shaded.
• The grid scrolls horizontally when the month does not fit the screen.

Vehicle groups

Vehicles are grouped in two sections. The section is set when the vehicle is added to the inventory (Vrsta korištenja):

• Vozni park – further grouped by purpose (Namen), e.g. IT, Postprodaja, Novinarji, Veliki kupci. Each group header shows the group name and the number of vehicles (e.g. “2 vozila”).
• Događaji – one group, with the header “DOGAĐAJI”.

The vehicle count uses the correct Croatian form: “1 vozilo”, “2 vozila” … “4 vozila”, “5 vozila”, “21 vozilo”, “22 vozila”. (Figma has the typo “1 vozila”.)

Each vehicle row is labeled with brand and model, and the registration plate in grey underneath (e.g. “AUDI A4 Avant” / “ZG-123-AA”).

Bars on the timeline

• Blue bar – a Vozni park reservation, spanning the reserved days. The label is the company name, the person’s name, or both (e.g. “Jutranji list”, “Ana Horvat”, “Jutranji list – Ana Horvat”).
• Green bar – a period in which the vehicle is added to an event, labeled with the event name (e.g. “Event test drive - new model”).
• Grey bar “Neispravno” – based on the vehicle’s current status in the inventory. If the status is Neispravno, the vehicle is shown as Neispravno from today for all future dates. When the status is changed back to Aktivno, the grey bar is no longer shown.

A vehicle marked out of order for a set period with a reservation (e.g. “Odjava”) is shown as a normal blue reservation bar.

Reservations and events of the same vehicle never overlap: a new or changed reservation is rejected if it overlaps another reservation or event of the vehicle (see Adding new reservation).

The grey Neispravno bar doesn’t overlap them either: a vehicle with current or future reservations can’t be set to Neispravno (see Add new vehicle), and a Neispravno vehicle can’t be reserved.

The calendar shows only the reservations. Dates from pickup/return records are not shown. Reservation times and pickup/return times are not connected and can differ. For an accurate calendar, the Manager of Vozni park changes the reservation dates by hand when the actual pickup or return differs from the reservation.

Vehicle info

Figma: https://www.figma.com/design/NWu7ssnTfTJHFNDy13CnUt/Aplikacija-Vento---UI?node-id=2056-8872

Hovering over a vehicle cell shows an info icon (ⓘ). Clicking it opens a tooltip with additional vehicle info:

• “Šasija: …” – chassis number
• “Boja: …” – color

Figma note: https://www.figma.com/design/NWu7ssnTfTJHFNDy13CnUt/Aplikacija-Vento---UI?node-id=2057-11915

There is no option to remove a vehicle on the calendar. (The Figma note and the delete modal frame show a three-dots menu with “Ukloni vozilo” on the vehicle cell. That is a Figma mistake: the three-dots menu belongs to the reservation bar, and its remove option is “Ukloni rezervaciju”.)

Adding a reservation from the calendar

Clicking an empty cell opens Adding new reservation with Vozilo prefilled from the row and Od from the day that was clicked.

Reservation menu

Figma note: https://www.figma.com/design/NWu7ssnTfTJHFNDy13CnUt/Aplikacija-Vento---UI?node-id=2314-12509

Hovering over a reservation bar shows a three-dots icon ("…"). Clicking an existing reservation opens a menu with:

• Uredi rezervaciju – opens Editing existing reservation. Past reservations can also be edited.
• Otvori zapisnik o preuzimanju – starts a new Zapisnik o preuzimanju, with Registarska oznaka, Tvrtka, Ime i prezime, E-mail or Telefon, and Rok korištenja (Od / Do) copied from the reservation. The record is not linked to the reservation.
• Ukloni rezervaciju (red, with a trash icon) – opens the delete confirmation modal

The menu is shown only for blue reservation bars, not for event or Neispravno bars.

Delete confirmation modal

Figma: https://www.figma.com/design/NWu7ssnTfTJHFNDy13CnUt/Aplikacija-Vento---UI?node-id=2059-15950

The modal is the same as the other delete modals in the app:

• Red warning icon, title “Ukloni rezervaciju?”, with a subtitle of the reservation’s name, vehicle and registration plate (e.g. “Ivan Horvat · SEAT Ibiza Style · RI-321-DD”)

• Text: “Jeste li sigurni da želite ukloniti ovu rezervaciju?”

• Buttons:

  • Odustani – closes the modal without deleting
  • Ukloni (red) – deletes the reservation and removes its bar from the calendar

• Close icon (x) in the top right corner – closes the modal without deleting

(The Figma modal subtitle mixes two vehicles: “Ivan Horvat · Seat Ibiza Style VZ · OS-654-EE”, where the plate and “VZ” belong to the Cupra Formentor.)

Deleting a reservation does not affect the Zapisnici: records are not linked to reservations.