@kelpie/ui 0.10.0 → 0.12.0

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)
+      }}
+    />
+  )
+}

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/index.ts

@@ -132,6 +132,10 @@ export { DecisionsPage } from './pages/DecisionsPage.tsx'
 export { PeoplePage } from './pages/PeoplePage.tsx'
 export { PersonDetail } from './pages/PersonDetail.tsx'
 export { PlanningPage } from './pages/PlanningPage.tsx'
+// The controls a module contributing a sign-in method builds its button from,
+// so it matches the form beside it without copying class names.
+export { AuthDivider, AuthLinkButton } from './pages/auth/AuthForm.tsx'
+export { safeNext } from './pages/auth/nextPath.ts'
 export { ForgotPasswordPage } from './pages/auth/ForgotPasswordPage.tsx'
 export { JoinPage } from './pages/auth/JoinPage.tsx'
 export { ResetPasswordPage } from './pages/auth/ResetPasswordPage.tsx'
@@ -165,6 +169,8 @@ export type { ThemePreference } from './lib/theme.ts'
 
 export { EXTENSIBLE_RECORD_TYPES, NAV_SLOTS } from './registry/contributions.ts'
 export type {
+  AuthMethod,
+  AuthMethodContext,
   DashboardCard,
   ExtensibleRecordType,
   NavItem,
@@ -182,6 +188,7 @@ export { NO_UI_MODULES, UiModuleError, inSlotOrder, registerUiModules } from './
 export type { UiExtensions, UiModule, UiModuleContext } from './registry/registry.ts'
 
 export {
+  useAuthMethods,
   useDashboardCards,
   useModuleRoutes,
   useNavItems,

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} />
         </>
       )}