Duty Period Card Figma: card-duty period-alt domain control

Updated: 2026-06-26

Audited: 2026-06-26

Live CSS Preview

Variant 2 (expanded — 1051 px, includes flight segments, rest, notes, Conclude button) not previewed here. See Figma node 4617:13920.

Design Tokens

Figma Variants

Layer Tree — Default Variant

ViewModel

Tier: domain control. Composes ProgressBarViewModel. Data sourced from FTDT domain via factory.

Usage Context

Developer Notes

• Outline Button naming: Figma names this control "Underline Button" — this is a Figma artifact name. The correct descriptor is Outline Button (pill shape, no underline, border-radius 38 px). A D-number for this button style is pending; see Underline Button node (4617:14386).
• Variant 2 / expanded: The expanded duty period view (4617:13920) adds substantial new content — flight segment rows, EDIT links, notes, and a CONCLUDE button. It is specced separately and may be a navigation target rather than an in-place expansion.
• Swipe gesture: The "delete demo" variant (4617:13962) shows the card translated left by 67 px with the red archive zone visible. This is a static depiction of the swipe state, consistent with how Flight Card's swipe variant is handled (same convention per Figma annotation).
• ProgressBar composition: The progress bar inside this card is the same component as the standalone Progress Bar (4537:14830) — same structure, same tokens. The VM holds a ProgressBarViewModel as a composed child.
• Section title reuse: The "Duty" / "16:00" row reuses the section title component pattern (4596:11818) — heavy label left, book value right, space-between.
• Implementation gated: No Razor/C# work until Epic AB#2087 (Presentation Extraction).

Blazor Component API

Target home: ALPAMobile.HybridUi. Component file: DutyPeriodCard.razor. Composes <AlpaProgressBar> for the Max Duty Period row — do not re-implement the bar inline.

Razor Usage (target)

@* Duty Periods screen — swipeable list *@
@foreach (var dp in DutyPeriods)
{
    <AlpaDutyPeriodCard StartDatetime="@dp.StartDatetime"
                        MaxDutyBar="@dp.MaxDutyBar"
                        DutyTotal="@dp.DutyTotal"
                        OnManage="@(() => NavigateToDetail(dp))"
                        IsSwipeable="true"
                        OnDelete="@(() => ArchiveDutyPeriod(dp))" />
}

@* Archived Logs screen — read-only, no delete *@
@foreach (var dp in ArchivedPeriods)
{
    <AlpaDutyPeriodCard StartDatetime="@dp.StartDatetime"
                        MaxDutyBar="@dp.MaxDutyBar"
                        DutyTotal="@dp.DutyTotal"
                        OnManage="@(() => NavigateToDetail(dp))" />
}

CSS Class Reference (target)

Classes will live in ALPAMobile.HybridUi/wwwroot/css/alpa-components.css under the alpa-duty-period-card BEM block. The composed <AlpaProgressBar> is styled by its own alpa-progress-bar block — do not override those classes here.