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

refactor: enforce shared Modal component #100

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

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

@@ -1,6 +1,7 @@
import { useState } from 'react' import { 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,102 +56,84 @@ 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>
}
>
<form id="create-category-form" onSubmit={handleSubmit} className="space-y-4">
{error && (
<div className="rounded-md bg-red-400/10 p-3 text-sm text-red-400">
{error}
</div>
)}
<div>
<label htmlFor="name" className="mb-1 block text-sm font-medium text-foreground">
Category Name <span className="text-red-400">*</span>
</label>
<input
id="name"
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
disabled={isSaving}
maxLength={100}
placeholder="e.g., Network Troubleshooting"
required
className={cn(
'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
'placeholder:text-muted-foreground',
'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
'disabled:opacity-50'
)}
/>
<p className="mt-1 text-xs text-muted-foreground">
{name.length}/100 characters
</p>
</div> </div>
{/* Form */} <div>
<form onSubmit={handleSubmit} className="space-y-4"> <label htmlFor="description" className="mb-1 block text-sm font-medium text-foreground">
{/* Error Message */} Description <span className="text-muted-foreground">(optional)</span>
{error && ( </label>
<div className="rounded-md bg-red-400/10 p-3 text-sm text-red-400"> <textarea
{error} id="description"
</div> value={description}
)} onChange={(e) => setDescription(e.target.value)}
disabled={isSaving}
{/* Name Field */} rows={3}
<div> placeholder="Brief description of this category..."
<label htmlFor="name" className="mb-1 block text-sm font-medium text-foreground"> className={cn(
Category Name <span className="text-red-400">*</span> 'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
</label> 'placeholder:text-muted-foreground',
<input 'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
id="name" 'disabled:opacity-50'
type="text" )}
value={name} />
onChange={(e) => setName(e.target.value)} </div>
disabled={isSaving} </form>
maxLength={100} </Modal>
placeholder="e.g., Network Troubleshooting"
required
className={cn(
'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
'placeholder:text-muted-foreground',
'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
'disabled:opacity-50'
)}
/>
<p className="mt-1 text-xs text-muted-foreground">
{name.length}/100 characters
</p>
</div>
{/* Description Field */}
<div>
<label htmlFor="description" className="mb-1 block text-sm font-medium text-foreground">
Description <span className="text-muted-foreground">(optional)</span>
</label>
<textarea
id="description"
value={description}
onChange={(e) => setDescription(e.target.value)}
disabled={isSaving}
rows={3}
placeholder="Brief description of this category..."
className={cn(
'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
'placeholder:text-muted-foreground',
'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
'disabled:opacity-50'
)}
/>
</div>
{/* Actions */}
<div className="flex justify-end gap-2 pt-2">
<button
type="button"
onClick={handleClose}
disabled={isSaving}
className={cn(
'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
'hover:bg-accent hover:text-foreground disabled:opacity-50'
)}
>
Cancel
</button>
<button
type="submit"
disabled={isSaving || !name.trim()}
className={cn(
'rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium',
'hover:opacity-90 disabled:opacity-50'
)}
>
{isSaving ? 'Creating...' : 'Create Category'}
</button>
</div>
</form>
</div>
</div>
) )
} }

171
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,102 +68,84 @@ 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>
}
>
<form id="edit-category-form" onSubmit={handleSubmit} className="space-y-4">
{error && (
<div className="rounded-md bg-red-400/10 p-3 text-sm text-red-400">
{error}
</div>
)}
<div>
<label htmlFor="edit-name" className="mb-1 block text-sm font-medium text-foreground">
Category Name <span className="text-red-400">*</span>
</label>
<input
id="edit-name"
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
disabled={isSaving}
maxLength={100}
placeholder="e.g., Network Troubleshooting"
required
className={cn(
'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
'placeholder:text-muted-foreground',
'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
'disabled:opacity-50'
)}
/>
<p className="mt-1 text-xs text-muted-foreground">
{name.length}/100 characters
</p>
</div> </div>
{/* Form */} <div>
<form onSubmit={handleSubmit} className="space-y-4"> <label htmlFor="edit-description" className="mb-1 block text-sm font-medium text-foreground">
{/* Error Message */} Description <span className="text-muted-foreground">(optional)</span>
{error && ( </label>
<div className="rounded-md bg-red-400/10 p-3 text-sm text-red-400"> <textarea
{error} id="edit-description"
</div> value={description}
)} onChange={(e) => setDescription(e.target.value)}
disabled={isSaving}
{/* Name Field */} rows={3}
<div> placeholder="Brief description of this category..."
<label htmlFor="edit-name" className="mb-1 block text-sm font-medium text-foreground"> className={cn(
Category Name <span className="text-red-400">*</span> 'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
</label> 'placeholder:text-muted-foreground',
<input 'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
id="edit-name" 'disabled:opacity-50'
type="text" )}
value={name} />
onChange={(e) => setName(e.target.value)} </div>
disabled={isSaving} </form>
maxLength={100} </Modal>
placeholder="e.g., Network Troubleshooting"
required
className={cn(
'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
'placeholder:text-muted-foreground',
'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
'disabled:opacity-50'
)}
/>
<p className="mt-1 text-xs text-muted-foreground">
{name.length}/100 characters
</p>
</div>
{/* Description Field */}
<div>
<label htmlFor="edit-description" className="mb-1 block text-sm font-medium text-foreground">
Description <span className="text-muted-foreground">(optional)</span>
</label>
<textarea
id="edit-description"
value={description}
onChange={(e) => setDescription(e.target.value)}
disabled={isSaving}
rows={3}
placeholder="Brief description of this category..."
className={cn(
'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
'placeholder:text-muted-foreground',
'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
'disabled:opacity-50'
)}
/>
</div>
{/* Actions */}
<div className="flex justify-end gap-2 pt-2">
<button
type="button"
onClick={handleClose}
disabled={isSaving}
className={cn(
'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
'hover:bg-accent hover:text-foreground disabled:opacity-50'
)}
>
Cancel
</button>
<button
type="submit"
disabled={isSaving || !name.trim()}
className={cn(
'rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium',
'hover:opacity-90 disabled:opacity-50'
)}
>
{isSaving ? 'Saving...' : 'Save Changes'}
</button>
</div>
</form>
</div>
</div>
) )
} }

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>

38
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 ? ( <GitFork className="h-4 w-4" />
<> Save as Personal Tree
<Loader2 className="h-4 w-4 animate-spin" /> </Button>
Saving...
</>
) : (
<>
<GitFork className="h-4 w-4" />
Save as Personal Tree
</>
)}
</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>
)} )}
> >

454
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,254 +174,230 @@ 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">
<Button variant="secondary" onClick={onClose}>
Close
</Button>
</div>
}
>
{/* Subtitle */}
<p className="-mt-2 mb-4 text-sm text-muted-foreground">{sessionLabel}</p>
{/* Modal */} <div className="space-y-6">
<div className="relative w-full max-w-lg bg-card border border-border rounded-xl shadow-lg"> {/* Create Share Form */}
{/* Header */} <div className="space-y-4">
<div className="flex items-center justify-between border-b border-border px-6 py-4"> {/* Visibility */}
<div> <div>
<h2 className="text-lg font-heading font-semibold text-foreground">Share Session</h2> <label className="mb-2 block text-sm font-medium text-foreground">
<p className="text-sm text-muted-foreground">{sessionLabel}</p> Visibility
</label>
<div className="space-y-2">
<button
onClick={() => { setVisibility('account'); setVisibilityError(null) }}
className={cn(
'flex w-full items-center gap-3 rounded-md border px-4 py-3 text-left transition-colors',
visibility === 'account'
? 'border-primary/30 bg-primary/10 text-foreground'
: 'border-border bg-transparent text-muted-foreground hover:border-border hover:bg-accent'
)}
>
<Users className="h-4 w-4" />
<div className="flex-1">
<div className="text-sm font-medium">Account Only</div>
<div className="text-xs text-muted-foreground">Visible to your team</div>
</div>
{visibility === 'account' && (
<div className="h-2 w-2 rounded-full bg-primary" />
)}
</button>
<button
onClick={() => { setVisibility('public'); setVisibilityError(null) }}
className={cn(
'flex w-full items-center gap-3 rounded-md border px-4 py-3 text-left transition-colors',
visibility === 'public'
? 'border-primary/30 bg-primary/10 text-foreground'
: 'border-border bg-transparent text-muted-foreground hover:border-border hover:bg-accent'
)}
>
<Globe className="h-4 w-4" />
<div className="flex-1">
<div className="text-sm font-medium">Public</div>
<div className="text-xs text-muted-foreground">Anyone with the link</div>
</div>
{visibility === 'public' && (
<div className="h-2 w-2 rounded-full bg-primary" />
)}
</button>
</div>
{visibilityError && (
<p className="mt-2 text-sm text-red-400">{visibilityError}</p>
)}
</div> </div>
<button
onClick={onClose} {/* Share Name */}
className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground" <div>
<label className="mb-2 block text-sm font-medium text-foreground">
Share Name <span className="text-muted-foreground">(optional)</span>
</label>
<input
type="text"
value={shareName}
onChange={(e) => setShareName(e.target.value.slice(0, 100))}
placeholder="e.g. Training link, Customer escalation"
className={cn(
'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground placeholder-muted-foreground',
'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
)}
maxLength={100}
/>
</div>
{/* Expiration */}
<div>
<label className="mb-2 block text-sm font-medium text-foreground">
Expiration
</label>
<div className="flex flex-wrap gap-2">
{presetButtons.map((preset) => (
<button
key={preset.value}
onClick={() => setExpirationPreset(preset.value)}
className={cn(
'rounded-md border px-3 py-1.5 text-sm transition-colors',
expirationPreset === preset.value
? 'border-primary/30 bg-primary/10 text-foreground'
: 'border-border text-muted-foreground hover:border-border hover:bg-accent'
)}
>
{preset.label}
</button>
))}
</div>
{expirationPreset === 'custom' && (
<input
type="datetime-local"
value={customDatetime}
onChange={(e) => setCustomDatetime(e.target.value)}
className={cn(
'mt-2 w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
'scheme-dark'
)}
/>
)}
</div>
{/* Generate Button */}
<Button
onClick={handleGenerateLink}
disabled={expirationPreset === 'custom' && !customDatetime}
loading={isGenerating}
className="w-full"
> >
<X className="h-5 w-5" /> <Link2 className="h-4 w-4" />
</button> Generate Link
</Button>
</div> </div>
{/* Body */} {/* Existing Shares */}
<div className="max-h-[60vh] overflow-y-auto px-6 py-4 space-y-6"> {shares.length > 0 && (
{/* Create Share Form */} <div>
<div className="space-y-4"> <h3 className="mb-3 text-sm font-medium text-foreground">
{/* Visibility */} Active Shares ({shares.length})
<div> </h3>
<label className="mb-2 block text-sm font-medium text-foreground"> <div className="space-y-3">
Visibility {shares.map((share) => {
</label> const expiration = getExpirationLabel(share.expires_at)
<div className="space-y-2"> const isCopied = copiedShareId === share.id
<button return (
onClick={() => { setVisibility('account'); setVisibilityError(null) }} <div
className={cn( key={share.id}
'flex w-full items-center gap-3 rounded-md border px-4 py-3 text-left transition-colors', className="bg-card border border-border rounded-xl p-4 space-y-2"
visibility === 'account'
? 'border-primary/30 bg-primary/10 text-foreground'
: 'border-border bg-transparent text-muted-foreground hover:border-border hover:bg-accent'
)}
>
<Users className="h-4 w-4" />
<div className="flex-1">
<div className="text-sm font-medium">Account Only</div>
<div className="text-xs text-muted-foreground">Visible to your team</div>
</div>
{visibility === 'account' && (
<div className="h-2 w-2 rounded-full bg-primary" />
)}
</button>
<button
onClick={() => { setVisibility('public'); setVisibilityError(null) }}
className={cn(
'flex w-full items-center gap-3 rounded-md border px-4 py-3 text-left transition-colors',
visibility === 'public'
? 'border-primary/30 bg-primary/10 text-foreground'
: 'border-border bg-transparent text-muted-foreground hover:border-border hover:bg-accent'
)}
>
<Globe className="h-4 w-4" />
<div className="flex-1">
<div className="text-sm font-medium">Public</div>
<div className="text-xs text-muted-foreground">Anyone with the link</div>
</div>
{visibility === 'public' && (
<div className="h-2 w-2 rounded-full bg-primary" />
)}
</button>
</div>
{visibilityError && (
<p className="mt-2 text-sm text-red-400">{visibilityError}</p>
)}
</div>
{/* Share Name */}
<div>
<label className="mb-2 block text-sm font-medium text-foreground">
Share Name <span className="text-muted-foreground">(optional)</span>
</label>
<input
type="text"
value={shareName}
onChange={(e) => setShareName(e.target.value.slice(0, 100))}
placeholder="e.g. Training link, Customer escalation"
className={cn(
'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground placeholder-muted-foreground',
'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
)}
maxLength={100}
/>
</div>
{/* Expiration */}
<div>
<label className="mb-2 block text-sm font-medium text-foreground">
Expiration
</label>
<div className="flex flex-wrap gap-2">
{presetButtons.map((preset) => (
<button
key={preset.value}
onClick={() => setExpirationPreset(preset.value)}
className={cn(
'rounded-md border px-3 py-1.5 text-sm transition-colors',
expirationPreset === preset.value
? 'border-primary/30 bg-primary/10 text-foreground'
: 'border-border text-muted-foreground hover:border-border hover:bg-accent'
)}
> >
{preset.label} <div className="flex items-start justify-between gap-2">
</button> <div className="flex-1 min-w-0">
))} <div className="flex items-center gap-2">
</div> <span className={cn(
{expirationPreset === 'custom' && ( 'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs',
<input share.visibility === 'public'
type="datetime-local" ? 'bg-accent text-muted-foreground'
value={customDatetime} : 'bg-accent text-muted-foreground'
onChange={(e) => setCustomDatetime(e.target.value)} )}>
className={cn( {share.visibility === 'public' ? (
'mt-2 w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground', <Globe className="h-3 w-3" />
'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
'scheme-dark'
)}
/>
)}
</div>
{/* Generate Button */}
<button
onClick={handleGenerateLink}
disabled={isGenerating || (expirationPreset === 'custom' && !customDatetime)}
className={cn(
'flex w-full items-center justify-center gap-2 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed'
)}
>
<Link2 className="h-4 w-4" />
{isGenerating ? 'Generating...' : 'Generate Link'}
</button>
</div>
{/* Existing Shares */}
{shares.length > 0 && (
<div>
<h3 className="mb-3 text-sm font-medium text-foreground">
Active Shares ({shares.length})
</h3>
<div className="space-y-3">
{shares.map((share) => {
const expiration = getExpirationLabel(share.expires_at)
const isCopied = copiedShareId === share.id
return (
<div
key={share.id}
className="bg-card border border-border rounded-xl p-4 space-y-2"
>
<div className="flex items-start justify-between gap-2">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<span className={cn(
'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs',
share.visibility === 'public'
? 'bg-accent text-muted-foreground'
: 'bg-accent text-muted-foreground'
)}>
{share.visibility === 'public' ? (
<Globe className="h-3 w-3" />
) : (
<Users className="h-3 w-3" />
)}
{share.visibility === 'public' ? 'Public' : 'Account'}
</span>
<span className="truncate text-sm font-medium text-foreground">
{share.share_name || 'Untitled share'}
</span>
</div>
<div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
<span>{getRelativeTime(share.created_at)}</span>
<span>
{share.view_count > 0
? `${share.view_count} view${share.view_count === 1 ? '' : 's'}`
: 'Not viewed yet'}
</span>
<span className={cn(
'flex items-center gap-1',
expiration.isExpired && 'text-red-400'
)}>
<Clock className="h-3 w-3" />
{expiration.text}
</span>
</div>
</div>
<div className="flex items-center gap-1 shrink-0">
<button
onClick={() => handleCopyUrl(share)}
title="Copy share URL"
className={cn(
'rounded-md border border-border p-1.5 text-sm transition-colors',
isCopied
? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-400'
: 'text-muted-foreground hover:bg-accent hover:text-foreground'
)}
>
{isCopied ? (
<Check className="h-3.5 w-3.5" />
) : ( ) : (
<Copy className="h-3.5 w-3.5" /> <Users className="h-3 w-3" />
)} )}
</button> {share.visibility === 'public' ? 'Public' : 'Account'}
<button </span>
onClick={() => handleRevoke(share.id)} <span className="truncate text-sm font-medium text-foreground">
title="Revoke share" {share.share_name || 'Untitled share'}
className="rounded-md border border-border p-1.5 text-muted-foreground hover:bg-red-500/10 hover:border-red-500/30 hover:text-red-400 transition-colors" </span>
> </div>
<Trash2 className="h-3.5 w-3.5" /> <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
</button> <span>{getRelativeTime(share.created_at)}</span>
<span>
{share.view_count > 0
? `${share.view_count} view${share.view_count === 1 ? '' : 's'}`
: 'Not viewed yet'}
</span>
<span className={cn(
'flex items-center gap-1',
expiration.isExpired && 'text-red-400'
)}>
<Clock className="h-3 w-3" />
{expiration.text}
</span>
</div> </div>
</div> </div>
<div className="flex items-center gap-1 shrink-0">
<button
onClick={() => handleCopyUrl(share)}
title="Copy share URL"
className={cn(
'rounded-md border border-border p-1.5 text-sm transition-colors',
isCopied
? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-400'
: 'text-muted-foreground hover:bg-accent hover:text-foreground'
)}
>
{isCopied ? (
<Check className="h-3.5 w-3.5" />
) : (
<Copy className="h-3.5 w-3.5" />
)}
</button>
<button
onClick={() => handleRevoke(share.id)}
title="Revoke share"
className="rounded-md border border-border p-1.5 text-muted-foreground hover:bg-red-500/10 hover:border-red-500/30 hover:text-red-400 transition-colors"
>
<Trash2 className="h-3.5 w-3.5" />
</button>
</div>
</div> </div>
) </div>
})} )
</div> })}
</div> </div>
)} </div>
)}
{/* Loading state */} {/* Loading state */}
{isLoadingShares && shares.length === 0 && ( {isLoadingShares && shares.length === 0 && (
<div className="flex items-center justify-center py-4"> <div className="flex items-center justify-center py-4">
<Spinner size="sm" className="h-5 w-5 border-t-foreground" /> <Spinner size="sm" className="h-5 w-5 border-t-foreground" />
</div> </div>
)} )}
</div>
{/* Footer */}
<div className="flex justify-end gap-3 border-t border-border px-6 py-4">
<button
onClick={onClose}
className={cn(
'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
'hover:bg-accent hover:text-foreground'
)}
>
Close
</button>
</div>
</div> </div>
</div> </Modal>
) )
} }

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

@@ -3,6 +3,7 @@ import { X, ThumbsUp, ThumbsDown } from 'lucide-react'
import { StarRating } from '@/components/common/StarRating' import { 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>
) )

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

@@ -6,6 +6,7 @@ import type { Account, AccountMember, AccountInvite } from '@/types'
import { TransferOwnershipModal } from '@/components/account/TransferOwnershipModal' import { 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 ? ( <Check className="h-4 w-4" />
<Loader2 className="h-4 w-4 animate-spin" /> </Button>
) : ( <Button
<Check className="h-4 w-4" /> variant="secondary"
)} size="icon-sm"
</button>
<button
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>
} }
> >