chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: enforce shared Modal component #100

Merged
chihlasm merged 3 commits from refactor/enforce-shared-modal into main 2026-03-08 05:25:50 +00:00
Conversation 1 Commits 3 Files Changed 38 +705 -1067
38 changed files with 705 additions and 1067 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
frontend/src/components/admin/CreateCategoryModal.tsx
View File

@@ -1,6 +1,7 @@
import { useState } from 'react'
import { X } from 'lucide-react'
import { cn } from '@/lib/utils'
import { Modal } from '@/components/common/Modal'
import { Button } from '@/components/ui/Button'
interface CreateCategoryModalProps {
isOpen: boolean
@@ -19,8 +20,6 @@ export function CreateCategoryModal({
const [description, setDescription] = useState('')
const [error, setError] = useState('')
if (!isOpen) return null
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
setError('')
@@ -40,7 +39,6 @@ export function CreateCategoryModal({
name: name.trim(),
description: description.trim()
})
// Reset form on success
setName('')
setDescription('')
} catch {
@@ -58,102 +56,84 @@ export function CreateCategoryModal({
}
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-xs">
<div className="w-full max-w-md bg-card border border-border rounded-xl p-6 shadow-lg">
{/* Header */}
<div className="mb-4 flex items-center justify-between">
<h2 className="text-lg font-semibold text-foreground">Create Category</h2>
<button
<Modal
isOpen={isOpen}
onClose={handleClose}
title="Create Category"
size="sm"
footer={
<div className="flex justify-end gap-2">
<Button
type="button"
variant="secondary"
onClick={handleClose}
disabled={isSaving}
className="rounded-full p-1 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
>
<X className="h-5 w-5" />
</button>
Cancel
</Button>
<Button
type="submit"
form="create-category-form"
disabled={!name.trim()}
loading={isSaving}
>
Create Category
</Button>
</div>
}
>
<form id="create-category-form" onSubmit={handleSubmit} className="space-y-4">
{error && (
<div className="rounded-md bg-red-400/10 p-3 text-sm text-red-400">
{error}
</div>
)}
<div>
<label htmlFor="name" className="mb-1 block text-sm font-medium text-foreground">
Category Name <span className="text-red-400">*</span>
</label>
<input
id="name"
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
disabled={isSaving}
maxLength={100}
placeholder="e.g., Network Troubleshooting"
required
className={cn(
'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
'placeholder:text-muted-foreground',
'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
'disabled:opacity-50'
)}
/>
<p className="mt-1 text-xs text-muted-foreground">
{name.length}/100 characters
</p>
</div>
{/* Form */}
<form onSubmit={handleSubmit} className="space-y-4">
{/* Error Message */}
{error && (
<div className="rounded-md bg-red-400/10 p-3 text-sm text-red-400">
{error}
</div>
)}
{/* Name Field */}
<div>
<label htmlFor="name" className="mb-1 block text-sm font-medium text-foreground">
Category Name <span className="text-red-400">*</span>
</label>
<input
id="name"
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
disabled={isSaving}
maxLength={100}
placeholder="e.g., Network Troubleshooting"
required
className={cn(
'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
'placeholder:text-muted-foreground',
'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
'disabled:opacity-50'
)}
/>
<p className="mt-1 text-xs text-muted-foreground">
{name.length}/100 characters
</p>
</div>
{/* Description Field */}
<div>
<label htmlFor="description" className="mb-1 block text-sm font-medium text-foreground">
Description <span className="text-muted-foreground">(optional)</span>
</label>
<textarea
id="description"
value={description}
onChange={(e) => setDescription(e.target.value)}
disabled={isSaving}
rows={3}
placeholder="Brief description of this category..."
className={cn(
'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
'placeholder:text-muted-foreground',
'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
'disabled:opacity-50'
)}
/>
</div>
{/* Actions */}
<div className="flex justify-end gap-2 pt-2">
<button
type="button"
onClick={handleClose}
disabled={isSaving}
className={cn(
'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
'hover:bg-accent hover:text-foreground disabled:opacity-50'
)}
>
Cancel
</button>
<button
type="submit"
disabled={isSaving || !name.trim()}
className={cn(
'rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium',
'hover:opacity-90 disabled:opacity-50'
)}
>
{isSaving ? 'Creating...' : 'Create Category'}
</button>
</div>
</form>
</div>
</div>
<div>
<label htmlFor="description" className="mb-1 block text-sm font-medium text-foreground">
Description <span className="text-muted-foreground">(optional)</span>
</label>
<textarea
id="description"
value={description}
onChange={(e) => setDescription(e.target.value)}
disabled={isSaving}
rows={3}
placeholder="Brief description of this category..."
className={cn(
'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
'placeholder:text-muted-foreground',
'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
'disabled:opacity-50'
)}
/>
</div>
</form>
</Modal>
)
}

171
frontend/src/components/admin/EditCategoryModal.tsx
View File

@@ -1,7 +1,8 @@
import { useState } from 'react'
import { X } from 'lucide-react'
import { cn } from '@/lib/utils'
import type { StepCategoryListItem } from '@/types'
import { Modal } from '@/components/common/Modal'
import { Button } from '@/components/ui/Button'
interface EditCategoryModalProps {
isOpen: boolean
@@ -33,7 +34,7 @@ export function EditCategoryModal({
setPrevCategoryId(null)
}
if (!isOpen || !category) return null
if (!category) return null
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
@@ -67,102 +68,84 @@ export function EditCategoryModal({
}
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-xs">
<div className="w-full max-w-md bg-card border border-border rounded-xl p-6 shadow-lg">
{/* Header */}
<div className="mb-4 flex items-center justify-between">
<h2 className="text-lg font-semibold text-foreground">Edit Category</h2>
<button
<Modal
isOpen={isOpen}
onClose={handleClose}
title="Edit Category"
size="sm"
footer={
<div className="flex justify-end gap-2">
<Button
type="button"
variant="secondary"
onClick={handleClose}
disabled={isSaving}
className="rounded-full p-1 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
>
<X className="h-5 w-5" />
</button>
Cancel
</Button>
<Button
type="submit"
form="edit-category-form"
disabled={!name.trim()}
loading={isSaving}
>
Save Changes
</Button>
</div>
}
>
<form id="edit-category-form" onSubmit={handleSubmit} className="space-y-4">
{error && (
<div className="rounded-md bg-red-400/10 p-3 text-sm text-red-400">
{error}
</div>
)}
<div>
<label htmlFor="edit-name" className="mb-1 block text-sm font-medium text-foreground">
Category Name <span className="text-red-400">*</span>
</label>
<input
id="edit-name"
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
disabled={isSaving}
maxLength={100}
placeholder="e.g., Network Troubleshooting"
required
className={cn(
'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
'placeholder:text-muted-foreground',
'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
'disabled:opacity-50'
)}
/>
<p className="mt-1 text-xs text-muted-foreground">
{name.length}/100 characters
</p>
</div>
{/* Form */}
<form onSubmit={handleSubmit} className="space-y-4">
{/* Error Message */}
{error && (
<div className="rounded-md bg-red-400/10 p-3 text-sm text-red-400">
{error}
</div>
)}
{/* Name Field */}
<div>
<label htmlFor="edit-name" className="mb-1 block text-sm font-medium text-foreground">
Category Name <span className="text-red-400">*</span>
</label>
<input
id="edit-name"
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
disabled={isSaving}
maxLength={100}
placeholder="e.g., Network Troubleshooting"
required
className={cn(
'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
'placeholder:text-muted-foreground',
'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
'disabled:opacity-50'
)}
/>
<p className="mt-1 text-xs text-muted-foreground">
{name.length}/100 characters
</p>
</div>
{/* Description Field */}
<div>
<label htmlFor="edit-description" className="mb-1 block text-sm font-medium text-foreground">
Description <span className="text-muted-foreground">(optional)</span>
</label>
<textarea
id="edit-description"
value={description}
onChange={(e) => setDescription(e.target.value)}
disabled={isSaving}
rows={3}
placeholder="Brief description of this category..."
className={cn(
'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
'placeholder:text-muted-foreground',
'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
'disabled:opacity-50'
)}
/>
</div>
{/* Actions */}
<div className="flex justify-end gap-2 pt-2">
<button
type="button"
onClick={handleClose}
disabled={isSaving}
className={cn(
'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
'hover:bg-accent hover:text-foreground disabled:opacity-50'
)}
>
Cancel
</button>
<button
type="submit"
disabled={isSaving || !name.trim()}
className={cn(
'rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium',
'hover:opacity-90 disabled:opacity-50'
)}
>
{isSaving ? 'Saving...' : 'Save Changes'}
</button>
</div>
</form>
</div>
</div>
<div>
<label htmlFor="edit-description" className="mb-1 block text-sm font-medium text-foreground">
Description <span className="text-muted-foreground">(optional)</span>
</label>
<textarea
id="edit-description"
value={description}
onChange={(e) => setDescription(e.target.value)}
disabled={isSaving}
rows={3}
placeholder="Brief description of this category..."
className={cn(
'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
'placeholder:text-muted-foreground',
'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
'disabled:opacity-50'
)}
/>
</div>
</form>
</Modal>
)
}

12
frontend/src/components/common/ErrorBoundary.tsx
View File

@@ -1,5 +1,5 @@
import { Component, type ReactNode } from 'react'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/Button'
interface Props {
children: ReactNode
@@ -45,15 +45,9 @@ export class ErrorBoundary extends Component<Props, State> {
{this.state.error.message}
</pre>
)}
<button
onClick={() => window.location.reload()}
className={cn(
'rounded-xl bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:opacity-90'
)}
>
<Button onClick={() => window.location.reload()}>
Refresh Page
</button>
</Button>
</div>
</div>
)

22
frontend/src/components/common/RouteError.tsx
View File

@@ -1,6 +1,6 @@
import { useEffect } from 'react'
import { useRouteError, isRouteErrorResponse, useNavigate } from 'react-router-dom'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/Button'
function isChunkLoadError(error: unknown): boolean {
if (!(error instanceof Error)) return false
@@ -55,24 +55,12 @@ export function RouteError() {
<p className="mb-4 text-muted-foreground">{errorDetails}</p>
)}
<div className="flex justify-center gap-4">
<button
onClick={() => navigate(-1)}
className={cn(
'rounded-xl border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
'hover:bg-accent hover:text-foreground'
)}
>
<Button variant="secondary" onClick={() => navigate(-1)}>
Go Back
</button>
<button
onClick={() => navigate('/trees')}
className={cn(
'rounded-xl bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:opacity-90'
)}
>
</Button>
<Button onClick={() => navigate('/trees')}>
Go Home
</button>
</Button>
</div>
</div>
</div>

17
frontend/src/components/library/ExportFlowModal.tsx
View File

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react'
import { Download, X } from 'lucide-react'
import { flowTransferApi } from '@/api/flowTransfer'
import { toast } from '@/lib/toast'
import { Button } from '@/components/ui/Button'
interface ExportFlowModalProps {
treeId: string
@@ -79,20 +80,16 @@ export function ExportFlowModal({ treeId, treeName, onClose }: ExportFlowModalPr
{/* Footer */}
<div className="flex justify-end gap-2 border-t border-border px-5 py-3">
<button
onClick={onClose}
className="rounded-lg border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
>
<Button variant="secondary" onClick={onClose}>
Cancel
</button>
<button
</Button>
<Button
onClick={handleExport}
disabled={isExporting}
className="bg-gradient-brand flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90 disabled:opacity-40 disabled:cursor-not-allowed"
loading={isExporting}
>
<Download className="h-4 w-4" />
{isExporting ? 'Exporting…' : 'Download .rfflow'}
</button>
Download .rfflow
</Button>
</div>
</div>
</div>

20
frontend/src/components/library/FolderEditModal.tsx
View File

@@ -4,6 +4,7 @@ import { foldersApi } from '@/api/folders'
import type { FolderListItem, FolderCreate, FolderUpdate } from '@/types'
import { cn } from '@/lib/utils'
import { toast } from '@/lib/toast'
import { Button } from '@/components/ui/Button'
// Predefined color options
const FOLDER_COLORS = [
@@ -259,24 +260,19 @@ export function FolderEditModal({
{/* Actions */}
<div className="flex justify-end gap-3">
<button
<Button
type="button"
variant="secondary"
onClick={onClose}
className={cn('rounded-md border border-border px-4 py-2 text-sm text-muted-foreground', 'hover:bg-accent hover:text-foreground')}
>
Cancel
</button>
<button
</Button>
<Button
type="submit"
disabled={isSubmitting}
className={cn(
'rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:opacity-90',
'disabled:opacity-50'
)}
loading={isSubmitting}
>
{isSubmitting ? 'Saving...' : isEditMode ? 'Save Changes' : 'Create Folder'}
</button>
{isEditMode ? 'Save Changes' : 'Create Folder'}
</Button>
</div>
</form>
</div>

17
frontend/src/components/library/ForkModal.tsx
View File

@@ -4,6 +4,7 @@ import { treesApi } from '@/api/trees'
import { toast } from '@/lib/toast'
import { cn } from '@/lib/utils'
import { useNavigate } from 'react-router-dom'
import { Button } from '@/components/ui/Button'
interface ForkModalProps {
treeId: string
@@ -116,20 +117,20 @@ export function ForkModal({ treeId, treeName, onClose }: ForkModalProps) {
{/* Footer */}
<div className="flex justify-end gap-2 pt-1">
<button
<Button
type="button"
variant="secondary"
onClick={onClose}
className="rounded-lg border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
>
Cancel
</button>
<button
</Button>
<Button
type="submit"
disabled={isSubmitting || !name.trim()}
className="bg-gradient-brand flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90 disabled:opacity-40 disabled:cursor-not-allowed"
disabled={!name.trim()}
loading={isSubmitting}
>
{isSubmitting ? 'Forking…' : 'Fork Flow'}
</button>
Fork Flow
</Button>
</div>
</form>
</div>

25
frontend/src/components/library/ImportFlowModal.tsx
View File

@@ -7,6 +7,7 @@ import { toast } from '@/lib/toast'
import { cn } from '@/lib/utils'
import { useNavigate } from 'react-router-dom'
import { getTreeEditorPath } from '@/lib/routing'
import { Button } from '@/components/ui/Button'
interface ImportFlowModalProps {
onClose: () => void
@@ -227,28 +228,26 @@ export function ImportFlowModal({ onClose }: ImportFlowModalProps) {
{/* Footer */}
<div className="flex justify-end gap-2 border-t border-border px-5 py-3">
{step === 'preview' && (
<button
<Button
variant="secondary"
onClick={() => { setStep('pick'); setParsed(null); setParseError(null) }}
className="mr-auto rounded-lg border border-border px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
className="mr-auto"
>
Back
</button>
</Button>
)}
<button
onClick={onClose}
className="rounded-lg border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
>
<Button variant="secondary" onClick={onClose}>
Cancel
</button>
</Button>
{step === 'preview' && (
<button
<Button
onClick={handleImport}
disabled={isImporting || !nameOverride.trim()}
className="bg-gradient-brand flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90 disabled:opacity-40 disabled:cursor-not-allowed"
disabled={!nameOverride.trim()}
loading={isImporting}
>
<FileUp className="h-4 w-4" />
{isImporting ? 'Importing…' : 'Import as Draft'}
</button>
Import as Draft
</Button>
)}
</div>
</div>

24
frontend/src/components/library/ShareTreeModal.tsx
View File

@@ -4,6 +4,7 @@ import type { TreeListItem, TreeShare, TreeVisibility } from '@/types'
import { treesApi } from '@/api/trees'
import { cn } from '@/lib/utils'
import { toast } from '@/lib/toast'
import { Button } from '@/components/ui/Button'
interface ShareTreeModalProps {
tree: TreeListItem
@@ -201,16 +202,13 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
{/* Generate Button */}
{!activeShare && (
<button
<Button
onClick={handleGenerateLink}
disabled={isGenerating}
className={cn(
'w-full rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed'
)}
loading={isGenerating}
className="w-full"
>
{isGenerating ? 'Generating...' : 'Generate Share Link'}
</button>
Generate Share Link
</Button>
)}
{/* Active Share Link */}
@@ -263,15 +261,9 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
{/* Footer */}
<div className="flex justify-end gap-3 border-t border-border px-6 py-4">
<button
onClick={onClose}
className={cn(
'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
'hover:bg-accent hover:text-foreground'
)}
>
<Button variant="secondary" onClick={onClose}>
Close
</button>
</Button>
</div>
</div>
</div>

15
frontend/src/components/procedural/CompletionSummary.tsx
View File

@@ -1,4 +1,5 @@
import { CheckCircle2, Clock, FileText, Download } from 'lucide-react'
import { Button } from '@/components/ui/Button'
import type { ProceduralStep } from '@/types'
interface StepCompletion {
@@ -128,19 +129,13 @@ export function CompletionSummary({
{/* 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-border px-4 py-2.5 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
>
<Button variant="secondary" onClick={onExport} className="flex-1">
<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-gradient-brand px-4 py-2.5 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
>
</Button>
<Button onClick={onClose} className="flex-1">
Done
</button>
</Button>
</div>
</div>
)

14
frontend/src/components/procedural/IntakeFormModal.tsx
View File

@@ -2,6 +2,7 @@ import { useState } from 'react'
import type { IntakeFormField } from '@/types'
import { PasswordInput } from '@/components/common/PasswordInput'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/Button'
interface IntakeFormModalProps {
isOpen: boolean
@@ -240,19 +241,16 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
{/* Footer */}
<div className="flex items-center justify-end gap-2 border-t border-border px-6 py-4">
<button
<Button
type="button"
variant="secondary"
onClick={onCancel}
className="rounded-md border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
>
Cancel
</button>
<button
type="submit"
className="rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
>
</Button>
<Button type="submit">
Start Procedure
</button>
</Button>
</div>
</form>
</div>

38
frontend/src/components/session/ForkTreeModal.tsx
View File

@@ -1,7 +1,8 @@
import { useState } from 'react'
import { Modal } from '@/components/common/Modal'
import { GitFork, Loader2 } from 'lucide-react'
import { GitFork } from 'lucide-react'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/Button'
interface ForkTreeModalProps {
isOpen: boolean
@@ -44,38 +45,21 @@ export function ForkTreeModal({
const footer = (
<div className="flex justify-end gap-3">
<button
<Button
variant="ghost"
onClick={onSkip}
disabled={isSaving}
className={cn(
'rounded-md px-4 py-2 text-sm font-medium transition-colors',
'text-muted-foreground hover:bg-accent hover:text-foreground',
'disabled:cursor-not-allowed disabled:opacity-50'
)}
>
Skip
</button>
<button
</Button>
<Button
onClick={handleFork}
disabled={isSaving || !name.trim()}
className={cn(
'flex items-center gap-2 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium transition-colors',
'hover:opacity-90',
'disabled:cursor-not-allowed disabled:opacity-50'
)}
disabled={!name.trim()}
loading={isSaving}
>
{isSaving ? (
<>
<Loader2 className="h-4 w-4 animate-spin" />
Saving...
</>
) : (
<>
<GitFork className="h-4 w-4" />
Save as Personal Tree
</>
)}
</button>
<GitFork className="h-4 w-4" />
Save as Personal Tree
</Button>
</div>
)

22
frontend/src/components/session/SaveSessionAsTreeModal.tsx
View File

@@ -1,6 +1,7 @@
import { useState } from 'react'
import { X } from 'lucide-react'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/Button'
interface SaveSessionAsTreeModalProps {
isOpen: boolean
@@ -130,27 +131,20 @@ export function SaveSessionAsTreeModal({
{/* Actions */}
<div className="flex justify-end gap-2 pt-2">
<button
<Button
type="button"
variant="secondary"
onClick={onClose}
disabled={isSaving}
className={cn(
'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
'hover:bg-accent hover:text-foreground disabled:opacity-50'
)}
>
Cancel
</button>
<button
</Button>
<Button
type="submit"
disabled={isSaving}
className={cn(
'rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:opacity-90 disabled:opacity-50'
)}
loading={isSaving}
>
{isSaving ? 'Saving...' : 'Save as Tree'}
</button>
Save as Tree
</Button>
</div>
</form>
</div>

22
frontend/src/components/session/SessionOutcomeModal.tsx
View File

@@ -2,6 +2,7 @@ import { useRef } from 'react'
import { Modal } from '@/components/common/Modal'
import { cn } from '@/lib/utils'
import type { SessionOutcome } from '@/types'
import { Button } from '@/components/ui/Button'
interface SessionOutcomeModalProps {
isOpen: boolean
@@ -46,28 +47,21 @@ export function SessionOutcomeModal({
title="Session Outcome"
footer={(
<div className="flex justify-end gap-2">
<button
<Button
type="button"
variant="secondary"
onClick={onClose}
disabled={isSubmitting}
className={cn(
'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
'hover:bg-accent hover:text-foreground disabled:opacity-50'
)}
>
Cancel
</button>
<button
</Button>
<Button
type="button"
onClick={handleSubmit}
disabled={isSubmitting}
className={cn(
'rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium',
'hover:opacity-90 disabled:opacity-50'
)}
loading={isSubmitting}
>
{isSubmitting ? 'Completing...' : 'Complete Session'}
</button>
Complete Session
</Button>
</div>
)}
>

454
frontend/src/components/session/ShareSessionModal.tsx
View File

@@ -1,15 +1,17 @@
import { useState, useEffect, useCallback } from 'react'
import { X, Copy, Check, Globe, Users, Clock, Trash2, Link2 } from 'lucide-react'
import { Copy, Check, Globe, Users, Clock, Trash2, Link2 } from 'lucide-react'
import type { SessionShare, SessionShareVisibility } from '@/types'
import { sessionsApi } from '@/api/sessions'
import { buildSessionShareUrl, filterSharesForSession } from '@/lib/sessionShare'
import { cn } from '@/lib/utils'
import { toast } from '@/lib/toast'
import { Spinner } from '@/components/common/Spinner'
import { Modal } from '@/components/common/Modal'
import { Button } from '@/components/ui/Button'
interface ShareSessionModalProps {
sessionId: string
sessionLabel: string // e.g. ticket number or "Session Details"
sessionLabel: string
isOpen: boolean
onClose: () => void
}
@@ -76,7 +78,6 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
const [isGenerating, setIsGenerating] = useState(false)
const [copiedShareId, setCopiedShareId] = useState<string | null>(null)
// Form state
const [visibility, setVisibility] = useState<SessionShareVisibility>('account')
const [shareName, setShareName] = useState('')
const [expirationPreset, setExpirationPreset] = useState<ExpirationPreset>('never')
@@ -88,7 +89,6 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
try {
const allShares = await sessionsApi.listMyShares()
const sessionShares = filterSharesForSession(allShares, sessionId)
// Sort newest first
sessionShares.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
setShares(sessionShares)
} catch (err) {
@@ -101,7 +101,6 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
useEffect(() => {
if (isOpen) {
loadShares()
// Reset form state
setVisibility('account')
setShareName('')
setExpirationPreset('never')
@@ -123,7 +122,6 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
})
setShares([newShare, ...shares])
toast.success('Share link generated')
// Reset form
setShareName('')
setExpirationPreset('never')
setCustomDatetime('')
@@ -167,8 +165,6 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
}
}
if (!isOpen) return null
const presetButtons: { value: ExpirationPreset; label: string }[] = [
{ value: 'never', label: 'Never' },
{ value: '1day', label: '1 day' },
@@ -178,254 +174,230 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
]
return (
<div className="fixed inset-0 z-50 flex items-center justify-center">
{/* Backdrop */}
<div
className="absolute inset-0 bg-black/80 backdrop-blur-xs"
onClick={onClose}
/>
<Modal
isOpen={isOpen}
onClose={onClose}
title="Share Session"
size="lg"
footer={
<div className="flex justify-end">
<Button variant="secondary" onClick={onClose}>
Close
</Button>
</div>
}
>
{/* Subtitle */}
<p className="-mt-2 mb-4 text-sm text-muted-foreground">{sessionLabel}</p>
{/* Modal */}
<div className="relative w-full max-w-lg bg-card border border-border rounded-xl shadow-lg">
{/* Header */}
<div className="flex items-center justify-between border-b border-border px-6 py-4">
<div className="space-y-6">
{/* Create Share Form */}
<div className="space-y-4">
{/* Visibility */}
<div>
<h2 className="text-lg font-heading font-semibold text-foreground">Share Session</h2>
<p className="text-sm text-muted-foreground">{sessionLabel}</p>
<label className="mb-2 block text-sm font-medium text-foreground">
Visibility
</label>
<div className="space-y-2">
<button
onClick={() => { setVisibility('account'); setVisibilityError(null) }}
className={cn(
'flex w-full items-center gap-3 rounded-md border px-4 py-3 text-left transition-colors',
visibility === 'account'
? 'border-primary/30 bg-primary/10 text-foreground'
: 'border-border bg-transparent text-muted-foreground hover:border-border hover:bg-accent'
)}
>
<Users className="h-4 w-4" />
<div className="flex-1">
<div className="text-sm font-medium">Account Only</div>
<div className="text-xs text-muted-foreground">Visible to your team</div>
</div>
{visibility === 'account' && (
<div className="h-2 w-2 rounded-full bg-primary" />
)}
</button>
<button
onClick={() => { setVisibility('public'); setVisibilityError(null) }}
className={cn(
'flex w-full items-center gap-3 rounded-md border px-4 py-3 text-left transition-colors',
visibility === 'public'
? 'border-primary/30 bg-primary/10 text-foreground'
: 'border-border bg-transparent text-muted-foreground hover:border-border hover:bg-accent'
)}
>
<Globe className="h-4 w-4" />
<div className="flex-1">
<div className="text-sm font-medium">Public</div>
<div className="text-xs text-muted-foreground">Anyone with the link</div>
</div>
{visibility === 'public' && (
<div className="h-2 w-2 rounded-full bg-primary" />
)}
</button>
</div>
{visibilityError && (
<p className="mt-2 text-sm text-red-400">{visibilityError}</p>
)}
</div>
<button
onClick={onClose}
className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
{/* Share Name */}
<div>
<label className="mb-2 block text-sm font-medium text-foreground">
Share Name <span className="text-muted-foreground">(optional)</span>
</label>
<input
type="text"
value={shareName}
onChange={(e) => setShareName(e.target.value.slice(0, 100))}
placeholder="e.g. Training link, Customer escalation"
className={cn(
'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground placeholder-muted-foreground',
'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
)}
maxLength={100}
/>
</div>
{/* Expiration */}
<div>
<label className="mb-2 block text-sm font-medium text-foreground">
Expiration
</label>
<div className="flex flex-wrap gap-2">
{presetButtons.map((preset) => (
<button
key={preset.value}
onClick={() => setExpirationPreset(preset.value)}
className={cn(
'rounded-md border px-3 py-1.5 text-sm transition-colors',
expirationPreset === preset.value
? 'border-primary/30 bg-primary/10 text-foreground'
: 'border-border text-muted-foreground hover:border-border hover:bg-accent'
)}
>
{preset.label}
</button>
))}
</div>
{expirationPreset === 'custom' && (
<input
type="datetime-local"
value={customDatetime}
onChange={(e) => setCustomDatetime(e.target.value)}
className={cn(
'mt-2 w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
'scheme-dark'
)}
/>
)}
</div>
{/* Generate Button */}
<Button
onClick={handleGenerateLink}
disabled={expirationPreset === 'custom' && !customDatetime}
loading={isGenerating}
className="w-full"
>
<X className="h-5 w-5" />
</button>
<Link2 className="h-4 w-4" />
Generate Link
</Button>
</div>
{/* Body */}
<div className="max-h-[60vh] overflow-y-auto px-6 py-4 space-y-6">
{/* Create Share Form */}
<div className="space-y-4">
{/* Visibility */}
<div>
<label className="mb-2 block text-sm font-medium text-foreground">
Visibility
</label>
<div className="space-y-2">
<button
onClick={() => { setVisibility('account'); setVisibilityError(null) }}
className={cn(
'flex w-full items-center gap-3 rounded-md border px-4 py-3 text-left transition-colors',
visibility === 'account'
? 'border-primary/30 bg-primary/10 text-foreground'
: 'border-border bg-transparent text-muted-foreground hover:border-border hover:bg-accent'
)}
>
<Users className="h-4 w-4" />
<div className="flex-1">
<div className="text-sm font-medium">Account Only</div>
<div className="text-xs text-muted-foreground">Visible to your team</div>
</div>
{visibility === 'account' && (
<div className="h-2 w-2 rounded-full bg-primary" />
)}
</button>
<button
onClick={() => { setVisibility('public'); setVisibilityError(null) }}
className={cn(
'flex w-full items-center gap-3 rounded-md border px-4 py-3 text-left transition-colors',
visibility === 'public'
? 'border-primary/30 bg-primary/10 text-foreground'
: 'border-border bg-transparent text-muted-foreground hover:border-border hover:bg-accent'
)}
>
<Globe className="h-4 w-4" />
<div className="flex-1">
<div className="text-sm font-medium">Public</div>
<div className="text-xs text-muted-foreground">Anyone with the link</div>
</div>
{visibility === 'public' && (
<div className="h-2 w-2 rounded-full bg-primary" />
)}
</button>
</div>
{visibilityError && (
<p className="mt-2 text-sm text-red-400">{visibilityError}</p>
)}
</div>
{/* Share Name */}
<div>
<label className="mb-2 block text-sm font-medium text-foreground">
Share Name <span className="text-muted-foreground">(optional)</span>
</label>
<input
type="text"
value={shareName}
onChange={(e) => setShareName(e.target.value.slice(0, 100))}
placeholder="e.g. Training link, Customer escalation"
className={cn(
'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground placeholder-muted-foreground',
'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
)}
maxLength={100}
/>
</div>
{/* Expiration */}
<div>
<label className="mb-2 block text-sm font-medium text-foreground">
Expiration
</label>
<div className="flex flex-wrap gap-2">
{presetButtons.map((preset) => (
<button
key={preset.value}
onClick={() => setExpirationPreset(preset.value)}
className={cn(
'rounded-md border px-3 py-1.5 text-sm transition-colors',
expirationPreset === preset.value
? 'border-primary/30 bg-primary/10 text-foreground'
: 'border-border text-muted-foreground hover:border-border hover:bg-accent'
)}
{/* Existing Shares */}
{shares.length > 0 && (
<div>
<h3 className="mb-3 text-sm font-medium text-foreground">
Active Shares ({shares.length})
</h3>
<div className="space-y-3">
{shares.map((share) => {
const expiration = getExpirationLabel(share.expires_at)
const isCopied = copiedShareId === share.id
return (
<div
key={share.id}
className="bg-card border border-border rounded-xl p-4 space-y-2"
>
{preset.label}
</button>
))}
</div>
{expirationPreset === 'custom' && (
<input
type="datetime-local"
value={customDatetime}
onChange={(e) => setCustomDatetime(e.target.value)}
className={cn(
'mt-2 w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
'scheme-dark'
)}
/>
)}
</div>
{/* Generate Button */}
<button
onClick={handleGenerateLink}
disabled={isGenerating || (expirationPreset === 'custom' && !customDatetime)}
className={cn(
'flex w-full items-center justify-center gap-2 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed'
)}
>
<Link2 className="h-4 w-4" />
{isGenerating ? 'Generating...' : 'Generate Link'}
</button>
</div>
{/* Existing Shares */}
{shares.length > 0 && (
<div>
<h3 className="mb-3 text-sm font-medium text-foreground">
Active Shares ({shares.length})
</h3>
<div className="space-y-3">
{shares.map((share) => {
const expiration = getExpirationLabel(share.expires_at)
const isCopied = copiedShareId === share.id
return (
<div
key={share.id}
className="bg-card border border-border rounded-xl p-4 space-y-2"
>
<div className="flex items-start justify-between gap-2">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<span className={cn(
'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs',
share.visibility === 'public'
? 'bg-accent text-muted-foreground'
: 'bg-accent text-muted-foreground'
)}>
{share.visibility === 'public' ? (
<Globe className="h-3 w-3" />
) : (
<Users className="h-3 w-3" />
)}
{share.visibility === 'public' ? 'Public' : 'Account'}
</span>
<span className="truncate text-sm font-medium text-foreground">
{share.share_name || 'Untitled share'}
</span>
</div>
<div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
<span>{getRelativeTime(share.created_at)}</span>
<span>
{share.view_count > 0
? `${share.view_count} view${share.view_count === 1 ? '' : 's'}`
: 'Not viewed yet'}
</span>
<span className={cn(
'flex items-center gap-1',
expiration.isExpired && 'text-red-400'
)}>
<Clock className="h-3 w-3" />
{expiration.text}
</span>
</div>
</div>
<div className="flex items-center gap-1 shrink-0">
<button
onClick={() => handleCopyUrl(share)}
title="Copy share URL"
className={cn(
'rounded-md border border-border p-1.5 text-sm transition-colors',
isCopied
? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-400'
: 'text-muted-foreground hover:bg-accent hover:text-foreground'
)}
>
{isCopied ? (
<Check className="h-3.5 w-3.5" />
<div className="flex items-start justify-between gap-2">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<span className={cn(
'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs',
share.visibility === 'public'
? 'bg-accent text-muted-foreground'
: 'bg-accent text-muted-foreground'
)}>
{share.visibility === 'public' ? (
<Globe className="h-3 w-3" />
) : (
<Copy className="h-3.5 w-3.5" />
<Users className="h-3 w-3" />
)}
</button>
<button
onClick={() => handleRevoke(share.id)}
title="Revoke share"
className="rounded-md border border-border p-1.5 text-muted-foreground hover:bg-red-500/10 hover:border-red-500/30 hover:text-red-400 transition-colors"
>
<Trash2 className="h-3.5 w-3.5" />
</button>
{share.visibility === 'public' ? 'Public' : 'Account'}
</span>
<span className="truncate text-sm font-medium text-foreground">
{share.share_name || 'Untitled share'}
</span>
</div>
<div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
<span>{getRelativeTime(share.created_at)}</span>
<span>
{share.view_count > 0
? `${share.view_count} view${share.view_count === 1 ? '' : 's'}`
: 'Not viewed yet'}
</span>
<span className={cn(
'flex items-center gap-1',
expiration.isExpired && 'text-red-400'
)}>
<Clock className="h-3 w-3" />
{expiration.text}
</span>
</div>
</div>
<div className="flex items-center gap-1 shrink-0">
<button
onClick={() => handleCopyUrl(share)}
title="Copy share URL"
className={cn(
'rounded-md border border-border p-1.5 text-sm transition-colors',
isCopied
? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-400'
: 'text-muted-foreground hover:bg-accent hover:text-foreground'
)}
>
{isCopied ? (
<Check className="h-3.5 w-3.5" />
) : (
<Copy className="h-3.5 w-3.5" />
)}
</button>
<button
onClick={() => handleRevoke(share.id)}
title="Revoke share"
className="rounded-md border border-border p-1.5 text-muted-foreground hover:bg-red-500/10 hover:border-red-500/30 hover:text-red-400 transition-colors"
>
<Trash2 className="h-3.5 w-3.5" />
</button>
</div>
</div>
)
})}
</div>
</div>
)
})}
</div>
)}
</div>
)}
{/* Loading state */}
{isLoadingShares && shares.length === 0 && (
<div className="flex items-center justify-center py-4">
<Spinner size="sm" className="h-5 w-5 border-t-foreground" />
</div>
)}
</div>
{/* Footer */}
<div className="flex justify-end gap-3 border-t border-border px-6 py-4">
<button
onClick={onClose}
className={cn(
'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
'hover:bg-accent hover:text-foreground'
)}
>
Close
</button>
</div>
{/* Loading state */}
{isLoadingShares && shares.length === 0 && (
<div className="flex items-center justify-center py-4">
<Spinner size="sm" className="h-5 w-5 border-t-foreground" />
</div>
)}
</div>
</div>
</Modal>
)
}

22
frontend/src/components/session/StepRatingModal.tsx
View File

@@ -3,6 +3,7 @@ import { X, ThumbsUp, ThumbsDown } from 'lucide-react'
import { StarRating } from '@/components/common/StarRating'
import { cn } from '@/lib/utils'
import type { Step } from '@/types'
import { Button } from '@/components/ui/Button'
interface StepRatingData {
rating: number
@@ -190,28 +191,21 @@ export function StepRatingModal({
{/* Footer */}
<div className="flex justify-end gap-2 border-t border-border px-6 py-4">
<button
<Button
type="button"
variant="secondary"
onClick={onClose}
disabled={isSaving}
className={cn(
'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
'hover:bg-accent hover:text-foreground disabled:opacity-50'
)}
>
Skip
</button>
<button
</Button>
<Button
type="button"
onClick={handleSubmit}
disabled={isSaving}
className={cn(
'rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:opacity-90 disabled:opacity-50'
)}
loading={isSaving}
>
{isSaving ? 'Submitting...' : 'Submit Ratings'}
</button>
Submit Ratings
</Button>
</div>
</div>
</div>

19
frontend/src/components/session/VariablePromptModal.tsx
View File

@@ -1,5 +1,6 @@
import { useState } from 'react'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/Button'
interface VariablePromptModalProps {
/** The prompt text from [USER_INPUT:prompt] */
@@ -45,26 +46,20 @@ export function VariablePromptModal({ prompt, onSubmit, onCancel }: VariableProm
/>
<div className="mt-4 flex gap-2">
<button
<Button
type="submit"
disabled={!value.trim()}
className={cn(
'flex-1 rounded-lg bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed'
)}
className="flex-1"
>
Continue
</button>
<button
</Button>
<Button
type="button"
variant="secondary"
onClick={onCancel}
className={cn(
'rounded-lg border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
'hover:bg-accent hover:text-foreground'
)}
>
Skip
</button>
</Button>
</div>
</form>
</div>

17
frontend/src/components/step-library/StepDetailModal.tsx
View File

@@ -4,6 +4,7 @@ import { cn } from '@/lib/utils'
import { MarkdownContent } from '@/components/ui/MarkdownContent'
import { stepsApi } from '@/api/steps'
import type { Step, Review } from '@/types/step'
import { Button } from '@/components/ui/Button'
interface StepDetailModalProps {
stepId: string
@@ -318,22 +319,20 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
{/* Footer - Actions */}
<div className="flex gap-2 border-t border-border p-4">
<button
<Button
variant="secondary"
onClick={onClose}
className="flex-1 rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
className="flex-1"
>
Cancel
</button>
<button
</Button>
<Button
onClick={handleInsert}
disabled={!step}
className={cn(
'flex-1 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:opacity-90 disabled:opacity-50'
)}
className="flex-1"
>
Insert Into Session
</button>
</Button>
</div>
</div>
</div>

18
frontend/src/components/step-library/StepForm.tsx
View File

@@ -3,6 +3,7 @@ import { Plus, X, HelpCircle, Zap, CheckCircle } from 'lucide-react'
import { cn } from '@/lib/utils'
import { stepCategoriesApi } from '@/api/stepCategories'
import type { StepCreate, StepCategory, StepCommand } from '@/types/step'
import { Button } from '@/components/ui/Button'
interface StepFormProps {
onSubmit: (data: StepCreate) => void
@@ -369,20 +370,21 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
{/* Actions */}
<div className="flex gap-2 pt-4">
<button
<Button
type="button"
variant="secondary"
onClick={onCancel}
className="flex-1 rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
className="flex-1"
>
Cancel
</button>
<button
</Button>
<Button
type="submit"
disabled={isSubmitting}
className="flex-1 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50"
loading={isSubmitting}
className="flex-1"
>
{isSubmitting ? 'Saving...' : (submitLabel ?? 'Insert Step')}
</button>
{submitLabel ?? 'Insert Step'}
</Button>
</div>
</form>
)

15
frontend/src/components/step-library/StepLibraryBrowser.tsx
View File

@@ -1,5 +1,6 @@
import { useState, useEffect, useMemo } from 'react'
import { Search, ChevronDown, ChevronUp, Loader2 } from 'lucide-react'
import { Button } from '@/components/ui/Button'
import { cn } from '@/lib/utils'
import { stepsApi } from '@/api/steps'
import { stepCategoriesApi } from '@/api/stepCategories'
@@ -253,12 +254,9 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
) : error ? (
<div className="rounded-lg border border-red-400/20 bg-red-400/10 p-4 text-center">
<p className="text-sm text-red-400 mb-3">{error}</p>
<button
onClick={() => setRetryCount(c => c + 1)}
className="rounded-md border border-border px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
>
<Button variant="secondary" size="sm" onClick={() => setRetryCount(c => c + 1)}>
Try again
</button>
</Button>
</div>
) : steps.length === 0 ? (
<div className="rounded-lg border border-border bg-accent/50 p-12 text-center">
@@ -374,12 +372,9 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
{/* Footer - Optional Create Button */}
{showCreateButton && onCreateNew && (
<div className="border-t border-border p-4">
<button
onClick={onCreateNew}
className="w-full rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
>
<Button onClick={onCreateNew} className="w-full">
+ Create New Step
</button>
</Button>
</div>
)}

28
frontend/src/components/tree-editor/AIFixReviewModal.tsx
View File

@@ -2,6 +2,7 @@ import { useState } from 'react'
import { X, Check, SkipForward, Sparkles, ChevronDown, ChevronUp } from 'lucide-react'
import { cn } from '@/lib/utils'
import type { AIFixProposal } from '@/types'
import { Button } from '@/components/ui/Button'
interface AIFixReviewModalProps {
fixes: AIFixProposal[]
@@ -125,20 +126,21 @@ export function AIFixReviewModal({ fixes, onApply, onApplyAll, onClose }: AIFixR
{/* Action buttons */}
<div className="mt-3 flex gap-2">
<button
<Button
size="sm"
onClick={() => handleApply(fix)}
className="flex items-center gap-1 rounded-md bg-gradient-brand px-3 py-1.5 text-xs font-medium text-white shadow-xs shadow-primary/20 hover:opacity-90"
>
<Check className="h-3 w-3" />
Apply
</button>
<button
</Button>
<Button
variant="secondary"
size="sm"
onClick={() => handleSkip(fix)}
className="flex items-center gap-1 rounded-md border border-border px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
>
<SkipForward className="h-3 w-3" />
Skip
</button>
</Button>
</div>
</>
)}
@@ -149,19 +151,13 @@ export function AIFixReviewModal({ fixes, onApply, onApplyAll, onClose }: AIFixR
{/* Footer */}
<div className="flex items-center justify-between border-t border-border px-6 py-4">
<button
onClick={onClose}
className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
>
<Button variant="secondary" onClick={onClose}>
{allHandled ? 'Done' : 'Cancel'}
</button>
</Button>
{!allHandled && (
<button
onClick={onApplyAll}
className="rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
>
<Button onClick={onApplyAll}>
Apply All ({pendingFixes.length})
</button>
</Button>
)}
</div>
</div>

12
frontend/src/components/tree-editor/NodeEditorModal.tsx
View File

@@ -5,6 +5,7 @@ import { NodeFormDecision } from './NodeFormDecision'
import { NodeFormAction } from './NodeFormAction'
import { NodeFormResolution } from './NodeFormResolution'
import type { TreeStructure } from '@/types'
import { Button } from '@/components/ui/Button'
interface NodeEditorModalProps {
node: TreeStructure
@@ -65,20 +66,19 @@ export function NodeEditorModal({ node, onClose, isNewNode = false }: NodeEditor
const footerContent = (
<div className="flex justify-end gap-2">
<button
<Button
type="button"
variant="secondary"
onClick={handleCancel}
className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
>
Cancel
</button>
<button
</Button>
<Button
type="button"
onClick={handleSave}
className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90"
>
Done
</button>
</Button>
</div>
)

76
frontend/src/pages/AccountSettingsPage.tsx
View File

@@ -6,6 +6,7 @@ import type { Account, AccountMember, AccountInvite } from '@/types'
import { TransferOwnershipModal } from '@/components/account/TransferOwnershipModal'
import { LeaveAccountModal } from '@/components/account/LeaveAccountModal'
import { DeleteAccountModal } from '@/components/account/DeleteAccountModal'
import { Button } from '@/components/ui/Button'
import { Spinner } from '@/components/common/Spinner'
import { cn } from '@/lib/utils'
import { usePermissions } from '@/hooks/usePermissions'
@@ -200,29 +201,23 @@ export function AccountSettingsPage() {
}
}}
/>
<button
<Button
onClick={handleSaveName}
disabled={isSavingName}
className={cn(
'rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 p-2',
'hover:opacity-90 disabled:opacity-50'
)}
loading={isSavingName}
size="icon-sm"
>
{isSavingName ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
<Check className="h-4 w-4" />
)}
</button>
<button
<Check className="h-4 w-4" />
</Button>
<Button
variant="secondary"
size="icon-sm"
onClick={() => {
setEditedName(account?.name ?? '')
setIsEditingName(false)
}}
className="rounded-md border border-border p-2 text-muted-foreground hover:bg-accent"
>
<X className="h-4 w-4" />
</button>
</Button>
</div>
) : (
<div className="mt-1 flex items-center gap-2">
@@ -429,23 +424,13 @@ export function AccountSettingsPage() {
<option value="engineer">Engineer</option>
<option value="viewer">Viewer</option>
</select>
<button
<Button
type="submit"
disabled={isInviting || !inviteEmail.trim()}
className={cn(
'rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium',
'hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed'
)}
disabled={!inviteEmail.trim()}
loading={isInviting}
>
{isInviting ? (
<span className="flex items-center gap-2">
<Loader2 className="h-4 w-4 animate-spin" />
Sending...
</span>
) : (
'Send Invite'
)}
</button>
{isInviting ? 'Sending...' : 'Send Invite'}
</Button>
</div>
{inviteError && (
@@ -633,30 +618,27 @@ export function AccountSettingsPage() {
<p className="text-sm font-medium text-foreground">Transfer Ownership</p>
<p className="text-xs text-muted-foreground">Make another member the account owner</p>
</div>
<button
<Button
variant="secondary"
size="sm"
onClick={() => setShowTransferModal(true)}
className={cn(
'rounded-[10px] px-3 py-1.5 text-sm font-medium',
'border border-amber-500/30 text-amber-400 hover:bg-amber-500/10'
)}
className="border-amber-500/30 text-amber-400 hover:bg-amber-500/10"
>
Transfer
</button>
</Button>
</div>
<div className="flex items-center justify-between border-t border-border pt-3">
<div>
<p className="text-sm font-medium text-foreground">Delete Account</p>
<p className="text-xs text-muted-foreground">Permanently delete your account and all data</p>
</div>
<button
<Button
variant="destructive"
size="sm"
onClick={() => setShowDeleteModal(true)}
className={cn(
'rounded-[10px] px-3 py-1.5 text-sm font-medium',
'border border-rose-500/30 text-rose-400 hover:bg-rose-500/10'
)}
>
Delete
</button>
</Button>
</div>
</>
) : (
@@ -665,15 +647,13 @@ export function AccountSettingsPage() {
<p className="text-sm font-medium text-foreground">Leave Account</p>
<p className="text-xs text-muted-foreground">Leave this account and create a personal one</p>
</div>
<button
<Button
variant="destructive"
size="sm"
onClick={() => setShowLeaveModal(true)}
className={cn(
'rounded-[10px] px-3 py-1.5 text-sm font-medium',
'border border-rose-500/30 text-rose-400 hover:bg-rose-500/10'
)}
>
Leave
</button>
</Button>
</div>
)}
</div>

34
frontend/src/pages/MySharesPage.tsx
View File

@@ -1,6 +1,7 @@
import { useState, useEffect, useCallback } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { Globe, Users, Copy, Check, Link2, ExternalLink, Trash2, ArrowLeft } from 'lucide-react'
import { Button } from '@/components/ui/Button'
import { Spinner } from '@/components/common/Spinner'
import { EmptyState } from '@/components/common/EmptyState'
import { ConfirmDialog } from '@/components/common/ConfirmDialog'
@@ -110,12 +111,9 @@ export default function MySharesPage() {
<div className="bg-card border border-red-400/20 rounded-xl p-6">
<div className="text-center">
<p className="text-red-400 text-sm mb-4">{error}</p>
<button
onClick={fetchShares}
className="bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90 rounded-md px-4 py-2 text-sm font-medium transition-colors"
>
<Button onClick={fetchShares}>
Try again
</button>
</Button>
</div>
</div>
</div>
@@ -147,12 +145,9 @@ export default function MySharesPage() {
title="No shared sessions"
description="Share a session from the session detail page to create a link"
action={
<button
onClick={() => navigate('/sessions')}
className="bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90 rounded-md px-4 py-2 text-sm font-medium transition-colors"
>
<Button onClick={() => navigate('/sessions')}>
Go to Sessions
</button>
</Button>
}
/>
</div>
@@ -201,14 +196,10 @@ export default function MySharesPage() {
{/* Actions */}
<div className="flex flex-wrap items-center gap-2">
<button
<Button
size="sm"
onClick={() => handleCopyLink(share)}
className={cn(
'inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors',
isCopied
? 'bg-emerald-400/10 text-emerald-400'
: 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90'
)}
className={isCopied ? 'bg-emerald-400/10 text-emerald-400 shadow-none hover:opacity-100' : ''}
>
{isCopied ? (
<Check className="h-3.5 w-3.5" />
@@ -216,7 +207,7 @@ export default function MySharesPage() {
<Copy className="h-3.5 w-3.5" />
)}
{isCopied ? 'Copied' : 'Copy Link'}
</button>
</Button>
<Link
to={`/sessions/${share.session_id}`}
@@ -226,13 +217,14 @@ export default function MySharesPage() {
View Session
</Link>
<button
<Button
variant="destructive"
size="sm"
onClick={() => setRevokeTarget(share)}
className="inline-flex items-center gap-1.5 text-red-400 hover:text-red-300 hover:bg-red-400/10 rounded-md px-3 py-1.5 text-sm transition-colors"
>
<Trash2 className="h-3.5 w-3.5" />
Revoke
</button>
</Button>
</div>
</div>
)

46
frontend/src/pages/MyTreesPage.tsx
View File

@@ -1,6 +1,7 @@
import { useEffect, useState } from 'react'
import { useNavigate, Link } from 'react-router-dom'
import { Play, Pencil, Share2, Trash2, GitBranch, Clock, TrendingUp, FolderTree, Plus, ListOrdered, ChevronDown, Wrench } from 'lucide-react'
import { Button } from '@/components/ui/Button'
import { treesApi } from '@/api/trees'
import { sessionsApi } from '@/api/sessions'
import type { TreeListItem } from '@/types'
@@ -125,14 +126,13 @@ export function MyTreesPage() {
</div>
{canCreateTrees && (
<div className="relative">
<button
<Button
onClick={() => setShowCreateMenu(!showCreateMenu)}
className="flex items-center gap-2 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90"
>
<Plus className="h-4 w-4" />
Create New
<ChevronDown className="h-3.5 w-3.5" />
</button>
</Button>
{showCreateMenu && (
<>
<div className="fixed inset-0 z-10" onClick={() => setShowCreateMenu(false)} />
@@ -297,17 +297,13 @@ export function MyTreesPage() {
{/* Actions */}
<div className="flex items-center gap-2">
<button
type="button"
<Button
onClick={() => handleStartSession(tree)}
className={cn(
'flex flex-1 items-center justify-center gap-2 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-3 py-2 text-sm font-medium',
'hover:opacity-90'
)}
className="flex-1"
>
<Play className="h-4 w-4" />
Start
</button>
</Button>
{canEditTree({ author_id: tree.author_id, account_id: tree.account_id }) && (
<Link
to={getEditPath(tree)}
@@ -320,42 +316,36 @@ export function MyTreesPage() {
<Pencil className="h-4 w-4" />
</Link>
)}
<button
type="button"
<Button
variant="secondary"
size="icon"
onClick={() => {
setTreeToShare(tree)
setShowShareModal(true)
}}
className={cn(
'rounded-md border border-border p-2 text-muted-foreground',
'hover:bg-accent hover:text-foreground'
)}
title="Share tree"
>
<Share2 className="h-4 w-4" />
</button>
<button
type="button"
</Button>
<Button
variant="secondary"
size="icon"
onClick={() => setForkTarget(tree)}
className="rounded-md border border-border p-2 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
title="Fork flow"
>
<GitBranch className="h-4 w-4" />
</button>
<button
type="button"
</Button>
<Button
variant="destructive"
size="icon"
onClick={() => {
setTreeToDelete(tree)
setShowDeleteConfirm(true)
}}
className={cn(
'rounded-md border border-border p-2 text-muted-foreground',
'hover:bg-red-400/10 hover:text-red-400'
)}
title="Delete tree"
>
<Trash2 className="h-4 w-4" />
</button>
</Button>
</div>
</div>
))}

14
frontend/src/pages/ProceduralEditorPage.tsx
View File

@@ -1,6 +1,7 @@
import { useEffect, useState, useCallback } from 'react'
import { useParams, useNavigate, useSearchParams } from 'react-router-dom'
import { Save, ArrowLeft, ListOrdered, Wrench, Settings, FileText, Calendar, Sparkles, Layers } from 'lucide-react'
import { Button } from '@/components/ui/Button'
import { treesApi } from '@/api/trees'
import { useProceduralEditorStore } from '@/store/proceduralEditorStore'
import { CollapsibleEditorSection } from '@/components/procedural-editor/CollapsibleEditorSection'
@@ -220,21 +221,20 @@ export function ProceduralEditorPage() {
<Sparkles className="h-4 w-4" />
AI Assist
</button>
<button
<Button
variant="secondary"
onClick={() => handleSave('draft')}
disabled={isSaving}
className="flex items-center gap-1.5 rounded-md border border-border px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
>
Save Draft
</button>
<button
</Button>
<Button
onClick={() => handleSave('published')}
disabled={isSaving}
className="flex items-center gap-1.5 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90 disabled:opacity-50"
loading={isSaving}
>
<Save className="h-4 w-4" />
{isSaving ? 'Saving...' : 'Publish'}
</button>
</Button>
</div>
</div>

22
frontend/src/pages/SessionDetailPage.tsx
View File

@@ -1,6 +1,7 @@
import { useEffect, useState } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { Copy, Check, Eye, Save, Share2, CheckCircle2, AlertTriangle, ArrowUpRight, HelpCircle, Flag } from 'lucide-react'
import { Button } from '@/components/ui/Button'
import { sessionsApi } from '@/api/sessions'
import { stepsApi } from '@/api/steps'
import { ExportPreviewModal } from '@/components/session/ExportPreviewModal'
@@ -391,13 +392,10 @@ export function SessionDetailPage() {
</div>
</div>
{/* Primary action: Copy for Ticket */}
<button
onClick={handleCopyForTicket}
className="flex shrink-0 items-center gap-2 rounded-lg bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
>
<Button onClick={handleCopyForTicket} className="shrink-0">
{copiedPsa ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
{copiedPsa ? 'Copied!' : 'Copy for Ticket'}
</button>
</Button>
</div>
</div>
) : !session.completed_at ? (
@@ -410,12 +408,9 @@ export function SessionDetailPage() {
<p className="text-xs text-muted-foreground">Set an outcome to finalize this session and generate documentation.</p>
</div>
</div>
<button
onClick={() => setShowOutcomeModal(true)}
className="shrink-0 rounded-lg bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
>
<Button onClick={() => setShowOutcomeModal(true)} className="shrink-0">
Complete Session
</button>
</Button>
</div>
) : null}
@@ -462,14 +457,15 @@ export function SessionDetailPage() {
>
{copied ? <Check className="h-4 w-4 text-emerald-400" /> : <Copy className="h-4 w-4" />}
</button>
<button
<Button
variant="secondary"
size="sm"
onClick={handlePreview}
disabled={isExporting}
className="flex items-center gap-1.5 rounded-md border border-border bg-card px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
>
<Eye className="h-4 w-4" />
{isExporting ? 'Loading...' : 'Preview'}
</button>
</Button>
{/* Copy for ticket (secondary position when session is complete) */}
{session.completed_at && (
<button

24
frontend/src/pages/StepLibraryPage.tsx
View File

@@ -1,5 +1,6 @@
import { useState } from 'react'
import { Bookmark, Trash2 } from 'lucide-react'
import { Button } from '@/components/ui/Button'
import { useAuthStore } from '@/store/authStore'
import { usePermissions } from '@/hooks/usePermissions'
import { stepsApi } from '@/api/steps'
@@ -99,12 +100,9 @@ export default function StepLibraryPage() {
</div>
</div>
{canCreateSteps && (
<button
onClick={() => setCreateOpen(true)}
className="rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
>
<Button onClick={() => setCreateOpen(true)}>
+ Create Step
</button>
</Button>
)}
</div>
@@ -147,20 +145,22 @@ export default function StepLibraryPage() {
<p className="mb-4 text-sm text-red-400">{deleteError}</p>
)}
<div className="flex gap-2">
<button
<Button
variant="secondary"
onClick={() => { setDeletingStep(null); setDeleteError(null) }}
disabled={isDeleting}
className="flex-1 rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
className="flex-1"
>
Cancel
</button>
<button
</Button>
<Button
variant="destructive"
onClick={handleDeleteConfirm}
disabled={isDeleting}
className="flex-1 rounded-md bg-red-500 px-4 py-2 text-sm font-medium text-white hover:bg-red-600 disabled:opacity-50"
loading={isDeleting}
className="flex-1"
>
{isDeleting ? 'Deleting...' : 'Delete'}
</button>
</Button>
</div>
</div>
</div>

69
frontend/src/pages/TreeEditorPage.tsx
View File

@@ -2,6 +2,7 @@ import { useEffect, useState, useCallback, useRef } from 'react'
import { useParams, useNavigate, useBlocker } from 'react-router-dom'
import { useStore } from 'zustand'
import { Undo2, Redo2, Save, CheckCircle2, Monitor, FileText, Code2, LayoutList, BarChart3, Settings, Download, Sparkles } from 'lucide-react'
import { Button } from '@/components/ui/Button'
import { getMonacoEditor } from '@/components/tree-editor/code-mode'
import { treesApi } from '@/api/trees'
import { treeMarkdownApi } from '@/api/treeMarkdown'
@@ -508,15 +509,9 @@ export function TreeEditorPage() {
<p className="mb-6 max-w-sm text-sm text-muted-foreground">
The tree editor requires a larger screen for the best experience. Please open this page on a desktop or tablet in landscape mode.
</p>
<button
onClick={() => navigate('/trees')}
className={cn(
'rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:opacity-90'
)}
>
<Button onClick={() => navigate('/trees')}>
Back to Library
</button>
</Button>
</div>
)
}
@@ -535,24 +530,12 @@ export function TreeEditorPage() {
You have an unsaved draft from a previous session. Would you like to restore it?
</p>
<div className="flex gap-2">
<button
onClick={handleRestoreDraft}
className={cn(
'flex-1 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:opacity-90'
)}
>
<Button onClick={handleRestoreDraft} className="flex-1">
Restore Draft
</button>
<button
onClick={handleDiscardDraft}
className={cn(
'flex-1 rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
'hover:bg-accent hover:text-foreground'
)}
>
</Button>
<Button variant="secondary" onClick={handleDiscardDraft} className="flex-1">
Start Fresh
</button>
</Button>
</div>
</div>
</div>
@@ -567,24 +550,12 @@ export function TreeEditorPage() {
You have unsaved changes. Are you sure you want to leave?
</p>
<div className="flex gap-2">
<button
onClick={handleBlockerReset}
className={cn(
'flex-1 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:opacity-90'
)}
>
<Button onClick={handleBlockerReset} className="flex-1">
Stay
</button>
<button
onClick={handleBlockerProceed}
className={cn(
'flex-1 rounded-md border border-border px-4 py-2 text-sm font-medium text-red-400',
'hover:bg-accent'
)}
>
</Button>
<Button variant="destructive" onClick={handleBlockerProceed} className="flex-1">
Leave Without Saving
</button>
</Button>
</div>
</div>
</div>
@@ -787,32 +758,26 @@ export function TreeEditorPage() {
</button>
{/* Save Draft */}
<button
<Button
variant="secondary"
onClick={handleSaveDraft}
disabled={isSaving || !isDirty}
title="Save as draft (Ctrl+S when draft or has errors)"
className={cn(
'flex items-center gap-2 rounded-md border border-border bg-card px-3 py-2 text-sm font-medium text-muted-foreground',
'hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed'
)}
>
<Save className="h-4 w-4" />
Save Draft
</button>
</Button>
{/* Publish */}
<button
<Button
onClick={handlePublish}
disabled={isSaving || hasBlockingErrors}
loading={isSaving}
title={hasBlockingErrors ? 'Fix validation errors before publishing (Ctrl+S when no errors)' : 'Publish tree (Ctrl+S when no errors)'}
className={cn(
'flex items-center gap-2 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed'
)}
>
<CheckCircle2 className="h-4 w-4" />
{isSaving ? 'Publishing...' : 'Publish'}
</button>
</Button>
</div>
</div>

23
frontend/src/pages/TreeLibraryPage.tsx
View File

@@ -1,6 +1,7 @@
import { useEffect, useState, useCallback, useMemo } from 'react'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { X, RotateCcw, Play, FileUp } from 'lucide-react'
import { Button } from '@/components/ui/Button'
import { treesApi } from '@/api/trees'
import { categoriesApi } from '@/api/categories'
import { foldersApi } from '@/api/folders'
@@ -283,13 +284,13 @@ export function TreeLibraryPage() {
</div>
{canCreateTrees && (
<div className="flex items-center gap-2">
<button
<Button
variant="secondary"
onClick={() => setShowImportModal(true)}
className="flex items-center gap-2 rounded-lg border border-border bg-[rgba(255,255,255,0.04)] px-4 py-2 text-sm font-medium text-foreground hover:border-[rgba(255,255,255,0.12)] transition-colors"
>
<FileUp className="h-4 w-4" />
Import
</button>
</Button>
<CreateFlowDropdown
aiEnabled={aiEnabled}
@@ -315,15 +316,9 @@ export function TreeLibraryPage() {
'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
)}
/>
<button
onClick={handleSearch}
className={cn(
'rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:opacity-90'
)}
>
<Button onClick={handleSearch}>
Search
</button>
</Button>
</div>
<select
@@ -436,13 +431,13 @@ export function TreeLibraryPage() {
</p>
</div>
<div className="flex items-center gap-2">
<button
<Button
size="sm"
onClick={() => navigate(getSessionResumePath(s.tree_id, s.tree_snapshot?.tree_type), { state: { sessionId: s.id } })}
className="flex items-center gap-1.5 rounded-md bg-gradient-brand px-3 py-1.5 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
>
<Play className="h-3.5 w-3.5" />
Resume
</button>
</Button>
<button
onClick={() => dismissSession(s.id)}
className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground"

32
frontend/src/pages/TreeNavigationPage.tsx
View File

@@ -21,6 +21,7 @@ import { StepFeedback } from '@/components/session/StepFeedback'
import { buildSessionShareUrl, getLatestActiveShareForSession } from '@/lib/sessionShare'
import { CopilotPanel } from '@/components/copilot/CopilotPanel'
import { CopilotToggle } from '@/components/copilot/CopilotToggle'
import { Button } from '@/components/ui/Button'
interface LocationState {
sessionId?: string
@@ -601,15 +602,9 @@ export function TreeNavigationPage() {
/>
</div>
<button
onClick={startSession}
className={cn(
'w-full rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:opacity-90'
)}
>
<Button onClick={startSession} className="w-full">
Start Troubleshooting
</button>
</Button>
</div>
</div>
)
@@ -940,17 +935,14 @@ export function TreeNavigationPage() {
const targetLabel = targetNode?.question || targetNode?.title || 'next step'
return (
<div className="mt-6 border-t border-primary/30 pt-4">
<button
type="button"
<Button
onClick={handleCustomContinueToDescendant}
className={cn(
'flex w-full items-center justify-between rounded-md bg-gradient-brand px-4 py-3 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:opacity-90'
)}
className="w-full justify-between"
size="lg"
>
<span>Continue to: {targetLabel.length > 50 ? `${targetLabel.slice(0, 50)}...` : targetLabel}</span>
<ArrowRight className="h-4 w-4 shrink-0" />
</button>
</Button>
</div>
)
})()}
@@ -1063,15 +1055,9 @@ export function TreeNavigationPage() {
</p>
)}
{currentNode.next_node_id && (
<button
onClick={() => handleContinue()}
className={cn(
'rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:opacity-90'
)}
>
<Button onClick={() => handleContinue()}>
Continue
</button>
</Button>
)}
</>
)}

13
frontend/src/pages/account/TeamCategoriesPage.tsx
View File

@@ -1,5 +1,6 @@
import { useState, useEffect, useCallback } from 'react'
import { Plus, Trash2, Pencil, FolderTree } from 'lucide-react'
import { Button } from '@/components/ui/Button'
import { cn } from '@/lib/utils'
import { toast } from '@/lib/toast'
import { Modal } from '@/components/common/Modal'
@@ -86,10 +87,10 @@ export function TeamCategoriesPage() {
title="Team Categories"
description="Manage tree categories for your team"
action={(
<button onClick={() => setCreateOpen(true)} className={cn('flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium', 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90')}>
<Button onClick={() => setCreateOpen(true)}>
<Plus className="h-4 w-4" />
Create Category
</button>
</Button>
)}
/>
@@ -132,8 +133,8 @@ export function TeamCategoriesPage() {
<Modal isOpen={createOpen} onClose={() => setCreateOpen(false)} title="Create Category" size="sm"
footer={
<div className="flex justify-end gap-3">
<button onClick={() => setCreateOpen(false)} className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground">Cancel</button>
<button onClick={handleCreate} disabled={!form.name || !form.slug} className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50">Create</button>
<Button variant="secondary" onClick={() => setCreateOpen(false)}>Cancel</Button>
<Button onClick={handleCreate} disabled={!form.name || !form.slug}>Create</Button>
</div>
}
>
@@ -157,8 +158,8 @@ export function TeamCategoriesPage() {
<Modal isOpen={!!editCategory} onClose={() => setEditCategory(null)} title="Edit Category" size="sm"
footer={
<div className="flex justify-end gap-3">
<button onClick={() => setEditCategory(null)} className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground">Cancel</button>
<button onClick={handleUpdate} disabled={!form.name || !form.slug} className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50">Save</button>
<Button variant="secondary" onClick={() => setEditCategory(null)}>Cancel</Button>
<Button onClick={handleUpdate} disabled={!form.name || !form.slug}>Save</Button>
</div>
}
>

17
frontend/src/pages/admin/FeatureFlagsPage.tsx
View File

@@ -1,5 +1,6 @@
import { useState, useEffect, useCallback } from 'react'
import { Plus, Trash2, ToggleLeft } from 'lucide-react'
import { Button } from '@/components/ui/Button'
import { DataTable, PageHeader, StatusBadge, ActionMenu, EmptyState } from '@/components/admin'
import type { Column } from '@/components/admin'
import { Modal } from '@/components/common/Modal'
@@ -153,10 +154,10 @@ export function FeatureFlagsPage() {
title="Feature Flags"
description="Manage feature availability per plan and account"
action={
<button onClick={() => setCreateOpen(true)} className={cn('flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium', 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90')}>
<Button onClick={() => setCreateOpen(true)}>
<Plus className="h-4 w-4" />
Create Flag
</button>
</Button>
}
/>
@@ -172,10 +173,10 @@ export function FeatureFlagsPage() {
<div>
<div className="flex items-center justify-between">
<h2 className="text-lg font-semibold text-foreground">Account Overrides</h2>
<button onClick={() => setOverrideOpen(true)} className={cn('flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium', 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90')}>
<Button onClick={() => setOverrideOpen(true)}>
<Plus className="h-4 w-4" />
Add Override
</button>
</Button>
</div>
<div className="mt-3">
<DataTable columns={overrideColumns} data={overrides} keyExtractor={(o) => o.id} isLoading={loading}
@@ -188,8 +189,8 @@ export function FeatureFlagsPage() {
<Modal isOpen={createOpen} onClose={() => setCreateOpen(false)} title="Create Feature Flag" size="sm"
footer={
<div className="flex justify-end gap-3">
<button onClick={() => setCreateOpen(false)} className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground">Cancel</button>
<button onClick={handleCreate} disabled={!createForm.flag_key || !createForm.display_name} className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50">Create</button>
<Button variant="secondary" onClick={() => setCreateOpen(false)}>Cancel</Button>
<Button onClick={handleCreate} disabled={!createForm.flag_key || !createForm.display_name}>Create</Button>
</div>
}
>
@@ -213,8 +214,8 @@ export function FeatureFlagsPage() {
<Modal isOpen={overrideOpen} onClose={() => setOverrideOpen(false)} title="Add Account Override" size="sm"
footer={
<div className="flex justify-end gap-3">
<button onClick={() => setOverrideOpen(false)} className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground">Cancel</button>
<button onClick={handleCreateOverride} disabled={!overrideForm.account_display_code || !overrideForm.flag_id} className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50">Create</button>
<Button variant="secondary" onClick={() => setOverrideOpen(false)}>Cancel</Button>
<Button onClick={handleCreateOverride} disabled={!overrideForm.account_display_code || !overrideForm.flag_id}>Create</Button>
</div>
}
>

13
frontend/src/pages/admin/GlobalCategoriesPage.tsx
View File

@@ -1,5 +1,6 @@
import { useState, useEffect, useCallback } from 'react'
import { Plus, Trash2, Pencil, FolderTree } from 'lucide-react'
import { Button } from '@/components/ui/Button'
import { DataTable, PageHeader, ActionMenu, EmptyState } from '@/components/admin'
import type { Column } from '@/components/admin'
import { Modal } from '@/components/common/Modal'
@@ -95,10 +96,10 @@ export function GlobalCategoriesPage() {
title="Global Categories"
description="Manage tree categories available to all accounts"
action={
<button onClick={() => setCreateOpen(true)} className={cn('flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium', 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90')}>
<Button onClick={() => setCreateOpen(true)}>
<Plus className="h-4 w-4" />
Create Category
</button>
</Button>
}
/>
@@ -118,8 +119,8 @@ export function GlobalCategoriesPage() {
size="sm"
footer={
<div className="flex justify-end gap-3">
<button onClick={() => setCreateOpen(false)} className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground">Cancel</button>
<button onClick={handleCreate} disabled={!form.name || !form.slug} className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50">Create</button>
<Button variant="secondary" onClick={() => setCreateOpen(false)}>Cancel</Button>
<Button onClick={handleCreate} disabled={!form.name || !form.slug}>Create</Button>
</div>
}
>
@@ -147,8 +148,8 @@ export function GlobalCategoriesPage() {
size="sm"
footer={
<div className="flex justify-end gap-3">
<button onClick={() => setEditCategory(null)} className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground">Cancel</button>
<button onClick={handleUpdate} disabled={!form.name || !form.slug} className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50">Save</button>
<Button variant="secondary" onClick={() => setEditCategory(null)}>Cancel</Button>
<Button onClick={handleUpdate} disabled={!form.name || !form.slug}>Save</Button>
</div>
}
>

26
frontend/src/pages/admin/InviteCodesPage.tsx
View File

@@ -1,5 +1,6 @@
import { useState, useEffect, useCallback } from 'react'
import { Plus, Copy, Trash2, Ticket, Mail, MailCheck, RefreshCw } from 'lucide-react'
import { Button } from '@/components/ui/Button'
import { DataTable, PageHeader, StatusBadge, ActionMenu, EmptyState } from '@/components/admin'
import type { Column } from '@/components/admin'
import { Modal } from '@/components/common/Modal'
@@ -215,16 +216,10 @@ export function InviteCodesPage() {
title="Invite Codes"
description="Create and manage registration invite codes with plan assignment"
action={
<button
onClick={() => setCreateOpen(true)}
className={cn(
'flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium',
'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90'
)}
>
<Button onClick={() => setCreateOpen(true)}>
<Plus className="h-4 w-4" />
Create Code
</button>
</Button>
}
/>
@@ -249,19 +244,10 @@ export function InviteCodesPage() {
size="sm"
footer={
<div className="flex justify-end gap-3">
<button
onClick={() => { setCreateOpen(false); resetForm() }}
className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
>
Cancel
</button>
<button
onClick={handleCreate}
disabled={creating}
className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50"
>
<Button variant="secondary" onClick={() => { setCreateOpen(false); resetForm() }}>Cancel</Button>
<Button onClick={handleCreate} loading={creating}>
{creating ? 'Creating...' : 'Create'}
</button>
</Button>
</div>
}
>

16
frontend/src/pages/admin/PlanLimitsPage.tsx
View File

@@ -1,5 +1,6 @@
import { useState, useEffect, useCallback } from 'react'
import { Plus, Trash2, Gauge } from 'lucide-react'
import { Button } from '@/components/ui/Button'
import { DataTable, PageHeader, ActionMenu, EmptyState } from '@/components/admin'
import type { Column } from '@/components/admin'
import { Modal } from '@/components/common/Modal'
@@ -127,13 +128,10 @@ export function PlanLimitsPage() {
<div>
<div className="flex items-center justify-between">
<h2 className="text-lg font-semibold text-foreground">Account Overrides</h2>
<button
onClick={() => setCreateOverride(true)}
className={cn('flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium', 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90')}
>
<Button onClick={() => setCreateOverride(true)}>
<Plus className="h-4 w-4" />
Add Override
</button>
</Button>
</div>
<div className="mt-3">
<DataTable
@@ -154,8 +152,8 @@ export function PlanLimitsPage() {
size="sm"
footer={
<div className="flex justify-end gap-3">
<button onClick={() => setEditPlan(null)} className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground">Cancel</button>
<button onClick={handleSavePlan} className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90">Save</button>
<Button variant="secondary" onClick={() => setEditPlan(null)}>Cancel</Button>
<Button onClick={handleSavePlan}>Save</Button>
</div>
}
>
@@ -185,8 +183,8 @@ export function PlanLimitsPage() {
size="sm"
footer={
<div className="flex justify-end gap-3">
<button onClick={() => setCreateOverride(false)} className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground">Cancel</button>
<button onClick={handleCreateOverride} disabled={!overrideForm.account_display_code} className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50">Create</button>
<Button variant="secondary" onClick={() => setCreateOverride(false)}>Cancel</Button>
<Button onClick={handleCreateOverride} disabled={!overrideForm.account_display_code}>Create</Button>
</div>
}
>

90
frontend/src/pages/admin/UserDetailPage.tsx
View File

@@ -1,6 +1,7 @@
import { useState, useEffect, useCallback } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { ArrowLeft, Shield, Crown, UserCheck, UserX, Clock, Ticket, KeyRound, Copy, Check, Archive, ArchiveRestore, Trash2 } from 'lucide-react'
import { Button } from '@/components/ui/Button'
import { StatusBadge } from '@/components/admin'
import { Modal } from '@/components/common/Modal'
import { Spinner } from '@/components/common/Spinner'
@@ -205,12 +206,9 @@ export function UserDetailPage() {
title="User not found"
description="This user may have been removed or is unavailable."
action={(
<button
onClick={() => navigate('/admin/users')}
className="rounded-md border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
>
<Button variant="secondary" onClick={() => navigate('/admin/users')}>
Back to Users
</button>
</Button>
)}
/>
)
@@ -525,18 +523,8 @@ export function UserDetailPage() {
size="sm"
footer={
<div className="flex justify-end gap-3">
<button
onClick={() => setPlanModalOpen(false)}
className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent"
>
Cancel
</button>
<button
onClick={handleChangePlan}
className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90"
>
Update Plan
</button>
<Button variant="secondary" onClick={() => setPlanModalOpen(false)}>Cancel</Button>
<Button onClick={handleChangePlan}>Update Plan</Button>
</div>
}
>
@@ -563,19 +551,10 @@ export function UserDetailPage() {
size="sm"
footer={
<div className="flex justify-end gap-3">
<button
onClick={() => setResetModalOpen(false)}
className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent"
>
Cancel
</button>
<button
onClick={handleResetPassword}
disabled={resetLoading}
className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50"
>
<Button variant="secondary" onClick={() => setResetModalOpen(false)}>Cancel</Button>
<Button onClick={handleResetPassword} loading={resetLoading}>
{resetLoading ? 'Resetting...' : 'Reset Password'}
</button>
</Button>
</div>
}
>
@@ -624,12 +603,7 @@ export function UserDetailPage() {
size="sm"
footer={
<div className="flex justify-end">
<button
onClick={() => { setResetTempPassword(null); setResetModalOpen(false) }}
className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90"
>
Done
</button>
<Button onClick={() => { setResetTempPassword(null); setResetModalOpen(false) }}>Done</Button>
</div>
}
>
@@ -663,18 +637,10 @@ export function UserDetailPage() {
size="sm"
footer={
<div className="flex justify-end gap-3">
<button
onClick={() => setTrialModalOpen(false)}
className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent"
>
Cancel
</button>
<button
onClick={handleExtendTrial}
className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90"
>
<Button variant="secondary" onClick={() => setTrialModalOpen(false)}>Cancel</Button>
<Button onClick={handleExtendTrial}>
{user.subscription?.status === 'trialing' ? 'Extend' : 'Start Trial'}
</button>
</Button>
</div>
}
>
@@ -700,23 +666,13 @@ export function UserDetailPage() {
size="sm"
footer={
<div className="flex justify-end gap-3">
<button
onClick={() => setSuperAdminModalOpen(false)}
className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent"
>
Cancel
</button>
<button
<Button variant="secondary" onClick={() => setSuperAdminModalOpen(false)}>Cancel</Button>
<Button
onClick={handleToggleSuperAdmin}
className={cn(
'rounded-md px-4 py-2 text-sm font-medium text-white',
user.is_super_admin
? 'bg-yellow-600 hover:bg-yellow-700'
: 'bg-gradient-brand shadow-lg shadow-primary/20 hover:opacity-90'
)}
className={user.is_super_admin ? 'bg-yellow-600 hover:bg-yellow-700 shadow-none' : ''}
>
{user.is_super_admin ? 'Remove Access' : 'Promote'}
</button>
</Button>
</div>
}
>
@@ -741,19 +697,11 @@ export function UserDetailPage() {
size="sm"
footer={
<div className="flex justify-end gap-3">
<button
onClick={() => setHardDeleteModalOpen(false)}
className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent"
>
Cancel
</button>
<Button variant="secondary" onClick={() => setHardDeleteModalOpen(false)}>Cancel</Button>
{hardDeleteBlockers && Object.keys(hardDeleteBlockers).length === 0 && (
<button
onClick={handleHardDelete}
className="rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-foreground hover:bg-red-700"
>
<Button variant="destructive" onClick={handleHardDelete}>
Delete Permanently
</button>
</Button>
)}
</div>
}

81
frontend/src/pages/admin/UsersPage.tsx
View File

@@ -1,6 +1,7 @@
import { useState, useEffect, useCallback } from 'react'
import { useNavigate } from 'react-router-dom'
import { UserCheck, UserX, Shield, ArrowRightLeft, ExternalLink, UserPlus, Copy, Check, Mail } from 'lucide-react'
import { Button } from '@/components/ui/Button'
import { DataTable, Pagination, SearchInput, PageHeader, StatusBadge, ActionMenu } from '@/components/admin'
import type { Column } from '@/components/admin'
import { Modal } from '@/components/common/Modal'
@@ -266,20 +267,14 @@ export function UsersPage() {
<div className="flex items-center justify-between">
<PageHeader title="Users" description="Manage platform users and roles" />
<div className="flex items-center gap-3">
<button
onClick={() => setShowInviteModal(true)}
className="flex items-center gap-2 rounded-lg border border-border px-4 py-2 text-sm font-medium text-foreground hover:bg-accent transition-colors"
>
<Button variant="secondary" onClick={() => setShowInviteModal(true)}>
<Mail className="h-4 w-4" />
Invite User
</button>
<button
onClick={() => setShowCreateModal(true)}
className="flex items-center gap-2 rounded-lg bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 transition-colors"
>
</Button>
<Button onClick={() => setShowCreateModal(true)}>
<UserPlus className="h-4 w-4" />
Create User
</button>
</Button>
</div>
</div>
@@ -324,18 +319,8 @@ export function UsersPage() {
size="sm"
footer={
<div className="flex justify-end gap-3">
<button
onClick={() => setRoleModalUser(null)}
className="rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground/60 hover:bg-accent hover:text-foreground"
>
Cancel
</button>
<button
onClick={handleRoleChange}
className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90"
>
Save
</button>
<Button variant="secondary" onClick={() => setRoleModalUser(null)}>Cancel</Button>
<Button onClick={handleRoleChange}>Save</Button>
</div>
}
>
@@ -365,19 +350,8 @@ export function UsersPage() {
size="sm"
footer={
<div className="flex justify-end gap-3">
<button
onClick={() => setMoveModalUser(null)}
className="rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground/60 hover:bg-accent hover:text-foreground"
>
Cancel
</button>
<button
onClick={handleMoveAccount}
disabled={!displayCode}
className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50"
>
Move
</button>
<Button variant="secondary" onClick={() => setMoveModalUser(null)}>Cancel</Button>
<Button onClick={handleMoveAccount} disabled={!displayCode}>Move</Button>
</div>
}
>
@@ -409,19 +383,10 @@ export function UsersPage() {
size="sm"
footer={
<div className="flex justify-end gap-3">
<button
onClick={() => setShowCreateModal(false)}
className="rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground/60 hover:bg-accent hover:text-foreground"
>
Cancel
</button>
<button
onClick={handleCreateUser}
disabled={createLoading || !createForm.email || !createForm.name}
className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50"
>
<Button variant="secondary" onClick={() => setShowCreateModal(false)}>Cancel</Button>
<Button onClick={handleCreateUser} disabled={!createForm.email || !createForm.name} loading={createLoading}>
{createLoading ? 'Creating...' : 'Create User'}
</button>
</Button>
</div>
}
>
@@ -520,12 +485,7 @@ export function UsersPage() {
size="sm"
footer={
<div className="flex justify-end">
<button
onClick={() => setTempPassword(null)}
className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90"
>
Done
</button>
<Button onClick={() => setTempPassword(null)}>Done</Button>
</div>
}
>
@@ -562,19 +522,10 @@ export function UsersPage() {
size="sm"
footer={
<div className="flex justify-end gap-3">
<button
onClick={() => setShowInviteModal(false)}
className="rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground/60 hover:bg-accent hover:text-foreground"
>
Cancel
</button>
<button
onClick={handleInviteUser}
disabled={inviteLoading || !inviteForm.email || !inviteForm.account_display_code}
className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50"
>
<Button variant="secondary" onClick={() => setShowInviteModal(false)}>Cancel</Button>
<Button onClick={handleInviteUser} disabled={!inviteForm.email || !inviteForm.account_display_code} loading={inviteLoading}>
{inviteLoading ? 'Sending...' : 'Send Invite'}
</button>
</Button>
</div>
}
>