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

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

@@ -1,6 +1,7 @@
import { useState } from 'react' import { useState } from 'react'
import { X } from 'lucide-react'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { Modal } from '@/components/common/Modal'
import { Button } from '@/components/ui/Button'
interface CreateCategoryModalProps { interface CreateCategoryModalProps {
isOpen: boolean isOpen: boolean
@@ -19,8 +20,6 @@ export function CreateCategoryModal({
const [description, setDescription] = useState('') const [description, setDescription] = useState('')
const [error, setError] = useState('') const [error, setError] = useState('')
if (!isOpen) return null
const handleSubmit = async (e: React.FormEvent) => { const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault() e.preventDefault()
setError('') setError('')
@@ -40,7 +39,6 @@ export function CreateCategoryModal({
name: name.trim(), name: name.trim(),
description: description.trim() description: description.trim()
}) })
// Reset form on success
setName('') setName('')
setDescription('') setDescription('')
} catch { } catch {
@@ -58,30 +56,39 @@ export function CreateCategoryModal({
} }
return ( return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-xs"> <Modal
<div className="w-full max-w-md bg-card border border-border rounded-xl p-6 shadow-lg"> isOpen={isOpen}
{/* Header */} onClose={handleClose}
<div className="mb-4 flex items-center justify-between"> title="Create Category"
<h2 className="text-lg font-semibold text-foreground">Create Category</h2> size="sm"
<button footer={
<div className="flex justify-end gap-2">
<Button
type="button"
variant="secondary"
onClick={handleClose} onClick={handleClose}
disabled={isSaving} 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" /> Cancel
</button> </Button>
<Button
type="submit"
form="create-category-form"
disabled={!name.trim()}
loading={isSaving}
>
Create Category
</Button>
</div> </div>
}
{/* Form */} >
<form onSubmit={handleSubmit} className="space-y-4"> <form id="create-category-form" onSubmit={handleSubmit} className="space-y-4">
{/* Error Message */}
{error && ( {error && (
<div className="rounded-md bg-red-400/10 p-3 text-sm text-red-400"> <div className="rounded-md bg-red-400/10 p-3 text-sm text-red-400">
{error} {error}
</div> </div>
)} )}
{/* Name Field */}
<div> <div>
<label htmlFor="name" className="mb-1 block text-sm font-medium text-foreground"> <label htmlFor="name" className="mb-1 block text-sm font-medium text-foreground">
Category Name <span className="text-red-400">*</span> Category Name <span className="text-red-400">*</span>
@@ -107,7 +114,6 @@ export function CreateCategoryModal({
</p> </p>
</div> </div>
{/* Description Field */}
<div> <div>
<label htmlFor="description" className="mb-1 block text-sm font-medium text-foreground"> <label htmlFor="description" className="mb-1 block text-sm font-medium text-foreground">
Description <span className="text-muted-foreground">(optional)</span> Description <span className="text-muted-foreground">(optional)</span>
@@ -127,33 +133,7 @@ export function CreateCategoryModal({
)} )}
/> />
</div> </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> </form>
</div> </Modal>
</div>
) )
} }

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

@@ -1,7 +1,8 @@
import { useState } from 'react' import { useState } from 'react'
import { X } from 'lucide-react'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import type { StepCategoryListItem } from '@/types' import type { StepCategoryListItem } from '@/types'
import { Modal } from '@/components/common/Modal'
import { Button } from '@/components/ui/Button'
interface EditCategoryModalProps { interface EditCategoryModalProps {
isOpen: boolean isOpen: boolean
@@ -33,7 +34,7 @@ export function EditCategoryModal({
setPrevCategoryId(null) setPrevCategoryId(null)
} }
if (!isOpen || !category) return null if (!category) return null
const handleSubmit = async (e: React.FormEvent) => { const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault() e.preventDefault()
@@ -67,30 +68,39 @@ export function EditCategoryModal({
} }
return ( return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-xs"> <Modal
<div className="w-full max-w-md bg-card border border-border rounded-xl p-6 shadow-lg"> isOpen={isOpen}
{/* Header */} onClose={handleClose}
<div className="mb-4 flex items-center justify-between"> title="Edit Category"
<h2 className="text-lg font-semibold text-foreground">Edit Category</h2> size="sm"
<button footer={
<div className="flex justify-end gap-2">
<Button
type="button"
variant="secondary"
onClick={handleClose} onClick={handleClose}
disabled={isSaving} 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" /> Cancel
</button> </Button>
<Button
type="submit"
form="edit-category-form"
disabled={!name.trim()}
loading={isSaving}
>
Save Changes
</Button>
</div> </div>
}
{/* Form */} >
<form onSubmit={handleSubmit} className="space-y-4"> <form id="edit-category-form" onSubmit={handleSubmit} className="space-y-4">
{/* Error Message */}
{error && ( {error && (
<div className="rounded-md bg-red-400/10 p-3 text-sm text-red-400"> <div className="rounded-md bg-red-400/10 p-3 text-sm text-red-400">
{error} {error}
</div> </div>
)} )}
{/* Name Field */}
<div> <div>
<label htmlFor="edit-name" className="mb-1 block text-sm font-medium text-foreground"> <label htmlFor="edit-name" className="mb-1 block text-sm font-medium text-foreground">
Category Name <span className="text-red-400">*</span> Category Name <span className="text-red-400">*</span>
@@ -116,7 +126,6 @@ export function EditCategoryModal({
</p> </p>
</div> </div>
{/* Description Field */}
<div> <div>
<label htmlFor="edit-description" className="mb-1 block text-sm font-medium text-foreground"> <label htmlFor="edit-description" className="mb-1 block text-sm font-medium text-foreground">
Description <span className="text-muted-foreground">(optional)</span> Description <span className="text-muted-foreground">(optional)</span>
@@ -136,33 +145,7 @@ export function EditCategoryModal({
)} )}
/> />
</div> </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> </form>
</div> </Modal>
</div>
) )
} }

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

@@ -1,5 +1,5 @@
import { Component, type ReactNode } from 'react' import { Component, type ReactNode } from 'react'
import { cn } from '@/lib/utils' import { Button } from '@/components/ui/Button'
interface Props { interface Props {
children: ReactNode children: ReactNode
@@ -45,15 +45,9 @@ export class ErrorBoundary extends Component<Props, State> {
{this.state.error.message} {this.state.error.message}
</pre> </pre>
)} )}
<button <Button onClick={() => window.location.reload()}>
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'
)}
>
Refresh Page Refresh Page
</button> </Button>
</div> </div>
</div> </div>
) )

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

@@ -1,6 +1,6 @@
import { useEffect } from 'react' import { useEffect } from 'react'
import { useRouteError, isRouteErrorResponse, useNavigate } from 'react-router-dom' import { useRouteError, isRouteErrorResponse, useNavigate } from 'react-router-dom'
import { cn } from '@/lib/utils' import { Button } from '@/components/ui/Button'
function isChunkLoadError(error: unknown): boolean { function isChunkLoadError(error: unknown): boolean {
if (!(error instanceof Error)) return false if (!(error instanceof Error)) return false
@@ -55,24 +55,12 @@ export function RouteError() {
<p className="mb-4 text-muted-foreground">{errorDetails}</p> <p className="mb-4 text-muted-foreground">{errorDetails}</p>
)} )}
<div className="flex justify-center gap-4"> <div className="flex justify-center gap-4">
<button <Button variant="secondary" onClick={() => navigate(-1)}>
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'
)}
>
Go Back Go Back
</button> </Button>
<button <Button onClick={() => navigate('/trees')}>
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'
)}
>
Go Home Go Home
</button> </Button>
</div> </div>
</div> </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 { Download, X } from 'lucide-react'
import { flowTransferApi } from '@/api/flowTransfer' import { flowTransferApi } from '@/api/flowTransfer'
import { toast } from '@/lib/toast' import { toast } from '@/lib/toast'
import { Button } from '@/components/ui/Button'
interface ExportFlowModalProps { interface ExportFlowModalProps {
treeId: string treeId: string
@@ -79,20 +80,16 @@ export function ExportFlowModal({ treeId, treeName, onClose }: ExportFlowModalPr
{/* Footer */} {/* Footer */}
<div className="flex justify-end gap-2 border-t border-border px-5 py-3"> <div className="flex justify-end gap-2 border-t border-border px-5 py-3">
<button <Button variant="secondary" onClick={onClose}>
onClick={onClose}
className="rounded-lg border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
>
Cancel Cancel
</button> </Button>
<button <Button
onClick={handleExport} onClick={handleExport}
disabled={isExporting} loading={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"
> >
<Download className="h-4 w-4" /> <Download className="h-4 w-4" />
{isExporting ? 'Exporting…' : 'Download .rfflow'} Download .rfflow
</button> </Button>
</div> </div>
</div> </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 type { FolderListItem, FolderCreate, FolderUpdate } from '@/types'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { toast } from '@/lib/toast' import { toast } from '@/lib/toast'
import { Button } from '@/components/ui/Button'
// Predefined color options // Predefined color options
const FOLDER_COLORS = [ const FOLDER_COLORS = [
@@ -259,24 +260,19 @@ export function FolderEditModal({
{/* Actions */} {/* Actions */}
<div className="flex justify-end gap-3"> <div className="flex justify-end gap-3">
<button <Button
type="button" type="button"
variant="secondary"
onClick={onClose} 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 Cancel
</button> </Button>
<button <Button
type="submit" type="submit"
disabled={isSubmitting} loading={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'
)}
> >
{isSubmitting ? 'Saving...' : isEditMode ? 'Save Changes' : 'Create Folder'} {isEditMode ? 'Save Changes' : 'Create Folder'}
</button> </Button>
</div> </div>
</form> </form>
</div> </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 { toast } from '@/lib/toast'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { useNavigate } from 'react-router-dom' import { useNavigate } from 'react-router-dom'
import { Button } from '@/components/ui/Button'
interface ForkModalProps { interface ForkModalProps {
treeId: string treeId: string
@@ -116,20 +117,20 @@ export function ForkModal({ treeId, treeName, onClose }: ForkModalProps) {
{/* Footer */} {/* Footer */}
<div className="flex justify-end gap-2 pt-1"> <div className="flex justify-end gap-2 pt-1">
<button <Button
type="button" type="button"
variant="secondary"
onClick={onClose} onClick={onClose}
className="rounded-lg border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
> >
Cancel Cancel
</button> </Button>
<button <Button
type="submit" type="submit"
disabled={isSubmitting || !name.trim()} disabled={!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" loading={isSubmitting}
> >
{isSubmitting ? 'Forking…' : 'Fork Flow'} Fork Flow
</button> </Button>
</div> </div>
</form> </form>
</div> </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 { cn } from '@/lib/utils'
import { useNavigate } from 'react-router-dom' import { useNavigate } from 'react-router-dom'
import { getTreeEditorPath } from '@/lib/routing' import { getTreeEditorPath } from '@/lib/routing'
import { Button } from '@/components/ui/Button'
interface ImportFlowModalProps { interface ImportFlowModalProps {
onClose: () => void onClose: () => void
@@ -227,28 +228,26 @@ export function ImportFlowModal({ onClose }: ImportFlowModalProps) {
{/* Footer */} {/* Footer */}
<div className="flex justify-end gap-2 border-t border-border px-5 py-3"> <div className="flex justify-end gap-2 border-t border-border px-5 py-3">
{step === 'preview' && ( {step === 'preview' && (
<button <Button
variant="secondary"
onClick={() => { setStep('pick'); setParsed(null); setParseError(null) }} 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 Back
</button> </Button>
)} )}
<button <Button variant="secondary" onClick={onClose}>
onClick={onClose}
className="rounded-lg border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
>
Cancel Cancel
</button> </Button>
{step === 'preview' && ( {step === 'preview' && (
<button <Button
onClick={handleImport} onClick={handleImport}
disabled={isImporting || !nameOverride.trim()} disabled={!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" loading={isImporting}
> >
<FileUp className="h-4 w-4" /> <FileUp className="h-4 w-4" />
{isImporting ? 'Importing…' : 'Import as Draft'} Import as Draft
</button> </Button>
)} )}
</div> </div>
</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 { treesApi } from '@/api/trees'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { toast } from '@/lib/toast' import { toast } from '@/lib/toast'
import { Button } from '@/components/ui/Button'
interface ShareTreeModalProps { interface ShareTreeModalProps {
tree: TreeListItem tree: TreeListItem
@@ -201,16 +202,13 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
{/* Generate Button */} {/* Generate Button */}
{!activeShare && ( {!activeShare && (
<button <Button
onClick={handleGenerateLink} onClick={handleGenerateLink}
disabled={isGenerating} loading={isGenerating}
className={cn( className="w-full"
'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'
)}
> >
{isGenerating ? 'Generating...' : 'Generate Share Link'} Generate Share Link
</button> </Button>
)} )}
{/* Active Share Link */} {/* Active Share Link */}
@@ -263,15 +261,9 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
{/* Footer */} {/* Footer */}
<div className="flex justify-end gap-3 border-t border-border px-6 py-4"> <div className="flex justify-end gap-3 border-t border-border px-6 py-4">
<button <Button variant="secondary" onClick={onClose}>
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 Close
</button> </Button>
</div> </div>
</div> </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 { CheckCircle2, Clock, FileText, Download } from 'lucide-react'
import { Button } from '@/components/ui/Button'
import type { ProceduralStep } from '@/types' import type { ProceduralStep } from '@/types'
interface StepCompletion { interface StepCompletion {
@@ -128,19 +129,13 @@ export function CompletionSummary({
{/* Actions */} {/* Actions */}
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<button <Button variant="secondary" onClick={onExport} className="flex-1">
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"
>
<Download className="h-4 w-4" /> <Download className="h-4 w-4" />
Export Report Export Report
</button> </Button>
<button <Button onClick={onClose} className="flex-1">
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"
>
Done Done
</button> </Button>
</div> </div>
</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 type { IntakeFormField } from '@/types'
import { PasswordInput } from '@/components/common/PasswordInput' import { PasswordInput } from '@/components/common/PasswordInput'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/Button'
interface IntakeFormModalProps { interface IntakeFormModalProps {
isOpen: boolean isOpen: boolean
@@ -240,19 +241,16 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
{/* Footer */} {/* Footer */}
<div className="flex items-center justify-end gap-2 border-t border-border px-6 py-4"> <div className="flex items-center justify-end gap-2 border-t border-border px-6 py-4">
<button <Button
type="button" type="button"
variant="secondary"
onClick={onCancel} onClick={onCancel}
className="rounded-md border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
> >
Cancel Cancel
</button> </Button>
<button <Button type="submit">
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"
>
Start Procedure Start Procedure
</button> </Button>
</div> </div>
</form> </form>
</div> </div>

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

@@ -1,7 +1,8 @@
import { useState } from 'react' import { useState } from 'react'
import { Modal } from '@/components/common/Modal' import { Modal } from '@/components/common/Modal'
import { GitFork, Loader2 } from 'lucide-react' import { GitFork } from 'lucide-react'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/Button'
interface ForkTreeModalProps { interface ForkTreeModalProps {
isOpen: boolean isOpen: boolean
@@ -44,38 +45,21 @@ export function ForkTreeModal({
const footer = ( const footer = (
<div className="flex justify-end gap-3"> <div className="flex justify-end gap-3">
<button <Button
variant="ghost"
onClick={onSkip} onClick={onSkip}
disabled={isSaving} 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 Skip
</button> </Button>
<button <Button
onClick={handleFork} onClick={handleFork}
disabled={isSaving || !name.trim()} disabled={!name.trim()}
className={cn( loading={isSaving}
'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'
)}
> >
{isSaving ? (
<>
<Loader2 className="h-4 w-4 animate-spin" />
Saving...
</>
) : (
<>
<GitFork className="h-4 w-4" /> <GitFork className="h-4 w-4" />
Save as Personal Tree Save as Personal Tree
</> </Button>
)}
</button>
</div> </div>
) )

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

@@ -1,6 +1,7 @@
import { useState } from 'react' import { useState } from 'react'
import { X } from 'lucide-react' import { X } from 'lucide-react'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/Button'
interface SaveSessionAsTreeModalProps { interface SaveSessionAsTreeModalProps {
isOpen: boolean isOpen: boolean
@@ -130,27 +131,20 @@ export function SaveSessionAsTreeModal({
{/* Actions */} {/* Actions */}
<div className="flex justify-end gap-2 pt-2"> <div className="flex justify-end gap-2 pt-2">
<button <Button
type="button" type="button"
variant="secondary"
onClick={onClose} onClick={onClose}
disabled={isSaving} 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 Cancel
</button> </Button>
<button <Button
type="submit" type="submit"
disabled={isSaving} loading={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'
)}
> >
{isSaving ? 'Saving...' : 'Save as Tree'} Save as Tree
</button> </Button>
</div> </div>
</form> </form>
</div> </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 { Modal } from '@/components/common/Modal'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import type { SessionOutcome } from '@/types' import type { SessionOutcome } from '@/types'
import { Button } from '@/components/ui/Button'
interface SessionOutcomeModalProps { interface SessionOutcomeModalProps {
isOpen: boolean isOpen: boolean
@@ -46,28 +47,21 @@ export function SessionOutcomeModal({
title="Session Outcome" title="Session Outcome"
footer={( footer={(
<div className="flex justify-end gap-2"> <div className="flex justify-end gap-2">
<button <Button
type="button" type="button"
variant="secondary"
onClick={onClose} onClick={onClose}
disabled={isSubmitting} 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 Cancel
</button> </Button>
<button <Button
type="button" type="button"
onClick={handleSubmit} onClick={handleSubmit}
disabled={isSubmitting} loading={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'
)}
> >
{isSubmitting ? 'Completing...' : 'Complete Session'} Complete Session
</button> </Button>
</div> </div>
)} )}
> >

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

@@ -1,15 +1,17 @@
import { useState, useEffect, useCallback } from 'react' 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 type { SessionShare, SessionShareVisibility } from '@/types'
import { sessionsApi } from '@/api/sessions' import { sessionsApi } from '@/api/sessions'
import { buildSessionShareUrl, filterSharesForSession } from '@/lib/sessionShare' import { buildSessionShareUrl, filterSharesForSession } from '@/lib/sessionShare'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { toast } from '@/lib/toast' import { toast } from '@/lib/toast'
import { Spinner } from '@/components/common/Spinner' import { Spinner } from '@/components/common/Spinner'
import { Modal } from '@/components/common/Modal'
import { Button } from '@/components/ui/Button'
interface ShareSessionModalProps { interface ShareSessionModalProps {
sessionId: string sessionId: string
sessionLabel: string // e.g. ticket number or "Session Details" sessionLabel: string
isOpen: boolean isOpen: boolean
onClose: () => void onClose: () => void
} }
@@ -76,7 +78,6 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
const [isGenerating, setIsGenerating] = useState(false) const [isGenerating, setIsGenerating] = useState(false)
const [copiedShareId, setCopiedShareId] = useState<string | null>(null) const [copiedShareId, setCopiedShareId] = useState<string | null>(null)
// Form state
const [visibility, setVisibility] = useState<SessionShareVisibility>('account') const [visibility, setVisibility] = useState<SessionShareVisibility>('account')
const [shareName, setShareName] = useState('') const [shareName, setShareName] = useState('')
const [expirationPreset, setExpirationPreset] = useState<ExpirationPreset>('never') const [expirationPreset, setExpirationPreset] = useState<ExpirationPreset>('never')
@@ -88,7 +89,6 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
try { try {
const allShares = await sessionsApi.listMyShares() const allShares = await sessionsApi.listMyShares()
const sessionShares = filterSharesForSession(allShares, sessionId) const sessionShares = filterSharesForSession(allShares, sessionId)
// Sort newest first
sessionShares.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()) sessionShares.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
setShares(sessionShares) setShares(sessionShares)
} catch (err) { } catch (err) {
@@ -101,7 +101,6 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
useEffect(() => { useEffect(() => {
if (isOpen) { if (isOpen) {
loadShares() loadShares()
// Reset form state
setVisibility('account') setVisibility('account')
setShareName('') setShareName('')
setExpirationPreset('never') setExpirationPreset('never')
@@ -123,7 +122,6 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
}) })
setShares([newShare, ...shares]) setShares([newShare, ...shares])
toast.success('Share link generated') toast.success('Share link generated')
// Reset form
setShareName('') setShareName('')
setExpirationPreset('never') setExpirationPreset('never')
setCustomDatetime('') setCustomDatetime('')
@@ -167,8 +165,6 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
} }
} }
if (!isOpen) return null
const presetButtons: { value: ExpirationPreset; label: string }[] = [ const presetButtons: { value: ExpirationPreset; label: string }[] = [
{ value: 'never', label: 'Never' }, { value: 'never', label: 'Never' },
{ value: '1day', label: '1 day' }, { value: '1day', label: '1 day' },
@@ -178,31 +174,23 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
] ]
return ( return (
<div className="fixed inset-0 z-50 flex items-center justify-center"> <Modal
{/* Backdrop */} isOpen={isOpen}
<div onClose={onClose}
className="absolute inset-0 bg-black/80 backdrop-blur-xs" title="Share Session"
onClick={onClose} size="lg"
/> footer={
<div className="flex justify-end">
{/* Modal */} <Button variant="secondary" onClick={onClose}>
<div className="relative w-full max-w-lg bg-card border border-border rounded-xl shadow-lg"> Close
{/* Header */} </Button>
<div className="flex items-center justify-between border-b border-border px-6 py-4">
<div>
<h2 className="text-lg font-heading font-semibold text-foreground">Share Session</h2>
<p className="text-sm text-muted-foreground">{sessionLabel}</p>
</div> </div>
<button }
onClick={onClose}
className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
> >
<X className="h-5 w-5" /> {/* Subtitle */}
</button> <p className="-mt-2 mb-4 text-sm text-muted-foreground">{sessionLabel}</p>
</div>
{/* Body */} <div className="space-y-6">
<div className="max-h-[60vh] overflow-y-auto px-6 py-4 space-y-6">
{/* Create Share Form */} {/* Create Share Form */}
<div className="space-y-4"> <div className="space-y-4">
{/* Visibility */} {/* Visibility */}
@@ -307,17 +295,15 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
</div> </div>
{/* Generate Button */} {/* Generate Button */}
<button <Button
onClick={handleGenerateLink} onClick={handleGenerateLink}
disabled={isGenerating || (expirationPreset === 'custom' && !customDatetime)} disabled={expirationPreset === 'custom' && !customDatetime}
className={cn( loading={isGenerating}
'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', className="w-full"
'hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed'
)}
> >
<Link2 className="h-4 w-4" /> <Link2 className="h-4 w-4" />
{isGenerating ? 'Generating...' : 'Generate Link'} Generate Link
</button> </Button>
</div> </div>
{/* Existing Shares */} {/* Existing Shares */}
@@ -411,21 +397,7 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
</div> </div>
)} )}
</div> </div>
</Modal>
{/* 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>
</div>
</div>
) )
} }

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 { StarRating } from '@/components/common/StarRating'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import type { Step } from '@/types' import type { Step } from '@/types'
import { Button } from '@/components/ui/Button'
interface StepRatingData { interface StepRatingData {
rating: number rating: number
@@ -190,28 +191,21 @@ export function StepRatingModal({
{/* Footer */} {/* Footer */}
<div className="flex justify-end gap-2 border-t border-border px-6 py-4"> <div className="flex justify-end gap-2 border-t border-border px-6 py-4">
<button <Button
type="button" type="button"
variant="secondary"
onClick={onClose} onClick={onClose}
disabled={isSaving} 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 Skip
</button> </Button>
<button <Button
type="button" type="button"
onClick={handleSubmit} onClick={handleSubmit}
disabled={isSaving} loading={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'
)}
> >
{isSaving ? 'Submitting...' : 'Submit Ratings'} Submit Ratings
</button> </Button>
</div> </div>
</div> </div>
</div> </div>

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

@@ -1,5 +1,6 @@
import { useState } from 'react' import { useState } from 'react'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/Button'
interface VariablePromptModalProps { interface VariablePromptModalProps {
/** The prompt text from [USER_INPUT:prompt] */ /** 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"> <div className="mt-4 flex gap-2">
<button <Button
type="submit" type="submit"
disabled={!value.trim()} disabled={!value.trim()}
className={cn( className="flex-1"
'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'
)}
> >
Continue Continue
</button> </Button>
<button <Button
type="button" type="button"
variant="secondary"
onClick={onCancel} 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 Skip
</button> </Button>
</div> </div>
</form> </form>
</div> </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 { MarkdownContent } from '@/components/ui/MarkdownContent'
import { stepsApi } from '@/api/steps' import { stepsApi } from '@/api/steps'
import type { Step, Review } from '@/types/step' import type { Step, Review } from '@/types/step'
import { Button } from '@/components/ui/Button'
interface StepDetailModalProps { interface StepDetailModalProps {
stepId: string stepId: string
@@ -318,22 +319,20 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
{/* Footer - Actions */} {/* Footer - Actions */}
<div className="flex gap-2 border-t border-border p-4"> <div className="flex gap-2 border-t border-border p-4">
<button <Button
variant="secondary"
onClick={onClose} 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 Cancel
</button> </Button>
<button <Button
onClick={handleInsert} onClick={handleInsert}
disabled={!step} disabled={!step}
className={cn( className="flex-1"
'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'
)}
> >
Insert Into Session Insert Into Session
</button> </Button>
</div> </div>
</div> </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 { cn } from '@/lib/utils'
import { stepCategoriesApi } from '@/api/stepCategories' import { stepCategoriesApi } from '@/api/stepCategories'
import type { StepCreate, StepCategory, StepCommand } from '@/types/step' import type { StepCreate, StepCategory, StepCommand } from '@/types/step'
import { Button } from '@/components/ui/Button'
interface StepFormProps { interface StepFormProps {
onSubmit: (data: StepCreate) => void onSubmit: (data: StepCreate) => void
@@ -369,20 +370,21 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
{/* Actions */} {/* Actions */}
<div className="flex gap-2 pt-4"> <div className="flex gap-2 pt-4">
<button <Button
type="button" type="button"
variant="secondary"
onClick={onCancel} 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 Cancel
</button> </Button>
<button <Button
type="submit" type="submit"
disabled={isSubmitting} loading={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" className="flex-1"
> >
{isSubmitting ? 'Saving...' : (submitLabel ?? 'Insert Step')} {submitLabel ?? 'Insert Step'}
</button> </Button>
</div> </div>
</form> </form>
) )

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

@@ -1,5 +1,6 @@
import { useState, useEffect, useMemo } from 'react' import { useState, useEffect, useMemo } from 'react'
import { Search, ChevronDown, ChevronUp, Loader2 } from 'lucide-react' import { Search, ChevronDown, ChevronUp, Loader2 } from 'lucide-react'
import { Button } from '@/components/ui/Button'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { stepsApi } from '@/api/steps' import { stepsApi } from '@/api/steps'
import { stepCategoriesApi } from '@/api/stepCategories' import { stepCategoriesApi } from '@/api/stepCategories'
@@ -253,12 +254,9 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
) : error ? ( ) : error ? (
<div className="rounded-lg border border-red-400/20 bg-red-400/10 p-4 text-center"> <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> <p className="text-sm text-red-400 mb-3">{error}</p>
<button <Button variant="secondary" size="sm" onClick={() => setRetryCount(c => c + 1)}>
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"
>
Try again Try again
</button> </Button>
</div> </div>
) : steps.length === 0 ? ( ) : steps.length === 0 ? (
<div className="rounded-lg border border-border bg-accent/50 p-12 text-center"> <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 */} {/* Footer - Optional Create Button */}
{showCreateButton && onCreateNew && ( {showCreateButton && onCreateNew && (
<div className="border-t border-border p-4"> <div className="border-t border-border p-4">
<button <Button onClick={onCreateNew} className="w-full">
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"
>
+ Create New Step + Create New Step
</button> </Button>
</div> </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 { X, Check, SkipForward, Sparkles, ChevronDown, ChevronUp } from 'lucide-react'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import type { AIFixProposal } from '@/types' import type { AIFixProposal } from '@/types'
import { Button } from '@/components/ui/Button'
interface AIFixReviewModalProps { interface AIFixReviewModalProps {
fixes: AIFixProposal[] fixes: AIFixProposal[]
@@ -125,20 +126,21 @@ export function AIFixReviewModal({ fixes, onApply, onApplyAll, onClose }: AIFixR
{/* Action buttons */} {/* Action buttons */}
<div className="mt-3 flex gap-2"> <div className="mt-3 flex gap-2">
<button <Button
size="sm"
onClick={() => handleApply(fix)} 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" /> <Check className="h-3 w-3" />
Apply Apply
</button> </Button>
<button <Button
variant="secondary"
size="sm"
onClick={() => handleSkip(fix)} 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" /> <SkipForward className="h-3 w-3" />
Skip Skip
</button> </Button>
</div> </div>
</> </>
)} )}
@@ -149,19 +151,13 @@ export function AIFixReviewModal({ fixes, onApply, onApplyAll, onClose }: AIFixR
{/* Footer */} {/* Footer */}
<div className="flex items-center justify-between border-t border-border px-6 py-4"> <div className="flex items-center justify-between border-t border-border px-6 py-4">
<button <Button variant="secondary" onClick={onClose}>
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"
>
{allHandled ? 'Done' : 'Cancel'} {allHandled ? 'Done' : 'Cancel'}
</button> </Button>
{!allHandled && ( {!allHandled && (
<button <Button onClick={onApplyAll}>
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"
>
Apply All ({pendingFixes.length}) Apply All ({pendingFixes.length})
</button> </Button>
)} )}
</div> </div>
</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 { NodeFormAction } from './NodeFormAction'
import { NodeFormResolution } from './NodeFormResolution' import { NodeFormResolution } from './NodeFormResolution'
import type { TreeStructure } from '@/types' import type { TreeStructure } from '@/types'
import { Button } from '@/components/ui/Button'
interface NodeEditorModalProps { interface NodeEditorModalProps {
node: TreeStructure node: TreeStructure
@@ -65,20 +66,19 @@ export function NodeEditorModal({ node, onClose, isNewNode = false }: NodeEditor
const footerContent = ( const footerContent = (
<div className="flex justify-end gap-2"> <div className="flex justify-end gap-2">
<button <Button
type="button" type="button"
variant="secondary"
onClick={handleCancel} 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 Cancel
</button> </Button>
<button <Button
type="button" type="button"
onClick={handleSave} 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 Done
</button> </Button>
</div> </div>
) )

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

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

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

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

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

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

@@ -1,6 +1,7 @@
import { useEffect, useState, useCallback } from 'react' import { useEffect, useState, useCallback } from 'react'
import { useParams, useNavigate, useSearchParams } from 'react-router-dom' import { useParams, useNavigate, useSearchParams } from 'react-router-dom'
import { Save, ArrowLeft, ListOrdered, Wrench, Settings, FileText, Calendar, Sparkles, Layers } from 'lucide-react' 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 { treesApi } from '@/api/trees'
import { useProceduralEditorStore } from '@/store/proceduralEditorStore' import { useProceduralEditorStore } from '@/store/proceduralEditorStore'
import { CollapsibleEditorSection } from '@/components/procedural-editor/CollapsibleEditorSection' import { CollapsibleEditorSection } from '@/components/procedural-editor/CollapsibleEditorSection'
@@ -220,21 +221,20 @@ export function ProceduralEditorPage() {
<Sparkles className="h-4 w-4" /> <Sparkles className="h-4 w-4" />
AI Assist AI Assist
</button> </button>
<button <Button
variant="secondary"
onClick={() => handleSave('draft')} onClick={() => handleSave('draft')}
disabled={isSaving} 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 Save Draft
</button> </Button>
<button <Button
onClick={() => handleSave('published')} onClick={() => handleSave('published')}
disabled={isSaving} loading={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"
> >
<Save className="h-4 w-4" /> <Save className="h-4 w-4" />
{isSaving ? 'Saving...' : 'Publish'} {isSaving ? 'Saving...' : 'Publish'}
</button> </Button>
</div> </div>
</div> </div>

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

@@ -1,6 +1,7 @@
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { useParams, useNavigate } from 'react-router-dom' import { useParams, useNavigate } from 'react-router-dom'
import { Copy, Check, Eye, Save, Share2, CheckCircle2, AlertTriangle, ArrowUpRight, HelpCircle, Flag } from 'lucide-react' 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 { sessionsApi } from '@/api/sessions'
import { stepsApi } from '@/api/steps' import { stepsApi } from '@/api/steps'
import { ExportPreviewModal } from '@/components/session/ExportPreviewModal' import { ExportPreviewModal } from '@/components/session/ExportPreviewModal'
@@ -391,13 +392,10 @@ export function SessionDetailPage() {
</div> </div>
</div> </div>
{/* Primary action: Copy for Ticket */} {/* Primary action: Copy for Ticket */}
<button <Button onClick={handleCopyForTicket} className="shrink-0">
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"
>
{copiedPsa ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />} {copiedPsa ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
{copiedPsa ? 'Copied!' : 'Copy for Ticket'} {copiedPsa ? 'Copied!' : 'Copy for Ticket'}
</button> </Button>
</div> </div>
</div> </div>
) : !session.completed_at ? ( ) : !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> <p className="text-xs text-muted-foreground">Set an outcome to finalize this session and generate documentation.</p>
</div> </div>
</div> </div>
<button <Button onClick={() => setShowOutcomeModal(true)} className="shrink-0">
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"
>
Complete Session Complete Session
</button> </Button>
</div> </div>
) : null} ) : null}
@@ -462,14 +457,15 @@ export function SessionDetailPage() {
> >
{copied ? <Check className="h-4 w-4 text-emerald-400" /> : <Copy className="h-4 w-4" />} {copied ? <Check className="h-4 w-4 text-emerald-400" /> : <Copy className="h-4 w-4" />}
</button> </button>
<button <Button
variant="secondary"
size="sm"
onClick={handlePreview} onClick={handlePreview}
disabled={isExporting} 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" /> <Eye className="h-4 w-4" />
{isExporting ? 'Loading...' : 'Preview'} {isExporting ? 'Loading...' : 'Preview'}
</button> </Button>
{/* Copy for ticket (secondary position when session is complete) */} {/* Copy for ticket (secondary position when session is complete) */}
{session.completed_at && ( {session.completed_at && (
<button <button

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

@@ -1,5 +1,6 @@
import { useState } from 'react' import { useState } from 'react'
import { Bookmark, Trash2 } from 'lucide-react' import { Bookmark, Trash2 } from 'lucide-react'
import { Button } from '@/components/ui/Button'
import { useAuthStore } from '@/store/authStore' import { useAuthStore } from '@/store/authStore'
import { usePermissions } from '@/hooks/usePermissions' import { usePermissions } from '@/hooks/usePermissions'
import { stepsApi } from '@/api/steps' import { stepsApi } from '@/api/steps'
@@ -99,12 +100,9 @@ export default function StepLibraryPage() {
</div> </div>
</div> </div>
{canCreateSteps && ( {canCreateSteps && (
<button <Button onClick={() => setCreateOpen(true)}>
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"
>
+ Create Step + Create Step
</button> </Button>
)} )}
</div> </div>
@@ -147,20 +145,22 @@ export default function StepLibraryPage() {
<p className="mb-4 text-sm text-red-400">{deleteError}</p> <p className="mb-4 text-sm text-red-400">{deleteError}</p>
)} )}
<div className="flex gap-2"> <div className="flex gap-2">
<button <Button
variant="secondary"
onClick={() => { setDeletingStep(null); setDeleteError(null) }} onClick={() => { setDeletingStep(null); setDeleteError(null) }}
disabled={isDeleting} 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 Cancel
</button> </Button>
<button <Button
variant="destructive"
onClick={handleDeleteConfirm} onClick={handleDeleteConfirm}
disabled={isDeleting} loading={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" className="flex-1"
> >
{isDeleting ? 'Deleting...' : 'Delete'} {isDeleting ? 'Deleting...' : 'Delete'}
</button> </Button>
</div> </div>
</div> </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 { useParams, useNavigate, useBlocker } from 'react-router-dom'
import { useStore } from 'zustand' import { useStore } from 'zustand'
import { Undo2, Redo2, Save, CheckCircle2, Monitor, FileText, Code2, LayoutList, BarChart3, Settings, Download, Sparkles } from 'lucide-react' 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 { getMonacoEditor } from '@/components/tree-editor/code-mode'
import { treesApi } from '@/api/trees' import { treesApi } from '@/api/trees'
import { treeMarkdownApi } from '@/api/treeMarkdown' import { treeMarkdownApi } from '@/api/treeMarkdown'
@@ -508,15 +509,9 @@ export function TreeEditorPage() {
<p className="mb-6 max-w-sm text-sm text-muted-foreground"> <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. The tree editor requires a larger screen for the best experience. Please open this page on a desktop or tablet in landscape mode.
</p> </p>
<button <Button onClick={() => navigate('/trees')}>
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'
)}
>
Back to Library Back to Library
</button> </Button>
</div> </div>
) )
} }
@@ -535,24 +530,12 @@ export function TreeEditorPage() {
You have an unsaved draft from a previous session. Would you like to restore it? You have an unsaved draft from a previous session. Would you like to restore it?
</p> </p>
<div className="flex gap-2"> <div className="flex gap-2">
<button <Button onClick={handleRestoreDraft} className="flex-1">
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'
)}
>
Restore Draft Restore Draft
</button> </Button>
<button <Button variant="secondary" onClick={handleDiscardDraft} className="flex-1">
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'
)}
>
Start Fresh Start Fresh
</button> </Button>
</div> </div>
</div> </div>
</div> </div>
@@ -567,24 +550,12 @@ export function TreeEditorPage() {
You have unsaved changes. Are you sure you want to leave? You have unsaved changes. Are you sure you want to leave?
</p> </p>
<div className="flex gap-2"> <div className="flex gap-2">
<button <Button onClick={handleBlockerReset} className="flex-1">
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'
)}
>
Stay Stay
</button> </Button>
<button <Button variant="destructive" onClick={handleBlockerProceed} className="flex-1">
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'
)}
>
Leave Without Saving Leave Without Saving
</button> </Button>
</div> </div>
</div> </div>
</div> </div>
@@ -787,32 +758,26 @@ export function TreeEditorPage() {
</button> </button>
{/* Save Draft */} {/* Save Draft */}
<button <Button
variant="secondary"
onClick={handleSaveDraft} onClick={handleSaveDraft}
disabled={isSaving || !isDirty} disabled={isSaving || !isDirty}
title="Save as draft (Ctrl+S when draft or has errors)" 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 className="h-4 w-4" />
Save Draft Save Draft
</button> </Button>
{/* Publish */} {/* Publish */}
<button <Button
onClick={handlePublish} onClick={handlePublish}
disabled={isSaving || hasBlockingErrors} disabled={isSaving || hasBlockingErrors}
loading={isSaving}
title={hasBlockingErrors ? 'Fix validation errors before publishing (Ctrl+S when no errors)' : 'Publish tree (Ctrl+S when no errors)'} 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" /> <CheckCircle2 className="h-4 w-4" />
{isSaving ? 'Publishing...' : 'Publish'} {isSaving ? 'Publishing...' : 'Publish'}
</button> </Button>
</div> </div>
</div> </div>

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

@@ -1,6 +1,7 @@
import { useEffect, useState, useCallback, useMemo } from 'react' import { useEffect, useState, useCallback, useMemo } from 'react'
import { useNavigate, useSearchParams } from 'react-router-dom' import { useNavigate, useSearchParams } from 'react-router-dom'
import { X, RotateCcw, Play, FileUp } from 'lucide-react' import { X, RotateCcw, Play, FileUp } from 'lucide-react'
import { Button } from '@/components/ui/Button'
import { treesApi } from '@/api/trees' import { treesApi } from '@/api/trees'
import { categoriesApi } from '@/api/categories' import { categoriesApi } from '@/api/categories'
import { foldersApi } from '@/api/folders' import { foldersApi } from '@/api/folders'
@@ -283,13 +284,13 @@ export function TreeLibraryPage() {
</div> </div>
{canCreateTrees && ( {canCreateTrees && (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<button <Button
variant="secondary"
onClick={() => setShowImportModal(true)} 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" /> <FileUp className="h-4 w-4" />
Import Import
</button> </Button>
<CreateFlowDropdown <CreateFlowDropdown
aiEnabled={aiEnabled} aiEnabled={aiEnabled}
@@ -315,15 +316,9 @@ export function TreeLibraryPage() {
'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20' 'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
)} )}
/> />
<button <Button onClick={handleSearch}>
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'
)}
>
Search Search
</button> </Button>
</div> </div>
<select <select
@@ -436,13 +431,13 @@ export function TreeLibraryPage() {
</p> </p>
</div> </div>
<div className="flex items-center gap-2"> <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 } })} 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" /> <Play className="h-3.5 w-3.5" />
Resume Resume
</button> </Button>
<button <button
onClick={() => dismissSession(s.id)} onClick={() => dismissSession(s.id)}
className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground" 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 { buildSessionShareUrl, getLatestActiveShareForSession } from '@/lib/sessionShare'
import { CopilotPanel } from '@/components/copilot/CopilotPanel' import { CopilotPanel } from '@/components/copilot/CopilotPanel'
import { CopilotToggle } from '@/components/copilot/CopilotToggle' import { CopilotToggle } from '@/components/copilot/CopilotToggle'
import { Button } from '@/components/ui/Button'
interface LocationState { interface LocationState {
sessionId?: string sessionId?: string
@@ -601,15 +602,9 @@ export function TreeNavigationPage() {
/> />
</div> </div>
<button <Button onClick={startSession} className="w-full">
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'
)}
>
Start Troubleshooting Start Troubleshooting
</button> </Button>
</div> </div>
</div> </div>
) )
@@ -940,17 +935,14 @@ export function TreeNavigationPage() {
const targetLabel = targetNode?.question || targetNode?.title || 'next step' const targetLabel = targetNode?.question || targetNode?.title || 'next step'
return ( return (
<div className="mt-6 border-t border-primary/30 pt-4"> <div className="mt-6 border-t border-primary/30 pt-4">
<button <Button
type="button"
onClick={handleCustomContinueToDescendant} onClick={handleCustomContinueToDescendant}
className={cn( className="w-full justify-between"
'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', size="lg"
'hover:opacity-90'
)}
> >
<span>Continue to: {targetLabel.length > 50 ? `${targetLabel.slice(0, 50)}...` : targetLabel}</span> <span>Continue to: {targetLabel.length > 50 ? `${targetLabel.slice(0, 50)}...` : targetLabel}</span>
<ArrowRight className="h-4 w-4 shrink-0" /> <ArrowRight className="h-4 w-4 shrink-0" />
</button> </Button>
</div> </div>
) )
})()} })()}
@@ -1063,15 +1055,9 @@ export function TreeNavigationPage() {
</p> </p>
)} )}
{currentNode.next_node_id && ( {currentNode.next_node_id && (
<button <Button onClick={() => handleContinue()}>
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'
)}
>
Continue Continue
</button> </Button>
)} )}
</> </>
)} )}

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

@@ -1,5 +1,6 @@
import { useState, useEffect, useCallback } from 'react' import { useState, useEffect, useCallback } from 'react'
import { Plus, Trash2, Pencil, FolderTree } from 'lucide-react' import { Plus, Trash2, Pencil, FolderTree } from 'lucide-react'
import { Button } from '@/components/ui/Button'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { toast } from '@/lib/toast' import { toast } from '@/lib/toast'
import { Modal } from '@/components/common/Modal' import { Modal } from '@/components/common/Modal'
@@ -86,10 +87,10 @@ export function TeamCategoriesPage() {
title="Team Categories" title="Team Categories"
description="Manage tree categories for your team" description="Manage tree categories for your team"
action={( 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" /> <Plus className="h-4 w-4" />
Create Category Create Category
</button> </Button>
)} )}
/> />
@@ -132,8 +133,8 @@ export function TeamCategoriesPage() {
<Modal isOpen={createOpen} onClose={() => setCreateOpen(false)} title="Create Category" size="sm" <Modal isOpen={createOpen} onClose={() => setCreateOpen(false)} title="Create Category" size="sm"
footer={ footer={
<div className="flex justify-end gap-3"> <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 variant="secondary" onClick={() => setCreateOpen(false)}>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 onClick={handleCreate} disabled={!form.name || !form.slug}>Create</Button>
</div> </div>
} }
> >
@@ -157,8 +158,8 @@ export function TeamCategoriesPage() {
<Modal isOpen={!!editCategory} onClose={() => setEditCategory(null)} title="Edit Category" size="sm" <Modal isOpen={!!editCategory} onClose={() => setEditCategory(null)} title="Edit Category" size="sm"
footer={ footer={
<div className="flex justify-end gap-3"> <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 variant="secondary" onClick={() => setEditCategory(null)}>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 onClick={handleUpdate} disabled={!form.name || !form.slug}>Save</Button>
</div> </div>
} }
> >

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

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

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

@@ -1,5 +1,6 @@
import { useState, useEffect, useCallback } from 'react' import { useState, useEffect, useCallback } from 'react'
import { Plus, Trash2, Pencil, FolderTree } from 'lucide-react' import { Plus, Trash2, Pencil, FolderTree } from 'lucide-react'
import { Button } from '@/components/ui/Button'
import { DataTable, PageHeader, ActionMenu, EmptyState } from '@/components/admin' import { DataTable, PageHeader, ActionMenu, EmptyState } from '@/components/admin'
import type { Column } from '@/components/admin' import type { Column } from '@/components/admin'
import { Modal } from '@/components/common/Modal' import { Modal } from '@/components/common/Modal'
@@ -95,10 +96,10 @@ export function GlobalCategoriesPage() {
title="Global Categories" title="Global Categories"
description="Manage tree categories available to all accounts" description="Manage tree categories available to all accounts"
action={ 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" /> <Plus className="h-4 w-4" />
Create Category Create Category
</button> </Button>
} }
/> />
@@ -118,8 +119,8 @@ export function GlobalCategoriesPage() {
size="sm" size="sm"
footer={ footer={
<div className="flex justify-end gap-3"> <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 variant="secondary" onClick={() => setCreateOpen(false)}>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 onClick={handleCreate} disabled={!form.name || !form.slug}>Create</Button>
</div> </div>
} }
> >
@@ -147,8 +148,8 @@ export function GlobalCategoriesPage() {
size="sm" size="sm"
footer={ footer={
<div className="flex justify-end gap-3"> <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 variant="secondary" onClick={() => setEditCategory(null)}>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 onClick={handleUpdate} disabled={!form.name || !form.slug}>Save</Button>
</div> </div>
} }
> >

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

@@ -1,5 +1,6 @@
import { useState, useEffect, useCallback } from 'react' import { useState, useEffect, useCallback } from 'react'
import { Plus, Copy, Trash2, Ticket, Mail, MailCheck, RefreshCw } from 'lucide-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 { DataTable, PageHeader, StatusBadge, ActionMenu, EmptyState } from '@/components/admin'
import type { Column } from '@/components/admin' import type { Column } from '@/components/admin'
import { Modal } from '@/components/common/Modal' import { Modal } from '@/components/common/Modal'
@@ -215,16 +216,10 @@ export function InviteCodesPage() {
title="Invite Codes" title="Invite Codes"
description="Create and manage registration invite codes with plan assignment" description="Create and manage registration invite codes with plan assignment"
action={ action={
<button <Button onClick={() => setCreateOpen(true)}>
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'
)}
>
<Plus className="h-4 w-4" /> <Plus className="h-4 w-4" />
Create Code Create Code
</button> </Button>
} }
/> />
@@ -249,19 +244,10 @@ export function InviteCodesPage() {
size="sm" size="sm"
footer={ footer={
<div className="flex justify-end gap-3"> <div className="flex justify-end gap-3">
<button <Button variant="secondary" onClick={() => { setCreateOpen(false); resetForm() }}>Cancel</Button>
onClick={() => { setCreateOpen(false); resetForm() }} <Button onClick={handleCreate} loading={creating}>
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"
>
{creating ? 'Creating...' : 'Create'} {creating ? 'Creating...' : 'Create'}
</button> </Button>
</div> </div>
} }
> >

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

@@ -1,5 +1,6 @@
import { useState, useEffect, useCallback } from 'react' import { useState, useEffect, useCallback } from 'react'
import { Plus, Trash2, Gauge } from 'lucide-react' import { Plus, Trash2, Gauge } from 'lucide-react'
import { Button } from '@/components/ui/Button'
import { DataTable, PageHeader, ActionMenu, EmptyState } from '@/components/admin' import { DataTable, PageHeader, ActionMenu, EmptyState } from '@/components/admin'
import type { Column } from '@/components/admin' import type { Column } from '@/components/admin'
import { Modal } from '@/components/common/Modal' import { Modal } from '@/components/common/Modal'
@@ -127,13 +128,10 @@ export function PlanLimitsPage() {
<div> <div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h2 className="text-lg font-semibold text-foreground">Account Overrides</h2> <h2 className="text-lg font-semibold text-foreground">Account Overrides</h2>
<button <Button onClick={() => setCreateOverride(true)}>
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')}
>
<Plus className="h-4 w-4" /> <Plus className="h-4 w-4" />
Add Override Add Override
</button> </Button>
</div> </div>
<div className="mt-3"> <div className="mt-3">
<DataTable <DataTable
@@ -154,8 +152,8 @@ export function PlanLimitsPage() {
size="sm" size="sm"
footer={ footer={
<div className="flex justify-end gap-3"> <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 variant="secondary" onClick={() => setEditPlan(null)}>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 onClick={handleSavePlan}>Save</Button>
</div> </div>
} }
> >
@@ -185,8 +183,8 @@ export function PlanLimitsPage() {
size="sm" size="sm"
footer={ footer={
<div className="flex justify-end gap-3"> <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 variant="secondary" onClick={() => setCreateOverride(false)}>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 onClick={handleCreateOverride} disabled={!overrideForm.account_display_code}>Create</Button>
</div> </div>
} }
> >

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

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

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

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