@kernhq/module-inventory 0.1.2 → 0.3.0

package/src/client/components/AttachmentsSection.svelte

@@ -0,0 +1,327 @@
+<script lang="ts">
+import {
+  Button,
+  coreApi,
+  Dialog,
+  EmptyState,
+  formatBytes,
+  Icon,
+  IconButton,
+  Skeleton,
+  toast,
+  uploadFile,
+} from '@kernhq/ui'
+import { createMutation, createQuery, useQueryClient } from '@tanstack/svelte-query'
+import type { Attachment } from '../../contract/index.js'
+import { getInventoryApi } from '../api-instance.js'
+import { isolated } from '../bidi.js'
+import type { CoreApi } from '../core-api.js'
+import { errorMessage } from '../errors.js'
+import { t } from '../i18n.js'
+import { inventoryKeys } from '../query.js'
+
+/**
+ * The files kept against an asset, or against one of its repairs.
+ *
+ * **This module does not upload.** The browser sends the bytes to core through `uploadFile` and is
+ * handed an id; `attachments.add` then records that the asset has that file. Reading one back is a
+ * URL core signs for the person asking — which is why a file another workspace owns cannot be read
+ * here even though this module's server can see its name.
+ *
+ * One component, mounted twice: with `repairId={null}` for the asset's own paperwork, and inside a
+ * repair with that repair's id. Both read one query — `attachments.list` returns every file on the
+ * asset — and filter it here. That is the one case where filtering in the browser is right: the
+ * list is bounded by how much paperwork one item collects and is entirely loaded, unlike a paged
+ * asset list, where the same shortcut returns twenty rows and shows eleven.
+ */
+interface Props {
+  workspaceId: string
+  assetId: string
+  /** Null for the asset's own files; a repair id for that repair's paperwork. */
+  repairId?: string | null
+  /** `inventory.asset.manage` — whether uploading and removing are offered at all. */
+  canManage: boolean
+  /** Inside a repair card: no empty state and no error card, because it is a detail of a detail. */
+  compact?: boolean
+}
+const { workspaceId, assetId, repairId = null, canManage, compact = false }: Props = $props()
+
+const api = getInventoryApi()
+const core = coreApi<CoreApi>()
+const queryClient = useQueryClient()
+
+const filesQuery = createQuery(() => ({
+  queryKey: inventoryKeys.assetAttachments(workspaceId, assetId),
+  queryFn: () => api.attachments.list({ workspaceId, assetId }),
+  enabled: Boolean(workspaceId && assetId),
+}))
+
+const rows = $derived<readonly Attachment[]>(
+  (filesQuery.data ?? []).filter((row: Attachment) => (row.repairId ?? null) === repairId),
+)
+
+/**
+ * A signed URL per file, resolved once and kept for as long as the panel is open.
+ *
+ * Core signs these with a lifetime measured in minutes, so they are deliberately not stored in the
+ * query cache — a link that worked when the panel opened and 404s an hour later is worse than one
+ * fetched again. `{#await}` on a memoised promise is what `module-chat` does with the same files.
+ */
+const urls = new Map<string, Promise<string>>()
+function urlFor(fileId: string): Promise<string> {
+  const cached = urls.get(fileId)
+  if (cached) return cached
+  const pending = core.files.downloadUrl({ id: fileId, disposition: 'attachment' }).then((res) => res.url)
+  urls.set(fileId, pending)
+  return pending
+}
+
+// ------------------------------------------------------------------------------- uploading
+
+let input = $state<HTMLInputElement | null>(null)
+/**
+ * A plain flag set in the same tick as the click, not `mutation.isPending`.
+ *
+ * The attribute reaches the button one render later and two quick clicks are one render apart, so a
+ * double-click uploads the same file twice — the second insert is dropped by the unique index, but
+ * the bytes have already gone to storage.
+ */
+let busy = $state(false)
+
+const attach = createMutation(() => ({
+  mutationFn: (fileIds: string[]) => api.attachments.add({ workspaceId, assetId, fileIds, repairId }),
+  onSuccess: (added: Attachment[]) => {
+    if (added.length) toast.success(t('file_added_toast', { n: added.length }))
+    void queryClient.invalidateQueries({ queryKey: inventoryKeys.all })
+  },
+  // Translated rather than the server's English prose: see `errors.ts`.
+  onError: (error: unknown) => toast.error(errorMessage(error, t)),
+  onSettled: () => {
+    busy = false
+  },
+}))
+
+/** Uploads first, then attaches: an attachment points at a file that already exists. */
+async function upload(list: FileList | null) {
+  if (!list?.length || busy) return
+  busy = true
+  const ids: string[] = []
+  for (const file of Array.from(list)) {
+    try {
+      const uploaded = await uploadFile({
+        workspaceId,
+        file,
+        name: file.name,
+        mimeType: file.type || undefined,
+        // Core keeps the owning object, so a file uploaded here is not an orphan if this module
+        // then fails to record it.
+        attachedTo: { module: 'inventory', type: 'asset', id: assetId },
+      })
+      ids.push(uploaded.id)
+    } catch {
+      // Named, not "an upload failed": with several files the reader has to know which one.
+      toast.error(t('file_upload_failed', isolated({ name: file.name })))
+    }
+  }
+  if (ids.length) attach.mutate(ids)
+  else busy = false
+}
+
+// -------------------------------------------------------------------------------- removing
+
+let removing = $state<Attachment | null>(null)
+let removingBusy = $state(false)
+
+const detach = createMutation(() => ({
+  mutationFn: (attachmentId: string) => api.attachments.remove({ workspaceId, attachmentId }),
+  onSuccess: () => {
+    toast.success(t('file_removed_toast', isolated({ name: removing?.name ?? '' })))
+    void queryClient.invalidateQueries({ queryKey: inventoryKeys.all })
+    removing = null
+  },
+  // Translated rather than the server's English prose: see `errors.ts`.
+  onError: (error: unknown) => toast.error(errorMessage(error, t)),
+  onSettled: () => {
+    removingBusy = false
+  },
+}))
+
+function confirmRemove() {
+  const target = removing
+  if (!target || removingBusy) return
+  removingBusy = true
+  detach.mutate(target.id)
+}
+
+/** A picture reads as a picture, a receipt as a receipt; anything else is just a file. */
+function iconFor(mimeType: string | null): string {
+  if (mimeType?.startsWith('image/')) return 'image'
+  if (mimeType === 'application/pdf') return 'receipt'
+  return 'file-text'
+}
+</script>
+
+<div class="files" class:compact>
+  {#if canManage}
+    <input
+      bind:this={input}
+      type="file"
+      multiple
+      hidden
+      onchange={(e) => {
+        void upload(e.currentTarget.files)
+        // Cleared so choosing the same file twice in a row still fires `change`.
+        e.currentTarget.value = ''
+      }}
+    />
+  {/if}
+
+  {#if filesQuery.isPending}
+    <Skeleton height="34px" radius="8px" />
+  {:else if filesQuery.isError && !compact}
+    <EmptyState bare compact icon="triangle-alert" title={t('files_error')}>
+      {#snippet actions()}
+        <Button size="sm" variant="secondary" onclick={() => void filesQuery.refetch()}>
+          {t('common.retry')}
+        </Button>
+      {/snippet}
+    </EmptyState>
+  {:else if rows.length === 0 && !compact}
+    <EmptyState bare compact icon="paperclip" title={t('files_empty')} description={t('files_empty_desc')} />
+  {:else if rows.length}
+    <ul class="rows">
+      {#each rows as row (row.id)}
+        <li class="row">
+          <Icon name={iconFor(row.mimeType)} size={14} strokeWidth={1.7} />
+          {#await urlFor(row.fileId)}
+            <span class="name" title={row.name}>{row.name}</span>
+          {:then url}
+            <a
+              class="name"
+              href={url}
+              target="_blank"
+              rel="noopener noreferrer"
+              title={row.name}
+              aria-label={t('file_download', isolated({ name: row.name }))}
+            >
+              {row.name}
+            </a>
+          {:catch}
+            <!-- The row still says what it is: a file whose URL could not be signed is not a file
+                 that has gone away. -->
+            <span class="name" title={row.name}>{row.name}</span>
+          {/await}
+          {#if row.size !== null}<span class="size">{formatBytes(row.size)}</span>{/if}
+          {#if canManage}
+            <IconButton
+              icon="x"
+              size={26}
+              label={t('file_remove', isolated({ name: row.name }))}
+              onclick={() => (removing = row)}
+            />
+          {/if}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+
+  {#if canManage}
+    <div class="add">
+      <Button size="sm" variant="secondary" icon="upload" loading={busy} onclick={() => input?.click()}>
+        {t('file_add')}
+      </Button>
+    </div>
+  {/if}
+</div>
+
+<!-- States what happens and to what, rather than asking "Are you sure?" — and the sentence's whole
+     job is to say that the file itself survives, because this module never owned it. -->
+<Dialog
+  open={removing !== null}
+  size="sm"
+  title={t('file_remove_title', isolated({ name: removing?.name ?? '' }))}
+  onOpenChange={(next) => {
+    if (!next) removing = null
+  }}
+>
+  <p class="dialog-body">{t('file_remove_body')}</p>
+  {#snippet footer()}
+    <Button variant="ghost" onclick={() => (removing = null)}>{t('common.cancel')}</Button>
+    <Button variant="danger" onclick={confirmRemove} loading={removingBusy}>
+      {t('common.remove')}
+    </Button>
+  {/snippet}
+</Dialog>
+
+<style>
+  .files {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+  .compact {
+    gap: 6px;
+  }
+  .rows {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .row {
+    display: grid;
+    grid-template-columns: 14px minmax(0, 1fr) auto auto;
+    align-items: center;
+    gap: 8px;
+    font-size: 12.5px;
+    color: var(--kern-ink-700);
+    /* Rhythm between the rows. It is *not* what makes the download link a legal target — the
+       comment here used to claim a negative margin that was not in the file, and padding on the
+       row would not have grown the anchor's hit area anyway: `align-items: center` sizes a grid
+       item to its own content. The link carries that itself, below. */
+    padding-block: 3px;
+  }
+  .name {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--kern-ink-900);
+    /* A value somebody typed decides its own direction: `plaintext` takes it from the value's
+       first strong character, so a Latin name inside a Persian screen reads left to right and
+       keeps its own trailing punctuation instead of donating it to the paragraph. */
+    unicode-bidi: plaintext;
+  }
+  a.name {
+    text-decoration: none;
+    border-radius: var(--kern-r-sm);
+    /* WCAG 2.5.8 wants 24px, and a line of 12.5px text is about 18 — with the remove button 26px
+       away, the spacing exception does not save it. The padding grows the hit area and the equal
+       negative margin gives the space back, so the margin box, and therefore the row, is exactly
+       where it was. Same shape as `.name` on the assets table. */
+    padding-block: 4px;
+    margin-block: -4px;
+  }
+  a.name:hover {
+    text-decoration: underline;
+  }
+  .size {
+    /* Muted with a colour, never opacity: a faded row at 0.5 is unreadable whatever its token. */
+    color: var(--kern-ink-500);
+    font-variant-numeric: tabular-nums;
+    /* A size is a Latin number with a Latin unit; it stays left-to-right inside an Arabic panel. */
+    direction: ltr;
+    unicode-bidi: isolate;
+  }
+  .add {
+    display: flex;
+  }
+  .dialog-body {
+    margin: 0;
+    font-size: 13.5px;
+    line-height: 1.55;
+    color: var(--kern-ink-700);
+  }
+</style>

package/src/client/components/CustodyDialog.svelte

@@ -0,0 +1,201 @@
+<script lang="ts">
+import { Button, Dialog, Field, Select, type SelectOption, Textarea, toast } from '@kernhq/ui'
+import { createMutation, useQueryClient } from '@tanstack/svelte-query'
+import type { Asset } from '../../contract/index.js'
+import { getInventoryApi } from '../api-instance.js'
+import { isolated } from '../bidi.js'
+import type { CoreMember } from '../core-api.js'
+import type { CustodyAction } from '../custody.js'
+import { errorMessage } from '../errors.js'
+import { t } from '../i18n.js'
+import { displayName } from '../members.js'
+import { inventoryKeys } from '../query.js'
+
+/**
+ * Handing an item over, handing it on, and taking it back.
+ *
+ * One dialog for three verbs because they ask for the same two things — a person and an optional
+ * note — and differ only in which of them is already known. They are three *procedures* all the
+ * same, and deliberately so: assigning something somebody already has and handing on something
+ * nobody has are different mistakes, and the server refuses each of them with its own sentence.
+ *
+ * The member list comes from core through the shell's own client. A module cannot import the app,
+ * and `core-api.ts` names only the three procedures this module calls — a wider type would be a
+ * promise about core's surface that inventory has no standing to make.
+ *
+ * Which of the three may be offered at all is `custodyActions` in `custody.ts` — a fact with a
+ * right answer, so it lives where it can be tested rather than inside a component.
+ */
+interface Props {
+  workspaceId: string
+  /** The item being handed over. Null closes the dialog. */
+  asset: Asset | null
+  /** Which of the three. Null closes the dialog. */
+  action: CustodyAction | null
+  /** The workspace's members, already fetched by whatever opened this. */
+  members: readonly CoreMember[]
+  /** Who is holding it now, as words — for the sentence a return has to state. */
+  holderName: string | null
+  onclose: () => void
+}
+const { workspaceId, asset, action, members, holderName, onclose }: Props = $props()
+
+const api = getInventoryApi()
+const queryClient = useQueryClient()
+
+const open = $derived(asset !== null && action !== null)
+const picksPerson = $derived(action === 'assign' || action === 'transfer')
+
+let userId = $state('')
+let note = $state('')
+
+/**
+ * Clear the form whenever a different question is being asked.
+ *
+ * Without this, taking an item back and then handing it on again arrives with the previous note
+ * still in the box — and a note is a sentence somebody wrote about a *different* handover.
+ */
+let seededFor: string | null = null
+$effect(() => {
+  const key = open && asset && action ? `${action}:${asset.id}` : null
+  if (key === null) {
+    seededFor = null
+    return
+  }
+  if (seededFor === key) return
+  seededFor = key
+  userId = ''
+  note = ''
+})
+
+/**
+ * Who it can go to.
+ *
+ * The current holder is left out of a *transfer*: the server refuses handing something to the
+ * person who already has it, so offering them is offering a door that will not open. Sorted by the
+ * name actually shown, which is the order somebody scanning the list expects — core returns
+ * membership order, which is arbitrary to a reader.
+ */
+const options = $derived.by<SelectOption[]>(() => {
+  const holderId = action === 'transfer' ? asset?.custodianUserId : null
+  const people = members
+    .filter((member) => member.userId !== holderId)
+    .map((member) => ({ value: member.userId, label: displayName(member) ?? member.userId }))
+    .sort((a, b) => a.label.localeCompare(b.label))
+  return [{ value: '', label: t('custody_person_none') }, ...people]
+})
+
+const title = $derived(
+  action === 'return'
+    ? t('custody_return_title', isolated({ name: asset?.name ?? '' }))
+    : action === 'transfer'
+      ? t('custody_transfer_title', isolated({ name: asset?.name ?? '' }))
+      : t('custody_assign_title', isolated({ name: asset?.name ?? '' })),
+)
+
+const confirmLabel = $derived(
+  action === 'return'
+    ? t('custody_return')
+    : action === 'transfer'
+      ? t('custody_transfer')
+      : t('custody_assign'),
+)
+
+/**
+ * `disabled={mutation.isPending}` reaches the button one render later, and two quick clicks are one
+ * render apart — so a double-click files two handovers. A plain flag set in the same tick as the
+ * click is the guard; `loading` says "busy" without disabling the control under somebody's finger.
+ */
+let busy = $state(false)
+
+const hand = createMutation(() => ({
+  mutationFn: () => {
+    const row = asset
+    if (!row || !action) throw new Error('nothing to hand over')
+    const base = { workspaceId, assetId: row.id, note: note.trim() || null }
+    if (action === 'return') return api.custody.return(base)
+    return action === 'transfer'
+      ? api.custody.transfer({ ...base, userId })
+      : api.custody.assign({ ...base, userId })
+  },
+  onSuccess: () => {
+    const name = asset?.name ?? ''
+    const person = options.find((option) => option.value === userId)?.label ?? ''
+    toast.success(
+      action === 'return'
+        ? t('custody_returned_toast', isolated({ name }))
+        : action === 'transfer'
+          ? t('custody_transferred_toast', isolated({ name, person }))
+          : t('custody_assigned_toast', isolated({ name, person })),
+    )
+    // Blunt on purpose: a handover moves the row, the list it is in, the panel, the timeline and
+    // the dashboard card, and every one of those hangs off `['inventory', …]`.
+    void queryClient.invalidateQueries({ queryKey: inventoryKeys.all })
+    onclose()
+  },
+  // The server's messages *are* the actionable ones — "Somebody changed who is holding this a
+  // moment before you did" — and they are English prose, shown as they arrived to a reader who
+  // chose Persian. `errors.ts` translates the reason token instead: every refusal a handover can
+  // produce carries one, and `inventory.custody.conflict` is the most important sentence this
+  // module has.
+  onError: (error: unknown) => toast.error(errorMessage(error, t)),
+  onSettled: () => {
+    busy = false
+  },
+}))
+
+const canSubmit = $derived(open && (!picksPerson || Boolean(userId)))
+
+function submit() {
+  if (busy || !canSubmit) return
+  busy = true
+  hand.mutate()
+}
+</script>
+
+<Dialog
+  {open}
+  size="sm"
+  {title}
+  onOpenChange={(next) => {
+    if (!next) onclose()
+  }}
+>
+  <div class="form">
+    {#if action === 'return'}
+      <p class="body">
+        {t('custody_return_body', isolated({ person: holderName ?? t('member_former') }))}
+      </p>
+    {:else}
+      <Field label={t('custody_person')} id="inv-custody-person" required>
+        {#snippet children(id)}
+          <Select {id} bind:value={userId} options={options} ariaLabel={t('custody_person')} />
+        {/snippet}
+      </Field>
+    {/if}
+
+    <Field label={t('custody_note')} id="inv-custody-note" hint={t('custody_note_hint')}>
+      {#snippet children(id)}
+        <Textarea {id} bind:value={note} rows={2} maxlength={500} />
+      {/snippet}
+    </Field>
+  </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);
+  }
+</style>