@happyvertical/smrt-timesheets 0.0.0-stage → 0.53.0

package/dist/svelte/components/DurationDisplay.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+/**
+ * DurationDisplay - Formats hours for display
+ * Supports decimal (8.5) or HH:MM (8:30) formats
+ */
+
+import { formatHoursHHMM } from './utils.js';
+
+/** Props for DurationDisplay component */
+export interface Props {
+  /** Duration in hours to display. */
+  hours: number;
+  /** Format duration as decimal (8.5) or hours:minutes (8:30). */
+  format?: 'decimal' | 'hhmm';
+  /** Sets the font size of the duration display. */
+  size?: 'sm' | 'md' | 'lg';
+  /**
+   * Renders the `h` unit after a `decimal` value; set `false` for a bare
+   * number, such as in a column whose header already names the unit. An
+   * `hhmm` value spells its own unit in the `8:30` shape and never appends a
+   * separate one, so this prop does not affect that format.
+   */
+  showLabel?: boolean;
+}
+
+let {
+  hours,
+  format = 'decimal',
+  size = 'md',
+  showLabel = true,
+}: Props = $props();
+
+// $derived creates a reactive value, not a function - no wrapper or parentheses needed
+const formattedValue = $derived(
+  format === 'hhmm' ? formatHoursHHMM(hours) : hours.toFixed(1),
+);
+
+// Only the decimal form needs a unit appended: `8:30` already reads as hours
+// and minutes. That makes `h` the one unit `showLabel` has to gate.
+const unit = $derived(format === 'hhmm' ? '' : 'h');
+</script>
+
+<span class="duration" class:sm={size === 'sm'} class:lg={size === 'lg'}>
+  <span class="value">{formattedValue}</span>
+  {#if showLabel && unit}
+    <span class="unit">{unit}</span>
+  {/if}
+</span>
+
+<style>
+  .duration {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 0.125rem;
+    font-variant-numeric: tabular-nums;
+    font-size: var(--smrt-typography-body-large-size, 1rem);
+  }
+
+  .value {
+    font-weight: var(--smrt-typography-title-medium-weight, 500);
+    color: var(--smrt-color-on-surface);
+  }
+
+  .unit {
+    font-weight: var(--smrt-typography-body-medium-weight, 400);
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  /* Size variants */
+  .duration.sm {
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+  }
+
+  .duration.sm .value {
+    font-weight: var(--smrt-typography-body-medium-weight, 400);
+  }
+
+  .duration.lg {
+    font-size: var(--smrt-typography-headline-small-size, 1.5rem);
+  }
+</style>

package/dist/svelte/components/DurationDisplay.svelte.d.ts

@@ -0,0 +1,20 @@
+/** Props for DurationDisplay component */
+export interface Props {
+    /** Duration in hours to display. */
+    hours: number;
+    /** Format duration as decimal (8.5) or hours:minutes (8:30). */
+    format?: 'decimal' | 'hhmm';
+    /** Sets the font size of the duration display. */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Renders the `h` unit after a `decimal` value; set `false` for a bare
+     * number, such as in a column whose header already names the unit. An
+     * `hhmm` value spells its own unit in the `8:30` shape and never appends a
+     * separate one, so this prop does not affect that format.
+     */
+    showLabel?: boolean;
+}
+declare const DurationDisplay: import("svelte").Component<Props, {}, "">;
+type DurationDisplay = ReturnType<typeof DurationDisplay>;
+export default DurationDisplay;
+//# sourceMappingURL=DurationDisplay.svelte.d.ts.map

package/dist/svelte/components/DurationDisplay.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DurationDisplay.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/DurationDisplay.svelte.ts"],"names":[],"mappings":"AAUA,0CAA0C;AAC1C,MAAM,WAAW,KAAK;IACpB,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC5B,kDAAkD;IAClD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAmCD,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/svelte/components/TimeEntryApprovalQueue.svelte

@@ -0,0 +1,253 @@
+<script lang="ts">
+/**
+ * TimeEntryApprovalQueue — reusable time-entry review list (issue #1930,
+ * moved to smrt-timesheets in #3288): date, hours, description, worker,
+ * status, and the client charge amount at a glance, with approve/reject
+ * actions on `submitted` rows. Presentational: the host loads entries (e.g.
+ * through `ServiceTimeEntryCollection`), adapts them to
+ * `TimeEntryApprovalView` (smrt-support's `toSupportTimeEntryView` does this
+ * for support entries), and wires `onapprove` / `onreject` to its approval
+ * service.
+ */
+
+import { Button, StatusBadge } from '@happyvertical/smrt-ui';
+import { Input } from '@happyvertical/smrt-ui/forms';
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../i18n.js';
+import {
+  humanizeTimeEntryStatus,
+  type TimeEntryApprovalView,
+  timeEntryStatusBadgeKey,
+} from '../types.js';
+
+const { t } = useI18n();
+
+export interface TimeEntryApprovalQueueProps {
+  /** Array of time entries awaiting approval review. */
+  entries: TimeEntryApprovalView[];
+  /** Callback invoked with entry ID when approving a time entry. */
+  onapprove?: (id: string) => void;
+  /** Callback invoked with entry ID and rejection reason when rejecting a time entry. */
+  onreject?: (id: string, reason: string) => void;
+  /** Message displayed when the approval queue is empty. */
+  emptyMessage?: string;
+}
+
+const {
+  entries,
+  onapprove,
+  onreject,
+  emptyMessage,
+}: TimeEntryApprovalQueueProps = $props();
+
+/** The entry currently collecting a rejection reason (one at a time). */
+let rejectingId = $state<string | null>(null);
+let rejectReason = $state('');
+
+function beginReject(id: string): void {
+  rejectingId = id;
+  rejectReason = '';
+}
+
+function cancelReject(): void {
+  rejectingId = null;
+  rejectReason = '';
+}
+
+function confirmReject(id: string): void {
+  const reason = rejectReason.trim();
+  if (!reason) return;
+  onreject?.(id, reason);
+  cancelReject();
+}
+
+function formatHours(hours: number): string {
+  return `${hours.toFixed(1)}h`;
+}
+
+/**
+ * Render a minor-units charge for display.
+ *
+ * `amount` is integer minor units (#2401), so `toFixed(2)` would print 180
+ * cents as "180.00" — a hundredfold overstatement. The scale is the currency's
+ * own minor-unit exponent rather than a hard-coded 100, so a zero-decimal
+ * currency (JPY, KRW) is not divided at all and a three-decimal one (BHD) is
+ * divided by 1000. No currency symbol is added: the queue shows a bare figure
+ * and the host app supplies the label.
+ */
+function formatAmount(amount: number, currency = 'USD'): string {
+  const digits =
+    new Intl.NumberFormat(undefined, {
+      style: 'currency',
+      currency,
+    }).resolvedOptions().maximumFractionDigits ?? 2;
+  return (amount / 10 ** digits).toFixed(digits);
+}
+</script>
+
+{#if entries.length === 0}
+  <p class="time-approval-empty">
+    {emptyMessage ?? t(M['timesheets.approval_queue.empty'])}
+  </p>
+{:else}
+  <ul class="time-approval-queue">
+    {#each entries as entry (entry.id)}
+      <li class="time-approval-row">
+        <div class="time-approval-line">
+          <span class="time-approval-date">{entry.date}</span>
+          <span class="time-approval-main">
+            <span class="time-approval-description">{entry.description}</span>
+            {#if entry.workerName}
+              <span class="time-approval-worker">{entry.workerName}</span>
+            {/if}
+          </span>
+          <span class="time-approval-meta">
+            <span class="time-approval-hours">{formatHours(entry.hours)}</span>
+            <StatusBadge
+              status={timeEntryStatusBadgeKey(entry.status)}
+              label={humanizeTimeEntryStatus(entry.status)}
+              size="sm"
+            />
+            {#if entry.amount !== undefined}
+              <span class="time-approval-amount">
+                {formatAmount(entry.amount, entry.currency)}
+              </span>
+            {/if}
+          </span>
+        </div>
+        {#if entry.status === 'submitted'}
+          <div class="time-approval-actions">
+            {#if rejectingId === entry.id}
+              <Input
+                bind:value={rejectReason}
+                placeholder={t(M['timesheets.approval_queue.reason_placeholder'])}
+                aria-label={t(M['timesheets.approval_queue.reason_aria'], { description: entry.description })}
+              />
+              <Button
+                variant="danger"
+                size="sm"
+                disabled={rejectReason.trim().length === 0}
+                onclick={() => confirmReject(entry.id)}
+                aria-label={t(M['timesheets.approval_queue.confirm_reject_aria'], { description: entry.description })}
+              >
+                {t(M['timesheets.approval_queue.confirm_reject'])}
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                onclick={cancelReject}
+                aria-label={t(M['timesheets.approval_queue.cancel_aria'], { description: entry.description })}
+              >
+                {t(M['timesheets.approval_queue.cancel'])}
+              </Button>
+            {:else}
+              <Button
+                variant="primary"
+                size="sm"
+                onclick={() => onapprove?.(entry.id)}
+                aria-label={t(M['timesheets.approval_queue.approve_aria'], { description: entry.description })}
+              >
+                {t(M['timesheets.approval_queue.approve'])}
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                onclick={() => beginReject(entry.id)}
+                aria-label={t(M['timesheets.approval_queue.reject_aria'], { description: entry.description })}
+              >
+                {t(M['timesheets.approval_queue.reject'])}
+              </Button>
+            {/if}
+          </div>
+        {/if}
+      </li>
+    {/each}
+  </ul>
+{/if}
+
+<style>
+  .time-approval-queue {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .time-approval-row {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    padding: 0.5rem 0.25rem;
+    border-bottom: 1px solid var(--smrt-color-outline-variant, transparent);
+  }
+
+  .time-approval-row:last-child {
+    border-bottom: none;
+  }
+
+  .time-approval-line {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    text-align: left;
+  }
+
+  .time-approval-date {
+    flex-shrink: 0;
+    font-size: 0.75rem;
+    color: var(--smrt-color-on-surface-variant, inherit);
+  }
+
+  .time-approval-main {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    min-width: 0;
+    flex: 1;
+  }
+
+  .time-approval-description {
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .time-approval-worker {
+    font-size: 0.75rem;
+    color: var(--smrt-color-on-surface-variant, inherit);
+  }
+
+  .time-approval-meta {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-shrink: 0;
+  }
+
+  .time-approval-hours {
+    font-weight: 500;
+    color: var(--smrt-color-primary, inherit);
+  }
+
+  .time-approval-amount {
+    font-variant-numeric: tabular-nums;
+    font-weight: 500;
+  }
+
+  .time-approval-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    justify-content: flex-end;
+  }
+
+  .time-approval-empty {
+    color: var(--smrt-color-on-surface-variant, inherit);
+    padding: 1rem 0;
+  }
+</style>

package/dist/svelte/components/TimeEntryApprovalQueue.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type TimeEntryApprovalView } from '../types.js';
+export interface TimeEntryApprovalQueueProps {
+    /** Array of time entries awaiting approval review. */
+    entries: TimeEntryApprovalView[];
+    /** Callback invoked with entry ID when approving a time entry. */
+    onapprove?: (id: string) => void;
+    /** Callback invoked with entry ID and rejection reason when rejecting a time entry. */
+    onreject?: (id: string, reason: string) => void;
+    /** Message displayed when the approval queue is empty. */
+    emptyMessage?: string;
+}
+declare const TimeEntryApprovalQueue: import("svelte").Component<TimeEntryApprovalQueueProps, {}, "">;
+type TimeEntryApprovalQueue = ReturnType<typeof TimeEntryApprovalQueue>;
+export default TimeEntryApprovalQueue;
+//# sourceMappingURL=TimeEntryApprovalQueue.svelte.d.ts.map

package/dist/svelte/components/TimeEntryApprovalQueue.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeEntryApprovalQueue.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/TimeEntryApprovalQueue.svelte.ts"],"names":[],"mappings":"AAiBA,OAAO,EAEL,KAAK,qBAAqB,EAE3B,MAAM,aAAa,CAAC;AAGrB,MAAM,WAAW,2BAA2B;IAC1C,sDAAsD;IACtD,OAAO,EAAE,qBAAqB,EAAE,CAAC;IACjC,kEAAkE;IAClE,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,uFAAuF;IACvF,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,0DAA0D;IAC1D,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAwHD,QAAA,MAAM,sBAAsB,iEAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

package/dist/svelte/components/TimeEntryCard.svelte

@@ -0,0 +1,304 @@
+<script lang="ts">
+/**
+ * TimeEntryCard - Card component for displaying time entries
+ * Supports selection mode for bulk operations
+ */
+
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import type { Snippet } from 'svelte';
+import { M } from '../i18n.js';
+import {
+  type Currency,
+  formatCurrency,
+  formatDate,
+  formatHours,
+  statusColors,
+  type TimeEntry,
+} from './utils.js';
+
+/** Props for TimeEntryCard component */
+export interface Props {
+  /** Time entry data to display. */
+  entry: TimeEntry;
+  /** URL to navigate to when the card is clicked. */
+  href?: string;
+  /** Invoked when the card content is clicked. */
+  onclick?: () => void;
+  /** Shows a checkbox for selecting the entry. */
+  selectable?: boolean;
+  /** Indicates whether the entry is selected. */
+  selected?: boolean;
+  /** Invoked when the selection checkbox is toggled. */
+  onselect?: (id: string, selected: boolean) => void;
+  /** Currency code for formatting hourly rates and amounts. */
+  currency?: Currency;
+  /** Renders action buttons on the right side of the card. */
+  actions?: Snippet;
+}
+
+let {
+  entry,
+  href,
+  onclick,
+  selectable = false,
+  selected = false,
+  onselect,
+  currency = 'CAD',
+  actions,
+}: Props = $props();
+
+const { t } = useI18n();
+
+function handleCheckboxChange(event: Event) {
+  const target = event.target as HTMLInputElement;
+  onselect?.(entry.id, target.checked);
+}
+
+function handleCardClick(event: MouseEvent) {
+  // If there's an onclick handler, use it
+  if (onclick) {
+    event.preventDefault();
+    onclick();
+  }
+  // If href is provided, let the anchor handle navigation naturally
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Enter' || event.key === ' ') {
+    if (onclick) {
+      event.preventDefault();
+      onclick();
+    }
+    // For href, let the anchor handle it naturally
+  }
+}
+</script>
+
+<div
+  class="time-entry-card"
+  class:selectable
+  class:selected
+  class:clickable={!!href || !!onclick}
+>
+  {#if selectable}
+    <div class="checkbox-wrapper">
+      <!-- raw-primitive-allow: native checkbox; no Provider-free checkbox primitive, kept native to match the indeterminate select-all in TimeEntryList -->
+      <input
+        type="checkbox"
+        checked={selected}
+        onchange={handleCheckboxChange}
+        aria-label={t(M['projects.time_entry_card.select_entry'], { description: entry.description })}
+      />
+    </div>
+  {/if}
+
+  {#if href}
+    <a
+      {href}
+      class="card-content"
+      onclick={handleCardClick}
+      onkeydown={handleKeydown}
+    >
+      {@render cardBody()}
+    </a>
+  {:else if onclick}
+    <!-- raw-primitive-allow: pressable selection card wrapping rich content; structural, not a standard action button -->
+    <button
+      type="button"
+      class="card-content"
+      onclick={() => onclick?.()}
+    >
+      {@render cardBody()}
+    </button>
+  {:else}
+    <div class="card-content">
+      {@render cardBody()}
+    </div>
+  {/if}
+
+  {#if actions}
+    <div class="card-actions">
+      {@render actions()}
+    </div>
+  {/if}
+</div>
+
+{#snippet cardBody()}
+  <div class="entry-header">
+    <span class="date">{formatDate(entry.date)}</span>
+    <span class="status-badge" style="--status-color: {statusColors[entry.status]}">
+      {entry.status.toUpperCase()}
+    </span>
+  </div>
+
+  <div class="entry-body">
+    <p class="description">{entry.description}</p>
+    {#if entry.workerName}
+      <p class="worker">{entry.workerName}</p>
+    {/if}
+  </div>
+
+  <div class="entry-footer">
+    <div class="hours">
+      <span class="hours-value">{formatHours(entry.hours)}</span>
+      {#if entry.hourlyRate}
+        <span class="rate">@ {formatCurrency(entry.hourlyRate, currency)}/hr</span>
+      {/if}
+    </div>
+    {#if entry.amount !== undefined}
+      <span class="amount">{formatCurrency(entry.amount, currency)}</span>
+    {/if}
+  </div>
+
+  {#if entry.mileage && entry.mileage > 0}
+    <div class="mileage">
+      {t(M['projects.time_entry_card.mileage'], { mileage: entry.mileage })}
+    </div>
+  {/if}
+{/snippet}
+
+<style>
+  .time-entry-card {
+    display: flex;
+    align-items: stretch;
+    background: var(--smrt-color-surface);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-medium, 12px);
+    overflow: hidden;
+    transition: all 0.2s var(--smrt-easing-standard);
+  }
+
+  .time-entry-card:hover {
+    border-color: var(--smrt-color-outline);
+  }
+
+  .time-entry-card.selected {
+    border-color: var(--smrt-color-primary);
+    background: var(--smrt-color-primary-container);
+  }
+
+  .time-entry-card.clickable .card-content {
+    cursor: pointer;
+  }
+
+  .time-entry-card.clickable:hover {
+    box-shadow: var(--smrt-elevation-1);
+  }
+
+  .checkbox-wrapper {
+    display: flex;
+    align-items: center;
+    padding: 1rem;
+    background: var(--smrt-color-surface-container-low);
+    border-right: 1px solid var(--smrt-color-outline-variant);
+  }
+
+  .checkbox-wrapper input[type='checkbox'] {
+    width: 1.25rem;
+    height: 1.25rem;
+    cursor: pointer;
+    accent-color: var(--smrt-color-primary);
+  }
+
+  .card-content {
+    flex: 1;
+    padding: 1rem;
+    min-width: 0;
+    text-decoration: none;
+    color: inherit;
+    background: transparent;
+    border: none;
+    text-align: left;
+    font: inherit;
+    display: block;
+    width: 100%;
+  }
+
+  a.card-content:focus,
+  button.card-content:focus {
+    outline: 2px solid var(--smrt-color-primary);
+    outline-offset: -2px;
+    border-radius: var(--smrt-radius-small, 8px);
+  }
+
+  .entry-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+  }
+
+  .date {
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .status-badge {
+    font-size: var(--smrt-typography-label-small-size, 0.625rem);
+    font-weight: var(--smrt-typography-label-small-weight, 500);
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--smrt-radius-small, 8px);
+    background: var(--status-color);
+    color: var(--smrt-color-on-primary);
+    letter-spacing: var(--smrt-typography-label-small-tracking, 0.5px);
+  }
+
+  .entry-body {
+    margin-bottom: 0.75rem;
+  }
+
+  .description {
+    margin: 0;
+    font-size: var(--smrt-typography-body-large-size, 0.9375rem);
+    color: var(--smrt-color-on-surface);
+    line-height: var(--smrt-typography-body-large-line-height, 1.5);
+  }
+
+  .worker {
+    margin: 0.25rem 0 0;
+    font-size: var(--smrt-typography-body-small-size, 0.8125rem);
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .entry-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+  }
+
+  .hours {
+    display: flex;
+    align-items: baseline;
+    gap: 0.5rem;
+  }
+
+  .hours-value {
+    font-size: var(--smrt-typography-body-large-size, 1rem);
+    font-weight: var(--smrt-typography-title-medium-weight, 500);
+    color: var(--smrt-color-primary);
+  }
+
+  .rate {
+    font-size: var(--smrt-typography-body-small-size, 0.75rem);
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .amount {
+    font-size: var(--smrt-typography-body-large-size, 1rem);
+    font-weight: var(--smrt-typography-title-medium-weight, 500);
+    color: var(--smrt-color-on-surface);
+  }
+
+  .mileage {
+    margin-top: 0.5rem;
+    font-size: var(--smrt-typography-body-small-size, 0.75rem);
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .card-actions {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem;
+    border-left: 1px solid var(--smrt-color-outline-variant);
+  }
+</style>