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

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.
Empty Dates: Every blank interval lacking a physical employee_daily_shifts relation over the displayed month evaluates to RD (Rest Day) by default.
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.

2.2 KiB Raw Blame History