28 lines
2.2 KiB
Markdown
28 lines
2.2 KiB
Markdown
# Project Plan: Monthly Shift Calendar Layout
|
|
|
|
## Understanding the Goal
|
|
You want to transform the scheduling visualization so that instead of raw DataTables lists, HR can view a beautiful "Monthly Matrix Grid" where rows are Employees, columns are Dates (1st to 31st), and the cells are populated with Shift assignments—visually identical to the UI design in your **Monthly Attendance Calendar** screenshot.
|
|
|
|
## Proposed Architecture
|
|
|
|
### 1. Backend Route & Controller Expansion
|
|
- **Route Injection**: `Route::get('hr/shifts/calendar', [ShiftController::class, 'calendar'])->name('hr.shifts.calendar');` this will sit safely alongside the standard data-grid at `/hr/shifts`.
|
|
- **Data Hydration**: Build `ShiftController@calendar` to pull all active Employees, eagerly load `->with(['dailyShifts' => fn($q) => $q->whereMonth('date', $selectedMonth)])`, and format the matrix into a structured frontend dictionary payload.
|
|
|
|
### 2. Frontend React Component (`calendar.tsx`)
|
|
- Scaffold `resources/js/Pages/hr/shifts/calendar.tsx`.
|
|
- Import the exact same custom styling, horizontal `scroll-area` boxes, and `sticky` left columns used in the Attendance Calendar.
|
|
- Re-map the cell logic. Instead of P/A/L (Present/Absent/Late), the cells will dynamically parse shift names (e.g., `M` = Morning Shift, `N` = Night Shift, `RD` = Rest Day).
|
|
|
|
---
|
|
|
|
## Socratic Gate Resolutions
|
|
1. **Cell Notations**: The matrix will instantly extract the **first letter** of the assigned Shift Name (e.g. "Morning" -> `M`, "Evening" -> `E`) seamlessly fitting it into the fixed-width UI boxes securely.
|
|
2. **Empty Dates**: Every blank interval lacking a physical `employee_daily_shifts` relation over the displayed month evaluates to `RD` (Rest Day) by default.
|
|
3. **Navigation Architecture**: A button toggle will be injected squarely on the `/hr/shifts` page allowing HR administrators to dynamically flip between standard Data List Mode and the new Monthly Calendar Mode without reloading the browser securely.
|
|
|
|
## Verification Checklist
|
|
- The `/hr/shifts/calendar` route correctly parses month/year URL parameters.
|
|
- Employees are stacked vertically without crashing the window width using responsive horizontal scrolling grids.
|
|
- Hovering over a shift letter reveals the full shift duration / times natively.
|