roos-fs tasks #839
Updated by Vadim Pariev 5 months ago
Introduce We need to introduce a new screen called Shift Planning (Week Planning) screen that enables weekly shift planning per location. (or Week Planning). 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 screen must consist of the screen: three main functional areas: * Task Pool (Filtered Tasks for Selected Team) + filtering options * Weekly Planning Board (Days of the Week with Scheduling Dropzones) * Location selection Team Selection Area 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. + team selection** **Functional Requirements** 1. Navigation / Menu Add a separate seperate point in the left-side main menu: * Label: “Shift Planning”. * Position: Last item leftside manu under the name "Team planning" (shall be the last in the menu. page) 2. Location Team Selection Area (Primary Area) * Location must be selected first, since the location is now the center of planning. * Create Add a new left-side section at the top (above the Task Pool) 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 Teams available in the system. system.(see the implimentation of other tasks) * Location could be searched as well. Behaviour: * When a Location is selected: * The Task Pool is filtered for that location (and later possibly by team). * The Weekly Planning Board shows quick link to the plan for the selected location and week. * Use existing patterns of dropdown implementation (reuse components used in similar places). 3. team management 2. 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 (also leave 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. filters) 4. 3. Weekly Planning Board Use the The weekly calendar from in the provided HTML will be used as the foundation for the Weekly Planning Board. foundation. Enhancements needed: Required changes / extensions: Location Context * The board Days 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 represent actual calendar dates instead (Mon–SUn of only weekday names. * Calender week nu,ber is also stated above selected week). Example: Mon 12.01, Tue 13.01, …, Sun 18.01. 4. Ability to Change Week **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 Add a week navigation component: Buttons: * Previous Week * Current Next Week * Next Current Week button Behaviour: 5. Visual Adjustments Switching week updates: * Displayed dates (Mon–Sun for that week). * Content of the Weekly Add a visible header: Shift Planning Board (placeholder state is fine). / Week Planning * Week label in Keep the header (e.g. KW 32, date range). * The selected Location remains unchanged when switching weeks. drag-and-drop behavior from the sample HTML. 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