@kelpie/ui 0.9.0 → 0.11.0

package/src/components/Shell.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-import { NavLink, Outlet, useLocation, useNavigate } from 'react-router'
+import { Link, NavLink, Outlet, useLocation, useNavigate } from 'react-router'
 
 import { useAccount, useTheme } from '../api/resources/account.ts'
 import { useLogOut } from '../api/resources/session.ts'
@@ -49,11 +49,21 @@ const CORE_NAV: readonly NavItem[] = [
 ]
 
 /**
- * `nav.primary` is one flat slot (`modules.md`); the mockup renders it as two
- * visual groups, an unheaded top section and a headed "CRM" section. This is
- * presentation only, so it stays here rather than becoming a second slot.
+ * `nav.primary` is one flat slot (`modules.md`); the shell renders it as visual
+ * groups: an unheaded top section, an unheaded directory pair (People,
+ * Companies), a headed "CRM" section for pipeline objects, then a headed
+ * "Tools" section for Lists and Forms. Presentation only — it stays here rather
+ * than becoming extra slots.
  */
 const TOP_LEVEL_NAV_IDS: ReadonlySet<string> = new Set(['dashboard', 'handbook', 'planning', 'decisions'])
+const DIRECTORY_NAV_IDS: ReadonlySet<string> = new Set(['people', 'companies'])
+const TOOLS_NAV_IDS: ReadonlySet<string> = new Set(['lists', 'forms'])
+
+const ADMIN_ENTRY_PATH = '/admin/workspace'
+
+function isAdminRoute(pathname: string): boolean {
+  return pathname.startsWith('/admin/')
+}
 
 function linkClass({ isActive }: { isActive: boolean }): string {
   return [
@@ -118,8 +128,14 @@ export function Shell(): React.JSX.Element {
 
   const navItems = useVisibleNavItems(CORE_NAV, moduleNav)
   const topLevelItems = navItems.filter((item) => TOP_LEVEL_NAV_IDS.has(item.id))
-  const crmItems = navItems.filter((item) => !TOP_LEVEL_NAV_IDS.has(item.id))
+  const nonTopLevelItems = navItems.filter((item) => !TOP_LEVEL_NAV_IDS.has(item.id))
+  const directoryItems = nonTopLevelItems.filter((item) => DIRECTORY_NAV_IDS.has(item.id))
+  const toolsItems = nonTopLevelItems.filter((item) => TOOLS_NAV_IDS.has(item.id))
+  const crmItems = nonTopLevelItems.filter(
+    (item) => !DIRECTORY_NAV_IDS.has(item.id) && !TOOLS_NAV_IDS.has(item.id),
+  )
   const adminItems = useVisibleNavItems(CORE_ADMIN_NAV, moduleAdminNav)
+  const inAdminNav = isAdminRoute(location.pathname)
 
   return (
     <div className="flex min-h-screen bg-surface">
@@ -133,40 +149,79 @@ export function Shell(): React.JSX.Element {
         </div>
 
         <nav className="flex flex-1 flex-col gap-5 overflow-y-auto px-2 pb-4">
-          <div className="flex flex-col gap-0.5">
-            {topLevelItems.map((item) => (
-              <NavLink key={item.id} to={item.to} className={linkClass}>
-                {item.label}
-              </NavLink>
-            ))}
-          </div>
+          {inAdminNav ? (
+            <>
+              <Link
+                to="/dashboard"
+                className="inline-flex px-2 text-[12px] font-medium text-sidebar-muted transition-colors hover:text-sidebar-ink"
+              >
+                ← Back
+              </Link>
 
-          <div>
-            <div className="mb-1 px-2 text-[11px] text-sidebar-muted">CRM</div>
-            <div className="flex flex-col gap-0.5">
-              {crmItems.map((item) => (
-                <NavLink key={item.id} to={item.to} className={linkClass}>
-                  {item.label}
-                </NavLink>
-              ))}
-            </div>
-          </div>
+              <div>
+                <div className="mb-1 px-2 text-[11px] text-sidebar-muted">Admin</div>
+                <div className="flex flex-col gap-0.5">
+                  {adminItems.map((item) => (
+                    <NavLink key={item.id} to={item.to} className={linkClass}>
+                      {item.label}
+                    </NavLink>
+                  ))}
+                </div>
+              </div>
+            </>
+          ) : (
+            <>
+              <div className="flex flex-col gap-0.5">
+                {topLevelItems.map((item) => (
+                  <NavLink key={item.id} to={item.to} className={linkClass}>
+                    {item.label}
+                  </NavLink>
+                ))}
+              </div>
 
-          {/*
-            Shown to every member. Both pages read for anyone in the workspace
-            and only their controls are admin-gated, so hiding the section would
-            keep a member from seeing who else is on their team.
-          */}
-          <div>
-            <div className="mb-1 px-2 text-[11px] text-sidebar-muted">Admin</div>
-            <div className="flex flex-col gap-0.5">
-              {adminItems.map((item) => (
-                <NavLink key={item.id} to={item.to} className={linkClass}>
-                  {item.label}
+              {directoryItems.length > 0 && (
+                <div className="flex flex-col gap-0.5">
+                  {directoryItems.map((item) => (
+                    <NavLink key={item.id} to={item.to} className={linkClass}>
+                      {item.label}
+                    </NavLink>
+                  ))}
+                </div>
+              )}
+
+              {crmItems.length > 0 && (
+                <div>
+                  <div className="mb-1 px-2 text-[11px] text-sidebar-muted">CRM</div>
+                  <div className="flex flex-col gap-0.5">
+                    {crmItems.map((item) => (
+                      <NavLink key={item.id} to={item.to} className={linkClass}>
+                        {item.label}
+                      </NavLink>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {toolsItems.length > 0 && (
+                <div>
+                  <div className="mb-1 px-2 text-[11px] text-sidebar-muted">Tools</div>
+                  <div className="flex flex-col gap-0.5">
+                    {toolsItems.map((item) => (
+                      <NavLink key={item.id} to={item.to} className={linkClass}>
+                        {item.label}
+                      </NavLink>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              <div className="flex flex-col gap-0.5">
+                <NavLink to={ADMIN_ENTRY_PATH} className={linkClass}>
+                  Admin
                 </NavLink>
-              ))}
-            </div>
-          </div>
+              </div>
+            </>
+          )}
         </nav>
       </aside>
 

package/src/pages/DealDetail.tsx

@@ -6,6 +6,10 @@ import { Link, useNavigate, useParams } from 'react-router'
 import { usePatch } from '../api/resource.ts'
 import type { PatchResult } from '../api/resource.ts'
 import { useCompanies, useCompany } from '../api/resources/companies.ts'
+import {
+  detailPathForPipelineKind,
+  useConvertPipelineRecord,
+} from '../api/resources/conversions.ts'
 import { useDeal, useDeleteDeal, useUpdateDeal } from '../api/resources/deals.ts'
 import { useFormSubmissionsForRecord } from '../api/resources/forms.ts'
 import { useMembers } from '../api/resources/members.ts'
@@ -16,6 +20,7 @@ import { ActivitiesPanel, LatestActivity } from '../components/ActivitiesPanel.t
 import { AgentTasks } from '../components/AgentTasks.tsx'
 import { Chip } from '../components/Chip.tsx'
 import type { ChipTone } from '../components/Chip.tsx'
+import { ConvertRecordAction, ConvertRecordButton } from '../components/ConvertRecordDialog.tsx'
 import { DecisionsPanel } from '../components/DecisionsPanel.tsx'
 import { DeleteRecord } from '../components/DeleteRecord.tsx'
 import { EntitySearch } from '../components/EntitySearch.tsx'
@@ -56,10 +61,12 @@ export function DealDetail(): React.JSX.Element {
   const { id } = useParams()
   const navigate = useNavigate()
   const { record, isLoading, isNotFound, error } = useDeal(id)
+  const convertRecord = useConvertPipelineRecord('deal')
   const deleteDeal = useDeleteDeal()
   const moduleTabs = inSlotOrder(useRecordTabs('deal'))
   const hasCustomFields = useHasCustomFields('deal')
   const [activeTab, setActiveTab] = useState('overview')
+  const [showConvert, setShowConvert] = useState(false)
   const formSubmissions = useFormSubmissionsForRecord('deal', id)
 
   if (isNotFound) {
@@ -89,6 +96,7 @@ export function DealDetail(): React.JSX.Element {
   ]
   const active = tabs.some((tab) => tab.id === activeTab) ? activeTab : 'overview'
   const moduleTab = moduleTabs.find((tab) => tab.id === active)
+  const convertedTo = record.convertedTo
 
   return (
     <div className="animate-fade-in mx-auto max-w-6xl">
@@ -104,6 +112,13 @@ export function DealDetail(): React.JSX.Element {
           <DealHeading deal={record} />
 
           <div className="flex justify-end gap-2">
+            <ConvertRecordButton
+              convertedTo={convertedTo}
+              convert={convertRecord}
+              onOpenDialog={() => {
+                setShowConvert(true)
+              }}
+            />
             <AgentTasks targetType="deal" targetId={record.id} targetLabel={record.name} />
             <DeleteRecord
               recordLabel="Deal"
@@ -119,6 +134,26 @@ export function DealDetail(): React.JSX.Element {
             />
           </div>
 
+          {convertRecord.error !== null && <ErrorPanel error={convertRecord.error} />}
+          <ConvertRecordAction
+            sourceKind="deal"
+            recordId={record.id}
+            recordName={record.name}
+            companyId={record.companyId}
+            convertedTo={convertedTo}
+            convert={convertRecord}
+            showDialog={showConvert}
+            onOpenDialog={() => {
+              setShowConvert(true)
+            }}
+            onCloseDialog={() => {
+              setShowConvert(false)
+            }}
+            onConverted={(created, targetType) => {
+              navigate(detailPathForPipelineKind(targetType, created.id))
+            }}
+          />
+
           <RecordTabs tabs={tabs} active={active} onChange={setActiveTab} ariaLabel="Deal sections">
             {active === 'overview' && <DealOverview deal={record} />}
             {active === 'fields' && (

package/src/pages/DecisionsPage.tsx

@@ -60,7 +60,6 @@ const TARGET_ROUTES: Readonly<Partial<Record<RecordTargetType, string>>> = {
 
 interface TargetDirectory {
   nameFor(decision: Decision): string | undefined
-  readonly isComplete: boolean
 }
 
 function useTargetDirectory(): TargetDirectory {
@@ -95,13 +94,6 @@ function useTargetDirectory(): TargetDirectory {
 
   return {
     nameFor: (decision) => nameById.get(decision.targetId),
-    isComplete:
-      !people.hasNext &&
-      !companies.hasNext &&
-      !deals.hasNext &&
-      !opportunities.hasNext &&
-      !raises.hasNext &&
-      !partnerships.hasNext,
   }
 }
 
@@ -258,12 +250,6 @@ export function DecisionsPage(): React.JSX.Element {
             onSortChange={setSort}
             visibleColumnKeys={listView.visibleKeys}
           />
-          {!directory.isComplete && (
-            <p className="mt-2 text-[11px] text-ink-faint">
-              The workspace holds more records than one page returns, so some rows name only their
-              record type.
-            </p>
-          )}
           <Paginator list={decisions} />
         </>
       )}

package/src/pages/EnquiryDetail.tsx

@@ -7,11 +7,14 @@ import { usePatch } from '../api/resource.ts'
 import type { PatchResult } from '../api/resource.ts'
 import { useCompanies, useCompany } from '../api/resources/companies.ts'
 import {
-  useConvertEnquiry,
   useDeleteEnquiry,
   useEnquiry,
   useUpdateEnquiry,
 } from '../api/resources/enquiries.ts'
+import {
+  detailPathForPipelineKind,
+  useConvertPipelineRecord,
+} from '../api/resources/conversions.ts'
 import { useFormSubmissionsForRecord } from '../api/resources/forms.ts'
 import { useMembers } from '../api/resources/members.ts'
 import { usePeople } from '../api/resources/people.ts'
@@ -21,6 +24,7 @@ import { ActivitiesPanel, LatestActivity } from '../components/ActivitiesPanel.t
 import { AgentTasks } from '../components/AgentTasks.tsx'
 import { Chip } from '../components/Chip.tsx'
 import type { ChipTone } from '../components/Chip.tsx'
+import { ConvertRecordAction, ConvertRecordButton } from '../components/ConvertRecordDialog.tsx'
 import { DecisionsPanel } from '../components/DecisionsPanel.tsx'
 import { DeleteRecord } from '../components/DeleteRecord.tsx'
 import { EntitySearch } from '../components/EntitySearch.tsx'
@@ -60,8 +64,8 @@ export function EnquiryDetail(): React.JSX.Element {
   const { id } = useParams()
   const navigate = useNavigate()
   const { record, isLoading, isNotFound, error } = useEnquiry(id)
+  const convertRecord = useConvertPipelineRecord('enquiry')
   const deleteEnquiry = useDeleteEnquiry()
-  const convertEnquiry = useConvertEnquiry()
   const moduleTabs = inSlotOrder(useRecordTabs('enquiry'))
   const hasCustomFields = useHasCustomFields('enquiry')
   const [activeTab, setActiveTab] = useState('overview')
@@ -96,12 +100,11 @@ export function EnquiryDetail(): React.JSX.Element {
   const active = tabs.some((tab) => tab.id === activeTab) ? activeTab : 'overview'
   const moduleTab = moduleTabs.find((tab) => tab.id === active)
 
-  const convertBlockedReason =
-    record.convertedDealId !== null
-      ? null
-      : record.companyId === null
-        ? 'Link a company first'
-        : null
+  const convertedTo =
+    record.convertedTo ??
+    (record.convertedDealId !== null
+      ? { targetType: 'deal' as const, targetId: record.convertedDealId }
+      : null)
 
   return (
     <div className="animate-fade-in mx-auto max-w-6xl">
@@ -117,28 +120,13 @@ export function EnquiryDetail(): React.JSX.Element {
           <EnquiryHeading enquiry={record} />
 
           <div className="flex justify-end gap-2">
-            {record.convertedDealId === null ? (
-              <button
-                type="button"
-                onClick={() => {
-                  if (convertBlockedReason === null) {
-                    setShowConvert(true)
-                  }
-                }}
-                disabled={convertBlockedReason !== null || convertEnquiry.isPending}
-                title={convertBlockedReason ?? undefined}
-                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 to deal
-              </button>
-            ) : (
-              <Link
-                to={`/deals/${record.convertedDealId}`}
-                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 deal
-              </Link>
-            )}
+            <ConvertRecordButton
+              convertedTo={convertedTo}
+              convert={convertRecord}
+              onOpenDialog={() => {
+                setShowConvert(true)
+              }}
+            />
             <AgentTasks targetType="enquiry" targetId={record.id} targetLabel={record.name} />
             <DeleteRecord
               recordLabel="Enquiry"
@@ -154,26 +142,25 @@ export function EnquiryDetail(): React.JSX.Element {
             />
           </div>
 
-          {convertEnquiry.error !== null && <ErrorPanel error={convertEnquiry.error} />}
-          {showConvert && (
-            <ConvertConfirm
-              enquiry={record}
-              isPending={convertEnquiry.isPending}
-              onCancel={() => {
-                setShowConvert(false)
-              }}
-              onConfirm={() => {
-                convertEnquiry
-                  .runAsync(record.id)
-                  .then((deal) => {
-                    setShowConvert(false)
-
-                    return navigate(`/deals/${deal.id}`)
-                  })
-                  .catch(() => undefined)
-              }}
-            />
-          )}
+          {convertRecord.error !== null && <ErrorPanel error={convertRecord.error} />}
+          <ConvertRecordAction
+            sourceKind="enquiry"
+            recordId={record.id}
+            recordName={record.name}
+            companyId={record.companyId}
+            convertedTo={convertedTo}
+            convert={convertRecord}
+            showDialog={showConvert}
+            onOpenDialog={() => {
+              setShowConvert(true)
+            }}
+            onCloseDialog={() => {
+              setShowConvert(false)
+            }}
+            onConverted={(created, targetType) => {
+              navigate(detailPathForPipelineKind(targetType, created.id))
+            }}
+          />
 
           <RecordTabs
             tabs={tabs}
@@ -512,43 +499,3 @@ function EnquiryContacts({ enquiry }: { readonly enquiry: Enquiry }): React.JSX.
     </section>
   )
 }
-
-function ConvertConfirm({
-  enquiry,
-  isPending,
-  onCancel,
-  onConfirm,
-}: {
-  readonly enquiry: Enquiry
-  readonly isPending: boolean
-  readonly onCancel: () => void
-  readonly onConfirm: () => void
-}): React.JSX.Element {
-  return (
-    <div className="rounded-md border border-border bg-surface-raised p-4">
-      <p className="text-[13px] text-ink">
-        Convert <span className="font-semibold">{enquiry.name}</span> to a Deal. This creates a new
-        deal (name, company, owner and linked people carry over) and moves this enquiry to the
-        first closed stage.
-      </p>
-      <div className="mt-3 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"
-          onClick={onConfirm}
-          disabled={isPending}
-          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>
-  )
-}

package/src/pages/ListDetail.tsx

@@ -6,7 +6,6 @@ import { Link, useNavigate, useParams } from 'react-router'
 import { usePatch } from '../api/resource.ts'
 import type { PatchResult } from '../api/resource.ts'
 import { useCompanies } from '../api/resources/companies.ts'
-import { useConsentPurposes } from '../api/resources/consentPurposes.ts'
 import { useDeals } from '../api/resources/deals.ts'
 import { useDeleteList, useList, useUpdateList } from '../api/resources/lists.ts'
 import {
@@ -86,57 +85,11 @@ export function ListDetail(): React.JSX.Element {
 
       <ListDescription list={record} />
 
-      {record.targetType === 'person' && <ListConsentPurpose list={record} />}
-
       <ListMembers listId={record.id} targetType={record.targetType} />
     </div>
   )
 }
 
-function ListConsentPurpose({ list }: { readonly list: List }): React.JSX.Element {
-  const { patch, error } = useListPatch(list)
-  const purposes = useConsentPurposes({ sort: 'sort_order', limit: 200 })
-  const options = [
-    { value: '', label: '— none —' },
-    ...purposes.records.map((purpose) => ({ value: purpose.id, label: purpose.label })),
-  ]
-
-  return (
-    <div className="mb-6 rounded-md border border-border bg-surface-raised p-4 text-[13px]">
-      {error !== null && (
-        <div className="mb-2">
-          <ErrorPanel error={error} />
-        </div>
-      )}
-      <div className="flex flex-wrap items-baseline justify-between gap-3">
-        <div>
-          <div className="text-[12px] font-medium text-ink">Consent purpose</div>
-          <p className="mt-0.5 text-[12px] text-ink-muted">
-            A form submit that adds a person to this list also grants this purpose. Manual and
-            API adds capture nothing.
-          </p>
-        </div>
-        <label className="shrink-0">
-          <select
-            value={list.consentPurposeId ?? ''}
-            onChange={(event) => {
-              const value = event.target.value
-              patch({ consentPurposeId: value.length === 0 ? null : value })
-            }}
-            className="rounded-md border border-border bg-transparent px-2 py-1 text-[12px] outline-none focus:border-accent"
-          >
-            {options.map((option) => (
-              <option key={option.value} value={option.value}>
-                {option.label}
-              </option>
-            ))}
-          </select>
-        </label>
-      </div>
-    </div>
-  )
-}
-
 function useListPatch(list: List): PatchResult<ListInput> {
   return usePatch(useUpdateList, list)
 }

package/src/pages/OpportunityDetail.tsx

@@ -6,6 +6,10 @@ import { Link, useNavigate, useParams } from 'react-router'
 import { usePatch } from '../api/resource.ts'
 import type { PatchResult } from '../api/resource.ts'
 import { useCompanies, useCompany } from '../api/resources/companies.ts'
+import {
+  detailPathForPipelineKind,
+  useConvertPipelineRecord,
+} from '../api/resources/conversions.ts'
 import { useFormSubmissionsForRecord } from '../api/resources/forms.ts'
 import { useMembers } from '../api/resources/members.ts'
 import {
@@ -20,6 +24,7 @@ import { ActivitiesPanel, LatestActivity } from '../components/ActivitiesPanel.t
 import { AgentTasks } from '../components/AgentTasks.tsx'
 import { Chip } from '../components/Chip.tsx'
 import type { ChipTone } from '../components/Chip.tsx'
+import { ConvertRecordAction, ConvertRecordButton } from '../components/ConvertRecordDialog.tsx'
 import { DecisionsPanel } from '../components/DecisionsPanel.tsx'
 import { DeleteRecord } from '../components/DeleteRecord.tsx'
 import { EntitySearch } from '../components/EntitySearch.tsx'
@@ -61,10 +66,12 @@ export function OpportunityDetail(): React.JSX.Element {
   const { id } = useParams()
   const navigate = useNavigate()
   const { record, isLoading, isNotFound, error } = useOpportunity(id)
+  const convertRecord = useConvertPipelineRecord('opportunity')
   const deleteOpportunity = useDeleteOpportunity()
   const moduleTabs = inSlotOrder(useRecordTabs('opportunity'))
   const hasCustomFields = useHasCustomFields('opportunity')
   const [activeTab, setActiveTab] = useState('overview')
+  const [showConvert, setShowConvert] = useState(false)
   const formSubmissions = useFormSubmissionsForRecord('opportunity', id)
 
   if (isNotFound) {
@@ -94,6 +101,7 @@ export function OpportunityDetail(): React.JSX.Element {
   ]
   const active = tabs.some((tab) => tab.id === activeTab) ? activeTab : 'overview'
   const moduleTab = moduleTabs.find((tab) => tab.id === active)
+  const convertedTo = record.convertedTo
 
   return (
     <div className="animate-fade-in mx-auto max-w-6xl">
@@ -109,6 +117,13 @@ export function OpportunityDetail(): React.JSX.Element {
           <OpportunityHeading opportunity={record} />
 
           <div className="flex justify-end gap-2">
+            <ConvertRecordButton
+              convertedTo={convertedTo}
+              convert={convertRecord}
+              onOpenDialog={() => {
+                setShowConvert(true)
+              }}
+            />
             <AgentTasks targetType="opportunity" targetId={record.id} targetLabel={record.name} />
             <DeleteRecord
               recordLabel="Opportunity"
@@ -124,6 +139,26 @@ export function OpportunityDetail(): React.JSX.Element {
             />
           </div>
 
+          {convertRecord.error !== null && <ErrorPanel error={convertRecord.error} />}
+          <ConvertRecordAction
+            sourceKind="opportunity"
+            recordId={record.id}
+            recordName={record.name}
+            companyId={record.companyId}
+            convertedTo={convertedTo}
+            convert={convertRecord}
+            showDialog={showConvert}
+            onOpenDialog={() => {
+              setShowConvert(true)
+            }}
+            onCloseDialog={() => {
+              setShowConvert(false)
+            }}
+            onConverted={(created, targetType) => {
+              navigate(detailPathForPipelineKind(targetType, created.id))
+            }}
+          />
+
           <RecordTabs
             tabs={tabs}
             active={active}