@kelpie/ui 0.7.0 → 0.9.0

package/src/pages/CompanyDetail.tsx

@@ -12,6 +12,8 @@ import {
   useUpdateCompany,
 } from '../api/resources/companies.ts'
 import { useDeals } from '../api/resources/deals.ts'
+import { useEnquiries } from '../api/resources/enquiries.ts'
+import { useFormSubmissionsForRecord } from '../api/resources/forms.ts'
 import { useOpportunities } from '../api/resources/opportunities.ts'
 import { usePartnerships } from '../api/resources/partnerships.ts'
 import { usePeople } from '../api/resources/people.ts'
@@ -29,7 +31,11 @@ import type { ChipTone } from '../components/Chip.tsx'
 import { DecisionsPanel } from '../components/DecisionsPanel.tsx'
 import { DeleteRecord } from '../components/DeleteRecord.tsx'
 import { EntitySearch } from '../components/EntitySearch.tsx'
+import { FormsPanel } from '../components/FormsPanel.tsx'
+import { CustomFieldsPanel } from '../components/CustomFieldsPanel.tsx'
+import { useHasCustomFields } from '../components/useHasCustomFields.ts'
 import { InlineEdit } from '../components/InlineEdit.tsx'
+import { ListsPanel } from '../components/ListsPanel.tsx'
 import { NotesPanel } from '../components/NotesPanel.tsx'
 import { RelatedPlanAttention } from '../components/PlanAttention.tsx'
 import { ErrorPanel, LoadingPanel, NotFoundPanel } from '../components/QueryState.tsx'
@@ -45,7 +51,7 @@ import { toOptions, toTags } from './fields.ts'
 /**
  * One company.
  *
- * Overview, Activity, Notes and Decisions render today. As with People, the
+ * Overview, Activity, Notes, Decisions, Lists and People render today. The
  * tabs for Deals, Opportunities, Partnerships and Raises wait for their
  * endpoints. A UI module can add its own through the `company` record-tab slot.
  */
@@ -68,7 +74,9 @@ export function CompanyDetail(): React.JSX.Element {
   const { record, isLoading, isNotFound, error } = useCompany(id)
   const deleteCompany = useDeleteCompany()
   const moduleTabs = inSlotOrder(useRecordTabs('company'))
+  const hasCustomFields = useHasCustomFields('company')
   const [activeTab, setActiveTab] = useState('overview')
+  const formSubmissions = useFormSubmissionsForRecord('company', id)
 
   if (isNotFound) {
     return <NotFoundPanel label="Company" backTo="/companies" />
@@ -84,9 +92,15 @@ export function CompanyDetail(): React.JSX.Element {
 
   const tabs: readonly RecordTabDescriptor<string>[] = [
     { id: 'overview', label: 'Overview' },
+    ...(hasCustomFields ? [{ id: 'fields', label: 'Fields' }] : []),
     { id: 'activity', label: 'Activity' },
+    { id: 'people', label: 'People' },
     { id: 'notes', label: 'Notes' },
     { id: 'decisions', label: 'Decisions' },
+    { id: 'lists', label: 'Lists' },
+    ...(formSubmissions.records.length === 0
+      ? []
+      : [{ id: 'forms', label: 'Forms', count: formSubmissions.records.length }]),
     ...moduleTabs.map((tab) => ({ id: tab.id, label: tab.label })),
   ]
   const active = tabs.some((tab) => tab.id === activeTab) ? activeTab : 'overview'
@@ -128,16 +142,19 @@ export function CompanyDetail(): React.JSX.Element {
             ariaLabel="Company sections"
           >
             {active === 'overview' && <CompanyOverview company={record} />}
+            {active === 'fields' && <CompanyFields company={record} />}
             {active === 'activity' && <ActivitiesPanel targetType="company" targetId={record.id} />}
+            {active === 'people' && <CompanyPeople company={record} />}
             {active === 'notes' && <NotesPanel targetType="company" targetId={record.id} />}
             {active === 'decisions' && <DecisionsPanel targetType="company" targetId={record.id} />}
+            {active === 'lists' && <ListsPanel targetType="company" targetId={record.id} />}
+            {active === 'forms' && <FormsPanel targetType="company" targetId={record.id} />}
             {moduleTab?.render({ objectType: 'company', recordId: record.id })}
           </RecordTabs>
         </div>
 
         <aside className="space-y-4 text-[12px] lg:sticky lg:top-6">
           <CompanySidebar company={record} />
-          <CompanyPeople company={record} />
         </aside>
       </div>
     </div>
@@ -192,6 +209,7 @@ function CompanyOverview({ company }: { readonly company: Company }): React.JSX.
   const opportunities = useOpportunities({ companyIds: [company.id] })
   const raises = useRaises({ companyIds: [company.id] })
   const partnerships = usePartnerships({ companyIds: [company.id] })
+  const enquiries = useEnquiries({ companyIds: [company.id] })
 
   return (
     <div className="space-y-8">
@@ -207,8 +225,13 @@ function CompanyOverview({ company }: { readonly company: Company }): React.JSX.
         opportunities={opportunities.records}
         raises={raises.records}
         partnerships={partnerships.records}
+        enquiries={enquiries.records}
         isLoading={
-          deals.isLoading || opportunities.isLoading || raises.isLoading || partnerships.isLoading
+          deals.isLoading ||
+          opportunities.isLoading ||
+          raises.isLoading ||
+          partnerships.isLoading ||
+          enquiries.isLoading
         }
       />
       <LatestActivity targetType="company" targetId={company.id} />
@@ -353,6 +376,22 @@ function CompanySidebar({ company }: { readonly company: Company }): React.JSX.E
   )
 }
 
+function CompanyFields({ company }: { readonly company: Company }): React.JSX.Element {
+  const { patch, error } = useCompanyPatch(company)
+  return (
+    <div className="space-y-4">
+      {error !== null && <ErrorPanel error={error} />}
+      <CustomFieldsPanel
+        objectType="company"
+        values={company.customFields}
+        onPatch={(customFields) => {
+          patch({ customFields })
+        }}
+      />
+    </div>
+  )
+}
+
 /** The other side of the Position link: who holds a title here. */
 function CompanyPeople({ company }: { readonly company: Company }): React.JSX.Element {
   const positions = usePositions({ companyIds: [company.id] })
@@ -380,7 +419,7 @@ function CompanyPeople({ company }: { readonly company: Company }): React.JSX.El
   function submit(event: FormEvent): void {
     event.preventDefault()
 
-    if (personId.length === 0 || title.trim().length === 0) {
+    if (personId.length === 0) {
       return
     }
 
@@ -389,73 +428,28 @@ function CompanyPeople({ company }: { readonly company: Company }): React.JSX.El
   }
 
   return (
-    <section className="rounded-md border border-border">
-      <div className="border-b border-border px-3.5 py-2.5">
-        <SectionHeader
-          title="People"
-          onAdd={() => {
-            setAdding((current) => !current)
-          }}
-          addLabel="Add person"
-          compact
-        />
-      </div>
+    <section>
+      <SectionHeader
+        title="People"
+        onAdd={() => {
+          setAdding((current) => !current)
+        }}
+        addLabel="Add person"
+      />
 
       {createPosition.error !== null && (
-        <div className="px-3.5 py-2">
+        <div className="mb-3">
           <ErrorPanel error={createPosition.error} />
         </div>
       )}
       {deletePosition.error !== null && (
-        <div className="px-3.5 py-2">
+        <div className="mb-3">
           <ErrorPanel error={deletePosition.error} />
         </div>
       )}
 
-      <ul className="divide-y divide-border">
-        {positions.isLoading && (
-          <li className="px-3.5 py-4 text-[12px] text-ink-faint">Loading people…</li>
-        )}
-        {!positions.isLoading && positions.records.length === 0 && !adding && (
-          <li className="px-3.5 py-4 text-[12px] text-ink-faint">No people yet.</li>
-        )}
-        {positions.records.map((position) => {
-          const person = personById.get(position.personId)
-
-          return (
-            <li key={position.id} className="space-y-1 px-3.5 py-2.5">
-              <div className="flex items-start justify-between gap-2">
-                <Link
-                  to={`/people/${position.personId}`}
-                  className="text-[13px] font-medium text-ink hover:text-accent"
-                >
-                  {person?.name ?? 'Unknown'}
-                </Link>
-                <button
-                  type="button"
-                  onClick={() => {
-                    deletePosition.run(position.id)
-                  }}
-                  className="text-[11px] font-medium text-danger hover:underline"
-                >
-                  Remove
-                </button>
-              </div>
-              <InlineEdit
-                value={position.title}
-                onChange={(next) => {
-                  updateTitle.run({ id: position.id, changes: { title: next } })
-                }}
-                displayClassName="not-italic text-[12px]"
-                emptyLabel="Add position title…"
-              />
-            </li>
-          )
-        })}
-      </ul>
-
       {adding && (
-        <form onSubmit={submit} className="space-y-2 border-t border-border bg-surface px-3.5 py-3">
+        <form onSubmit={submit} className="mb-4 space-y-2 rounded-md border border-border bg-surface p-3">
           <EntitySearch
             options={searchable.records
               .filter((person) => !held.has(person.id))
@@ -476,9 +470,8 @@ function CompanyPeople({ company }: { readonly company: Company }): React.JSX.El
             onChange={(event) => {
               setTitle(event.target.value)
             }}
-            placeholder="Position title"
-            className="w-full rounded-md border border-border bg-surface-raised px-2 py-1.5 text-[12px] outline-none focus:border-accent"
-            required
+            placeholder="Position title (optional)"
+            className="w-full rounded-md border border-border bg-surface-raised px-2 py-1.5 text-[13px] outline-none focus:border-accent"
           />
           <div className="flex justify-end gap-2">
             <button
@@ -497,6 +490,48 @@ function CompanyPeople({ company }: { readonly company: Company }): React.JSX.El
           </div>
         </form>
       )}
+
+      {positions.isLoading && <p className="text-[13px] text-ink-faint">Loading people…</p>}
+
+      {!positions.isLoading && positions.records.length === 0 && !adding ? (
+        <p className="text-[13px] text-ink-faint">No people yet.</p>
+      ) : (
+        <ul className="divide-y divide-border rounded-md border border-border">
+          {positions.records.map((position) => {
+            const person = personById.get(position.personId)
+
+            return (
+              <li key={position.id} className="space-y-1 px-3.5 py-3">
+                <div className="flex items-start justify-between gap-2">
+                  <Link
+                    to={`/people/${position.personId}`}
+                    className="text-[13px] font-medium text-ink hover:text-accent"
+                  >
+                    {person?.name ?? 'Unknown'}
+                  </Link>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      deletePosition.run(position.id)
+                    }}
+                    className="text-[11px] font-medium text-danger hover:underline"
+                  >
+                    Remove
+                  </button>
+                </div>
+                <InlineEdit
+                  value={position.title}
+                  onChange={(next) => {
+                    updateTitle.run({ id: position.id, changes: { title: next } })
+                  }}
+                  displayClassName="not-italic text-[12px] text-ink-muted"
+                  emptyLabel="Add position title…"
+                />
+              </li>
+            )
+          })}
+        </ul>
+      )}
     </section>
   )
 }

package/src/pages/DealDetail.tsx

@@ -7,6 +7,7 @@ import { usePatch } from '../api/resource.ts'
 import type { PatchResult } from '../api/resource.ts'
 import { useCompanies, useCompany } from '../api/resources/companies.ts'
 import { useDeal, useDeleteDeal, useUpdateDeal } from '../api/resources/deals.ts'
+import { useFormSubmissionsForRecord } from '../api/resources/forms.ts'
 import { useMembers } from '../api/resources/members.ts'
 import { usePeople } from '../api/resources/people.ts'
 import { usePipelineStages } from '../api/resources/pipelineStages.ts'
@@ -18,7 +19,11 @@ import type { ChipTone } from '../components/Chip.tsx'
 import { DecisionsPanel } from '../components/DecisionsPanel.tsx'
 import { DeleteRecord } from '../components/DeleteRecord.tsx'
 import { EntitySearch } from '../components/EntitySearch.tsx'
+import { FormsPanel } from '../components/FormsPanel.tsx'
+import { CustomFieldsPanel } from '../components/CustomFieldsPanel.tsx'
+import { useHasCustomFields } from '../components/useHasCustomFields.ts'
 import { InlineEdit } from '../components/InlineEdit.tsx'
+import { ListsPanel } from '../components/ListsPanel.tsx'
 import { NotesPanel } from '../components/NotesPanel.tsx'
 import { PlanAttention } from '../components/PlanAttention.tsx'
 import { PlanPanel } from '../components/PlanPanel.tsx'
@@ -53,7 +58,9 @@ export function DealDetail(): React.JSX.Element {
   const { record, isLoading, isNotFound, error } = useDeal(id)
   const deleteDeal = useDeleteDeal()
   const moduleTabs = inSlotOrder(useRecordTabs('deal'))
+  const hasCustomFields = useHasCustomFields('deal')
   const [activeTab, setActiveTab] = useState('overview')
+  const formSubmissions = useFormSubmissionsForRecord('deal', id)
 
   if (isNotFound) {
     return <NotFoundPanel label="Deal" backTo="/deals" />
@@ -69,10 +76,15 @@ export function DealDetail(): React.JSX.Element {
 
   const tabs: readonly RecordTabDescriptor<string>[] = [
     { id: 'overview', label: 'Overview' },
+    ...(hasCustomFields ? [{ id: 'fields', label: 'Fields' }] : []),
     { id: 'plan', label: 'Plan' },
     { id: 'activity', label: 'Activity' },
     { id: 'notes', label: 'Notes' },
     { id: 'decisions', label: 'Decisions' },
+    { id: 'lists', label: 'Lists' },
+    ...(formSubmissions.records.length === 0
+      ? []
+      : [{ id: 'forms', label: 'Forms', count: formSubmissions.records.length }]),
     ...moduleTabs.map((tab) => ({ id: tab.id, label: tab.label })),
   ]
   const active = tabs.some((tab) => tab.id === activeTab) ? activeTab : 'overview'
@@ -109,10 +121,15 @@ export function DealDetail(): React.JSX.Element {
 
           <RecordTabs tabs={tabs} active={active} onChange={setActiveTab} ariaLabel="Deal sections">
             {active === 'overview' && <DealOverview deal={record} />}
+            {active === 'fields' && (
+              <DealFields deal={record} />
+            )}
             {active === 'plan' && <PlanPanel targetType="deal" targetId={record.id} />}
             {active === 'activity' && <ActivitiesPanel targetType="deal" targetId={record.id} />}
             {active === 'notes' && <NotesPanel targetType="deal" targetId={record.id} />}
             {active === 'decisions' && <DecisionsPanel targetType="deal" targetId={record.id} />}
+            {active === 'lists' && <ListsPanel targetType="deal" targetId={record.id} />}
+            {active === 'forms' && <FormsPanel targetType="deal" targetId={record.id} />}
             {moduleTab?.render({ objectType: 'deal', recordId: record.id })}
           </RecordTabs>
         </div>
@@ -239,6 +256,23 @@ function DealOverview({ deal }: { readonly deal: Deal }): React.JSX.Element {
   )
 }
 
+/** The Fields tab: the workspace's custom fields for this deal. */
+function DealFields({ deal }: { readonly deal: Deal }): React.JSX.Element {
+  const { patch, error } = useDealPatch(deal)
+  return (
+    <div className="space-y-4">
+      {error !== null && <ErrorPanel error={error} />}
+      <CustomFieldsPanel
+        objectType="deal"
+        values={deal.customFields}
+        onPatch={(customFields) => {
+          patch({ customFields })
+        }}
+      />
+    </div>
+  )
+}
+
 /** Whole units in the box, cents on the wire. Blank clears the value. */
 function toValueCents(raw: string): number | null | undefined {
   const trimmed = raw.trim()