feat(admin): projects page seeding a full board on create
This commit is contained in:
parent
6d0a9c4852
commit
5cd74762fe
2 changed files with 217 additions and 0 deletions
59
src/app/admin/projects/page.tsx
Normal file
59
src/app/admin/projects/page.tsx
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
import Link from "next/link";
|
||||
|
||||
import { AppShell } from "@/components/shell/app-shell";
|
||||
import { TopBar } from "@/components/shell/top-bar";
|
||||
import { AdminTable, AdminCell } from "@/components/admin/admin-table";
|
||||
import { NewProjectForm } from "@/components/admin/project-form";
|
||||
import { Pill } from "@/components/ui/pill";
|
||||
import { loadClientOptions, loadProjectsAdmin } from "@/lib/data/admin";
|
||||
|
||||
export default async function AdminProjectsPage() {
|
||||
const [rows, clients] = await Promise.all([
|
||||
loadProjectsAdmin(),
|
||||
loadClientOptions(),
|
||||
]);
|
||||
|
||||
return (
|
||||
<AppShell role="owner" currentPath="/admin/projects">
|
||||
<TopBar title="Projects" subtitle="One project, one repository" />
|
||||
|
||||
<div className="flex-1 space-y-4 overflow-y-auto p-6">
|
||||
<NewProjectForm clients={clients} />
|
||||
|
||||
<AdminTable
|
||||
headers={["Project", "Client", "Repository", "Cards", "Status"]}
|
||||
empty="No projects yet."
|
||||
>
|
||||
{rows.map(({ project, client, cardCount }) => (
|
||||
<tr key={project.id}>
|
||||
<AdminCell>
|
||||
<Link
|
||||
href={`/p/${client.slug}/${project.slug}`}
|
||||
className="font-medium text-text-primary hover:text-brand"
|
||||
>
|
||||
{project.name}
|
||||
</Link>
|
||||
</AdminCell>
|
||||
<AdminCell>{client.name}</AdminCell>
|
||||
<AdminCell>
|
||||
{project.repo_owner && project.repo_name ? (
|
||||
<code className="text-xs">
|
||||
{project.repo_owner}/{project.repo_name}
|
||||
</code>
|
||||
) : (
|
||||
<span className="text-xs text-text-muted">Not linked</span>
|
||||
)}
|
||||
</AdminCell>
|
||||
<AdminCell className="tabular">{cardCount}</AdminCell>
|
||||
<AdminCell>
|
||||
<Pill tone={project.status === "active" ? "brand" : "neutral"}>
|
||||
{project.status}
|
||||
</Pill>
|
||||
</AdminCell>
|
||||
</tr>
|
||||
))}
|
||||
</AdminTable>
|
||||
</div>
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
158
src/components/admin/project-form.tsx
Normal file
158
src/components/admin/project-form.tsx
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
"use client";
|
||||
|
||||
import { useState, useTransition } from "react";
|
||||
import { Plus } from "lucide-react";
|
||||
|
||||
import { createProject } from "@/app/actions/projects";
|
||||
import type { ClientRecord } from "@/lib/pb/types";
|
||||
|
||||
export function NewProjectForm({ clients }: { clients: ClientRecord[] }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [clientId, setClientId] = useState(clients[0]?.id ?? "");
|
||||
const [name, setName] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [repoOwner, setRepoOwner] = useState("");
|
||||
const [repoName, setRepoName] = useState("");
|
||||
const [pending, startTransition] = useTransition();
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
if (clients.length === 0) {
|
||||
return (
|
||||
<p className="text-xs text-text-muted">Create a client first.</p>
|
||||
);
|
||||
}
|
||||
|
||||
function submit(event: React.FormEvent) {
|
||||
event.preventDefault();
|
||||
if (!name.trim() || !clientId) return;
|
||||
setError(null);
|
||||
|
||||
startTransition(async () => {
|
||||
try {
|
||||
await createProject({
|
||||
clientId,
|
||||
name,
|
||||
description,
|
||||
repoOwner,
|
||||
repoName,
|
||||
color: "#2f6dad",
|
||||
});
|
||||
setName("");
|
||||
setDescription("");
|
||||
setRepoOwner("");
|
||||
setRepoName("");
|
||||
setOpen(false);
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "Could not create that project");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (!open) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(true)}
|
||||
className="inline-flex items-center gap-1.5 rounded-lg bg-brand px-3 py-1.5 text-sm font-medium text-brand-fg transition-colors hover:bg-brand-hover"
|
||||
>
|
||||
<Plus size={14} strokeWidth={2} />
|
||||
New project
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
const field =
|
||||
"w-full rounded-lg border border-border-subtle bg-panel px-3 py-2 text-sm text-text-primary outline-none focus:border-brand";
|
||||
|
||||
return (
|
||||
<form
|
||||
onSubmit={submit}
|
||||
className="w-full space-y-3 rounded-[var(--radius-tile)] border border-border-subtle bg-surface p-4"
|
||||
>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<label className="space-y-1">
|
||||
<span className="text-xs text-text-muted">Client</span>
|
||||
<select
|
||||
value={clientId}
|
||||
onChange={(event) => setClientId(event.target.value)}
|
||||
className={field}
|
||||
>
|
||||
{clients.map((client) => (
|
||||
<option key={client.id} value={client.id}>
|
||||
{client.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="space-y-1">
|
||||
<span className="text-xs text-text-muted">Project name</span>
|
||||
<input
|
||||
autoFocus
|
||||
value={name}
|
||||
onChange={(event) => setName(event.target.value)}
|
||||
className={field}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label className="block space-y-1">
|
||||
<span className="text-xs text-text-muted">Description</span>
|
||||
<textarea
|
||||
rows={2}
|
||||
value={description}
|
||||
onChange={(event) => setDescription(event.target.value)}
|
||||
className={field}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<label className="space-y-1">
|
||||
<span className="text-xs text-text-muted">
|
||||
Repository owner{" "}
|
||||
<span className="text-text-muted">(used from Phase 2)</span>
|
||||
</span>
|
||||
<input
|
||||
value={repoOwner}
|
||||
onChange={(event) => setRepoOwner(event.target.value)}
|
||||
placeholder="David"
|
||||
className={field}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="space-y-1">
|
||||
<span className="text-xs text-text-muted">Repository name</span>
|
||||
<input
|
||||
value={repoName}
|
||||
onChange={(event) => setRepoName(event.target.value)}
|
||||
placeholder="WFDASH-WEBAPP"
|
||||
className={field}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p role="alert" className="text-xs text-accent">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={pending || !name.trim()}
|
||||
className="rounded-lg bg-brand px-3 py-2 text-sm font-medium text-brand-fg disabled:opacity-50"
|
||||
>
|
||||
{pending ? "Creating…" : "Create project"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(false)}
|
||||
className="px-2 py-2 text-sm text-text-muted hover:text-text-secondary"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue