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
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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user