@kelpie/ui 0.9.0 → 0.11.0

package/src/api/resources/enquiries.ts

@@ -1,11 +1,7 @@
-import { dealSchema, enquiryBody, enquirySchema } from '@kelpie/schemas'
-import type { Deal, Enquiry, EnquiryInput } from '@kelpie/schemas'
-import { useMutation, useQueryClient } from '@tanstack/react-query'
-
-import type { QueryParameters } from '../client.ts'
-import { useApiClient } from '../context.ts'
-import { toError } from '../errors.ts'
+import { enquiryBody, enquirySchema } from '@kelpie/schemas'
+import type { Enquiry, EnquiryInput } from '@kelpie/schemas'
 import { createResourceHooks } from '../resource.ts'
+import type { QueryParameters } from '../client.ts'
 import type {
   ListOptions,
   MutationResult,
@@ -88,31 +84,9 @@ export function useDeleteEnquiry(): MutationResult<string, void> {
   return enquiries.useRemove()
 }
 
-/**
- * `POST /v1/enquiries/:id/convert`. Returns the freshly created deal, so the
- * caller can navigate straight to it. 409 if the enquiry has already been
- * converted; 422 if it has no linked company yet.
- */
-export function useConvertEnquiry(): MutationResult<string, Deal> {
-  const client = useApiClient()
-  const queryClient = useQueryClient()
-  const mutation = useMutation({
-    mutationFn: (id: string) =>
-      client.post(`/enquiries/${id}/convert`, {}, dealSchema.parse),
-    onSuccess: () => {
-      // The enquiry, deals list, activities on both sides are all stale.
-      void queryClient.invalidateQueries({ queryKey: ['enquiries'] })
-      void queryClient.invalidateQueries({ queryKey: ['deals'] })
-      void queryClient.invalidateQueries({ queryKey: ['activities'] })
-    },
-  })
-
-  return {
-    run: (input) => {
-      mutation.mutate(input)
-    },
-    runAsync: (input) => mutation.mutateAsync(input),
-    isPending: mutation.isPending,
-    error: toError(mutation.error),
-  }
-}
+export {
+  useConvertEnquiry,
+  useConvertPipelineRecord,
+  detailPathForPipelineKind,
+  convertedTargetPath,
+} from './conversions.ts'

package/src/api/resources/importJobs.ts

@@ -1,5 +1,6 @@
 import { importJobSchema, isImportJobSettled } from '@kelpie/schemas'
 import type {
+  ExportObject,
   ImportColumnMap,
   ImportConflictMode,
   ImportJob,
@@ -205,7 +206,7 @@ export interface CsvDownload {
  * a failure is an `ApiError` the page can show beside the button.
  */
 export function useExportCsv(): MutationResult<
-  { object: ImportObject; template: boolean },
+  { object: ExportObject; template: boolean },
   CsvDownload
 > {
   const client = useApiClient()
@@ -216,7 +217,7 @@ export function useExportCsv(): MutationResult<
         object,
         template,
       }: {
-        object: ImportObject
+        object: ExportObject
         template: boolean
       }): Promise<CsvDownload> => {
         const path = template ? `/export/templates/${object}.csv` : `/export/${object}.csv`

package/src/app/KelpieApp.tsx

@@ -180,6 +180,7 @@ function AppRoutes(): React.JSX.Element {
           {/* The optional segment is the mockup's: /handbook opens the first page. */}
           <Route path="handbook" element={<HandbookLayout />} />
           <Route path="handbook/:pageId" element={<HandbookLayout />} />
+          <Route path="admin" element={<Navigate to="/admin/workspace" replace />} />
           <Route path="admin/workspace" element={<WorkspaceSettingsPage />} />
           <Route path="admin/team" element={<TeamPage />} />
           <Route path="admin/fields" element={<FieldsPage />} />

package/src/components/ActivitiesPanel.tsx

@@ -57,6 +57,9 @@ interface MonthGroup {
   readonly items: readonly Activity[]
 }
 
+/** How many events the Overview tab's latest-activity block shows. */
+const LATEST_ACTIVITY_COUNT = 5
+
 /** Consecutive runs, not a map: the list is already ordered, so a month never recurs. */
 function groupByMonth(
   activities: readonly Activity[],
@@ -126,19 +129,19 @@ export function ActivitiesPanel({
 }
 
 /**
- * The single most recent event, for a record's Overview tab.
+ * The five most recent events, for a record's Overview tab.
  *
  * Its own request rather than a slice of the panel's: the panel lives on a
- * different tab, so on Overview there is no list to take the first row of.
+ * different tab, so on Overview there is no list to take the first rows of.
  */
 export function LatestActivity({
   targetType,
   targetId,
 }: ActivitiesPanelProps): React.JSX.Element {
-  const activities = useActivities({ targetType, targetId })
+  const activities = useActivities({ targetType, targetId }, { limit: LATEST_ACTIVITY_COUNT })
   const members = useMembers()
   const timezone = useTimezone()
-  const latest = activities.records[0]
+  const latest = activities.records
 
   return (
     <section>
@@ -147,20 +150,23 @@ export function LatestActivity({
       {activities.error !== null && <ErrorPanel error={activities.error} />}
       {activities.isLoading && <p className="text-[13px] text-ink-faint">Loading activity…</p>}
 
-      {!activities.isLoading && latest === undefined && activities.error === null && (
+      {!activities.isLoading && latest.length === 0 && activities.error === null && (
         <p className="text-[13px] text-ink-faint">No activity yet.</p>
       )}
 
-      {latest !== undefined && (
+      {latest.length > 0 && (
         <ol className="overflow-hidden rounded-md border border-border">
-          <ActivityEvent
-            activity={latest}
-            actorName={actorNameFor(latest, members.nameById)}
-            contextType={targetType}
-            contextId={targetId}
-            isLast
-            timezone={timezone}
-          />
+          {latest.map((activity, index) => (
+            <ActivityEvent
+              key={activity.id}
+              activity={activity}
+              actorName={actorNameFor(activity, members.nameById)}
+              contextType={targetType}
+              contextId={targetId}
+              isLast={index === latest.length - 1}
+              timezone={timezone}
+            />
+          ))}
         </ol>
       )}
     </section>

package/src/components/ApiKeysPanel.tsx

@@ -1,5 +1,13 @@
-import type { ApiKey, ApiKeyKind, CreatedApiKey } from '@kelpie/schemas'
-import { useState } from 'react'
+import type { ApiKey, ApiKeyGranularScope, ApiKeyKind, ApiKeyScope, CreatedApiKey } from '@kelpie/schemas'
+import {
+  API_KEY_PRESET_SCOPES,
+  API_KEY_SCOPE_GROUPS,
+  API_KEY_SCOPE_LABELS,
+  expandApiKeyScopes,
+  isApiKeyGranularScope,
+  isApiKeyPresetScope,
+} from '@kelpie/schemas'
+import { useMemo, useState } from 'react'
 import type { FormEvent } from 'react'
 
 import { useTimezone } from '../api/resources/account.ts'
@@ -11,22 +19,17 @@ import { ErrorPanel, LoadingPanel } from './QueryState.tsx'
 /**
  * The create/list/revoke flow shared by workspace keys (`/admin/api-keys`) and
  * personal keys (`/account/api-keys`).
- *
- * `kind` and the three strings below are the only difference between the two
- * pages, the same way `KanbanBoard` takes a `kind` for Deals versus
- * Opportunities. Who may reach this component at all — the admin gate on the
- * workspace page, none on the personal page — is the caller's decision; the API
- * enforces its own half regardless.
  */
 
 export interface ApiKeysPanelProps {
   readonly kind: ApiKeyKind
-  /** Shown in the create form's name field, e.g. "CI pipeline" or "Laptop Claude". */
   readonly namePlaceholder: string
   readonly createTitle: string
   readonly emptyMessage: string
 }
 
+const PRESET_OPTIONS = API_KEY_PRESET_SCOPES.filter((scope) => scope !== 'write:all')
+
 export function ApiKeysPanel({
   kind,
   namePlaceholder,
@@ -96,6 +99,8 @@ export function ApiKeysPanel({
   )
 }
 
+type AccessMode = 'full' | 'presets' | 'custom'
+
 function CreateKeyModal({
   kind,
   title,
@@ -111,18 +116,78 @@ function CreateKeyModal({
 }): React.JSX.Element {
   const createApiKey = useCreateApiKey()
   const [name, setName] = useState('')
+  const [accessMode, setAccessMode] = useState<AccessMode>('full')
+  const [selectedPresets, setSelectedPresets] = useState<readonly ApiKeyScope[]>([])
+  const [selectedCustom, setSelectedCustom] = useState<readonly ApiKeyScope[]>([])
+  const [showCustom, setShowCustom] = useState(false)
+
+  const presetExpandedScopes = useMemo(
+    () => expandApiKeyScopes(selectedPresets),
+    [selectedPresets],
+  )
+
+  const showScopeGrid =
+    (accessMode === 'custom' && showCustom) ||
+    (accessMode === 'presets' && selectedPresets.length > 0)
+
+  function scopesForCreate(): readonly ApiKeyScope[] | undefined {
+    if (accessMode === 'full') {
+      return undefined
+    }
+
+    if (accessMode === 'presets') {
+      return selectedPresets.length === 0 ? undefined : selectedPresets
+    }
+
+    return selectedCustom.length === 0 ? undefined : selectedCustom
+  }
 
   function submit(event: FormEvent): void {
     event.preventDefault()
+    const scopes = scopesForCreate()
+
     createApiKey
-      .runAsync({ name: name.trim(), kind })
+      .runAsync({
+        name: name.trim(),
+        kind,
+        ...(scopes === undefined ? {} : { scopes }),
+      })
       .then(onCreated)
       .catch(() => undefined)
   }
 
+  function togglePreset(scope: ApiKeyScope): void {
+    setAccessMode('presets')
+    setSelectedCustom([])
+    setShowCustom(false)
+    setSelectedPresets((current) =>
+      current.includes(scope) ? current.filter((entry) => entry !== scope) : [...current, scope],
+    )
+  }
+
+  function toggleCustom(scope: ApiKeyScope): void {
+    setAccessMode('custom')
+    setSelectedPresets([])
+    setSelectedCustom((current) =>
+      current.includes(scope) ? current.filter((entry) => entry !== scope) : [...current, scope],
+    )
+  }
+
+  function isScopeChecked(scope: ApiKeyGranularScope): boolean {
+    if (accessMode === 'custom') {
+      return selectedCustom.includes(scope)
+    }
+
+    if (accessMode === 'presets') {
+      return presetExpandedScopes.has(scope)
+    }
+
+    return false
+  }
+
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-ink/40 p-4">
-      <div className="animate-slide-in w-full max-w-md rounded-md border border-border bg-surface-raised p-5">
+      <div className="animate-slide-in max-h-[90vh] w-full max-w-lg overflow-y-auto rounded-md border border-border bg-surface-raised p-5">
         <form onSubmit={submit}>
           <h2 className="text-[15px] font-semibold text-ink">{title}</h2>
           <label className="mt-4 block">
@@ -139,6 +204,113 @@ function CreateKeyModal({
             />
           </label>
 
+          <fieldset className="mt-4">
+            <legend className="mb-2 text-[12px] font-medium text-ink">Access</legend>
+            <div className="space-y-2">
+              <label className="flex items-center gap-2 text-[13px] text-ink">
+                <input
+                  type="radio"
+                  name="access"
+                  checked={accessMode === 'full'}
+                  onChange={() => {
+                    setAccessMode('full')
+                    setSelectedPresets([])
+                    setSelectedCustom([])
+                    setShowCustom(false)
+                  }}
+                />
+                Full access
+              </label>
+              <div className="rounded-md border border-border p-3">
+                <p className="mb-2 text-[11px] font-medium tracking-wide text-ink-muted uppercase">
+                  Presets
+                </p>
+                <div className="space-y-1.5">
+                  {PRESET_OPTIONS.map((scope) => (
+                    <label key={scope} className="flex items-center gap-2 text-[13px] text-ink">
+                      <input
+                        type="checkbox"
+                        checked={accessMode === 'presets' && selectedPresets.includes(scope)}
+                        onChange={() => {
+                          togglePreset(scope)
+                        }}
+                      />
+                      {API_KEY_SCOPE_LABELS[scope]}
+                    </label>
+                  ))}
+                </div>
+              </div>
+              {accessMode !== 'presets' && (
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowCustom((open) => !open)
+                    if (!showCustom) {
+                      setAccessMode('custom')
+                      setSelectedPresets([])
+                    }
+                  }}
+                  className="text-[12px] font-medium text-accent hover:underline"
+                >
+                  {showCustom ? 'Hide custom scopes' : 'Custom scopes…'}
+                </button>
+              )}
+              {showScopeGrid && (
+                <div className="space-y-3 rounded-md border border-border p-3">
+                  {accessMode === 'presets' && (
+                    <p className="text-[11px] text-ink-muted">
+                      Included in the selected preset{selectedPresets.length === 1 ? '' : 's'}.
+                    </p>
+                  )}
+                  {API_KEY_SCOPE_GROUPS.map((group) => (
+                    <div key={group.label}>
+                      <p className="mb-1.5 text-[11px] font-medium tracking-wide text-ink-muted uppercase">
+                        {group.label}
+                      </p>
+                      <div className="grid grid-cols-1 gap-1 sm:grid-cols-2">
+                        {group.scopes.map((scope) => (
+                          <label
+                            key={scope}
+                            className={`flex items-center gap-2 text-[12px] ${
+                              accessMode === 'presets' ? 'text-ink-muted' : 'text-ink'
+                            }`}
+                          >
+                            <input
+                              type="checkbox"
+                              checked={isScopeChecked(scope)}
+                              disabled={accessMode === 'presets'}
+                              onChange={() => {
+                                toggleCustom(scope)
+                              }}
+                            />
+                            {API_KEY_SCOPE_LABELS[scope]}
+                          </label>
+                        ))}
+                      </div>
+                    </div>
+                  ))}
+                  {accessMode === 'presets' && (
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setAccessMode('custom')
+                        setSelectedPresets([])
+                        setSelectedCustom([...presetExpandedScopes])
+                        setShowCustom(true)
+                      }}
+                      className="text-[12px] font-medium text-accent hover:underline"
+                    >
+                      Switch to custom scopes…
+                    </button>
+                  )}
+                </div>
+              )}
+            </div>
+            <p className="mt-2 text-[11px] text-ink-faint">
+              Write includes read for the same resource. Presets cover many scopes at once.
+            </p>
+          </fieldset>
+
           {createApiKey.error !== null && (
             <div className="mt-3">
               <ErrorPanel error={createApiKey.error} />
@@ -167,12 +339,6 @@ function CreateKeyModal({
   )
 }
 
-/**
- * The secret, shown once.
- *
- * Nothing can retrieve it afterwards, so this panel says so plainly instead of
- * leaving a reader to discover it by coming back for the value later.
- */
 function SecretOnce({
   apiKey,
   onDismiss,
@@ -202,6 +368,27 @@ function SecretOnce({
   )
 }
 
+function formatScopeSummary(scopes: readonly ApiKeyScope[]): string {
+  if (scopes.length === 0) {
+    return 'Full access'
+  }
+
+  const presets = scopes.filter(isApiKeyPresetScope)
+  const granular = scopes.filter(isApiKeyGranularScope)
+
+  if (granular.length === 0) {
+    return presets.map((scope) => API_KEY_SCOPE_LABELS[scope]).join(', ')
+  }
+
+  if (presets.length === 0) {
+    return `Custom (${String(scopes.length)} scopes)`
+  }
+
+  return [...presets.map((scope) => API_KEY_SCOPE_LABELS[scope]), `Custom (${String(granular.length)})`].join(
+    ', ',
+  )
+}
+
 function ApiKeyTable({
   keys,
   emptyMessage,
@@ -227,6 +414,7 @@ function ApiKeyTable({
         <thead>
           <tr className="border-b border-border bg-surface text-[11px] font-semibold tracking-wide text-ink-muted uppercase">
             <th className="px-4 py-2.5">Name</th>
+            <th className="px-4 py-2.5">Scopes</th>
             <th className="px-4 py-2.5">Prefix</th>
             <th className="px-4 py-2.5">Created</th>
             <th className="px-4 py-2.5">Last used</th>
@@ -243,10 +431,6 @@ function ApiKeyTable({
   )
 }
 
-/**
- * Revoking a key takes effect at once and cannot be undone, so this asks first,
- * the same two-step confirm `WebhooksPage` uses for removing a registration.
- */
 function ApiKeyRow({
   apiKey,
   onRevoke,
@@ -262,6 +446,7 @@ function ApiKeyRow({
   return (
     <tr className="border-b border-border last:border-0">
       <td className="px-4 py-3 font-medium">{apiKey.name}</td>
+      <td className="px-4 py-3 text-ink-muted">{formatScopeSummary(apiKey.scopes)}</td>
       <td className="px-4 py-3 font-mono text-[12px] text-ink-muted">{apiKey.displayPrefix}</td>
       <td className="px-4 py-3 text-ink-muted">{formatDate(apiKey.createdAt, timezone)}</td>
       <td className="px-4 py-3 text-ink-muted">

package/src/components/ConvertRecordDialog.tsx

@@ -0,0 +1,210 @@
+import {
+  PIPELINE_KINDS,
+  PIPELINE_KIND_LABELS,
+} from '@kelpie/schemas'
+import type { ConvertPipelineRecordInput, PipelineKind } from '@kelpie/schemas'
+import { useState } from 'react'
+import { Link } from 'react-router'
+
+import { useCompanies } from '../api/resources/companies.ts'
+import type { MutationResult } from '../api/resource.ts'
+import {
+  detailPathForPipelineKind,
+  type ConvertPipelineRecordArguments,
+  type ConvertedPipelineRecord,
+} from '../api/resources/conversions.ts'
+
+const COMPANY_REQUIRED_TARGETS = new Set<PipelineKind>(['deal', 'raise', 'partnership'])
+
+export interface ConvertRecordDialogProps {
+  readonly sourceKind: PipelineKind
+  readonly recordName: string
+  readonly companyId: string | null
+  readonly isPending: boolean
+  readonly onCancel: () => void
+  readonly onConfirm: (body: ConvertPipelineRecordInput) => void
+}
+
+export function ConvertRecordDialog({
+  sourceKind,
+  recordName,
+  companyId,
+  isPending,
+  onCancel,
+  onConfirm,
+}: ConvertRecordDialogProps): React.JSX.Element {
+  const targetOptions = PIPELINE_KINDS.filter((kind) => kind !== sourceKind)
+  const [targetType, setTargetType] = useState<PipelineKind>(targetOptions[0] ?? 'deal')
+  const [kind, setKind] = useState('')
+  const [selectedCompanyId, setSelectedCompanyId] = useState(companyId ?? '')
+  const companies = useCompanies({ limit: 100 })
+
+  const needsCompany = COMPANY_REQUIRED_TARGETS.has(targetType) && companyId === null
+  const needsKind = targetType === 'opportunity' || targetType === 'partnership'
+
+  return (
+    <div className="rounded-md border border-border bg-surface-raised p-4">
+      <p className="text-[13px] text-ink">
+        Convert <span className="font-semibold">{recordName}</span> to another record type. This
+        creates a new record, moves notes / activity / plans / decisions to it, copies linked people,
+        and leaves this record in place with a link.
+      </p>
+
+      <div className="mt-4 space-y-3">
+        <label className="block text-[12px] font-medium text-ink-muted">
+          Convert to
+          <select
+            value={targetType}
+            onChange={(event) => {
+              setTargetType(event.target.value as PipelineKind)
+            }}
+            className="mt-1 block w-full rounded-md border border-border bg-surface px-2.5 py-1.5 text-[13px] text-ink"
+          >
+            {targetOptions.map((kind) => (
+              <option key={kind} value={kind}>
+                {PIPELINE_KIND_LABELS[kind]}
+              </option>
+            ))}
+          </select>
+        </label>
+
+        {needsKind && (
+          <label className="block text-[12px] font-medium text-ink-muted">
+            Kind
+            <input
+              value={kind}
+              onChange={(event) => {
+                setKind(event.target.value)
+              }}
+              className="mt-1 block w-full rounded-md border border-border bg-surface px-2.5 py-1.5 text-[13px] text-ink"
+              placeholder={targetType === 'opportunity' ? 'Grant' : 'Integration'}
+            />
+          </label>
+        )}
+
+        {needsCompany && (
+          <label className="block text-[12px] font-medium text-ink-muted">
+            Company
+            <select
+              value={selectedCompanyId}
+              onChange={(event) => {
+                setSelectedCompanyId(event.target.value)
+              }}
+              className="mt-1 block w-full rounded-md border border-border bg-surface px-2.5 py-1.5 text-[13px] text-ink"
+            >
+              <option value="">Choose a company…</option>
+              {companies.records.map((company) => (
+                <option key={company.id} value={company.id}>
+                  {company.name}
+                </option>
+              ))}
+            </select>
+          </label>
+        )}
+      </div>
+
+      <div className="mt-4 flex justify-end gap-2">
+        <button
+          type="button"
+          onClick={onCancel}
+          disabled={isPending}
+          className="rounded-md px-2.5 py-1 text-[12px] font-medium text-ink-muted hover:text-ink disabled:opacity-50"
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          disabled={isPending || (needsCompany && selectedCompanyId.length === 0)}
+          onClick={() => {
+            onConfirm({
+              targetType,
+              ...(needsKind && kind.length > 0 ? { kind } : {}),
+              ...(needsCompany ? { companyId: selectedCompanyId } : {}),
+            })
+          }}
+          className="rounded-md bg-accent px-3 py-1.5 text-[12px] font-semibold text-accent-fg hover:bg-accent-hover disabled:opacity-50"
+        >
+          {isPending ? 'Converting…' : 'Convert'}
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export interface ConvertRecordActionProps {
+  readonly sourceKind: PipelineKind
+  readonly recordId: string
+  readonly recordName: string
+  readonly companyId: string | null
+  readonly convertedTo: { readonly targetType: PipelineKind; readonly targetId: string } | null
+  readonly convert: MutationResult<ConvertPipelineRecordArguments, ConvertedPipelineRecord>
+  readonly onConverted: (record: ConvertedPipelineRecord, targetType: PipelineKind) => void
+  readonly showDialog: boolean
+  readonly onOpenDialog: () => void
+  readonly onCloseDialog: () => void
+}
+
+export function ConvertRecordButton({
+  convertedTo,
+  convert,
+  onOpenDialog,
+}: Pick<
+  ConvertRecordActionProps,
+  'convertedTo' | 'convert' | 'onOpenDialog'
+>): React.JSX.Element {
+  if (convertedTo !== null) {
+    return (
+      <Link
+        to={detailPathForPipelineKind(convertedTo.targetType, convertedTo.targetId)}
+        className="rounded-md border border-border px-2.5 py-1 text-[12px] font-medium text-accent transition hover:border-accent hover:underline"
+      >
+        Converted — view {PIPELINE_KIND_LABELS[convertedTo.targetType].toLowerCase()}
+      </Link>
+    )
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={onOpenDialog}
+      disabled={convert.isPending}
+      className="rounded-md border border-border px-2.5 py-1 text-[12px] font-medium text-ink-muted transition hover:border-accent hover:text-accent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-border disabled:hover:text-ink-muted"
+    >
+      Convert…
+    </button>
+  )
+}
+
+export function ConvertRecordAction({
+  sourceKind,
+  recordId,
+  recordName,
+  companyId,
+  convert,
+  onConverted,
+  showDialog,
+  onCloseDialog,
+}: ConvertRecordActionProps): React.JSX.Element | null {
+  if (!showDialog) {
+    return null
+  }
+
+  return (
+    <ConvertRecordDialog
+      sourceKind={sourceKind}
+      recordName={recordName}
+      companyId={companyId}
+      isPending={convert.isPending}
+      onCancel={onCloseDialog}
+      onConfirm={(body) => {
+        convert
+          .runAsync({ id: recordId, body })
+          .then((record) => {
+            onCloseDialog()
+            onConverted(record, body.targetType)
+          })
+          .catch(() => undefined)
+      }}
+    />
+  )
+}