spine-framework 0.2.1 → 1.0.0

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

@@ -1,199 +0,0 @@
-/**
- * @module src/pages/admin/APIKeyDetailPage
- */
-import { useState, useEffect } from 'react'
-import { useParams, useNavigate } from 'react-router-dom'
-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 { ArrowLeft, Key, RefreshCw, Trash2, AlertCircle, Copy, Check } from 'lucide-react'
-import { useApi } from '../../hooks/useApi'
-import { apiFetch } from '../../lib/api'
-import { formatDateTime } from '../../lib/utils'
-
-interface APIKey {
-  id: string
-  name: string
-  key_type: 'public' | 'private'
-  key_value?: string
-  key_prefix: string
-  is_active: boolean
-  permissions?: Record<string, any>
-  rate_limit: number
-  expires_at?: string
-  last_used_at?: string
-  usage_count: number
-  integration_id?: string
-  metadata?: Record<string, any>
-  created_by_person?: { id: string; full_name: string; email: string }
-  created_at: string
-  updated_at: string
-}
-
-const KEY_TYPE_OPTIONS = [
-  { value: 'private', label: 'Private (Server-side)' },
-  { value: 'public', label: 'Public (Client-side)' }
-]
-
-export function APIKeyDetailPage() {
-  const { id } = useParams<{ id: string }>()
-  const navigate = useNavigate()
-  const isCreateMode = !id || id === 'new'
-
-  const [formData, setFormData] = useState({
-    name: '',
-    key_type: 'private' as 'public' | 'private',
-    key_prefix: 'sk_',
-    rate_limit: 1000,
-    expires_at: '',
-    integration_id: '',
-    permissions: {},
-    metadata: {},
-    is_active: true
-  })
-  const [permissionsJson, setPermissionsJson] = useState('{}')
-  const [metadataJson, setMetadataJson] = useState('{}')
-  const [isSubmitting, setIsSubmitting] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const [generatedKey, setGeneratedKey] = useState<string | null>(null)
-  const [copied, setCopied] = useState(false)
-
-  const { data: apiKey, loading, error: fetchError } = useApi<APIKey>(
-    async () => {
-      if (isCreateMode) return null
-      const response = await apiFetch(`/api/api-keys?action=get&id=${id}`)
-      if (!response.ok) throw new Error('Failed to fetch API key')
-      const result = await response.json()
-      return result.data || result
-    },
-    { immediate: !isCreateMode }
-  )
-
-  useEffect(() => {
-    if (apiKey) {
-      setFormData({
-        name: apiKey.name || '',
-        key_type: apiKey.key_type || 'private',
-        key_prefix: apiKey.key_prefix || 'sk_',
-        rate_limit: apiKey.rate_limit || 1000,
-        expires_at: apiKey.expires_at ? apiKey.expires_at.split('T')[0] : '',
-        integration_id: apiKey.integration_id || '',
-        permissions: apiKey.permissions || {},
-        metadata: apiKey.metadata || {},
-        is_active: apiKey.is_active
-      })
-      setPermissionsJson(JSON.stringify(apiKey.permissions || {}, null, 2))
-      setMetadataJson(JSON.stringify(apiKey.metadata || {}, null, 2))
-    }
-  }, [apiKey])
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    setIsSubmitting(true)
-    try {
-      let permissions = {}
-      let metadata = {}
-      try { permissions = JSON.parse(permissionsJson) } catch {}
-      try { metadata = JSON.parse(metadataJson) } catch {}
-      const body = { ...formData, permissions, metadata }
-      const response = await apiFetch('/api/api-keys', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(body)
-      })
-      if (!response.ok) throw new Error('Failed to create API key')
-      const result = await response.json()
-      setGeneratedKey(result.key_value || result.data?.key_value)
-      setTimeout(() => navigate(`/spine-framework/admin/configs/api-keys/${result.id || result.data?.id}`), 3000)
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to create API key')
-    } finally {
-      setIsSubmitting(false)
-    }
-  }
-
-  const handleCopy = () => {
-    if (generatedKey) {
-      navigator.clipboard.writeText(generatedKey)
-      setCopied(true)
-      setTimeout(() => setCopied(false), 2000)
-    }
-  }
-
-  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 (fetchError) return (
-    <Alert variant="destructive"><AlertCircle className="h-4 w-4" /><AlertTitle>Failed to load</AlertTitle><AlertDescription>{fetchError}</AlertDescription></Alert>
-  )
-
-  if (!isCreateMode && apiKey) {
-    return (
-      <div className="space-y-6">
-        <div className="flex items-center gap-4">
-          <Button variant="ghost" onClick={() => navigate(-1)}><ArrowLeft className="h-5 w-5" /></Button>
-          <h1 className="text-2xl font-bold">{apiKey.name}</h1>
-        </div>
-        <Card><CardContent className="p-6">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div className="flex justify-between"><span className="text-muted-foreground">Key Type</span><span>{apiKey.key_type}</span></div>
-            <div className="flex justify-between"><span className="text-muted-foreground">Prefix</span><span>{apiKey.key_prefix}</span></div>
-            <div className="flex justify-between"><span className="text-muted-foreground">Rate Limit</span><span>{apiKey.rate_limit}/min</span></div>
-            <div className="flex justify-between"><span className="text-muted-foreground">Status</span><span>{apiKey.is_active ? 'Active' : 'Inactive'}</span></div>
-            <div className="flex justify-between"><span className="text-muted-foreground">Usage</span><span>{apiKey.usage_count} requests</span></div>
-            <div className="flex justify-between"><span className="text-muted-foreground">Created</span><span>{formatDateTime(apiKey.created_at)}</span></div>
-          </div>
-          <div className="mt-4"><span className="text-muted-foreground">Key Value</span><div className="mt-1 font-mono text-sm bg-muted p-3 rounded">{apiKey.key_value || '***'}</div></div>
-        </CardContent></Card>
-      </div>
-    )
-  }
-
-  if (generatedKey) {
-    return (
-      <div className="space-y-6">
-        <h1 className="text-2xl font-bold">API Key Created</h1>
-        <Alert><AlertCircle className="h-4 w-4" /><AlertTitle>Save this key now</AlertTitle><AlertDescription>You won't be able to see it again. Copy it now and store it securely.</AlertDescription></Alert>
-        <Card><CardContent className="p-6">
-          <div className="flex items-center gap-2"><code className="flex-1 bg-muted p-4 rounded font-mono text-lg">{generatedKey}</code><Button size="icon" onClick={handleCopy}>{copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}</Button></div>
-          <Button className="mt-4" onClick={() => navigate('/spine-framework/admin/configs/api-keys')}>Done</Button>
-        </CardContent></Card>
-      </div>
-    )
-  }
-
-  return (
-    <div className="space-y-6">
-      <div className="flex items-center gap-4">
-        <Button variant="ghost" onClick={() => navigate(-1)}><ArrowLeft className="h-5 w-5" /></Button>
-        <h1 className="text-2xl font-bold">Create API Key</h1>
-      </div>
-      {error && <Alert variant="destructive"><AlertCircle className="h-4 w-4" /><AlertTitle>Error</AlertTitle><AlertDescription>{error}</AlertDescription></Alert>}
-      <form onSubmit={handleSubmit} className="space-y-6">
-        <Card><CardContent className="p-6 space-y-4">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div className="space-y-2"><Label>Name *</Label><Input value={formData.name} onChange={e => setFormData({...formData, name: e.target.value})} required placeholder="e.g., Production API Key" /></div>
-            <div className="space-y-2"><Label>Key Type</Label><Select value={formData.key_type} onValueChange={v => setFormData({...formData, key_type: v as 'public' | 'private'})}><SelectTrigger><SelectValue /></SelectTrigger><SelectContent>{KEY_TYPE_OPTIONS.map(opt => <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>)}</SelectContent></Select></div>
-            <div className="space-y-2"><Label>Prefix</Label><Input value={formData.key_prefix} onChange={e => setFormData({...formData, key_prefix: e.target.value})} placeholder="e.g., sk_" /></div>
-            <div className="space-y-2"><Label>Rate Limit (requests/min)</Label><Input type="number" value={formData.rate_limit} onChange={e => setFormData({...formData, rate_limit: parseInt(e.target.value)})} min={1} max={10000} /></div>
-            <div className="space-y-2"><Label>Expires At</Label><Input type="date" value={formData.expires_at} onChange={e => setFormData({...formData, expires_at: e.target.value})} /></div>
-          </div>
-          <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">Active</Label></div>
-          <div className="space-y-2"><Label>Permissions (JSON)</Label><Textarea value={permissionsJson} onChange={e => setPermissionsJson(e.target.value)} rows={4} className="font-mono text-sm" placeholder='{"resources": ["read", "write"]}' /></div>
-          <div className="space-y-2"><Label>Metadata (JSON)</Label><Textarea value={metadataJson} onChange={e => setMetadataJson(e.target.value)} rows={3} className="font-mono text-sm" placeholder='{"env": "production"}' /></div>
-        </CardContent></Card>
-        <div className="flex justify-end gap-3"><Button type="button" variant="outline" onClick={() => navigate(-1)}>Cancel</Button><Button type="submit" disabled={isSubmitting}>{isSubmitting ? 'Creating...' : 'Create API Key'}</Button></div>
-      </form>
-    </div>
-  )
-}

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

@@ -1,303 +0,0 @@
-/**
- * @module src/pages/admin/APIKeysPage
- * @audience installer
- * @layer frontend-page
- * @stability stable
- *
- * Admin list page for API keys. Fetches all keys via
- * `/api/api-keys?action=list`, applies client-side search, type filter
- * (`public` | `private`), and sort. Key values are never shown in the
- * list — only the prefix. Renders inside `AdminListPage`. Row clicks
- * navigate to `/spine-framework/admin/configs/api-keys/:id`.
- *
- * @seeAlso src/pages/admin/APIKeyDetailPage.tsx
- */
-
-import React, { useState } from 'react'
-import { Plus, Key, CheckCircle, Clock, ShieldCheck, RefreshCw } from 'lucide-react';
-import { LoadingSpinner } from '../../components/ui/LoadingSpinner'
-import { Button } from '../../components/ui/button'
-import { AdminListPage } from '../../components/admin/AdminListPage'
-import { SortableTableHeader } from '../../components/admin/SortableTableHeader'
-import { formatDateTime } from '../../lib/utils'
-import { useApi } from '../../hooks/useApi'
-import { apiFetch } from '../../lib/api'
-
-interface APIKey {
-  id: string
-  name: string
-  key_type: 'public' | 'private'
-  is_active: boolean
-  last_used_at?: string
-  expires_at?: string
-  rate_limit?: number
-  usage_count?: number
-  integration?: {
-    id: string
-    name: string
-    provider: string
-  }
-  created_by_person?: {
-    id: string
-    full_name: string
-    email: string
-  }
-  created_at: string
-}
-
-export function APIKeysPage() {
-  const [searchTerm, setSearchTerm] = useState('')
-  const [selectedStatus, setSelectedStatus] = useState('all')
-  const [selectedType, setSelectedType] = useState('all')
-  const [sortKey, setSortKey] = useState('created_at')
-  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc')
-
-  const { data: apiKeys, loading, error, refetch } = useApi<APIKey[]>(
-    async () => {
-      const response = await apiFetch('/api/api-keys?action=list')
-      if (!response.ok) throw new Error('Failed to fetch API keys')
-      const result = await response.json()
-      return (result.data || result) as APIKey[]
-    },
-    { immediate: true }
-  )
-
-  const filteredKeys = (apiKeys || []).filter(key => {
-    const matchesSearch = key.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                         (key.integration?.name?.toLowerCase().includes(searchTerm.toLowerCase()) || false)
-    const matchesStatus = selectedStatus === 'all' || 
-      (selectedStatus === 'active' && key.is_active) ||
-      (selectedStatus === 'inactive' && !key.is_active)
-    const matchesType = selectedType === 'all' || key.key_type === selectedType
-    return matchesSearch && matchesStatus && matchesType
-  })
-
-  const handleSort = (key: string) => {
-    if (sortKey === key) {
-      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc')
-    } else {
-      setSortKey(key)
-      setSortDirection('asc')
-    }
-  }
-
-  const handleRowClick = (key: APIKey) => {
-    window.location.href = `/spine-framework/admin/configs/api-keys/${key.id}`
-  }
-
-  const sortedKeys = [...(filteredKeys || [])].sort((a, b) => {
-    let aValue: any = a[sortKey as keyof APIKey]
-    let bValue: any = b[sortKey as keyof APIKey]
-    
-    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 isExpired = (key: APIKey) => {
-    if (!key.expires_at) return false
-    return new Date(key.expires_at) < new Date()
-  }
-
-  const statsCards = [
-    {
-      title: 'Total Keys',
-      value: (apiKeys || []).length,
-      icon: Key,
-      iconColor: 'text-blue-500'
-    },
-    {
-      title: 'Active',
-      value: (apiKeys || []).filter(k => k.is_active).length,
-      icon: CheckCircle,
-      iconColor: 'text-green-500'
-    },
-    {
-      title: 'Private Keys',
-      value: (apiKeys || []).filter(k => k.key_type === 'private').length,
-      icon: ShieldCheck,
-      iconColor: 'text-purple-500'
-    },
-    {
-      title: 'Expiring Soon',
-      value: (apiKeys || []).filter(k => {
-        if (!k.expires_at) return false
-        const days = Math.ceil((new Date(k.expires_at).getTime() - Date.now()) / (1000 * 60 * 60 * 24))
-        return days > 0 && days <= 7
-      }).length,
-      icon: Clock,
-      iconColor: 'text-orange-500'
-    }
-  ]
-
-  const statusOptions = [
-    { value: 'all', label: 'All Status' },
-    { value: 'active', label: 'Active' },
-    { value: 'inactive', label: 'Inactive' }
-  ]
-
-  const typeOptions = [
-    { value: 'all', label: 'All Types' },
-    { value: 'public', label: 'Public' },
-    { value: 'private', label: 'Private' }
-  ]
-
-  const filters = [
-    {
-      label: 'Status',
-      value: selectedStatus,
-      options: statusOptions,
-      onChange: setSelectedStatus
-    },
-    {
-      label: 'Type',
-      value: selectedType,
-      options: typeOptions,
-      onChange: setSelectedType
-    }
-  ]
-
-  return (
-    <AdminListPage
-      title="API Keys"
-      description="Manage API keys and access tokens"
-      newButtonText="Generate API Key"
-      newButtonHref="/spine-framework/admin/configs/api-keys/new"
-      statsCards={statsCards}
-      searchPlaceholder="Search API keys..."
-      searchValue={searchTerm}
-      onSearchChange={setSearchTerm}
-      filters={filters}
-      loading={loading}
-      error={error}
-      emptyMessage="No API keys found"
-      emptyIcon={Key}
-    >
-      {sortedKeys.length === 0 ? (
-        <div className="p-8 text-center">
-          <Key className="mx-auto h-12 w-12 text-slate-400" />
-          <h3 className="mt-2 text-sm font-medium text-slate-900">No API keys 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="Name"
-                sortKey="name"
-                currentSortKey={sortKey}
-                currentSortDirection={sortDirection}
-                onSort={handleSort}
-              />
-              <SortableTableHeader
-                title="Type"
-                sortKey="key_type"
-                currentSortKey={sortKey}
-                currentSortDirection={sortDirection}
-                onSort={handleSort}
-              />
-              <SortableTableHeader
-                title="Status"
-                sortKey="is_active"
-                currentSortKey={sortKey}
-                currentSortDirection={sortDirection}
-                onSort={handleSort}
-              />
-              <SortableTableHeader
-                title="Integration"
-                sortKey="integration"
-                currentSortKey={sortKey}
-                currentSortDirection={sortDirection}
-                onSort={handleSort}
-              />
-              <SortableTableHeader
-                title="Usage"
-                sortKey="usage_count"
-                currentSortKey={sortKey}
-                currentSortDirection={sortDirection}
-                onSort={handleSort}
-              />
-              <SortableTableHeader
-                title="Expires"
-                sortKey="expires_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">
-            {sortedKeys.map((key) => (
-              <tr 
-                key={key.id} 
-                className="hover:bg-slate-50 cursor-pointer transition-colors"
-                onClick={() => handleRowClick(key)}
-              >
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <div className="font-medium text-slate-900">
-                    <span className="text-accent-blue hover:text-navy">
-                      {key.name}
-                    </span>
-                  </div>
-                  <div className="text-xs text-slate-500">
-                    {key.created_by_person?.full_name || key.created_by_person?.email || 'System'}
-                  </div>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <span className={`inline-flex px-2 py-0.5 text-xs font-medium rounded-md ${
-                    key.key_type === 'private'
-                      ? 'bg-purple-100 text-purple-700'
-                      : 'bg-blue-100 text-blue-700'
-                  }`}>
-                    {key.key_type}
-                  </span>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <span className={`inline-flex px-2 py-0.5 text-xs font-medium rounded-md ${
-                    key.is_active && !isExpired(key)
-                      ? 'bg-green-100 text-green-700'
-                      : 'bg-slate-100 text-slate-600'
-                  }`}>
-                    {key.is_active && !isExpired(key) ? 'Active' : isExpired(key) ? 'Expired' : 'Inactive'}
-                  </span>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-600">
-                  {key.integration?.name || '—'}
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">
-                  {key.usage_count?.toLocaleString() || '0'}
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">
-                  {key.expires_at ? (
-                    <span className={isExpired(key) ? 'text-red-600' : ''}>
-                      {formatDateTime(key.expires_at)}
-                    </span>
-                  ) : (
-                    'Never'
-                  )}
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-right">
-                  <span className="text-slate-400">→</span>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      )}
-    </AdminListPage>
-  )
-}