114 lines
4.6 KiB
TypeScript
114 lines
4.6 KiB
TypeScript
import Link from "next/link";
|
|
import { ProjectType } from "@prisma/client";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import AdminPageHeader from "@/components/admin/admin-page-header";
|
|
import { deleteProject } from "@/app/admin/(protected)/projects/actions";
|
|
import { prisma } from "@/lib/db";
|
|
import { projectTypeFilterSchema } from "@/lib/validations/project";
|
|
|
|
const typeLabels: Record<ProjectType, string> = {
|
|
PORTFOLIO: "Portfolio",
|
|
APP: "App",
|
|
WEBSITE: "Website",
|
|
DESIGN: "Design",
|
|
};
|
|
|
|
type ProjectsPageProps = {
|
|
searchParams: { type?: string; error?: string };
|
|
};
|
|
|
|
function getErrorMessage(error?: string) {
|
|
if (error === "invalid-id") return "The selected project id is invalid.";
|
|
if (error === "not-found") return "The selected project no longer exists.";
|
|
if (error === "delete-failed") return "The project could not be deleted.";
|
|
return null;
|
|
}
|
|
|
|
export default async function ProjectsPage({ searchParams }: ProjectsPageProps) {
|
|
const type = projectTypeFilterSchema.safeParse(searchParams.type);
|
|
const selectedType = type.success ? type.data : undefined;
|
|
const projects = await prisma.project.findMany({
|
|
where: selectedType ? { type: selectedType } : undefined,
|
|
orderBy: [{ sortOrder: "asc" }, { updatedAt: "desc" }],
|
|
include: { category: { select: { nameEn: true, nameAr: true } } },
|
|
});
|
|
const errorMessage = getErrorMessage(searchParams.error);
|
|
|
|
return (
|
|
<div className="mx-auto w-full max-w-7xl">
|
|
<AdminPageHeader
|
|
title="Projects"
|
|
description="Manage portfolio work, apps, websites, designs, and the project records used by public pages."
|
|
actions={
|
|
<Button asChild>
|
|
<Link href="/admin/projects/new">New project</Link>
|
|
</Button>
|
|
}
|
|
/>
|
|
|
|
{errorMessage ? (
|
|
<p className="mb-6 rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive">
|
|
{errorMessage}
|
|
</p>
|
|
) : null}
|
|
|
|
<div className="mb-6 flex flex-wrap gap-2">
|
|
<Button asChild size="sm" variant={!selectedType ? "default" : "outline"}>
|
|
<Link href="/admin/projects">All</Link>
|
|
</Button>
|
|
{Object.entries(typeLabels).map(([value, label]) => (
|
|
<Button key={value} asChild size="sm" variant={selectedType === value ? "default" : "outline"}>
|
|
<Link href={`/admin/projects?type=${value}`}>{label}</Link>
|
|
</Button>
|
|
))}
|
|
</div>
|
|
|
|
{projects.length === 0 ? (
|
|
<Card>
|
|
<CardContent className="p-6">
|
|
<p className="text-sm text-muted-foreground">No projects match this filter yet.</p>
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
|
{projects.map((project) => (
|
|
<Card key={project.id}>
|
|
<CardHeader className="flex-row items-start justify-between gap-4 space-y-0">
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-[0.14em] text-brand-2">{typeLabels[project.type]}</p>
|
|
<CardTitle className="mt-2 text-lg">{project.titleEn}</CardTitle>
|
|
<p className="mt-1 text-sm text-muted-foreground" dir="rtl">
|
|
{project.titleAr}
|
|
</p>
|
|
</div>
|
|
<span className="rounded-pill border border-border px-2 py-1 text-xs text-muted-foreground">{project.status}</span>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-xs text-muted-foreground">/{project.slug}</p>
|
|
<p className="mt-2 text-sm text-muted-foreground">
|
|
{project.category ? `${project.category.nameEn} · ${project.category.nameAr}` : "No category"}
|
|
</p>
|
|
<p className="mt-2 text-xs text-muted-foreground">
|
|
{project.images.length} images · {project.technologies.length} technologies
|
|
</p>
|
|
<div className="mt-5 flex items-center gap-2">
|
|
<Button asChild size="sm" variant="outline">
|
|
<Link href={`/admin/projects/${project.id}/edit`}>Edit</Link>
|
|
</Button>
|
|
<form action={deleteProject}>
|
|
<input type="hidden" name="projectId" value={project.id} />
|
|
<Button type="submit" size="sm" variant="ghost">
|
|
Delete
|
|
</Button>
|
|
</form>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|