@kelpie/ui 0.1.0

package/src/components/PhonesField.tsx

@@ -0,0 +1,204 @@
+import { useEffect, useRef, useState } from 'react'
+
+export interface PhonesFieldProps {
+  readonly value: readonly string[]
+  readonly onChange: (phones: readonly string[]) => void
+}
+
+function telHref(phone: string): string {
+  return `tel:${phone.replace(/[^\d+]/gu, '')}`
+}
+
+/** Add, edit, and remove phone numbers. Clearing one to empty removes it. */
+export function PhonesField({ value, onChange }: PhonesFieldProps): React.JSX.Element {
+  const addInputRef = useRef<HTMLInputElement>(null)
+  const editInputRef = useRef<HTMLInputElement>(null)
+  const [adding, setAdding] = useState(false)
+  const [draft, setDraft] = useState('')
+  const [editingIndex, setEditingIndex] = useState<number | null>(null)
+  const [editDraft, setEditDraft] = useState('')
+
+  useEffect(() => {
+    if (adding) {
+      addInputRef.current?.focus()
+    }
+  }, [adding])
+
+  useEffect(() => {
+    if (editingIndex !== null) {
+      editInputRef.current?.focus()
+      editInputRef.current?.select()
+    }
+  }, [editingIndex])
+
+  function cancelAdd(): void {
+    setAdding(false)
+    setDraft('')
+  }
+
+  function commitAdd(): void {
+    const next = draft.trim()
+
+    if (next.length === 0) {
+      cancelAdd()
+      return
+    }
+
+    onChange([...value, next])
+    cancelAdd()
+  }
+
+  function cancelEdit(): void {
+    setEditingIndex(null)
+    setEditDraft('')
+  }
+
+  function commitEdit(): void {
+    if (editingIndex === null) {
+      return
+    }
+
+    const next = editDraft.trim()
+
+    onChange(
+      next.length === 0
+        ? value.filter((_, index) => index !== editingIndex)
+        : value.map((phone, index) => (index === editingIndex ? next : phone)),
+    )
+    cancelEdit()
+  }
+
+  function remove(index: number): void {
+    if (editingIndex === index) {
+      cancelEdit()
+    }
+
+    onChange(value.filter((_, position) => position !== index))
+  }
+
+  return (
+    <div className="space-y-0.5">
+      <ul>
+        {value.map((phone, index) =>
+          editingIndex === index ? (
+            <li key={`editing-${String(index)}`} className="py-1">
+              <input
+                ref={editInputRef}
+                type="tel"
+                value={editDraft}
+                onChange={(event) => {
+                  setEditDraft(event.target.value)
+                }}
+                onBlur={commitEdit}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter') {
+                    event.preventDefault()
+                    commitEdit()
+                  }
+
+                  if (event.key === 'Escape') {
+                    event.preventDefault()
+                    cancelEdit()
+                  }
+                }}
+                className="w-full rounded-md border border-accent bg-surface-raised px-2 py-1 font-mono text-[12px] outline-none ring-2 ring-accent/20"
+              />
+            </li>
+          ) : (
+            <li
+              key={`${phone}-${String(index)}`}
+              className="-mx-1 flex items-center gap-1 rounded-md px-1 py-1 hover:bg-surface"
+            >
+              <a
+                href={telHref(phone)}
+                className="min-w-0 flex-1 truncate font-mono text-[12px] leading-snug text-ink hover:text-accent"
+              >
+                {phone}
+              </a>
+              <div className="flex shrink-0 items-center">
+                <button
+                  type="button"
+                  onClick={() => {
+                    setAdding(false)
+                    setEditingIndex(index)
+                    setEditDraft(phone)
+                  }}
+                  className="rounded px-1.5 py-0.5 text-[11px] font-medium text-ink-faint hover:bg-surface-raised hover:text-ink"
+                >
+                  Edit
+                </button>
+                <button
+                  type="button"
+                  onClick={() => {
+                    remove(index)
+                  }}
+                  className="rounded px-1 py-0.5 text-[13px] leading-none text-ink-faint hover:bg-danger-soft hover:text-danger"
+                  aria-label={`Remove ${phone}`}
+                >
+                  ×
+                </button>
+              </div>
+            </li>
+          ),
+        )}
+      </ul>
+
+      {value.length === 0 && !adding && <p className="py-0.5 text-[12px] text-ink-faint">None yet</p>}
+
+      {adding ? (
+        <div className="mt-1 space-y-1.5 rounded-md border border-border bg-surface px-2 py-2">
+          <input
+            ref={addInputRef}
+            type="tel"
+            value={draft}
+            onChange={(event) => {
+              setDraft(event.target.value)
+            }}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') {
+                event.preventDefault()
+                commitAdd()
+              }
+
+              if (event.key === 'Escape') {
+                event.preventDefault()
+                cancelAdd()
+              }
+            }}
+            placeholder="Phone number"
+            className="w-full rounded-md border border-border bg-surface-raised px-2 py-1 font-mono text-[12px] outline-none focus:border-accent focus:ring-2 focus:ring-accent/20"
+          />
+          <div className="flex justify-end gap-1.5">
+            <button
+              type="button"
+              onClick={cancelAdd}
+              className="rounded-md px-2 py-1 text-[11px] font-medium text-ink-muted hover:text-ink"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={commitAdd}
+              disabled={draft.trim().length === 0}
+              className="rounded-md bg-accent px-2.5 py-1 text-[11px] font-semibold text-accent-fg hover:bg-accent-hover disabled:opacity-40"
+            >
+              Add
+            </button>
+          </div>
+        </div>
+      ) : (
+        <button
+          type="button"
+          onClick={() => {
+            setEditingIndex(null)
+            setAdding(true)
+            setDraft('')
+          }}
+          className="mt-0.5 -mx-1 rounded-md px-1 py-1 text-[12px] font-medium text-ink-muted transition hover:bg-surface hover:text-accent"
+        >
+          + Add
+        </button>
+      )}
+    </div>
+  )
+}

package/src/components/PlanAttention.tsx

@@ -0,0 +1,249 @@
+import { PIPELINE_KIND_LABELS, PLAN_ITEM_STATUS_LABELS } from '@kelpie/schemas'
+import type { Deal, Opportunity, Partnership, PipelineKind, PlanItem, Raise } from '@kelpie/schemas'
+import { Link } from 'react-router'
+
+import { useMembers } from '../api/resources/members.ts'
+import { usePlanItemsForRecords } from '../api/resources/planItems.ts'
+import { formatDay } from '../lib/dates.ts'
+import { planAttention, planStatusTone } from '../lib/plan.ts'
+import { Chip } from './Chip.tsx'
+import { SectionHeader } from './SectionHeader.tsx'
+
+/**
+ * The plan an Overview leads with: what is late, and what is due inside the week.
+ *
+ * Takes the items rather than fetching them, because the three pages that show
+ * this ask three different questions. A pipeline record's Overview asks for its
+ * own steps; a Person or Company asks for the steps of every record they are
+ * attached to, which is two requests the page already has to make.
+ */
+
+/** Where a plan item's record lives. */
+const ROUTES: Readonly<Record<PipelineKind, string | undefined>> = {
+  deal: '/deals',
+  opportunity: '/opportunities',
+  raise: '/fundraising',
+  partnership: '/partnerships',
+}
+
+export interface PlanAttentionProps {
+  readonly items: readonly PlanItem[]
+  /** Names the record each item belongs to. Off on a record's own page, where it is the same one every row. */
+  readonly showTarget?: boolean
+  /** How to write a target id. Absent ids render as the type alone rather than as an id. */
+  readonly targetNames?: ReadonlyMap<string, string>
+  readonly isLoading?: boolean
+}
+
+export function PlanAttention({
+  items,
+  showTarget = false,
+  targetNames,
+  isLoading = false,
+}: PlanAttentionProps): React.JSX.Element {
+  const { overdue, upcoming } = planAttention(items)
+  const empty = overdue.length === 0 && upcoming.length === 0
+
+  return (
+    <section>
+      <SectionHeader title="Plan" description="Overdue and due this week" />
+      {isLoading ? (
+        <p className="text-[13px] text-ink-faint">Loading plan…</p>
+      ) : empty ? (
+        <p className="text-[13px] text-ink-faint">No overdue or upcoming plan items.</p>
+      ) : (
+        <div className="space-y-4">
+          {overdue.length > 0 && (
+            <PlanGroup
+              label="Overdue"
+              tone="danger"
+              items={overdue}
+              showTarget={showTarget}
+              targetNames={targetNames}
+            />
+          )}
+          {upcoming.length > 0 && (
+            <PlanGroup
+              label="Upcoming"
+              tone="warning"
+              items={upcoming}
+              showTarget={showTarget}
+              targetNames={targetNames}
+            />
+          )}
+        </div>
+      )}
+    </section>
+  )
+}
+
+/**
+ * The plan rolled up from a Person's or a Company's pipeline records.
+ *
+ * Which relations roll up was settled by the mockup's plan scopes: a company
+ * takes all four pipelines; a person takes deals and partnerships only, no
+ * opportunities (they have no people) and no raises (the mockup leaves them
+ * off a person even though key people exist).
+ *
+ * @param deals The records to roll up, which the page has already fetched to
+ *   render its own related list.
+ */
+export function RelatedPlanAttention({
+  deals,
+  opportunities = [],
+  raises = [],
+  partnerships = [],
+  isLoading,
+}: {
+  readonly deals: readonly Deal[]
+  readonly opportunities?: readonly Opportunity[]
+  readonly raises?: readonly Raise[]
+  readonly partnerships?: readonly Partnership[]
+  readonly isLoading: boolean
+}): React.JSX.Element {
+  const dealItems = usePlanItemsForRecords(
+    'deal',
+    deals.map((deal) => deal.id),
+  )
+  const opportunityItems = usePlanItemsForRecords(
+    'opportunity',
+    opportunities.map((opportunity) => opportunity.id),
+  )
+  const raiseItems = usePlanItemsForRecords(
+    'raise',
+    raises.map((raise) => raise.id),
+  )
+  const partnershipItems = usePlanItemsForRecords(
+    'partnership',
+    partnerships.map((partnership) => partnership.id),
+  )
+
+  return (
+    <PlanAttention
+      items={[
+        ...dealItems.records,
+        ...opportunityItems.records,
+        ...raiseItems.records,
+        ...partnershipItems.records,
+      ]}
+      showTarget
+      targetNames={
+        new Map(
+          [...deals, ...opportunities, ...raises, ...partnerships].map((record) => [
+            record.id,
+            record.name,
+          ]),
+        )
+      }
+      isLoading={
+        isLoading ||
+        dealItems.isLoading ||
+        opportunityItems.isLoading ||
+        raiseItems.isLoading ||
+        partnershipItems.isLoading
+      }
+    />
+  )
+}
+
+function PlanGroup({
+  label,
+  tone,
+  items,
+  showTarget,
+  targetNames,
+}: {
+  readonly label: string
+  readonly tone: 'danger' | 'warning'
+  readonly items: readonly PlanItem[]
+  readonly showTarget: boolean
+  readonly targetNames: ReadonlyMap<string, string> | undefined
+}): React.JSX.Element {
+  return (
+    <div>
+      <div className="mb-2 flex items-center gap-2">
+        <h3 className="text-[12px] font-semibold text-ink">{label}</h3>
+        <Chip tone={tone}>{items.length}</Chip>
+      </div>
+      <ul className="overflow-hidden rounded-md border border-border">
+        {items.map((item) => (
+          <PlanAttentionRow
+            key={item.id}
+            item={item}
+            dateTone={tone}
+            showTarget={showTarget}
+            targetNames={targetNames}
+          />
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+function PlanAttentionRow({
+  item,
+  dateTone,
+  showTarget,
+  targetNames,
+}: {
+  readonly item: PlanItem
+  readonly dateTone: 'danger' | 'warning'
+  readonly showTarget: boolean
+  readonly targetNames: ReadonlyMap<string, string> | undefined
+}): React.JSX.Element {
+  const members = useMembers()
+
+  return (
+    <li className="flex flex-wrap items-baseline gap-x-3 gap-y-1 border-b border-border px-4 py-2.5 last:border-0">
+      <time
+        dateTime={item.date}
+        className={[
+          'shrink-0 text-[12px] font-medium tabular-nums',
+          dateTone === 'danger' ? 'text-danger' : 'text-warning',
+        ].join(' ')}
+      >
+        {formatDay(item.date)}
+      </time>
+      <span className="min-w-0 flex-1 text-[13px] text-ink">{item.title}</span>
+      {showTarget && <PlanTargetLink item={item} targetNames={targetNames} />}
+      {item.ownerId !== null && (
+        <span className="text-[12px] text-ink-muted">
+          {members.nameById.get(item.ownerId) ?? 'Unknown'}
+        </span>
+      )}
+      <Chip tone={planStatusTone(item.status)}>{PLAN_ITEM_STATUS_LABELS[item.status]}</Chip>
+    </li>
+  )
+}
+
+/**
+ * The record a step belongs to.
+ *
+ * A pipeline with no page yet renders as its type alone. Naming the type and
+ * stopping is honest; printing a raw id, or linking to a route that does not
+ * exist, is not.
+ */
+export function PlanTargetLink({
+  item,
+  targetNames,
+}: {
+  readonly item: PlanItem
+  readonly targetNames: ReadonlyMap<string, string> | undefined
+}): React.JSX.Element {
+  const kind = PIPELINE_KIND_LABELS[item.targetType]
+  const name = targetNames?.get(item.targetId)
+  const route = ROUTES[item.targetType]
+
+  if (route === undefined || name === undefined) {
+    return <span className="truncate text-[11px] text-ink-faint">{kind}</span>
+  }
+
+  return (
+    <Link
+      to={`${route}/${item.targetId}`}
+      className="truncate text-[11px] text-ink-faint hover:text-accent"
+    >
+      {kind} · {name}
+    </Link>
+  )
+}