Create Project Board page matching site theme
cgen-32367ceaa073402fb1f469f777583cd1
This commit is contained in:
Builder.io
parent
2325a7a303
commit
6ec4df64c9
1 changed files with 142 additions and 0 deletions
142
client/pages/ProjectBoard.tsx
Normal file
142
client/pages/ProjectBoard.tsx
Normal file
|
|
@ -0,0 +1,142 @@
|
|||
import Layout from "@/components/Layout";
|
||||
import { useAuth } from "@/contexts/AuthContext";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { aethexCollabService } from "@/lib/aethex-collab-service";
|
||||
import LoadingScreen from "@/components/LoadingScreen";
|
||||
|
||||
const columns: { key: "todo"|"doing"|"done"|"blocked"; title: string; hint: string }[] = [
|
||||
{ key: "todo", title: "To do", hint: "Planned" },
|
||||
{ key: "doing", title: "In progress", hint: "Active" },
|
||||
{ key: "done", title: "Done", hint: "Completed" },
|
||||
{ key: "blocked", title: "Blocked", hint: "Needs attention" },
|
||||
];
|
||||
|
||||
export default function ProjectBoard() {
|
||||
const { user, loading } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const { projectId } = useParams<{ projectId: string }>();
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [tasks, setTasks] = useState<any[]>([]);
|
||||
const [title, setTitle] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [creating, setCreating] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!loading && !user) navigate("/login", { replace: true });
|
||||
}, [loading, user, navigate]);
|
||||
|
||||
const load = async () => {
|
||||
if (!projectId) return;
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const rows = await aethexCollabService.listProjectTasks(projectId);
|
||||
setTasks(rows);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
}, [projectId]);
|
||||
|
||||
const grouped = useMemo(() => {
|
||||
const map: Record<string, any[]> = { todo: [], doing: [], done: [], blocked: [] };
|
||||
for (const t of tasks) {
|
||||
map[t.status || "todo"].push(t);
|
||||
}
|
||||
return map;
|
||||
}, [tasks]);
|
||||
|
||||
const handleCreate = async () => {
|
||||
if (!user?.id || !projectId) return;
|
||||
if (!title.trim()) return;
|
||||
setCreating(true);
|
||||
try {
|
||||
await aethexCollabService.createTask(projectId, title.trim(), description.trim() || null, null, null);
|
||||
setTitle("");
|
||||
setDescription("");
|
||||
await load();
|
||||
} finally {
|
||||
setCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const move = async (taskId: string, status: "todo"|"doing"|"done"|"blocked") => {
|
||||
await aethexCollabService.updateTaskStatus(taskId, status);
|
||||
await load();
|
||||
};
|
||||
|
||||
if (loading || isLoading) return <LoadingScreen message="Loading project..." showProgress duration={800} />;
|
||||
if (!user) return null;
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="min-h-screen bg-[radial-gradient(circle_at_top,_rgba(110,141,255,0.12),transparent_60%)] py-10">
|
||||
<div className="mx-auto w-full max-w-6xl px-4 lg:px-6 space-y-6">
|
||||
<section className="rounded-3xl border border-border/40 bg-background/80 p-6 shadow-2xl backdrop-blur">
|
||||
<h1 className="text-3xl font-semibold text-foreground">Project Board</h1>
|
||||
<p className="mt-1 text-sm text-muted-foreground">Track tasks by status. Drag-and-drop coming next.</p>
|
||||
</section>
|
||||
|
||||
<div className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)]">
|
||||
{columns.map((col) => (
|
||||
<Card key={col.key} className="rounded-3xl border-border/40 bg-background/70 shadow-xl backdrop-blur-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
{col.title}
|
||||
<Badge variant="outline" className="border-border/50 text-xs">{grouped[col.key].length}</Badge>
|
||||
</CardTitle>
|
||||
<CardDescription>{col.hint}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{grouped[col.key].length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No tasks.</p>
|
||||
) : (
|
||||
grouped[col.key].map((t) => (
|
||||
<div key={t.id} className="rounded-2xl border border-border/30 bg-background/60 p-3">
|
||||
<div className="font-medium text-foreground">{t.title}</div>
|
||||
{t.description ? (
|
||||
<p className="text-xs text-muted-foreground mt-1">{t.description}</p>
|
||||
) : null}
|
||||
<div className="mt-2 flex flex-wrap gap-2">
|
||||
{columns.map((k) => (
|
||||
<Button key={`${t.id}-${k.key}`} size="xs" variant="outline" onClick={() => move(t.id, k.key)}>
|
||||
{k.title}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Card className="rounded-3xl border-border/40 bg-background/70 shadow-xl backdrop-blur-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Add task</CardTitle>
|
||||
<CardDescription>Keep titles concise; details optional.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<Input placeholder="Task title" value={title} onChange={(e) => setTitle(e.target.value)} />
|
||||
<Textarea placeholder="Description (optional)" value={description} onChange={(e) => setDescription(e.target.value)} />
|
||||
<div className="flex justify-end">
|
||||
<Button onClick={handleCreate} disabled={creating || !title.trim()} className="rounded-full bg-gradient-to-r from-aethex-500 to-neon-blue text-white">
|
||||
{creating ? "Creating..." : "Create task"}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue