@kernhq/module-hr 0.9.3 → 0.10.1

package/src/client/module.ts

@@ -1,6 +1,7 @@
 import { defineClientModule } from '@kernhq/ui'
+import { HR_PERMISSIONS } from '../contract/permissions.js'
+import { HR_CAPABILITIES } from './capabilities.js'
 import { hrMessageBundles, t } from './i18n.js'
-import { HR_CAPABILITIES, HR_PERMISSIONS } from './permissions.js'
 
 /**
  * HR as the shell sees it.
@@ -222,6 +223,17 @@ export const hrClientModule = defineClientModule({
    * is no route file in the app to keep in step with it any more.
    */
   settingsPages: [
+    {
+      id: 'general',
+      get label() {
+        return t('settings_general')
+      },
+      icon: 'sliders-vertical',
+      scope: 'workspace',
+      permission: 'core.modules.manage',
+      order: 1,
+      component: () => import('./settings/GeneralSettings.svelte'),
+    },
     {
       id: 'capabilities',
       get label() {
@@ -229,7 +241,10 @@ export const hrClientModule = defineClientModule({
       },
       icon: 'toggle-left',
       scope: 'workspace',
-      permission: 'core.workspace.manage',
+      // `core.modules.manage`, not `core.workspace.manage`: core gates `modules.updateSettings` on
+      // the former, and this page's every control is a write to it. Offering the page on the wider
+      // permission showed the whole switchboard to somebody the server then refused on each switch.
+      permission: 'core.modules.manage',
       order: 5,
       component: () => import('./settings/CapabilitiesSettings.svelte'),
     },

package/src/client/pages/ApprovalsPage.svelte

@@ -1,9 +1,28 @@
 <script lang="ts">
-import { Badge, Button, Card, EmptyState, navigation, Page, PageHeader, Skeleton, session } from '@kernhq/ui'
+import {
+  Badge,
+  type BadgeTone,
+  Button,
+  EmptyState,
+  formatCount,
+  formatDateTime,
+  navigation,
+  Page,
+  PageHeader,
+  SectionLabel,
+  SegmentedControl,
+  Skeleton,
+  session,
+} from '@kernhq/ui'
 import { createMutation, createQuery, useQueryClient } from '@tanstack/svelte-query'
 import { getHrApi } from '../api-instance.js'
+import DecisionDialog from '../components/DecisionDialog.svelte'
+import DelegationDialog from '../components/DelegationDialog.svelte'
 import { t } from '../i18n.js'
+import type { ApprovalRequest } from '../index.js'
+import { canHr, HR_CAPABILITIES } from '../permissions.js'
 import { hrKeys } from '../query.js'
+import { summarise } from '../summary.js'
 
 /**
  * Everything waiting on me, across every kind of request.
@@ -12,8 +31,13 @@ import { hrKeys } from '../query.js'
  * leave request and an attendance correction arrive here the same way, and so will overtime and
  * timesheets when they exist.
  *
- * No permission gate: an inbox of what *you* must decide is yours by definition, and the server only
- * ever lists steps you are named on.
+ * No permission gate on the list: an inbox of what *you* must decide is yours by definition, and the
+ * server only ever lists steps you are named on. Delegation is gated, because letting somebody else
+ * decide in your place is a claim about them as well as about you.
+ *
+ * Who signs what is not set here — `approvals.chains.*` is a workspace policy and lives in settings.
+ * `approvals.get` is not called either: the inbox already returns each request with its steps and
+ * decisions, so a detail fetch would re-ask a question this page has the answer to.
  */
 const api = getHrApi()
 const queryClient = useQueryClient()
@@ -22,108 +46,356 @@ const workspaceSlug = $derived(navigation.workspaceSlug)
 const workspace = $derived(session.workspaces.find((w) => w.slug === workspaceSlug))
 const workspaceId = $derived(workspace?.id ?? '')
 
+let tab = $state('waiting')
+const includeDecided = $derived(tab === 'decided')
+
+let deciding = $state<{ request: ApprovalRequest; decision: 'approve' | 'reject' } | null>(null)
+let delegating = $state(false)
+let decideError = $state<string | null>(null)
+
+/**
+ * `submitting` rather than `decide.isPending`: the disabled attribute only reaches the confirm
+ * button on the next render, so two quick clicks both fire and one request is decided twice. This
+ * is set in the same tick as the click.
+ */
+let submitting = $state(false)
+
+/**
+ * Delegation is two questions, and the button was only asking one.
+ *
+ * `hr.approval.delegate` defaults to owner, admin and member, so every member saw the button — and
+ * `DelegationDialog` then calls `approvals.delegations`, which sits behind the `approvals`
+ * capability. That capability is off by default, so in a fresh workspace the dialog opened and
+ * 404'd on its first query. A capability that is off has no surface at all, not a surface that
+ * fails when you touch it.
+ */
+const hasChains = $derived(session.hasCapability('hr', HR_CAPABILITIES.approvals))
+const showDelegation = $derived(hasChains && canHr('approvalDelegate'))
+
 const inboxQuery = createQuery(() => ({
-  queryKey: hrKeys.approvalInbox(workspaceId),
+  queryKey: hrKeys.approvalInbox(workspaceId, includeDecided),
   enabled: Boolean(workspaceId),
-  queryFn: () => api.approvals.inbox({ workspaceId, limit: 50, includeDecided: false }),
+  queryFn: () => api.approvals.inbox({ workspaceId, limit: 50, includeDecided }),
 }))
 const items = $derived(inboxQuery.data?.items ?? [])
 
 const decide = createMutation(() => ({
-  mutationFn: (vars: { requestId: string; decision: 'approve' | 'reject' }) =>
-    api.approvals.decide({ workspaceId, ...vars }),
+  mutationFn: (vars: { requestId: string; decision: 'approve' | 'reject'; comment: string }) =>
+    api.approvals.decide({
+      workspaceId,
+      requestId: vars.requestId,
+      decision: vars.decision,
+      comment: vars.comment.trim() || null,
+    }),
   onSuccess: () => {
+    deciding = null
+    decideError = null
     // Deciding changes a balance and a day sheet as well as the inbox, so the whole module's cache
     // is invalidated rather than guessing which keys moved.
     void queryClient.invalidateQueries({ queryKey: ['hr'] })
   },
+  onError: (error) => {
+    decideError = decideFailure(error)
+    // A refusal is the server saying its inbox is not the one on screen, so the row behind the
+    // dialog is stale as well as the decision. Re-read all of HR exactly as a decision that landed
+    // does — without this the same dead row sits in the table and every retry earns the same
+    // sentence.
+    void queryClient.invalidateQueries({ queryKey: ['hr'] })
+  },
+  onSettled: () => {
+    submitting = false
+  },
 }))
 
-const subjectLabel = (subjectType: string) =>
-  subjectType === 'leave' ? t('leave_title') : t('attendance_title')
+/**
+ * The decision refusals this module has its own sentence for, keyed by the `reason` the router
+ * sends beside the refusal — never by the sentence, because a list of sentences is a list somebody
+ * has to keep in sync and the day it drifts the reader is told nothing.
+ *
+ * Empty on purpose. `approvals.decide` refuses through `KernError.conflict`, whose reason argument
+ * is kept on the server and never serialised, so every refusal arrives today as the sentence the
+ * router wrote for a person. The day `decide()` sends a reason, its string lands here and nothing
+ * else has to change.
+ */
+const decideRefusalMessages: Record<string, string> = {}
+
+/**
+ * What a refused decision says to the person who made it.
+ *
+ * A decision is refused when the request is no longer theirs to decide — somebody else approved it,
+ * the requester cancelled it, or a delegation moved the step — and the router's sentence is the
+ * only thing that says which of those happened. It used to be thrown away here for a flat "The
+ * decision could not be recorded", which tells a manager staring at a live-looking row nothing at
+ * all. Everything else that can fail carries machine text in English, so it falls back to this
+ * module's own string.
+ *
+ * The test is the transport's `code`, never the sentence: `KernError.conflict` is what arrives as
+ * CONFLICT, so a refusal added to `decide()` later reaches the reader without anyone editing this
+ * file. The same shape as `ClockControls.svelte` and the approvals widget.
+ */
+function decideFailure(error: unknown): string {
+  const failure = error as { code?: unknown; message?: string; data?: { reason?: unknown } }
+  if (failure.code !== 'CONFLICT') return t('decide_error')
+  const reason = typeof failure.data?.reason === 'string' ? failure.data.reason : null
+  const key = reason ? decideRefusalMessages[reason] : undefined
+  // `t()` answers a key it has no string for with the key itself, so both ways of not having one —
+  // a reason no key covers, and a key whose string has not been merged — land on the router's
+  // sentence rather than putting `hr.decide_refused_…` in front of somebody.
+  const translated = key ? t(key) : undefined
+  return (translated && translated !== key ? translated : failure.message) || t('decide_error')
+}
+
+const ask = (request: ApprovalRequest, decision: 'approve' | 'reject') => {
+  decideError = null
+  deciding = { request, decision }
+}
+
+const confirmDecision = (comment: string) => {
+  if (!deciding || submitting) return
+  submitting = true
+  decide.mutate({ requestId: deciding.request.id, decision: deciding.decision, comment })
+}
+
+const SUBJECT_LABELS: Record<string, () => string> = {
+  leave: () => t('leave_title'),
+  regularization: () => t('attendance_title'),
+  overtime: () => t('att_overtime'),
+  timesheet: () => t('approval_subject_timesheet'),
+  shift_swap: () => t('approval_subject_shift_swap'),
+}
+const subjectLabel = (subjectType: string) => SUBJECT_LABELS[subjectType]?.() ?? subjectType
 
-const when = (iso: string) =>
-  new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(new Date(iso))
+const STATUS_TONES: Record<string, BadgeTone> = {
+  pending: 'upcoming',
+  approved: 'success',
+  rejected: 'danger',
+  cancelled: 'grey',
+}
+const STATUS_LABELS: Record<string, () => string> = {
+  pending: () => t('approval_status_pending'),
+  approved: () => t('approval_status_approved'),
+  rejected: () => t('approval_status_rejected'),
+  cancelled: () => t('approval_status_cancelled'),
+}
+
+const stepOf = (request: ApprovalRequest) =>
+  t('approvals_step_of', { n: String(request.currentStep + 1), total: String(request.steps.length) })
 </script>
 
 <PageHeader
   crumbs={[{ label: workspace?.name ?? '' }, { label: t('approvals_title') }]}
   title={t('approvals_title')}
-/>
+>
+  {#snippet actions()}
+    {#if showDelegation}
+      <Button size="sm" variant="secondary" icon="users" onclick={() => (delegating = true)}>
+        {t('delegate')}
+      </Button>
+    {/if}
+  {/snippet}
+</PageHeader>
 
 <Page>
+  <div class="filters">
+    <SegmentedControl
+      size="sm"
+      label={t('approvals_title')}
+      bind:value={tab}
+      items={[
+        { value: 'waiting', label: t('approvals_waiting') },
+        { value: 'decided', label: t('approvals_decided') },
+      ]}
+    />
+  </div>
+
+  <SectionLabel
+    label={includeDecided ? t('approvals_decided') : t('approvals_waiting')}
+    count={formatCount(items.length, 999)}
+  />
+
+  <!--
+    Held rows outrank the error. Every decision taken here invalidates all of `['hr']`, so a failed
+    background refetch leaves TanStack in `error` with the last good inbox still in `data` — an
+    error branch above this one would blank a working table, and take its approve buttons with it,
+    on a transient failure. The error is the whole page only when there is nothing else to draw.
+  -->
   {#if inboxQuery.isLoading}
-    <Skeleton height="140px" />
-  {:else if items.length === 0}
+    <div class="rows">
+      {#each [1, 2, 3] as n (n)}<Skeleton height="56px" />{/each}
+    </div>
+  {:else if items.length > 0}
+    <div class="table" role="table" aria-label={t('approvals_title')}>
+      <div class="thead" role="row">
+        <span role="columnheader">{t('approvals_request')}</span>
+        <span role="columnheader">{t('approvals_requested_by')}</span>
+        <span role="columnheader">{t('approvals_requested')}</span>
+        <span role="columnheader">{includeDecided ? t('status') : t('approvals_step')}</span>
+        <span class="sr-only" role="columnheader">{t('approvals_actions')}</span>
+      </div>
+      {#each items as item (item.id)}
+        <div class="trow" role="row">
+          <span class="cell what" role="cell">
+            <Badge tone="grey">{subjectLabel(item.subjectType)}</Badge>
+            <span class="summary">{summarise(item)}</span>
+          </span>
+          <span class="cell muted" role="cell">{item.requesterName ?? '—'}</span>
+          <span class="cell muted" role="cell">{formatDateTime(item.requestedAt)}</span>
+          <span class="cell" role="cell">
+            {#if includeDecided}
+              <Badge tone={STATUS_TONES[item.status] ?? 'grey'}>
+                {STATUS_LABELS[item.status]?.() ?? item.status}
+              </Badge>
+            {:else if item.steps.length > 1}
+              <span class="muted">{stepOf(item)}</span>
+            {/if}
+          </span>
+          <span class="cell actions" role="cell">
+            {#if item.status === 'pending'}
+              <Button size="sm" variant="secondary" onclick={() => ask(item, 'reject')}>
+                {t('reject')}
+              </Button>
+              <Button size="sm" onclick={() => ask(item, 'approve')}>{t('approve')}</Button>
+            {/if}
+          </span>
+        </div>
+      {/each}
+    </div>
+  {:else if inboxQuery.isError}
+    <EmptyState icon="triangle-alert" title={t('approvals_error')}>
+      {#snippet actions()}
+        <Button variant="secondary" onclick={() => void inboxQuery.refetch()}>{t('retry')}</Button>
+      {/snippet}
+    </EmptyState>
+  {:else}
     <EmptyState
       icon="check-check"
-      title={t('approvals_none')}
-      description={t('approvals_none_desc')}
+      title={includeDecided ? t('approvals_decided_none') : t('approvals_none')}
+      description={includeDecided ? t('approvals_decided_none_desc') : t('approvals_none_desc')}
     />
-  {:else}
-    <ul>
-      {#each items as item (item.id)}
-        <li>
-          <Card>
-            <div class="row">
-              <div class="what">
-                <Badge tone="upcoming">{subjectLabel(item.subjectType)}</Badge>
-                <span class="summary">{item.summary}</span>
-                <span class="meta">{when(item.requestedAt)}</span>
-              </div>
-              <div class="actions">
-                <Button
-                  size="sm"
-                  variant="secondary"
-                  disabled={decide.isPending}
-                  onclick={() => decide.mutate({ requestId: item.id, decision: 'reject' })}
-                  >{t('reject')}</Button
-                >
-                <Button
-                  size="sm"
-                  disabled={decide.isPending}
-                  onclick={() => decide.mutate({ requestId: item.id, decision: 'approve' })}
-                  >{t('approve')}</Button
-                >
-              </div>
-            </div>
-          </Card>
-        </li>
-      {/each}
-    </ul>
+  {/if}
+
+  <!--
+    Only where the workspace has chains. With the capability off there is no chain to configure —
+    the requester's manager approves, implicitly — so this line sent a reader to a settings screen
+    that is not there.
+  -->
+  {#if hasChains}
+    <p class="hint">{t('approvals_chains_hint')}</p>
   {/if}
 </Page>
 
+<DecisionDialog
+  request={deciding?.request ?? null}
+  decision={deciding?.decision ?? 'approve'}
+  pending={submitting}
+  error={decideError}
+  onConfirm={confirmDecision}
+  onCancel={() => {
+    deciding = null
+    decideError = null
+  }}
+/>
+
+<!-- Only where the workspace has approval chains: every procedure inside it is behind that one. -->
+{#if showDelegation}
+  <DelegationDialog open={delegating} {workspaceId} onClose={() => (delegating = false)} />
+{/if}
+
 <style>
-ul {
-  display: grid;
-  gap: 8px;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-.row {
+.filters {
   display: flex;
   align-items: center;
   gap: 12px;
-  flex-wrap: wrap;
+  margin-block-end: 8px;
+}
+.rows {
+  display: grid;
+  gap: 4px;
+}
+
+/* One grid for the header and every row, so the columns line up down the page. */
+.table {
+  --hr-approval-cols: minmax(220px, 1.6fr) minmax(120px, 0.7fr) 170px 150px max-content;
+  width: 100%;
+}
+.thead,
+.trow {
+  display: grid;
+  grid-template-columns: var(--hr-approval-cols);
+  gap: 12px;
+  align-items: center;
+  padding-inline: 12px;
+}
+.thead {
+  height: 34px;
+  border-block-end: 1px solid var(--kern-border);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--kern-ink-500);
+}
+.trow {
+  min-height: 56px;
+  border-block-end: 1px solid var(--kern-border-hairline);
+  border-radius: var(--kern-r-md);
+}
+.trow:hover {
+  background: var(--kern-surface-raised);
+}
+.cell {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .what {
   display: flex;
   align-items: center;
   gap: 8px;
-  flex: 1;
-  min-width: 0;
 }
 .summary {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 13.5px;
   font-weight: 500;
 }
-.meta {
+.muted {
+  font-size: 13px;
+  /* A colour, not opacity: opacity fades text against the page whatever token it names. */
   color: var(--kern-ink-500);
-  font-size: 12px;
 }
 .actions {
   display: flex;
   gap: 8px;
+  justify-content: flex-end;
+  overflow: visible;
+}
+.hint {
+  margin-block-start: 16px;
+  font-size: 12px;
+  color: var(--kern-ink-500);
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+@media (max-width: 900px) {
+  .table {
+    --hr-approval-cols: minmax(160px, 1.6fr) minmax(100px, 0.7fr) max-content;
+  }
+  /* Requested-at and step survive on the row's second line rather than squeezing five columns. */
+  .thead > :nth-child(3),
+  .trow > :nth-child(3),
+  .thead > :nth-child(4),
+  .trow > :nth-child(4) {
+    display: none;
+  }
 }
 </style>

package/src/client/pages/AttendancePage.svelte

@@ -1,5 +1,17 @@
 <script lang="ts">
-import { Badge, EmptyState, navigation, Page, PageHeader, Skeleton, StatTile, session } from '@kernhq/ui'
+import {
+  Badge,
+  Button,
+  EmptyState,
+  formatDate,
+  messageLocale,
+  navigation,
+  Page,
+  PageHeader,
+  Skeleton,
+  StatTile,
+  session,
+} from '@kernhq/ui'
 import { createQuery } from '@tanstack/svelte-query'
 import { getHrApi } from '../api-instance.js'
 import ClockControls from '../components/ClockControls.svelte'
@@ -12,6 +24,12 @@ import { formatDuration, hrKeys, monthRange } from '../query.js'
  * The totals come from the derived day sheet rather than being added up here — the server already
  * knows what a day is worth, and a second implementation in the browser is how a screen starts
  * disagreeing with a payslip.
+ *
+ * Which is also why a failed load may not reach the tiles. `days` is `[]` before an answer and `[]`
+ * after a refused one, so reducing it either way produces "0h worked, 0h scheduled, 0h overtime" —
+ * a confident statement about somebody's month made out of nothing, and the one figure on this page
+ * a person might take to their manager. Until there is a day sheet to add up the tiles are
+ * skeletons, and the month underneath says the load failed and offers a way to try again.
  */
 const api = getHrApi()
 
@@ -28,6 +46,16 @@ const daysQuery = createQuery(() => ({
 }))
 const days = $derived(daysQuery.data?.items ?? [])
 
+/**
+ * A disabled query is not a loading one — it is `pending` and not fetching — so without the
+ * workspace test the first frame of this page falls through to the empty state and tells somebody
+ * with a full month that nothing is recorded.
+ */
+const loading = $derived(!workspaceId || daysQuery.isLoading)
+
+/** Nothing to add up: no answer yet, or an answer that never arrived. */
+const totalsUnknown = $derived(days.length === 0 && (loading || daysQuery.isError))
+
 const words = {
   hours: (n: string) => t('hours_short', { n }),
   minutes: (n: string) => t('minutes_short', { n }),
@@ -39,6 +67,8 @@ const totals = $derived({
   overtime: days.reduce((sum, d) => sum + d.overtimeMinutes, 0),
 })
 
+const duration = (minutes: number) => formatDuration(minutes, words, messageLocale())
+
 const statusLabel = (s: string) =>
   s === 'present'
     ? t('att_status_present')
@@ -65,10 +95,13 @@ const statusTone = (s: string) =>
           ? 'urgent'
           : 'grey'
 
+/**
+ * `formatDate` rather than `Intl` directly: it formats in the reader's *interface* language, which
+ * is the one the rest of this row is written in. A bare `Intl` call follows the browser instead, so
+ * a Persian interface in an English browser gets "Mon 4 Aug" beside its own digits.
+ */
 const dayLabel = (iso: string) =>
-  new Intl.DateTimeFormat(undefined, { weekday: 'short', day: 'numeric', month: 'short' }).format(
-    new Date(`${iso}T00:00:00`),
-  )
+  formatDate(`${iso}T00:00:00`, { weekday: 'short', day: 'numeric', month: 'short' })
 </script>
 
 <PageHeader
@@ -76,31 +109,53 @@ const dayLabel = (iso: string) =>
   title={t('attendance_title')}
 />
 
-<Page>
-  <ClockControls {workspaceId} />
+{#snippet tiles()}
+  <div class="tiles">
+    <StatTile label={t('att_worked')} value={duration(totals.worked)} />
+    <StatTile label={t('att_scheduled')} value={duration(totals.scheduled)} />
+    <StatTile label={t('att_overtime')} value={duration(totals.overtime)} />
+  </div>
+{/snippet}
 
+{#snippet tilesUnknown()}
   <div class="tiles">
-    <StatTile label={t('att_worked')} value={formatDuration(totals.worked, words)} />
-    <StatTile label={t('att_scheduled')} value={formatDuration(totals.scheduled, words)} />
-    <StatTile label={t('att_overtime')} value={formatDuration(totals.overtime, words)} />
+    {#each [1, 2, 3] as n (n)}<Skeleton height="86px" />{/each}
   </div>
+{/snippet}
 
-  {#if daysQuery.isLoading}
-    <Skeleton height="200px" />
-  {:else if days.length === 0}
-    <EmptyState
-      icon="timer"
-      title={t('attendance_none')}
-      description={t('attendance_none_desc')}
-    />
+<Page>
+  <ClockControls {workspaceId} />
+
+  {#if totalsUnknown}
+    {@render tilesUnknown()}
   {:else}
+    {@render tiles()}
+  {/if}
+
+  {#if loading}
+    <div class="rows">
+      {#each [1, 2, 3, 4, 5] as n (n)}<Skeleton height="37px" />{/each}
+    </div>
+  {:else if days.length}
+    <!--
+      The month a person already has outranks the failure, because everything here is invalidated by
+      a punch: clocking out refetches the day sheet, and a refetch that fails leaves the query in
+      `error` with the last good month still in `data`. An error branch above this one would blank
+      the whole page — tiles included — for as long as core takes to come back.
+    -->
+    {#if daysQuery.isError}
+      <p class="stale" role="status">
+        <span>{t('attendance_stale')}</span>
+        <Button size="sm" variant="ghost" onclick={() => void daysQuery.refetch()}>{t('retry')}</Button>
+      </p>
+    {/if}
     <ul>
       {#each days as day (day.id)}
         <li class="row">
           <span class="date">{dayLabel(day.businessDate)}</span>
-          <span class="worked">{formatDuration(day.workedMinutes, words)}</span>
+          <span class="worked">{duration(day.workedMinutes)}</span>
           {#if day.overtimeMinutes > 0}
-            <span class="ot">+{formatDuration(day.overtimeMinutes, words)}</span>
+            <span class="ot">+{duration(day.overtimeMinutes)}</span>
           {/if}
           <!-- An anomaly is why a day needs a human; saying so beats a silent zero. -->
           {#if day.anomalies.length}
@@ -110,6 +165,14 @@ const dayLabel = (iso: string) =>
         </li>
       {/each}
     </ul>
+  {:else if daysQuery.isError}
+    <EmptyState icon="triangle-alert" title={t('attendance_error')}>
+      {#snippet actions()}
+        <Button variant="secondary" onclick={() => void daysQuery.refetch()}>{t('retry')}</Button>
+      {/snippet}
+    </EmptyState>
+  {:else}
+    <EmptyState icon="timer" title={t('attendance_none')} description={t('attendance_none_desc')} />
   {/if}
 </Page>
 
@@ -120,6 +183,29 @@ const dayLabel = (iso: string) =>
   gap: 12px;
   margin-block: 16px 20px;
 }
+.rows {
+  display: grid;
+  gap: 4px;
+}
+/*
+ * The warning ink is 4.37:1 on `--kern-canvas`, which is what this page sits on — under the 4.5 a
+ * 12.5px line has to clear. On its own tint it is 4.58:1 in light and 5.28:1 in dark, and the tint
+ * is what makes the strip read as a notice rather than as another row.
+ */
+.stale {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-block: 0 8px;
+  padding-block: 6px;
+  padding-inline: 12px 8px;
+  border-radius: var(--kern-r-md);
+  background: var(--kern-warning-tint);
+  color: var(--kern-warning);
+  font-size: 12.5px;
+}
 ul {
   display: grid;
   gap: 4px;
@@ -132,7 +218,7 @@ ul {
   align-items: center;
   gap: 12px;
   padding: 8px 12px;
-  border-bottom: 1px solid var(--kern-border);
+  border-block-end: 1px solid var(--kern-border);
 }
 .date {
   flex: 1;