@kernhq/module-hr 0.10.0 → 0.10.2

package/src/client/module.ts

@@ -223,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() {
@@ -230,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

@@ -4,6 +4,8 @@ import {
   type BadgeTone,
   Button,
   EmptyState,
+  formatCount,
+  formatDateTime,
   navigation,
   Page,
   PageHeader,
@@ -18,9 +20,9 @@ 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 } from '../permissions.js'
+import { canHr, HR_CAPABILITIES } from '../permissions.js'
 import { hrKeys } from '../query.js'
-import { dateRange, day, summarise } from '../summary.js'
+import { summarise } from '../summary.js'
 
 /**
  * Everything waiting on me, across every kind of request.
@@ -51,6 +53,25 @@ let deciding = $state<{ request: ApprovalRequest; decision: 'approve' | 'reject'
 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, includeDecided),
   enabled: Boolean(workspaceId),
@@ -73,11 +94,68 @@ const decide = createMutation(() => ({
     // is invalidated rather than guessing which keys moved.
     void queryClient.invalidateQueries({ queryKey: ['hr'] })
   },
-  onError: () => {
-    decideError = t('decide_error')
+  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
   },
 }))
 
+/**
+ * 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'),
@@ -100,9 +178,6 @@ const STATUS_LABELS: Record<string, () => string> = {
   cancelled: () => t('approval_status_cancelled'),
 }
 
-const when = (iso: string) =>
-  new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(new Date(iso))
-
 const stepOf = (request: ApprovalRequest) =>
   t('approvals_step_of', { n: String(request.currentStep + 1), total: String(request.steps.length) })
 </script>
@@ -112,7 +187,7 @@ const stepOf = (request: ApprovalRequest) =>
   title={t('approvals_title')}
 >
   {#snippet actions()}
-    {#if canHr('approvalDelegate')}
+    {#if showDelegation}
       <Button size="sm" variant="secondary" icon="users" onclick={() => (delegating = true)}>
         {t('delegate')}
       </Button>
@@ -135,26 +210,20 @@ const stepOf = (request: ApprovalRequest) =>
 
   <SectionLabel
     label={includeDecided ? t('approvals_decided') : t('approvals_waiting')}
-    count={items.length}
+    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}
     <div class="rows">
       {#each [1, 2, 3] as n (n)}<Skeleton height="56px" />{/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 if items.length === 0}
-    <EmptyState
-      icon="check-check"
-      title={includeDecided ? t('approvals_decided_none') : t('approvals_none')}
-      description={includeDecided ? t('approvals_decided_none_desc') : t('approvals_none_desc')}
-    />
-  {:else}
+  {: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>
@@ -170,7 +239,7 @@ const stepOf = (request: ApprovalRequest) =>
             <span class="summary">{summarise(item)}</span>
           </span>
           <span class="cell muted" role="cell">{item.requesterName ?? '—'}</span>
-          <span class="cell muted" role="cell">{when(item.requestedAt)}</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'}>
@@ -182,50 +251,55 @@ const stepOf = (request: ApprovalRequest) =>
           </span>
           <span class="cell actions" role="cell">
             {#if item.status === 'pending'}
-              <Button
-                size="sm"
-                variant="secondary"
-                onclick={() => {
-                  decideError = null
-                  deciding = { request: item, decision: 'reject' }
-                }}
-              >
+              <Button size="sm" variant="secondary" onclick={() => ask(item, 'reject')}>
                 {t('reject')}
               </Button>
-              <Button
-                size="sm"
-                onclick={() => {
-                  decideError = null
-                  deciding = { request: item, decision: 'approve' }
-                }}
-              >
-                {t('approve')}
-              </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={includeDecided ? t('approvals_decided_none') : t('approvals_none')}
+      description={includeDecided ? t('approvals_decided_none_desc') : t('approvals_none_desc')}
+    />
   {/if}
 
-  <p class="hint">{t('approvals_chains_hint')}</p>
+  <!--
+    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={decide.isPending}
+  pending={submitting}
   error={decideError}
-  onConfirm={(comment) => {
-    if (deciding) decide.mutate({ requestId: deciding.request.id, decision: deciding.decision, comment })
-  }}
+  onConfirm={confirmDecision}
   onCancel={() => {
     deciding = null
     decideError = null
   }}
 />
 
-<DelegationDialog open={delegating} {workspaceId} onClose={() => (delegating = false)} />
+<!-- 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>
 .filters {

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;