@happyvertical/smrt-projects 0.30.0

package/dist/svelte/components/RejectDialog.svelte

@@ -0,0 +1,250 @@
+<script lang="ts">
+/**
+ * RejectDialog - Modal dialog for rejecting with a reason
+ * Requires a reason to be entered before confirming
+ */
+
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../i18n.js';
+
+const { t } = useI18n();
+
+/** Props for RejectDialog component */
+export interface Props {
+  open: boolean;
+  title?: string;
+  message?: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  placeholder?: string;
+  required?: boolean;
+  loading?: boolean;
+  onconfirm: (reason: string) => void;
+  oncancel: () => void;
+}
+
+let {
+  open,
+  title = 'Reject Entry',
+  message = 'Please provide a reason for rejection:',
+  confirmLabel = 'Reject',
+  cancelLabel = 'Cancel',
+  placeholder = 'Enter rejection reason...',
+  required = true,
+  loading = false,
+  onconfirm,
+  oncancel,
+}: Props = $props();
+
+let reason = $state('');
+let textarea: HTMLTextAreaElement | undefined = $state(undefined);
+
+const canConfirm = $derived(!required || reason.trim().length > 0);
+
+function handleConfirm() {
+  if (canConfirm) {
+    onconfirm(reason.trim());
+    reason = '';
+  }
+}
+
+function handleCancel() {
+  reason = '';
+  oncancel();
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    handleCancel();
+  }
+}
+
+function handleBackdropClick(event: MouseEvent) {
+  if (event.target === event.currentTarget) {
+    handleCancel();
+  }
+}
+
+$effect(() => {
+  if (open && textarea) {
+    textarea.focus();
+  }
+});
+</script>
+
+{#if open}
+  <div class="dialog-backdrop">
+    <button
+      type="button"
+      class="dialog-overlay"
+      aria-label={t(M['projects.reject_dialog.close_dialog'])}
+      onclick={handleCancel}
+    ></button>
+    <div
+      class="dialog"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="reject-dialog-title"
+      tabindex="-1"
+      onkeydown={handleKeydown}
+    >
+      <h2 id="reject-dialog-title" class="dialog-title">{title}</h2>
+
+      <p class="dialog-message">{message}</p>
+
+      <textarea
+        bind:this={textarea}
+        bind:value={reason}
+        class="reason-input"
+        placeholder={placeholder}
+        rows="3"
+        disabled={loading}
+      ></textarea>
+
+      {#if required && reason.trim().length === 0}
+        <p class="hint">{t(M['projects.reject_dialog.reason_required'])}</p>
+      {/if}
+
+      <div class="dialog-actions">
+        <button
+          type="button"
+          class="btn btn-secondary"
+          onclick={handleCancel}
+          disabled={loading}
+        >
+          {cancelLabel}
+        </button>
+        <button
+          type="button"
+          class="btn btn-error"
+          onclick={handleConfirm}
+          disabled={!canConfirm || loading}
+        >
+          {loading ? 'Rejecting...' : confirmLabel}
+        </button>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .dialog-backdrop {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+    z-index: var(--smrt-z-index-dialog, 1300);
+  }
+
+  .dialog-overlay {
+    position: absolute;
+    inset: 0;
+    border: none;
+    background: var(--smrt-color-scrim, rgba(0, 0, 0, 0.32));
+    cursor: pointer;
+  }
+
+  .dialog {
+    position: relative;
+    background: var(--smrt-color-surface);
+    border-radius: var(--smrt-radius-extra-large, 28px);
+    box-shadow: var(--smrt-elevation-3);
+    width: 100%;
+    max-width: 28rem;
+    padding: 1.5rem;
+  }
+
+  .dialog-title {
+    margin: 0 0 0.5rem;
+    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);
+    line-height: var(--smrt-typography-headline-small-line-height, 2rem);
+  }
+
+  .dialog-message {
+    margin: 0 0 1rem;
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    color: var(--smrt-color-on-surface-variant);
+    line-height: var(--smrt-typography-body-medium-line-height, 1.25rem);
+  }
+
+  .reason-input {
+    width: 100%;
+    padding: 0.75rem;
+    font-size: var(--smrt-typography-body-large-size, 1rem);
+    font-family: inherit;
+    border: 1px solid var(--smrt-color-outline);
+    border-radius: var(--smrt-radius-small, 8px);
+    resize: vertical;
+    min-height: 80px;
+    background: var(--smrt-color-surface);
+    color: var(--smrt-color-on-surface);
+  }
+
+  .reason-input:focus {
+    outline: none;
+    border-color: var(--smrt-color-primary);
+    box-shadow: 0 0 0 1px var(--smrt-color-primary);
+  }
+
+  .reason-input:disabled {
+    background: var(--smrt-color-surface-container-highest);
+    color: var(--smrt-color-on-surface);
+    opacity: 0.38;
+    cursor: not-allowed;
+  }
+
+  .hint {
+    margin: 0.5rem 0 0;
+    font-size: var(--smrt-typography-body-small-size, 0.75rem);
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .dialog-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    margin-top: 1.5rem;
+  }
+
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.625rem 1.5rem;
+    font-size: var(--smrt-typography-label-large-size, 0.875rem);
+    font-weight: var(--smrt-typography-label-large-weight, 500);
+    letter-spacing: var(--smrt-typography-label-large-tracking, 0.1px);
+    border-radius: var(--smrt-radius-full, 9999px);
+    border: none;
+    cursor: pointer;
+    transition: all 0.2s var(--smrt-easing-standard);
+  }
+
+  .btn:disabled {
+    opacity: 0.38;
+    cursor: not-allowed;
+  }
+
+  .btn-secondary {
+    background: transparent;
+    color: var(--smrt-color-primary);
+  }
+
+  .btn-secondary:hover:not(:disabled) {
+    background: var(--smrt-color-primary);
+    background: color-mix(in srgb, var(--smrt-color-primary) 8%, transparent);
+  }
+
+  .btn-error {
+    background: var(--smrt-color-error);
+    color: var(--smrt-color-on-error);
+  }
+
+  .btn-error:hover:not(:disabled) {
+    box-shadow: var(--smrt-elevation-1);
+  }
+</style>

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

@@ -0,0 +1,17 @@
+/** Props for RejectDialog component */
+export interface Props {
+    open: boolean;
+    title?: string;
+    message?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    placeholder?: string;
+    required?: boolean;
+    loading?: boolean;
+    onconfirm: (reason: string) => void;
+    oncancel: () => void;
+}
+declare const RejectDialog: import("svelte").Component<Props, {}, "">;
+type RejectDialog = ReturnType<typeof RejectDialog>;
+export default RejectDialog;
+//# sourceMappingURL=RejectDialog.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RejectDialog.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/RejectDialog.svelte.ts"],"names":[],"mappings":"AAWA,uCAAuC;AACvC,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAyFD,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/svelte/components/TimeEntryCard.svelte

@@ -0,0 +1,294 @@
+<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 {
+  entry: TimeEntry;
+  href?: string;
+  onclick?: () => void;
+  selectable?: boolean;
+  selected?: boolean;
+  onselect?: (id: string, selected: boolean) => void;
+  currency?: Currency;
+  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">
+      <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}
+    <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>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import { type Currency, type TimeEntry } from './utils.js';
+/** Props for TimeEntryCard component */
+export interface Props {
+    entry: TimeEntry;
+    href?: string;
+    onclick?: () => void;
+    selectable?: boolean;
+    selected?: boolean;
+    onselect?: (id: string, selected: boolean) => void;
+    currency?: Currency;
+    actions?: Snippet;
+}
+declare const TimeEntryCard: import("svelte").Component<Props, {}, "">;
+type TimeEntryCard = ReturnType<typeof TimeEntryCard>;
+export default TimeEntryCard;
+//# sourceMappingURL=TimeEntryCard.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimeEntryCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/TimeEntryCard.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,EACL,KAAK,QAAQ,EAKb,KAAK,SAAS,EACf,MAAM,YAAY,CAAC;AAGpB,wCAAwC;AACxC,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACnD,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAkHD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}