User management
This commit is contained in:
Louis Knight-Webb
211
frontend/src/components/projects/project-detail.tsx
Normal file
211
frontend/src/components/projects/project-detail.tsx
Normal file
@@ -0,0 +1,211 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
import { Project, ApiResponse } from 'shared/types'
|
||||
import { ProjectForm } from './project-form'
|
||||
import { ArrowLeft, Edit, Trash2, Calendar, Clock, User, AlertCircle, Loader2 } from 'lucide-react'
|
||||
|
||||
interface ProjectDetailProps {
|
||||
projectId: string
|
||||
onBack: () => void
|
||||
}
|
||||
|
||||
export function ProjectDetail({ projectId, onBack }: ProjectDetailProps) {
|
||||
const [project, setProject] = useState<Project | null>(null)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [showEditForm, setShowEditForm] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
const fetchProject = async () => {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
try {
|
||||
const response = await fetch(`/api/projects/${projectId}`)
|
||||
const data: ApiResponse<Project> = await response.json()
|
||||
if (data.success && data.data) {
|
||||
setProject(data.data)
|
||||
} else {
|
||||
setError('Project not found')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch project:', error)
|
||||
setError('Failed to load project')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!project) return
|
||||
if (!confirm(`Are you sure you want to delete "${project.name}"? This action cannot be undone.`)) return
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/projects/${projectId}`, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
if (response.ok) {
|
||||
onBack()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to delete project:', error)
|
||||
setError('Failed to delete project')
|
||||
}
|
||||
}
|
||||
|
||||
const handleEditSuccess = () => {
|
||||
setShowEditForm(false)
|
||||
fetchProject()
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchProject()
|
||||
}, [projectId])
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Loading project...
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (error || !project) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<Button variant="outline" onClick={onBack}>
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Back to Projects
|
||||
</Button>
|
||||
<Card>
|
||||
<CardContent className="py-12 text-center">
|
||||
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-lg bg-muted">
|
||||
<AlertCircle className="h-6 w-6 text-muted-foreground" />
|
||||
</div>
|
||||
<h3 className="mt-4 text-lg font-semibold">Project not found</h3>
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
{error || 'The project you\'re looking for doesn\'t exist or has been deleted.'}
|
||||
</p>
|
||||
<Button className="mt-4" onClick={onBack}>
|
||||
Back to Projects
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button variant="outline" onClick={onBack}>
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Back to Projects
|
||||
</Button>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">{project.name}</h1>
|
||||
<p className="text-sm text-muted-foreground">Project details and settings</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" onClick={() => setShowEditForm(true)}>
|
||||
<Edit className="mr-2 h-4 w-4" />
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleDelete}
|
||||
className="text-red-600 hover:text-red-700 hover:bg-red-50"
|
||||
>
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
{error}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center">
|
||||
<Calendar className="mr-2 h-5 w-5" />
|
||||
Project Information
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium text-muted-foreground">Status</span>
|
||||
<Badge variant="secondary">Active</Badge>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center text-sm">
|
||||
<Calendar className="mr-2 h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-muted-foreground">Created:</span>
|
||||
<span className="ml-2">{new Date(project.created_at).toLocaleDateString()}</span>
|
||||
</div>
|
||||
<div className="flex items-center text-sm">
|
||||
<Clock className="mr-2 h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-muted-foreground">Last Updated:</span>
|
||||
<span className="ml-2">{new Date(project.updated_at).toLocaleDateString()}</span>
|
||||
</div>
|
||||
<div className="flex items-center text-sm">
|
||||
<User className="mr-2 h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-muted-foreground">Owner ID:</span>
|
||||
<code className="ml-2 text-xs bg-muted px-1 py-0.5 rounded">
|
||||
{project.owner_id.substring(0, 8)}...
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Project Details</CardTitle>
|
||||
<CardDescription>
|
||||
Technical information about this project
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-muted-foreground">Project ID</h4>
|
||||
<code className="mt-1 block text-xs bg-muted p-2 rounded font-mono">
|
||||
{project.id}
|
||||
</code>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-muted-foreground">Created At</h4>
|
||||
<p className="mt-1 text-sm">
|
||||
{new Date(project.created_at).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-muted-foreground">Last Modified</h4>
|
||||
<p className="mt-1 text-sm">
|
||||
{new Date(project.updated_at).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<ProjectForm
|
||||
open={showEditForm}
|
||||
onClose={() => setShowEditForm(false)}
|
||||
onSuccess={handleEditSuccess}
|
||||
project={project}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
127
frontend/src/components/projects/project-form.tsx
Normal file
127
frontend/src/components/projects/project-form.tsx
Normal file
@@ -0,0 +1,127 @@
|
||||
import { useState } from 'react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
||||
import { Project, CreateProject, UpdateProject } from 'shared/types'
|
||||
import { AlertCircle } from 'lucide-react'
|
||||
|
||||
interface ProjectFormProps {
|
||||
open: boolean
|
||||
onClose: () => void
|
||||
onSuccess: () => void
|
||||
project?: Project | null
|
||||
}
|
||||
|
||||
export function ProjectForm({ open, onClose, onSuccess, project }: ProjectFormProps) {
|
||||
const [name, setName] = useState(project?.name || '')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
const isEditing = !!project
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setError('')
|
||||
setLoading(true)
|
||||
|
||||
try {
|
||||
if (isEditing) {
|
||||
const updateData: UpdateProject = { name }
|
||||
const response = await fetch(`/api/projects/${project.id}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(updateData),
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to update project')
|
||||
}
|
||||
} else {
|
||||
// For now, using a placeholder owner_id - this should come from auth
|
||||
const createData: CreateProject = {
|
||||
name,
|
||||
owner_id: '00000000-0000-0000-0000-000000000000'
|
||||
}
|
||||
const response = await fetch('/api/projects', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(createData),
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to create project')
|
||||
}
|
||||
}
|
||||
|
||||
onSuccess()
|
||||
setName('')
|
||||
} catch (error) {
|
||||
setError(error instanceof Error ? error.message : 'An error occurred')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
setName(project?.name || '')
|
||||
setError('')
|
||||
onClose()
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={handleClose}>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{isEditing ? 'Edit Project' : 'Create New Project'}
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
{isEditing
|
||||
? 'Make changes to your project here. Click save when you\'re done.'
|
||||
: 'Add a new project to your workspace. You can always edit it later.'
|
||||
}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Project Name</Label>
|
||||
<Input
|
||||
id="name"
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Enter project name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
{error}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={handleClose}
|
||||
disabled={loading}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={loading || !name.trim()}>
|
||||
{loading ? 'Saving...' : isEditing ? 'Save Changes' : 'Create Project'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
169
frontend/src/components/projects/project-list.tsx
Normal file
169
frontend/src/components/projects/project-list.tsx
Normal file
@@ -0,0 +1,169 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
import { Project, ApiResponse } from 'shared/types'
|
||||
import { ProjectForm } from './project-form'
|
||||
import { Plus, Edit, Trash2, Calendar, AlertCircle, Loader2 } from 'lucide-react'
|
||||
|
||||
export function ProjectList() {
|
||||
const [projects, setProjects] = useState<Project[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [showForm, setShowForm] = useState(false)
|
||||
const [editingProject, setEditingProject] = useState<Project | null>(null)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
const fetchProjects = async () => {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
try {
|
||||
const response = await fetch('/api/projects')
|
||||
const data: ApiResponse<Project[]> = await response.json()
|
||||
if (data.success && data.data) {
|
||||
setProjects(data.data)
|
||||
} else {
|
||||
setError('Failed to load projects')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch projects:', error)
|
||||
setError('Failed to connect to server')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async (id: string, name: string) => {
|
||||
if (!confirm(`Are you sure you want to delete "${name}"? This action cannot be undone.`)) return
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/projects/${id}`, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
if (response.ok) {
|
||||
fetchProjects()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to delete project:', error)
|
||||
setError('Failed to delete project')
|
||||
}
|
||||
}
|
||||
|
||||
const handleEdit = (project: Project) => {
|
||||
setEditingProject(project)
|
||||
setShowForm(true)
|
||||
}
|
||||
|
||||
const handleFormSuccess = () => {
|
||||
setShowForm(false)
|
||||
setEditingProject(null)
|
||||
fetchProjects()
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchProjects()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">Projects</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Manage your projects and track their progress
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={() => setShowForm(true)}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Create Project
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
{error}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Loading projects...
|
||||
</div>
|
||||
) : projects.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="py-12 text-center">
|
||||
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-lg bg-muted">
|
||||
<Plus className="h-6 w-6" />
|
||||
</div>
|
||||
<h3 className="mt-4 text-lg font-semibold">No projects yet</h3>
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
Get started by creating your first project.
|
||||
</p>
|
||||
<Button
|
||||
className="mt-4"
|
||||
onClick={() => setShowForm(true)}
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Create your first project
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{projects.map((project) => (
|
||||
<Card key={project.id} className="hover:shadow-md transition-shadow">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<CardTitle className="text-lg">{project.name}</CardTitle>
|
||||
<Badge variant="secondary" className="ml-2">
|
||||
Active
|
||||
</Badge>
|
||||
</div>
|
||||
<CardDescription className="flex items-center">
|
||||
<Calendar className="mr-1 h-3 w-3" />
|
||||
Created {new Date(project.created_at).toLocaleDateString()}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleEdit(project)}
|
||||
className="h-8"
|
||||
>
|
||||
<Edit className="mr-1 h-3 w-3" />
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleDelete(project.id, project.name)}
|
||||
className="h-8 text-red-600 hover:text-red-700 hover:bg-red-50"
|
||||
>
|
||||
<Trash2 className="mr-1 h-3 w-3" />
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ProjectForm
|
||||
open={showForm}
|
||||
onClose={() => {
|
||||
setShowForm(false)
|
||||
setEditingProject(null)
|
||||
}}
|
||||
onSuccess={handleFormSuccess}
|
||||
project={editingProject}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
18
frontend/src/components/projects/projects-page.tsx
Normal file
18
frontend/src/components/projects/projects-page.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import { useState } from 'react'
|
||||
import { ProjectList } from './project-list'
|
||||
import { ProjectDetail } from './project-detail'
|
||||
|
||||
export function ProjectsPage() {
|
||||
const [selectedProjectId, setSelectedProjectId] = useState<string | null>(null)
|
||||
|
||||
if (selectedProjectId) {
|
||||
return (
|
||||
<ProjectDetail
|
||||
projectId={selectedProjectId}
|
||||
onBack={() => setSelectedProjectId(null)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return <ProjectList />
|
||||
}
|
||||
Reference in New Issue
Block a user