@kernhq/module-hr 0.9.2 → 0.10.0

package/src/client/mock.ts

@@ -77,6 +77,59 @@ export function createMockHrApi() {
   let clockedInAt: number | null = null
   let onBreak = false
 
+  const delegations: Array<Record<string, unknown>> = []
+
+  const approvalRequests = [
+    {
+      id: '01920000-0000-7000-8000-00000000f001',
+      workspaceId: '',
+      subjectType: 'leave' as const,
+      subjectId: '01920000-0000-7000-8000-00000000c001',
+      summary: `5 day(s) from ${day(14)}`,
+      summaryParams: { days: 5, from: day(14), to: day(18) } as Record<string, string | number> | null,
+      status: 'pending' as string,
+      currentStep: 0,
+      requestedBy: null,
+      requesterPersonId: PEOPLE[1]!.id,
+      requesterName: PEOPLE[1]!.displayName,
+      requestedAt: iso(3600_000),
+      decidedAt: null as string | null,
+      steps: [] as Array<Record<string, unknown>>,
+    },
+    {
+      id: '01920000-0000-7000-8000-00000000f002',
+      subjectType: 'regularization' as const,
+      workspaceId: '',
+      subjectId: '01920000-0000-7000-8000-00000000c002',
+      summary: `Correction for ${day(-1)}`,
+      summaryParams: { date: day(-1) } as Record<string, string | number> | null,
+      status: 'pending' as string,
+      currentStep: 0,
+      requestedBy: null,
+      requesterPersonId: PEOPLE[2]!.id,
+      requesterName: PEOPLE[2]!.displayName,
+      requestedAt: iso(7200_000),
+      decidedAt: null as string | null,
+      steps: [{ stepIndex: 0 }, { stepIndex: 1 }] as Array<Record<string, unknown>>,
+    },
+    {
+      id: '01920000-0000-7000-8000-00000000f003',
+      workspaceId: '',
+      subjectType: 'leave' as const,
+      subjectId: '01920000-0000-7000-8000-00000000c003',
+      summary: `1 day(s) from ${day(-20)}`,
+      summaryParams: { days: 1, from: day(-20), to: day(-20) } as Record<string, string | number> | null,
+      status: 'approved' as string,
+      currentStep: 0,
+      requestedBy: null,
+      requesterPersonId: PEOPLE[0]!.id,
+      requesterName: PEOPLE[0]!.displayName,
+      requestedAt: iso(20 * 86_400_000),
+      decidedAt: iso(19 * 86_400_000) as string | null,
+      steps: [] as Array<Record<string, unknown>>,
+    },
+  ]
+
   const leaveRequests: Array<Record<string, unknown>> = [
     {
       id: '01920000-0000-7000-8000-00000000c001',
@@ -402,24 +455,88 @@ export function createMockHrApi() {
     },
 
     approvals: {
-      inbox: async ({ workspaceId }: { workspaceId: string }) => ({
-        items: [
-          {
-            id: '01920000-0000-7000-8000-00000000f001',
-            workspaceId,
-            subjectType: 'leave' as const,
-            subjectId: leaveRequests[0]!.id as string,
-            summary: `5 day(s) from ${day(14)}`,
-            status: 'pending' as const,
-            currentStep: 0,
-            requestedBy: null,
-            requestedAt: iso(3600_000),
-            decidedAt: null,
-            steps: [],
-          },
-        ],
+      /**
+       * Both tabs have something in them on purpose.
+       *
+       * A demo whose "Decided" tab is empty looks like a broken filter rather than an empty
+       * history, and the two-step request is what shows the step counter at all.
+       */
+      inbox: async ({
+        workspaceId,
+        includeDecided = false,
+      }: {
+        workspaceId: string
+        includeDecided?: boolean
+      }) => ({
+        items: approvalRequests
+          .filter((r) => (includeDecided ? r.status !== 'pending' : r.status === 'pending'))
+          .map((r) => ({ ...r, workspaceId })),
         nextCursor: null,
       }),
+
+      get: async ({ workspaceId, requestId }: { workspaceId: string; requestId: string }) => {
+        const found = approvalRequests.find((r) => r.id === requestId)
+        if (!found) throw new Error('Approval request not found')
+        return { ...found, workspaceId }
+      },
+
+      decide: async ({
+        workspaceId,
+        requestId,
+        decision,
+      }: {
+        workspaceId: string
+        requestId: string
+        decision: 'approve' | 'reject'
+      }) => {
+        const found = approvalRequests.find((r) => r.id === requestId)
+        if (!found) throw new Error('Approval request not found')
+        // A middle step advances rather than settling: the inbox has to be able to show that.
+        const last = found.currentStep >= Math.max(found.steps.length - 1, 0)
+        if (decision === 'reject' || last) found.status = decision === 'approve' ? 'approved' : 'rejected'
+        else found.currentStep += 1
+        found.decidedAt = found.status === 'pending' ? null : iso()
+        return { ...found, workspaceId }
+      },
+
+      delegations: async ({ workspaceId }: { workspaceId: string }) =>
+        delegations.map((d) => ({ ...d, workspaceId })),
+
+      delegate: async ({
+        workspaceId,
+        toPersonId,
+        startsOn,
+        endsOn,
+        subjectType = null,
+        reason = null,
+      }: {
+        workspaceId: string
+        toPersonId: string
+        startsOn: string
+        endsOn: string
+        subjectType?: string | null
+        reason?: string | null
+      }) => {
+        const created = {
+          id: crypto.randomUUID(),
+          workspaceId,
+          fromPersonId: PEOPLE[0]!.id,
+          toPersonId,
+          subjectType,
+          startsOn,
+          endsOn,
+          reason,
+          createdAt: iso(),
+        }
+        delegations.push(created)
+        return created
+      },
+
+      revokeDelegation: async ({ delegationId }: { delegationId: string }) => {
+        const at = delegations.findIndex((d) => d.id === delegationId)
+        if (at >= 0) delegations.splice(at, 1)
+        return { ok: true }
+      },
     },
   }
 

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.

package/src/client/pages/ApprovalsPage.svelte

@@ -1,9 +1,26 @@
 <script lang="ts">
-import { Badge, Button, Card, EmptyState, navigation, Page, PageHeader, Skeleton, session } from '@kernhq/ui'
+import {
+  Badge,
+  type BadgeTone,
+  Button,
+  EmptyState,
+  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 } from '../permissions.js'
 import { hrKeys } from '../query.js'
+import { dateRange, day, summarise } from '../summary.js'
 
 /**
  * Everything waiting on me, across every kind of request.
@@ -12,8 +29,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 +44,284 @@ 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)
+
 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: () => {
+    decideError = t('decide_error')
+  },
 }))
 
-const subjectLabel = (subjectType: string) =>
-  subjectType === 'leave' ? t('leave_title') : t('attendance_title')
+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 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 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>
 
 <PageHeader
   crumbs={[{ label: workspace?.name ?? '' }, { label: t('approvals_title') }]}
   title={t('approvals_title')}
-/>
+>
+  {#snippet actions()}
+    {#if canHr('approvalDelegate')}
+      <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={items.length}
+  />
+
   {#if inboxQuery.isLoading}
-    <Skeleton height="140px" />
+    <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={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>
+    <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)}
-        <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>
+        <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">{when(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={() => {
+                  decideError = null
+                  deciding = { request: item, decision: 'reject' }
+                }}
+              >
+                {t('reject')}
+              </Button>
+              <Button
+                size="sm"
+                onclick={() => {
+                  decideError = null
+                  deciding = { request: item, decision: 'approve' }
+                }}
+              >
+                {t('approve')}
+              </Button>
+            {/if}
+          </span>
+        </div>
       {/each}
-    </ul>
+    </div>
   {/if}
+
+  <p class="hint">{t('approvals_chains_hint')}</p>
 </Page>
 
+<DecisionDialog
+  request={deciding?.request ?? null}
+  decision={deciding?.decision ?? 'approve'}
+  pending={decide.isPending}
+  error={decideError}
+  onConfirm={(comment) => {
+    if (deciding) decide.mutate({ requestId: deciding.request.id, decision: deciding.decision, comment })
+  }}
+  onCancel={() => {
+    deciding = null
+    decideError = null
+  }}
+/>
+
+<DelegationDialog open={delegating} {workspaceId} onClose={() => (delegating = false)} />
+
 <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>