Roos-fs-ZIP

Introduce a new Shift Planning (Week Planning) screen that enables weekly shift planning per location.
The location is now the primary planning entity (not the team). All planning behaviour (service pool, calendar, filters) is driven by the selected location. The planning result is created for the selected location.

Main Areas of the screen:

• Task Pool (Filtered Tasks for Selected Team) + filtering options
• Weekly Planning Board (Days of the Week with Scheduling Dropzones)
• Location selection

The scope of this ticket is to:

• Create a proper UI layout for the Shift Planning / Week Planning screen.
• Implement location selection as the first and primary selector (instead of team).
• Keep technical logic minimal (mostly layout, wiring of selectors, and placeholders).

The layout and interaction model should be based on the attached HTML file (drag & drop weekly calendar and other items), but must be extended to support team selection and store missing data.
The scope of the ticket is to create a proper lay out. + location selection

1. Navigation / Menu

Add a separate point in the left-side main menu:

• Label: “Shift Planning”.
• Position: Last item in the menu.

2. Location Selection Area (Primary Area)

• Location must be selected first, since the location is now the center of planning.
• Create a left-side section at the top (above the Task Pool)
• Location Selector (mandatory, first element)
• As soon as selected we show the user the general information for the location (inlucdin gadress and geolinl)
• A dropdown listing all Locations in the system.
• Location could be searched as well.

Behaviour:

• When a Location is selected:
• The Service Pool is filtered for that location (and later possibly by team).
• The Weekly Planning Board shows the plan for the selected location and week.
• Use existing patterns of dropdown implementation (reuse components used in similar places).

3. Task Pool Area

Below the Location Selection area, add the Task Pool section:

Position: Left side of the screen, under the selectors.

Content:

• Task list area (placeholder) showing tasks filtered by selected Location.
• Reserve space at the top of this area for future filters (e.g. date, status, project etc.).
• Tasks must be visually prepared to be dragged and dropped into the Weekly Planning Board
• Reuse styling/behaviour from the sample HTML (drag handle, hover states, etc.).
• Actual data and business logic are handled in separate tickets.

4. Weekly Planning Board

Use the weekly calendar from the provided HTML as the foundation for the Weekly Planning Board.

Required changes / extensions:

Location Context

• The board should visually indicate the selected Location (e.g. in the header:
• “Shift Planning – [Location Name] – [Week Range]”).
• Real Dates for Days
• Each column represents a day of the selected week.
• Show actual calendar dates instead of only weekday names.
• Calender week nu,ber is also stated above

Example: Mon 12.01, Tue 13.01, …, Sun 18.01.

Drag and Drop Dropzones

• Keep and adapt the dropzones from the sample HTML for each day/time slot.
• Tasks dragged from the Task Pool must be visually placeable on the board.

5. Week Navigation

Above or inside the Weekly Planning Board, add a week navigation component:

Buttons:

• Previous Week
• Current Week
• Next Week

Behaviour:

Switching week updates:

• Displayed dates (Mon–Sun for that week).
• Content of the Weekly Planning Board (placeholder state is fine).
• Week label in the header (e.g. KW 32, date range).
• The selected Location remains unchanged when switching weeks.

Persistence or complex validation is not required yet.
NOTE
THE HTML FILE IS ONLY A SUGGESTED LAYOUT
LOGIC FOR THE AREAS ARE MADE IN A SEPERATE VIDEO