spine-framework 0.2.1 → 1.0.0

package/.framework/src/pages/admin/IntegrationDetailPage.tsx

@@ -1,187 +0,0 @@
-/**
- * @module src/pages/admin/IntegrationDetailPage
- */
-import { useState, useEffect } from 'react'
-import { useParams, useNavigate } from 'react-router-dom'
-import { apiFetch } from '../../lib/api'
-import { Button } from '../../components/ui/button'
-import { Input } from '../../components/ui/input'
-import { Textarea } from '../../components/ui/textarea'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../components/ui/select'
-import { Checkbox } from '../../components/ui/checkbox'
-import { Label } from '../../components/ui/label'
-import { Card, CardContent, CardHeader, CardTitle } from '../../components/ui/card'
-import { Skeleton } from '../../components/ui/skeleton'
-import { Alert, AlertDescription, AlertTitle } from '../../components/ui/alert'
-import { Modal } from '../../components/ui/Modal'
-import { Badge } from '../../components/ui/badge'
-import { ArrowLeft, Pencil, Trash2, CheckCircle, XCircle, AlertTriangle, AlertCircle } from 'lucide-react'
-import { formatDateTime } from '../../lib/utils'
-
-interface Integration {
-  id: string
-  name: string
-  provider: string
-  integration_type: 'webhook' | 'api' | 'database' | 'file' | 'custom'
-  description?: string
-  config: Record<string, any>
-  is_active: boolean
-  is_system?: boolean
-  created_at: string
-  updated_at: string
-  account_id: string
-  last_sync?: string
-  sync_status?: 'success' | 'failed' | 'pending'
-  error_message?: string
-}
-
-const INTEGRATION_TYPES = [
-  { value: 'webhook', label: 'Webhook' },
-  { value: 'api', label: 'API' },
-  { value: 'database', label: 'Database' },
-  { value: 'file', label: 'File' },
-  { value: 'custom', label: 'Custom' }
-]
-
-export function IntegrationDetailPage() {
-  const { id } = useParams<{ id: string }>()
-  const navigate = useNavigate()
-  const isCreateMode = !id || id === 'new'
-  const [integration, setIntegration] = useState<Integration | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-  const [isEditing, setIsEditing] = useState(isCreateMode)
-  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
-  const [formData, setFormData] = useState({
-    name: '', provider: '', integration_type: 'api' as const, description: '', config: '{}', is_active: true
-  })
-
-  useEffect(() => {
-    if (isCreateMode) {
-      setLoading(false)
-      return
-    }
-    setLoading(true)
-    const fetchIntegration = async () => {
-      try {
-        const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i
-        if (!uuidRegex.test(id!)) throw new Error('Invalid ID format')
-        const response = await apiFetch(`/api/integrations?action=get&id=${id}`)
-        if (!response.ok) throw new Error(response.status === 500 ? 'Integration not found' : 'Failed to fetch integration')
-        const result = await response.json()
-        const data = result.data
-        setIntegration(data)
-        setFormData({
-          name: data.name, provider: data.provider, integration_type: data.integration_type,
-          description: data.description || '', config: JSON.stringify(data.config, null, 2), is_active: data.is_active
-        })
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to load integration')
-      } finally {
-        setLoading(false)
-      }
-    }
-    fetchIntegration()
-  }, [id, isCreateMode])
-
-  const handleSave = async () => {
-    try {
-      let parsedConfig = {}
-      try { parsedConfig = JSON.parse(formData.config) } catch { throw new Error('Invalid JSON in config') }
-      const url = isCreateMode ? '/api/integrations?action=create' : `/api/integrations?action=update&id=${id}`
-      const method = isCreateMode ? 'POST' : 'PATCH'
-      const response = await apiFetch(url, { method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ ...formData, config: parsedConfig }) })
-      if (!response.ok) throw new Error('Failed to save integration')
-      if (isCreateMode) {
-        const result = await response.json()
-        navigate(`/spine-framework/admin/configs/integrations/${result.data?.id || result.id}`)
-      } else {
-        setIsEditing(false)
-        const result = await response.json()
-        setIntegration(result.data)
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to save')
-    }
-  }
-
-  const handleDelete = async () => {
-    try {
-      const response = await apiFetch(`/api/integrations?action=delete&id=${id}`, { method: 'DELETE' })
-      if (!response.ok) throw new Error('Failed to delete')
-      navigate('/spine-framework/admin/configs/integrations')
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to delete')
-    }
-  }
-
-  if (loading) return (
-    <div className="space-y-6">
-      <Skeleton className="h-8 w-48" />
-      <Card><CardHeader><Skeleton className="h-6 w-32" /></CardHeader><CardContent className="space-y-4"><Skeleton className="h-4 w-full" /><Skeleton className="h-4 w-2/3" /></CardContent></Card>
-    </div>
-  )
-
-  if (error && !isCreateMode) return (
-    <Alert variant="destructive"><AlertCircle className="h-4 w-4" /><AlertTitle>Error</AlertTitle><AlertDescription>{error}</AlertDescription></Alert>
-  )
-
-  const getStatusIcon = (status?: string) => {
-    switch (status) {
-      case 'success': return <CheckCircle className="h-4 w-4 text-green-500" />
-      case 'failed': return <XCircle className="h-4 w-4 text-red-500" />
-      case 'pending': return <AlertTriangle className="h-4 w-4 text-yellow-500" />
-      default: return null
-    }
-  }
-
-  return (
-    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-4">
-          <Button variant="ghost" onClick={() => isCreateMode ? navigate('/spine-framework/admin/configs/integrations') : navigate(-1)}><ArrowLeft className="h-5 w-5" /></Button>
-          <h1 className="text-2xl font-bold">{isCreateMode ? 'Create Integration' : integration?.name}</h1>
-        </div>
-        {!isCreateMode && !isEditing && (
-          <div className="flex gap-2">
-            <Button variant="outline" onClick={() => setIsEditing(true)}><Pencil className="h-4 w-4 mr-2" />Edit</Button>
-            {!integration?.is_system && <Button variant="destructive" onClick={() => setIsDeleteModalOpen(true)}><Trash2 className="h-4 w-4 mr-2" />Delete</Button>}
-          </div>
-        )}
-        {isEditing && (
-          <div className="flex gap-2">
-            <Button variant="outline" onClick={() => isCreateMode ? navigate(-1) : setIsEditing(false)}>Cancel</Button>
-            <Button onClick={handleSave}>{isCreateMode ? 'Create' : 'Save'}</Button>
-          </div>
-        )}
-      </div>
-
-      <Card><CardContent className="p-6">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <div className="space-y-4">
-            <h3 className="text-sm font-medium text-muted-foreground">Basic Info</h3>
-            <div className="space-y-2"><Label>Name</Label>{isEditing ? <Input value={formData.name} onChange={e => setFormData({...formData, name: e.target.value})} /> : <div className="text-sm">{integration?.name}</div>}</div>
-            <div className="space-y-2"><Label>Provider</Label>{isEditing ? <Input value={formData.provider} onChange={e => setFormData({...formData, provider: e.target.value})} /> : <div className="text-sm">{integration?.provider}</div>}</div>
-            <div className="space-y-2"><Label>Type</Label>{isEditing ? <Select value={formData.integration_type} onValueChange={v => setFormData({...formData, integration_type: v as any})}><SelectTrigger><SelectValue /></SelectTrigger><SelectContent>{INTEGRATION_TYPES.map(t => <SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>)}</SelectContent></Select> : <Badge>{integration?.integration_type}</Badge>}</div>
-            <div className="space-y-2"><Label>Active</Label>{isEditing ? <div className="flex items-center gap-2"><Checkbox id="active" checked={formData.is_active} onCheckedChange={c => setFormData({...formData, is_active: c === true})} /><Label htmlFor="active">Enabled</Label></div> : <div className="text-sm">{integration?.is_active ? 'Yes' : 'No'}</div>}</div>
-          </div>
-          <div className="space-y-4">
-            <h3 className="text-sm font-medium text-muted-foreground">Sync Status</h3>
-            {!isCreateMode && (
-              <>
-                <div className="flex justify-between items-center"><span className="text-sm text-muted-foreground">Status</span><div className="flex items-center gap-2">{getStatusIcon(integration?.sync_status)}<span className="text-sm capitalize">{integration?.sync_status || '—'}</span></div></div>
-                <div className="flex justify-between items-center"><span className="text-sm text-muted-foreground">Last Sync</span><span className="text-sm">{integration?.last_sync ? formatDateTime(integration.last_sync) : '—'}</span></div>
-              </>
-            )}
-            <div className="space-y-2"><Label>Description</Label>{isEditing ? <Textarea value={formData.description} onChange={e => setFormData({...formData, description: e.target.value})} rows={3} /> : <div className="text-sm">{integration?.description || '—'}</div>}</div>
-          </div>
-        </div>
-        <div className="mt-6 space-y-2"><Label>Configuration (JSON)</Label>{isEditing ? <Textarea value={formData.config} onChange={e => setFormData({...formData, config: e.target.value})} rows={8} className="font-mono text-sm" /> : <pre className="text-sm bg-muted p-3 rounded overflow-auto">{JSON.stringify(integration?.config || {}, null, 2)}</pre>}</div>
-      </CardContent></Card>
-
-      <Modal isOpen={isDeleteModalOpen} onClose={() => setIsDeleteModalOpen(false)} title="Delete Integration" description="Are you sure you want to delete this integration?" size="sm">
-        <div className="flex justify-end gap-3"><Button variant="outline" onClick={() => setIsDeleteModalOpen(false)}>Cancel</Button><Button variant="destructive" onClick={handleDelete}>Delete</Button></div>
-      </Modal>
-    </div>
-  )
-}

package/.framework/src/pages/admin/IntegrationsPage.tsx

@@ -1,301 +0,0 @@
-/**
- * @module src/pages/admin/IntegrationsPage
- * @audience installer
- * @layer frontend-page
- * @stability stable
- *
- * Admin list page for third-party integrations (integration instances).
- * Fetches all integration instances via `/api/integrations?action=list`,
- * applies client-side search, status filter, and sort. Renders inside
- * `AdminListPage`. Row clicks navigate to
- * `/spine-framework/admin/configs/integrations/:id`.
- *
- * @seeAlso src/pages/admin/IntegrationDetailPage.tsx
- */
-
-import { useState } from 'react'
-import { Link, CheckCircle, AlertTriangle, Settings, Cog } from 'lucide-react';
-import { formatDateTime } from '../../lib/utils'
-import { apiFetch } from '../../lib/api'
-import { AdminListPage } from '../../components/admin/AdminListPage'
-import { SortableTableHeader } from '../../components/admin/SortableTableHeader'
-import { useApi } from '../../hooks/useApi'
-
-interface Integration {
-  id: string
-  name: string
-  description: string
-  integration_type: string
-  provider: string
-  version?: string
-  is_active: boolean
-  is_configured: boolean
-  last_sync_at?: string
-  sync_status?: string
-  sync_error?: string
-  created_at: string
-  updated_at: string
-  app?: {
-    id: string
-    slug: string
-    name: string
-  }
-  created_by_person?: {
-    id: string
-    full_name: string
-    email: string
-  }
-}
-
-export function IntegrationsPage() {
-  const [searchTerm, setSearchTerm] = useState('')
-  const [selectedStatus, setSelectedStatus] = useState('all')
-  const [selectedType, setSelectedType] = useState('all')
-  const [sortKey, setSortKey] = useState('name')
-  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc')
-
-  // Fetch integrations from API
-  const { data: integrations, loading, error } = useApi<Integration[]>(
-    async ({ signal }: { signal?: AbortSignal }) => {
-      const response = await apiFetch('/api/integrations?action=list', { signal })
-      if (!response.ok) throw new Error('Failed to fetch integrations')
-      const result = await response.json()
-      return result.data || []
-    },
-    { immediate: true }
-  )
-
-  const filteredIntegrations = (integrations || []).filter(integration => {
-    const matchesSearch = integration.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                         integration.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                         integration.provider.toLowerCase().includes(searchTerm.toLowerCase())
-    const matchesStatus = selectedStatus === 'all' || 
-      (selectedStatus === 'active' && integration.is_active) ||
-      (selectedStatus === 'inactive' && !integration.is_active)
-    const matchesType = selectedType === 'all' || integration.integration_type === selectedType
-    return matchesSearch && matchesStatus && matchesType
-  })
-
-  const types = Array.from(new Set((integrations || []).map(i => i.integration_type)))
-
-  // Helper functions
-  const getStatusBadge = (integration: Integration) => {
-    if (!integration.is_active) {
-      return <span className="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-slate-100 text-slate-800">Inactive</span>
-    }
-    if (integration.sync_status === 'error') {
-      return <span className="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">Error</span>
-    }
-    if (integration.is_configured) {
-      return <span className="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Configured</span>
-    }
-    return <span className="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span>
-  }
-
-  const handleSort = (key: string) => {
-    if (sortKey === key) {
-      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc')
-    } else {
-      setSortKey(key)
-      setSortDirection('asc')
-    }
-  }
-
-  const handleRowClick = (integration: Integration) => {
-    window.location.href = `/spine-framework/admin/configs/integrations/${integration.id}`
-  }
-
-  // Sort integrations
-  const sortedIntegrations = [...(filteredIntegrations || [])].sort((a, b) => {
-    let aValue: any = a[sortKey as keyof Integration]
-    let bValue: any = b[sortKey as keyof Integration]
-    
-    if (typeof aValue === 'string') {
-      return sortDirection === 'asc' 
-        ? aValue.localeCompare(bValue)
-        : bValue.localeCompare(aValue)
-    }
-    
-    if (typeof aValue === 'boolean') {
-      return sortDirection === 'asc' ? (aValue ? 1 : 0) : (bValue ? 1 : 0)
-    }
-    
-    return 0
-  })
-
-  const statsCards = [
-    {
-      title: 'Total Integrations',
-      value: (integrations || []).length,
-      icon: Link,
-      iconColor: 'text-blue-500'
-    },
-    {
-      title: 'Active',
-      value: (integrations || []).filter(i => i.is_active).length,
-      icon: CheckCircle,
-      iconColor: 'text-green-500'
-    },
-    {
-      title: 'Configured',
-      value: (integrations || []).filter(i => i.is_configured).length,
-      icon: Cog,
-      iconColor: 'text-purple-500'
-    },
-    {
-      title: 'Errors',
-      value: (integrations || []).filter(i => i.sync_status === 'error').length,
-      icon: AlertTriangle,
-      iconColor: 'text-red-500'
-    }
-  ]
-
-  const statusOptions = [
-    { value: 'all', label: 'All Status' },
-    { value: 'active', label: 'Active' },
-    { value: 'inactive', label: 'Inactive' }
-  ]
-
-  const typeOptions = [
-    { value: 'all', label: 'All Types' },
-    ...types.map(type => ({ value: type, label: type }))
-  ]
-
-  const filters = [
-    {
-      label: 'Status',
-      value: selectedStatus,
-      options: statusOptions,
-      onChange: setSelectedStatus
-    },
-    {
-      label: 'Type',
-      value: selectedType,
-      options: typeOptions,
-      onChange: setSelectedType
-    }
-  ]
-
-  return (
-    <AdminListPage
-      title="Integrations"
-      description="Configure external service integrations and connections"
-      newButtonText="Add Integration"
-      newButtonHref="/spine-framework/admin/configs/integrations/new"
-      statsCards={statsCards}
-      searchPlaceholder="Search integrations..."
-      searchValue={searchTerm}
-      onSearchChange={setSearchTerm}
-      filters={filters}
-      loading={loading}
-      error={error}
-      emptyMessage="No integrations found"
-      emptyIcon={Link}
-    >
-      {sortedIntegrations.length === 0 ? (
-        <div className="p-8 text-center">
-          <Link className="mx-auto h-12 w-12 text-slate-400" />
-          <h3 className="mt-2 text-sm font-medium text-slate-900">No integrations found</h3>
-          <p className="mt-1 text-sm text-slate-500">
-            Try adjusting your search or filters
-          </p>
-        </div>
-      ) : (
-        <table className="min-w-full divide-y divide-slate-200">
-          <thead className="bg-slate-50">
-            <tr>
-              <SortableTableHeader
-                title="Integration"
-                sortKey="name"
-                currentSortKey={sortKey}
-                currentSortDirection={sortDirection}
-                onSort={handleSort}
-              />
-              <SortableTableHeader
-                title="Provider"
-                sortKey="provider"
-                currentSortKey={sortKey}
-                currentSortDirection={sortDirection}
-                onSort={handleSort}
-              />
-              <SortableTableHeader
-                title="Type"
-                sortKey="integration_type"
-                currentSortKey={sortKey}
-                currentSortDirection={sortDirection}
-                onSort={handleSort}
-              />
-              <SortableTableHeader
-                title="Status"
-                sortKey="is_active"
-                currentSortKey={sortKey}
-                currentSortDirection={sortDirection}
-                onSort={handleSort}
-              />
-              <SortableTableHeader
-                title="Last Sync"
-                sortKey="last_sync_at"
-                currentSortKey={sortKey}
-                currentSortDirection={sortDirection}
-                onSort={handleSort}
-              />
-              <SortableTableHeader
-                title="Created"
-                sortKey="created_at"
-                currentSortKey={sortKey}
-                currentSortDirection={sortDirection}
-                onSort={handleSort}
-              />
-              <th className="relative px-6 py-3">
-                <span className="sr-only">Actions</span>
-              </th>
-            </tr>
-          </thead>
-          <tbody className="bg-white divide-y divide-slate-200">
-            {sortedIntegrations.map((integration) => (
-              <tr 
-                key={integration.id} 
-                className="hover:bg-slate-50 cursor-pointer transition-colors"
-                onClick={() => handleRowClick(integration)}
-              >
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <div>
-                    <div className="font-medium text-slate-900">
-                      <span className="text-accent-blue hover:text-navy">
-                        {integration.name}
-                      </span>
-                    </div>
-                    <div className="text-sm text-slate-500">
-                      {integration.description}
-                    </div>
-                  </div>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <span className="text-sm text-slate-900 font-medium">{integration.provider}</span>
-                  {integration.version && (
-                    <span className="text-xs text-slate-500 ml-1">v{integration.version}</span>
-                  )}
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <span className="text-sm text-slate-900">{integration.integration_type}</span>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  {getStatusBadge(integration)}
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">
-                  {integration.last_sync_at ? formatDateTime(integration.last_sync_at) : 'Never'}
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">
-                  {formatDateTime(integration.created_at)}
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-right">
-                  <span className="text-slate-400">→</span>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      )}
-    </AdminListPage>
-  )
-}