@fayz-ai/plugin-agenda 0.8.1 → 0.8.3

package/src/index.ts

@@ -22,7 +22,7 @@ export function createAgendaPlugin(options?: AgendaPluginOptions): PluginManifes
   const config = resolveConfig(options)
   registerTranslations(agendaLocales)
   const provider = options?.dataProvider ?? createSafeDataProvider(
-    () => createSupabaseAgendaProvider(),
+    () => createSupabaseAgendaProvider({ professionalKind: config.professionalKind }),
     () => createMockAgendaProvider(),
   )
   const store = createAgendaStore(provider, options?.financialBridge)
@@ -66,6 +66,49 @@ export function createAgendaPlugin(options?: AgendaPluginOptions): PluginManifes
       { id: 'appointments', label: config.labels.pageTitle, group: config.labels.pageTitle },
       { id: 'agenda.schedules', label: 'Schedule Management', group: config.labels.pageTitle },
     ],
+    // Recurring monthly quota — counts appointment rows created this month.
+    // (Clients/patients are the app's CRUD entity, so their cap is declared by
+    // the app's EntityDef.limitKey, not here.)
+    declaredLimits: [
+      { key: 'bookings_month', label: 'Appointments this month', table: 'appointments', period: 'month' },
+    ],
+    queryEntities: [
+      {
+        key: 'agenda:appointments',
+        entity: {
+          name: 'Appointment',
+          namePlural: 'Appointments',
+          icon: 'Calendar',
+          permission: { feature: 'appointments', action: 'read' },
+          // Keys are the PROVIDER's output shape (camelCase) — what filters/
+          // dateField/groupBy match against, not the raw DB columns.
+          fields: [
+            { key: 'startsAt', label: 'Starts at', type: 'text' },
+            { key: 'endsAt', label: 'Ends at', type: 'text' },
+            { key: 'status', label: 'Status', type: 'text' },
+            { key: 'clientName', label: 'Client', type: 'text', searchable: true },
+            { key: 'professionalName', label: 'Professional', type: 'text', searchable: true },
+            { key: 'orderTotal', label: 'Order total', type: 'number' },
+            { key: 'totalDurationMinutes', label: 'Duration (min)', type: 'number' },
+            { key: 'createdAt', label: 'Created at', type: 'text' },
+          ],
+          data: {
+            table: 'v_appointments',
+            tenantScoped: true,
+            searchColumns: ['client_name', 'professional_name'],
+          },
+        },
+      },
+    ],
+    declaredRpcs: [
+      {
+        name: 'agent_agenda_create_appointment',
+        kind: 'write' as const,
+        description:
+          'Guarded appointment create: agent_guard (role→plan→bookings_month cap), working hours, race-safe conflict check, audited.',
+        audits: true,
+      },
+    ],
 
     navigation: [
       {
@@ -83,6 +126,8 @@ export function createAgendaPlugin(options?: AgendaPluginOptions): PluginManifes
         path: '/agenda',
         component: PageComponent,
         permission: { feature: 'appointments', action: 'read' as const },
+        // Matches the ref agent_agenda_create_appointment returns.
+        entityRoutes: ['schedule:appointment'],
       },
     ],
 
@@ -113,20 +158,23 @@ export function createAgendaPlugin(options?: AgendaPluginOptions): PluginManifes
       {
         id: 'agenda.create-appointment',
         name: 'createAppointment',
-        description: 'Creates a new appointment for a client with a specific professional and service.',
+        description:
+          'Creates a new appointment. Takes IDS, not names: resolve the client/service/professional ids first via findAnything/searchRecords, then call this with an ISO start time in the tenant timezone. The user confirms before booking.',
         icon: 'CalendarPlus',
         mode: 'persist' as const,
+        limitKey: 'bookings_month',
+        execution: { plane: 'server' as const, kind: 'rpc' as const, rpc: 'agent_agenda_create_appointment' },
         category: 'Scheduling',
         parameters: {
           type: 'object' as const,
           properties: {
-            client: { type: 'string' as const, description: 'Client name' },
-            professional: { type: 'string' as const, description: 'Professional name' },
-            service: { type: 'string' as const, description: 'Service name' },
-            date: { type: 'string' as const, description: 'Date (YYYY-MM-DD)' },
-            time: { type: 'string' as const, description: 'Time (HH:MM)' },
+            client_id: { type: 'string' as const, description: 'Client id (from a search)' },
+            service_id: { type: 'string' as const, description: 'Service id (from a search)' },
+            professional_id: { type: 'string' as const, description: 'Professional id (optional — auto-assigned when omitted)' },
+            starts_at: { type: 'string' as const, description: "LOCAL date-time of the business, NO timezone suffix — e.g. '2026-07-27T10:00' for 10h. The system applies the tenant timezone." },
+            notes: { type: 'string' as const, description: 'Optional notes' },
           },
-          required: ['client', 'professional', 'service', 'date', 'time'],
+          required: ['client_id', 'service_id', 'starts_at'],
         },
         suggestions: [
           { label: 'Book a haircut for Sarah tomorrow at 10am' },

package/src/integrations/google-calendar/components/CalendarColorDot.tsx

@@ -0,0 +1,23 @@
+// A small round swatch tinted with a Google calendar's backgroundColor.
+//
+// Google's calendarList entries carry a `backgroundColor` hex; we render it as a
+// dot next to the calendar summary in the de-para list and as the leading dot of
+// the origin badge in the import wizard. Falls back to the muted border when a
+// calendar has no color (rare, e.g. some shared calendars).
+import React from 'react'
+
+export function CalendarColorDot({
+  color,
+  className = '',
+}: {
+  color?: string | null
+  className?: string
+}) {
+  return (
+    <span
+      className={`inline-block h-2.5 w-2.5 shrink-0 rounded-full border border-black/10 ${className}`}
+      style={{ backgroundColor: color || 'hsl(var(--muted-foreground))' }}
+      aria-hidden
+    />
+  )
+}

package/src/integrations/google-calendar/components/ChannelMappingList.tsx

@@ -0,0 +1,329 @@
+// De-para (mapping) list — one row per Google calendar.
+//
+// Reads the user's Google calendars (listGoogleCalendars) and this tenant's
+// existing channels (listChannels), joins them by google_calendar_id, and lets
+// the user, per calendar:
+//   • toggle sync on/off            → creates/updates the channel (is_active)
+//   • pick a direction              → Two-way / Import only / Export only / Off
+//   • pick a target                 → Whole agenda / Professional / Service / Location
+//   • pick an import mode           → Block / Appointment
+// Every change is persisted immediately via saveChannel (RLS upsert on
+// integration_id + google_calendar_id), snapshotting the calendar summary+color
+// onto the channel. Target ids come from real host lookups (useAgendaLookups);
+// if a lookup is empty for the tenant the row degrades to a raw uuid input.
+import React, { useCallback, useEffect, useState } from 'react'
+import { Loader2, AlertCircle, RefreshCw } from 'lucide-react'
+import {
+  Button,
+  Checkbox,
+  Badge,
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+  toast,
+} from '@fayz-ai/ui'
+import type { GoogleCalendarProvider } from '../data/supabase'
+import type {
+  CalendarChannel,
+  ChannelDirection,
+  ChannelTargetKind,
+  ChannelImportMode,
+  GoogleCalendarListEntry,
+} from '../types'
+import { CalendarColorDot } from './CalendarColorDot'
+import { useAgendaLookups, optionsForKind } from './useAgendaLookups'
+
+const DIRECTION_LABELS: Record<ChannelDirection, string> = {
+  bidirectional: 'Two-way',
+  inbound: 'Import only',
+  outbound: 'Export only',
+  off: 'Off',
+}
+const IMPORT_MODE_LABELS: Record<ChannelImportMode, string> = {
+  block: 'Block',
+  appointment: 'Appointment',
+}
+// 'agenda' is the UI sentinel for the whole-agenda target (target_kind = null).
+const TARGET_KIND_LABELS: Record<'agenda' | 'assignee' | 'service' | 'location', string> = {
+  agenda: 'Whole agenda',
+  assignee: 'Professional',
+  service: 'Service',
+  location: 'Location',
+}
+const NO_TARGET = '__none__'
+
+/** Defaults for a freshly-enabled calendar (mirror the migration defaults). */
+function defaultChannel(): {
+  direction: ChannelDirection
+  targetKind: ChannelTargetKind
+  targetId: string | null
+  importMode: ChannelImportMode
+} {
+  return { direction: 'bidirectional', targetKind: null, targetId: null, importMode: 'block' }
+}
+
+export function ChannelMappingList({
+  provider,
+  onChannelsChange,
+}: {
+  provider: GoogleCalendarProvider
+  /** Bubble the current channels up so the parent can gate the import wizard. */
+  onChannelsChange?: (channels: CalendarChannel[]) => void
+}) {
+  const [calendars, setCalendars] = useState<GoogleCalendarListEntry[]>([])
+  const [byGcalId, setByGcalId] = useState<Record<string, CalendarChannel>>({})
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [savingId, setSavingId] = useState<string | null>(null)
+
+  const { lookups, hasAny: hasLookups } = useAgendaLookups(true)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const [cals, channels] = await Promise.all([
+        provider.listGoogleCalendars(),
+        provider.listChannels(),
+      ])
+      setCalendars(cals)
+      const map: Record<string, CalendarChannel> = {}
+      for (const ch of channels) map[ch.googleCalendarId] = ch
+      setByGcalId(map)
+      onChannelsChange?.(channels)
+    } catch (e: any) {
+      setError(e?.message ?? 'Could not load Google calendars')
+    } finally {
+      setLoading(false)
+    }
+  }, [provider, onChannelsChange])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  /** Persist a patch for one calendar, then refresh channels (keeps ids correct). */
+  const persist = useCallback(
+    async (
+      cal: GoogleCalendarListEntry,
+      patch: {
+        direction?: ChannelDirection
+        targetKind?: ChannelTargetKind
+        targetId?: string | null
+        importMode?: ChannelImportMode
+        isActive?: boolean
+      },
+    ) => {
+      const existing = byGcalId[cal.id]
+      const base = existing ?? { ...defaultChannel(), isActive: true }
+      setSavingId(cal.id)
+      try {
+        await provider.saveChannel({
+          id: existing?.id,
+          googleCalendarId: cal.id,
+          summary: cal.summary,
+          color: cal.backgroundColor ?? null,
+          direction: patch.direction ?? base.direction,
+          targetKind: patch.targetKind !== undefined ? patch.targetKind : base.targetKind,
+          targetId: patch.targetId !== undefined ? patch.targetId : base.targetId ?? null,
+          importMode: patch.importMode ?? base.importMode,
+          isActive: patch.isActive !== undefined ? patch.isActive : base.isActive,
+        })
+        const channels = await provider.listChannels()
+        const map: Record<string, CalendarChannel> = {}
+        for (const ch of channels) map[ch.googleCalendarId] = ch
+        setByGcalId(map)
+        onChannelsChange?.(channels)
+      } catch (e: any) {
+        toast.error(e?.message ?? 'Could not save calendar mapping')
+      } finally {
+        setSavingId(null)
+      }
+    },
+    [byGcalId, provider, onChannelsChange],
+  )
+
+  if (loading) {
+    return (
+      <div className="py-6 text-center text-sm text-muted-foreground">
+        <Loader2 className="h-4 w-4 animate-spin inline" />
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="rounded-md border border-warning/40 bg-warning-soft/40 px-3 py-3 text-sm">
+        <div className="flex items-center gap-2 text-warning-soft-foreground">
+          <AlertCircle className="h-4 w-4" /> {error}
+        </div>
+        <Button variant="outline" size="sm" className="mt-2" onClick={() => void load()}>
+          <RefreshCw className="h-3.5 w-3.5" /> Retry
+        </Button>
+      </div>
+    )
+  }
+
+  if (calendars.length === 0) {
+    return (
+      <p className="py-6 text-center text-sm text-muted-foreground">
+        No Google calendars found on this account.
+      </p>
+    )
+  }
+
+  return (
+    <div className="rounded-md border divide-y">
+      {calendars.map((cal) => {
+        const ch = byGcalId[cal.id]
+        const active = !!ch?.isActive
+        const saving = savingId === cal.id
+        const direction: ChannelDirection = ch?.direction ?? 'bidirectional'
+        const targetKind: ChannelTargetKind = ch?.targetKind ?? null
+        const importMode: ChannelImportMode = ch?.importMode ?? 'block'
+        // Import mode only matters when Google can write into the agenda.
+        const canImport = direction === 'inbound' || direction === 'bidirectional'
+        const kindOptions = optionsForKind(lookups, targetKind)
+
+        return (
+          <div key={cal.id} className="px-3 py-3 space-y-3">
+            <div className="flex items-center gap-2.5">
+              <Checkbox
+                checked={active}
+                disabled={saving}
+                onChange={(next) => void persist(cal, { isActive: next })}
+              />
+              <CalendarColorDot color={cal.backgroundColor} />
+              <span className="text-sm font-medium truncate">{cal.summary}</span>
+              {cal.primary && (
+                <Badge variant="outline" className="shrink-0">
+                  Primary
+                </Badge>
+              )}
+              {saving && <Loader2 className="ml-auto h-3.5 w-3.5 animate-spin text-muted-foreground" />}
+            </div>
+
+            {active && (
+              <div className="grid gap-2 pl-[26px] sm:grid-cols-2 lg:grid-cols-4">
+                {/* Direction */}
+                <label className="block">
+                  <span className="text-[11px] font-medium text-muted-foreground">Direction</span>
+                  <Select
+                    value={direction}
+                    onValueChange={(v) => void persist(cal, { direction: v as ChannelDirection })}
+                  >
+                    <SelectTrigger className="mt-1 h-8 text-sm">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {(Object.keys(DIRECTION_LABELS) as ChannelDirection[]).map((d) => (
+                        <SelectItem key={d} value={d}>
+                          {DIRECTION_LABELS[d]}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </label>
+
+                {/* Target kind */}
+                <label className="block">
+                  <span className="text-[11px] font-medium text-muted-foreground">Target</span>
+                  <Select
+                    value={targetKind ?? 'agenda'}
+                    onValueChange={(v) =>
+                      void persist(cal, {
+                        targetKind: v === 'agenda' ? null : (v as ChannelTargetKind),
+                        // Reset the id whenever the kind changes.
+                        targetId: null,
+                      })
+                    }
+                  >
+                    <SelectTrigger className="mt-1 h-8 text-sm">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {(Object.keys(TARGET_KIND_LABELS) as Array<keyof typeof TARGET_KIND_LABELS>).map(
+                        (k) => (
+                          <SelectItem key={k} value={k}>
+                            {TARGET_KIND_LABELS[k]}
+                          </SelectItem>
+                        ),
+                      )}
+                    </SelectContent>
+                  </Select>
+                </label>
+
+                {/* Target id — real picker when we have lookups, uuid input otherwise */}
+                {targetKind && (
+                  <label className="block">
+                    <span className="text-[11px] font-medium text-muted-foreground">
+                      {TARGET_KIND_LABELS[targetKind]}
+                    </span>
+                    {kindOptions.length > 0 ? (
+                      <Select
+                        value={ch?.targetId ?? NO_TARGET}
+                        onValueChange={(v) =>
+                          void persist(cal, { targetId: v === NO_TARGET ? null : v })
+                        }
+                      >
+                        <SelectTrigger className="mt-1 h-8 text-sm">
+                          <SelectValue placeholder="Select…" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {kindOptions.map((o) => (
+                            <SelectItem key={o.id} value={o.id}>
+                              {o.name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    ) : (
+                      <input
+                        defaultValue={ch?.targetId ?? ''}
+                        placeholder="uuid"
+                        onBlur={(e) =>
+                          void persist(cal, { targetId: e.target.value.trim() || null })
+                        }
+                        className="w-full mt-1 h-8 rounded-input border border-input bg-card px-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+                      />
+                    )}
+                  </label>
+                )}
+
+                {/* Import mode — only when inbound */}
+                {canImport && (
+                  <label className="block">
+                    <span className="text-[11px] font-medium text-muted-foreground">Import as</span>
+                    <Select
+                      value={importMode}
+                      onValueChange={(v) => void persist(cal, { importMode: v as ChannelImportMode })}
+                    >
+                      <SelectTrigger className="mt-1 h-8 text-sm">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {(Object.keys(IMPORT_MODE_LABELS) as ChannelImportMode[]).map((m) => (
+                          <SelectItem key={m} value={m}>
+                            {IMPORT_MODE_LABELS[m]}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </label>
+                )}
+              </div>
+            )}
+          </div>
+        )
+      })}
+      {!hasLookups && (
+        <p className="px-3 py-2 text-[11px] text-muted-foreground">
+          No professional/service/location lookups available — target ids fall back to manual uuid
+          entry.
+        </p>
+      )}
+    </div>
+  )
+}

package/src/integrations/google-calendar/components/ImportEventsWizard.tsx

@@ -0,0 +1,215 @@
+// Import wizard — pull FUTURE Google events into the agenda as blocks/appointments.
+//
+// listExternalEvents() returns events on the active inbound channels that are not
+// yet linked to an appointment. The user ticks the ones to bring in and confirms;
+// importEvents() runs them through gcal_import_event (honouring each channel's
+// import_mode + target) and returns a per-item tally {imported, skipped, errors}.
+// Events show their source calendar as a colored badge and an "All-day" badge
+// when applicable; times are formatted pt-BR.
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import { Loader2, CalendarPlus, CheckCircle2, AlertCircle, RefreshCw, X } from 'lucide-react'
+import { Button, Checkbox, Badge, toast } from '@fayz-ai/ui'
+import type { GoogleCalendarProvider } from '../data/supabase'
+import type { CalendarChannel, ExternalEventPreview, ImportEventsResult } from '../types'
+import { CalendarColorDot } from './CalendarColorDot'
+
+/** pt-BR datetime label, all-day aware (date only for all-day events). */
+function formatWhen(ev: ExternalEventPreview): string {
+  const start = new Date(ev.startsAt)
+  if (ev.allDay) {
+    return start.toLocaleDateString('pt-BR', { day: '2-digit', month: 'short', year: 'numeric' })
+  }
+  return start.toLocaleString('pt-BR', {
+    day: '2-digit',
+    month: 'short',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+export function ImportEventsWizard({
+  provider,
+  channels,
+  onClose,
+  onImported,
+}: {
+  provider: GoogleCalendarProvider
+  /** Active channels — used to label each event with its source calendar + color. */
+  channels: CalendarChannel[]
+  onClose: () => void
+  /** Fired after a successful import so the parent can refresh status/history. */
+  onImported?: (result: ImportEventsResult) => void
+}) {
+  const [events, setEvents] = useState<ExternalEventPreview[]>([])
+  const [selected, setSelected] = useState<Set<string>>(new Set())
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [importing, setImporting] = useState(false)
+  const [result, setResult] = useState<ImportEventsResult | null>(null)
+
+  const channelById = useMemo(() => {
+    const m: Record<string, CalendarChannel> = {}
+    for (const c of channels) m[c.id] = c
+    return m
+  }, [channels])
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    setResult(null)
+    try {
+      const rows = await provider.listExternalEvents()
+      setEvents(rows)
+      setSelected(new Set(rows.map((r) => r.eventId)))
+    } catch (e: any) {
+      setError(e?.message ?? 'Could not load upcoming events')
+    } finally {
+      setLoading(false)
+    }
+  }, [provider])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  const toggle = (eventId: string) =>
+    setSelected((prev) => {
+      const next = new Set(prev)
+      if (next.has(eventId)) next.delete(eventId)
+      else next.add(eventId)
+      return next
+    })
+
+  const allSelected = events.length > 0 && selected.size === events.length
+  const toggleAll = () =>
+    setSelected(allSelected ? new Set() : new Set(events.map((e) => e.eventId)))
+
+  async function handleImport() {
+    const items = events
+      .filter((e) => selected.has(e.eventId))
+      .map((e) => ({ channelId: e.channelId, eventId: e.eventId }))
+    if (items.length === 0) return
+    setImporting(true)
+    try {
+      const res = await provider.importEvents(items)
+      setResult(res)
+      onImported?.(res)
+      toast.success(`Imported ${res.imported} · skipped ${res.skipped}`)
+      // Drop imported events from the list so the wizard reflects the new state.
+      await load()
+    } catch (e: any) {
+      toast.error(e?.message ?? 'Import failed')
+    } finally {
+      setImporting(false)
+    }
+  }
+
+  return (
+    <div className="rounded-md border bg-card">
+      <div className="flex items-center gap-2 border-b px-3 py-2">
+        <CalendarPlus className="h-4 w-4 text-muted-foreground" />
+        <h4 className="text-sm font-semibold">Import future events</h4>
+        <button
+          onClick={onClose}
+          className="ml-auto rounded p-1 text-muted-foreground hover:bg-muted/50"
+          aria-label="Close"
+        >
+          <X className="h-3.5 w-3.5" />
+        </button>
+      </div>
+
+      {loading ? (
+        <div className="py-8 text-center text-sm text-muted-foreground">
+          <Loader2 className="h-4 w-4 animate-spin inline" />
+        </div>
+      ) : error ? (
+        <div className="p-3">
+          <div className="flex items-center gap-2 text-sm text-warning-soft-foreground">
+            <AlertCircle className="h-4 w-4" /> {error}
+          </div>
+          <Button variant="outline" size="sm" className="mt-2" onClick={() => void load()}>
+            <RefreshCw className="h-3.5 w-3.5" /> Retry
+          </Button>
+        </div>
+      ) : events.length === 0 ? (
+        <div className="py-8 px-4 text-center space-y-1">
+          <p className="text-sm font-medium">You're all caught up</p>
+          <p className="text-xs text-muted-foreground">
+            No upcoming Google events left to import on your active calendars.
+          </p>
+          {result && (
+            <p className="text-xs text-success">
+              Imported {result.imported} · skipped {result.skipped}
+              {result.errors.length > 0 ? ` · ${result.errors.length} errors` : ''}
+            </p>
+          )}
+        </div>
+      ) : (
+        <>
+          <div className="flex items-center gap-2.5 border-b px-3 py-2">
+            <Checkbox checked={allSelected} onChange={toggleAll} />
+            <span className="text-xs text-muted-foreground">
+              {selected.size} of {events.length} selected
+            </span>
+          </div>
+          <div className="max-h-[320px] overflow-y-auto divide-y">
+            {events.map((ev) => {
+              const ch = channelById[ev.channelId]
+              return (
+                <label
+                  key={ev.eventId}
+                  className="flex items-start gap-2.5 px-3 py-2.5 cursor-pointer hover:bg-muted/30"
+                >
+                  <Checkbox
+                    checked={selected.has(ev.eventId)}
+                    onChange={() => toggle(ev.eventId)}
+                  />
+                  <div className="min-w-0 flex-1 space-y-1">
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm font-medium truncate">
+                        {ev.summary || '(no title)'}
+                      </span>
+                      {ev.allDay && (
+                        <Badge variant="secondary" className="shrink-0">
+                          All-day
+                        </Badge>
+                      )}
+                    </div>
+                    <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                      <span>{formatWhen(ev)}</span>
+                      <span className="inline-flex items-center gap-1">
+                        <CalendarColorDot color={ch?.color} />
+                        {ch?.summary ?? ev.calendarId}
+                      </span>
+                    </div>
+                  </div>
+                </label>
+              )
+            })}
+          </div>
+          <div className="flex items-center gap-2 border-t px-3 py-2">
+            {result && (
+              <span className="text-xs text-muted-foreground">
+                Last run: {result.imported} imported
+                {result.errors.length > 0 ? `, ${result.errors.length} errors` : ''}
+              </span>
+            )}
+            <Button
+              size="sm"
+              className="ml-auto"
+              disabled={importing || selected.size === 0}
+              onClick={handleImport}
+            >
+              {importing ? (
+                <Loader2 className="h-3.5 w-3.5 animate-spin" />
+              ) : (
+                <CheckCircle2 className="h-3.5 w-3.5" />
+              )}
+              Import {selected.size > 0 ? selected.size : ''}
+            </Button>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}