@kernhq/module-inventory 0.1.2 → 0.3.0

package/src/client/components/RepairDialog.svelte

@@ -0,0 +1,271 @@
+<script lang="ts">
+import { Button, Dialog, Field, Input, messageLocale, Select, Textarea, toast } from '@kernhq/ui'
+import { createMutation, useQueryClient } from '@tanstack/svelte-query'
+import type { Asset, Repair } from '../../contract/index.js'
+import { getInventoryApi } from '../api-instance.js'
+import { isolated } from '../bidi.js'
+import { errorMessage } from '../errors.js'
+import { t } from '../i18n.js'
+import { currencyOptions, formatPrice, parsePrice, priceExample } from '../price.js'
+import { inventoryKeys } from '../query.js'
+import type { RepairAction } from '../repairs.js'
+
+/**
+ * Sending an item for repair, correcting what was recorded, and logging it back.
+ *
+ * One dialog for three verbs, the way `CustodyDialog` is one for three: they ask for overlapping
+ * things and differ in which of them is already known. They are three *procedures* all the same,
+ * because the server refuses each of them with its own sentence — sending something that is already
+ * away and completing something already completed are different mistakes.
+ *
+ * The money field is `price.ts`, not a second parser: it is the file that shipped a silent 100×
+ * data loss on the asset form, and a repair cost typed as `1.234,56` in German has to survive
+ * exactly as a purchase price does.
+ *
+ * `RepairAction` lives in `repairs.ts` beside the rule that decides which of the three may be
+ * offered — a type exported from a component's instance script is a prop, not a type.
+ */
+interface Props {
+  workspaceId: string
+  /** The item being repaired — for the title, and for the currency a cost defaults to. */
+  asset: Asset | null
+  /** The repair being edited or completed. Null when creating one. */
+  repair: Repair | null
+  /** Which of the three. Null closes the dialog. */
+  action: RepairAction | null
+  onclose: () => void
+}
+const { workspaceId, asset, repair, action, onclose }: Props = $props()
+
+const api = getInventoryApi()
+const queryClient = useQueryClient()
+
+const open = $derived(asset !== null && action !== null)
+const completing = $derived(action === 'complete')
+
+let summary = $state('')
+let detail = $state('')
+let vendor = $state('')
+let sentOn = $state('')
+let returnedOn = $state('')
+let costText = $state('')
+let currency = $state('')
+
+/**
+ * Seed the form whenever a different question is being asked.
+ *
+ * A plain variable rather than `$state`, as `AssetFormDialog` explains: the effect writes it on
+ * every run, and a reactive flag it also reads is a dependency on its own write.
+ */
+let seededFor: string | null = null
+$effect(() => {
+  const key = open && action ? `${action}:${repair?.id ?? asset?.id ?? ''}` : null
+  if (key === null) {
+    seededFor = null
+    return
+  }
+  if (seededFor === key) return
+  seededFor = key
+  fill()
+})
+
+/** Today, in the browser's own calendar — a date input takes `YYYY-MM-DD` and nothing else. */
+const today = () => new Date().toISOString().slice(0, 10)
+
+function fill() {
+  summary = repair?.summary ?? ''
+  detail = repair?.detail ?? ''
+  vendor = repair?.vendor ?? ''
+  sentOn = repair?.sentOn ?? today()
+  returnedOn = repair?.returnedOn ?? today()
+  // A cost with no currency inherits the asset's, which is what the server does when none arrives —
+  // the form shows the same answer rather than leaving somebody to guess what will be stored.
+  currency = repair?.currency ?? asset?.currency ?? ''
+  // Seeded against that currency: how many decimal places the stored minor units carry is a fact
+  // about the money, not a constant, and yen carries none.
+  costText = formatPrice(repair?.costMinor, messageLocale(), currency || null)
+}
+
+const currencyCode = $derived(currency.trim().toUpperCase() || null)
+const costResult = $derived(parsePrice(costText, messageLocale(), currencyCode))
+const costError = $derived(
+  costResult.ok
+    ? null
+    : t('price_invalid', isolated({ example: priceExample(messageLocale(), currencyCode) })),
+)
+
+const title = $derived(
+  completing
+    ? t('repair_complete_title', isolated({ name: asset?.name ?? '' }))
+    : action === 'edit'
+      ? t('repair_edit')
+      : t('repair_new'),
+)
+
+const confirmLabel = $derived(
+  completing ? t('repair_complete') : action === 'edit' ? t('common.save') : t('repair_new'),
+)
+
+/**
+ * `disabled={mutation.isPending}` reaches the button one render later, and two quick clicks are one
+ * render apart — so a double-click files two repairs, and the second one is refused by the unique
+ * index with a conflict nobody caused. A plain flag set in the same tick as the click is the guard.
+ */
+let busy = $state(false)
+
+const money = () => ({
+  costMinor: costResult.ok ? costResult.minor : null,
+  currency: currencyCode,
+})
+
+const save = createMutation(() => ({
+  mutationFn: () => {
+    if (!action) throw new Error('nothing to do')
+    if (action === 'complete') {
+      if (!repair) throw new Error('no repair to complete')
+      return api.repairs.complete({ workspaceId, repairId: repair.id, returnedOn, ...money() })
+    }
+    const fields = {
+      summary: summary.trim(),
+      detail: detail.trim() || null,
+      vendor: vendor.trim() || null,
+      sentOn,
+      ...money(),
+    }
+    if (action === 'edit') {
+      if (!repair) throw new Error('no repair to edit')
+      return api.repairs.update({ workspaceId, repairId: repair.id, ...fields })
+    }
+    if (!asset) throw new Error('no asset to repair')
+    return api.repairs.create({ workspaceId, assetId: asset.id, ...fields })
+  },
+  onSuccess: () => {
+    const name = asset?.name ?? ''
+    toast.success(
+      action === 'complete'
+        ? t('repair_completed_toast', isolated({ name }))
+        : action === 'edit'
+          ? t('repair_saved_toast')
+          : t('repair_logged_toast', isolated({ name })),
+    )
+    // Blunt on purpose: a repair moves the asset's status, the row, the list, the panel, the
+    // timeline, the numbers and the dashboard card — and every one of those hangs off
+    // `['inventory', …]`.
+    void queryClient.invalidateQueries({ queryKey: inventoryKeys.all })
+    onclose()
+  },
+  // The server's sentences are the actionable ones — "This item is already away for repair" — and
+  // they are English. `errors.ts` translates the reason token each of them carries, so a Persian
+  // reader is told which of the four refusals they hit rather than being shown English prose.
+  onError: (error: unknown) => toast.error(errorMessage(error, t)),
+  onSettled: () => {
+    busy = false
+  },
+}))
+
+const canSubmit = $derived(open && costResult.ok && (completing || Boolean(summary.trim())))
+
+function submit() {
+  if (busy || !canSubmit) return
+  busy = true
+  save.mutate()
+}
+
+// The list and the empty option both live in `price.ts`: the asset form asks the same question,
+// and two copies are two lists that gain a currency in one form and not the other.
+const currencies = currencyOptions('—')
+</script>
+
+<Dialog
+  {open}
+  size="sm"
+  {title}
+  onOpenChange={(next) => {
+    if (!next) onclose()
+  }}
+>
+  <div class="form">
+    {#if completing}
+      <p class="body">{t('repair_complete_body')}</p>
+      <Field label={t('repair_returned_on')} id="inv-repair-returned">
+        {#snippet children(id)}
+          <Input {id} type="date" bind:value={returnedOn} />
+        {/snippet}
+      </Field>
+    {:else}
+      <Field
+        label={t('repair_summary')}
+        id="inv-repair-summary"
+        required
+        hint={t('repair_summary_placeholder')}
+      >
+        {#snippet children(id)}
+          <Input {id} bind:value={summary} maxlength={200} />
+        {/snippet}
+      </Field>
+      <Field label={t('repair_detail')} id="inv-repair-detail">
+        {#snippet children(id)}
+          <Textarea {id} bind:value={detail} rows={2} />
+        {/snippet}
+      </Field>
+      <div class="pair">
+        <Field label={t('repair_vendor')} id="inv-repair-vendor" hint={t('repair_vendor_placeholder')}>
+          {#snippet children(id)}
+            <Input {id} bind:value={vendor} maxlength={200} />
+          {/snippet}
+        </Field>
+        <Field label={t('repair_sent_on')} id="inv-repair-sent">
+          {#snippet children(id)}
+            <Input {id} type="date" bind:value={sentOn} />
+          {/snippet}
+        </Field>
+      </div>
+    {/if}
+
+    <div class="cost">
+      <!-- The error goes on the `Input`, not the `Field`: that is the half that sets
+           `aria-invalid` and points `aria-describedby` at the message. -->
+      <Field label={t('repair_cost')} id="inv-repair-cost">
+        {#snippet children(id)}
+          <Input {id} type="text" inputmode="decimal" bind:value={costText} error={costError} />
+        {/snippet}
+      </Field>
+      <Field label={t('currency')} id="inv-repair-currency">
+        {#snippet children(id)}
+          <Select {id} bind:value={currency} options={currencies} />
+        {/snippet}
+      </Field>
+    </div>
+  </div>
+
+  {#snippet footer()}
+    <Button variant="ghost" onclick={onclose}>{t('common.cancel')}</Button>
+    <Button onclick={submit} disabled={!canSubmit} loading={busy}>{confirmLabel}</Button>
+  {/snippet}
+</Dialog>
+
+<style>
+  .form {
+    display: grid;
+    gap: 14px;
+  }
+  .body {
+    margin: 0;
+    font-size: 13.5px;
+    line-height: 1.55;
+    color: var(--kern-ink-700);
+  }
+  .pair {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 12px;
+  }
+  .cost {
+    display: grid;
+    /* Room for «واحد پول» and "Para birimi" on one line: a wrapped two-word label beside a
+       one-line one knocks the two controls out of alignment. */
+    grid-template-columns: minmax(0, 1fr) 124px;
+    gap: 8px;
+    align-items: start;
+  }
+</style>

package/src/client/components/RepairsSection.svelte

@@ -0,0 +1,318 @@
+<script lang="ts">
+import { Button, EmptyState, formatDate, IconButton, messageLocale, Skeleton } from '@kernhq/ui'
+import { createInfiniteQuery } from '@tanstack/svelte-query'
+import type { Asset, RepairListItem } from '../../contract/index.js'
+import { getInventoryApi } from '../api-instance.js'
+import { isolated } from '../bidi.js'
+import { t } from '../i18n.js'
+import { formatPrice } from '../price.js'
+import { inventoryKeys } from '../query.js'
+import { type RepairAction, repairActions } from '../repairs.js'
+import AttachmentsSection from './AttachmentsSection.svelte'
+
+/**
+ * What went away to be fixed, for one asset.
+ *
+ * Two halves, because they answer two questions: **the open one**, which is where the item is right
+ * now, and **the past ones**, which are what it has cost to keep. At most one can be open — the
+ * database says so with a unique index — so the top of this section is a single card rather than a
+ * list, and `Send for repair` is offered only when there is no card there.
+ *
+ * A repair's own paperwork sits inside its card: the invoice belongs with the repair it is for, not
+ * in the asset's general Files tab beside the purchase receipt.
+ */
+interface Props {
+  workspaceId: string
+  asset: Asset
+  /** `inventory.repair.manage` — whether any of this can be written. */
+  canManage: boolean
+  /** `inventory.asset.manage`, which is what attaching a file to a repair takes. */
+  canAttach: boolean
+  /** Whether this workspace has the `attachments` capability; false hides the paperwork entirely. */
+  hasFiles: boolean
+  /** Opens the shared dialog. The panel owns it, so there is one dialog rather than one per row. */
+  onact: (action: RepairAction, repair: RepairListItem | null) => void
+}
+const { workspaceId, asset, canManage, canAttach, hasFiles, onact }: Props = $props()
+
+const api = getInventoryApi()
+
+interface RepairPage {
+  items: RepairListItem[]
+  nextCursor: string | null
+}
+
+const repairsQuery = createInfiniteQuery(() => ({
+  queryKey: inventoryKeys.assetRepairs(workspaceId, asset.id),
+  queryFn: ({ pageParam }): Promise<RepairPage> =>
+    api.repairs.list({
+      workspaceId,
+      assetId: asset.id,
+      ...(pageParam ? { cursor: pageParam as string } : {}),
+    }) as Promise<RepairPage>,
+  initialPageParam: undefined as string | undefined,
+  getNextPageParam: (last: RepairPage) => last.nextCursor ?? undefined,
+  enabled: Boolean(workspaceId && asset.id),
+}))
+
+const repairs = $derived(repairsQuery.data?.pages.flatMap((page) => page.items) ?? [])
+/** At most one, by construction: `inventory_repairs_one_open_uq` makes a second one impossible. */
+const open = $derived(repairs.find((row) => row.returnedOn === null) ?? null)
+const past = $derived(repairs.filter((row) => row.returnedOn !== null))
+
+/**
+ * Which of the three this section may offer, decided in `repairs.ts`.
+ *
+ * Hidden rather than disabled for somebody without the permission — they may never do it — and
+ * empty for an archived item, where the sentence below says why. The server refuses each of these
+ * again; this only stops the panel offering a door that will not open.
+ */
+const available = $derived(
+  repairActions({
+    open: open !== null,
+    archived: Boolean(asset.archivedAt),
+    may: canManage,
+  }),
+)
+
+/** A cost in the reader's own numbers, with the unit it was recorded in. */
+function cost(row: RepairListItem): string | null {
+  if (row.costMinor === null) return null
+  // Its own currency decides how many decimal places the stored minor units carry — yen has none.
+  return `${formatPrice(row.costMinor, messageLocale(), row.currency)} ${row.currency ?? ''}`.trim()
+}
+
+const SKELETON_ROWS = [0, 1]
+</script>
+
+{#if repairsQuery.isPending}
+  <div class="skeleton">
+    {#each SKELETON_ROWS as row (row)}
+      <Skeleton height="52px" radius="10px" />
+    {/each}
+  </div>
+{:else if repairsQuery.isError}
+  <EmptyState bare compact icon="triangle-alert" title={t('repairs_error')}>
+    {#snippet actions()}
+      <Button size="sm" variant="secondary" onclick={() => void repairsQuery.refetch()}>
+        {t('common.retry')}
+      </Button>
+    {/snippet}
+  </EmptyState>
+{:else}
+  <div class="repairs">
+    {#if open}
+      <section class="current" aria-label={t('repair_current')}>
+        <div class="chead">
+          <h3 class="section">{t('repair_current')}</h3>
+          {#if available.includes('edit')}
+            <IconButton
+              icon="square-pen"
+              size={26}
+              label={t('repair_edit')}
+              onclick={() => onact('edit', open)}
+            />
+          {/if}
+        </div>
+        <p class="summary">{open.summary}</p>
+        <p class="meta">
+          <span>{t('repair_away_since', isolated({ date: formatDate(open.sentOn) }))}</span>
+          {#if open.vendor}<span>· {open.vendor}</span>{/if}
+          {#if cost(open)}<span class="ltr">· {cost(open)}</span>{/if}
+        </p>
+        {#if open.detail}<p class="detail">{open.detail}</p>{/if}
+        {#if hasFiles}
+          <AttachmentsSection
+            {workspaceId}
+            assetId={asset.id}
+            repairId={open.id}
+            canManage={canAttach}
+            compact
+          />
+        {/if}
+        {#if available.includes('complete')}
+          <div class="acts">
+            <Button size="sm" icon="circle-check" onclick={() => onact('complete', open)}>
+              {t('repair_complete')}
+            </Button>
+          </div>
+        {/if}
+      </section>
+    {:else if canManage && asset.archivedAt}
+      <!-- A disabled control with no explanation is a bug; one sentence says why instead. -->
+      <p class="hint">{t('repair_archived_hint')}</p>
+    {:else if available.includes('create')}
+      <div class="acts">
+        <Button size="sm" icon="wrench" onclick={() => onact('create', null)}>{t('repair_new')}</Button>
+      </div>
+    {/if}
+
+    {#if past.length}
+      <h3 class="section">{t('repair_past')}</h3>
+      <ul class="past">
+        {#each past as row (row.id)}
+          <li class="entry">
+            <div class="ehead">
+              <span class="esummary">{row.summary}</span>
+              {#if canManage}
+                <IconButton
+                  icon="square-pen"
+                  size={26}
+                  label={t('repair_edit')}
+                  onclick={() => onact('edit', row)}
+                />
+              {/if}
+            </div>
+            <p class="meta">
+              <!-- Through `Intl`, never two dates and a dash: hand-built it reads backwards in
+                   RTL, with the earlier date to the right of the later one. -->
+              <span>
+                {t('repair_sent_on')}
+                {formatDate(row.sentOn)}
+              </span>
+              <span>
+                · {t('repair_returned_on')}
+                {formatDate(row.returnedOn as string)}
+              </span>
+              {#if row.vendor}<span>· {row.vendor}</span>{/if}
+              {#if cost(row)}<span class="ltr">· {cost(row)}</span>{/if}
+            </p>
+            {#if hasFiles}
+              <AttachmentsSection
+                {workspaceId}
+                assetId={asset.id}
+                repairId={row.id}
+                canManage={canAttach}
+                compact
+              />
+            {/if}
+          </li>
+        {/each}
+      </ul>
+    {:else if !open}
+      <EmptyState
+        bare
+        compact
+        icon="wrench"
+        title={t('repairs_empty')}
+        description={t('repairs_empty_desc')}
+      />
+    {/if}
+
+    {#if repairsQuery.hasNextPage}
+      <div class="more">
+        <Button
+          size="sm"
+          variant="secondary"
+          loading={repairsQuery.isFetchingNextPage}
+          onclick={() => repairsQuery.fetchNextPage()}
+        >
+          {t('load_more')}
+        </Button>
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .skeleton,
+  .repairs {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    margin-top: 14px;
+  }
+  .current {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 12px;
+    border: 1px solid var(--kern-border);
+    border-radius: var(--kern-r-lg);
+    /* Not `--kern-surface-raised`: a `Sheet` is already that colour, so the card would have been a
+       bordered box with no ground of its own. `--kern-surface-chip` is a shade off it in both
+       themes, and the muted text on it measures 5.66:1 in light and 5.37:1 in dark. */
+    background: var(--kern-surface-chip);
+  }
+  .chead,
+  .ehead {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    min-width: 0;
+  }
+  .section {
+    margin: 0;
+    font-size: 11.5px;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--kern-ink-500);
+  }
+  .summary,
+  .esummary {
+    margin: 0;
+    font-size: 13.5px;
+    font-weight: 500;
+    color: var(--kern-ink-900);
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+  .meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    margin: 0;
+    font-size: 11.5px;
+    /* Muted with a colour rather than opacity, which fades the text against the panel. */
+    color: var(--kern-ink-500);
+  }
+  .detail {
+    margin: 0;
+    font-size: 12.5px;
+    line-height: 1.55;
+    color: var(--kern-ink-700);
+    white-space: pre-wrap;
+  }
+  .hint {
+    margin: 0;
+    font-size: 12.5px;
+    line-height: 1.5;
+    color: var(--kern-ink-500);
+  }
+  .acts {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+  .past {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .entry {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid var(--kern-border-hairline);
+  }
+  .entry:last-child {
+    border-bottom: 0;
+    padding-bottom: 0;
+  }
+  /* An amount is a Latin number read left to right, whatever direction the panel runs. */
+  .ltr {
+    direction: ltr;
+    unicode-bidi: isolate;
+  }
+  .more {
+    display: flex;
+    justify-content: center;
+    padding-top: 4px;
+  }
+</style>