feat: add procedural flows with intake forms, navigation, and seed templates
Adds a new "procedural" tree type for linear step-by-step project workflows (domain controller setup, M365 onboarding, VPN config, etc). Includes intake form builder, two-panel step navigation, variable resolution, procedural exports, 3 seed templates, and UI rename from "Trees" to "Flows". Also archives 19 implemented plan docs and creates deferred features backlog. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
@@ -1,17 +1,25 @@
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { useState, useEffect, useCallback, useRef } from 'react'
|
||||
import { Link, useLocation, useNavigate, Outlet } from 'react-router-dom'
|
||||
import { useAuthStore } from '@/store/authStore'
|
||||
import { usePermissions } from '@/hooks/usePermissions'
|
||||
import { BrandLogo } from '@/components/common/BrandLogo'
|
||||
import { Menu, X, LogOut, User, Shield } from 'lucide-react'
|
||||
import { Menu, X, LogOut, User, Shield, ChevronDown, FolderTree, ListOrdered, Layers } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface NavItem {
|
||||
path: string
|
||||
label: string
|
||||
children?: { path: string; label: string; icon: React.ReactNode }[]
|
||||
}
|
||||
|
||||
export function AppLayout() {
|
||||
const location = useLocation()
|
||||
const navigate = useNavigate()
|
||||
const { user, logout } = useAuthStore()
|
||||
const { effectiveRole, isSuperAdmin } = usePermissions()
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
||||
const [flowsDropdownOpen, setFlowsDropdownOpen] = useState(false)
|
||||
const flowsDropdownRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
const handleLogout = async () => {
|
||||
setMobileMenuOpen(false)
|
||||
@@ -24,13 +32,30 @@ export function AppLayout() {
|
||||
if (prevPath !== location.pathname) {
|
||||
setPrevPath(location.pathname)
|
||||
if (mobileMenuOpen) setMobileMenuOpen(false)
|
||||
setFlowsDropdownOpen(false)
|
||||
}
|
||||
|
||||
// Close on Escape
|
||||
const handleKeyDown = useCallback((e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') setMobileMenuOpen(false)
|
||||
if (e.key === 'Escape') {
|
||||
setMobileMenuOpen(false)
|
||||
setFlowsDropdownOpen(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
// Close dropdown on outside click
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (e: MouseEvent) => {
|
||||
if (flowsDropdownRef.current && !flowsDropdownRef.current.contains(e.target as Node)) {
|
||||
setFlowsDropdownOpen(false)
|
||||
}
|
||||
}
|
||||
if (flowsDropdownOpen) {
|
||||
document.addEventListener('mousedown', handleClickOutside)
|
||||
}
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside)
|
||||
}, [flowsDropdownOpen])
|
||||
|
||||
useEffect(() => {
|
||||
if (mobileMenuOpen) {
|
||||
document.addEventListener('keydown', handleKeyDown)
|
||||
@@ -44,10 +69,20 @@ export function AppLayout() {
|
||||
}
|
||||
}, [mobileMenuOpen, handleKeyDown])
|
||||
|
||||
const navItems = [
|
||||
const isFlowsActive = location.pathname.startsWith('/trees') || location.pathname.startsWith('/flows')
|
||||
|
||||
const navItems: NavItem[] = [
|
||||
{ path: '/', label: 'Home' },
|
||||
{ path: '/trees', label: 'Trees' },
|
||||
{ path: '/my-trees', label: 'My Trees' },
|
||||
{
|
||||
path: '/trees',
|
||||
label: 'Flows',
|
||||
children: [
|
||||
{ path: '/trees', label: 'All Flows', icon: <Layers className="h-4 w-4 text-white/50" /> },
|
||||
{ path: '/trees?type=troubleshooting', label: 'Troubleshooting', icon: <FolderTree className="h-4 w-4 text-white/50" /> },
|
||||
{ path: '/trees?type=procedural', label: 'Procedures', icon: <ListOrdered className="h-4 w-4 text-white/50" /> },
|
||||
],
|
||||
},
|
||||
{ path: '/my-trees', label: 'My Flows' },
|
||||
{ path: '/sessions', label: 'Sessions' },
|
||||
{ path: '/account', label: 'Account' },
|
||||
...(isSuperAdmin ? [{ path: '/admin', label: 'Admin Panel' }] : []),
|
||||
@@ -84,6 +119,40 @@ export function AppLayout() {
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden items-center gap-1 sm:flex">
|
||||
{navItems.map((item) => {
|
||||
if (item.children) {
|
||||
return (
|
||||
<div key={item.path} className="relative" ref={flowsDropdownRef}>
|
||||
<button
|
||||
onClick={() => setFlowsDropdownOpen(!flowsDropdownOpen)}
|
||||
className={cn(
|
||||
'flex items-center gap-1 rounded-xl px-4 py-2 text-sm font-medium transition-all',
|
||||
isFlowsActive
|
||||
? 'bg-white/10 text-white border border-white/20'
|
||||
: 'text-white/50 hover:text-white hover:bg-white/[0.06]'
|
||||
)}
|
||||
>
|
||||
{item.label}
|
||||
<ChevronDown className={cn('h-3.5 w-3.5 transition-transform', flowsDropdownOpen && 'rotate-180')} />
|
||||
</button>
|
||||
{flowsDropdownOpen && (
|
||||
<div className="absolute left-0 z-50 mt-1 w-52 rounded-lg border border-white/10 bg-black/95 p-1 shadow-xl backdrop-blur-sm">
|
||||
{item.children.map((child) => (
|
||||
<Link
|
||||
key={child.path}
|
||||
to={child.path}
|
||||
onClick={() => setFlowsDropdownOpen(false)}
|
||||
className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-white/70 hover:bg-white/10 hover:text-white"
|
||||
>
|
||||
{child.icon}
|
||||
{child.label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const isActive = item.path === '/'
|
||||
? location.pathname === '/'
|
||||
: location.pathname.startsWith(item.path)
|
||||
@@ -200,6 +269,34 @@ export function AppLayout() {
|
||||
{/* Nav items */}
|
||||
<div className="space-y-1">
|
||||
{navItems.map((item) => {
|
||||
if (item.children) {
|
||||
return (
|
||||
<div key={item.path}>
|
||||
<div className={cn(
|
||||
'px-4 py-2 text-xs font-semibold uppercase tracking-wider',
|
||||
isFlowsActive ? 'text-white/60' : 'text-white/30'
|
||||
)}>
|
||||
{item.label}
|
||||
</div>
|
||||
<div className="space-y-0.5">
|
||||
{item.children.map((child) => (
|
||||
<Link
|
||||
key={child.path}
|
||||
to={child.path}
|
||||
className={cn(
|
||||
'flex items-center gap-3 rounded-xl px-4 py-3 text-sm font-medium transition-all ml-1',
|
||||
'text-white/50 hover:text-white hover:bg-white/[0.06]'
|
||||
)}
|
||||
>
|
||||
{child.icon}
|
||||
{child.label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const isActive = item.path === '/'
|
||||
? location.pathname === '/'
|
||||
: location.pathname.startsWith(item.path)
|
||||
|
||||
@@ -8,7 +8,7 @@ import { usePermissions } from '@/hooks/usePermissions'
|
||||
|
||||
interface TreeGridViewProps {
|
||||
trees: TreeListItem[]
|
||||
onStartSession: (treeId: string) => void
|
||||
onStartSession: (treeId: string, treeType?: string) => void
|
||||
onTagClick: (tag: string) => void
|
||||
onFolderCreated: (parentId?: string | null) => void
|
||||
onDeleteTree: (tree: TreeListItem) => void
|
||||
@@ -119,7 +119,7 @@ export function TreeGridView({
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onStartSession(tree.id)}
|
||||
onClick={() => onStartSession(tree.id, tree.tree_type)}
|
||||
className={cn(
|
||||
'rounded-md bg-white px-3 py-2 text-sm font-medium text-black',
|
||||
'hover:bg-white/90'
|
||||
|
||||
@@ -8,7 +8,7 @@ import { usePermissions } from '@/hooks/usePermissions'
|
||||
|
||||
interface TreeListViewProps {
|
||||
trees: TreeListItem[]
|
||||
onStartSession: (treeId: string) => void
|
||||
onStartSession: (treeId: string, treeType?: string) => void
|
||||
onTagClick: (tag: string) => void
|
||||
onFolderCreated: (parentId?: string | null) => void
|
||||
onDeleteTree: (tree: TreeListItem) => void
|
||||
@@ -123,7 +123,7 @@ export function TreeListView({
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onStartSession(tree.id)}
|
||||
onClick={() => onStartSession(tree.id, tree.tree_type)}
|
||||
className={cn(
|
||||
'rounded-md bg-white px-3 py-1.5 text-sm font-medium text-black',
|
||||
'hover:bg-white/90 whitespace-nowrap'
|
||||
|
||||
@@ -9,7 +9,7 @@ import { usePermissions } from '@/hooks/usePermissions'
|
||||
|
||||
interface TreeTableViewProps {
|
||||
trees: TreeListItem[]
|
||||
onStartSession: (treeId: string) => void
|
||||
onStartSession: (treeId: string, treeType?: string) => void
|
||||
onTagClick: (tag: string) => void
|
||||
onFolderCreated: (parentId?: string | null) => void
|
||||
onDeleteTree: (tree: TreeListItem) => void
|
||||
@@ -227,7 +227,7 @@ export function TreeTableView({
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onStartSession(tree.id)}
|
||||
onClick={() => onStartSession(tree.id, tree.tree_type)}
|
||||
className={cn(
|
||||
'rounded-md bg-white px-3 py-1.5 text-xs font-medium text-black',
|
||||
'hover:bg-white/90 whitespace-nowrap'
|
||||
|
||||
154
frontend/src/components/procedural-editor/IntakeFieldEditor.tsx
Normal file
154
frontend/src/components/procedural-editor/IntakeFieldEditor.tsx
Normal file
@@ -0,0 +1,154 @@
|
||||
import { GripVertical, Trash2, ChevronDown, ChevronUp } from 'lucide-react'
|
||||
import { useState } from 'react'
|
||||
import type { IntakeFormField, IntakeFieldType } from '@/types'
|
||||
|
||||
const FIELD_TYPE_OPTIONS: { value: IntakeFieldType; label: string }[] = [
|
||||
{ value: 'text', label: 'Text' },
|
||||
{ value: 'textarea', label: 'Text Area' },
|
||||
{ value: 'number', label: 'Number' },
|
||||
{ value: 'ip_address', label: 'IP Address' },
|
||||
{ value: 'email', label: 'Email' },
|
||||
{ value: 'select', label: 'Select (Dropdown)' },
|
||||
{ value: 'multi_select', label: 'Multi-Select' },
|
||||
{ value: 'checkbox', label: 'Checkbox' },
|
||||
{ value: 'password', label: 'Password' },
|
||||
]
|
||||
|
||||
interface IntakeFieldEditorProps {
|
||||
field: IntakeFormField
|
||||
onUpdate: (updates: Partial<IntakeFormField>) => void
|
||||
onRemove: () => void
|
||||
}
|
||||
|
||||
export function IntakeFieldEditor({ field, onUpdate, onRemove }: IntakeFieldEditorProps) {
|
||||
const [expanded, setExpanded] = useState(false)
|
||||
const needsOptions = field.field_type === 'select' || field.field_type === 'multi_select'
|
||||
|
||||
return (
|
||||
<div className="glass-card rounded-xl p-3">
|
||||
{/* Header row */}
|
||||
<div className="flex items-center gap-2">
|
||||
<GripVertical className="h-4 w-4 shrink-0 cursor-grab text-white/30" />
|
||||
|
||||
<input
|
||||
type="text"
|
||||
value={field.label}
|
||||
onChange={(e) => onUpdate({ label: e.target.value })}
|
||||
placeholder="Field label"
|
||||
className="min-w-0 flex-1 rounded border border-white/10 bg-black/50 px-2 py-1.5 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
|
||||
/>
|
||||
|
||||
<select
|
||||
value={field.field_type}
|
||||
onChange={(e) => onUpdate({ field_type: e.target.value as IntakeFieldType })}
|
||||
className="rounded border border-white/10 bg-black/50 px-2 py-1.5 text-sm text-white focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
|
||||
>
|
||||
{FIELD_TYPE_OPTIONS.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>{opt.label}</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<label className="flex items-center gap-1 text-xs text-white/50">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={field.required}
|
||||
onChange={(e) => onUpdate({ required: e.target.checked })}
|
||||
className="rounded border-white/20"
|
||||
/>
|
||||
Req
|
||||
</label>
|
||||
|
||||
<button
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
className="rounded p-1 text-white/40 hover:bg-white/10 hover:text-white"
|
||||
>
|
||||
{expanded ? <ChevronUp className="h-3.5 w-3.5" /> : <ChevronDown className="h-3.5 w-3.5" />}
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={onRemove}
|
||||
className="rounded p-1 text-white/40 hover:bg-red-500/20 hover:text-red-400"
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Expanded details */}
|
||||
{expanded && (
|
||||
<div className="mt-3 grid grid-cols-2 gap-3 border-t border-white/[0.06] pt-3">
|
||||
<div>
|
||||
<label className="mb-1 block text-xs text-white/50">Variable Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={field.variable_name}
|
||||
onChange={(e) => onUpdate({ variable_name: e.target.value.toLowerCase().replace(/[^a-z0-9_]/g, '') })}
|
||||
placeholder="e.g. server_name"
|
||||
className="w-full rounded border border-white/10 bg-black/50 px-2 py-1.5 text-sm font-mono text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
|
||||
/>
|
||||
<p className="mt-0.5 text-[10px] text-white/30">Used as [VAR:{field.variable_name}]</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1 block text-xs text-white/50">Placeholder</label>
|
||||
<input
|
||||
type="text"
|
||||
value={field.placeholder || ''}
|
||||
onChange={(e) => onUpdate({ placeholder: e.target.value || undefined })}
|
||||
placeholder="Hint text"
|
||||
className="w-full rounded border border-white/10 bg-black/50 px-2 py-1.5 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-span-2">
|
||||
<label className="mb-1 block text-xs text-white/50">Help Text</label>
|
||||
<input
|
||||
type="text"
|
||||
value={field.help_text || ''}
|
||||
onChange={(e) => onUpdate({ help_text: e.target.value || undefined })}
|
||||
placeholder="Description or instructions"
|
||||
className="w-full rounded border border-white/10 bg-black/50 px-2 py-1.5 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1 block text-xs text-white/50">Default Value</label>
|
||||
<input
|
||||
type="text"
|
||||
value={field.default_value || ''}
|
||||
onChange={(e) => onUpdate({ default_value: e.target.value || undefined })}
|
||||
placeholder="Pre-filled value"
|
||||
className="w-full rounded border border-white/10 bg-black/50 px-2 py-1.5 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1 block text-xs text-white/50">Group Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={field.group_name || ''}
|
||||
onChange={(e) => onUpdate({ group_name: e.target.value || undefined })}
|
||||
placeholder="e.g. Network Settings"
|
||||
className="w-full rounded border border-white/10 bg-black/50 px-2 py-1.5 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{needsOptions && (
|
||||
<div className="col-span-2">
|
||||
<label className="mb-1 block text-xs text-white/50">Options (one per line)</label>
|
||||
<textarea
|
||||
value={(field.options || []).join('\n')}
|
||||
onChange={(e) => {
|
||||
const options = e.target.value.split('\n').filter((o) => o.trim())
|
||||
onUpdate({ options: options.length > 0 ? options : undefined })
|
||||
}}
|
||||
placeholder="Option 1 Option 2 Option 3"
|
||||
rows={3}
|
||||
className="w-full rounded border border-white/10 bg-black/50 px-2 py-1.5 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import { Plus, FileText } from 'lucide-react'
|
||||
import { IntakeFieldEditor } from './IntakeFieldEditor'
|
||||
import { useProceduralEditorStore } from '@/store/proceduralEditorStore'
|
||||
|
||||
export function IntakeFormBuilder() {
|
||||
const { intakeForm, addField, removeField, updateField } = useProceduralEditorStore()
|
||||
|
||||
return (
|
||||
<div className="glass-card rounded-2xl p-4 sm:p-6">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<FileText className="h-5 w-5 text-white/50" />
|
||||
<h2 className="text-lg font-semibold text-white">Intake Form</h2>
|
||||
<span className="text-sm text-white/40">
|
||||
({intakeForm.length} field{intakeForm.length !== 1 ? 's' : ''})
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={addField}
|
||||
className="flex items-center gap-1.5 rounded-md border border-white/10 px-3 py-1.5 text-sm text-white/60 hover:bg-white/10 hover:text-white"
|
||||
>
|
||||
<Plus className="h-3.5 w-3.5" />
|
||||
Add Field
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{intakeForm.length === 0 ? (
|
||||
<div className="rounded-lg border border-dashed border-white/10 bg-white/[0.02] py-8 text-center">
|
||||
<FileText className="mx-auto mb-2 h-8 w-8 text-white/20" />
|
||||
<p className="text-sm text-white/40">No intake form fields yet</p>
|
||||
<p className="mt-1 text-xs text-white/30">
|
||||
Add fields to collect project data before the procedure starts
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{intakeForm.map((field, index) => (
|
||||
<IntakeFieldEditor
|
||||
key={field.variable_name + '-' + index}
|
||||
field={field}
|
||||
onUpdate={(updates) => updateField(field.variable_name, updates)}
|
||||
onRemove={() => removeField(field.variable_name)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
233
frontend/src/components/procedural-editor/StepEditor.tsx
Normal file
233
frontend/src/components/procedural-editor/StepEditor.tsx
Normal file
@@ -0,0 +1,233 @@
|
||||
import { ChevronUp, AlertTriangle, Clock, ExternalLink, CheckSquare, Terminal, Type } from 'lucide-react'
|
||||
import type { ProceduralStep, StepContentType, IntakeFormField } from '@/types'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const CONTENT_TYPE_OPTIONS: { value: StepContentType; label: string; color: string }[] = [
|
||||
{ value: 'action', label: 'Action', color: 'text-blue-400' },
|
||||
{ value: 'informational', label: 'Info', color: 'text-white/60' },
|
||||
{ value: 'verification', label: 'Verify', color: 'text-emerald-400' },
|
||||
{ value: 'warning', label: 'Warning', color: 'text-yellow-400' },
|
||||
]
|
||||
|
||||
interface StepEditorProps {
|
||||
step: ProceduralStep
|
||||
stepNumber: number
|
||||
onUpdate: (updates: Partial<ProceduralStep>) => void
|
||||
onCollapse: () => void
|
||||
availableVariables: IntakeFormField[]
|
||||
}
|
||||
|
||||
export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVariables }: StepEditorProps) {
|
||||
return (
|
||||
<div className="glass-card rounded-xl border border-white/10 p-4">
|
||||
{/* Header */}
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-white/10 text-xs font-medium text-white">
|
||||
{stepNumber}
|
||||
</span>
|
||||
<span className="text-sm font-medium text-white">Edit Step</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={onCollapse}
|
||||
className="rounded p-1 text-white/40 hover:bg-white/10 hover:text-white"
|
||||
>
|
||||
<ChevronUp className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Title */}
|
||||
<div>
|
||||
<label className="mb-1 block text-xs font-medium text-white/50">Title</label>
|
||||
<input
|
||||
type="text"
|
||||
value={step.title}
|
||||
onChange={(e) => onUpdate({ title: e.target.value })}
|
||||
className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Content type + Section header row */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="mb-1 block text-xs font-medium text-white/50">Content Type</label>
|
||||
<div className="flex gap-1">
|
||||
{CONTENT_TYPE_OPTIONS.map((opt) => (
|
||||
<button
|
||||
key={opt.value}
|
||||
onClick={() => onUpdate({ content_type: opt.value })}
|
||||
className={cn(
|
||||
'rounded px-2 py-1 text-xs font-medium transition-colors',
|
||||
step.content_type === opt.value
|
||||
? 'bg-white/15 ' + opt.color
|
||||
: 'text-white/40 hover:bg-white/10 hover:text-white/60'
|
||||
)}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1 flex items-center gap-1 text-xs font-medium text-white/50">
|
||||
<Clock className="h-3 w-3" />
|
||||
Est. Minutes
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={step.estimated_minutes || ''}
|
||||
onChange={(e) => onUpdate({ estimated_minutes: e.target.value ? parseInt(e.target.value) : undefined })}
|
||||
placeholder="—"
|
||||
min={1}
|
||||
className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Section Header */}
|
||||
<div>
|
||||
<label className="mb-1 flex items-center gap-1 text-xs font-medium text-white/50">
|
||||
<Type className="h-3 w-3" />
|
||||
Section Header (optional)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={step.section_header || ''}
|
||||
onChange={(e) => onUpdate({ section_header: e.target.value || undefined })}
|
||||
placeholder="e.g. Phase 2: AD Configuration"
|
||||
className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div>
|
||||
<label className="mb-1 block text-xs font-medium text-white/50">Description / Instructions</label>
|
||||
<textarea
|
||||
value={step.description || ''}
|
||||
onChange={(e) => onUpdate({ description: e.target.value })}
|
||||
placeholder="Step instructions. Use [VAR:name] for variables."
|
||||
rows={4}
|
||||
className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
|
||||
/>
|
||||
{availableVariables.length > 0 && (
|
||||
<div className="mt-1 flex flex-wrap gap-1">
|
||||
<span className="text-[10px] text-white/30">Variables:</span>
|
||||
{availableVariables.map((v) => (
|
||||
<button
|
||||
key={v.variable_name}
|
||||
onClick={() => onUpdate({ description: (step.description || '') + `[VAR:${v.variable_name}]` })}
|
||||
className="rounded bg-white/5 px-1.5 py-0.5 font-mono text-[10px] text-white/50 hover:bg-white/10 hover:text-white/70"
|
||||
>
|
||||
{v.variable_name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Warning text */}
|
||||
{(step.content_type === 'warning' || step.warning_text) && (
|
||||
<div>
|
||||
<label className="mb-1 flex items-center gap-1 text-xs font-medium text-yellow-400/70">
|
||||
<AlertTriangle className="h-3 w-3" />
|
||||
Warning Text
|
||||
</label>
|
||||
<textarea
|
||||
value={step.warning_text || ''}
|
||||
onChange={(e) => onUpdate({ warning_text: e.target.value || undefined })}
|
||||
placeholder="Caution: This will restart the service..."
|
||||
rows={2}
|
||||
className="w-full rounded border border-yellow-400/20 bg-yellow-400/5 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-yellow-400/30 focus:outline-none focus:ring-1 focus:ring-yellow-400/20"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Commands */}
|
||||
<div>
|
||||
<label className="mb-1 flex items-center gap-1 text-xs font-medium text-white/50">
|
||||
<Terminal className="h-3 w-3" />
|
||||
Commands (optional)
|
||||
</label>
|
||||
<textarea
|
||||
value={typeof step.commands === 'string' ? step.commands : (Array.isArray(step.commands) ? step.commands.map(c => c.code).join('\n\n') : '')}
|
||||
onChange={(e) => onUpdate({ commands: e.target.value || undefined })}
|
||||
placeholder="Install-WindowsFeature AD-Domain-Services -IncludeManagementTools"
|
||||
rows={3}
|
||||
className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 font-mono text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Expected Outcome */}
|
||||
<div>
|
||||
<label className="mb-1 block text-xs font-medium text-white/50">Expected Outcome (optional)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={step.expected_outcome || ''}
|
||||
onChange={(e) => onUpdate({ expected_outcome: e.target.value || undefined })}
|
||||
placeholder="Server should respond with..."
|
||||
className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Verification */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="mb-1 flex items-center gap-1 text-xs font-medium text-white/50">
|
||||
<CheckSquare className="h-3 w-3" />
|
||||
Verification Prompt (optional)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={step.verification_prompt || ''}
|
||||
onChange={(e) => onUpdate({ verification_prompt: e.target.value || undefined })}
|
||||
placeholder="Confirm the role was installed"
|
||||
className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="mb-1 block text-xs font-medium text-white/50">Verification Type</label>
|
||||
<select
|
||||
value={step.verification_type || ''}
|
||||
onChange={(e) => onUpdate({ verification_type: e.target.value as 'checkbox' | 'text_input' || undefined })}
|
||||
className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 text-sm text-white focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
|
||||
>
|
||||
<option value="">None</option>
|
||||
<option value="checkbox">Checkbox (confirm done)</option>
|
||||
<option value="text_input">Text input (enter value)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Reference URL + Notes toggle */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="mb-1 flex items-center gap-1 text-xs font-medium text-white/50">
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
Reference URL (optional)
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
value={step.reference_url || ''}
|
||||
onChange={(e) => onUpdate({ reference_url: e.target.value || undefined })}
|
||||
placeholder="https://learn.microsoft.com/..."
|
||||
className="w-full rounded border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-end pb-1">
|
||||
<label className="flex items-center gap-2 text-sm text-white/60">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={step.notes_enabled !== false}
|
||||
onChange={(e) => onUpdate({ notes_enabled: e.target.checked })}
|
||||
className="rounded border-white/20"
|
||||
/>
|
||||
Allow tech notes
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
158
frontend/src/components/procedural-editor/StepList.tsx
Normal file
158
frontend/src/components/procedural-editor/StepList.tsx
Normal file
@@ -0,0 +1,158 @@
|
||||
import { Plus, GripVertical, Trash2, ChevronDown, CheckCircle2, AlertTriangle, Info, Zap, Shield } from 'lucide-react'
|
||||
import type { StepContentType } from '@/types'
|
||||
import { StepEditor } from './StepEditor'
|
||||
import { useProceduralEditorStore } from '@/store/proceduralEditorStore'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const contentTypeConfig: Record<StepContentType, { icon: typeof Zap; color: string; label: string }> = {
|
||||
action: { icon: Zap, color: 'text-blue-400', label: 'Action' },
|
||||
informational: { icon: Info, color: 'text-white/50', label: 'Info' },
|
||||
verification: { icon: CheckCircle2, color: 'text-emerald-400', label: 'Verify' },
|
||||
warning: { icon: AlertTriangle, color: 'text-yellow-400', label: 'Warning' },
|
||||
}
|
||||
|
||||
export function StepList() {
|
||||
const {
|
||||
steps,
|
||||
intakeForm,
|
||||
expandedStepId,
|
||||
setExpandedStepId,
|
||||
addStep,
|
||||
removeStep,
|
||||
updateStep,
|
||||
} = useProceduralEditorStore()
|
||||
|
||||
const procedureSteps = steps.filter((s) => s.type === 'procedure_step')
|
||||
|
||||
return (
|
||||
<div className="glass-card rounded-2xl p-4 sm:p-6">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Shield className="h-5 w-5 text-white/50" />
|
||||
<h2 className="text-lg font-semibold text-white">Steps</h2>
|
||||
<span className="text-sm text-white/40">
|
||||
({procedureSteps.length} step{procedureSteps.length !== 1 ? 's' : ''})
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => addStep()}
|
||||
className="flex items-center gap-1.5 rounded-md border border-white/10 px-3 py-1.5 text-sm text-white/60 hover:bg-white/10 hover:text-white"
|
||||
>
|
||||
<Plus className="h-3.5 w-3.5" />
|
||||
Add Step
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{steps.map((step, index) => {
|
||||
if (step.type === 'procedure_end') {
|
||||
// Render end step as a simple footer
|
||||
return (
|
||||
<div
|
||||
key={step.id}
|
||||
className="flex items-center gap-2 rounded-lg border border-dashed border-white/10 bg-white/[0.02] px-3 py-2"
|
||||
>
|
||||
<CheckCircle2 className="h-4 w-4 text-emerald-400/50" />
|
||||
<input
|
||||
type="text"
|
||||
value={step.title}
|
||||
onChange={(e) => updateStep(step.id, { title: e.target.value })}
|
||||
className="flex-1 bg-transparent text-sm text-white/50 focus:outline-none"
|
||||
placeholder="Procedure Complete"
|
||||
/>
|
||||
<span className="text-[10px] text-white/30">END</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const isExpanded = expandedStepId === step.id
|
||||
const contentType = step.content_type || 'action'
|
||||
const config = contentTypeConfig[contentType]
|
||||
const Icon = config.icon
|
||||
const stepNumber = index + 1
|
||||
|
||||
if (isExpanded) {
|
||||
return (
|
||||
<div key={step.id}>
|
||||
{step.section_header && (
|
||||
<div className="mb-2 mt-4 border-b border-white/[0.06] pb-1 text-xs font-semibold uppercase tracking-wider text-white/40">
|
||||
{step.section_header}
|
||||
</div>
|
||||
)}
|
||||
<StepEditor
|
||||
step={step}
|
||||
stepNumber={stepNumber}
|
||||
onUpdate={(updates) => updateStep(step.id, updates)}
|
||||
onCollapse={() => setExpandedStepId(null)}
|
||||
availableVariables={intakeForm}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div key={step.id}>
|
||||
{step.section_header && (
|
||||
<div className="mb-2 mt-4 border-b border-white/[0.06] pb-1 text-xs font-semibold uppercase tracking-wider text-white/40">
|
||||
{step.section_header}
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className={cn(
|
||||
'group flex items-center gap-2 rounded-xl border border-white/[0.06] px-3 py-2.5 transition-colors',
|
||||
'hover:border-white/10 hover:bg-white/[0.03]'
|
||||
)}
|
||||
>
|
||||
<GripVertical className="h-4 w-4 shrink-0 cursor-grab text-white/20 group-hover:text-white/40" />
|
||||
|
||||
<span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-white/10 text-xs font-medium text-white/70">
|
||||
{stepNumber}
|
||||
</span>
|
||||
|
||||
<span className={cn('shrink-0', config.color)}>
|
||||
<Icon className="h-3.5 w-3.5" />
|
||||
</span>
|
||||
|
||||
<span
|
||||
className="min-w-0 flex-1 cursor-pointer truncate text-sm text-white"
|
||||
onClick={() => setExpandedStepId(step.id)}
|
||||
>
|
||||
{step.title || 'Untitled step'}
|
||||
</span>
|
||||
|
||||
{step.estimated_minutes && (
|
||||
<span className="shrink-0 text-[10px] text-white/30">
|
||||
~{step.estimated_minutes}m
|
||||
</span>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={() => setExpandedStepId(step.id)}
|
||||
className="shrink-0 rounded p-1 text-white/30 hover:bg-white/10 hover:text-white"
|
||||
>
|
||||
<ChevronDown className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => removeStep(step.id)}
|
||||
className="shrink-0 rounded p-1 text-white/30 opacity-0 hover:bg-red-500/20 hover:text-red-400 group-hover:opacity-100"
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Add step button at bottom */}
|
||||
<button
|
||||
onClick={() => addStep()}
|
||||
className="mt-3 flex w-full items-center justify-center gap-1.5 rounded-lg border border-dashed border-white/10 py-2 text-sm text-white/40 transition-colors hover:border-white/20 hover:text-white/60"
|
||||
>
|
||||
<Plus className="h-3.5 w-3.5" />
|
||||
Add Step
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
147
frontend/src/components/procedural/CompletionSummary.tsx
Normal file
147
frontend/src/components/procedural/CompletionSummary.tsx
Normal file
@@ -0,0 +1,147 @@
|
||||
import { CheckCircle2, Clock, FileText, Download } from 'lucide-react'
|
||||
import type { ProceduralStep } from '@/types'
|
||||
|
||||
interface StepCompletion {
|
||||
stepId: string
|
||||
notes: string
|
||||
verificationValue: string
|
||||
completedAt: string
|
||||
}
|
||||
|
||||
interface CompletionSummaryProps {
|
||||
treeName: string
|
||||
steps: ProceduralStep[]
|
||||
completions: Map<string, StepCompletion>
|
||||
variables: Record<string, string>
|
||||
startedAt: string
|
||||
completedAt: string
|
||||
onExport: () => void
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export function CompletionSummary({
|
||||
treeName,
|
||||
steps,
|
||||
completions,
|
||||
variables,
|
||||
startedAt,
|
||||
completedAt,
|
||||
onExport,
|
||||
onClose,
|
||||
}: CompletionSummaryProps) {
|
||||
const procedureSteps = steps.filter((s) => s.type === 'procedure_step')
|
||||
|
||||
// Parse backend timestamp — ensure UTC if no timezone info
|
||||
const parseTs = (ts: string) => {
|
||||
if (!ts.endsWith('Z') && !ts.includes('+') && !/\d{2}:\d{2}$/.test(ts.slice(-5))) {
|
||||
return new Date(ts + 'Z')
|
||||
}
|
||||
return new Date(ts)
|
||||
}
|
||||
|
||||
const start = parseTs(startedAt)
|
||||
const end = parseTs(completedAt)
|
||||
const totalMinutes = Math.max(0, Math.round((end.getTime() - start.getTime()) / 60000))
|
||||
|
||||
const formatTime = (minutes: number) => {
|
||||
if (minutes < 1) return '<1 minute'
|
||||
if (minutes < 60) return `${minutes} minute${minutes !== 1 ? 's' : ''}`
|
||||
const h = Math.floor(minutes / 60)
|
||||
const m = minutes % 60
|
||||
return m > 0 ? `${h}h ${m}m` : `${h} hour${h > 1 ? 's' : ''}`
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-2xl space-y-6">
|
||||
{/* Success header */}
|
||||
<div className="text-center">
|
||||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-emerald-400/10">
|
||||
<CheckCircle2 className="h-8 w-8 text-emerald-400" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white">Procedure Complete</h1>
|
||||
<p className="mt-1 text-white/40">{treeName}</p>
|
||||
</div>
|
||||
|
||||
{/* Summary stats */}
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<div className="glass-card rounded-xl p-3 text-center">
|
||||
<CheckCircle2 className="mx-auto mb-1 h-5 w-5 text-emerald-400" />
|
||||
<div className="text-lg font-semibold text-white">{procedureSteps.length}</div>
|
||||
<div className="text-xs text-white/40">Steps Completed</div>
|
||||
</div>
|
||||
<div className="glass-card rounded-xl p-3 text-center">
|
||||
<Clock className="mx-auto mb-1 h-5 w-5 text-white/50" />
|
||||
<div className="text-lg font-semibold text-white">{formatTime(totalMinutes)}</div>
|
||||
<div className="text-xs text-white/40">Total Time</div>
|
||||
</div>
|
||||
<div className="glass-card rounded-xl p-3 text-center">
|
||||
<FileText className="mx-auto mb-1 h-5 w-5 text-white/50" />
|
||||
<div className="text-lg font-semibold text-white">{Object.keys(variables).length}</div>
|
||||
<div className="text-xs text-white/40">Parameters</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Project parameters */}
|
||||
{Object.keys(variables).length > 0 && (
|
||||
<div className="glass-card rounded-xl p-4">
|
||||
<h3 className="mb-3 text-sm font-semibold text-white/60">Project Parameters</h3>
|
||||
<div className="space-y-1.5">
|
||||
{Object.entries(variables).map(([key, value]) => (
|
||||
<div key={key} className="flex items-baseline justify-between gap-4 text-sm">
|
||||
<span className="font-mono text-white/40">{key}</span>
|
||||
<span className="text-right text-white/70">{value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step details */}
|
||||
<div className="glass-card rounded-xl p-4">
|
||||
<h3 className="mb-3 text-sm font-semibold text-white/60">Step Summary</h3>
|
||||
<div className="space-y-2">
|
||||
{procedureSteps.map((step, index) => {
|
||||
const completion = completions.get(step.id)
|
||||
return (
|
||||
<div key={step.id} className="flex items-start gap-2 text-sm">
|
||||
<CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-emerald-400" />
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-white/70">
|
||||
{index + 1}. {step.title}
|
||||
</span>
|
||||
</div>
|
||||
{completion?.notes && (
|
||||
<p className="mt-0.5 text-xs text-white/30">Note: {completion.notes}</p>
|
||||
)}
|
||||
{completion?.verificationValue && (
|
||||
<p className="mt-0.5 text-xs text-white/30">
|
||||
Verified: {completion.verificationValue}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={onExport}
|
||||
className="flex flex-1 items-center justify-center gap-2 rounded-lg border border-white/10 px-4 py-2.5 text-sm font-medium text-white/60 hover:bg-white/10 hover:text-white"
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
Export Report
|
||||
</button>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="flex flex-1 items-center justify-center gap-2 rounded-lg bg-white px-4 py-2.5 text-sm font-medium text-black hover:bg-white/90"
|
||||
>
|
||||
Done
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
249
frontend/src/components/procedural/IntakeFormModal.tsx
Normal file
249
frontend/src/components/procedural/IntakeFormModal.tsx
Normal file
@@ -0,0 +1,249 @@
|
||||
import { useState } from 'react'
|
||||
import type { IntakeFormField } from '@/types'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface IntakeFormModalProps {
|
||||
isOpen: boolean
|
||||
fields: IntakeFormField[]
|
||||
treeName: string
|
||||
onSubmit: (variables: Record<string, string>) => void
|
||||
onCancel: () => void
|
||||
}
|
||||
|
||||
export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }: IntakeFormModalProps) {
|
||||
const [values, setValues] = useState<Record<string, string>>(() => {
|
||||
const initial: Record<string, string> = {}
|
||||
for (const field of fields) {
|
||||
initial[field.variable_name] = field.default_value || ''
|
||||
}
|
||||
return initial
|
||||
})
|
||||
const [errors, setErrors] = useState<Record<string, string>>({})
|
||||
|
||||
if (!isOpen) return null
|
||||
|
||||
const setValue = (variableName: string, value: string) => {
|
||||
setValues((prev) => ({ ...prev, [variableName]: value }))
|
||||
if (errors[variableName]) {
|
||||
setErrors((prev) => {
|
||||
const next = { ...prev }
|
||||
delete next[variableName]
|
||||
return next
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const validate = (): boolean => {
|
||||
const newErrors: Record<string, string> = {}
|
||||
for (const field of fields) {
|
||||
const val = values[field.variable_name]?.trim()
|
||||
if (field.required && !val) {
|
||||
newErrors[field.variable_name] = `${field.label} is required`
|
||||
}
|
||||
}
|
||||
setErrors(newErrors)
|
||||
return Object.keys(newErrors).length === 0
|
||||
}
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (validate()) {
|
||||
// Only include non-empty values
|
||||
const cleanValues: Record<string, string> = {}
|
||||
for (const [key, val] of Object.entries(values)) {
|
||||
if (val.trim()) cleanValues[key] = val.trim()
|
||||
}
|
||||
onSubmit(cleanValues)
|
||||
}
|
||||
}
|
||||
|
||||
// Group fields by group_name
|
||||
const groups = new Map<string, IntakeFormField[]>()
|
||||
for (const field of fields) {
|
||||
const group = field.group_name || ''
|
||||
if (!groups.has(group)) groups.set(group, [])
|
||||
groups.get(group)!.push(field)
|
||||
}
|
||||
|
||||
const renderField = (field: IntakeFormField) => {
|
||||
const value = values[field.variable_name] || ''
|
||||
const error = errors[field.variable_name]
|
||||
|
||||
const baseInputClass = cn(
|
||||
'w-full rounded-lg border bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:outline-none focus:ring-1',
|
||||
error
|
||||
? 'border-red-400/50 focus:border-red-400 focus:ring-red-400/20'
|
||||
: 'border-white/10 focus:border-white/30 focus:ring-white/20'
|
||||
)
|
||||
|
||||
let input: React.ReactNode
|
||||
|
||||
switch (field.field_type) {
|
||||
case 'textarea':
|
||||
input = (
|
||||
<textarea
|
||||
value={value}
|
||||
onChange={(e) => setValue(field.variable_name, e.target.value)}
|
||||
placeholder={field.placeholder}
|
||||
rows={3}
|
||||
className={baseInputClass}
|
||||
/>
|
||||
)
|
||||
break
|
||||
|
||||
case 'number':
|
||||
input = (
|
||||
<input
|
||||
type="number"
|
||||
value={value}
|
||||
onChange={(e) => setValue(field.variable_name, e.target.value)}
|
||||
placeholder={field.placeholder}
|
||||
className={baseInputClass}
|
||||
/>
|
||||
)
|
||||
break
|
||||
|
||||
case 'checkbox':
|
||||
input = (
|
||||
<label className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={value === 'true'}
|
||||
onChange={(e) => setValue(field.variable_name, e.target.checked ? 'true' : 'false')}
|
||||
className="rounded border-white/20"
|
||||
/>
|
||||
<span className="text-sm text-white/70">{field.placeholder || field.label}</span>
|
||||
</label>
|
||||
)
|
||||
break
|
||||
|
||||
case 'password':
|
||||
input = (
|
||||
<input
|
||||
type="password"
|
||||
value={value}
|
||||
onChange={(e) => setValue(field.variable_name, e.target.value)}
|
||||
placeholder={field.placeholder}
|
||||
className={baseInputClass}
|
||||
/>
|
||||
)
|
||||
break
|
||||
|
||||
case 'select':
|
||||
input = (
|
||||
<select
|
||||
value={value}
|
||||
onChange={(e) => setValue(field.variable_name, e.target.value)}
|
||||
className={baseInputClass}
|
||||
>
|
||||
<option value="">{field.placeholder || 'Select...'}</option>
|
||||
{(field.options || []).map((opt) => (
|
||||
<option key={opt} value={opt}>{opt}</option>
|
||||
))}
|
||||
</select>
|
||||
)
|
||||
break
|
||||
|
||||
case 'multi_select':
|
||||
input = (
|
||||
<div className="space-y-1">
|
||||
{(field.options || []).map((opt) => {
|
||||
const selected = value.split(',').filter(Boolean)
|
||||
const isChecked = selected.includes(opt)
|
||||
return (
|
||||
<label key={opt} className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isChecked}
|
||||
onChange={() => {
|
||||
const next = isChecked
|
||||
? selected.filter((s) => s !== opt)
|
||||
: [...selected, opt]
|
||||
setValue(field.variable_name, next.join(','))
|
||||
}}
|
||||
className="rounded border-white/20"
|
||||
/>
|
||||
<span className="text-sm text-white/70">{opt}</span>
|
||||
</label>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
break
|
||||
|
||||
default: // text, ip_address, email
|
||||
input = (
|
||||
<input
|
||||
type={field.field_type === 'email' ? 'email' : 'text'}
|
||||
value={value}
|
||||
onChange={(e) => setValue(field.variable_name, e.target.value)}
|
||||
placeholder={field.placeholder}
|
||||
className={baseInputClass}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div key={field.variable_name}>
|
||||
<label className="mb-1 flex items-center gap-1 text-sm font-medium text-white/60">
|
||||
{field.label}
|
||||
{field.required && <span className="text-red-400">*</span>}
|
||||
</label>
|
||||
{field.help_text && (
|
||||
<p className="mb-1.5 text-xs text-white/30">{field.help_text}</p>
|
||||
)}
|
||||
{input}
|
||||
{error && <p className="mt-1 text-xs text-red-400">{error}</p>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
|
||||
<div className="mx-4 w-full max-w-lg rounded-2xl border border-white/10 bg-[#0a0a0a] shadow-xl">
|
||||
{/* Header */}
|
||||
<div className="border-b border-white/[0.06] px-6 py-4">
|
||||
<h2 className="text-lg font-semibold text-white">Project Information</h2>
|
||||
<p className="mt-0.5 text-sm text-white/40">
|
||||
Fill in the details for <span className="text-white/60">{treeName}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Form */}
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="max-h-[60vh] space-y-4 overflow-y-auto px-6 py-4">
|
||||
{Array.from(groups.entries()).map(([groupName, groupFields]) => (
|
||||
<div key={groupName}>
|
||||
{groupName && (
|
||||
<h3 className="mb-3 border-b border-white/[0.06] pb-1 text-xs font-semibold uppercase tracking-wider text-white/40">
|
||||
{groupName}
|
||||
</h3>
|
||||
)}
|
||||
<div className="space-y-3">
|
||||
{groupFields.map(renderField)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-end gap-2 border-t border-white/[0.06] px-6 py-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
className="rounded-md border border-white/10 px-4 py-2 text-sm text-white/60 hover:bg-white/10 hover:text-white"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90"
|
||||
>
|
||||
Start Procedure
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
46
frontend/src/components/procedural/ProgressBar.tsx
Normal file
46
frontend/src/components/procedural/ProgressBar.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
interface ProgressBarProps {
|
||||
currentStep: number
|
||||
totalSteps: number
|
||||
elapsedMinutes?: number
|
||||
estimatedTotalMinutes?: number
|
||||
}
|
||||
|
||||
export function ProgressBar({ currentStep, totalSteps, elapsedMinutes, estimatedTotalMinutes }: ProgressBarProps) {
|
||||
const percentage = totalSteps > 0 ? Math.round((currentStep / totalSteps) * 100) : 0
|
||||
const elapsed = Math.max(0, elapsedMinutes ?? 0)
|
||||
|
||||
const formatTime = (minutes: number) => {
|
||||
if (minutes < 1) return '<1m'
|
||||
if (minutes < 60) return `${minutes}m`
|
||||
const h = Math.floor(minutes / 60)
|
||||
const m = minutes % 60
|
||||
return m > 0 ? `${h}h ${m}m` : `${h}h`
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-white/60">
|
||||
Step {currentStep} of {totalSteps}
|
||||
</span>
|
||||
<div className="flex items-center gap-3">
|
||||
{elapsedMinutes !== undefined && (
|
||||
<span className="text-white/50">
|
||||
{formatTime(elapsed)}
|
||||
{estimatedTotalMinutes ? (
|
||||
<span className="text-white/25"> / est. {formatTime(estimatedTotalMinutes)}</span>
|
||||
) : null}
|
||||
</span>
|
||||
)}
|
||||
<span className="font-medium text-white/70">{percentage}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-1.5 overflow-hidden rounded-full bg-white/10">
|
||||
<div
|
||||
className="h-full rounded-full bg-white transition-all duration-300"
|
||||
style={{ width: `${percentage}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
60
frontend/src/components/procedural/StepChecklist.tsx
Normal file
60
frontend/src/components/procedural/StepChecklist.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
import { CheckCircle2, Circle, ArrowRight } from 'lucide-react'
|
||||
import type { ProceduralStep } from '@/types'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface StepChecklistProps {
|
||||
steps: ProceduralStep[]
|
||||
currentStepIndex: number
|
||||
completedStepIds: Set<string>
|
||||
onStepClick: (index: number) => void
|
||||
}
|
||||
|
||||
export function StepChecklist({ steps, currentStepIndex, completedStepIds, onStepClick }: StepChecklistProps) {
|
||||
const procedureSteps = steps.filter((s) => s.type === 'procedure_step')
|
||||
let lastSection: string | undefined
|
||||
|
||||
return (
|
||||
<nav className="space-y-0.5">
|
||||
{procedureSteps.map((step, index) => {
|
||||
const isCompleted = completedStepIds.has(step.id)
|
||||
const isCurrent = index === currentStepIndex
|
||||
const showSection = step.section_header && step.section_header !== lastSection
|
||||
if (step.section_header) lastSection = step.section_header
|
||||
|
||||
return (
|
||||
<div key={step.id}>
|
||||
{showSection && (
|
||||
<div className="mb-1 mt-3 border-b border-white/[0.06] pb-1 text-[10px] font-semibold uppercase tracking-wider text-white/40 first:mt-0">
|
||||
{step.section_header}
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
onClick={() => onStepClick(index)}
|
||||
className={cn(
|
||||
'flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm transition-colors',
|
||||
isCurrent && 'bg-white/10 text-white',
|
||||
!isCurrent && isCompleted && 'text-white/40',
|
||||
!isCurrent && !isCompleted && 'text-white/50 hover:bg-white/[0.04]'
|
||||
)}
|
||||
>
|
||||
{isCompleted ? (
|
||||
<CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-400" />
|
||||
) : isCurrent ? (
|
||||
<ArrowRight className="h-4 w-4 shrink-0 text-white" />
|
||||
) : (
|
||||
<Circle className="h-4 w-4 shrink-0 text-white/20" />
|
||||
)}
|
||||
<span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-white/10 text-[10px] font-medium">
|
||||
{index + 1}
|
||||
</span>
|
||||
<span className="min-w-0 flex-1 truncate">{step.title || 'Untitled step'}</span>
|
||||
{step.estimated_minutes && (
|
||||
<span className="shrink-0 text-[10px] text-white/30">~{step.estimated_minutes}m</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
236
frontend/src/components/procedural/StepDetail.tsx
Normal file
236
frontend/src/components/procedural/StepDetail.tsx
Normal file
@@ -0,0 +1,236 @@
|
||||
import { useState } from 'react'
|
||||
import { AlertTriangle, CheckCircle2, Info, Zap, Copy, Check, ExternalLink } from 'lucide-react'
|
||||
import type { ProceduralStep, StepContentType, CommandBlock } from '@/types'
|
||||
import { resolveVariables } from '@/lib/variableResolver'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const contentTypeConfig: Record<StepContentType, { icon: typeof Zap; color: string; bg: string; label: string }> = {
|
||||
action: { icon: Zap, color: 'text-blue-400', bg: 'bg-blue-400/10', label: 'Action' },
|
||||
informational: { icon: Info, color: 'text-white/50', bg: 'bg-white/10', label: 'Info' },
|
||||
verification: { icon: CheckCircle2, color: 'text-emerald-400', bg: 'bg-emerald-400/10', label: 'Verification' },
|
||||
warning: { icon: AlertTriangle, color: 'text-yellow-400', bg: 'bg-yellow-400/10', label: 'Warning' },
|
||||
}
|
||||
|
||||
interface StepDetailProps {
|
||||
step: ProceduralStep
|
||||
stepNumber: number
|
||||
totalSteps: number
|
||||
variables: Record<string, string>
|
||||
notes: string
|
||||
onNotesChange: (notes: string) => void
|
||||
verificationValue: string
|
||||
onVerificationChange: (value: string) => void
|
||||
isCompleted: boolean
|
||||
onMarkComplete: () => void
|
||||
isLast: boolean
|
||||
}
|
||||
|
||||
export function StepDetail({
|
||||
step,
|
||||
stepNumber,
|
||||
totalSteps,
|
||||
variables,
|
||||
notes,
|
||||
onNotesChange,
|
||||
verificationValue,
|
||||
onVerificationChange,
|
||||
isCompleted,
|
||||
onMarkComplete,
|
||||
isLast,
|
||||
}: StepDetailProps) {
|
||||
const [copiedIndex, setCopiedIndex] = useState<number | null>(null)
|
||||
const contentType = step.content_type || 'action'
|
||||
const config = contentTypeConfig[contentType]
|
||||
const Icon = config.icon
|
||||
|
||||
// Derive verification from either flat fields or nested object
|
||||
const verificationPrompt = step.verification_prompt || step.verification?.prompt
|
||||
const verificationType = step.verification_type || step.verification?.type
|
||||
|
||||
const resolve = (text: string | undefined) => {
|
||||
if (!text) return ''
|
||||
return resolveVariables(text, variables)
|
||||
}
|
||||
|
||||
// Normalize commands to array of CommandBlock
|
||||
const commandBlocks: CommandBlock[] = (() => {
|
||||
if (!step.commands) return []
|
||||
if (typeof step.commands === 'string') {
|
||||
return [{ code: step.commands }]
|
||||
}
|
||||
if (Array.isArray(step.commands)) {
|
||||
return step.commands
|
||||
}
|
||||
return []
|
||||
})()
|
||||
|
||||
const handleCopyCommand = (code: string, index: number) => {
|
||||
navigator.clipboard.writeText(resolve(code))
|
||||
setCopiedIndex(index)
|
||||
setTimeout(() => setCopiedIndex(null), 2000)
|
||||
}
|
||||
|
||||
const canComplete = () => {
|
||||
if (isCompleted) return false
|
||||
if (verificationType === 'checkbox' && !verificationValue) return false
|
||||
if (verificationType === 'text_input' && !verificationValue.trim()) return false
|
||||
return true
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Step header */}
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-white/10 text-sm font-semibold text-white">
|
||||
{stepNumber}
|
||||
</span>
|
||||
<div className="min-w-0 flex-1">
|
||||
<h2 className="text-lg font-semibold text-white">{step.title}</h2>
|
||||
<div className="mt-1 flex items-center gap-2">
|
||||
<span className={cn('inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs', config.bg, config.color)}>
|
||||
<Icon className="h-3 w-3" />
|
||||
{config.label}
|
||||
</span>
|
||||
<span className="text-xs text-white/30">
|
||||
Step {stepNumber} of {totalSteps}
|
||||
</span>
|
||||
{step.estimated_minutes && (
|
||||
<span className="text-xs text-white/30">~{step.estimated_minutes} min</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Warning banner */}
|
||||
{step.warning_text && (
|
||||
<div className="flex items-start gap-2 rounded-lg border border-yellow-400/20 bg-yellow-400/5 px-3 py-2.5">
|
||||
<AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-yellow-400" />
|
||||
<p className="text-sm text-yellow-200">{resolve(step.warning_text)}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Description */}
|
||||
{step.description && (
|
||||
<div className="prose prose-invert prose-sm max-w-none text-white/70">
|
||||
<p className="whitespace-pre-wrap">{resolve(step.description)}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Commands block(s) */}
|
||||
{commandBlocks.length > 0 && (
|
||||
<div className="space-y-3">
|
||||
{commandBlocks.map((cmd, i) => (
|
||||
<div key={i} className="rounded-lg border border-white/[0.06] bg-black/50">
|
||||
<div className="flex items-center justify-between border-b border-white/[0.06] px-3 py-1.5">
|
||||
<span className="text-xs font-medium text-white/40">
|
||||
{cmd.label || (cmd.language ? cmd.language : 'Command')}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => handleCopyCommand(cmd.code, i)}
|
||||
className="flex items-center gap-1 rounded px-2 py-0.5 text-xs text-white/40 hover:bg-white/10 hover:text-white"
|
||||
>
|
||||
{copiedIndex === i ? <Check className="h-3 w-3 text-emerald-400" /> : <Copy className="h-3 w-3" />}
|
||||
{copiedIndex === i ? 'Copied' : 'Copy'}
|
||||
</button>
|
||||
</div>
|
||||
<pre className="overflow-x-auto p-3 font-mono text-sm text-emerald-300">
|
||||
{resolve(cmd.code)}
|
||||
</pre>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Expected outcome */}
|
||||
{step.expected_outcome && (
|
||||
<div className="rounded-lg border border-white/[0.06] bg-white/[0.02] p-3">
|
||||
<h4 className="mb-1 text-xs font-medium text-white/50">Expected Outcome</h4>
|
||||
<p className="text-sm text-white/70">{resolve(step.expected_outcome)}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Verification */}
|
||||
{verificationPrompt && (
|
||||
<div className="rounded-lg border border-white/[0.06] bg-white/[0.02] p-3">
|
||||
<h4 className="mb-2 text-xs font-medium text-white/50">Verification</h4>
|
||||
{verificationType === 'checkbox' ? (
|
||||
<label className="flex items-center gap-2 text-sm text-white/70">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={!!verificationValue}
|
||||
onChange={(e) => onVerificationChange(e.target.checked ? 'confirmed' : '')}
|
||||
disabled={isCompleted}
|
||||
className="rounded border-white/20"
|
||||
/>
|
||||
{resolve(verificationPrompt)}
|
||||
</label>
|
||||
) : (
|
||||
<div>
|
||||
<p className="mb-2 text-sm text-white/70">{resolve(verificationPrompt)}</p>
|
||||
<input
|
||||
type="text"
|
||||
value={verificationValue}
|
||||
onChange={(e) => onVerificationChange(e.target.value)}
|
||||
disabled={isCompleted}
|
||||
placeholder="Enter observed value..."
|
||||
className="w-full rounded border border-white/10 bg-black/50 px-3 py-1.5 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20 disabled:opacity-50"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Notes */}
|
||||
{step.notes_enabled !== false && (
|
||||
<div>
|
||||
<label className="mb-1 block text-xs font-medium text-white/50">Notes</label>
|
||||
<textarea
|
||||
value={notes}
|
||||
onChange={(e) => onNotesChange(e.target.value)}
|
||||
placeholder="Add notes for this step..."
|
||||
rows={2}
|
||||
className="w-full rounded-lg border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Reference link */}
|
||||
{step.reference_url && (
|
||||
<a
|
||||
href={resolve(step.reference_url)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1.5 text-sm text-white/40 hover:text-white"
|
||||
>
|
||||
<ExternalLink className="h-3.5 w-3.5" />
|
||||
Reference Documentation
|
||||
</a>
|
||||
)}
|
||||
|
||||
{/* Complete button */}
|
||||
<div className="pt-2">
|
||||
<button
|
||||
onClick={onMarkComplete}
|
||||
disabled={!canComplete()}
|
||||
className={cn(
|
||||
'flex w-full items-center justify-center gap-2 rounded-lg px-4 py-2.5 text-sm font-medium transition-colors',
|
||||
isCompleted
|
||||
? 'bg-emerald-400/10 text-emerald-400'
|
||||
: 'bg-white text-black hover:bg-white/90 disabled:opacity-40 disabled:hover:bg-white'
|
||||
)}
|
||||
>
|
||||
{isCompleted ? (
|
||||
<>
|
||||
<CheckCircle2 className="h-4 w-4" />
|
||||
Completed
|
||||
</>
|
||||
) : isLast ? (
|
||||
'Complete Procedure'
|
||||
) : (
|
||||
'Mark Complete & Next'
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -6,16 +6,18 @@
|
||||
* - [SAVE_AS:name] → removed from display
|
||||
*/
|
||||
export function resolveVariables(text: string, variables: Record<string, string>): string {
|
||||
// Replace [VAR:name]
|
||||
// Replace [VAR:name] — empty/missing values show "N/A"
|
||||
let result = text.replace(/\[VAR:([^\]]+)\]/g, (_, name) => {
|
||||
const key = name.trim()
|
||||
return variables[key] ?? `[VAR:${key}]`
|
||||
const value = variables[key]
|
||||
return value && value.trim() ? value : 'N/A'
|
||||
})
|
||||
|
||||
// Replace [USER_INPUT:prompt]
|
||||
result = result.replace(/\[USER_INPUT:([^\]]+)\]/g, (_, prompt) => {
|
||||
const key = prompt.trim()
|
||||
return variables[key] ?? `[USER_INPUT:${key}]`
|
||||
const value = variables[key]
|
||||
return value && value.trim() ? value : 'N/A'
|
||||
})
|
||||
|
||||
// Remove [SAVE_AS:name]
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useNavigate, Link } from 'react-router-dom'
|
||||
import { Play, Pencil, Share2, Trash2, GitBranch, Clock, TrendingUp, FolderTree, Plus } from 'lucide-react'
|
||||
import { Play, Pencil, Share2, Trash2, GitBranch, Clock, TrendingUp, FolderTree, Plus, ListOrdered, ChevronDown } from 'lucide-react'
|
||||
import { treesApi } from '@/api/trees'
|
||||
import { sessionsApi } from '@/api/sessions'
|
||||
import type { TreeListItem } from '@/types'
|
||||
@@ -30,6 +30,7 @@ export function MyTreesPage() {
|
||||
const [isDeleting, setIsDeleting] = useState(false)
|
||||
const [treeToShare, setTreeToShare] = useState<TreeWithStats | null>(null)
|
||||
const [showShareModal, setShowShareModal] = useState(false)
|
||||
const [showCreateMenu, setShowCreateMenu] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
loadMyTrees()
|
||||
@@ -62,15 +63,23 @@ export function MyTreesPage() {
|
||||
|
||||
setTrees(treesWithStats)
|
||||
} catch (err) {
|
||||
toast.error('Failed to load your trees')
|
||||
toast.error('Failed to load your flows')
|
||||
console.error(err)
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleStartSession = (treeId: string) => {
|
||||
navigate(`/trees/${treeId}/navigate`)
|
||||
const handleStartSession = (tree: TreeWithStats) => {
|
||||
if (tree.tree_type === 'procedural') {
|
||||
navigate(`/flows/${tree.id}/navigate`)
|
||||
} else {
|
||||
navigate(`/trees/${tree.id}/navigate`)
|
||||
}
|
||||
}
|
||||
|
||||
const getEditPath = (tree: TreeWithStats) => {
|
||||
return tree.tree_type === 'procedural' ? `/flows/${tree.id}/edit` : `/trees/${tree.id}/edit`
|
||||
}
|
||||
|
||||
const handleDeleteTree = async () => {
|
||||
@@ -79,10 +88,10 @@ export function MyTreesPage() {
|
||||
try {
|
||||
await treesApi.delete(treeToDelete.id)
|
||||
setTrees(trees.filter((t) => t.id !== treeToDelete.id))
|
||||
toast.success(`Tree "${treeToDelete.name}" deleted successfully`)
|
||||
toast.success(`"${treeToDelete.name}" deleted successfully`)
|
||||
} catch (err) {
|
||||
console.error('Failed to delete tree:', err)
|
||||
toast.error('Failed to delete tree')
|
||||
console.error('Failed to delete flow:', err)
|
||||
toast.error('Failed to delete flow')
|
||||
} finally {
|
||||
setIsDeleting(false)
|
||||
setShowDeleteConfirm(false)
|
||||
@@ -103,19 +112,51 @@ export function MyTreesPage() {
|
||||
<div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
|
||||
<div className="mb-6 flex items-center justify-between sm:mb-8">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white sm:text-3xl">My Trees</h1>
|
||||
<h1 className="text-2xl font-bold text-white sm:text-3xl">My Flows</h1>
|
||||
<p className="mt-2 text-white/40">
|
||||
Your forked and custom decision trees
|
||||
Your forked and custom flows
|
||||
</p>
|
||||
</div>
|
||||
{canCreateTrees && (
|
||||
<Link
|
||||
to="/trees/new"
|
||||
className="flex items-center gap-2 rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
Create Tree
|
||||
</Link>
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setShowCreateMenu(!showCreateMenu)}
|
||||
className="flex items-center gap-2 rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
Create New
|
||||
<ChevronDown className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
{showCreateMenu && (
|
||||
<>
|
||||
<div className="fixed inset-0 z-10" onClick={() => setShowCreateMenu(false)} />
|
||||
<div className="absolute right-0 z-20 mt-1 w-56 rounded-lg border border-white/10 bg-black/95 p-1 shadow-xl backdrop-blur-sm">
|
||||
<Link
|
||||
to="/trees/new"
|
||||
onClick={() => setShowCreateMenu(false)}
|
||||
className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-white hover:bg-white/10"
|
||||
>
|
||||
<FolderTree className="h-4 w-4 text-white/50" />
|
||||
<div>
|
||||
<div className="font-medium">Troubleshooting Tree</div>
|
||||
<div className="text-xs text-white/40">Branching decision flow</div>
|
||||
</div>
|
||||
</Link>
|
||||
<Link
|
||||
to="/flows/new"
|
||||
onClick={() => setShowCreateMenu(false)}
|
||||
className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-white hover:bg-white/10"
|
||||
>
|
||||
<ListOrdered className="h-4 w-4 text-white/50" />
|
||||
<div>
|
||||
<div className="font-medium">Procedural Flow</div>
|
||||
<div className="text-xs text-white/40">Step-by-step procedure</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -127,9 +168,9 @@ export function MyTreesPage() {
|
||||
) : trees.length === 0 ? (
|
||||
<div className="rounded-lg border border-dashed border-white/10 bg-white/[0.02] px-4 py-12 text-center">
|
||||
<FolderTree className="mx-auto mb-4 h-12 w-12 text-white/20" />
|
||||
<h2 className="mb-2 text-lg font-semibold text-white">No personal trees yet</h2>
|
||||
<h2 className="mb-2 text-lg font-semibold text-white">No personal flows yet</h2>
|
||||
<p className="mb-4 text-sm text-white/40">
|
||||
Fork a tree from the library to customize it for your workflow
|
||||
Fork a flow from the library to customize it for your workflow
|
||||
</p>
|
||||
<div className="flex items-center justify-center gap-3">
|
||||
<Link
|
||||
@@ -164,12 +205,24 @@ export function MyTreesPage() {
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="mb-3 flex items-start justify-between gap-2">
|
||||
<h3 className="font-semibold text-white">{tree.name}</h3>
|
||||
{tree.category_info && (
|
||||
<span className="rounded-full bg-white/10 px-2 py-0.5 text-xs text-white/70">
|
||||
{tree.category_info.name}
|
||||
</span>
|
||||
)}
|
||||
<div className="flex items-center gap-2">
|
||||
{tree.tree_type === 'procedural' && (
|
||||
<ListOrdered className="h-4 w-4 shrink-0 text-white/40" />
|
||||
)}
|
||||
<h3 className="font-semibold text-white">{tree.name}</h3>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
{tree.tree_type === 'procedural' && (
|
||||
<span className="rounded-full bg-blue-400/10 px-2 py-0.5 text-[10px] font-medium text-blue-400">
|
||||
Procedure
|
||||
</span>
|
||||
)}
|
||||
{tree.category_info && (
|
||||
<span className="rounded-full bg-white/10 px-2 py-0.5 text-xs text-white/70">
|
||||
{tree.category_info.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
@@ -216,7 +269,7 @@ export function MyTreesPage() {
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleStartSession(tree.id)}
|
||||
onClick={() => handleStartSession(tree)}
|
||||
className={cn(
|
||||
'flex flex-1 items-center justify-center gap-2 rounded-md bg-white px-3 py-2 text-sm font-medium text-black',
|
||||
'hover:bg-white/90'
|
||||
@@ -227,7 +280,7 @@ export function MyTreesPage() {
|
||||
</button>
|
||||
{canEditTree({ author_id: tree.author_id, account_id: tree.account_id }) && (
|
||||
<Link
|
||||
to={`/trees/${tree.id}/edit`}
|
||||
to={getEditPath(tree)}
|
||||
className={cn(
|
||||
'rounded-md border border-white/10 p-2 text-white/40',
|
||||
'hover:bg-white/10 hover:text-white'
|
||||
@@ -279,7 +332,7 @@ export function MyTreesPage() {
|
||||
setTreeToDelete(null)
|
||||
}}
|
||||
onConfirm={handleDeleteTree}
|
||||
title="Delete Tree"
|
||||
title="Delete Flow"
|
||||
message={`Are you sure you want to delete "${treeToDelete?.name}"? This action can be undone by an administrator.`}
|
||||
confirmLabel="Delete"
|
||||
confirmVariant="destructive"
|
||||
|
||||
245
frontend/src/pages/ProceduralEditorPage.tsx
Normal file
245
frontend/src/pages/ProceduralEditorPage.tsx
Normal file
@@ -0,0 +1,245 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useParams, useNavigate } from 'react-router-dom'
|
||||
import { Save, ArrowLeft, ListOrdered } from 'lucide-react'
|
||||
import { treesApi } from '@/api/trees'
|
||||
import { useProceduralEditorStore } from '@/store/proceduralEditorStore'
|
||||
import { IntakeFormBuilder } from '@/components/procedural-editor/IntakeFormBuilder'
|
||||
import { StepList } from '@/components/procedural-editor/StepList'
|
||||
import { toast } from '@/lib/toast'
|
||||
|
||||
export function ProceduralEditorPage() {
|
||||
const { id } = useParams<{ id: string }>()
|
||||
const navigate = useNavigate()
|
||||
const isEditMode = !!id
|
||||
|
||||
const {
|
||||
treeId,
|
||||
name,
|
||||
description,
|
||||
tags,
|
||||
isPublic,
|
||||
isDirty,
|
||||
isSaving,
|
||||
isLoading,
|
||||
initNew,
|
||||
loadTree,
|
||||
reset,
|
||||
setName,
|
||||
setDescription,
|
||||
setTags,
|
||||
setIsPublic,
|
||||
setIsSaving,
|
||||
markSaved,
|
||||
getTreeForSave,
|
||||
} = useProceduralEditorStore()
|
||||
|
||||
const [tagInput, setTagInput] = useState('')
|
||||
|
||||
// Load tree or init new
|
||||
useEffect(() => {
|
||||
if (isEditMode && id) {
|
||||
loadExistingTree(id)
|
||||
} else {
|
||||
initNew()
|
||||
}
|
||||
|
||||
return () => { reset() }
|
||||
}, [id])
|
||||
|
||||
const loadExistingTree = async (treeId: string) => {
|
||||
try {
|
||||
const tree = await treesApi.get(treeId)
|
||||
if (tree.tree_type !== 'procedural') {
|
||||
toast.error('This tree is not a procedural flow')
|
||||
navigate('/my-trees')
|
||||
return
|
||||
}
|
||||
loadTree(tree)
|
||||
} catch {
|
||||
toast.error('Failed to load procedure')
|
||||
navigate('/my-trees')
|
||||
}
|
||||
}
|
||||
|
||||
const handleSave = async (saveStatus?: 'draft' | 'published') => {
|
||||
if (!name.trim()) {
|
||||
toast.error('Please enter a name for the procedure')
|
||||
return
|
||||
}
|
||||
|
||||
setIsSaving(true)
|
||||
try {
|
||||
const payload = getTreeForSave()
|
||||
if (saveStatus) {
|
||||
payload.status = saveStatus
|
||||
}
|
||||
|
||||
if (isEditMode && treeId) {
|
||||
await treesApi.update(treeId, payload)
|
||||
markSaved()
|
||||
toast.success('Procedure saved')
|
||||
} else {
|
||||
const created = await treesApi.create(payload)
|
||||
markSaved()
|
||||
toast.success('Procedure created')
|
||||
navigate(`/flows/${created.id}/edit`, { replace: true })
|
||||
}
|
||||
} catch (err: unknown) {
|
||||
const message = err && typeof err === 'object' && 'response' in err
|
||||
? (err as { response?: { data?: { detail?: string | { message?: string } } } }).response?.data?.detail
|
||||
: null
|
||||
const errorText = typeof message === 'string' ? message : typeof message === 'object' && message?.message ? message.message : 'Failed to save procedure'
|
||||
toast.error(errorText)
|
||||
} finally {
|
||||
setIsSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleAddTag = () => {
|
||||
const tag = tagInput.trim()
|
||||
if (tag && !tags.includes(tag)) {
|
||||
setTags([...tags, tag])
|
||||
setTagInput('')
|
||||
}
|
||||
}
|
||||
|
||||
const handleRemoveTag = (tag: string) => {
|
||||
setTags(tags.filter((t) => t !== tag))
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex min-h-[50vh] items-center justify-center">
|
||||
<div className="h-8 w-8 animate-spin rounded-full border-4 border-white/20 border-t-white" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
|
||||
{/* Header */}
|
||||
<div className="mb-6 flex items-center justify-between sm:mb-8">
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => navigate('/my-trees')}
|
||||
className="rounded-md p-2 text-white/40 hover:bg-white/10 hover:text-white"
|
||||
>
|
||||
<ArrowLeft className="h-5 w-5" />
|
||||
</button>
|
||||
<div className="flex items-center gap-2">
|
||||
<ListOrdered className="h-5 w-5 text-white/50" />
|
||||
<h1 className="text-xl font-bold text-white sm:text-2xl">
|
||||
{isEditMode ? 'Edit Procedure' : 'New Procedure'}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{isDirty && (
|
||||
<span className="text-xs text-white/40">Unsaved changes</span>
|
||||
)}
|
||||
<button
|
||||
onClick={() => handleSave('draft')}
|
||||
disabled={isSaving}
|
||||
className="flex items-center gap-1.5 rounded-md border border-white/10 px-3 py-2 text-sm text-white/60 hover:bg-white/10 hover:text-white disabled:opacity-50"
|
||||
>
|
||||
Save Draft
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleSave('published')}
|
||||
disabled={isSaving}
|
||||
className="flex items-center gap-1.5 rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90 disabled:opacity-50"
|
||||
>
|
||||
<Save className="h-4 w-4" />
|
||||
{isSaving ? 'Saving...' : 'Publish'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="space-y-6">
|
||||
{/* Metadata */}
|
||||
<div className="glass-card rounded-2xl p-4 sm:p-6">
|
||||
<h2 className="mb-4 text-lg font-semibold text-white">Details</h2>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium text-white/60">Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="e.g. Domain Controller Build"
|
||||
className="w-full rounded-lg border border-white/10 bg-black/50 px-3 py-2 text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium text-white/60">Description</label>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="Brief description of this procedure..."
|
||||
rows={2}
|
||||
className="w-full rounded-lg border border-white/10 bg-black/50 px-3 py-2 text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium text-white/60">Tags</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={tagInput}
|
||||
onChange={(e) => setTagInput(e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); handleAddTag() } }}
|
||||
placeholder="Add tag..."
|
||||
className="flex-1 rounded-lg border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
|
||||
/>
|
||||
</div>
|
||||
{tags.length > 0 && (
|
||||
<div className="mt-2 flex flex-wrap gap-1">
|
||||
{tags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="inline-flex items-center gap-1 rounded-full bg-white/10 px-2 py-0.5 text-xs text-white/70"
|
||||
>
|
||||
{tag}
|
||||
<button
|
||||
onClick={() => handleRemoveTag(tag)}
|
||||
className="text-white/40 hover:text-white"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-end pb-1">
|
||||
<label className="flex items-center gap-2 text-sm text-white/60">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isPublic}
|
||||
onChange={(e) => setIsPublic(e.target.checked)}
|
||||
className="rounded border-white/20"
|
||||
/>
|
||||
Public (visible to all users)
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Intake Form Builder */}
|
||||
<IntakeFormBuilder />
|
||||
|
||||
{/* Step List */}
|
||||
<StepList />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProceduralEditorPage
|
||||
402
frontend/src/pages/ProceduralNavigationPage.tsx
Normal file
402
frontend/src/pages/ProceduralNavigationPage.tsx
Normal file
@@ -0,0 +1,402 @@
|
||||
import { useEffect, useState, useRef } from 'react'
|
||||
import { useParams, useNavigate } from 'react-router-dom'
|
||||
import { ChevronLeft, ChevronRight, ListOrdered, Settings2, X } from 'lucide-react'
|
||||
import { treesApi } from '@/api/trees'
|
||||
import { sessionsApi } from '@/api/sessions'
|
||||
import type { Tree, Session, ProceduralStep, DecisionRecord } from '@/types'
|
||||
import { IntakeFormModal } from '@/components/procedural/IntakeFormModal'
|
||||
import { StepChecklist } from '@/components/procedural/StepChecklist'
|
||||
import { StepDetail } from '@/components/procedural/StepDetail'
|
||||
import { ProgressBar } from '@/components/procedural/ProgressBar'
|
||||
import { CompletionSummary } from '@/components/procedural/CompletionSummary'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { toast } from '@/lib/toast'
|
||||
|
||||
interface StepState {
|
||||
notes: string
|
||||
verificationValue: string
|
||||
completedAt: string | null
|
||||
}
|
||||
|
||||
export function ProceduralNavigationPage() {
|
||||
const { id: treeId } = useParams<{ id: string }>()
|
||||
const navigate = useNavigate()
|
||||
|
||||
const [tree, setTree] = useState<Tree | null>(null)
|
||||
const [session, setSession] = useState<Session | null>(null)
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [showIntakeForm, setShowIntakeForm] = useState(false)
|
||||
const [sessionVariables, setSessionVariables] = useState<Record<string, string>>({})
|
||||
const [currentStepIndex, setCurrentStepIndex] = useState(0)
|
||||
const [stepStates, setStepStates] = useState<Map<string, StepState>>(new Map())
|
||||
const [isComplete, setIsComplete] = useState(false)
|
||||
const [completedAt, setCompletedAt] = useState<string>('')
|
||||
const [sidebarOpen, setSidebarOpen] = useState(true)
|
||||
const [paramsOpen, setParamsOpen] = useState(false)
|
||||
const [elapsedMinutes, setElapsedMinutes] = useState(0)
|
||||
const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)
|
||||
|
||||
// Get procedural steps from tree
|
||||
const getSteps = (): ProceduralStep[] => {
|
||||
if (!tree) return []
|
||||
const structure = tree.tree_structure as unknown as { steps?: ProceduralStep[] }
|
||||
return structure.steps || []
|
||||
}
|
||||
|
||||
const steps = getSteps()
|
||||
const procedureSteps = steps.filter((s) => s.type === 'procedure_step')
|
||||
const completedStepIds = new Set(
|
||||
Array.from(stepStates.entries())
|
||||
.filter(([, state]) => state.completedAt)
|
||||
.map(([id]) => id)
|
||||
)
|
||||
|
||||
const estimatedTotalMinutes = procedureSteps.reduce(
|
||||
(sum, step) => sum + (step.estimated_minutes || 0),
|
||||
0
|
||||
)
|
||||
|
||||
// Load tree
|
||||
useEffect(() => {
|
||||
if (!treeId) return
|
||||
loadTree(treeId)
|
||||
return () => {
|
||||
if (timerRef.current) clearInterval(timerRef.current)
|
||||
}
|
||||
}, [treeId])
|
||||
|
||||
// Parse backend timestamp — ensure UTC if no timezone info
|
||||
const parseTimestamp = (ts: string) => {
|
||||
if (!ts.endsWith('Z') && !ts.includes('+') && !/\d{2}:\d{2}$/.test(ts.slice(-5))) {
|
||||
return new Date(ts + 'Z')
|
||||
}
|
||||
return new Date(ts)
|
||||
}
|
||||
|
||||
// Elapsed time timer
|
||||
useEffect(() => {
|
||||
if (session && !isComplete) {
|
||||
const calcElapsed = () => {
|
||||
const start = parseTimestamp(session.started_at).getTime()
|
||||
setElapsedMinutes(Math.max(0, Math.floor((Date.now() - start) / 60000)))
|
||||
}
|
||||
calcElapsed()
|
||||
timerRef.current = setInterval(calcElapsed, 30000)
|
||||
}
|
||||
return () => {
|
||||
if (timerRef.current) clearInterval(timerRef.current)
|
||||
}
|
||||
}, [session, isComplete])
|
||||
|
||||
const loadTree = async (id: string) => {
|
||||
setIsLoading(true)
|
||||
try {
|
||||
const treeData = await treesApi.get(id)
|
||||
if (treeData.tree_type !== 'procedural') {
|
||||
navigate(`/trees/${id}/navigate`, { replace: true })
|
||||
return
|
||||
}
|
||||
setTree(treeData)
|
||||
|
||||
// Check if intake form exists
|
||||
if (treeData.intake_form && treeData.intake_form.length > 0) {
|
||||
setShowIntakeForm(true)
|
||||
} else {
|
||||
await startSession(id, {})
|
||||
}
|
||||
} catch {
|
||||
toast.error('Failed to load procedure')
|
||||
navigate('/my-trees')
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const startSession = async (id: string, variables: Record<string, string>) => {
|
||||
try {
|
||||
const newSession = await sessionsApi.create({
|
||||
tree_id: id,
|
||||
session_variables: Object.keys(variables).length > 0 ? variables : undefined,
|
||||
})
|
||||
setSession(newSession)
|
||||
setSessionVariables(variables)
|
||||
setShowIntakeForm(false)
|
||||
|
||||
// Initialize step states
|
||||
const initialStates = new Map<string, StepState>()
|
||||
const allSteps = getStepsFromTree(tree!)
|
||||
for (const step of allSteps) {
|
||||
initialStates.set(step.id, { notes: '', verificationValue: '', completedAt: null })
|
||||
}
|
||||
setStepStates(initialStates)
|
||||
} catch {
|
||||
toast.error('Failed to start session')
|
||||
}
|
||||
}
|
||||
|
||||
const getStepsFromTree = (t: Tree): ProceduralStep[] => {
|
||||
const structure = t.tree_structure as unknown as { steps?: ProceduralStep[] }
|
||||
return structure.steps || []
|
||||
}
|
||||
|
||||
const handleIntakeSubmit = async (variables: Record<string, string>) => {
|
||||
if (!treeId) return
|
||||
await startSession(treeId, variables)
|
||||
}
|
||||
|
||||
const handleMarkComplete = async () => {
|
||||
if (!session || procedureSteps.length === 0) return
|
||||
|
||||
const currentStep = procedureSteps[currentStepIndex]
|
||||
if (!currentStep) return
|
||||
|
||||
const now = new Date().toISOString()
|
||||
|
||||
// Update step state
|
||||
setStepStates((prev) => {
|
||||
const next = new Map(prev)
|
||||
const existing = next.get(currentStep.id) || { notes: '', verificationValue: '', completedAt: null }
|
||||
next.set(currentStep.id, { ...existing, completedAt: now })
|
||||
return next
|
||||
})
|
||||
|
||||
// Create a decision record for this step
|
||||
const stepState = stepStates.get(currentStep.id)
|
||||
const decision: DecisionRecord = {
|
||||
node_id: currentStep.id,
|
||||
question: currentStep.title,
|
||||
answer: 'completed',
|
||||
action_performed: currentStep.description || null,
|
||||
notes: stepState?.notes || null,
|
||||
command_output: stepState?.verificationValue || null,
|
||||
automation_used: false,
|
||||
timestamp: now,
|
||||
entered_at: null,
|
||||
exited_at: now,
|
||||
duration_seconds: null,
|
||||
attachments: [],
|
||||
}
|
||||
|
||||
try {
|
||||
const updatedDecisions = [...(session.decisions || []), decision]
|
||||
await sessionsApi.update(session.id, {
|
||||
decisions: updatedDecisions,
|
||||
path_taken: [...(session.path_taken || []), currentStep.id],
|
||||
})
|
||||
|
||||
setSession((prev) => prev ? {
|
||||
...prev,
|
||||
decisions: updatedDecisions,
|
||||
path_taken: [...(prev.path_taken || []), currentStep.id],
|
||||
} : prev)
|
||||
|
||||
// Move to next step or complete
|
||||
if (currentStepIndex >= procedureSteps.length - 1) {
|
||||
// Last step — complete the procedure
|
||||
const completedTime = new Date().toISOString()
|
||||
await sessionsApi.complete(session.id, {
|
||||
outcome: 'resolved',
|
||||
outcome_notes: `Procedure completed. ${procedureSteps.length} steps finished.`,
|
||||
})
|
||||
setCompletedAt(completedTime)
|
||||
setIsComplete(true)
|
||||
} else {
|
||||
setCurrentStepIndex(currentStepIndex + 1)
|
||||
}
|
||||
} catch {
|
||||
toast.error('Failed to save progress')
|
||||
}
|
||||
}
|
||||
|
||||
const handleStepNotesChange = (notes: string) => {
|
||||
const currentStep = procedureSteps[currentStepIndex]
|
||||
if (!currentStep) return
|
||||
setStepStates((prev) => {
|
||||
const next = new Map(prev)
|
||||
const existing = next.get(currentStep.id) || { notes: '', verificationValue: '', completedAt: null }
|
||||
next.set(currentStep.id, { ...existing, notes })
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
const handleVerificationChange = (value: string) => {
|
||||
const currentStep = procedureSteps[currentStepIndex]
|
||||
if (!currentStep) return
|
||||
setStepStates((prev) => {
|
||||
const next = new Map(prev)
|
||||
const existing = next.get(currentStep.id) || { notes: '', verificationValue: '', completedAt: null }
|
||||
next.set(currentStep.id, { ...existing, verificationValue: value })
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
// Loading state
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex min-h-[50vh] items-center justify-center">
|
||||
<div className="h-8 w-8 animate-spin rounded-full border-4 border-white/20 border-t-white" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Intake form modal
|
||||
if (showIntakeForm && tree) {
|
||||
return (
|
||||
<IntakeFormModal
|
||||
isOpen={true}
|
||||
fields={tree.intake_form || []}
|
||||
treeName={tree.name}
|
||||
onSubmit={handleIntakeSubmit}
|
||||
onCancel={() => navigate('/my-trees')}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
// Completion summary
|
||||
if (isComplete && tree && session) {
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8 sm:px-6">
|
||||
<CompletionSummary
|
||||
treeName={tree.name}
|
||||
steps={steps}
|
||||
completions={new Map(
|
||||
Array.from(stepStates.entries())
|
||||
.filter(([, s]) => s.completedAt)
|
||||
.map(([id, s]) => [id, {
|
||||
stepId: id,
|
||||
notes: s.notes,
|
||||
verificationValue: s.verificationValue,
|
||||
completedAt: s.completedAt!,
|
||||
}])
|
||||
)}
|
||||
variables={sessionVariables}
|
||||
startedAt={session.started_at}
|
||||
completedAt={completedAt}
|
||||
onExport={() => navigate(`/sessions/${session.id}`)}
|
||||
onClose={() => navigate('/my-trees')}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// No session yet
|
||||
if (!session || !tree) return null
|
||||
|
||||
const currentStep = procedureSteps[currentStepIndex]
|
||||
const currentStepState = currentStep ? stepStates.get(currentStep.id) : undefined
|
||||
|
||||
return (
|
||||
<div className="flex h-[calc(100vh-4rem)] flex-col">
|
||||
{/* Top bar */}
|
||||
<div className="border-b border-white/[0.06] px-4 py-3 sm:px-6">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => setSidebarOpen(!sidebarOpen)}
|
||||
className="rounded-md p-1.5 text-white/40 hover:bg-white/10 hover:text-white lg:hidden"
|
||||
>
|
||||
{sidebarOpen ? <ChevronLeft className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
|
||||
</button>
|
||||
<ListOrdered className="h-5 w-5 text-white/40" />
|
||||
<h1 className="text-sm font-semibold text-white sm:text-base">{tree.name}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<ProgressBar
|
||||
currentStep={completedStepIds.size}
|
||||
totalSteps={procedureSteps.length}
|
||||
elapsedMinutes={elapsedMinutes}
|
||||
estimatedTotalMinutes={estimatedTotalMinutes || undefined}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main content */}
|
||||
<div className="flex min-h-0 flex-1">
|
||||
{/* Left sidebar - step checklist */}
|
||||
<div
|
||||
className={cn(
|
||||
'border-r border-white/[0.06] bg-black/30 transition-all duration-200',
|
||||
sidebarOpen ? 'w-72 p-3' : 'w-0 overflow-hidden p-0'
|
||||
)}
|
||||
>
|
||||
{sidebarOpen && (
|
||||
<>
|
||||
<StepChecklist
|
||||
steps={steps}
|
||||
currentStepIndex={currentStepIndex}
|
||||
completedStepIds={completedStepIds}
|
||||
onStepClick={setCurrentStepIndex}
|
||||
/>
|
||||
|
||||
{/* View Parameters button */}
|
||||
{Object.keys(sessionVariables).length > 0 && (
|
||||
<div className="mt-3 border-t border-white/[0.06] pt-3">
|
||||
<button
|
||||
onClick={() => setParamsOpen(true)}
|
||||
className="flex w-full items-center gap-2 rounded-lg border border-white/10 px-3 py-2 text-xs text-white/40 hover:bg-white/[0.06] hover:text-white/60"
|
||||
>
|
||||
<Settings2 className="h-3.5 w-3.5" />
|
||||
View Parameters ({Object.keys(sessionVariables).length})
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right panel - step detail */}
|
||||
<div className="min-h-0 flex-1 overflow-y-auto p-4 sm:p-6">
|
||||
{currentStep && (
|
||||
<StepDetail
|
||||
step={currentStep}
|
||||
stepNumber={currentStepIndex + 1}
|
||||
totalSteps={procedureSteps.length}
|
||||
variables={sessionVariables}
|
||||
notes={currentStepState?.notes || ''}
|
||||
onNotesChange={handleStepNotesChange}
|
||||
verificationValue={currentStepState?.verificationValue || ''}
|
||||
onVerificationChange={handleVerificationChange}
|
||||
isCompleted={completedStepIds.has(currentStep.id)}
|
||||
onMarkComplete={handleMarkComplete}
|
||||
isLast={currentStepIndex === procedureSteps.length - 1}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Parameters popover */}
|
||||
{paramsOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
||||
<div
|
||||
className="absolute inset-0 bg-black/60 backdrop-blur-sm"
|
||||
onClick={() => setParamsOpen(false)}
|
||||
/>
|
||||
<div className="relative w-full max-w-md rounded-2xl border border-white/10 bg-black/95 shadow-2xl backdrop-blur-sm">
|
||||
<div className="flex items-center justify-between border-b border-white/[0.06] px-5 py-4">
|
||||
<h3 className="text-sm font-semibold text-white">Project Parameters</h3>
|
||||
<button
|
||||
onClick={() => setParamsOpen(false)}
|
||||
className="rounded-lg p-1 text-white/40 hover:bg-white/10 hover:text-white"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="max-h-[60vh] overflow-y-auto p-5">
|
||||
<div className="space-y-2">
|
||||
{Object.entries(sessionVariables).map(([key, value]) => (
|
||||
<div key={key} className="flex items-baseline justify-between gap-4 rounded-lg bg-white/[0.03] px-3 py-2">
|
||||
<span className="text-xs font-medium text-white/40">{key.replace(/_/g, ' ')}</span>
|
||||
<span className="text-right text-sm text-white/70">{value || 'N/A'}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProceduralNavigationPage
|
||||
@@ -124,7 +124,7 @@ export function QuickStartPage() {
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-lg text-white/40 mb-10 max-w-2xl mx-auto leading-relaxed">
|
||||
Search our library of proven decision trees or continue where you left off
|
||||
Search our library of proven flows or continue where you left off
|
||||
</p>
|
||||
|
||||
{/* Search Bar */}
|
||||
@@ -139,7 +139,7 @@ export function QuickStartPage() {
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
onFocus={() => query.length >= 2 && setShowResults(true)}
|
||||
placeholder="Paste ticket subject or search for a tree..."
|
||||
placeholder="Paste ticket subject or search for a flow..."
|
||||
className="flex-1 bg-transparent py-4 px-4 text-white placeholder:text-white/30 focus:outline-none"
|
||||
/>
|
||||
{isSearching && (
|
||||
@@ -270,7 +270,7 @@ export function QuickStartPage() {
|
||||
{!isLoading && recentTrees.length > 0 && (
|
||||
<div className="mx-auto max-w-4xl mb-12">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-2xl font-bold text-white">Recent Trees</h2>
|
||||
<h2 className="text-2xl font-bold text-white">Recent Flows</h2>
|
||||
<Link
|
||||
to="/trees"
|
||||
className="text-sm text-white/60 hover:text-white font-medium transition-colors"
|
||||
@@ -309,7 +309,7 @@ export function QuickStartPage() {
|
||||
to="/trees"
|
||||
className="inline-flex items-center gap-2 px-6 py-3 bg-white/10 border border-white/20 text-white font-medium rounded-xl hover:bg-white/20 transition-all"
|
||||
>
|
||||
Browse All Trees
|
||||
Browse All Flows
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@@ -481,83 +481,151 @@ export function SessionDetailPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Timeline */}
|
||||
{/* Timeline / Step Checklist */}
|
||||
<div className="mb-8">
|
||||
<h2 className="mb-4 text-lg font-semibold text-white">Decision Timeline</h2>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3 text-sm">
|
||||
<span className="h-3 w-3 rounded-full bg-white" />
|
||||
<span className="text-white/40">
|
||||
Session started: {formatDate(session.started_at)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{session.decisions.map((decision, index) => (
|
||||
<div key={index} className="ml-1 border-l-2 border-white/[0.06] pl-6">
|
||||
<div className="relative">
|
||||
<span className="absolute -left-[1.625rem] top-1 h-2 w-2 rounded-full bg-white/20" />
|
||||
<div className="glass-card rounded-xl p-4">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex-1">
|
||||
{decision.question && (
|
||||
<p className="font-medium text-white">{decision.question}</p>
|
||||
)}
|
||||
{decision.answer && (
|
||||
<p className="mt-1 text-sm text-white">Answer: {decision.answer}</p>
|
||||
)}
|
||||
{decision.action_performed && (
|
||||
<p className="mt-1 text-sm text-white/40">
|
||||
Action: {decision.action_performed}
|
||||
</p>
|
||||
)}
|
||||
{decision.notes && (
|
||||
<p className="mt-2 rounded bg-white/5 p-2 text-sm text-white/40">
|
||||
Notes: {decision.notes}
|
||||
</p>
|
||||
)}
|
||||
{decision.command_output && (
|
||||
<div className="mt-2">
|
||||
<p className="mb-1 text-xs font-medium text-white/50">Command Output</p>
|
||||
<pre className="overflow-x-auto rounded bg-white/5 p-2 text-xs font-mono text-white/60 whitespace-pre-wrap">
|
||||
{decision.command_output}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
{decision.duration_seconds != null && (
|
||||
<p className="mt-2 text-xs text-white/50">
|
||||
Duration: {formatDuration(decision.duration_seconds)}
|
||||
</p>
|
||||
)}
|
||||
<p className="mt-2 text-xs text-white/40">
|
||||
{formatDate(decision.timestamp)}
|
||||
</p>
|
||||
{(session.tree_snapshot as unknown as Record<string, unknown>).tree_type === 'procedural' ? (
|
||||
<>
|
||||
<h2 className="mb-4 text-lg font-semibold text-white">Procedure Steps</h2>
|
||||
<div className="space-y-2">
|
||||
{session.decisions.map((decision, index) => {
|
||||
const isCompleted = decision.answer === 'completed'
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className={cn(
|
||||
'glass-card rounded-xl p-4',
|
||||
isCompleted && 'border-l-2 border-emerald-400/50'
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className={cn(
|
||||
'mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-medium',
|
||||
isCompleted ? 'bg-emerald-400/10 text-emerald-400' : 'bg-white/10 text-white/50'
|
||||
)}>
|
||||
{isCompleted ? '\u2713' : index + 1}
|
||||
</span>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="font-medium text-white">{decision.question || 'Step'}</p>
|
||||
{decision.notes && (
|
||||
<p className="mt-1.5 rounded bg-white/5 p-2 text-sm text-white/40">
|
||||
Notes: {decision.notes}
|
||||
</p>
|
||||
)}
|
||||
{decision.command_output && (
|
||||
<p className="mt-1 text-sm text-white/40">
|
||||
Verification: {decision.command_output}
|
||||
</p>
|
||||
)}
|
||||
{decision.duration_seconds != null && (
|
||||
<p className="mt-1 text-xs text-white/30">
|
||||
Duration: {formatDuration(decision.duration_seconds)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleCopyStep(decision, index)}
|
||||
title="Copy step to clipboard"
|
||||
className="rounded p-1 text-white/30 hover:bg-white/10 hover:text-white"
|
||||
>
|
||||
{copiedStepIndex === index ? (
|
||||
<Check className="h-4 w-4 text-emerald-400" />
|
||||
) : (
|
||||
<Copy className="h-4 w-4" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
{session.completed_at && (
|
||||
<div className="flex items-center gap-3 pl-2 pt-2 text-sm">
|
||||
<span className="h-3 w-3 rounded-full bg-emerald-500" />
|
||||
<span className="text-emerald-400">
|
||||
Procedure completed: {formatDate(session.completed_at)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<h2 className="mb-4 text-lg font-semibold text-white">Decision Timeline</h2>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3 text-sm">
|
||||
<span className="h-3 w-3 rounded-full bg-white" />
|
||||
<span className="text-white/40">
|
||||
Session started: {formatDate(session.started_at)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{session.decisions.map((decision, index) => (
|
||||
<div key={index} className="ml-1 border-l-2 border-white/[0.06] pl-6">
|
||||
<div className="relative">
|
||||
<span className="absolute -left-[1.625rem] top-1 h-2 w-2 rounded-full bg-white/20" />
|
||||
<div className="glass-card rounded-xl p-4">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex-1">
|
||||
{decision.question && (
|
||||
<p className="font-medium text-white">{decision.question}</p>
|
||||
)}
|
||||
{decision.answer && (
|
||||
<p className="mt-1 text-sm text-white">Answer: {decision.answer}</p>
|
||||
)}
|
||||
{decision.action_performed && (
|
||||
<p className="mt-1 text-sm text-white/40">
|
||||
Action: {decision.action_performed}
|
||||
</p>
|
||||
)}
|
||||
{decision.notes && (
|
||||
<p className="mt-2 rounded bg-white/5 p-2 text-sm text-white/40">
|
||||
Notes: {decision.notes}
|
||||
</p>
|
||||
)}
|
||||
{decision.command_output && (
|
||||
<div className="mt-2">
|
||||
<p className="mb-1 text-xs font-medium text-white/50">Command Output</p>
|
||||
<pre className="overflow-x-auto rounded bg-white/5 p-2 text-xs font-mono text-white/60 whitespace-pre-wrap">
|
||||
{decision.command_output}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
{decision.duration_seconds != null && (
|
||||
<p className="mt-2 text-xs text-white/50">
|
||||
Duration: {formatDuration(decision.duration_seconds)}
|
||||
</p>
|
||||
)}
|
||||
<p className="mt-2 text-xs text-white/40">
|
||||
{formatDate(decision.timestamp)}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleCopyStep(decision, index)}
|
||||
title="Copy step to clipboard"
|
||||
className="rounded p-1 text-white/30 hover:bg-white/10 hover:text-white"
|
||||
>
|
||||
{copiedStepIndex === index ? (
|
||||
<Check className="h-4 w-4 text-emerald-400" />
|
||||
) : (
|
||||
<Copy className="h-4 w-4" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleCopyStep(decision, index)}
|
||||
title="Copy step to clipboard"
|
||||
className="rounded p-1 text-white/30 hover:bg-white/10 hover:text-white"
|
||||
>
|
||||
{copiedStepIndex === index ? (
|
||||
<Check className="h-4 w-4 text-emerald-400" />
|
||||
) : (
|
||||
<Copy className="h-4 w-4" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
|
||||
{session.completed_at && (
|
||||
<div className="flex items-center gap-3 text-sm">
|
||||
<span className="h-3 w-3 rounded-full bg-green-500" />
|
||||
<span className="text-emerald-400">
|
||||
Session completed: {formatDate(session.completed_at)}
|
||||
</span>
|
||||
{session.completed_at && (
|
||||
<div className="flex items-center gap-3 text-sm">
|
||||
<span className="h-3 w-3 rounded-full bg-green-500" />
|
||||
<span className="text-emerald-400">
|
||||
Session completed: {formatDate(session.completed_at)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Export Preview Modal */}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import { useNavigate, Link } from 'react-router-dom'
|
||||
import { useNavigate, Link, useSearchParams } from 'react-router-dom'
|
||||
import { Plus, X, FolderOpen, RotateCcw, Play } from 'lucide-react'
|
||||
import { treesApi } from '@/api/trees'
|
||||
import { categoriesApi } from '@/api/categories'
|
||||
@@ -22,6 +22,7 @@ import { toast } from '@/lib/toast'
|
||||
export function TreeLibraryPage() {
|
||||
const { canCreateTrees } = usePermissions()
|
||||
const navigate = useNavigate()
|
||||
const [searchParams] = useSearchParams()
|
||||
const [trees, setTrees] = useState<TreeListItem[]>([])
|
||||
const [categories, setCategories] = useState<CategoryListItem[]>([])
|
||||
const [folders, setFolders] = useState<FolderListItem[]>([])
|
||||
@@ -32,6 +33,22 @@ export function TreeLibraryPage() {
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [showDrafts, setShowDrafts] = useState(false)
|
||||
|
||||
// Read type filter from URL query params (e.g. /trees?type=procedural)
|
||||
const urlType = searchParams.get('type')
|
||||
const [typeFilter, setTypeFilter] = useState<'all' | 'troubleshooting' | 'procedural'>(
|
||||
urlType === 'troubleshooting' || urlType === 'procedural' ? urlType : 'all'
|
||||
)
|
||||
|
||||
// Sync type filter when URL changes (e.g. clicking nav sub-items)
|
||||
useEffect(() => {
|
||||
const t = searchParams.get('type')
|
||||
if (t === 'troubleshooting' || t === 'procedural') {
|
||||
setTypeFilter(t)
|
||||
} else {
|
||||
setTypeFilter('all')
|
||||
}
|
||||
}, [searchParams])
|
||||
|
||||
// View preferences from store
|
||||
const { treeLibraryView, setTreeLibraryView, treeLibrarySortBy, setTreeLibrarySortBy } =
|
||||
useUserPreferencesStore()
|
||||
@@ -112,7 +129,7 @@ export function TreeLibraryPage() {
|
||||
// Load trees when filters change
|
||||
useEffect(() => {
|
||||
loadTrees()
|
||||
}, [selectedCategoryId, selectedTags, selectedFolderId, treeLibrarySortBy, showDrafts])
|
||||
}, [selectedCategoryId, selectedTags, selectedFolderId, treeLibrarySortBy, showDrafts, typeFilter])
|
||||
|
||||
// Load folders on mount and listen for changes
|
||||
useEffect(() => {
|
||||
@@ -126,6 +143,7 @@ export function TreeLibraryPage() {
|
||||
setIsLoading(true)
|
||||
try {
|
||||
const treesData = await treesApi.list({
|
||||
tree_type: typeFilter !== 'all' ? typeFilter : undefined,
|
||||
category_id: selectedCategoryId || undefined,
|
||||
tags: selectedTags.length > 0 ? selectedTags.join(',') : undefined,
|
||||
folder_id: selectedFolderId || undefined,
|
||||
@@ -134,7 +152,7 @@ export function TreeLibraryPage() {
|
||||
})
|
||||
setTrees(treesData)
|
||||
} catch (err) {
|
||||
toast.error('Failed to load trees')
|
||||
toast.error('Failed to load flows')
|
||||
console.error(err)
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
@@ -151,7 +169,7 @@ export function TreeLibraryPage() {
|
||||
const results = await treesApi.search(searchQuery)
|
||||
setTrees(results)
|
||||
} catch (err) {
|
||||
toast.error('Failed to search trees')
|
||||
toast.error('Failed to search flows')
|
||||
console.error(err)
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
@@ -175,8 +193,12 @@ export function TreeLibraryPage() {
|
||||
setSearchQuery('')
|
||||
}
|
||||
|
||||
const handleStartSession = (treeId: string) => {
|
||||
navigate(`/trees/${treeId}/navigate`)
|
||||
const handleStartSession = (treeId: string, treeType?: string) => {
|
||||
if (treeType === 'procedural') {
|
||||
navigate(`/flows/${treeId}/navigate`)
|
||||
} else {
|
||||
navigate(`/trees/${treeId}/navigate`)
|
||||
}
|
||||
}
|
||||
|
||||
const handleCreateFolder = (parentId?: string | null) => {
|
||||
@@ -198,10 +220,10 @@ export function TreeLibraryPage() {
|
||||
await treesApi.delete(treeToDelete.id)
|
||||
setTrees(trees.filter((t) => t.id !== treeToDelete.id))
|
||||
window.dispatchEvent(new Event('folder-changed'))
|
||||
toast.success(`Tree "${treeToDelete.name}" deleted successfully`)
|
||||
toast.success(`"${treeToDelete.name}" deleted successfully`)
|
||||
} catch (err) {
|
||||
console.error('Failed to delete tree:', err)
|
||||
toast.error('Failed to delete tree')
|
||||
console.error('Failed to delete flow:', err)
|
||||
toast.error('Failed to delete flow')
|
||||
} finally {
|
||||
setIsDeleting(false)
|
||||
setShowDeleteConfirm(false)
|
||||
@@ -214,11 +236,11 @@ export function TreeLibraryPage() {
|
||||
setIsForkingTree(true)
|
||||
try {
|
||||
await treesApi.fork(treeId)
|
||||
toast.success('Tree forked successfully')
|
||||
toast.success('Flow forked successfully')
|
||||
navigate('/my-trees')
|
||||
} catch (err) {
|
||||
console.error('Failed to fork tree:', err)
|
||||
toast.error('Failed to fork tree')
|
||||
console.error('Failed to fork flow:', err)
|
||||
toast.error('Failed to fork flow')
|
||||
} finally {
|
||||
setIsForkingTree(false)
|
||||
}
|
||||
@@ -247,21 +269,27 @@ export function TreeLibraryPage() {
|
||||
<div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
|
||||
<div className="mb-6 flex flex-col gap-4 sm:mb-8 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white sm:text-3xl">Decision Trees</h1>
|
||||
<h1 className="text-2xl font-bold text-white sm:text-3xl">
|
||||
{typeFilter === 'procedural' ? 'Procedures' : typeFilter === 'troubleshooting' ? 'Troubleshooting Flows' : 'Flow Library'}
|
||||
</h1>
|
||||
<p className="mt-2 text-white/40">
|
||||
Select a troubleshooting tree to start a new session
|
||||
{typeFilter === 'procedural'
|
||||
? 'Step-by-step procedures for project work'
|
||||
: typeFilter === 'troubleshooting'
|
||||
? 'Branching decision flows for troubleshooting'
|
||||
: 'Browse and start troubleshooting flows and procedures'}
|
||||
</p>
|
||||
</div>
|
||||
{canCreateTrees && (
|
||||
<Link
|
||||
to="/trees/new"
|
||||
to={typeFilter === 'procedural' ? '/flows/new' : '/trees/new'}
|
||||
className={cn(
|
||||
'flex items-center gap-2 rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
|
||||
'hover:bg-white/90'
|
||||
)}
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
Create Tree
|
||||
{typeFilter === 'procedural' ? 'Create Procedure' : 'Create Flow'}
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
@@ -284,7 +312,7 @@ export function TreeLibraryPage() {
|
||||
<div className="flex flex-1 gap-2">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search trees..."
|
||||
placeholder="Search flows..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
|
||||
@@ -326,6 +354,22 @@ export function TreeLibraryPage() {
|
||||
{/* View Controls */}
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex rounded-lg border border-white/10 p-0.5">
|
||||
{(['all', 'troubleshooting', 'procedural'] as const).map((t) => (
|
||||
<button
|
||||
key={t}
|
||||
onClick={() => setTypeFilter(t)}
|
||||
className={cn(
|
||||
'rounded-md px-3 py-1 text-xs font-medium transition-colors',
|
||||
typeFilter === t
|
||||
? 'bg-white/10 text-white'
|
||||
: 'text-white/40 hover:text-white/60'
|
||||
)}
|
||||
>
|
||||
{t === 'all' ? 'All' : t === 'troubleshooting' ? 'Troubleshooting' : 'Procedures'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<SortDropdown value={treeLibrarySortBy} onChange={setTreeLibrarySortBy} />
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
@@ -450,7 +494,7 @@ export function TreeLibraryPage() {
|
||||
</div>
|
||||
) : trees.length === 0 ? (
|
||||
<div className="py-12 text-center text-white/40">
|
||||
No trees found.{' '}
|
||||
No flows found.{' '}
|
||||
{(searchQuery || hasActiveFilters) && 'Try adjusting your filters.'}
|
||||
</div>
|
||||
) : (
|
||||
@@ -525,7 +569,7 @@ export function TreeLibraryPage() {
|
||||
setTreeToDelete(null)
|
||||
}}
|
||||
onConfirm={handleDeleteTree}
|
||||
title="Delete Tree"
|
||||
title="Delete Flow"
|
||||
message={`Are you sure you want to delete "${treeToDelete?.name}"? This action can be undone by an administrator.`}
|
||||
confirmLabel="Delete"
|
||||
confirmVariant="destructive"
|
||||
|
||||
@@ -19,6 +19,8 @@ const TreeLibraryPage = lazy(() => import('@/pages/TreeLibraryPage'))
|
||||
const MyTreesPage = lazy(() => import('@/pages/MyTreesPage'))
|
||||
const TreeNavigationPage = lazy(() => import('@/pages/TreeNavigationPage'))
|
||||
const TreeEditorPage = lazy(() => import('@/pages/TreeEditorPage'))
|
||||
const ProceduralEditorPage = lazy(() => import('@/pages/ProceduralEditorPage'))
|
||||
const ProceduralNavigationPage = lazy(() => import('@/pages/ProceduralNavigationPage'))
|
||||
const SessionHistoryPage = lazy(() => import('@/pages/SessionHistoryPage'))
|
||||
const SessionDetailPage = lazy(() => import('@/pages/SessionDetailPage'))
|
||||
const AccountSettingsPage = lazy(() => import('@/pages/AccountSettingsPage'))
|
||||
@@ -127,6 +129,30 @@ export const router = createBrowserRouter([
|
||||
</Suspense>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: 'flows/new',
|
||||
element: (
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<ProceduralEditorPage />
|
||||
</Suspense>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: 'flows/:id/edit',
|
||||
element: (
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<ProceduralEditorPage />
|
||||
</Suspense>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: 'flows/:id/navigate',
|
||||
element: (
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<ProceduralNavigationPage />
|
||||
</Suspense>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: 'trees/:id/navigate',
|
||||
element: (
|
||||
|
||||
313
frontend/src/store/proceduralEditorStore.ts
Normal file
313
frontend/src/store/proceduralEditorStore.ts
Normal file
@@ -0,0 +1,313 @@
|
||||
import { create } from 'zustand'
|
||||
import { temporal } from 'zundo'
|
||||
import { immer } from 'zustand/middleware/immer'
|
||||
import type { Tree, IntakeFormField, ProceduralStep, ProceduralTreeStructure, TreeType } from '@/types'
|
||||
|
||||
const generateId = () => crypto.randomUUID()
|
||||
|
||||
function createDefaultStep(index: number): ProceduralStep {
|
||||
return {
|
||||
id: generateId(),
|
||||
type: 'procedure_step',
|
||||
title: `Step ${index + 1}`,
|
||||
description: '',
|
||||
content_type: 'action',
|
||||
notes_enabled: true,
|
||||
}
|
||||
}
|
||||
|
||||
function createEndStep(): ProceduralStep {
|
||||
return {
|
||||
id: generateId(),
|
||||
type: 'procedure_end',
|
||||
title: 'Procedure Complete',
|
||||
}
|
||||
}
|
||||
|
||||
function createDefaultField(index: number): IntakeFormField {
|
||||
return {
|
||||
variable_name: `field_${index + 1}`,
|
||||
label: `Field ${index + 1}`,
|
||||
field_type: 'text',
|
||||
required: true,
|
||||
display_order: index + 1,
|
||||
}
|
||||
}
|
||||
|
||||
interface ProceduralEditorState {
|
||||
// Tree metadata
|
||||
treeId: string | null
|
||||
name: string
|
||||
description: string
|
||||
categoryId: string | null
|
||||
tags: string[]
|
||||
isPublic: boolean
|
||||
status: 'draft' | 'published'
|
||||
|
||||
// Procedural data
|
||||
steps: ProceduralStep[]
|
||||
intakeForm: IntakeFormField[]
|
||||
|
||||
// UI state
|
||||
selectedStepId: string | null
|
||||
expandedStepId: string | null
|
||||
isDirty: boolean
|
||||
isLoading: boolean
|
||||
isSaving: boolean
|
||||
|
||||
// Actions - Init
|
||||
initNew: () => void
|
||||
loadTree: (tree: Tree) => void
|
||||
reset: () => void
|
||||
|
||||
// Actions - Metadata
|
||||
setName: (name: string) => void
|
||||
setDescription: (description: string) => void
|
||||
setCategoryId: (categoryId: string | null) => void
|
||||
setTags: (tags: string[]) => void
|
||||
setIsPublic: (isPublic: boolean) => void
|
||||
setStatus: (status: 'draft' | 'published') => void
|
||||
|
||||
// Actions - Steps
|
||||
addStep: (afterIndex?: number) => void
|
||||
removeStep: (stepId: string) => void
|
||||
updateStep: (stepId: string, updates: Partial<ProceduralStep>) => void
|
||||
moveStep: (fromIndex: number, toIndex: number) => void
|
||||
setSelectedStepId: (stepId: string | null) => void
|
||||
setExpandedStepId: (stepId: string | null) => void
|
||||
|
||||
// Actions - Intake Form
|
||||
addField: () => void
|
||||
removeField: (variableName: string) => void
|
||||
updateField: (variableName: string, updates: Partial<IntakeFormField>) => void
|
||||
moveField: (fromIndex: number, toIndex: number) => void
|
||||
|
||||
// Actions - Save
|
||||
setIsSaving: (saving: boolean) => void
|
||||
markSaved: () => void
|
||||
getTreeForSave: () => {
|
||||
name: string
|
||||
description: string
|
||||
tree_type: TreeType
|
||||
tree_structure: ProceduralTreeStructure
|
||||
intake_form: IntakeFormField[] | undefined
|
||||
category_id: string | null
|
||||
tags: string[]
|
||||
is_public: boolean
|
||||
status: 'draft' | 'published'
|
||||
}
|
||||
}
|
||||
|
||||
export const useProceduralEditorStore = create<ProceduralEditorState>()(
|
||||
temporal(
|
||||
immer((set, get) => ({
|
||||
// Initial state
|
||||
treeId: null,
|
||||
name: '',
|
||||
description: '',
|
||||
categoryId: null,
|
||||
tags: [],
|
||||
isPublic: false,
|
||||
status: 'draft' as const,
|
||||
steps: [],
|
||||
intakeForm: [],
|
||||
selectedStepId: null,
|
||||
expandedStepId: null,
|
||||
isDirty: false,
|
||||
isLoading: false,
|
||||
isSaving: false,
|
||||
|
||||
// Init
|
||||
initNew: () => {
|
||||
set((state) => {
|
||||
state.treeId = null
|
||||
state.name = ''
|
||||
state.description = ''
|
||||
state.categoryId = null
|
||||
state.tags = []
|
||||
state.isPublic = false
|
||||
state.status = 'draft'
|
||||
state.steps = [createDefaultStep(0), createEndStep()]
|
||||
state.intakeForm = []
|
||||
state.selectedStepId = null
|
||||
state.expandedStepId = null
|
||||
state.isDirty = false
|
||||
state.isLoading = false
|
||||
state.isSaving = false
|
||||
})
|
||||
},
|
||||
|
||||
loadTree: (tree: Tree) => {
|
||||
const structure = tree.tree_structure as unknown as ProceduralTreeStructure
|
||||
set((state) => {
|
||||
state.treeId = tree.id
|
||||
state.name = tree.name
|
||||
state.description = tree.description || ''
|
||||
state.categoryId = tree.category_id
|
||||
state.tags = tree.tags || []
|
||||
state.isPublic = tree.is_public
|
||||
state.status = tree.status
|
||||
state.steps = structure.steps || [createDefaultStep(0), createEndStep()]
|
||||
state.intakeForm = tree.intake_form || []
|
||||
state.selectedStepId = null
|
||||
state.expandedStepId = null
|
||||
state.isDirty = false
|
||||
state.isLoading = false
|
||||
state.isSaving = false
|
||||
})
|
||||
},
|
||||
|
||||
reset: () => {
|
||||
set((state) => {
|
||||
state.treeId = null
|
||||
state.name = ''
|
||||
state.description = ''
|
||||
state.categoryId = null
|
||||
state.tags = []
|
||||
state.isPublic = false
|
||||
state.status = 'draft'
|
||||
state.steps = []
|
||||
state.intakeForm = []
|
||||
state.selectedStepId = null
|
||||
state.expandedStepId = null
|
||||
state.isDirty = false
|
||||
state.isLoading = false
|
||||
state.isSaving = false
|
||||
})
|
||||
},
|
||||
|
||||
// Metadata
|
||||
setName: (name) => set((state) => { state.name = name; state.isDirty = true }),
|
||||
setDescription: (description) => set((state) => { state.description = description; state.isDirty = true }),
|
||||
setCategoryId: (categoryId) => set((state) => { state.categoryId = categoryId; state.isDirty = true }),
|
||||
setTags: (tags) => set((state) => { state.tags = tags; state.isDirty = true }),
|
||||
setIsPublic: (isPublic) => set((state) => { state.isPublic = isPublic; state.isDirty = true }),
|
||||
setStatus: (status) => set((state) => { state.status = status; state.isDirty = true }),
|
||||
|
||||
// Steps
|
||||
addStep: (afterIndex) => {
|
||||
set((state) => {
|
||||
// Find the insert position (before the end step)
|
||||
const endIndex = state.steps.findIndex((s) => s.type === 'procedure_end')
|
||||
const insertAt = afterIndex !== undefined
|
||||
? Math.min(afterIndex + 1, endIndex >= 0 ? endIndex : state.steps.length)
|
||||
: (endIndex >= 0 ? endIndex : state.steps.length)
|
||||
|
||||
const newStep = createDefaultStep(insertAt)
|
||||
state.steps.splice(insertAt, 0, newStep)
|
||||
state.expandedStepId = newStep.id
|
||||
state.isDirty = true
|
||||
})
|
||||
},
|
||||
|
||||
removeStep: (stepId) => {
|
||||
set((state) => {
|
||||
const index = state.steps.findIndex((s) => s.id === stepId)
|
||||
if (index === -1) return
|
||||
// Don't remove the end step
|
||||
if (state.steps[index].type === 'procedure_end') return
|
||||
// Don't remove if it's the only procedure_step
|
||||
const stepCount = state.steps.filter((s) => s.type === 'procedure_step').length
|
||||
if (stepCount <= 1) return
|
||||
|
||||
state.steps.splice(index, 1)
|
||||
if (state.selectedStepId === stepId) state.selectedStepId = null
|
||||
if (state.expandedStepId === stepId) state.expandedStepId = null
|
||||
state.isDirty = true
|
||||
})
|
||||
},
|
||||
|
||||
updateStep: (stepId, updates) => {
|
||||
set((state) => {
|
||||
const step = state.steps.find((s) => s.id === stepId)
|
||||
if (step) {
|
||||
Object.assign(step, updates)
|
||||
state.isDirty = true
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
moveStep: (fromIndex, toIndex) => {
|
||||
set((state) => {
|
||||
// Don't move the end step
|
||||
if (state.steps[fromIndex]?.type === 'procedure_end') return
|
||||
// Don't move past the end step
|
||||
const endIndex = state.steps.findIndex((s) => s.type === 'procedure_end')
|
||||
if (toIndex >= endIndex) return
|
||||
|
||||
const [moved] = state.steps.splice(fromIndex, 1)
|
||||
state.steps.splice(toIndex, 0, moved)
|
||||
state.isDirty = true
|
||||
})
|
||||
},
|
||||
|
||||
setSelectedStepId: (stepId) => set((state) => { state.selectedStepId = stepId }),
|
||||
setExpandedStepId: (stepId) => set((state) => {
|
||||
state.expandedStepId = state.expandedStepId === stepId ? null : stepId
|
||||
}),
|
||||
|
||||
// Intake Form
|
||||
addField: () => {
|
||||
set((state) => {
|
||||
const newField = createDefaultField(state.intakeForm.length)
|
||||
state.intakeForm.push(newField)
|
||||
state.isDirty = true
|
||||
})
|
||||
},
|
||||
|
||||
removeField: (variableName) => {
|
||||
set((state) => {
|
||||
const index = state.intakeForm.findIndex((f) => f.variable_name === variableName)
|
||||
if (index !== -1) {
|
||||
state.intakeForm.splice(index, 1)
|
||||
// Reorder display_order
|
||||
state.intakeForm.forEach((f, i) => { f.display_order = i + 1 })
|
||||
state.isDirty = true
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
updateField: (variableName, updates) => {
|
||||
set((state) => {
|
||||
const field = state.intakeForm.find((f) => f.variable_name === variableName)
|
||||
if (field) {
|
||||
Object.assign(field, updates)
|
||||
state.isDirty = true
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
moveField: (fromIndex, toIndex) => {
|
||||
set((state) => {
|
||||
const [moved] = state.intakeForm.splice(fromIndex, 1)
|
||||
state.intakeForm.splice(toIndex, 0, moved)
|
||||
// Reorder display_order
|
||||
state.intakeForm.forEach((f, i) => { f.display_order = i + 1 })
|
||||
state.isDirty = true
|
||||
})
|
||||
},
|
||||
|
||||
// Save
|
||||
setIsSaving: (saving) => set((state) => { state.isSaving = saving }),
|
||||
markSaved: () => set((state) => { state.isDirty = false }),
|
||||
|
||||
getTreeForSave: () => {
|
||||
const state = get()
|
||||
return {
|
||||
name: state.name,
|
||||
description: state.description,
|
||||
tree_type: 'procedural' as TreeType,
|
||||
tree_structure: { steps: state.steps },
|
||||
intake_form: state.intakeForm.length > 0 ? state.intakeForm : undefined,
|
||||
category_id: state.categoryId,
|
||||
tags: state.tags,
|
||||
is_public: state.isPublic,
|
||||
status: state.status,
|
||||
}
|
||||
},
|
||||
})),
|
||||
{ limit: 50 }
|
||||
)
|
||||
)
|
||||
|
||||
export default useProceduralEditorStore
|
||||
@@ -64,6 +64,7 @@ export interface SessionCreate {
|
||||
tree_id: string
|
||||
ticket_number?: string
|
||||
client_name?: string
|
||||
session_variables?: Record<string, string>
|
||||
}
|
||||
|
||||
export interface SessionUpdate {
|
||||
|
||||
@@ -56,6 +56,77 @@ export interface TreeStructure {
|
||||
children?: TreeStructure[]
|
||||
}
|
||||
|
||||
// --- Procedural Flow Types ---
|
||||
|
||||
export type TreeType = 'troubleshooting' | 'procedural'
|
||||
|
||||
export type IntakeFieldType =
|
||||
| 'text' | 'textarea' | 'number' | 'ip_address' | 'email'
|
||||
| 'select' | 'multi_select' | 'checkbox' | 'password'
|
||||
|
||||
export type StepContentType = 'action' | 'informational' | 'verification' | 'warning'
|
||||
|
||||
export interface IntakeFieldValidation {
|
||||
min_length?: number
|
||||
max_length?: number
|
||||
pattern?: string
|
||||
pattern_message?: string
|
||||
format?: 'ipv4' | 'email'
|
||||
min_value?: number
|
||||
max_value?: number
|
||||
min_selections?: number
|
||||
max_selections?: number
|
||||
}
|
||||
|
||||
export interface IntakeFormField {
|
||||
variable_name: string
|
||||
label: string
|
||||
field_type: IntakeFieldType
|
||||
required: boolean
|
||||
options?: string[]
|
||||
placeholder?: string
|
||||
help_text?: string
|
||||
default_value?: string
|
||||
group_name?: string
|
||||
display_order: number
|
||||
validation?: IntakeFieldValidation
|
||||
}
|
||||
|
||||
export interface CommandBlock {
|
||||
language?: string
|
||||
code: string
|
||||
label?: string
|
||||
}
|
||||
|
||||
export interface StepVerification {
|
||||
type: 'checkbox' | 'text_input'
|
||||
prompt: string
|
||||
}
|
||||
|
||||
export interface ProceduralStep {
|
||||
id: string
|
||||
type: 'procedure_step' | 'procedure_end'
|
||||
title: string
|
||||
description?: string
|
||||
content_type?: StepContentType
|
||||
estimated_minutes?: number
|
||||
warning_text?: string
|
||||
// Verification — supports both flat fields and nested object
|
||||
verification_prompt?: string
|
||||
verification_type?: 'checkbox' | 'text_input'
|
||||
verification?: StepVerification
|
||||
// Commands — supports both string and array of command blocks
|
||||
commands?: string | CommandBlock[]
|
||||
expected_outcome?: string
|
||||
notes_enabled?: boolean
|
||||
section_header?: string
|
||||
reference_url?: string
|
||||
}
|
||||
|
||||
export interface ProceduralTreeStructure {
|
||||
steps: ProceduralStep[]
|
||||
}
|
||||
|
||||
// API response types
|
||||
export type TreeStatus = 'draft' | 'published'
|
||||
|
||||
@@ -63,11 +134,14 @@ export interface Tree {
|
||||
id: string
|
||||
name: string
|
||||
description: string | null
|
||||
tree_type: TreeType
|
||||
category: string | null
|
||||
category_id: string | null
|
||||
category_info: CategoryInfo | null
|
||||
tags: string[]
|
||||
tree_structure: TreeStructure
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
tree_structure: TreeStructure & Record<string, any>
|
||||
intake_form: IntakeFormField[] | null
|
||||
author_id: string | null
|
||||
account_id: string | null
|
||||
is_active: boolean
|
||||
@@ -84,6 +158,7 @@ export interface TreeListItem {
|
||||
id: string
|
||||
name: string
|
||||
description: string | null
|
||||
tree_type: TreeType
|
||||
category: string | null
|
||||
category_id: string | null
|
||||
category_info: CategoryInfo | null
|
||||
@@ -103,10 +178,13 @@ export interface TreeListItem {
|
||||
export interface TreeCreate {
|
||||
name: string
|
||||
description?: string
|
||||
tree_type?: TreeType
|
||||
category?: string
|
||||
category_id?: string | null
|
||||
tags?: string[]
|
||||
tree_structure: TreeStructure
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
tree_structure: Record<string, any>
|
||||
intake_form?: IntakeFormField[]
|
||||
is_public?: boolean
|
||||
is_default?: boolean
|
||||
status?: TreeStatus
|
||||
@@ -115,10 +193,13 @@ export interface TreeCreate {
|
||||
export interface TreeUpdate {
|
||||
name?: string
|
||||
description?: string
|
||||
tree_type?: TreeType
|
||||
category?: string
|
||||
category_id?: string | null
|
||||
tags?: string[]
|
||||
tree_structure?: TreeStructure
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
tree_structure?: Record<string, any>
|
||||
intake_form?: IntakeFormField[]
|
||||
is_active?: boolean
|
||||
is_public?: boolean
|
||||
status?: TreeStatus
|
||||
@@ -126,6 +207,7 @@ export interface TreeUpdate {
|
||||
|
||||
// Filter params for tree listing
|
||||
export interface TreeFilters {
|
||||
tree_type?: TreeType
|
||||
category?: string
|
||||
category_id?: string
|
||||
tags?: string
|
||||
|
||||
Reference in New Issue
Block a user