@startsimpli/ui 0.4.6 → 0.4.7

package/src/components/enrichment/QualityBadge.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react'
+
+export interface QualityScore {
+  score: number
+  grade: 'A' | 'B' | 'C' | 'D' | 'F'
+}
+
+export interface QualityBadgeProps {
+  quality: QualityScore
+  showScore?: boolean
+}
+
+const GRADE_STYLES: Record<QualityScore['grade'], string> = {
+  A: 'bg-green-100 text-green-800 border-green-200',
+  B: 'bg-blue-100 text-blue-800 border-blue-200',
+  C: 'bg-yellow-100 text-yellow-800 border-yellow-200',
+  D: 'bg-orange-100 text-orange-800 border-orange-200',
+  F: 'bg-red-100 text-red-800 border-red-200',
+}
+
+const GRADE_LABELS: Record<QualityScore['grade'], string> = {
+  A: 'Excellent',
+  B: 'Good',
+  C: 'Fair',
+  D: 'Poor',
+  F: 'Incomplete',
+}
+
+export function QualityBadge({ quality, showScore = false }: QualityBadgeProps) {
+  const { grade, score } = quality
+  const styleClass = GRADE_STYLES[grade]
+  const label = GRADE_LABELS[grade]
+
+  return (
+    <span
+      className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold border ${styleClass}`}
+      title={`Data quality: ${label} (${score}/100)`}
+    >
+      <span>{grade}</span>
+      {showScore && <span className="font-normal opacity-75">({score})</span>}
+    </span>
+  )
+}

package/src/components/enrichment/index.ts

@@ -0,0 +1,8 @@
+export { QualityBadge } from './QualityBadge'
+export type { QualityBadgeProps, QualityScore } from './QualityBadge'
+
+export { EnrichButton } from './EnrichButton'
+export type { EnrichButtonProps } from './EnrichButton'
+
+export { EnrichmentProgress } from './EnrichmentProgress'
+export type { EnrichmentProgressProps, QueueStatus as EnrichmentQueueStatus } from './EnrichmentProgress'

package/src/components/gantt/GanttChart.tsx

@@ -173,8 +173,8 @@ export function GanttChart({
       if (statuses.length > 0 && !statuses.includes(item.status)) return false
       if (categories.length > 0 && (!item.category || !categories.includes(item.category))) return false
       if (dateRange.start || dateRange.end) {
-        const itemEnd = item.end_date ? new Date(item.end_date) : null
-        const itemStart = item.start_date ? new Date(item.start_date) : null
+        const itemEnd = item.endDate ? new Date(item.endDate) : null
+        const itemStart = item.startDate ? new Date(item.startDate) : null
         if (dateRange.start && itemEnd && isBefore(itemEnd, dateRange.start)) return false
         if (dateRange.end && itemStart && isAfter(itemStart, dateRange.end)) return false
       }
@@ -229,16 +229,16 @@ export function GanttChart({
 
       for (const dep of dependencies) {
         if (dep.type === 'blocks') {
-          const parentItem = itemMap.get(dep.from_id)
-          const childItem = itemMap.get(dep.to_id)
+          const parentItem = itemMap.get(dep.fromId)
+          const childItem = itemMap.get(dep.toId)
           if (!parentItem || !childItem) continue
           const parentLevel = getHierarchyLevel(parentItem.title)
           const childLevel = getHierarchyLevel(childItem.title)
-          if (parentLevel > childLevel && !parentMap.has(dep.to_id)) {
-            const children = childrenMap.get(dep.from_id) || []
-            children.push(dep.to_id)
-            childrenMap.set(dep.from_id, children)
-            parentMap.set(dep.to_id, dep.from_id)
+          if (parentLevel > childLevel && !parentMap.has(dep.toId)) {
+            const children = childrenMap.get(dep.fromId) || []
+            children.push(dep.toId)
+            childrenMap.set(dep.fromId, children)
+            parentMap.set(dep.toId, dep.fromId)
           }
         }
       }
@@ -257,8 +257,8 @@ export function GanttChart({
       const parsedRange = parseDateRangeFromTitle(item.title, currentYear)
       if (parsedRange) { dates.set(item.id, parsedRange); continue }
 
-      const startStr = item.start_date
-      const endStr = item.end_date
+      const startStr = item.startDate
+      const endStr = item.endDate
 
       if (startStr && endStr) {
         const s = new Date(startStr)
@@ -271,8 +271,8 @@ export function GanttChart({
       if (endStr) {
         const e = new Date(endStr)
         if (!isNaN(e.getTime())) {
-          const s = item.start_date ? new Date(item.start_date) :
-                    item.created_at ? new Date(item.created_at) : addDays(e, -14)
+          const s = item.startDate ? new Date(item.startDate) :
+                    item.createdAt ? new Date(item.createdAt) : addDays(e, -14)
           dates.set(item.id, { start: startOfDay(s), end: endOfDay(e) }); continue
         }
       }
@@ -284,7 +284,7 @@ export function GanttChart({
         }
       }
 
-      const fallbackStart = item.created_at ? new Date(item.created_at) : now
+      const fallbackStart = item.createdAt ? new Date(item.createdAt) : now
       dates.set(item.id, { start: startOfDay(fallbackStart), end: endOfDay(addDays(fallbackStart, 14)) })
     }
 
@@ -546,15 +546,15 @@ export function GanttChart({
     tasks.forEach((task, index) => taskIndexMap.set(task.item.id, index))
 
     for (const dep of dependencies) {
-      const fromIdx = taskIndexMap.get(dep.from_id)
-      const toIdx = taskIndexMap.get(dep.to_id)
+      const fromIdx = taskIndexMap.get(dep.fromId)
+      const toIdx = taskIndexMap.get(dep.toId)
       if (fromIdx !== undefined && toIdx !== undefined) {
         const fromPos = getBarPosition(tasks[fromIdx], fromIdx)
         const toPos = getBarPosition(tasks[toIdx], toIdx)
         const x1 = fromPos.left + fromPos.width, y1 = fromPos.top + fromPos.height / 2
         const x2 = toPos.left, y2 = toPos.top + toPos.height / 2
         const midX = (x1 + x2) / 2
-        paths.push({ path: `M ${x1} ${y1} C ${midX} ${y1}, ${midX} ${y2}, ${x2} ${y2}`, fromId: dep.from_id, toId: dep.to_id })
+        paths.push({ path: `M ${x1} ${y1} C ${midX} ${y1}, ${midX} ${y2}, ${x2} ${y2}`, fromId: dep.fromId, toId: dep.toId })
       }
     }
     return paths
@@ -856,8 +856,8 @@ export function GanttChart({
                         {item.category}
                       </span>
                     )}
-                    {item.end_date && (
-                      <span className="gantt-board-card-date">{format(new Date(item.end_date), 'MMM d')}</span>
+                    {item.endDate && (
+                      <span className="gantt-board-card-date">{format(new Date(item.endDate), 'MMM d')}</span>
                     )}
                   </div>
                 ))}
@@ -969,11 +969,11 @@ export function GanttChart({
                   <input
                     type="date"
                     className="gantt-detail-input"
-                    value={detailItem.start_date ? format(new Date(detailItem.start_date), 'yyyy-MM-dd') : ''}
+                    value={detailItem.startDate ? format(new Date(detailItem.startDate), 'yyyy-MM-dd') : ''}
                     onChange={(e) => {
-                      const updated = { ...detailItem, start_date: e.target.value || null }
+                      const updated = { ...detailItem, startDate: e.target.value || null }
                       setDetailItem(updated)
-                      onItemEdit(detailItem.id, { start_date: e.target.value || null })
+                      onItemEdit(detailItem.id, { startDate: e.target.value || null })
                     }}
                   />
                 </div>
@@ -982,11 +982,11 @@ export function GanttChart({
                   <input
                     type="date"
                     className="gantt-detail-input"
-                    value={detailItem.end_date ? format(new Date(detailItem.end_date), 'yyyy-MM-dd') : ''}
+                    value={detailItem.endDate ? format(new Date(detailItem.endDate), 'yyyy-MM-dd') : ''}
                     onChange={(e) => {
-                      const updated = { ...detailItem, end_date: e.target.value || null }
+                      const updated = { ...detailItem, endDate: e.target.value || null }
                       setDetailItem(updated)
-                      onItemEdit(detailItem.id, { end_date: e.target.value || null })
+                      onItemEdit(detailItem.id, { endDate: e.target.value || null })
                     }}
                   />
                 </div>

package/src/components/gantt/types.ts

@@ -9,9 +9,9 @@ export interface TimelineItem {
   status: string
   category?: string
   progress?: number // 0-100
-  start_date?: string | null
-  end_date?: string | null
-  created_at?: string
+  startDate?: string | null
+  endDate?: string | null
+  createdAt?: string
   children?: TimelineItem[]
 }
 
@@ -19,8 +19,8 @@ export interface TimelineItem {
  * Dependency between two timeline items.
  */
 export interface TimelineDependency {
-  from_id: string
-  to_id: string
+  fromId: string
+  toId: string
   type?: string
 }
 

package/src/components/index.ts

@@ -76,3 +76,49 @@ export * from './wizard'
 
 // Account (profile + password forms)
 export * from './account'
+
+// Compose flow (auto-save, header, status, confirmation dialog)
+export * from './compose'
+
+// Email Editor (block-based email builder with drag-drop, undo/redo, HTML renderer)
+export * from './email-editor'
+
+// Email dialogs (schedule, test send, preview, template picker, merge fields)
+export * from './email-dialogs'
+
+// Dashboard components (MetricCard, PeriodSelector, SparklineTrend, DashboardGrid, DashboardSection)
+export * from './dashboard'
+
+// Enrichment components (QualityBadge, EnrichButton, EnrichmentProgress)
+export * from './enrichment'
+
+// Integrations (IntegrationCard, ConnectionStatus)
+export * from './integrations'
+
+// Command Palette
+export * from './command-palette'
+
+// Settings components (SettingsLayout, SettingsNav, SettingsCard)
+export * from './settings'
+
+// Kanban board layout
+export * from './kanban'
+
+// List components (ListCard, CreateListDialog)
+export * from './lists'
+
+// Pipeline components (StageTransitionModal)
+export * from './pipeline'
+
+// Activity components (timeline, quick log, log dialog)
+export { ActivityTimeline } from './ActivityTimeline'
+export type { ActivityTimelineProps, ActivityTimelineItem } from './ActivityTimeline'
+export { QuickLogButtons } from './QuickLogButtons'
+export type { QuickLogButtonsProps, QuickLogAction } from './QuickLogButtons'
+export { LogActivityDialog } from './LogActivityDialog'
+export type {
+  LogActivityDialogProps,
+  LogActivityFormData,
+  ActivityTypeOption,
+  OutcomeOption,
+} from './LogActivityDialog'

package/src/components/integrations/ConnectionStatus.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import * as React from 'react'
+import { Loader2 } from 'lucide-react'
+import { cn } from '../../lib/utils'
+
+export interface ConnectionStatusProps {
+  providerName: string
+  providerIcon: React.ElementType
+  connected: boolean
+  accountLabel?: string
+  onConnect?: () => void
+  onDisconnect?: () => void
+  isLoading?: boolean
+  className?: string
+}
+
+export function ConnectionStatus({
+  providerName,
+  providerIcon: Icon,
+  connected,
+  accountLabel,
+  onConnect,
+  onDisconnect,
+  isLoading = false,
+  className,
+}: ConnectionStatusProps) {
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-between rounded-lg border p-4',
+        className
+      )}
+    >
+      <div className="flex items-center gap-3">
+        <div className="flex-shrink-0 w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center">
+          <Icon className="w-5 h-5 text-gray-600" />
+        </div>
+        <div>
+          <p className="text-sm font-medium">{providerName}</p>
+          {connected && accountLabel && (
+            <p className="text-xs text-muted-foreground">{accountLabel}</p>
+          )}
+          {!connected && (
+            <p className="text-xs text-muted-foreground">Not connected</p>
+          )}
+        </div>
+      </div>
+
+      <div>
+        {isLoading ? (
+          <button
+            disabled
+            className="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium bg-gray-100 text-gray-400 cursor-not-allowed"
+          >
+            <Loader2 className="w-3 h-3 animate-spin" />
+            Loading...
+          </button>
+        ) : connected ? (
+          <button
+            onClick={onDisconnect}
+            className="inline-flex items-center rounded-md px-3 py-1.5 text-xs font-medium border border-red-200 text-red-600 hover:bg-red-50 transition-colors"
+          >
+            Disconnect
+          </button>
+        ) : (
+          <button
+            onClick={onConnect}
+            className="inline-flex items-center rounded-md px-3 py-1.5 text-xs font-medium bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
+          >
+            Connect
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/integrations/IntegrationCard.tsx

@@ -0,0 +1,92 @@
+'use client'
+
+import * as React from 'react'
+import { ChevronRight } from 'lucide-react'
+import { cn } from '../../lib/utils'
+
+export type IntegrationStatus = 'connected' | 'available' | 'coming-soon'
+
+export interface IntegrationCardProps {
+  name: string
+  description: string
+  icon: React.ElementType
+  status: IntegrationStatus
+  onClick?: () => void
+  lastSync?: string
+  className?: string
+}
+
+const STATUS_CONFIG: Record<IntegrationStatus, { label: string; className: string }> = {
+  connected: { label: 'Connected', className: 'bg-green-100 text-green-700' },
+  available: { label: 'Available', className: 'bg-blue-100 text-blue-700' },
+  'coming-soon': { label: 'Coming Soon', className: 'bg-gray-100 text-gray-500' },
+}
+
+export function IntegrationCard({
+  name,
+  description,
+  icon: Icon,
+  status,
+  onClick,
+  lastSync,
+  className,
+}: IntegrationCardProps) {
+  const isClickable = status !== 'coming-soon'
+  const statusEntry = STATUS_CONFIG[status]
+
+  return (
+    <div
+      className={cn(
+        'rounded-xl border bg-card text-card-foreground shadow p-5 flex items-start gap-4',
+        isClickable && 'cursor-pointer hover:shadow-md hover:border-primary/30 transition-shadow',
+        !isClickable && 'opacity-75',
+        className
+      )}
+      onClick={isClickable ? onClick : undefined}
+      role={isClickable ? 'button' : undefined}
+      tabIndex={isClickable ? 0 : undefined}
+      onKeyDown={
+        isClickable
+          ? (e: React.KeyboardEvent) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+                onClick?.()
+              }
+            }
+          : undefined
+      }
+    >
+      <div className="flex-shrink-0 w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center">
+        <Icon className="w-5 h-5 text-gray-600" />
+      </div>
+
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2 mb-1">
+          <h3 className="font-medium text-sm truncate">{name}</h3>
+          <span
+            className={cn(
+              'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
+              statusEntry.className
+            )}
+          >
+            {statusEntry.label}
+          </span>
+        </div>
+
+        <p className="text-xs text-muted-foreground line-clamp-2">{description}</p>
+
+        {lastSync && (
+          <p className="text-xs text-muted-foreground mt-1">
+            Last synced: {lastSync}
+          </p>
+        )}
+
+        {isClickable && (
+          <span className="inline-flex items-center text-xs text-primary mt-2 font-medium">
+            Configure <ChevronRight className="w-3 h-3 ml-0.5" />
+          </span>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/integrations/index.ts

@@ -0,0 +1,5 @@
+export { IntegrationCard } from './IntegrationCard'
+export type { IntegrationCardProps, IntegrationStatus } from './IntegrationCard'
+
+export { ConnectionStatus } from './ConnectionStatus'
+export type { ConnectionStatusProps } from './ConnectionStatus'

package/src/components/kanban/KanbanBoard.tsx

@@ -0,0 +1,103 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+
+export interface KanbanColumnConfig {
+  id: string
+  label: string
+  color?: string
+}
+
+export interface KanbanBoardProps<T> {
+  columns: KanbanColumnConfig[]
+  items: Record<string, T[]>
+  renderCard: (item: T) => React.ReactNode
+  renderColumnHeader?: (column: KanbanColumnConfig, items: T[]) => React.ReactNode
+  renderColumnFooter?: (column: KanbanColumnConfig) => React.ReactNode
+  emptyColumnMessage?: string
+  columnWidth?: number
+  columnRef?: (columnId: string) => React.Ref<HTMLDivElement> | undefined
+  isColumnOver?: (columnId: string) => boolean
+  className?: string
+}
+
+export function KanbanBoard<T>({
+  columns,
+  items,
+  renderCard,
+  renderColumnHeader,
+  renderColumnFooter,
+  emptyColumnMessage = 'No items',
+  columnWidth = 320,
+  columnRef,
+  isColumnOver,
+  className,
+}: KanbanBoardProps<T>) {
+  return (
+    <div className={cn('flex gap-4 overflow-x-auto pb-4', className)}>
+      {columns.map((column) => {
+        const columnItems = items[column.id] ?? []
+        const ref = columnRef?.(column.id)
+        const isOver = isColumnOver?.(column.id) ?? false
+
+        return (
+          <div
+            key={column.id}
+            ref={ref}
+            style={{ minWidth: columnWidth, maxWidth: columnWidth }}
+            className={cn(
+              'flex flex-col rounded-lg border bg-muted/50 transition-colors',
+              isOver && 'border-primary ring-2 ring-primary/20',
+            )}
+          >
+            {/* Column Header */}
+            {renderColumnHeader ? (
+              renderColumnHeader(column, columnItems)
+            ) : (
+              <div className="flex items-center justify-between px-3 py-2 border-b">
+                <div className="flex items-center gap-2">
+                  {column.color && (
+                    <span
+                      className="w-2.5 h-2.5 rounded-full shrink-0"
+                      style={{ backgroundColor: column.color }}
+                      aria-hidden="true"
+                    />
+                  )}
+                  <h3 className="text-sm font-semibold text-foreground truncate">
+                    {column.label}
+                  </h3>
+                </div>
+                <span className="inline-flex items-center justify-center rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground">
+                  {columnItems.length}
+                </span>
+              </div>
+            )}
+
+            {/* Column Body */}
+            <div className="flex-1 overflow-y-auto p-2 space-y-2">
+              {columnItems.length === 0 ? (
+                <p className="text-xs text-muted-foreground text-center py-8">
+                  {emptyColumnMessage}
+                </p>
+              ) : (
+                columnItems.map((item, index) => (
+                  <React.Fragment key={index}>
+                    {renderCard(item)}
+                  </React.Fragment>
+                ))
+              )}
+            </div>
+
+            {/* Column Footer */}
+            {renderColumnFooter && (
+              <div className="border-t px-3 py-2">
+                {renderColumnFooter(column)}
+              </div>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/kanban/index.ts

@@ -0,0 +1,2 @@
+export { KanbanBoard } from './KanbanBoard'
+export type { KanbanBoardProps, KanbanColumnConfig } from './KanbanBoard'