@happyvertical/smrt-projects 0.30.0

package/dist/svelte/components/TimeEntryList.svelte

@@ -0,0 +1,351 @@
+<script lang="ts">
+/**
+ * TimeEntryList - List of time entries with optional selection
+ * Supports bulk selection and grouping
+ */
+
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../i18n.js';
+import {
+  type Currency,
+  formatCurrency,
+  formatDate,
+  formatHours,
+  statusColors,
+  type TimeEntry,
+} from './utils.js';
+
+const { t } = useI18n();
+
+/** Props for TimeEntryList component */
+export interface Props {
+  entries: TimeEntry[];
+  selectable?: boolean;
+  selectedIds?: string[];
+  onselectionchange?: (ids: string[]) => void;
+  emptyMessage?: string;
+  baseHref?: string;
+  currency?: Currency;
+  /** Filter function to determine which entries can be selected */
+  canSelect?: (entry: TimeEntry) => boolean;
+}
+
+let {
+  entries,
+  selectable = false,
+  selectedIds = [],
+  onselectionchange,
+  emptyMessage = 'No time entries',
+  baseHref,
+  currency = 'CAD',
+  canSelect = () => true,
+}: Props = $props();
+
+// Filter entries that can actually be selected
+const selectableEntries = $derived(selectable ? entries.filter(canSelect) : []);
+
+const allSelected = $derived(
+  selectableEntries.length > 0 &&
+    selectableEntries.every((e) => selectedIds.includes(e.id)),
+);
+
+const someSelected = $derived(selectedIds.length > 0 && !allSelected);
+
+function handleSelectAll(event: Event) {
+  const target = event.target as HTMLInputElement;
+  if (target.checked) {
+    onselectionchange?.(selectableEntries.map((e) => e.id));
+  } else {
+    onselectionchange?.([]);
+  }
+}
+
+function handleSelect(id: string, selected: boolean, event: Event) {
+  event.preventDefault();
+  event.stopPropagation();
+  if (selected) {
+    onselectionchange?.([...selectedIds, id]);
+  } else {
+    onselectionchange?.(selectedIds.filter((i) => i !== id));
+  }
+}
+
+function getEntryHref(entry: TimeEntry): string | undefined {
+  if (!baseHref) return undefined;
+  return `${baseHref}/${entry.id}`;
+}
+</script>
+
+{#if entries.length === 0}
+  <div class="empty-state">
+    <p>{emptyMessage}</p>
+  </div>
+{:else}
+  <div class="time-entry-list">
+    {#if selectable && selectableEntries.length > 0}
+      <div class="list-header">
+        <label class="select-all">
+          <input
+            type="checkbox"
+            checked={allSelected}
+            indeterminate={someSelected}
+            onchange={handleSelectAll}
+            aria-label={t(M['projects.time_entry_list.select_all_aria'])}
+          />
+          <span>{t(M['projects.time_entry_list.select_all'])}</span>
+        </label>
+        <span class="selection-count">
+          {t(M['projects.time_entry_list.selection_count'], { selected: selectedIds.length, total: selectableEntries.length })}
+        </span>
+      </div>
+    {/if}
+
+    <div class="entries">
+      {#each entries as entry (entry.id)}
+        {@const isSelected = selectedIds.includes(entry.id)}
+        {@const isSelectable = selectable && canSelect(entry)}
+        {@const entryHref = getEntryHref(entry)}
+        <div
+          class="entry-row"
+          class:selected={isSelected}
+          class:selectable={isSelectable}
+          class:has-checkbox={selectable && selectableEntries.length > 0}
+        >
+          {#if selectable && selectableEntries.length > 0}
+            <div class="checkbox-cell">
+              {#if isSelectable}
+                <input
+                  type="checkbox"
+                  checked={isSelected}
+                  onchange={(e) => handleSelect(entry.id, (e.target as HTMLInputElement).checked, e)}
+                  aria-label={t(M['projects.time_entry_list.select_entry_aria'], { description: entry.description })}
+                />
+              {/if}
+            </div>
+          {/if}
+
+          {#if entryHref}
+            <a href={entryHref} class="entry-content">
+              {@render entryDetails(entry)}
+            </a>
+          {:else}
+            <div class="entry-content">
+              {@render entryDetails(entry)}
+            </div>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  </div>
+{/if}
+
+{#snippet entryDetails(entry: TimeEntry)}
+  <div class="date-cell">
+    {formatDate(entry.date)}
+  </div>
+
+  <div class="description-cell">
+    <span class="description">{entry.description}</span>
+    {#if entry.workerName}
+      <span class="worker">{entry.workerName}</span>
+    {/if}
+  </div>
+
+  <div class="hours-cell">
+    {formatHours(entry.hours)}
+  </div>
+
+  <div class="status-cell">
+    <span class="status-badge" style="--status-color: {statusColors[entry.status]}">
+      {entry.status}
+    </span>
+  </div>
+
+  {#if entry.amount !== undefined}
+    <div class="amount-cell">
+      {formatCurrency(entry.amount, currency)}
+    </div>
+  {/if}
+{/snippet}
+
+<style>
+  .empty-state {
+    padding: 3rem 1rem;
+    text-align: center;
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .time-entry-list {
+    background: var(--smrt-color-surface);
+    border-radius: var(--smrt-radius-large, 16px);
+    overflow: hidden;
+    border: 1px solid var(--smrt-color-outline-variant);
+  }
+
+  .list-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    background: var(--smrt-color-surface-container-low);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
+  }
+
+  .select-all {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    font-weight: var(--smrt-typography-label-large-weight, 500);
+  }
+
+  .select-all input[type='checkbox'] {
+    width: 1rem;
+    height: 1rem;
+    cursor: pointer;
+    accent-color: var(--smrt-color-primary);
+  }
+
+  .selection-count {
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .entries {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .entry-row {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
+    transition: background 0.15s var(--smrt-easing-standard);
+  }
+
+  .entry-row:last-child {
+    border-bottom: none;
+  }
+
+  .entry-row:hover {
+    background: var(--smrt-color-surface-container-lowest);
+  }
+
+  .entry-row.selected {
+    background: var(--smrt-color-primary-container);
+  }
+
+  .checkbox-cell {
+    width: 2rem;
+    flex-shrink: 0;
+    padding-left: 1rem;
+  }
+
+  .checkbox-cell input[type='checkbox'] {
+    width: 1rem;
+    height: 1rem;
+    cursor: pointer;
+    accent-color: var(--smrt-color-primary);
+  }
+
+  .entry-content {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    padding: 0.875rem 1rem;
+    text-decoration: none;
+    color: inherit;
+    min-width: 0;
+  }
+
+  a.entry-content:focus {
+    outline: 2px solid var(--smrt-color-primary);
+    outline-offset: -2px;
+  }
+
+  .date-cell {
+    width: 4.5rem;
+    flex-shrink: 0;
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .description-cell {
+    flex: 1;
+    min-width: 0;
+    padding-right: 1rem;
+  }
+
+  .description {
+    display: block;
+    font-size: var(--smrt-typography-body-large-size, 0.9375rem);
+    color: var(--smrt-color-on-surface);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .worker {
+    display: block;
+    font-size: var(--smrt-typography-body-small-size, 0.75rem);
+    color: var(--smrt-color-on-surface-variant);
+    margin-top: 0.125rem;
+  }
+
+  .hours-cell {
+    width: 4rem;
+    flex-shrink: 0;
+    font-size: var(--smrt-typography-body-large-size, 0.9375rem);
+    font-weight: var(--smrt-typography-title-medium-weight, 500);
+    color: var(--smrt-color-primary);
+    text-align: right;
+    padding-right: 1rem;
+  }
+
+  .status-cell {
+    width: 6rem;
+    flex-shrink: 0;
+    text-align: center;
+  }
+
+  .status-badge {
+    display: inline-block;
+    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);
+    text-transform: uppercase;
+    letter-spacing: var(--smrt-typography-label-small-tracking, 0.5px);
+  }
+
+  .amount-cell {
+    width: 6rem;
+    flex-shrink: 0;
+    font-size: var(--smrt-typography-body-large-size, 0.9375rem);
+    font-weight: var(--smrt-typography-title-medium-weight, 500);
+    text-align: right;
+  }
+
+  @media (max-width: 640px) {
+    .entry-content {
+      flex-wrap: wrap;
+      gap: 0.5rem;
+    }
+
+    .description-cell {
+      order: 1;
+      width: 100%;
+      padding-right: 0;
+    }
+
+    .date-cell,
+    .hours-cell,
+    .status-cell,
+    .amount-cell {
+      flex: none;
+    }
+  }
+</style>

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

@@ -0,0 +1,17 @@
+import { type Currency, type TimeEntry } from './utils.js';
+/** Props for TimeEntryList component */
+export interface Props {
+    entries: TimeEntry[];
+    selectable?: boolean;
+    selectedIds?: string[];
+    onselectionchange?: (ids: string[]) => void;
+    emptyMessage?: string;
+    baseHref?: string;
+    currency?: Currency;
+    /** Filter function to determine which entries can be selected */
+    canSelect?: (entry: TimeEntry) => boolean;
+}
+declare const TimeEntryList: import("svelte").Component<Props, {}, "">;
+type TimeEntryList = ReturnType<typeof TimeEntryList>;
+export default TimeEntryList;
+//# sourceMappingURL=TimeEntryList.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimeEntryList.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/TimeEntryList.svelte.ts"],"names":[],"mappings":"AASA,OAAO,EACL,KAAK,QAAQ,EAKb,KAAK,SAAS,EACf,MAAM,YAAY,CAAC;AAGpB,wCAAwC;AACxC,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,SAAS,EAAE,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,iEAAiE;IACjE,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,OAAO,CAAC;CAC3C;AAyID,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/components/TimeSummary.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+/**
+ * TimeSummary - Summary statistics for time entries
+ * Shows total hours, amounts, and pending items
+ */
+
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../i18n.js';
+import { type Currency, formatCurrency, formatHours } from './utils.js';
+
+/** Props for TimeSummary component */
+export interface Props {
+  totalHours: number;
+  totalAmount: number;
+  pendingHours?: number;
+  pendingAmount?: number;
+  approvedHours?: number;
+  approvedAmount?: number;
+  entryCount?: number;
+  currency?: Currency;
+  showPending?: boolean;
+  showApproved?: boolean;
+  layout?: 'horizontal' | 'grid';
+}
+
+let {
+  totalHours,
+  totalAmount,
+  pendingHours = 0,
+  pendingAmount = 0,
+  approvedHours = 0,
+  approvedAmount = 0,
+  entryCount,
+  currency = 'CAD',
+  showPending = true,
+  showApproved = false,
+  layout = 'grid',
+}: Props = $props();
+
+const { t } = useI18n();
+</script>
+
+<div class="time-summary" class:horizontal={layout === 'horizontal'}>
+  <div class="summary-card">
+    <span class="label">{t(M['projects.time_summary.total_hours'])}</span>
+    <span class="value">{formatHours(totalHours)}</span>
+    {#if entryCount !== undefined}
+      <span class="count">{entryCount} {entryCount === 1 ? 'entry' : 'entries'}</span>
+    {/if}
+  </div>
+
+  <div class="summary-card">
+    <span class="label">{t(M['projects.time_summary.total_value'])}</span>
+    <span class="value">{formatCurrency(totalAmount, currency)}</span>
+  </div>
+
+  {#if showPending && (pendingHours > 0 || pendingAmount > 0)}
+    <div class="summary-card highlight">
+      <span class="label">{t(M['projects.time_summary.pending_approval'])}</span>
+      <span class="value">{formatHours(pendingHours)}</span>
+      <span class="sub-value">{formatCurrency(pendingAmount, currency)}</span>
+    </div>
+  {/if}
+
+  {#if showApproved && (approvedHours > 0 || approvedAmount > 0)}
+    <div class="summary-card success">
+      <span class="label">Approved</span>
+      <span class="value">{formatHours(approvedHours)}</span>
+      <span class="sub-value">{formatCurrency(approvedAmount, currency)}</span>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .time-summary {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    gap: 1rem;
+  }
+
+  .time-summary.horizontal {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+  }
+
+  .time-summary.horizontal .summary-card {
+    flex: 1 1 140px;
+    min-width: 140px;
+  }
+
+  .summary-card {
+    background: var(--smrt-color-surface);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-medium, 12px);
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .summary-card.highlight {
+    background: var(--smrt-color-tertiary-container);
+    border-color: var(--smrt-color-tertiary);
+  }
+
+  .summary-card.success {
+    background: var(--smrt-color-primary-container);
+    border-color: var(--smrt-color-primary);
+  }
+
+  .label {
+    font-size: var(--smrt-typography-label-small-size, 0.75rem);
+    font-weight: var(--smrt-typography-label-small-weight, 500);
+    color: var(--smrt-color-on-surface-variant);
+    text-transform: uppercase;
+    letter-spacing: var(--smrt-typography-label-small-tracking, 0.5px);
+  }
+
+  .value {
+    font-size: var(--smrt-typography-headline-small-size, 1.5rem);
+    font-weight: var(--smrt-typography-headline-small-weight, 400);
+    color: var(--smrt-color-on-surface);
+  }
+
+  .sub-value {
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .count {
+    font-size: var(--smrt-typography-body-small-size, 0.75rem);
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .highlight .label {
+    color: var(--smrt-color-on-tertiary-container);
+  }
+
+  .highlight .value {
+    color: var(--smrt-color-tertiary);
+  }
+
+  .highlight .sub-value {
+    color: var(--smrt-color-on-tertiary-container);
+  }
+
+  .success .label {
+    color: var(--smrt-color-on-primary-container);
+  }
+
+  .success .value {
+    color: var(--smrt-color-primary);
+  }
+
+  .success .sub-value {
+    color: var(--smrt-color-on-primary-container);
+  }
+
+  @media (max-width: 480px) {
+    .time-summary {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+</style>

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

@@ -0,0 +1,19 @@
+import { type Currency } from './utils.js';
+/** Props for TimeSummary component */
+export interface Props {
+    totalHours: number;
+    totalAmount: number;
+    pendingHours?: number;
+    pendingAmount?: number;
+    approvedHours?: number;
+    approvedAmount?: number;
+    entryCount?: number;
+    currency?: Currency;
+    showPending?: boolean;
+    showApproved?: boolean;
+    layout?: 'horizontal' | 'grid';
+}
+declare const TimeSummary: import("svelte").Component<Props, {}, "">;
+type TimeSummary = ReturnType<typeof TimeSummary>;
+export default TimeSummary;
+//# sourceMappingURL=TimeSummary.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimeSummary.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/TimeSummary.svelte.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,KAAK,QAAQ,EAA+B,MAAM,YAAY,CAAC;AAGxE,sCAAsC;AACtC,MAAM,WAAW,KAAK;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;CAChC;AA6DD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/__tests__/ApprovalActions.test.js

@@ -0,0 +1,41 @@
+// @vitest-environment jsdom
+/**
+ * Component coverage for ApprovalActions via the shared S11 harness (#1416).
+ */
+import { expectNoA11yViolations, render, screen, userEvent, } from '@happyvertical/smrt-vitest/svelte';
+import { describe, expect, it, vi } from 'vitest';
+import ApprovalActions from '../ApprovalActions.svelte';
+describe('ApprovalActions', () => {
+    it('offers Submit/Delete for a draft and submits on click', async () => {
+        const onsubmit = vi.fn();
+        render(ApprovalActions, {
+            props: { status: 'draft', onsubmit, ondelete: vi.fn() },
+        });
+        expect(screen.getByRole('button', { name: 'Submit for Approval' })).toBeInTheDocument();
+        await userEvent.click(screen.getByRole('button', { name: 'Submit for Approval' }));
+        expect(onsubmit).toHaveBeenCalledTimes(1);
+    });
+    it('offers Approve/Reject for a submitted entry', async () => {
+        const onapprove = vi.fn();
+        render(ApprovalActions, {
+            props: { status: 'submitted', onapprove, onreject: vi.fn() },
+        });
+        await userEvent.click(screen.getByRole('button', { name: 'Approve' }));
+        expect(onapprove).toHaveBeenCalledTimes(1);
+        expect(screen.getByRole('button', { name: 'Reject' })).toBeInTheDocument();
+    });
+    it('shows the approved status message', () => {
+        render(ApprovalActions, { props: { status: 'approved' } });
+        expect(screen.getByText('This entry has been approved')).toBeInTheDocument();
+    });
+    it('is axe-clean', async () => {
+        const { container } = render(ApprovalActions, {
+            props: {
+                status: 'submitted',
+                onapprove: vi.fn(),
+                onreject: vi.fn(),
+            },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/svelte/components/__tests__/BulkActions.test.js

@@ -0,0 +1,46 @@
+// @vitest-environment jsdom
+/**
+ * Component coverage for BulkActions via the shared S11 harness (#1416).
+ */
+import { expectNoA11yViolations, render, screen, userEvent, } from '@happyvertical/smrt-vitest/svelte';
+import { describe, expect, it, vi } from 'vitest';
+import BulkActions from '../BulkActions.svelte';
+const baseProps = (over = {}) => ({
+    selectedCount: 3,
+    onapprove: vi.fn(),
+    onreject: vi.fn(),
+    ondelete: vi.fn(),
+    onexport: vi.fn(),
+    onclear: vi.fn(),
+    ...over,
+});
+describe('BulkActions', () => {
+    it('shows the selection count and bulk action buttons', () => {
+        render(BulkActions, { props: baseProps() });
+        expect(screen.getByText('3')).toBeInTheDocument();
+        expect(screen.getByText('items selected')).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Approve All' })).toBeInTheDocument();
+    });
+    it('invokes onapprove when Approve All is clicked', async () => {
+        const onapprove = vi.fn();
+        render(BulkActions, { props: baseProps({ onapprove }) });
+        await userEvent.click(screen.getByRole('button', { name: 'Approve All' }));
+        expect(onapprove).toHaveBeenCalledTimes(1);
+    });
+    it('clears the selection', async () => {
+        const onclear = vi.fn();
+        render(BulkActions, { props: baseProps({ onclear }) });
+        await userEvent.click(screen.getByRole('button', { name: 'Clear' }));
+        expect(onclear).toHaveBeenCalledTimes(1);
+    });
+    it('renders nothing when no items are selected', () => {
+        const { container } = render(BulkActions, {
+            props: baseProps({ selectedCount: 0 }),
+        });
+        expect(container.querySelector('.bulk-actions')).toBeNull();
+    });
+    it('is axe-clean', async () => {
+        const { container } = render(BulkActions, { props: baseProps() });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/svelte/components/__tests__/DurationDisplay.test.js

@@ -0,0 +1,23 @@
+// @vitest-environment jsdom
+/**
+ * First component test in smrt-projects via the shared S11 harness (#1416).
+ */
+import { expectNoA11yViolations, render, screen, } from '@happyvertical/smrt-vitest/svelte';
+import { describe, expect, it } from 'vitest';
+import DurationDisplay from '../DurationDisplay.svelte';
+describe('DurationDisplay', () => {
+    it('renders decimal hours to one decimal place', () => {
+        render(DurationDisplay, { props: { hours: 2.5 } });
+        expect(screen.getByText('2.5')).toBeInTheDocument();
+    });
+    it('renders an HH:MM value in hhmm format', () => {
+        render(DurationDisplay, { props: { hours: 1.5, format: 'hhmm' } });
+        expect(screen.getByText('1:30')).toBeInTheDocument();
+    });
+    it('is axe-clean', async () => {
+        const { container } = render(DurationDisplay, {
+            props: { hours: 8, showLabel: true },
+        });
+        await expectNoA11yViolations(container);
+    });
+});