spine-framework 0.1.61 → 1.0.0

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

@@ -1,273 +0,0 @@
-/**
- * @module src/pages/admin/RoleDetailPage
- * @audience installer
- * @layer frontend-page
- * @stability stable
- *
- * Create / view / edit page for a single role.
- */
-
-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 { 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, ShieldCheck, AlertCircle } from 'lucide-react'
-import { useApi } from '../../hooks/useApi'
-import { apiFetch } from '../../lib/api'
-import { formatDateTime } from '../../lib/utils'
-
-interface Role {
-  id: string
-  name: string
-  slug: string
-  description?: string
-  permissions?: Record<string, any>
-  is_system: boolean
-  is_active: boolean
-  app_id?: string
-  created_at: string
-  updated_at: string
-}
-
-export function RoleDetailPage() {
-  const { id } = useParams<{ id: string }>()
-  const navigate = useNavigate()
-  const isCreateMode = !id || id === 'new'
-
-  const [formData, setFormData] = useState({
-    name: '',
-    slug: '',
-    description: '',
-    is_system: false,
-    is_active: true,
-    permissions: {}
-  })
-  const [permissionsJson, setPermissionsJson] = useState('{}')
-  const [isSubmitting, setIsSubmitting] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-
-  const { data: role, loading, error: fetchError } = useApi<Role>(
-    async () => {
-      if (isCreateMode) return null
-      const response = await apiFetch(`/api/roles?action=get&id=${id}`)
-      if (!response.ok) throw new Error('Failed to fetch role')
-      const result = await response.json()
-      return result.data
-    },
-    { immediate: !isCreateMode }
-  )
-
-  useEffect(() => {
-    if (role) {
-      setFormData({
-        name: role.name || '',
-        slug: role.slug || '',
-        description: role.description || '',
-        is_system: role.is_system || false,
-        is_active: role.is_active !== false,
-        permissions: role.permissions || {}
-      })
-      setPermissionsJson(JSON.stringify(role.permissions || {}, null, 2))
-    }
-  }, [role])
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    setIsSubmitting(true)
-    setError(null)
-
-    try {
-      let parsedPermissions
-      try {
-        parsedPermissions = JSON.parse(permissionsJson)
-      } catch (e) {
-        throw new Error('Invalid JSON in permissions field')
-      }
-
-      const payload = {
-        ...formData,
-        permissions: parsedPermissions
-      }
-
-      const url = isCreateMode ? '/api/roles' : `/api/roles?id=${id}`
-      const method = isCreateMode ? 'POST' : 'PATCH'
-
-      const response = await apiFetch(url, {
-        method,
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(payload)
-      })
-
-      if (!response.ok) {
-        const errorData = await response.json().catch(() => ({}))
-        throw new Error(errorData.error || 'Failed to save role')
-      }
-
-      const result = await response.json()
-      navigate(`/spine-framework/admin/configs/roles/${result.id || id}`)
-    } catch (err: any) {
-      setError(err.message || 'Failed to save role')
-    } finally {
-      setIsSubmitting(false)
-    }
-  }
-
-  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-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 role</AlertTitle>
-        <AlertDescription>{fetchError}</AlertDescription>
-      </Alert>
-    )
-  }
-
-  return (
-    <div className="space-y-6">
-      <div className="flex items-center gap-4">
-        <Button variant="ghost" onClick={() => navigate(-1)}>
-          <ArrowLeft className="w-5 h-5" />
-        </Button>
-        <h1 className="text-2xl font-bold">
-          {isCreateMode ? 'Create Role' : role?.name || 'Role Detail'}
-        </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>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <ShieldCheck className="w-5 h-5 text-primary" />
-              Basic Information
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <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 })}
-                  placeholder="e.g., Sales Manager"
-                  required
-                />
-              </div>
-              <div className="space-y-2">
-                <Label>Slug *</Label>
-                <Input
-                  value={formData.slug}
-                  onChange={(e) => setFormData({ ...formData, slug: e.target.value })}
-                  placeholder="e.g., sales_manager"
-                  required
-                  disabled={!isCreateMode}
-                />
-                {!isCreateMode && (
-                  <p className="text-xs text-muted-foreground">Slug cannot be changed after creation</p>
-                )}
-              </div>
-              <div className="md:col-span-2 space-y-2">
-                <Label>Description</Label>
-                <Textarea
-                  value={formData.description}
-                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
-                  placeholder="Describe what this role can do..."
-                  rows={2}
-                />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle>Settings</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="flex flex-wrap gap-6">
-              <div className="flex items-center gap-2">
-                <Checkbox
-                  id="is_system"
-                  checked={formData.is_system}
-                  onCheckedChange={(checked) => setFormData({ ...formData, is_system: checked === true })}
-                  disabled={!isCreateMode}
-                />
-                <div className="space-y-0.5">
-                  <Label htmlFor="is_system" className="text-sm">System Role</Label>
-                  <p className="text-xs text-muted-foreground">Cannot be deleted, reserved for core functions</p>
-                </div>
-              </div>
-              <div className="flex items-center gap-2">
-                <Checkbox
-                  id="is_active"
-                  checked={formData.is_active}
-                  onCheckedChange={(checked) => setFormData({ ...formData, is_active: checked === true })}
-                />
-                <Label htmlFor="is_active" className="text-sm">Active</Label>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle>Permissions (JSON)</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <p className="text-sm text-muted-foreground mb-3">
-              Define permissions as a JSON object. Each key is a type slug, value is an array of allowed actions.
-            </p>
-            <Textarea
-              value={permissionsJson}
-              onChange={(e) => setPermissionsJson(e.target.value)}
-              className="font-mono text-sm"
-              placeholder={`{\n  "item": ["read", "write"],\n  "account": ["read"]\n}`}
-              rows={10}
-            />
-            <p className="text-xs text-muted-foreground mt-2">
-              Example: <code className="bg-muted px-1 py-0.5 rounded">{`{"support_ticket": ["read", "write", "admin"]}`}</code>
-            </p>
-          </CardContent>
-        </Card>
-
-        <div className="flex items-center justify-end gap-3">
-          <Button type="button" variant="secondary" onClick={() => navigate(-1)}>
-            Cancel
-          </Button>
-          <Button type="submit" disabled={isSubmitting}>
-            {isSubmitting ? 'Saving...' : isCreateMode ? 'Create Role' : 'Update Role'}
-          </Button>
-        </div>
-      </form>
-    </div>
-  )
-}

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

@@ -1,292 +0,0 @@
-/**
- * @module src/pages/admin/RolesPage
- * @audience installer
- * @layer frontend-page
- * @stability stable
- *
- * Admin list page for roles. Fetches all roles via `/api/roles?action=list`,
- * applies client-side search and sort, and renders inside `AdminListPage`
- * with stat cards and a sortable table. Row clicks navigate to
- * `/spine-framework/admin/configs/roles/:id`.
- *
- * @seeAlso src/components/admin/AdminListPage.tsx
- * @seeAlso src/pages/admin/RoleDetailPage.tsx
- */
-
-import React, { useState } from 'react'
-import { Plus, ShieldCheck, CheckCircle, XCircle, Settings, FileText, Cog } 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 Role {
-  id: string
-  name: string
-  slug: string
-  description?: string
-  permissions?: Record<string, any>
-  is_system: boolean
-  is_active: boolean
-  app_id?: string
-  app?: any
-  created_at: string
-  updated_at: string
-}
-
-export function RolesPage() {
-  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 roles from API
-  const { data: roles, loading, error, refetch } = useApi<Role[]>(
-    async () => {
-      const response = await apiFetch('/api/roles?action=list')
-      if (!response.ok) throw new Error('Failed to fetch roles')
-      const result = await response.json()
-      return (result.data || result) as Role[]
-    },
-    { immediate: true }
-  )
-
-  const filteredRoles = (roles || []).filter(role => {
-    const matchesSearch = role.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                         role.slug.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                         (role.description?.toLowerCase().includes(searchTerm.toLowerCase()) || false)
-    const matchesStatus = selectedStatus === 'all' || 
-      (selectedStatus === 'active' && role.is_active) ||
-      (selectedStatus === 'inactive' && !role.is_active)
-    const matchesType = selectedType === 'all' ||
-      (selectedType === 'system' && role.is_system) ||
-      (selectedType === 'custom' && !role.is_system)
-    return matchesSearch && matchesStatus && matchesType
-  })
-
-  // Helper functions
-  const getStatusBadge = (role: Role) => {
-    if (!role.is_active) {
-      return <span className="inline-flex px-2 py-0.5 text-xs font-medium rounded-md bg-slate-100 text-slate-600">Inactive</span>
-    }
-    if (role.is_system) {
-      return <span className="inline-flex px-2 py-0.5 text-xs font-medium rounded-md bg-green-100 text-green-700">System</span>
-    }
-    return <span className="inline-flex px-2 py-0.5 text-xs font-medium rounded-md bg-blue-100 text-blue-700">Custom</span>
-  }
-
-  const handleSort = (key: string) => {
-    if (sortKey === key) {
-      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc')
-    } else {
-      setSortKey(key)
-      setSortDirection('asc')
-    }
-  }
-
-  const handleRowClick = (role: Role) => {
-    window.location.href = `/spine-framework/admin/configs/roles/${role.id}`
-  }
-
-  // Sort roles
-  const sortedRoles = [...(filteredRoles || [])].sort((a, b) => {
-    let aValue: any = a[sortKey as keyof Role]
-    let bValue: any = b[sortKey as keyof Role]
-    
-    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 Roles',
-      value: (roles || []).length,
-      icon: ShieldCheck,
-      iconColor: 'text-blue-500'
-    },
-    {
-      title: 'Active',
-      value: (roles || []).filter(r => r.is_active).length,
-      icon: CheckCircle,
-      iconColor: 'text-green-500'
-    },
-    {
-      title: 'System Roles',
-      value: (roles || []).filter(r => r.is_system).length,
-      icon: Cog,
-      iconColor: 'text-purple-500'
-    },
-    {
-      title: 'Custom Roles',
-      value: (roles || []).filter(r => !r.is_system).length,
-      icon: FileText,
-      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: 'system', label: 'System' },
-    { value: 'custom', label: 'Custom' }
-  ]
-
-  const filters = [
-    {
-      label: 'Status',
-      value: selectedStatus,
-      options: statusOptions,
-      onChange: setSelectedStatus
-    },
-    {
-      label: 'Type',
-      value: selectedType,
-      options: typeOptions,
-      onChange: setSelectedType
-    }
-  ]
-
-  return (
-    <AdminListPage
-      title="Roles"
-      description="Manage system and custom roles"
-      newButtonText="Add Role"
-      newButtonHref="/spine-framework/admin/configs/roles/new"
-      statsCards={statsCards}
-      searchPlaceholder="Search roles..."
-      searchValue={searchTerm}
-      onSearchChange={setSearchTerm}
-      filters={filters}
-      loading={loading}
-      error={error}
-      emptyMessage="No roles found"
-      emptyIcon={ShieldCheck}
-    >
-      {sortedRoles.length === 0 ? (
-        <div className="p-8 text-center">
-          <ShieldCheck className="mx-auto h-12 w-12 text-slate-400" />
-          <h3 className="mt-2 text-sm font-medium text-slate-900">No roles 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="Role"
-                sortKey="name"
-                currentSortKey={sortKey}
-                currentSortDirection={sortDirection}
-                onSort={handleSort}
-              />
-              <SortableTableHeader
-                title="Slug"
-                sortKey="slug"
-                currentSortKey={sortKey}
-                currentSortDirection={sortDirection}
-                onSort={handleSort}
-              />
-              <SortableTableHeader
-                title="Type"
-                sortKey="is_system"
-                currentSortKey={sortKey}
-                currentSortDirection={sortDirection}
-                onSort={handleSort}
-              />
-              <SortableTableHeader
-                title="Status"
-                sortKey="is_active"
-                currentSortKey={sortKey}
-                currentSortDirection={sortDirection}
-                onSort={handleSort}
-              />
-              <SortableTableHeader
-                title="Permissions"
-                sortKey="permissions"
-                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">
-            {sortedRoles.map((role) => (
-              <tr 
-                key={role.id} 
-                className="hover:bg-slate-50 cursor-pointer transition-colors"
-                onClick={() => handleRowClick(role)}
-              >
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <div>
-                    <div className="font-medium text-slate-900">
-                      <span className="text-accent-blue hover:text-navy">
-                        {role.name}
-                      </span>
-                    </div>
-                    {role.description && (
-                      <div className="text-sm text-slate-500">{role.description}</div>
-                    )}
-                  </div>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <span className="text-sm text-slate-500 font-mono">{role.slug}</span>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  {getStatusBadge(role)}
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <span className={`inline-flex px-2 py-0.5 text-xs font-medium rounded-md ${
-                    role.is_active 
-                      ? 'bg-green-100 text-green-700' 
-                      : 'bg-slate-100 text-slate-600'
-                  }`}>
-                    {role.is_active ? 'Active' : 'Inactive'}
-                  </span>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">
-                  {Object.keys(role.permissions || {}).length}
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">
-                  {formatDateTime(role.created_at)}
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-right">
-                  <span className="text-slate-400">→</span>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      )}
-    </AdminListPage>
-  )
-}

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

@@ -1,61 +0,0 @@
-/**
- * @module src/pages/admin/SelectTestPage
- * @audience installer
- * @layer frontend-page
- * @stability testing
- *
- * Test page to isolate Select component issues.
- */
-
-import { useState } from 'react'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../components/ui/card'
-import { 
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '../../components/ui/select'
-import { Label } from '../../components/ui/label'
-
-export function SelectTestPage() {
-  const [selected, setSelected] = useState('')
-
-  return (
-    <div className="flex-1 space-y-6 p-8 pt-6">
-      <div className="space-y-2">
-        <h1 className="text-3xl font-bold tracking-tight">Select Component Test</h1>
-        <p className="text-muted-foreground">
-          Testing shadcn Select component only
-        </p>
-      </div>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Select Demo</CardTitle>
-          <CardDescription>Testing Select component functionality</CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div className="space-y-2">
-            <Label htmlFor="select-demo">Choose an option</Label>
-            <Select value={selected} onValueChange={setSelected}>
-              <SelectTrigger id="select-demo">
-                <SelectValue placeholder="Select an option" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="option1">Option 1</SelectItem>
-                <SelectItem value="option2">Option 2</SelectItem>
-                <SelectItem value="option3">Option 3</SelectItem>
-                <SelectItem value="option4">Option 4</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          
-          <div className="text-sm text-muted-foreground">
-            Selected value: {selected || 'none'}
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  )
-}