feat: full site build — Project/Melody schema (Option A), admin CRUD, public sections, uploads, email+SMTP, internal analytics, legal pages, docs
This commit is contained in:
@@ -0,0 +1,34 @@
|
||||
import AdminPageHeader from "@/components/admin/admin-page-header";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { getAnalyticsSummary } from "@/lib/analytics";
|
||||
|
||||
const eventLabels: Record<string, string> = {
|
||||
PAGE_VIEW: "Page views",
|
||||
PROJECT_OPEN: "Project opens",
|
||||
MELODY_PLAY: "Melody plays",
|
||||
PROJECT_LINK_CLICK: "Project link clicks",
|
||||
CONTACT_SUBMITTED: "Contact submissions",
|
||||
};
|
||||
|
||||
export default async function AnalyticsPage() {
|
||||
const summary = await getAnalyticsSummary();
|
||||
const grouped = summary.grouped.map((item) => ({ type: item.type, count: item._count._all }));
|
||||
|
||||
return (
|
||||
<div className="mx-auto w-full max-w-7xl">
|
||||
<AdminPageHeader title="Analytics" description="Internal counters from the last 30 days. No third-party analytics service is used." />
|
||||
<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-5">
|
||||
{Object.entries(eventLabels).map(([type, label]) => (
|
||||
<Card key={type}><CardHeader className="pb-3"><CardTitle className="text-sm font-medium text-muted-foreground">{label}</CardTitle></CardHeader><CardContent><p className="text-3xl font-semibold">{grouped.find((item) => item.type === type)?.count ?? 0}</p><p className="mt-1 text-xs text-muted-foreground">Last 30 days</p></CardContent></Card>
|
||||
))}
|
||||
</div>
|
||||
<Card className="mt-6">
|
||||
<CardHeader><CardTitle>Recent events</CardTitle></CardHeader>
|
||||
<CardContent>
|
||||
{summary.recent.length === 0 ? <p className="text-sm text-muted-foreground">No events recorded yet.</p> : <div className="space-y-3">{summary.recent.map((event) => <div key={event.id} className="flex flex-wrap items-center justify-between gap-3 border-b border-border pb-3 text-sm last:border-0 last:pb-0"><span className="font-medium">{eventLabels[event.type] ?? event.type}</span><span className="text-muted-foreground">{event.path || "—"} · {event.createdAt.toLocaleString("en-GB")}</span></div>)}</div>}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<p className="mt-5 text-xs text-muted-foreground">Total events recorded: {summary.total}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import Link from "next/link";
|
||||
import { notFound } from "next/navigation";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import AdminPageHeader from "@/components/admin/admin-page-header";
|
||||
import CategoryForm from "@/components/admin/category-form";
|
||||
import { prisma } from "@/lib/db";
|
||||
|
||||
type EditCategoryPageProps = {
|
||||
params: { id: string };
|
||||
};
|
||||
|
||||
export default async function EditCategoryPage({ params }: EditCategoryPageProps) {
|
||||
const category = await prisma.category.findUnique({ where: { id: params.id } });
|
||||
|
||||
if (!category) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx-auto w-full max-w-7xl">
|
||||
<AdminPageHeader
|
||||
title="Edit category"
|
||||
description={`Update ${category.nameEn} and keep its slug stable for public links.`}
|
||||
actions={
|
||||
<Button asChild variant="outline">
|
||||
<Link href="/admin/categories">Back to categories</Link>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<CategoryForm
|
||||
mode="edit"
|
||||
categoryId={category.id}
|
||||
defaultValues={{
|
||||
kind: category.kind,
|
||||
slug: category.slug,
|
||||
nameAr: category.nameAr,
|
||||
nameEn: category.nameEn,
|
||||
order: category.order,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
"use server";
|
||||
|
||||
import { Prisma } from "@prisma/client";
|
||||
import { revalidatePath } from "next/cache";
|
||||
import { redirect } from "next/navigation";
|
||||
import { auth } from "@/lib/auth";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { categoryIdSchema, categorySchema } from "@/lib/validations/category";
|
||||
|
||||
export type CategoryActionResult = {
|
||||
success?: true;
|
||||
error?: string;
|
||||
};
|
||||
|
||||
async function isAdminAuthenticated() {
|
||||
const session = await auth();
|
||||
return Boolean(session?.user);
|
||||
}
|
||||
|
||||
function getValidationError(error: unknown) {
|
||||
if (error instanceof Prisma.PrismaClientKnownRequestError && error.code === "P2002") {
|
||||
return "A category with this slug already exists.";
|
||||
}
|
||||
|
||||
return "Unable to save the category right now.";
|
||||
}
|
||||
|
||||
export async function createCategory(input: unknown): Promise<CategoryActionResult> {
|
||||
if (!(await isAdminAuthenticated())) {
|
||||
return { error: "Your session has expired. Please sign in again." };
|
||||
}
|
||||
|
||||
const parsed = categorySchema.safeParse(input);
|
||||
|
||||
if (!parsed.success) {
|
||||
return { error: parsed.error.issues[0]?.message ?? "Invalid category data." };
|
||||
}
|
||||
|
||||
try {
|
||||
await prisma.category.create({ data: parsed.data });
|
||||
revalidatePath("/admin/categories");
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
return { error: getValidationError(error) };
|
||||
}
|
||||
}
|
||||
|
||||
export async function updateCategory(categoryId: string, input: unknown): Promise<CategoryActionResult> {
|
||||
if (!(await isAdminAuthenticated())) {
|
||||
return { error: "Your session has expired. Please sign in again." };
|
||||
}
|
||||
|
||||
const validId = categoryIdSchema.safeParse(categoryId);
|
||||
const parsed = categorySchema.safeParse(input);
|
||||
|
||||
if (!validId.success) {
|
||||
return { error: "Invalid category id." };
|
||||
}
|
||||
|
||||
if (!parsed.success) {
|
||||
return { error: parsed.error.issues[0]?.message ?? "Invalid category data." };
|
||||
}
|
||||
|
||||
try {
|
||||
await prisma.category.update({ where: { id: validId.data }, data: parsed.data });
|
||||
revalidatePath("/admin/categories");
|
||||
revalidatePath(`/admin/categories/${validId.data}/edit`);
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
return { error: getValidationError(error) };
|
||||
}
|
||||
}
|
||||
|
||||
export async function deleteCategory(formData: FormData) {
|
||||
if (!(await isAdminAuthenticated())) {
|
||||
redirect("/admin/login");
|
||||
}
|
||||
|
||||
const validId = categoryIdSchema.safeParse(formData.get("categoryId"));
|
||||
|
||||
if (!validId.success) {
|
||||
redirect("/admin/categories?error=invalid-id");
|
||||
}
|
||||
|
||||
try {
|
||||
await prisma.category.delete({ where: { id: validId.data } });
|
||||
} catch (error) {
|
||||
if (error instanceof Prisma.PrismaClientKnownRequestError && error.code === "P2003") {
|
||||
redirect("/admin/categories?error=category-in-use");
|
||||
}
|
||||
|
||||
redirect("/admin/categories?error=delete-failed");
|
||||
}
|
||||
|
||||
revalidatePath("/admin/categories");
|
||||
redirect("/admin/categories");
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import Link from "next/link";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import AdminPageHeader from "@/components/admin/admin-page-header";
|
||||
import CategoryForm from "@/components/admin/category-form";
|
||||
|
||||
export default function NewCategoryPage() {
|
||||
return (
|
||||
<div className="mx-auto w-full max-w-7xl">
|
||||
<AdminPageHeader
|
||||
title="New category"
|
||||
description="Create a category that can be reused across the public content sections."
|
||||
actions={
|
||||
<Button asChild variant="outline">
|
||||
<Link href="/admin/categories">Back to categories</Link>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<CategoryForm
|
||||
mode="create"
|
||||
defaultValues={{ kind: "PROJECT", slug: "", nameAr: "", nameEn: "", order: 0 }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
import Link from "next/link";
|
||||
import { CategoryKind } 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 { deleteCategory } from "@/app/admin/(protected)/categories/actions";
|
||||
import { prisma } from "@/lib/db";
|
||||
|
||||
const kindLabels: Record<CategoryKind, string> = {
|
||||
PROJECT: "Projects",
|
||||
MELODY: "Melodies",
|
||||
};
|
||||
|
||||
type CategoriesPageProps = {
|
||||
searchParams: { error?: string };
|
||||
};
|
||||
|
||||
function getErrorMessage(error?: string) {
|
||||
if (error === "category-in-use") return "This category cannot be deleted while content is linked to it.";
|
||||
if (error === "invalid-id") return "The selected category id is invalid.";
|
||||
if (error === "delete-failed") return "The category could not be deleted.";
|
||||
return null;
|
||||
}
|
||||
|
||||
export default async function CategoriesPage({ searchParams }: CategoriesPageProps) {
|
||||
const categories = await prisma.category.findMany({
|
||||
orderBy: [{ order: "asc" }, { nameEn: "asc" }],
|
||||
include: {
|
||||
_count: {
|
||||
select: { projects: true, melodies: true },
|
||||
},
|
||||
},
|
||||
});
|
||||
const errorMessage = getErrorMessage(searchParams.error);
|
||||
|
||||
return (
|
||||
<div className="mx-auto w-full max-w-7xl">
|
||||
<AdminPageHeader
|
||||
title="Categories"
|
||||
description="Organize projects and melodies into reusable sections."
|
||||
actions={
|
||||
<Button asChild>
|
||||
<Link href="/admin/categories/new">New category</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}
|
||||
|
||||
{categories.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<p className="text-sm text-muted-foreground">No categories yet. Create the first one to organize content.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
{categories.map((category) => (
|
||||
<Card key={category.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">
|
||||
{kindLabels[category.kind]}
|
||||
</p>
|
||||
<CardTitle className="mt-2 text-lg">{category.nameEn}</CardTitle>
|
||||
<p className="mt-1 text-sm text-muted-foreground" dir="rtl">
|
||||
{category.nameAr}
|
||||
</p>
|
||||
</div>
|
||||
<span className="rounded-pill border border-border px-2 py-1 text-xs text-muted-foreground">
|
||||
#{category.order}
|
||||
</span>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-xs text-muted-foreground">/{category.slug}</p>
|
||||
<p className="mt-3 text-sm text-muted-foreground">
|
||||
{category._count.projects + category._count.melodies} linked items
|
||||
</p>
|
||||
<div className="mt-5 flex items-center gap-2">
|
||||
<Button asChild size="sm" variant="outline">
|
||||
<Link href={`/admin/categories/${category.id}/edit`}>Edit</Link>
|
||||
</Button>
|
||||
<form action={deleteCategory}>
|
||||
<input type="hidden" name="categoryId" value={category.id} />
|
||||
<Button type="submit" size="sm" variant="ghost">
|
||||
Delete
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import type { ReactNode } from "react";
|
||||
import { redirect } from "next/navigation";
|
||||
import AdminShell from "@/components/admin/admin-shell";
|
||||
import { auth, signOut } from "@/lib/auth";
|
||||
|
||||
export default async function AdminProtectedLayout({ children }: { children: ReactNode }) {
|
||||
const session = await auth();
|
||||
|
||||
if (!session?.user) {
|
||||
redirect("/admin/login");
|
||||
}
|
||||
|
||||
async function handleSignOut() {
|
||||
"use server";
|
||||
await signOut({ redirectTo: "/admin/login" });
|
||||
}
|
||||
|
||||
return (
|
||||
<AdminShell userEmail={session.user.email ?? "Admin"} signOutAction={handleSignOut}>
|
||||
{children}
|
||||
</AdminShell>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import Link from "next/link";
|
||||
import { notFound } from "next/navigation";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import AdminPageHeader from "@/components/admin/admin-page-header";
|
||||
import MelodyForm from "@/components/admin/melody-form";
|
||||
import { prisma } from "@/lib/db";
|
||||
import type { MelodyInput } from "@/lib/validations/melody";
|
||||
|
||||
export default async function EditMelodyPage({ params }: { params: { id: string } }) {
|
||||
const [melody, categories] = await Promise.all([
|
||||
prisma.melody.findUnique({ where: { id: params.id } }),
|
||||
prisma.category.findMany({ where: { kind: "MELODY" }, orderBy: [{ order: "asc" }, { nameEn: "asc" }], select: { id: true, nameAr: true, nameEn: true } }),
|
||||
]);
|
||||
if (!melody) notFound();
|
||||
const defaultValues: MelodyInput = {
|
||||
slug: melody.slug, titleAr: melody.titleAr, titleEn: melody.titleEn, descAr: melody.descAr ?? "", descEn: melody.descEn ?? "",
|
||||
audioFile: melody.audioFile, coverImage: melody.coverImage ?? "", durationSec: melody.durationSec, isDownloadable: melody.isDownloadable,
|
||||
status: melody.status, isFeatured: melody.isFeatured, sortOrder: melody.sortOrder, categoryId: melody.categoryId,
|
||||
};
|
||||
return <div className="mx-auto w-full max-w-7xl"><AdminPageHeader title={`Edit ${melody.titleEn}`} description="Update the audio, artwork, category, and public visibility settings." actions={<Button asChild variant="outline"><Link href="/admin/melodies">Back to melodies</Link></Button>} /><MelodyForm mode="edit" melodyId={melody.id} categories={categories} defaultValues={defaultValues} /></div>;
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
"use server";
|
||||
|
||||
import { Prisma } from "@prisma/client";
|
||||
import { revalidatePath } from "next/cache";
|
||||
import { redirect } from "next/navigation";
|
||||
import { auth } from "@/lib/auth";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { melodyIdSchema, melodySchema } from "@/lib/validations/melody";
|
||||
|
||||
export type MelodyActionResult = {
|
||||
success?: true;
|
||||
error?: string;
|
||||
};
|
||||
|
||||
async function isAdminAuthenticated() {
|
||||
const session = await auth();
|
||||
return Boolean(session?.user);
|
||||
}
|
||||
|
||||
function getActionError(error: unknown) {
|
||||
if (error instanceof Prisma.PrismaClientKnownRequestError && error.code === "P2002") {
|
||||
return "A melody with this slug already exists.";
|
||||
}
|
||||
|
||||
return "Unable to save the melody right now.";
|
||||
}
|
||||
|
||||
async function hasMelodyCategory(categoryId: string) {
|
||||
const category = await prisma.category.findFirst({
|
||||
where: { id: categoryId, kind: "MELODY" },
|
||||
select: { id: true },
|
||||
});
|
||||
return Boolean(category);
|
||||
}
|
||||
|
||||
function normalizeMelodyInput(input: unknown) {
|
||||
const parsed = melodySchema.safeParse(input);
|
||||
if (!parsed.success) {
|
||||
return { error: parsed.error.issues[0]?.message ?? "Invalid melody data." } as const;
|
||||
}
|
||||
|
||||
return {
|
||||
data: {
|
||||
...parsed.data,
|
||||
descAr: parsed.data.descAr || null,
|
||||
descEn: parsed.data.descEn || null,
|
||||
coverImage: parsed.data.coverImage || null,
|
||||
},
|
||||
} as const;
|
||||
}
|
||||
|
||||
export async function createMelody(input: unknown): Promise<MelodyActionResult> {
|
||||
if (!(await isAdminAuthenticated())) {
|
||||
return { error: "Your session has expired. Please sign in again." };
|
||||
}
|
||||
|
||||
const normalized = normalizeMelodyInput(input);
|
||||
if ("error" in normalized) return normalized;
|
||||
if (!(await hasMelodyCategory(normalized.data.categoryId))) {
|
||||
return { error: "Choose a valid melody category." };
|
||||
}
|
||||
|
||||
try {
|
||||
await prisma.melody.create({ data: normalized.data });
|
||||
revalidatePath("/admin/melodies");
|
||||
revalidatePath("/en/melodies");
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
return { error: getActionError(error) };
|
||||
}
|
||||
}
|
||||
|
||||
export async function updateMelody(melodyId: string, input: unknown): Promise<MelodyActionResult> {
|
||||
if (!(await isAdminAuthenticated())) {
|
||||
return { error: "Your session has expired. Please sign in again." };
|
||||
}
|
||||
|
||||
const validId = melodyIdSchema.safeParse(melodyId);
|
||||
if (!validId.success) return { error: "Invalid melody id." };
|
||||
|
||||
const normalized = normalizeMelodyInput(input);
|
||||
if ("error" in normalized) return normalized;
|
||||
if (!(await hasMelodyCategory(normalized.data.categoryId))) {
|
||||
return { error: "Choose a valid melody category." };
|
||||
}
|
||||
|
||||
try {
|
||||
await prisma.melody.update({ where: { id: validId.data }, data: normalized.data });
|
||||
revalidatePath("/admin/melodies");
|
||||
revalidatePath(`/admin/melodies/${validId.data}/edit`);
|
||||
revalidatePath("/en/melodies");
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
return { error: getActionError(error) };
|
||||
}
|
||||
}
|
||||
|
||||
export async function deleteMelody(formData: FormData) {
|
||||
if (!(await isAdminAuthenticated())) redirect("/admin/login");
|
||||
|
||||
const validId = melodyIdSchema.safeParse(formData.get("melodyId"));
|
||||
if (!validId.success) redirect("/admin/melodies?error=invalid-id");
|
||||
|
||||
try {
|
||||
await prisma.melody.delete({ where: { id: validId.data } });
|
||||
} catch (error) {
|
||||
if (error instanceof Prisma.PrismaClientKnownRequestError && error.code === "P2025") {
|
||||
redirect("/admin/melodies?error=not-found");
|
||||
}
|
||||
redirect("/admin/melodies?error=delete-failed");
|
||||
}
|
||||
|
||||
revalidatePath("/admin/melodies");
|
||||
revalidatePath("/en/melodies");
|
||||
redirect("/admin/melodies");
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import Link from "next/link";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import AdminPageHeader from "@/components/admin/admin-page-header";
|
||||
import MelodyForm from "@/components/admin/melody-form";
|
||||
import { prisma } from "@/lib/db";
|
||||
import type { MelodyInput } from "@/lib/validations/melody";
|
||||
|
||||
export default async function NewMelodyPage() {
|
||||
const categories = await prisma.category.findMany({ where: { kind: "MELODY" }, orderBy: [{ order: "asc" }, { nameEn: "asc" }], select: { id: true, nameAr: true, nameEn: true } });
|
||||
const defaultValues: MelodyInput = {
|
||||
slug: "", titleAr: "", titleEn: "", descAr: "", descEn: "", audioFile: "", coverImage: "", durationSec: null,
|
||||
isDownloadable: false, status: "DRAFT", isFeatured: false, sortOrder: 0, categoryId: "",
|
||||
};
|
||||
|
||||
return <div className="mx-auto w-full max-w-7xl"><AdminPageHeader title="New melody" description="Create an audio track with its cover, category, and publishing controls." actions={<Button asChild variant="outline"><Link href="/admin/melodies">Back to melodies</Link></Button>} /><MelodyForm mode="create" categories={categories} defaultValues={defaultValues} /></div>;
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
import Link from "next/link";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import AdminPageHeader from "@/components/admin/admin-page-header";
|
||||
import { deleteMelody } from "@/app/admin/(protected)/melodies/actions";
|
||||
import { prisma } from "@/lib/db";
|
||||
|
||||
type MelodiesPageProps = { searchParams: { error?: string } };
|
||||
|
||||
function getErrorMessage(error?: string) {
|
||||
if (error === "invalid-id") return "The selected melody id is invalid.";
|
||||
if (error === "not-found") return "The selected melody no longer exists.";
|
||||
if (error === "delete-failed") return "The melody could not be deleted.";
|
||||
return null;
|
||||
}
|
||||
|
||||
export default async function MelodiesPage({ searchParams }: MelodiesPageProps) {
|
||||
const melodies = await prisma.melody.findMany({
|
||||
orderBy: [{ isFeatured: "desc" }, { 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="Melodies" description="Manage audio tracks, cover art, categories, publishing, and download permissions." actions={<Button asChild><Link href="/admin/melodies/new">New melody</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}
|
||||
{melodies.length === 0 ? (
|
||||
<Card><CardContent className="p-6"><p className="text-sm text-muted-foreground">No melodies yet.</p></CardContent></Card>
|
||||
) : (
|
||||
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
{melodies.map((melody) => (
|
||||
<Card key={melody.id}>
|
||||
<CardHeader className="flex-row items-start justify-between gap-4 space-y-0">
|
||||
<div><CardTitle className="text-lg">{melody.titleEn}</CardTitle><p className="mt-1 text-sm text-muted-foreground" dir="rtl">{melody.titleAr}</p></div>
|
||||
<span className="rounded-pill border border-border px-2 py-1 text-xs text-muted-foreground">{melody.status}</span>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-xs text-muted-foreground">/{melody.slug}</p>
|
||||
<p className="mt-2 text-sm text-muted-foreground">{melody.category.nameEn} · {melody.category.nameAr}</p>
|
||||
<p className="mt-2 text-xs text-muted-foreground">{melody.durationSec ? `${melody.durationSec}s` : "No duration"} · {melody.isDownloadable ? "Download enabled" : "Streaming only"}</p>
|
||||
<div className="mt-5 flex items-center gap-2">
|
||||
<Button asChild size="sm" variant="outline"><Link href={`/admin/melodies/${melody.id}/edit`}>Edit</Link></Button>
|
||||
<form action={deleteMelody}><input type="hidden" name="melodyId" value={melody.id} /><Button type="submit" size="sm" variant="ghost">Delete</Button></form>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import { redirect } from "next/navigation";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import AdminPageHeader from "@/components/admin/admin-page-header";
|
||||
import { auth } from "@/lib/auth";
|
||||
|
||||
export default async function AdminPage() {
|
||||
const session = await auth();
|
||||
|
||||
if (!session?.user) {
|
||||
redirect("/admin/login");
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx-auto w-full max-w-7xl">
|
||||
<AdminPageHeader
|
||||
title="Dashboard"
|
||||
description="Manage the content that will power the public website."
|
||||
/>
|
||||
|
||||
<section aria-label="Workspace overview" className="grid gap-4 md:grid-cols-3">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">Signed-in account</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="truncate text-sm text-muted-foreground">{session.user.email}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">Content status</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">Coming soon mode is active.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">Next step</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">Categories and content tools are next.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import Link from "next/link";
|
||||
import { notFound } from "next/navigation";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import AdminPageHeader from "@/components/admin/admin-page-header";
|
||||
import ProjectForm from "@/components/admin/project-form";
|
||||
import { prisma } from "@/lib/db";
|
||||
import type { ProjectInput } from "@/lib/validations/project";
|
||||
|
||||
export default async function EditProjectPage({ params }: { params: { id: string } }) {
|
||||
const [project, categories] = await Promise.all([
|
||||
prisma.project.findUnique({ where: { id: params.id } }),
|
||||
prisma.category.findMany({
|
||||
where: { kind: "PROJECT" },
|
||||
orderBy: [{ order: "asc" }, { nameEn: "asc" }],
|
||||
select: { id: true, nameAr: true, nameEn: true },
|
||||
}),
|
||||
]);
|
||||
|
||||
if (!project) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const defaultValues: ProjectInput = {
|
||||
type: project.type,
|
||||
slug: project.slug,
|
||||
titleAr: project.titleAr,
|
||||
titleEn: project.titleEn,
|
||||
summaryAr: project.summaryAr ?? "",
|
||||
summaryEn: project.summaryEn ?? "",
|
||||
descAr: project.descAr ?? "",
|
||||
descEn: project.descEn ?? "",
|
||||
coverImage: project.coverImage ?? "",
|
||||
images: project.images,
|
||||
technologies: project.technologies,
|
||||
externalUrl: project.externalUrl ?? "",
|
||||
repoUrl: project.repoUrl ?? "",
|
||||
platform: project.platform ?? "",
|
||||
appStoreUrl: project.appStoreUrl ?? "",
|
||||
testflightUrl: project.testflightUrl ?? "",
|
||||
appVersion: project.appVersion ?? "",
|
||||
supportUrl: project.supportUrl ?? "",
|
||||
appPrivacyUrl: project.appPrivacyUrl ?? "",
|
||||
status: project.status,
|
||||
isFeatured: project.isFeatured,
|
||||
sortOrder: project.sortOrder,
|
||||
categoryId: project.categoryId ?? "",
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mx-auto w-full max-w-7xl">
|
||||
<AdminPageHeader
|
||||
title={`Edit ${project.titleEn}`}
|
||||
description="Update the project details, media paths, category, and public visibility settings."
|
||||
actions={
|
||||
<Button asChild variant="outline">
|
||||
<Link href="/admin/projects">Back to projects</Link>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<ProjectForm mode="edit" projectId={project.id} categories={categories} defaultValues={defaultValues} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
"use server";
|
||||
|
||||
import { Prisma } from "@prisma/client";
|
||||
import { revalidatePath } from "next/cache";
|
||||
import { redirect } from "next/navigation";
|
||||
import { auth } from "@/lib/auth";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { projectIdSchema, projectSchema } from "@/lib/validations/project";
|
||||
|
||||
export type ProjectActionResult = {
|
||||
success?: true;
|
||||
error?: string;
|
||||
};
|
||||
|
||||
async function isAdminAuthenticated() {
|
||||
const session = await auth();
|
||||
return Boolean(session?.user);
|
||||
}
|
||||
|
||||
function getActionError(error: unknown) {
|
||||
if (error instanceof Prisma.PrismaClientKnownRequestError && error.code === "P2002") {
|
||||
return "A project with this slug already exists.";
|
||||
}
|
||||
|
||||
return "Unable to save the project right now.";
|
||||
}
|
||||
|
||||
async function validateProjectCategory(categoryId: string | undefined) {
|
||||
if (!categoryId) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const category = await prisma.category.findFirst({
|
||||
where: { id: categoryId, kind: "PROJECT" },
|
||||
select: { id: true },
|
||||
});
|
||||
|
||||
return category?.id ?? false;
|
||||
}
|
||||
|
||||
function normalizeProjectInput(input: unknown) {
|
||||
const parsed = projectSchema.safeParse(input);
|
||||
if (!parsed.success) {
|
||||
return { error: parsed.error.issues[0]?.message ?? "Invalid project data." } as const;
|
||||
}
|
||||
|
||||
return {
|
||||
data: {
|
||||
...parsed.data,
|
||||
categoryId: parsed.data.categoryId || null,
|
||||
coverImage: parsed.data.coverImage || null,
|
||||
summaryAr: parsed.data.summaryAr || null,
|
||||
summaryEn: parsed.data.summaryEn || null,
|
||||
descAr: parsed.data.descAr || null,
|
||||
descEn: parsed.data.descEn || null,
|
||||
externalUrl: parsed.data.externalUrl || null,
|
||||
repoUrl: parsed.data.repoUrl || null,
|
||||
platform: parsed.data.platform || null,
|
||||
appStoreUrl: parsed.data.appStoreUrl || null,
|
||||
testflightUrl: parsed.data.testflightUrl || null,
|
||||
appVersion: parsed.data.appVersion || null,
|
||||
supportUrl: parsed.data.supportUrl || null,
|
||||
appPrivacyUrl: parsed.data.appPrivacyUrl || null,
|
||||
},
|
||||
} as const;
|
||||
}
|
||||
|
||||
export async function createProject(input: unknown): Promise<ProjectActionResult> {
|
||||
if (!(await isAdminAuthenticated())) {
|
||||
return { error: "Your session has expired. Please sign in again." };
|
||||
}
|
||||
|
||||
const normalized = normalizeProjectInput(input);
|
||||
if ("error" in normalized) {
|
||||
return normalized;
|
||||
}
|
||||
|
||||
if ((await validateProjectCategory(normalized.data.categoryId ?? undefined)) === false) {
|
||||
return { error: "Choose a valid project category." };
|
||||
}
|
||||
|
||||
try {
|
||||
await prisma.project.create({ data: normalized.data });
|
||||
revalidatePath("/admin/projects");
|
||||
revalidatePath("/en/work");
|
||||
revalidatePath("/en/apps");
|
||||
revalidatePath("/en/websites");
|
||||
revalidatePath("/en/designs");
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
return { error: getActionError(error) };
|
||||
}
|
||||
}
|
||||
|
||||
export async function updateProject(projectId: string, input: unknown): Promise<ProjectActionResult> {
|
||||
if (!(await isAdminAuthenticated())) {
|
||||
return { error: "Your session has expired. Please sign in again." };
|
||||
}
|
||||
|
||||
const validId = projectIdSchema.safeParse(projectId);
|
||||
if (!validId.success) {
|
||||
return { error: "Invalid project id." };
|
||||
}
|
||||
|
||||
const normalized = normalizeProjectInput(input);
|
||||
if ("error" in normalized) {
|
||||
return normalized;
|
||||
}
|
||||
|
||||
if ((await validateProjectCategory(normalized.data.categoryId ?? undefined)) === false) {
|
||||
return { error: "Choose a valid project category." };
|
||||
}
|
||||
|
||||
try {
|
||||
await prisma.project.update({ where: { id: validId.data }, data: normalized.data });
|
||||
revalidatePath("/admin/projects");
|
||||
revalidatePath(`/admin/projects/${validId.data}/edit`);
|
||||
revalidatePath("/en/work");
|
||||
revalidatePath("/en/apps");
|
||||
revalidatePath("/en/websites");
|
||||
revalidatePath("/en/designs");
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
return { error: getActionError(error) };
|
||||
}
|
||||
}
|
||||
|
||||
export async function deleteProject(formData: FormData) {
|
||||
if (!(await isAdminAuthenticated())) {
|
||||
redirect("/admin/login");
|
||||
}
|
||||
|
||||
const validId = projectIdSchema.safeParse(formData.get("projectId"));
|
||||
if (!validId.success) {
|
||||
redirect("/admin/projects?error=invalid-id");
|
||||
}
|
||||
|
||||
try {
|
||||
await prisma.project.delete({ where: { id: validId.data } });
|
||||
} catch (error) {
|
||||
if (error instanceof Prisma.PrismaClientKnownRequestError && error.code === "P2025") {
|
||||
redirect("/admin/projects?error=not-found");
|
||||
}
|
||||
|
||||
redirect("/admin/projects?error=delete-failed");
|
||||
}
|
||||
|
||||
revalidatePath("/admin/projects");
|
||||
redirect("/admin/projects");
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import Link from "next/link";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import AdminPageHeader from "@/components/admin/admin-page-header";
|
||||
import ProjectForm from "@/components/admin/project-form";
|
||||
import { prisma } from "@/lib/db";
|
||||
import type { ProjectInput } from "@/lib/validations/project";
|
||||
|
||||
export default async function NewProjectPage() {
|
||||
const categories = await prisma.category.findMany({
|
||||
where: { kind: "PROJECT" },
|
||||
orderBy: [{ order: "asc" }, { nameEn: "asc" }],
|
||||
select: { id: true, nameAr: true, nameEn: true },
|
||||
});
|
||||
|
||||
const defaultValues: ProjectInput = {
|
||||
type: "PORTFOLIO",
|
||||
slug: "",
|
||||
titleAr: "",
|
||||
titleEn: "",
|
||||
summaryAr: "",
|
||||
summaryEn: "",
|
||||
descAr: "",
|
||||
descEn: "",
|
||||
coverImage: "",
|
||||
images: [],
|
||||
technologies: [],
|
||||
externalUrl: "",
|
||||
repoUrl: "",
|
||||
platform: "",
|
||||
appStoreUrl: "",
|
||||
testflightUrl: "",
|
||||
appVersion: "",
|
||||
supportUrl: "",
|
||||
appPrivacyUrl: "",
|
||||
status: "DRAFT",
|
||||
isFeatured: false,
|
||||
sortOrder: 0,
|
||||
categoryId: "",
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mx-auto w-full max-w-7xl">
|
||||
<AdminPageHeader
|
||||
title="New project"
|
||||
description="Create a project or app record with media, links, category, and publishing controls."
|
||||
actions={
|
||||
<Button asChild variant="outline">
|
||||
<Link href="/admin/projects">Back to projects</Link>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<ProjectForm mode="create" categories={categories} defaultValues={defaultValues} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user