@kernhq/module-hr 0.10.4 → 0.11.0

package/src/client/module.ts

@@ -75,6 +75,16 @@ export const hrClientModule = defineClientModule({
       permission: HR_PERMISSIONS.officeView,
       capability: HR_CAPABILITIES.offices,
     },
+    {
+      path: '/hr/org',
+      component: () => import('./pages/OrgPage.svelte'),
+      get title() {
+        return t('org_title')
+      },
+      // No capability: departments and positions are part of `core`, and `hr.org.view` is a default
+      // member permission — the chart is the one HR screen most of a company opens.
+      permission: HR_PERMISSIONS.orgView,
+    },
     {
       // Last: the shell matches in order, and `/hr` would otherwise swallow the paths above it.
       path: '/hr',
@@ -296,6 +306,46 @@ export const hrClientModule = defineClientModule({
       order: 40,
       component: () => import('./settings/SchedulesSettings.svelte'),
     },
+    {
+      // Between leave and schedules, because accrual is how a balance comes to exist and the leave
+      // types it credits are the page above it.
+      id: 'accrual',
+      get label() {
+        return t('settings_accrual')
+      },
+      icon: 'gauge',
+      scope: 'workspace',
+      permission: HR_PERMISSIONS.policyManage,
+      capability: HR_CAPABILITIES.leaveAccrual,
+      order: 35,
+      component: () => import('./settings/AccrualSettings.svelte'),
+    },
+    {
+      id: 'approvals',
+      get label() {
+        return t('settings_approvals')
+      },
+      icon: 'list-checks',
+      scope: 'workspace',
+      permission: HR_PERMISSIONS.approvalManage,
+      capability: HR_CAPABILITIES.approvals,
+      order: 50,
+      component: () => import('./settings/ApprovalsSettings.svelte'),
+    },
+    {
+      // After approvals rather than beside it: locking a month is the last thing an admin does in a
+      // cycle, and it is the one entry here that stops other people's screens changing.
+      id: 'periods',
+      get label() {
+        return t('settings_periods')
+      },
+      icon: 'lock',
+      scope: 'workspace',
+      permission: HR_PERMISSIONS.periodManage,
+      capability: HR_CAPABILITIES.periods,
+      order: 60,
+      component: () => import('./settings/PeriodsSettings.svelte'),
+    },
   ],
 
   presenters: [

package/src/client/pages/AttendancePage.svelte

@@ -4,6 +4,7 @@ import {
   Button,
   EmptyState,
   formatDate,
+  Icon,
   messageLocale,
   navigation,
   Page,
@@ -15,6 +16,7 @@ import {
 import { createQuery } from '@tanstack/svelte-query'
 import { getHrApi } from '../api-instance.js'
 import ClockControls from '../components/ClockControls.svelte'
+import DayDetail from '../components/DayDetail.svelte'
 import { t } from '../i18n.js'
 import { formatDuration, hrKeys, monthRange } from '../query.js'
 
@@ -30,6 +32,12 @@ import { formatDuration, hrKeys, monthRange } from '../query.js'
  * 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.
+ *
+ * A row opens. Underneath it are the punches the total was computed from, the anomalies as
+ * sentences rather than a number in a warning badge, and the two things somebody arguing with their
+ * timesheet can actually do — void a punch that is wrong, ask for one that is missing. All four
+ * procedures behind that were implemented and called from nowhere, which made
+ * `hr.attendance.manage` a permission to read.
  */
 const api = getHrApi()
 
@@ -46,6 +54,42 @@ const daysQuery = createQuery(() => ({
 }))
 const days = $derived(daysQuery.data?.items ?? [])
 
+/**
+ * The corrections this person has already asked for, once for the month rather than once per day.
+ *
+ * `regularizations.list` answers for one person and has no date filter, so a query per open day
+ * would be the same request repeated. It is read here and handed down filtered, which also lets a
+ * day that has one say so *before* it is opened — the reason somebody opens a day is usually the
+ * reason they already raised.
+ */
+const correctionsQuery = createQuery(() => ({
+  // The same literal shape `hrKeys` builds — `['hr', entity, workspace, …scope]` — so the module's
+  // blanket `['hr']` invalidation after a correction reaches it.
+  queryKey: ['hr', 'regularizations', workspaceId, 'me', 'pending'] as const,
+  enabled: Boolean(workspaceId),
+  queryFn: () => api.attendance.regularizations.list({ workspaceId, status: ['pending'], limit: 100 }),
+}))
+const corrections = $derived({
+  items: correctionsQuery.data?.items ?? [],
+  loading: !workspaceId || correctionsQuery.isLoading,
+  // The retained list decides, never the status: a failed background refetch leaves `error` beside
+  // a perfectly good list, and treating that as a failure would hide corrections that exist.
+  failed: correctionsQuery.isError && (correctionsQuery.data?.items ?? []).length === 0,
+  retry: () => void correctionsQuery.refetch(),
+})
+const correctionDates = $derived(new Set(corrections.items.map((r) => r.businessDate)))
+
+/**
+ * One day open at a time.
+ *
+ * An accordion rather than a set: the panel is tall — punches, anomalies, corrections — and a month
+ * with five of them open is a page nobody can find the row they wanted in.
+ */
+let openDay = $state<string | null>(null)
+const toggleDay = (id: string) => {
+  openDay = openDay === id ? null : id
+}
+
 /**
  * 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
@@ -151,17 +195,52 @@ const dayLabel = (iso: string) =>
     {/if}
     <ul>
       {#each days as day (day.id)}
-        <li class="row">
-          <span class="date">{dayLabel(day.businessDate)}</span>
-          <span class="worked">{duration(day.workedMinutes)}</span>
-          {#if day.overtimeMinutes > 0}
-            <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}
-            <Badge tone="warning">{day.anomalies.length}</Badge>
-          {/if}
-          <Badge tone={statusTone(day.status)}>{statusLabel(day.status)}</Badge>
+        {@const open = openDay === day.id}
+        <li>
+          <!--
+            The whole row is the control, because the thing somebody wants after reading "0h worked"
+            is everything underneath it — not a chevron they have to find first.
+          -->
+          <button
+            type="button"
+            class="row"
+            aria-expanded={open}
+            aria-controls={`hr-day-${day.id}`}
+            onclick={() => toggleDay(day.id)}
+          >
+            <!--
+              One icon rotated, as `SectionLabel` does it — a `chevron-right` for the closed state
+              points into the margin under `dir="rtl"`, and there is no logical property for a
+              rotation.
+            -->
+            <span class="chev" class:closed={!open}><Icon name="chevron-down" size={14} /></span>
+            <span class="date">{dayLabel(day.businessDate)}</span>
+            <span class="worked">{duration(day.workedMinutes)}</span>
+            {#if day.overtimeMinutes > 0}
+              <span class="ot">+{duration(day.overtimeMinutes)}</span>
+            {/if}
+            <!--
+              A number in a warning badge with no noun said nothing at all. It counts things a
+              person has to look at, so it says so — and the sentences behind it are one click away
+              rather than nowhere.
+            -->
+            {#if day.anomalies.length}
+              <Badge tone="warning">{t('att_anomalies_count', { count: day.anomalies.length })}</Badge>
+            {/if}
+            {#if correctionDates.has(day.businessDate)}
+              <Badge tone="upcoming">{t('att_correction_waiting')}</Badge>
+            {/if}
+            <Badge tone={statusTone(day.status)}>{statusLabel(day.status)}</Badge>
+          </button>
+          <!--
+            The container exists whether or not it is open, so `aria-controls` above always points
+            at something; the panel's queries only run once somebody asks for them.
+          -->
+          <div id={`hr-day-${day.id}`}>
+            {#if open}
+              <DayDetail {workspaceId} {day} {corrections} />
+            {/if}
+          </div>
         </li>
       {/each}
     </ul>
@@ -213,12 +292,38 @@ ul {
   margin: 0;
   padding: 0;
 }
+/*
+ * A button, so the keyboard reaches every day the pointer does — and reset back to a row: a
+ * `<button>` inherits neither the page's font nor its text direction from the browser's defaults.
+ */
 .row {
   display: flex;
   align-items: center;
   gap: 12px;
+  width: 100%;
   padding: 8px 12px;
+  border: 0;
   border-block-end: 1px solid var(--kern-border);
+  border-radius: var(--kern-r-md);
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+.row:hover {
+  background: var(--kern-surface-hover);
+}
+.chev {
+  display: inline-flex;
+  color: var(--kern-ink-500);
+  transition: transform 0.14s;
+}
+.chev.closed {
+  transform: rotate(-90deg);
+}
+:global([dir='rtl']) .chev.closed {
+  transform: rotate(90deg);
 }
 .date {
   flex: 1;

package/src/client/pages/LeavePage.svelte

@@ -6,6 +6,7 @@ import {
   Dialog,
   EmptyState,
   formatDateRange,
+  Icon,
   messageLocale,
   navigation,
   Page,
@@ -17,6 +18,7 @@ import {
 } from '@kernhq/ui'
 import { createMutation, createQuery, useQueryClient } from '@tanstack/svelte-query'
 import { getHrApi } from '../api-instance.js'
+import LeaveLedgerPanel from '../components/LeaveLedgerPanel.svelte'
 import LeaveRequestDialog from '../components/LeaveRequestDialog.svelte'
 import { t } from '../i18n.js'
 import type { LeaveRequest } from '../index.js'
@@ -34,6 +36,10 @@ import { formatDays, hrKeys } from '../query.js'
  * Neither half may fail quietly. A refused balance used to take the strip off the page with no
  * message and leave "No time off booked" underneath it, which reads as a person with nothing —
  * no days left and none booked — rather than as a screen that never loaded.
+ *
+ * A tile is also the way in to the movements behind it. "How much do I have" and "why is it that"
+ * are the same question one step apart, and the second one had no answer on any screen: the ledger
+ * was readable over the API and nowhere else, so `hr.leave.view_ledger` gated nothing.
  */
 const api = getHrApi()
 const queryClient = useQueryClient()
@@ -84,6 +90,24 @@ const refetchAll = () => {
 
 const days = (n: number) => formatDays(n, messageLocale())
 
+/**
+ * The unit a type is counted in decides the word beside the number. A type counted in hours read
+ * "7 days available" on this strip until the ledger needed the distinction anyway; half-days are
+ * still days.
+ */
+const unitWord = (unit: string, count: number) => t(unit === 'hour' ? 'hours' : 'days', { count })
+
+// ---------------------------------------------------------------- the ledger behind a tile
+
+const canLedger = $derived(canHr('leaveViewLedger'))
+/**
+ * The type whose ledger is open, rather than the row itself: held by id, the panel keeps reading the
+ * live query row, so an adjustment made inside it moves the figure at the top of the panel as soon
+ * as the invalidation lands. A captured copy would sit there stating the old number.
+ */
+let ledgerTypeId = $state<string | null>(null)
+const ledgerBalance = $derived(balances.find((b) => b.leaveTypeId === ledgerTypeId) ?? null)
+
 /**
  * The request waiting on a confirmation, and what the last attempt said.
  *
@@ -227,11 +251,37 @@ const canCancel = (status: string) => canHr('leaveRequest') && (status === 'pend
   {:else if balances.length}
     <div class="tiles">
       {#each balances as balance (balance.leaveTypeId)}
-        <StatTile
-          label={balance.leaveTypeName}
-          value={days(balance.available)}
-          note={`${t('available')} · ${t('days', { count: balance.available })}`}
-        />
+        {#if canLedger}
+          <!--
+            The whole tile is the control, so the target is the size of the thing somebody is
+            looking at rather than a link tucked in a corner. `aria-label` names the action, which
+            is what stops a screen reader reading the number twice and the verb never.
+          -->
+          <button
+            type="button"
+            class="tile-button"
+            aria-label={t('leave_ledger_open', { name: balance.leaveTypeName })}
+            onclick={() => (ledgerTypeId = balance.leaveTypeId)}
+          >
+            <StatTile
+              class="ledger-tile"
+              label={balance.leaveTypeName}
+              value={days(balance.available)}
+              note={`${t('available')} · ${unitWord(balance.unit, balance.available)}`}
+            >
+              <span class="cue">
+                <Icon name="scroll-text" size={13} strokeWidth={1.7} />
+                {t('leave_ledger')}
+              </span>
+            </StatTile>
+          </button>
+        {:else}
+          <StatTile
+            label={balance.leaveTypeName}
+            value={days(balance.available)}
+            note={`${t('available')} · ${unitWord(balance.unit, balance.available)}`}
+          />
+        {/if}
       {/each}
     </div>
   {:else if balanceQuery.isError}
@@ -314,6 +364,13 @@ const canCancel = (status: string) => canHr('leaveRequest') && (status === 'pend
 
 <LeaveRequestDialog open={requesting} {workspaceId} {workspaceSlug} />
 
+<LeaveLedgerPanel
+  balance={ledgerBalance}
+  {workspaceId}
+  personName={session.user?.name ?? ''}
+  onClose={() => (ledgerTypeId = null)}
+/>
+
 <!--
   Cancelling is not undoing, and the person clicking has to know what it costs before it happens: a
   small ghost button beside a status badge was wired straight to the mutation, so one misclick threw
@@ -365,6 +422,30 @@ const canCancel = (status: string) => canHr('leaveRequest') && (status === 'pend
   gap: 12px;
   margin-block-end: 20px;
 }
+/*
+ * The tile is a button, so it needs the button reset undone: the global one strips background,
+ * border and padding, and the tile inside paints its own.
+ */
+.tile-button {
+  display: block;
+  width: 100%;
+  text-align: start;
+  font: inherit;
+  color: inherit;
+  border-radius: var(--kern-r-2xl);
+}
+.tile-button:hover :global(.ledger-tile) {
+  background: var(--kern-surface-card-hover);
+}
+.cue {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-block-start: 10px;
+  font-size: 12px;
+  /* A colour, not opacity: 6.74:1 on the tile in light, 6.12:1 in dark. */
+  color: var(--kern-ink-500);
+}
 /* Keeps an error or empty balance on the same rhythm as the tiles it stands in for. */
 .tiles-slot {
   margin-block-end: 20px;