@happyvertical/smrt-support 0.52.0 → 0.53.0

package/dist/svelte/components/TimeEntryApprovalQueue.svelte

@@ -1,245 +0,0 @@
-<script lang="ts">
-/**
- * TimeEntryApprovalQueue — reusable Service Time Entry review list (issue
- * #1930): 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 through `TimeEntryApprovalService`
- * / `ServiceTimeEntryCollection`, adapts them with `toSupportTimeEntryView`,
- * and wires `onapprove` / `onreject` to the approval service.
- */
-
-import { Button, StatusBadge } from '@happyvertical/smrt-ui';
-import { Input } from '@happyvertical/smrt-ui/forms';
-import {
-  humanizeStatus,
-  type SupportTimeEntryView,
-  timeEntryStatusBadgeKey,
-} from '../types.js';
-
-export interface TimeEntryApprovalQueueProps {
-  /** Array of time entries awaiting approval review. */
-  entries: SupportTimeEntryView[];
-  /** 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 = 'No time entries',
-}: 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}</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={humanizeStatus(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="Rejection reason"
-                aria-label={`Rejection reason for: ${entry.description}`}
-              />
-              <Button
-                variant="danger"
-                size="sm"
-                disabled={rejectReason.trim().length === 0}
-                onclick={() => confirmReject(entry.id)}
-                aria-label={`Confirm rejection of: ${entry.description}`}
-              >
-                Confirm reject
-              </Button>
-              <Button
-                variant="ghost"
-                size="sm"
-                onclick={cancelReject}
-                aria-label={`Cancel rejecting: ${entry.description}`}
-              >
-                Cancel
-              </Button>
-            {:else}
-              <Button
-                variant="primary"
-                size="sm"
-                onclick={() => onapprove?.(entry.id)}
-                aria-label={`Approve time entry: ${entry.description}`}
-              >
-                Approve
-              </Button>
-              <Button
-                variant="ghost"
-                size="sm"
-                onclick={() => beginReject(entry.id)}
-                aria-label={`Reject time entry: ${entry.description}`}
-              >
-                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

@@ -1,15 +0,0 @@
-import { type SupportTimeEntryView } from '../types.js';
-export interface TimeEntryApprovalQueueProps {
-    /** Array of time entries awaiting approval review. */
-    entries: SupportTimeEntryView[];
-    /** 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

@@ -1 +0,0 @@
-{"version":3,"file":"TimeEntryApprovalQueue.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/TimeEntryApprovalQueue.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,EAEL,KAAK,oBAAoB,EAE1B,MAAM,aAAa,CAAC;AAGrB,MAAM,WAAW,2BAA2B;IAC1C,sDAAsD;IACtD,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAChC,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;AAkHD,QAAA,MAAM,sBAAsB,iEAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

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

@@ -1,115 +0,0 @@
-// @vitest-environment jsdom
-/**
- * Component coverage for TimeEntryApprovalQueue via the shared S11 harness
- * (#1416): rendering, the approve/reject callbacks (reject collects a
- * reason first), and accessibility.
- */
-import { expectNoA11yViolations, render, screen, userEvent, } from '@happyvertical/smrt-vitest/svelte';
-import { describe, expect, it, vi } from 'vitest';
-import TimeEntryApprovalQueue from '../TimeEntryApprovalQueue.svelte';
-function entryView(overrides = {}) {
-    return {
-        id: 'te-1',
-        date: '2026-07-01',
-        hours: 1.5,
-        description: 'Debugged the login loop',
-        status: 'submitted',
-        amount: 18000, // $180.00 in cents (#2401)
-        currency: 'USD',
-        workerName: 'Ada',
-        hourlyRate: 12000, // $120.00/h in cents
-        source: 'timer',
-        participantKind: 'human',
-        caseId: 'case-1',
-        ...overrides,
-    };
-}
-describe('TimeEntryApprovalQueue', () => {
-    it('renders date, hours, description, worker, status, and amount', async () => {
-        const { container } = render(TimeEntryApprovalQueue, {
-            props: { entries: [entryView()] },
-        });
-        expect(screen.getByText('2026-07-01')).toBeInTheDocument();
-        expect(screen.getByText('1.5h')).toBeInTheDocument();
-        expect(screen.getByText('Debugged the login loop')).toBeInTheDocument();
-        expect(screen.getByText('Ada')).toBeInTheDocument();
-        expect(screen.getByText('submitted')).toBeInTheDocument();
-        expect(screen.getByText('180.00')).toBeInTheDocument();
-        await expectNoA11yViolations(container);
-    });
-    it('omits the amount when no charge has derived yet', () => {
-        render(TimeEntryApprovalQueue, {
-            props: { entries: [entryView({ amount: undefined })] },
-        });
-        expect(screen.queryByText('180.00')).not.toBeInTheDocument();
-    });
-    it('scales by the currency exponent, not a hard-coded 100', () => {
-        // ¥18000 is 18000 minor units — JPY has no minor unit — so dividing by 100
-        // here would understate the charge a hundredfold (#2401).
-        render(TimeEntryApprovalQueue, {
-            props: { entries: [entryView({ currency: 'JPY' })] },
-        });
-        expect(screen.getByText('18000')).toBeInTheDocument();
-        expect(screen.queryByText('180.00')).not.toBeInTheDocument();
-    });
-    it('invokes onapprove with the entry id', async () => {
-        const onapprove = vi.fn();
-        render(TimeEntryApprovalQueue, {
-            props: { entries: [entryView()], onapprove },
-        });
-        await userEvent.click(screen.getByRole('button', {
-            name: 'Approve time entry: Debugged the login loop',
-        }));
-        expect(onapprove).toHaveBeenCalledWith('te-1');
-    });
-    it('collects a reason before invoking onreject', async () => {
-        const onreject = vi.fn();
-        const { container } = render(TimeEntryApprovalQueue, {
-            props: { entries: [entryView()], onreject },
-        });
-        await userEvent.click(screen.getByRole('button', {
-            name: 'Reject time entry: Debugged the login loop',
-        }));
-        const confirmButton = screen.getByRole('button', {
-            name: 'Confirm rejection of: Debugged the login loop',
-        });
-        expect(confirmButton).toBeDisabled();
-        await userEvent.type(screen.getByRole('textbox', {
-            name: 'Rejection reason for: Debugged the login loop',
-        }), 'duplicate entry');
-        await expectNoA11yViolations(container);
-        await userEvent.click(confirmButton);
-        expect(onreject).toHaveBeenCalledWith('te-1', 'duplicate entry');
-    });
-    it('cancelling a rejection restores the actions without firing onreject', async () => {
-        const onreject = vi.fn();
-        render(TimeEntryApprovalQueue, {
-            props: { entries: [entryView()], onreject },
-        });
-        await userEvent.click(screen.getByRole('button', {
-            name: 'Reject time entry: Debugged the login loop',
-        }));
-        await userEvent.click(screen.getByRole('button', {
-            name: 'Cancel rejecting: Debugged the login loop',
-        }));
-        expect(onreject).not.toHaveBeenCalled();
-        expect(screen.getByRole('button', {
-            name: 'Approve time entry: Debugged the login loop',
-        })).toBeInTheDocument();
-    });
-    it('shows no actions on rows that are not submitted', () => {
-        render(TimeEntryApprovalQueue, {
-            props: {
-                entries: [entryView({ id: 'te-2', status: 'approved' })],
-                onapprove: vi.fn(),
-            },
-        });
-        expect(screen.queryByRole('button')).not.toBeInTheDocument();
-    });
-    it('shows the empty message when there are no entries', () => {
-        render(TimeEntryApprovalQueue, {
-            props: { entries: [], emptyMessage: 'Nothing awaiting review' },
-        });
-        expect(screen.getByText('Nothing awaiting review')).toBeInTheDocument();
-    });
-});