feat: Enhance order details page with date range and clock-in/out labels, and improve OrderScheduleSection layout
This commit is contained in:
@@ -85,3 +85,31 @@ History state is cached in BLoC as `Map<String, AsyncValue<List<BenefitHistory>>
|
||||
|
||||
Uses `CustomScrollView` with `SliverList` for header + `SliverPadding` wrapping `SliverList.separated` for content.
|
||||
Bottom padding on content sliver: `EdgeInsets.fromLTRB(16, 16, 16, 120)` to clear bottom nav bar.
|
||||
|
||||
## ShiftDateTimeSection / OrderScheduleSection — Shift Detail Section Pattern
|
||||
|
||||
Both widgets live in `packages/features/staff/shifts/lib/src/presentation/widgets/`:
|
||||
- `shift_details/shift_date_time_section.dart` — single date, clock-in/clock-out boxes
|
||||
- `order_details/order_schedule_section.dart` — date range, 7-day circle row, clock-in/clock-out boxes
|
||||
|
||||
**Shared conventions (non-negotiable for section consistency):**
|
||||
- Outer padding: `EdgeInsets.all(UiConstants.space5)` — 20dp all sides
|
||||
- Section title: `UiTypography.titleUppercase4b.textSecondary`
|
||||
- Title → content gap: `UiConstants.space2` (8dp)
|
||||
- Time boxes: `UiColors.bgThird` background, `UiConstants.radiusBase` (12dp) corners, `UiConstants.space3` (12dp) all padding
|
||||
- Time box label: `UiTypography.footnote2b.copyWith(color: UiColors.textSecondary, letterSpacing: 0.5)`
|
||||
- Time box value: `UiTypography.title1m.copyWith(fontWeight: FontWeight.w700).textPrimary`
|
||||
- Between time boxes: `UiConstants.space4` (16dp) gap
|
||||
- Date → time boxes gap: `UiConstants.space6` (24dp)
|
||||
- Time format: `DateFormat('h:mm a')` — uppercase AM/PM with space
|
||||
|
||||
**OrderScheduleSection day-of-week circles:**
|
||||
- 7 circles always shown (Mon–Sun ISO order) regardless of active days
|
||||
- Circle size: 32×32dp (fixed, not a token)
|
||||
- Active: bg=`UiColors.primary`, text=`UiColors.white`, style=`footnote2m`
|
||||
- Inactive: bg=`UiColors.bgThird`, text=`UiColors.textSecondary`, style=`footnote2m`
|
||||
- Shape: `UiConstants.radiusFull`
|
||||
- Single-char labels: M T W T F S S
|
||||
- Inter-circle gap: `UiConstants.space2` (8dp)
|
||||
- Accessibility: wrap row with `Semantics(label: "Repeats on ...")`, mark individual circles with `ExcludeSemantics`
|
||||
- Ordering constant: `[DayOfWeek.mon, .tue, .wed, .thu, .fri, .sat, .sun]` — do NOT derive from API list order
|
||||
|
||||
Reference in New Issue
Block a user