fix: wire up maintenance flow creation, editing, and navigation in frontend

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/pages/ProceduralEditorPage.tsx

@@ -1,20 +1,23 @@
 import { useEffect } from 'react'
-import { useParams, useNavigate } from 'react-router-dom'
-import { Save, ArrowLeft, ListOrdered } from 'lucide-react'
+import { useParams, useNavigate, useSearchParams } from 'react-router-dom'
+import { Save, ArrowLeft, ListOrdered, Wrench } 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 { TagInput } from '@/components/common/TagInput'
 import { toast } from '@/lib/toast'
+import type { TreeType } from '@/types'
 
 export function ProceduralEditorPage() {
   const { id } = useParams<{ id: string }>()
+  const [searchParams] = useSearchParams()
   const navigate = useNavigate()
   const isEditMode = !!id
 
   const {
     treeId,
+    treeType,
     name,
     description,
     tags,
@@ -34,12 +37,16 @@ export function ProceduralEditorPage() {
     getTreeForSave,
   } = useProceduralEditorStore()
 
+  const isMaintenance = treeType === 'maintenance'
+  const flowLabel = isMaintenance ? 'Maintenance Flow' : 'Procedure'
+
   // Load tree or init new
   useEffect(() => {
     if (isEditMode && id) {
       loadExistingTree(id)
     } else {
-      initNew()
+      const urlType = searchParams.get('type')
+      initNew((urlType === 'maintenance' ? 'maintenance' : 'procedural') as TreeType)
     }
 
     return () => { reset() }
@@ -48,21 +55,21 @@ export function ProceduralEditorPage() {
   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')
+      if (tree.tree_type !== 'procedural' && tree.tree_type !== 'maintenance') {
+        toast.error('This flow is not a procedural or maintenance flow')
         navigate('/my-trees')
         return
       }
       loadTree(tree)
     } catch {
-      toast.error('Failed to load procedure')
+      toast.error('Failed to load flow')
       navigate('/my-trees')
     }
   }
 
   const handleSave = async (saveStatus?: 'draft' | 'published') => {
     if (!name.trim()) {
-      toast.error('Please enter a name for the procedure')
+      toast.error(`Please enter a name for the ${flowLabel.toLowerCase()}`)
       return
     }
 
@@ -76,18 +83,18 @@ export function ProceduralEditorPage() {
       if (isEditMode && treeId) {
         await treesApi.update(treeId, payload)
         markSaved()
-        toast.success('Procedure saved')
+        toast.success(`${flowLabel} saved`)
       } else {
         const created = await treesApi.create(payload)
         markSaved()
-        toast.success('Procedure created')
+        toast.success(`${flowLabel} 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'
+      const errorText = typeof message === 'string' ? message : typeof message === 'object' && message?.message ? message.message : `Failed to save ${flowLabel.toLowerCase()}`
       toast.error(errorText)
     } finally {
       setIsSaving(false)
@@ -114,9 +121,11 @@ export function ProceduralEditorPage() {
             <ArrowLeft className="h-5 w-5" />
           </button>
           <div className="flex items-center gap-2">
-            <ListOrdered className="h-5 w-5 text-muted-foreground" />
+            {isMaintenance
+              ? <Wrench className="h-5 w-5 text-amber-400" />
+              : <ListOrdered className="h-5 w-5 text-muted-foreground" />}
             <h1 className="text-xl font-bold text-foreground sm:text-2xl">
-              {isEditMode ? 'Edit Procedure' : 'New Procedure'}
+              {isEditMode ? `Edit ${flowLabel}` : `New ${flowLabel}`}
             </h1>
           </div>
         </div>