645 lines
24 KiB
TypeScript
645 lines
24 KiB
TypeScript
import { useEffect, useState, useCallback, useRef } from 'react'
|
|
import { useNavigate, useSearchParams } from 'react-router-dom'
|
|
import { X, RotateCcw, Play, FileUp } from 'lucide-react'
|
|
import { PageMeta } from '@/components/common/PageMeta'
|
|
import { Button } from '@/components/ui/Button'
|
|
import { FlowIllustration } from '@/components/common/EmptyStateIllustrations'
|
|
import { treesApi } from '@/api/trees'
|
|
import { categoriesApi } from '@/api/categories'
|
|
import { foldersApi } from '@/api/folders'
|
|
import { sessionsApi } from '@/api/sessions'
|
|
import type { TreeListItem, CategoryListItem, FolderListItem, Session, IntakeFormField } from '@/types'
|
|
import { FolderEditModal } from '@/components/library/FolderEditModal'
|
|
import { ForkModal } from '@/components/library/ForkModal'
|
|
import { ExportFlowModal } from '@/components/library/ExportFlowModal'
|
|
import { ImportFlowModal } from '@/components/library/ImportFlowModal'
|
|
import { PrepareSessionModal } from '@/components/procedural/PrepareSessionModal'
|
|
import { accountsApi } from '@/api/accounts'
|
|
import { ConfirmDialog } from '@/components/common/ConfirmDialog'
|
|
import { TreeGridView } from '@/components/library/TreeGridView'
|
|
import { TreeListView } from '@/components/library/TreeListView'
|
|
import { TreeTableView } from '@/components/library/TreeTableView'
|
|
import { ViewToggle } from '@/components/library/ViewToggle'
|
|
import { SortDropdown } from '@/components/library/SortDropdown'
|
|
import { cn, safeGetItem } from '@/lib/utils'
|
|
import { getSessionResumePath, getTreeNavigatePath } from '@/lib/routing'
|
|
import { usePermissions } from '@/hooks/usePermissions'
|
|
import { useUserPreferencesStore } from '@/store/userPreferencesStore'
|
|
import { useCachedQuota } from '@/hooks/useCachedQuota'
|
|
import { CreateFlowDropdown } from '@/components/common/CreateFlowDropdown'
|
|
import { Spinner } from '@/components/common/Spinner'
|
|
import { EmptyState } from '@/components/common/EmptyState'
|
|
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[]>([])
|
|
const urlCategory = searchParams.get('category') || ''
|
|
const urlTags = searchParams.get('tags')
|
|
const [selectedCategoryId, setSelectedCategoryId] = useState<string>(urlCategory)
|
|
const [selectedTags, setSelectedTags] = useState<string[]>(urlTags ? urlTags.split(',') : [])
|
|
const [selectedFolderId, setSelectedFolderId] = useState<string | null>(null)
|
|
const [searchQuery, setSearchQuery] = useState('')
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
// 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 filters when URL changes (e.g. clicking sidebar categories/tags or nav sub-items)
|
|
useEffect(() => {
|
|
const t = searchParams.get('type')
|
|
if (t === 'troubleshooting' || t === 'procedural') {
|
|
setTypeFilter(t)
|
|
} else {
|
|
setTypeFilter('all')
|
|
}
|
|
setSelectedCategoryId(searchParams.get('category') || '')
|
|
const tagsParam = searchParams.get('tags')
|
|
setSelectedTags(tagsParam ? tagsParam.split(',') : [])
|
|
}, [searchParams])
|
|
|
|
// View preferences from store
|
|
const { treeLibraryView, setTreeLibraryView, treeLibrarySortBy, setTreeLibrarySortBy } =
|
|
useUserPreferencesStore()
|
|
|
|
// Folder modal state
|
|
const [folderModalOpen, setFolderModalOpen] = useState(false)
|
|
const [editingFolder, setEditingFolder] = useState<FolderListItem | null>(null)
|
|
const [newFolderParentId, setNewFolderParentId] = useState<string | null>(null)
|
|
|
|
// Delete confirmation state
|
|
const [treeToDelete, setTreeToDelete] = useState<TreeListItem | null>(null)
|
|
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
|
|
const [isDeleting, setIsDeleting] = useState(false)
|
|
|
|
// Fork modal state
|
|
const [forkTarget, setForkTarget] = useState<TreeListItem | null>(null)
|
|
|
|
// Import/Export modal state
|
|
const [showImportModal, setShowImportModal] = useState(false)
|
|
const [exportTarget, setExportTarget] = useState<TreeListItem | null>(null)
|
|
|
|
// Prepare session modal state
|
|
const [prepareTarget, setPrepareTarget] = useState<{
|
|
tree: TreeListItem
|
|
intakeFields: IntakeFormField[]
|
|
teamMembers: { id: string; name: string; email: string }[]
|
|
} | null>(null)
|
|
|
|
// AI builder state
|
|
|
|
const { aiEnabled } = useCachedQuota()
|
|
|
|
// Repeat Last Session
|
|
const lastSessionData = (() => {
|
|
const raw = safeGetItem('last-session')
|
|
if (!raw) return null
|
|
try { return JSON.parse(raw) as { tree_id: string; tree_name: string; client_name: string; ticket_number: string; tree_type?: string } }
|
|
catch { return null }
|
|
})()
|
|
|
|
// Incomplete sessions for auto-recovery
|
|
const [incompleteSessions, setIncompleteSessions] = useState<Session[]>([])
|
|
const [dismissedSessionIds, setDismissedSessionIds] = useState<Set<string>>(() => {
|
|
try {
|
|
const raw = sessionStorage.getItem('dismissed-sessions')
|
|
return raw ? new Set(JSON.parse(raw) as string[]) : new Set()
|
|
} catch { return new Set() }
|
|
})
|
|
|
|
const loadFolders = useCallback(async () => {
|
|
try {
|
|
const foldersData = await foldersApi.list()
|
|
setFolders(foldersData)
|
|
} catch (err) {
|
|
console.error('Failed to load folders:', err)
|
|
}
|
|
}, [])
|
|
|
|
// Load incomplete sessions on mount
|
|
useEffect(() => {
|
|
sessionsApi.list({ completed: false, size: 5 })
|
|
.then(setIncompleteSessions)
|
|
.catch((err) => console.error('Failed to load incomplete sessions:', err))
|
|
}, [])
|
|
|
|
const dismissSession = (sessionId: string) => {
|
|
const next = new Set(dismissedSessionIds)
|
|
next.add(sessionId)
|
|
setDismissedSessionIds(next)
|
|
try { sessionStorage.setItem('dismissed-sessions', JSON.stringify([...next])) } catch { /* */ }
|
|
}
|
|
|
|
const visibleIncompleteSessions = incompleteSessions.filter(s => !dismissedSessionIds.has(s.id))
|
|
|
|
const formatTimeAgo = (dateString: string) => {
|
|
const diff = Math.floor((Date.now() - new Date(dateString).getTime()) / 1000)
|
|
if (diff < 60) return 'just now'
|
|
if (diff < 3600) return `${Math.floor(diff / 60)} min ago`
|
|
if (diff < 86400) return `${Math.floor(diff / 3600)} hr ago`
|
|
return `${Math.floor(diff / 86400)} days ago`
|
|
}
|
|
|
|
// Load categories once on mount (they rarely change)
|
|
useEffect(() => {
|
|
categoriesApi.list()
|
|
.then(setCategories)
|
|
.catch((err) => console.error('Failed to load categories:', err))
|
|
}, [])
|
|
|
|
// Request ID ref to discard stale responses when filters change rapidly
|
|
const loadTreesRequestId = useRef(0)
|
|
|
|
const loadTrees = useCallback(async () => {
|
|
const requestId = ++loadTreesRequestId.current
|
|
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,
|
|
sort_by: treeLibrarySortBy,
|
|
})
|
|
if (requestId !== loadTreesRequestId.current) return
|
|
setTrees(treesData)
|
|
} catch (err) {
|
|
if (requestId !== loadTreesRequestId.current) return
|
|
toast.error('Failed to load flows')
|
|
console.error(err)
|
|
} finally {
|
|
if (requestId === loadTreesRequestId.current) setIsLoading(false)
|
|
}
|
|
}, [selectedCategoryId, selectedTags, selectedFolderId, treeLibrarySortBy, typeFilter])
|
|
|
|
// Load trees when filters change
|
|
useEffect(() => {
|
|
loadTrees()
|
|
}, [loadTrees])
|
|
|
|
// Load folders on mount and listen for changes
|
|
useEffect(() => {
|
|
loadFolders()
|
|
const handleFolderChange = () => loadFolders()
|
|
window.addEventListener('folder-changed', handleFolderChange)
|
|
return () => window.removeEventListener('folder-changed', handleFolderChange)
|
|
}, [loadFolders])
|
|
|
|
const handleSearch = async () => {
|
|
if (!searchQuery.trim()) {
|
|
loadTrees()
|
|
return
|
|
}
|
|
setIsLoading(true)
|
|
try {
|
|
const results = await treesApi.search(searchQuery)
|
|
setTrees(results)
|
|
} catch (err) {
|
|
toast.error('Failed to search flows')
|
|
console.error(err)
|
|
} finally {
|
|
setIsLoading(false)
|
|
}
|
|
}
|
|
|
|
const handleTagClick = (tag: string) => {
|
|
if (!selectedTags.includes(tag)) {
|
|
setSelectedTags([...selectedTags, tag])
|
|
}
|
|
}
|
|
|
|
const removeTagFilter = (tag: string) => {
|
|
setSelectedTags(selectedTags.filter((t) => t !== tag))
|
|
}
|
|
|
|
const clearAllFilters = () => {
|
|
setSelectedCategoryId('')
|
|
setSelectedTags([])
|
|
setSelectedFolderId(null)
|
|
setSearchQuery('')
|
|
}
|
|
|
|
const handleStartSession = (treeId: string, treeType?: string) => {
|
|
navigate(getTreeNavigatePath(treeId, treeType))
|
|
}
|
|
|
|
const handleCreateFolder = (parentId?: string | null) => {
|
|
setEditingFolder(null)
|
|
setNewFolderParentId(parentId || null)
|
|
setFolderModalOpen(true)
|
|
}
|
|
|
|
const handleDeleteTree = async () => {
|
|
if (!treeToDelete) return
|
|
setIsDeleting(true)
|
|
try {
|
|
await treesApi.delete(treeToDelete.id)
|
|
setTrees(trees.filter((t) => t.id !== treeToDelete.id))
|
|
window.dispatchEvent(new Event('folder-changed'))
|
|
toast.success(`"${treeToDelete.name}" deleted successfully`)
|
|
} catch (err) {
|
|
console.error('Failed to delete flow:', err)
|
|
toast.error('Failed to delete flow')
|
|
} finally {
|
|
setIsDeleting(false)
|
|
setShowDeleteConfirm(false)
|
|
setTreeToDelete(null)
|
|
}
|
|
}
|
|
|
|
const handleForkTree = (treeId: string) => {
|
|
const tree = trees.find((t) => t.id === treeId)
|
|
if (tree) setForkTarget(tree)
|
|
}
|
|
|
|
const handleExportTree = (treeId: string) => {
|
|
const tree = trees.find((t) => t.id === treeId)
|
|
if (tree) setExportTarget(tree)
|
|
}
|
|
|
|
const handlePrepareSession = async (tree: TreeListItem) => {
|
|
try {
|
|
const [treeDetail, members] = await Promise.all([
|
|
treesApi.get(tree.id),
|
|
accountsApi.getMembers().catch(() => []),
|
|
])
|
|
setPrepareTarget({
|
|
tree,
|
|
intakeFields: treeDetail.intake_form || [],
|
|
teamMembers: members
|
|
.filter(m => m.is_active)
|
|
.map(m => ({ id: m.id, name: m.name, email: m.email })),
|
|
})
|
|
} catch {
|
|
toast.error('Failed to load flow details')
|
|
}
|
|
}
|
|
|
|
const hasActiveFilters =
|
|
selectedCategoryId || selectedTags.length > 0 || searchQuery || selectedFolderId
|
|
|
|
return (
|
|
<div className="overflow-y-auto h-full">
|
|
<PageMeta title="Flow Library" />
|
|
<div className="min-h-full">
|
|
<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 font-heading text-foreground sm:text-3xl">
|
|
{typeFilter === 'procedural' ? 'Projects' : typeFilter === 'troubleshooting' ? 'Troubleshooting Flows' : 'Flow Library'}
|
|
</h1>
|
|
<p className="mt-2 text-muted-foreground">
|
|
{typeFilter === 'procedural'
|
|
? 'Step-by-step projects and runbooks'
|
|
: typeFilter === 'troubleshooting'
|
|
? 'Branching decision flows for troubleshooting'
|
|
: 'Browse and start troubleshooting flows and projects'}
|
|
</p>
|
|
</div>
|
|
{canCreateTrees && (
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="secondary"
|
|
onClick={() => setShowImportModal(true)}
|
|
>
|
|
<FileUp className="h-4 w-4" />
|
|
Import
|
|
</Button>
|
|
<CreateFlowDropdown
|
|
aiEnabled={aiEnabled}
|
|
|
|
label="Create New"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Search and Filter */}
|
|
<div className="mb-4 space-y-4">
|
|
<div className="flex flex-col gap-4 sm:flex-row">
|
|
<div className="flex flex-1 gap-2">
|
|
<input
|
|
type="text"
|
|
placeholder="Search flows..."
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
|
|
className={cn(
|
|
'flex-1 rounded-md border border-border bg-card px-3 py-2',
|
|
'text-foreground placeholder:text-muted-foreground',
|
|
'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
|
|
)}
|
|
/>
|
|
<Button onClick={handleSearch}>
|
|
Search
|
|
</Button>
|
|
</div>
|
|
|
|
<select
|
|
value={selectedCategoryId}
|
|
onChange={(e) => setSelectedCategoryId(e.target.value)}
|
|
aria-label="Filter by category"
|
|
className={cn(
|
|
'rounded-md border border-border bg-card px-3 py-2',
|
|
'text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
|
|
)}
|
|
>
|
|
<option value="">All Categories</option>
|
|
{categories.map((cat) => (
|
|
<option key={cat.id} value={cat.id}>
|
|
{cat.name} ({cat.tree_count})
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* View Controls */}
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
|
{/* Type filter tabs */}
|
|
<div className="flex rounded-lg border border-border 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-accent text-foreground'
|
|
: 'text-muted-foreground hover:text-foreground'
|
|
)}
|
|
>
|
|
{t === 'all' ? 'All' : t === 'troubleshooting' ? 'Troubleshooting' : 'Projects'}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Right controls: sort + view toggle */}
|
|
<div className="flex items-center gap-2">
|
|
<SortDropdown value={treeLibrarySortBy} onChange={setTreeLibrarySortBy} />
|
|
<ViewToggle view={treeLibraryView} onChange={setTreeLibraryView} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Active Filters */}
|
|
{hasActiveFilters && (
|
|
<div className="mb-6 flex flex-wrap items-center gap-2">
|
|
<span className="text-sm text-muted-foreground">Filters:</span>
|
|
{selectedFolderId && (
|
|
<span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-foreground">
|
|
Folder
|
|
<button
|
|
onClick={() => setSelectedFolderId(null)}
|
|
className="rounded-full p-0.5 hover:bg-accent"
|
|
>
|
|
<X className="h-3 w-3" />
|
|
</button>
|
|
</span>
|
|
)}
|
|
{selectedCategoryId && (
|
|
<span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-foreground">
|
|
{categories.find((c) => c.id === selectedCategoryId)?.name}
|
|
<button
|
|
onClick={() => setSelectedCategoryId('')}
|
|
className="rounded-full p-0.5 hover:bg-accent"
|
|
>
|
|
<X className="h-3 w-3" />
|
|
</button>
|
|
</span>
|
|
)}
|
|
{selectedTags.map((tag) => (
|
|
<span
|
|
key={tag}
|
|
className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-foreground"
|
|
>
|
|
{tag}
|
|
<button
|
|
onClick={() => removeTagFilter(tag)}
|
|
className="rounded-full p-0.5 hover:bg-accent"
|
|
>
|
|
<X className="h-3 w-3" />
|
|
</button>
|
|
</span>
|
|
))}
|
|
<button
|
|
onClick={clearAllFilters}
|
|
className="text-sm text-muted-foreground hover:text-foreground"
|
|
>
|
|
Clear all
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Incomplete Session Recovery */}
|
|
{visibleIncompleteSessions.length > 0 && (
|
|
<div className="mb-6 space-y-2">
|
|
{visibleIncompleteSessions.map(s => (
|
|
<div key={s.id} className="bg-card border border-border flex items-center justify-between rounded-xl p-4">
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate font-medium text-foreground">
|
|
{s.tree_snapshot?.name || 'Unknown tree'}
|
|
</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
{s.client_name && `${s.client_name} · `}
|
|
{s.started_at ? `Started ${formatTimeAgo(s.started_at)}` : 'Not started'}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
size="sm"
|
|
onClick={() => navigate(getSessionResumePath(s.tree_id, s.tree_snapshot?.tree_type), { state: { sessionId: s.id } })}
|
|
>
|
|
<Play className="h-3.5 w-3.5" />
|
|
Resume
|
|
</Button>
|
|
<button
|
|
onClick={() => dismissSession(s.id)}
|
|
className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Repeat Last Session */}
|
|
{lastSessionData && (
|
|
<div className="mb-6">
|
|
<button
|
|
onClick={() => navigate(getSessionResumePath(lastSessionData.tree_id, lastSessionData.tree_type), {
|
|
state: { prefillClientName: lastSessionData.client_name, prefillTicketNumber: lastSessionData.ticket_number },
|
|
})}
|
|
className={cn(
|
|
'flex items-center gap-2 rounded-lg border border-border px-4 py-2.5 text-sm text-muted-foreground',
|
|
'hover:border-border hover:bg-accent hover:text-foreground'
|
|
)}
|
|
>
|
|
<RotateCcw className="h-4 w-4" />
|
|
Repeat: {lastSessionData.tree_name}
|
|
{lastSessionData.client_name && ` (${lastSessionData.client_name})`}
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Loading State */}
|
|
{isLoading ? (
|
|
<div className="flex justify-center py-12">
|
|
<Spinner />
|
|
</div>
|
|
) : trees.length === 0 ? (
|
|
(searchQuery || hasActiveFilters) ? (
|
|
<EmptyState
|
|
title="No flows match your filters"
|
|
description="Try adjusting your search or filters."
|
|
action={
|
|
<Button variant="secondary" onClick={clearAllFilters}>
|
|
Clear Filters
|
|
</Button>
|
|
}
|
|
/>
|
|
) : (
|
|
<EmptyState
|
|
illustration={<FlowIllustration />}
|
|
title="Build your first troubleshooting flow"
|
|
description="Flows guide your team through proven resolution paths, capturing every decision along the way."
|
|
action={
|
|
canCreateTrees ? (
|
|
<CreateFlowDropdown aiEnabled={aiEnabled} label="Create a Flow" />
|
|
) : undefined
|
|
}
|
|
learnMoreLink="/guides/creating-flows"
|
|
/>
|
|
)
|
|
) : (
|
|
<>
|
|
{treeLibraryView === 'grid' && (
|
|
<TreeGridView
|
|
trees={trees}
|
|
onStartSession={handleStartSession}
|
|
onPrepareSession={handlePrepareSession}
|
|
onTagClick={handleTagClick}
|
|
onFolderCreated={handleCreateFolder}
|
|
onDeleteTree={(tree) => {
|
|
setTreeToDelete(tree)
|
|
setShowDeleteConfirm(true)
|
|
}}
|
|
onForkTree={handleForkTree}
|
|
onExportTree={handleExportTree}
|
|
/>
|
|
)}
|
|
{treeLibraryView === 'list' && (
|
|
<TreeListView
|
|
trees={trees}
|
|
onStartSession={handleStartSession}
|
|
onPrepareSession={handlePrepareSession}
|
|
onTagClick={handleTagClick}
|
|
onFolderCreated={handleCreateFolder}
|
|
onDeleteTree={(tree) => {
|
|
setTreeToDelete(tree)
|
|
setShowDeleteConfirm(true)
|
|
}}
|
|
onForkTree={handleForkTree}
|
|
onExportTree={handleExportTree}
|
|
/>
|
|
)}
|
|
{treeLibraryView === 'table' && (
|
|
<TreeTableView
|
|
trees={trees}
|
|
onStartSession={handleStartSession}
|
|
onPrepareSession={handlePrepareSession}
|
|
onTagClick={handleTagClick}
|
|
onFolderCreated={handleCreateFolder}
|
|
onDeleteTree={(tree) => {
|
|
setTreeToDelete(tree)
|
|
setShowDeleteConfirm(true)
|
|
}}
|
|
onSortChange={(sortBy) => {
|
|
setTreeLibrarySortBy(
|
|
sortBy as 'usage_count' | 'updated_at' | 'created_at' | 'name' | 'name_desc' | 'version'
|
|
)
|
|
}}
|
|
onForkTree={handleForkTree}
|
|
onExportTree={handleExportTree}
|
|
/>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Folder Edit Modal */}
|
|
<FolderEditModal
|
|
folder={editingFolder}
|
|
parentId={newFolderParentId}
|
|
folders={folders}
|
|
isOpen={folderModalOpen}
|
|
onClose={() => {
|
|
setFolderModalOpen(false)
|
|
setNewFolderParentId(null)
|
|
}}
|
|
onSave={loadTrees}
|
|
/>
|
|
|
|
{/* Delete Confirmation */}
|
|
<ConfirmDialog
|
|
isOpen={showDeleteConfirm}
|
|
onClose={() => {
|
|
setShowDeleteConfirm(false)
|
|
setTreeToDelete(null)
|
|
}}
|
|
onConfirm={handleDeleteTree}
|
|
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"
|
|
isLoading={isDeleting}
|
|
/>
|
|
|
|
|
|
{forkTarget && (
|
|
<ForkModal
|
|
treeId={forkTarget.id}
|
|
treeName={forkTarget.name}
|
|
onClose={() => setForkTarget(null)}
|
|
/>
|
|
)}
|
|
|
|
{exportTarget && (
|
|
<ExportFlowModal
|
|
treeId={exportTarget.id}
|
|
treeName={exportTarget.name}
|
|
onClose={() => setExportTarget(null)}
|
|
/>
|
|
)}
|
|
|
|
{showImportModal && (
|
|
<ImportFlowModal
|
|
onClose={() => { setShowImportModal(false); loadTrees() }}
|
|
/>
|
|
)}
|
|
|
|
{prepareTarget && (
|
|
<PrepareSessionModal
|
|
isOpen
|
|
onClose={() => setPrepareTarget(null)}
|
|
treeId={prepareTarget.tree.id}
|
|
treeName={prepareTarget.tree.name}
|
|
intakeFields={prepareTarget.intakeFields}
|
|
teamMembers={prepareTarget.teamMembers}
|
|
onPrepared={() => setPrepareTarget(null)}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default TreeLibraryPage
|