WAfM components
Activity table
Compose participant activity from Card, Table, Progress, and a simple DropdownMenu. Roboto throughout.
Activity table playground
Sort all four columns, filter completion, or inspect recovery states.
Aktivität
| Alex Buckmaster | Kaufleute | ||
| Kathy Pacheco | Kaufleute | ||
| Lorri Warf | Kaufleute | ||
| James Hall | Mechaniker | ||
| Chris Glasser | Mechaniker |
Properties
Filters currently use provisional completion categories. Sorting cycles ascending, descending, then fixture order. Prototype fixtures and business state stay outside the shared UI package.
Usage and props
Import shared components from @wafm/ui. Keep workflow state and data fetching in the application.
ActivityTable
import { ActivityTable, ActivityTableHeader, ActivityTableContent, ActivityTableProgress } from '@wafm/ui/components/activity-table'
<ActivityTable>
<ActivityTableHeader actions={filterMenu}><h2>Aktivität</h2></ActivityTableHeader>
<ActivityTableContent>{tableOrFeedback}</ActivityTableContent>
</ActivityTable>- Card props / children / className
- Presentational Card composition with the activity screen’s spacing and radius. Caller owns rows, sorting, filters, loading, errors, and navigation.
ActivityTableHeader
<ActivityTableHeader actions={<FilterMenu />}>
<h2 className="text-2xl font-semibold">Aktivität</h2>
</ActivityTableHeader>- children / actions / CardHeader props
- Title slot and optional right-aligned action slot. Choose a heading level appropriate to the surrounding page. Filter UI uses the existing DropdownMenu and Button.
ActivityTableContent
<ActivityTableContent><Table>{rows}</Table></ActivityTableContent>- CardContent props
- Responsive horizontal padding and min-width handling. Accepts a table, loading rows, or feedback; adds no business state.
ActivityTableProgress
<ActivityTableProgress value={3} max={4} label="Fortschritt von Kathy Pacheco" />- value / max / label
- Completed count, total count, and required accessible name. 32px navy bar with an inset count, pale remainder, and clipped contrasting text. Null/invalid completion or a non-positive total displays an unknown value; finite values are clamped to the bounds.