@kernhq/module-hr 0.9.3 → 0.10.0

package/src/client/pages/OfficesPage.svelte

@@ -1,17 +1,33 @@
 <script lang="ts">
-import { Badge, Card, EmptyState, navigation, Page, PageHeader, Skeleton, session } from '@kernhq/ui'
+import {
+  Badge,
+  type BadgeTone,
+  Button,
+  EmptyState,
+  navigation,
+  Page,
+  PageHeader,
+  SectionLabel,
+  Skeleton,
+  StatTile,
+  session,
+} from '@kernhq/ui'
 import { createQuery } from '@tanstack/svelte-query'
 import { getHrApi } from '../api-instance.js'
 import { t } from '../i18n.js'
+import { canHr } from '../permissions.js'
 import { hrKeys } from '../query.js'
 
 /**
  * Where the company works.
  *
- * Each card shows the office's **current local time** alongside its country, because that is what an
- * office list is for once there is more than one — knowing whether Amsterdam is awake. The default
- * office is marked, since it is where somebody with no assignment lands and where the resolution
- * ladder bottoms out.
+ * A table rather than cards: an office list is read down a column — which of these is in which
+ * country, how many people, what time is it there — and cards make every one of those a scan across
+ * the page instead of down it.
+ *
+ * The **current local time** is the reason this screen earns its place once there is more than one
+ * office: it is the answer to "can I call Amsterdam now". The default office is marked because it is
+ * where somebody with no assignment lands and where the resolution ladder bottoms out.
  */
 const api = getHrApi()
 
@@ -26,6 +42,13 @@ const officesQuery = createQuery(() => ({
 }))
 const offices = $derived(officesQuery.data ?? [])
 
+const stats = $derived({
+  offices: offices.length,
+  countries: new Set(offices.map((o) => o.country)).size,
+  people: offices.reduce((sum, o) => sum + o.headcount, 0),
+})
+
+/** Re-renders the clocks once a minute; an office list showing a stale time is worse than none. */
 let tick = $state(0)
 $effect(() => {
   const handle = setInterval(() => {
@@ -43,11 +66,12 @@ function localTime(timezone: string, _tick: number): string {
       minute: '2-digit',
     }).format(new Date())
   } catch {
-    return ''
+    // An unknown zone must not take the page down with it.
+    return '—'
   }
 }
 
-/** The country's own name for itself, rather than a two-letter code nobody reads. */
+/** The country's own name, rather than a two-letter code nobody reads. */
 function countryName(code: string): string {
   try {
     return new Intl.DisplayNames(undefined, { type: 'region' }).of(code) ?? code
@@ -55,65 +79,165 @@ function countryName(code: string): string {
     return code
   }
 }
+
+const kindLabel = (kind: string): string =>
+  kind === 'head_office'
+    ? t('office_kind_head_office')
+    : kind === 'branch'
+      ? t('office_kind_branch')
+      : kind === 'site'
+        ? t('office_kind_site')
+        : kind === 'warehouse'
+          ? t('office_kind_warehouse')
+          : kind === 'store'
+            ? t('office_kind_store')
+            : t('office_kind_remote')
+
+const kindTone = (kind: string): BadgeTone => (kind === 'remote' ? 'info' : 'grey')
 </script>
 
 <PageHeader
   crumbs={[{ label: workspace?.name ?? '' }, { label: t('offices_title') }]}
   title={t('offices_title')}
-/>
+>
+  {#snippet actions()}
+    {#if canHr('officeManage')}
+      <Button size="sm" href={`/${workspaceSlug}/settings/hr/offices`}>{t('settings_offices')}</Button>
+    {/if}
+  {/snippet}
+</PageHeader>
 
 <Page>
+  <div class="tiles">
+    <StatTile size="md" label={t('offices_total')} value={new Intl.NumberFormat().format(stats.offices)} />
+    <StatTile
+      size="md"
+      label={t('offices_countries')}
+      value={new Intl.NumberFormat().format(stats.countries)}
+    />
+    <StatTile size="md" label={t('office_people')} value={new Intl.NumberFormat().format(stats.people)} />
+  </div>
+
+  <SectionLabel label={t('offices_title')} count={offices.length} />
+
   {#if officesQuery.isLoading}
-    <div class="grid">{#each [1, 2, 3] as n (n)}<Skeleton height="96px" />{/each}</div>
+    <div class="rows">
+      {#each [1, 2, 3] as n (n)}<Skeleton height="48px" />{/each}
+    </div>
+  {:else if officesQuery.isError}
+    <EmptyState icon="triangle-alert" title={t('offices_error')}>
+      {#snippet actions()}
+        <Button variant="secondary" onclick={() => void officesQuery.refetch()}>{t('retry')}</Button>
+      {/snippet}
+    </EmptyState>
   {:else if offices.length === 0}
     <EmptyState icon="building" title={t('offices_none')} description={t('offices_none_desc')} />
   {:else}
-    <div class="grid">
+    <div class="table" role="table" aria-label={t('offices_title')}>
+      <div class="thead" role="row">
+        <span role="columnheader">{t('office')}</span>
+        <span role="columnheader">{t('office_kind')}</span>
+        <span role="columnheader">{t('office_country')}</span>
+        <span role="columnheader">{t('office_people')}</span>
+        <span role="columnheader">{t('local_time')}</span>
+      </div>
       {#each offices as office (office.id)}
-        <Card>
-          <div class="head">
-            <span class="name">{office.name}</span>
+        <a
+          class="trow"
+          role="row"
+          href={`/${workspaceSlug}/hr?officeId=${office.id}`}
+          aria-label={`${office.name} — ${t('office_view_people')}`}
+        >
+          <span class="cell name" role="cell">
+            {office.name}
             {#if office.isDefault}<Badge tone="accent">{t('office_default')}</Badge>{/if}
-          </div>
-          <p class="meta">{countryName(office.country)}</p>
-          <div class="foot">
-            <span class="time">{localTime(office.timezone, tick)}</span>
-            <span class="meta">{t('headcount', { count: String(office.headcount) })}</span>
-          </div>
-        </Card>
+          </span>
+          <span class="cell" role="cell"><Badge tone={kindTone(office.kind)}>{kindLabel(office.kind)}</Badge></span>
+          <span class="cell muted" role="cell">{countryName(office.country)}</span>
+          <span class="cell num" role="cell">{new Intl.NumberFormat().format(office.headcount)}</span>
+          <span class="cell num" role="cell" title={office.timezone}>{localTime(office.timezone, tick)}</span>
+        </a>
       {/each}
     </div>
   {/if}
 </Page>
 
 <style>
-.grid {
+.tiles {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
   gap: 12px;
+  margin-block-end: 20px;
 }
-.head {
-  display: flex;
+.rows {
+  display: grid;
+  gap: 4px;
+}
+
+/* One grid for the header and every row, so the columns line up down the page. */
+.table {
+  --hr-office-cols: minmax(200px, 1.4fr) 130px minmax(120px, 0.8fr) 96px 104px;
+  width: 100%;
+}
+.thead,
+.trow {
+  display: grid;
+  grid-template-columns: var(--hr-office-cols);
+  gap: 12px;
   align-items: center;
-  gap: 8px;
-  justify-content: space-between;
+  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 {
+  height: 48px;
+  border-block-end: 1px solid var(--kern-border-hairline);
+  text-decoration: none;
+  color: inherit;
+  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;
 }
 .name {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  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;
-  margin: 4px 0 0;
 }
-.foot {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  margin-block-start: 12px;
-}
-.time {
-  font-size: 15px;
+.num {
+  font-size: 13px;
+  color: var(--kern-ink-500);
   font-variant-numeric: tabular-nums;
 }
+
+@media (max-width: 900px) {
+  .table {
+    --hr-office-cols: minmax(140px, 1.4fr) 110px 96px 88px;
+  }
+  /* The country column is the one a narrow screen can lose: the office name implies it. */
+  .thead > :nth-child(3),
+  .trow > :nth-child(3) {
+    display: none;
+  }
+}
 </style>

package/src/client/permissions.ts

@@ -1,5 +1,6 @@
 import { session } from '@kernhq/ui'
-import { HR_CAPABILITIES, HR_PERMISSIONS } from './index.js'
+import { HR_PERMISSIONS } from '../contract/permissions.js'
+import { HR_CAPABILITIES } from './capabilities.js'
 
 /**
  * What this module lets somebody do, and what this workspace has switched on.

package/src/client/query.ts

@@ -28,7 +28,16 @@ export const hrKeys = {
   attendanceDays: (ws: string, personId: string | undefined, from: string, to: string) =>
     ['hr', 'attendance-days', ws, personId ?? 'me', from, to] as const,
   schedules: (ws: string) => ['hr', 'schedules', ws] as const,
-  approvalInbox: (ws: string) => ['hr', 'approvals', ws] as const,
+  /**
+   * `includeDecided` is part of the key, not a filter over one cached list.
+   *
+   * The two answers are different rows from the server — the waiting list is what a step is
+   * pending on, the decided one is history — so sharing a key would show one tab the other's
+   * contents for as long as the refetch takes.
+   */
+  approvalInbox: (ws: string, includeDecided = false) =>
+    ['hr', 'approvals', ws, includeDecided ? 'decided' : 'waiting'] as const,
+  delegations: (ws: string) => ['hr', 'delegations', ws] as const,
 } as const
 
 /** `YYYY-MM-DD` for a date, in the viewer's own zone rather than UTC. */

package/src/client/summary.ts

@@ -0,0 +1,36 @@
+import type { ApprovalRequest } from '../contract/index.js'
+import { t } from './i18n.js'
+
+/**
+ * The request line, in the reader's language.
+ *
+ * `summaryParams` is the sentence as data; `summary` is the English the server composed before that
+ * existed and is the fallback for those rows. Rendering the fallback is better than rendering
+ * nothing — an inbox row with no subject cannot be decided at all.
+ *
+ * Lives beside neither page that uses it: an inbox row and its confirmation dialog must say the
+ * same sentence, or approving looks like an action on something else.
+ */
+export function summarise(request: ApprovalRequest): string {
+  const p = request.summaryParams
+  if (!p) return request.summary
+  if (request.subjectType === 'leave' && p.from && p.to)
+    return t('approval_summary_leave', {
+      days: String(p.days ?? ''),
+      range: dateRange(String(p.from), String(p.to)),
+    })
+  if (request.subjectType === 'regularization' && p.date)
+    return t('approval_summary_regularization', { date: day(String(p.date)) })
+  if (request.subjectType === 'overtime' && p.date)
+    return t('approval_summary_overtime', { date: day(String(p.date)) })
+  return request.summary
+}
+
+export const day = (iso: string) =>
+  new Intl.DateTimeFormat(undefined, { dateStyle: 'medium' }).format(new Date(iso))
+
+/** One range, not two dates and a dash — the separator is the locale's, and RTL needs its own. */
+export const dateRange = (from: string, to: string) =>
+  from === to
+    ? day(from)
+    : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium' }).formatRange(new Date(from), new Date(to))

package/src/contract/approvals.ts

@@ -117,11 +117,23 @@ export const ApprovalRequest = z.object({
   ...ws,
   subjectType: ApprovalSubjectType,
   subjectId: z.uuid(),
-  /** A one-line description of what is being approved, so an inbox is readable without joins. */
+  /**
+   * The English one-liner a request was raised with, kept as the fallback.
+   *
+   * Prefer `summaryParams`: a sentence composed on the server is English for every reader, which
+   * is how half a screen ends up untranslated while every label around it is not.
+   */
   summary: z.string().max(200),
+  /** The same sentence as data — `{ days, from, to }` for leave, `{ date }` for a correction. */
+  summaryParams: z.record(z.string(), z.union([z.string(), z.number()])).nullable(),
   status: ApprovalStatus,
   currentStep: z.number().int(),
+  /** The account that submitted it, which may be nobody: an import has no user behind it. */
   requestedBy: z.uuid().nullable(),
+  /** Whose request it is, as an employee. Not the same as `requestedBy` — see the schema. */
+  requesterPersonId: z.uuid().nullable(),
+  /** Resolved on read so an inbox needs one call, not one call plus a directory lookup. */
+  requesterName: z.string().nullable(),
   requestedAt: Timestamp,
   decidedAt: Timestamp.nullable(),
   steps: z.array(ApprovalStep),