@startsimpli/ui 0.4.11 → 0.4.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.11",
+  "version": "0.4.14",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -66,6 +66,7 @@
     "date-fns": "^3.6.0",
     "dompurify": "^3.4.1",
     "lucide-react": "^0.408.0",
+    "react-big-calendar": "^1.19.4",
     "react-day-picker": "^9.14.0",
     "tailwind-merge": "^2.6.1",
     "tailwindcss-animate": "^1.0.7",
@@ -81,6 +82,7 @@
     "@types/jest": "^30.0.0",
     "@types/node": "^20.19.39",
     "@types/react": "^19.2.14",
+    "@types/react-big-calendar": "^1.16.3",
     "@types/react-dom": "^19.2.3",
     "eslint": "^8.57.1",
     "identity-obj-proxy": "^3.0.0",

package/src/components/__tests__/calendar-view.test.tsx

@@ -0,0 +1,97 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { CalendarView, type CalendarEvent } from '../calendar/calendar-view'
+
+const FIXED_DATE = new Date('2026-04-15T12:00:00Z')
+
+const sampleEvents: CalendarEvent[] = [
+  {
+    id: 'meet-1',
+    title: 'Investor Sync — Sequoia',
+    start: new Date('2026-04-15T16:00:00Z'),
+    end: new Date('2026-04-15T16:30:00Z'),
+  },
+  {
+    id: 'meet-2',
+    title: 'Demo with Acme',
+    start: '2026-04-16T17:00:00Z',
+    end: '2026-04-16T17:45:00Z',
+  },
+]
+
+describe('CalendarView', () => {
+  it('renders without crashing in month view', () => {
+    render(
+      <CalendarView
+        events={sampleEvents}
+        defaultDate={FIXED_DATE}
+        defaultView="month"
+      />
+    )
+    // The toolbar's "Today" button is always rendered by react-big-calendar
+    expect(screen.getByText('Today')).toBeInTheDocument()
+  })
+
+  it('renders event titles on the grid', () => {
+    render(
+      <CalendarView
+        events={sampleEvents}
+        defaultDate={FIXED_DATE}
+        defaultView="month"
+      />
+    )
+    expect(screen.getByText(/Investor Sync — Sequoia/)).toBeInTheDocument()
+    expect(screen.getByText(/Demo with Acme/)).toBeInTheDocument()
+  })
+
+  it('fires onEventClick with the original event when an event is clicked', () => {
+    const onEventClick = jest.fn()
+    render(
+      <CalendarView
+        events={sampleEvents}
+        defaultDate={FIXED_DATE}
+        defaultView="month"
+        onEventClick={onEventClick}
+      />
+    )
+    fireEvent.click(screen.getByText(/Investor Sync — Sequoia/))
+    expect(onEventClick).toHaveBeenCalledTimes(1)
+    expect(onEventClick.mock.calls[0][0].id).toBe('meet-1')
+    expect(onEventClick.mock.calls[0][0].title).toBe('Investor Sync — Sequoia')
+  })
+
+  it('accepts string dates in events and normalizes them', () => {
+    // Verifies the toDate / normalizeEvent path
+    render(
+      <CalendarView
+        events={[
+          { id: 'x', title: 'Stringy', start: '2026-04-15T16:00:00Z' },
+        ]}
+        defaultDate={FIXED_DATE}
+        defaultView="month"
+      />
+    )
+    expect(screen.getByText(/Stringy/)).toBeInTheDocument()
+  })
+
+  it('passes through resource payload to onEventClick', () => {
+    interface MyMeeting {
+      uuid: string
+      attendees: number
+    }
+    const meeting: MyMeeting = { uuid: 'abc-123', attendees: 5 }
+    const onEventClick = jest.fn()
+    render(
+      <CalendarView<MyMeeting>
+        events={[
+          { id: 'r1', title: 'WithResource', start: FIXED_DATE, resource: meeting },
+        ]}
+        defaultDate={FIXED_DATE}
+        defaultView="month"
+        onEventClick={onEventClick}
+      />
+    )
+    fireEvent.click(screen.getByText(/WithResource/))
+    expect(onEventClick).toHaveBeenCalledTimes(1)
+    expect(onEventClick.mock.calls[0][0].resource).toEqual(meeting)
+  })
+})

package/src/components/__tests__/upcoming-meetings.test.tsx

@@ -0,0 +1,104 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { UpcomingMeetings, type UpcomingMeeting } from '../calendar/upcoming-meetings'
+
+const sampleMeetings: UpcomingMeeting[] = [
+  {
+    id: 1,
+    title: 'Sequoia partner sync',
+    scheduled_at: '2026-04-29T16:00:00Z',
+    status: 'confirmed',
+    investor_name: 'Roelof Botha',
+    investor_email: 'roelof@sequoia.com',
+    meeting_link: 'https://meet.google.com/abc',
+  },
+  {
+    id: 2,
+    title: 'Acme partner intro',
+    scheduled_at: '2026-04-30T14:00:00Z',
+    status: 'pending',
+    investor_email: 'partner@acme.vc',
+  },
+  {
+    id: 3,
+    title: 'Cancelled call',
+    scheduled_at: '2026-05-01T10:00:00Z',
+    status: 'cancelled',
+  },
+]
+
+describe('UpcomingMeetings', () => {
+  it('renders the title and each meeting title', () => {
+    render(<UpcomingMeetings meetings={sampleMeetings} />)
+    expect(screen.getByText('Upcoming Meetings')).toBeInTheDocument()
+    expect(screen.getByText('Sequoia partner sync')).toBeInTheDocument()
+    expect(screen.getByText('Acme partner intro')).toBeInTheDocument()
+    expect(screen.getByText('Cancelled call')).toBeInTheDocument()
+  })
+
+  it('shows the right status badge per meeting', () => {
+    render(<UpcomingMeetings meetings={sampleMeetings} />)
+    expect(screen.getByText('Confirmed')).toBeInTheDocument()
+    expect(screen.getByText('Pending')).toBeInTheDocument()
+    expect(screen.getByText('Cancelled')).toBeInTheDocument()
+  })
+
+  it('renders skeletons in loading state', () => {
+    const { container } = render(
+      <UpcomingMeetings meetings={[]} loading loadingRowCount={5} />
+    )
+    // Skeletons render as empty divs with animate-pulse — count them by class.
+    const skeletons = container.querySelectorAll('.animate-pulse')
+    expect(skeletons).toHaveLength(5)
+  })
+
+  it('renders empty state when no meetings', () => {
+    render(<UpcomingMeetings meetings={[]} />)
+    expect(screen.getByText('No upcoming meetings')).toBeInTheDocument()
+  })
+
+  it('does not render Schedule CTA when onSchedule is not provided', () => {
+    render(<UpcomingMeetings meetings={[]} />)
+    expect(screen.queryByText('Schedule one')).not.toBeInTheDocument()
+  })
+
+  it('renders Schedule CTA when onSchedule is provided and fires it on click', () => {
+    const onSchedule = jest.fn()
+    render(<UpcomingMeetings meetings={[]} onSchedule={onSchedule} />)
+    const cta = screen.getByText('Schedule one')
+    expect(cta).toBeInTheDocument()
+    fireEvent.click(cta)
+    expect(onSchedule).toHaveBeenCalledTimes(1)
+  })
+
+  it('fires onMeetingClick with the original meeting payload', () => {
+    const onMeetingClick = jest.fn()
+    render(<UpcomingMeetings meetings={sampleMeetings} onMeetingClick={onMeetingClick} />)
+    fireEvent.click(screen.getByText('Sequoia partner sync'))
+    expect(onMeetingClick).toHaveBeenCalledTimes(1)
+    expect(onMeetingClick.mock.calls[0][0].id).toBe(1)
+    expect(onMeetingClick.mock.calls[0][0].investor_name).toBe('Roelof Botha')
+  })
+
+  it('renders View all link when viewAllHref is provided', () => {
+    render(<UpcomingMeetings meetings={sampleMeetings} viewAllHref="/calendar" />)
+    const link = screen.getByText('View all')
+    expect(link.closest('a')).toHaveAttribute('href', '/calendar')
+  })
+
+  it('renders Join link when meeting_link is set', () => {
+    render(<UpcomingMeetings meetings={sampleMeetings} />)
+    const join = screen.getByText('Join')
+    expect(join.closest('a')).toHaveAttribute('href', 'https://meet.google.com/abc')
+  })
+
+  it("falls back to investor_email when investor_name is absent", () => {
+    render(<UpcomingMeetings meetings={sampleMeetings} />)
+    expect(screen.getByText('partner@acme.vc')).toBeInTheDocument()
+  })
+
+  it('uses a custom title when title prop is provided', () => {
+    render(<UpcomingMeetings meetings={[]} title="This Week's Calls" />)
+    expect(screen.getByText("This Week's Calls")).toBeInTheDocument()
+    expect(screen.queryByText('Upcoming Meetings')).not.toBeInTheDocument()
+  })
+})

package/src/components/calendar/calendar-view.tsx

@@ -0,0 +1,222 @@
+"use client"
+
+/**
+ * CalendarView — shared month/week/day event grid.
+ *
+ * Wraps react-big-calendar with a date-fns localizer pre-wired and a
+ * simplified event shape so consumers don't have to reach for raw RBC types.
+ *
+ * IMPORTANT: react-big-calendar ships its own CSS. Consumers must import
+ * `react-big-calendar/lib/css/react-big-calendar.css` once at the app level
+ * (e.g. in _app.tsx / layout.tsx). This package does NOT auto-inject CSS so
+ * consumers can layer Tailwind overrides predictably.
+ *
+ * lifecycle:calendar-ui (raise-simpli-k4u)
+ */
+
+import * as React from "react"
+import {
+  Calendar,
+  dateFnsLocalizer,
+  Views,
+  type View,
+  type SlotInfo,
+} from "react-big-calendar"
+import { format, parse, startOfWeek, getDay } from "date-fns"
+import { enUS } from "date-fns/locale"
+
+const locales = { "en-US": enUS }
+
+const localizer = dateFnsLocalizer({
+  format,
+  parse,
+  startOfWeek: () => startOfWeek(new Date(), { weekStartsOn: 0 }),
+  getDay,
+  locales,
+})
+
+/** Domain-friendly event shape callers pass in. */
+export interface CalendarEvent<T = unknown> {
+  /** Stable identifier — passed through to onEventClick payload */
+  id: string | number
+  /** Event title shown on the grid */
+  title: string
+  /** Event start (Date or ISO string) */
+  start: Date | string
+  /** Event end. If omitted, defaults to start + 30min */
+  end?: Date | string
+  /** Whether to render as all-day across the top of the day */
+  allDay?: boolean
+  /** Optional pass-through payload (the original ScheduledMeeting / etc.) */
+  resource?: T
+}
+
+interface InternalRBCEvent {
+  id: string | number
+  title: string
+  start: Date
+  end: Date
+  allDay: boolean
+  resource: unknown
+}
+
+const DEFAULT_DURATION_MS = 30 * 60 * 1000
+
+function toDate(value: Date | string): Date {
+  return value instanceof Date ? value : new Date(value)
+}
+
+function normalizeEvent(e: CalendarEvent): InternalRBCEvent {
+  const start = toDate(e.start)
+  const end = e.end ? toDate(e.end) : new Date(start.getTime() + DEFAULT_DURATION_MS)
+  return {
+    id: e.id,
+    title: e.title,
+    start,
+    end,
+    allDay: e.allDay ?? false,
+    resource: e.resource,
+  }
+}
+
+export type CalendarViewMode = "month" | "week" | "day" | "agenda"
+
+const VIEW_BY_MODE: Record<CalendarViewMode, View> = {
+  month: Views.MONTH,
+  week: Views.WEEK,
+  day: Views.DAY,
+  agenda: Views.AGENDA,
+}
+
+export interface CalendarViewProps<T = unknown> {
+  /** Events to render on the grid */
+  events: CalendarEvent<T>[]
+  /** Currently navigated date (controlled) */
+  date?: Date
+  /** Default date if uncontrolled */
+  defaultDate?: Date
+  /** Active view (controlled) */
+  view?: CalendarViewMode
+  /** Default view if uncontrolled */
+  defaultView?: CalendarViewMode
+  /** Allowed views the toolbar can switch between */
+  views?: CalendarViewMode[]
+  /** Fires when the user clicks an event. Receives the original event passed in. */
+  onEventClick?: (event: CalendarEvent<T>) => void
+  /** Fires when the user clicks an empty slot (or drags to select a range). */
+  onSlotClick?: (slot: { start: Date; end: Date; action: "click" | "select" }) => void
+  /** Fires when the user navigates to a new date. */
+  onNavigate?: (date: Date) => void
+  /** Fires when the user changes view. */
+  onViewChange?: (view: CalendarViewMode) => void
+  /** Allow drag-to-select empty time slots (defaults true). */
+  selectable?: boolean
+  /** Min height for the grid (default 600px). */
+  minHeight?: number
+  /** className passed to the wrapping div for Tailwind overrides. */
+  className?: string
+}
+
+/**
+ * Shared calendar grid. Pre-wired with date-fns localizer.
+ *
+ * @example
+ * import "react-big-calendar/lib/css/react-big-calendar.css"
+ * import { CalendarView } from "@startsimpli/ui"
+ *
+ * <CalendarView
+ *   events={meetings.map(m => ({
+ *     id: m.id,
+ *     title: m.title,
+ *     start: m.scheduled_at,
+ *     end: addMinutes(new Date(m.scheduled_at), m.duration_minutes),
+ *     resource: m,
+ *   }))}
+ *   onEventClick={e => openMeetingDialog(e.resource)}
+ *   onSlotClick={s => openCreateMeetingDialog(s.start)}
+ * />
+ */
+export function CalendarView<T = unknown>({
+  events,
+  date,
+  defaultDate,
+  view,
+  defaultView,
+  views,
+  onEventClick,
+  onSlotClick,
+  onNavigate,
+  onViewChange,
+  selectable = true,
+  minHeight = 600,
+  className,
+}: CalendarViewProps<T>) {
+  const normalized = React.useMemo(() => events.map(normalizeEvent), [events])
+
+  // Map our public CalendarEvent[] back from the internal event RBC hands us
+  // on click — keeps the consumer API clean (they only see what they passed).
+  const eventByInternalId = React.useMemo(() => {
+    const map = new Map<string | number, CalendarEvent<T>>()
+    for (const e of events) map.set(e.id, e)
+    return map
+  }, [events])
+
+  const handleSelectEvent = React.useCallback(
+    (rbcEvent: object) => {
+      const id = (rbcEvent as InternalRBCEvent).id
+      const original = eventByInternalId.get(id)
+      if (original && onEventClick) onEventClick(original)
+    },
+    [eventByInternalId, onEventClick],
+  )
+
+  const handleSelectSlot = React.useCallback(
+    (slot: SlotInfo) => {
+      if (!onSlotClick) return
+      onSlotClick({
+        start: slot.start as Date,
+        end: slot.end as Date,
+        action: slot.action === "select" ? "select" : "click",
+      })
+    },
+    [onSlotClick],
+  )
+
+  const handleViewChange = React.useCallback(
+    (v: View) => {
+      if (!onViewChange) return
+      const mode = (Object.entries(VIEW_BY_MODE).find(([, val]) => val === v)?.[0] ?? "month") as CalendarViewMode
+      onViewChange(mode)
+    },
+    [onViewChange],
+  )
+
+  const allowedViews = React.useMemo<View[]>(
+    () => (views ?? ["month", "week", "day", "agenda"]).map(v => VIEW_BY_MODE[v]),
+    [views],
+  )
+
+  return (
+    <div className={className} style={{ minHeight }}>
+      <Calendar
+        localizer={localizer}
+        events={normalized}
+        startAccessor="start"
+        endAccessor="end"
+        titleAccessor="title"
+        allDayAccessor="allDay"
+        date={date}
+        defaultDate={defaultDate}
+        view={view ? VIEW_BY_MODE[view] : undefined}
+        defaultView={defaultView ? VIEW_BY_MODE[defaultView] : undefined}
+        views={allowedViews}
+        onSelectEvent={handleSelectEvent}
+        onSelectSlot={handleSelectSlot}
+        onNavigate={onNavigate}
+        onView={handleViewChange}
+        selectable={selectable}
+        style={{ height: "100%", minHeight }}
+      />
+    </div>
+  )
+}

package/src/components/calendar/index.ts

@@ -0,0 +1,13 @@
+export { CalendarView } from "./calendar-view"
+export type {
+  CalendarEvent,
+  CalendarViewMode,
+  CalendarViewProps,
+} from "./calendar-view"
+
+export { UpcomingMeetings } from "./upcoming-meetings"
+export type {
+  UpcomingMeeting,
+  UpcomingMeetingStatus,
+  UpcomingMeetingsProps,
+} from "./upcoming-meetings"

package/src/components/calendar/upcoming-meetings.tsx

@@ -0,0 +1,211 @@
+"use client"
+
+/**
+ * UpcomingMeetings — sidebar/widget listing the next N meetings with status,
+ * date, time, and an optional join-link.
+ *
+ * Pure presentational. The consumer owns the data fetch + filtering — pass
+ * the already-filtered, already-sorted meetings via the `meetings` prop. This
+ * keeps the component decoupled from any specific API client or data shape
+ * beyond the small interface declared below.
+ *
+ * lifecycle:calendar-ui (raise-simpli-azc)
+ */
+
+import * as React from "react"
+import { CalendarDays, Clock, ExternalLink, Plus } from "lucide-react"
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card"
+import { Button } from "../ui/button"
+import { cn } from "../../utils"
+
+export type UpcomingMeetingStatus = "pending" | "confirmed" | "cancelled" | "completed"
+
+export interface UpcomingMeeting {
+  id: string | number
+  title: string
+  /** ISO 8601 timestamp string */
+  scheduled_at: string
+  status: UpcomingMeetingStatus
+  investor_name?: string
+  investor_email?: string
+  meeting_link?: string
+}
+
+export interface UpcomingMeetingsProps {
+  meetings: UpcomingMeeting[]
+  /** Whether the list is still loading. Renders skeletons. */
+  loading?: boolean
+  /** Optional click handler when a meeting row is clicked (whole row). */
+  onMeetingClick?: (meeting: UpcomingMeeting) => void
+  /** Optional URL for the "View all" header link. Hidden if absent. */
+  viewAllHref?: string
+  /** Optional click handler for the "View all" header link. Used instead of href if provided. */
+  onViewAll?: () => void
+  /** Optional click handler for the empty-state "Schedule one" CTA. Hidden if absent. */
+  onSchedule?: () => void
+  /** Custom class name for the outer Card. */
+  className?: string
+  /** Title shown in the card header. Defaults to "Upcoming Meetings". */
+  title?: string
+  /** Number of skeleton rows to show while loading. Defaults to 3. */
+  loadingRowCount?: number
+}
+
+const STATUS_BADGE: Record<UpcomingMeetingStatus, { label: string; className: string }> = {
+  pending: { label: "Pending", className: "bg-yellow-100 text-yellow-800" },
+  confirmed: { label: "Confirmed", className: "bg-green-100 text-green-800" },
+  cancelled: { label: "Cancelled", className: "bg-red-100 text-red-800" },
+  completed: { label: "Completed", className: "bg-gray-100 text-gray-800" },
+}
+
+function formatDate(isoStr: string): string {
+  return new Date(isoStr).toLocaleDateString("en-US", {
+    weekday: "short",
+    month: "short",
+    day: "numeric",
+  })
+}
+
+function formatTime(isoStr: string): string {
+  return new Date(isoStr).toLocaleTimeString("en-US", {
+    hour: "2-digit",
+    minute: "2-digit",
+  })
+}
+
+/**
+ * @example
+ * <UpcomingMeetings
+ *   meetings={upcoming}
+ *   loading={isLoading}
+ *   viewAllHref="/calendar"
+ *   onSchedule={() => setShowSchedule(true)}
+ * />
+ */
+export function UpcomingMeetings({
+  meetings,
+  loading = false,
+  onMeetingClick,
+  viewAllHref,
+  onViewAll,
+  onSchedule,
+  className,
+  title = "Upcoming Meetings",
+  loadingRowCount = 3,
+}: UpcomingMeetingsProps) {
+  return (
+    <Card className={className}>
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-sm font-semibold flex items-center gap-2">
+            <CalendarDays className="h-4 w-4" />
+            {title}
+          </CardTitle>
+          {(viewAllHref || onViewAll) && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 text-xs"
+              asChild={!!viewAllHref && !onViewAll}
+              onClick={onViewAll}
+            >
+              {viewAllHref && !onViewAll ? <a href={viewAllHref}>View all</a> : <span>View all</span>}
+            </Button>
+          )}
+        </div>
+      </CardHeader>
+
+      <CardContent className="pt-0">
+        {loading ? (
+          <div className="space-y-2">
+            {Array.from({ length: loadingRowCount }).map((_, i) => (
+              <div key={i} className="h-14 bg-muted animate-pulse rounded-md" />
+            ))}
+          </div>
+        ) : meetings.length === 0 ? (
+          <div className="text-center py-6 text-muted-foreground">
+            <CalendarDays className="h-8 w-8 mx-auto mb-2 opacity-40" />
+            <p className="text-xs">No upcoming meetings</p>
+            {onSchedule && (
+              <Button variant="outline" size="sm" className="mt-3 h-7 text-xs" onClick={onSchedule}>
+                <Plus className="mr-1 h-3 w-3" />
+                Schedule one
+              </Button>
+            )}
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {meetings.map(m => {
+              const badge = STATUS_BADGE[m.status]
+              const interactive = !!onMeetingClick
+              return (
+                <div
+                  key={m.id}
+                  role={interactive ? "button" : undefined}
+                  tabIndex={interactive ? 0 : undefined}
+                  onClick={interactive ? () => onMeetingClick(m) : undefined}
+                  onKeyDown={
+                    interactive
+                      ? e => {
+                          if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault()
+                            onMeetingClick(m)
+                          }
+                        }
+                      : undefined
+                  }
+                  className={cn(
+                    "border rounded-lg p-2.5 space-y-1 transition-colors",
+                    interactive && "hover:bg-muted/40 cursor-pointer",
+                  )}
+                >
+                  <div className="flex items-start justify-between gap-2">
+                    <p className="font-medium text-xs leading-tight line-clamp-1">{m.title}</p>
+                    <span
+                      className={cn(
+                        "text-[10px] px-1.5 py-0.5 rounded font-medium whitespace-nowrap shrink-0",
+                        badge.className,
+                      )}
+                    >
+                      {badge.label}
+                    </span>
+                  </div>
+
+                  {(m.investor_name || m.investor_email) && (
+                    <p className="text-[11px] text-muted-foreground truncate">
+                      {m.investor_name || m.investor_email}
+                    </p>
+                  )}
+
+                  <div className="flex items-center gap-3 text-[11px] text-muted-foreground">
+                    <span className="flex items-center gap-1">
+                      <CalendarDays className="h-3 w-3" />
+                      {formatDate(m.scheduled_at)}
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <Clock className="h-3 w-3" />
+                      {formatTime(m.scheduled_at)}
+                    </span>
+                  </div>
+
+                  {m.meeting_link && (
+                    <a
+                      href={m.meeting_link}
+                      target="_blank"
+                      rel="noreferrer"
+                      onClick={e => e.stopPropagation()}
+                      className="flex items-center gap-1 text-[11px] text-primary hover:underline"
+                    >
+                      <ExternalLink className="h-3 w-3" />
+                      Join
+                    </a>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

package/src/components/enrichment/ApolloEnrichButton.tsx

@@ -0,0 +1,280 @@
+'use client'
+
+import * as React from 'react'
+import { Sparkles, AlertCircle, CheckCircle2, MinusCircle } from 'lucide-react'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+} from '../ui/dialog'
+
+/**
+ * Minimal subset of the API client surface this component depends on.
+ * Lets consumers pass either the full `EnrichmentApi` from `@startsimpli/api`
+ * or a custom adapter — keeps this component decoupled from the singleton.
+ */
+export interface ApolloEnrichmentClient {
+  enrichApollo(contactIds: string[]): Promise<ApolloEnrichmentSummary>
+}
+
+/** Mirrors `ApolloEnrichmentSummary` from @startsimpli/api. */
+export interface ApolloEnrichmentSummary {
+  total: number
+  enriched: string[]
+  skipped: Array<{ contact_id: string; reason: string }>
+  errors: Array<{ contact_id: string; error: string }>
+  missing: string[]
+}
+
+export interface ApolloEnrichButtonProps {
+  /** Contact ids to enrich. Disabled when empty. */
+  contactIds: string[]
+  /** API client with `enrichApollo`. Pass `api.enrichment` from @startsimpli/api. */
+  enrichmentApi: ApolloEnrichmentClient
+  /** Called once the API call resolves (success or with per-entry errors). */
+  onComplete?: (summary: ApolloEnrichmentSummary) => void
+  /** Called when the dialog is closed (regardless of completion). */
+  onClose?: () => void
+  label?: string
+  size?: 'sm' | 'md'
+  className?: string
+  disabled?: boolean
+}
+
+type Phase =
+  | { kind: 'idle' }
+  | { kind: 'running' }
+  | { kind: 'done'; summary: ApolloEnrichmentSummary }
+  | { kind: 'error'; message: string }
+
+/**
+ * Trigger Apollo enrichment for a set of contacts. Opens a dialog showing
+ * progress + the per-bucket summary (enriched / skipped / errors / missing).
+ *
+ * App-agnostic — works for any consumer that can supply an
+ * `ApolloEnrichmentClient`.
+ */
+export function ApolloEnrichButton({
+  contactIds,
+  enrichmentApi,
+  onComplete,
+  onClose,
+  label = 'Enrich with Apollo',
+  size = 'sm',
+  className = '',
+  disabled = false,
+}: ApolloEnrichButtonProps) {
+  const [open, setOpen] = React.useState(false)
+  const [phase, setPhase] = React.useState<Phase>({ kind: 'idle' })
+
+  const sizeClasses =
+    size === 'sm' ? 'px-3 py-1.5 text-xs' : 'px-4 py-2 text-sm'
+  const iconClasses = size === 'sm' ? 'w-3 h-3' : 'w-4 h-4'
+
+  const isEmpty = contactIds.length === 0
+  const isRunning = phase.kind === 'running'
+  const buttonDisabled = disabled || isEmpty || isRunning
+
+  const handleClick = async () => {
+    setOpen(true)
+    setPhase({ kind: 'running' })
+    try {
+      const summary = await enrichmentApi.enrichApollo(contactIds)
+      setPhase({ kind: 'done', summary })
+      onComplete?.(summary)
+    } catch (err) {
+      setPhase({
+        kind: 'error',
+        message: err instanceof Error ? err.message : 'Enrichment failed',
+      })
+    }
+  }
+
+  const handleOpenChange = (next: boolean) => {
+    setOpen(next)
+    if (!next) {
+      onClose?.()
+      // Reset phase after the dialog finishes closing so the next click
+      // starts fresh, but keep the result visible until then.
+      setTimeout(() => setPhase({ kind: 'idle' }), 200)
+    }
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={handleClick}
+        disabled={buttonDisabled}
+        aria-label={label}
+        className={`flex items-center gap-1.5 font-medium text-primary-700 bg-primary-50 hover:bg-primary-100 rounded-md disabled:opacity-50 disabled:cursor-not-allowed transition-colors ${sizeClasses} ${className}`}
+      >
+        <Sparkles className={iconClasses} />
+        {isRunning ? 'Enriching…' : label}
+        {!isEmpty && (
+          <span className="ml-1 text-[0.65rem] opacity-75">
+            ({contactIds.length})
+          </span>
+        )}
+      </button>
+
+      <Dialog open={open} onOpenChange={handleOpenChange}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Apollo enrichment</DialogTitle>
+            <DialogDescription>
+              {phase.kind === 'running'
+                ? `Enriching ${contactIds.length} contact${contactIds.length === 1 ? '' : 's'}…`
+                : phase.kind === 'done'
+                ? 'Apollo enrichment complete.'
+                : phase.kind === 'error'
+                ? 'Apollo enrichment failed.'
+                : ''}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-3 py-2">
+            {phase.kind === 'running' && (
+              <div role="status" aria-live="polite" className="text-sm text-gray-600">
+                Reaching Apollo for {contactIds.length} contact
+                {contactIds.length === 1 ? '' : 's'}. This may take a few seconds.
+              </div>
+            )}
+
+            {phase.kind === 'error' && (
+              <div role="alert" className="flex items-start gap-2 text-sm text-red-700">
+                <AlertCircle className="w-4 h-4 mt-0.5 shrink-0" />
+                <span>{phase.message}</span>
+              </div>
+            )}
+
+            {phase.kind === 'done' && (
+              <ApolloEnrichmentSummaryView summary={phase.summary} />
+            )}
+          </div>
+
+          <DialogFooter>
+            <button
+              type="button"
+              onClick={() => handleOpenChange(false)}
+              className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-md"
+            >
+              {phase.kind === 'running' ? 'Hide' : 'Done'}
+            </button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
+
+function ApolloEnrichmentSummaryView({
+  summary,
+}: {
+  summary: ApolloEnrichmentSummary
+}) {
+  const enrichedCount = summary.enriched.length
+  const skippedCount = summary.skipped.length
+  const errorCount = summary.errors.length
+  const missingCount = summary.missing.length
+
+  return (
+    <div className="space-y-3 text-sm">
+      <div className="grid grid-cols-2 gap-2">
+        <Stat
+          icon={<CheckCircle2 className="w-4 h-4 text-green-600" />}
+          label="Enriched"
+          value={enrichedCount}
+        />
+        <Stat
+          icon={<MinusCircle className="w-4 h-4 text-gray-500" />}
+          label="Skipped"
+          value={skippedCount}
+        />
+        <Stat
+          icon={<AlertCircle className="w-4 h-4 text-red-600" />}
+          label="Errored"
+          value={errorCount}
+        />
+        <Stat
+          icon={<MinusCircle className="w-4 h-4 text-amber-600" />}
+          label="Not accessible"
+          value={missingCount}
+        />
+      </div>
+
+      {summary.skipped.length > 0 && (
+        <DetailsList
+          title="Skipped reasons"
+          items={summary.skipped.map((s) => ({
+            id: s.contact_id,
+            text: s.reason,
+          }))}
+        />
+      )}
+      {summary.errors.length > 0 && (
+        <DetailsList
+          title="Errors"
+          items={summary.errors.map((e) => ({
+            id: e.contact_id,
+            text: e.error,
+          }))}
+          tone="error"
+        />
+      )}
+    </div>
+  )
+}
+
+function Stat({
+  icon,
+  label,
+  value,
+}: {
+  icon: React.ReactNode
+  label: string
+  value: number
+}) {
+  return (
+    <div className="flex items-center gap-2 px-3 py-2 bg-gray-50 rounded-md">
+      {icon}
+      <div>
+        <div className="text-xs text-gray-500">{label}</div>
+        <div className="text-sm font-medium">{value}</div>
+      </div>
+    </div>
+  )
+}
+
+function DetailsList({
+  title,
+  items,
+  tone = 'neutral',
+}: {
+  title: string
+  items: Array<{ id: string; text: string }>
+  tone?: 'neutral' | 'error'
+}) {
+  const toneClasses =
+    tone === 'error'
+      ? 'border-red-200 bg-red-50 text-red-800'
+      : 'border-gray-200 bg-gray-50 text-gray-800'
+  return (
+    <details className={`border rounded-md ${toneClasses}`}>
+      <summary className="px-3 py-2 text-xs font-medium cursor-pointer">
+        {title} ({items.length})
+      </summary>
+      <ul className="px-3 py-2 space-y-1 max-h-40 overflow-auto text-xs">
+        {items.map((item, i) => (
+          <li key={`${item.id}-${i}`} className="font-mono">
+            <span className="opacity-50">{item.id.slice(0, 8)}…</span>{' '}
+            <span className="font-sans">{item.text}</span>
+          </li>
+        ))}
+      </ul>
+    </details>
+  )
+}

package/src/components/enrichment/__tests__/ApolloEnrichButton.test.tsx

@@ -0,0 +1,153 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import {
+  ApolloEnrichButton,
+  type ApolloEnrichmentClient,
+  type ApolloEnrichmentSummary,
+} from '../ApolloEnrichButton'
+
+function makeClient(
+  resolveWith: ApolloEnrichmentSummary | Promise<ApolloEnrichmentSummary> = {
+    total: 0,
+    enriched: [],
+    skipped: [],
+    errors: [],
+    missing: [],
+  },
+): ApolloEnrichmentClient & { enrichApollo: jest.Mock } {
+  const enrichApollo = jest
+    .fn()
+    .mockReturnValue(
+      resolveWith instanceof Promise ? resolveWith : Promise.resolve(resolveWith),
+    )
+  return { enrichApollo }
+}
+
+
+describe('ApolloEnrichButton', () => {
+  it('renders the button label and contact count', () => {
+    const client = makeClient()
+    render(
+      <ApolloEnrichButton contactIds={['c-1', 'c-2', 'c-3']} enrichmentApi={client} />,
+    )
+    expect(screen.getByText(/Enrich with Apollo/i)).toBeInTheDocument()
+    expect(screen.getByText('(3)')).toBeInTheDocument()
+  })
+
+  it('disables the button when no contactIds', () => {
+    const client = makeClient()
+    render(<ApolloEnrichButton contactIds={[]} enrichmentApi={client} />)
+    const btn = screen.getByRole('button', { name: /Enrich with Apollo/i })
+    expect(btn).toBeDisabled()
+  })
+
+  it('disables the button when disabled=true', () => {
+    const client = makeClient()
+    render(
+      <ApolloEnrichButton contactIds={['c-1']} enrichmentApi={client} disabled />,
+    )
+    expect(screen.getByRole('button', { name: /Enrich with Apollo/i })).toBeDisabled()
+  })
+
+  it('opens dialog and calls enrichApollo with contactIds on click', async () => {
+    const summary: ApolloEnrichmentSummary = {
+      total: 2,
+      enriched: ['c-1', 'c-2'],
+      skipped: [],
+      errors: [],
+      missing: [],
+    }
+    const client = makeClient(summary)
+    render(
+      <ApolloEnrichButton contactIds={['c-1', 'c-2']} enrichmentApi={client} />,
+    )
+    fireEvent.click(screen.getByRole('button', { name: /Enrich with Apollo/i }))
+
+    expect(client.enrichApollo).toHaveBeenCalledWith(['c-1', 'c-2'])
+
+    await waitFor(() => {
+      expect(screen.getByText(/Apollo enrichment complete/i)).toBeInTheDocument()
+    })
+  })
+
+  it('shows skipped reasons in the summary', async () => {
+    const summary: ApolloEnrichmentSummary = {
+      total: 1,
+      enriched: [],
+      skipped: [{ contact_id: 'c-1', reason: 'insufficient query fields' }],
+      errors: [],
+      missing: [],
+    }
+    const client = makeClient(summary)
+    render(<ApolloEnrichButton contactIds={['c-1']} enrichmentApi={client} />)
+    fireEvent.click(screen.getByRole('button', { name: /Enrich with Apollo/i }))
+
+    await waitFor(() => {
+      expect(screen.getByText(/Skipped reasons/i)).toBeInTheDocument()
+      expect(screen.getByText(/insufficient query fields/i)).toBeInTheDocument()
+    })
+  })
+
+  it('shows errors in the summary', async () => {
+    const summary: ApolloEnrichmentSummary = {
+      total: 1,
+      enriched: [],
+      skipped: [],
+      errors: [{ contact_id: 'c-1', error: 'Apollo error: 401' }],
+      missing: [],
+    }
+    const client = makeClient(summary)
+    render(<ApolloEnrichButton contactIds={['c-1']} enrichmentApi={client} />)
+    fireEvent.click(screen.getByRole('button', { name: /Enrich with Apollo/i }))
+
+    await waitFor(() => {
+      expect(screen.getByText(/Errored/i)).toBeInTheDocument()
+      expect(screen.getByText(/Apollo error: 401/i)).toBeInTheDocument()
+    })
+  })
+
+  it('shows error alert when API call rejects', async () => {
+    const client = makeClient(Promise.reject(new Error('network down')))
+    render(<ApolloEnrichButton contactIds={['c-1']} enrichmentApi={client} />)
+    fireEvent.click(screen.getByRole('button', { name: /Enrich with Apollo/i }))
+
+    await waitFor(() => {
+      expect(screen.getByRole('alert')).toHaveTextContent(/network down/i)
+    })
+  })
+
+  it('calls onComplete with the summary', async () => {
+    const summary: ApolloEnrichmentSummary = {
+      total: 1,
+      enriched: ['c-1'],
+      skipped: [],
+      errors: [],
+      missing: [],
+    }
+    const client = makeClient(summary)
+    const onComplete = jest.fn()
+    render(
+      <ApolloEnrichButton
+        contactIds={['c-1']}
+        enrichmentApi={client}
+        onComplete={onComplete}
+      />,
+    )
+    fireEvent.click(screen.getByRole('button', { name: /Enrich with Apollo/i }))
+
+    await waitFor(() => {
+      expect(onComplete).toHaveBeenCalledWith(summary)
+    })
+  })
+
+  it('honors a custom label', () => {
+    const client = makeClient()
+    render(
+      <ApolloEnrichButton
+        contactIds={['c-1']}
+        enrichmentApi={client}
+        label="Custom Label"
+      />,
+    )
+    expect(screen.getByRole('button', { name: /Custom Label/i })).toBeInTheDocument()
+  })
+})

package/src/components/enrichment/index.ts

@@ -6,3 +6,10 @@ export type { EnrichButtonProps } from './EnrichButton'
 
 export { EnrichmentProgress } from './EnrichmentProgress'
 export type { EnrichmentProgressProps, QueueStatus as EnrichmentQueueStatus } from './EnrichmentProgress'
+
+export { ApolloEnrichButton } from './ApolloEnrichButton'
+export type {
+  ApolloEnrichButtonProps,
+  ApolloEnrichmentClient,
+  ApolloEnrichmentSummary,
+} from './ApolloEnrichButton'

package/src/components/index.ts

@@ -110,6 +110,9 @@ export * from './lists'
 // Pipeline components (StageTransitionModal)
 export * from './pipeline'
 
+// Calendar (month/week/day event grid wrapping react-big-calendar)
+export * from './calendar'
+
 // Activity components (timeline, quick log, log dialog)
 export { ActivityTimeline } from './ActivityTimeline'
 export type { ActivityTimelineProps, ActivityTimelineItem } from './ActivityTimeline'