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,36 @@
|
||||
"use client";
|
||||
|
||||
import type { ReactNode } from "react";
|
||||
import type { FieldValues, SubmitHandler, UseFormReturn } from "react-hook-form";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Form } from "@/components/ui/form";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type AdminFormProps<TFieldValues extends FieldValues> = {
|
||||
form: UseFormReturn<TFieldValues>;
|
||||
onSubmit: SubmitHandler<TFieldValues>;
|
||||
children: ReactNode;
|
||||
submitLabel: string;
|
||||
submittingLabel?: string;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export default function AdminForm<TFieldValues extends FieldValues>({
|
||||
form,
|
||||
onSubmit,
|
||||
children,
|
||||
submitLabel,
|
||||
submittingLabel = "Saving…",
|
||||
className,
|
||||
}: AdminFormProps<TFieldValues>) {
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className={cn("space-y-5", className)} noValidate>
|
||||
{children}
|
||||
<Button type="submit" disabled={form.formState.isSubmitting}>
|
||||
{form.formState.isSubmitting ? submittingLabel : submitLabel}
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
type AdminPageHeaderProps = {
|
||||
eyebrow?: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
actions?: ReactNode;
|
||||
};
|
||||
|
||||
export default function AdminPageHeader({ eyebrow = "Admin workspace", title, description, actions }: AdminPageHeaderProps) {
|
||||
return (
|
||||
<header className="mb-8 flex flex-col gap-4 border-b border-border pb-6 sm:flex-row sm:items-end sm:justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.16em] text-brand-2">{eyebrow}</p>
|
||||
<h1 className="mt-2 text-3xl font-semibold tracking-tight">{title}</h1>
|
||||
{description ? <p className="mt-2 max-w-2xl text-sm text-muted-foreground">{description}</p> : null}
|
||||
</div>
|
||||
{actions ? <div className="flex shrink-0 items-center gap-2">{actions}</div> : null}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import type { ReactNode } from "react";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
type AdminShellProps = {
|
||||
children: ReactNode;
|
||||
userEmail: string;
|
||||
signOutAction: (formData: FormData) => Promise<void>;
|
||||
};
|
||||
|
||||
const navigation = [
|
||||
{ label: "Dashboard", href: "/admin" },
|
||||
{ label: "Categories", href: "/admin/categories" },
|
||||
{ label: "Projects", href: "/admin/projects" },
|
||||
{ label: "Apps", href: "/admin/projects?type=APP" },
|
||||
{ label: "Melodies", href: "/admin/melodies" },
|
||||
{ label: "Analytics", href: "/admin/analytics" },
|
||||
{ label: "Media", active: false },
|
||||
];
|
||||
|
||||
export default function AdminShell({ children, userEmail, signOutAction }: AdminShellProps) {
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background text-foreground lg:grid lg:grid-cols-[16rem_minmax(0,1fr)]">
|
||||
<aside className="border-b border-border bg-card lg:sticky lg:top-0 lg:h-screen lg:border-b-0 lg:border-e">
|
||||
<div className="flex h-full flex-col gap-8 p-5 sm:p-6 lg:p-5">
|
||||
<div>
|
||||
<Link href="/admin" className="text-lg font-bold tracking-tight">
|
||||
Diyaa Admin
|
||||
</Link>
|
||||
<p className="mt-1 text-sm text-muted-foreground">Content workspace</p>
|
||||
</div>
|
||||
|
||||
<nav aria-label="Admin navigation" className="grid gap-1">
|
||||
{navigation.map((item) =>
|
||||
item.href ? (
|
||||
<Link
|
||||
key={item.label}
|
||||
href={item.href ?? "/admin"}
|
||||
className={
|
||||
pathname === item.href.split("?")[0] || (item.href.split("?")[0] !== "/admin" && pathname.startsWith(`${item.href.split("?")[0]}/`))
|
||||
? "rounded-md bg-accent px-3 py-2 text-sm font-medium text-accent-foreground"
|
||||
: "rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
|
||||
}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
) : (
|
||||
<span
|
||||
key={item.label}
|
||||
aria-disabled="true"
|
||||
className="flex cursor-not-allowed items-center justify-between rounded-md px-3 py-2 text-sm text-muted-foreground opacity-60"
|
||||
>
|
||||
{item.label}
|
||||
<span className="text-xs">Soon</span>
|
||||
</span>
|
||||
),
|
||||
)}
|
||||
</nav>
|
||||
|
||||
<div className="mt-auto border-t border-border pt-5">
|
||||
<p className="truncate text-sm text-muted-foreground" title={userEmail}>
|
||||
{userEmail}
|
||||
</p>
|
||||
<form action={signOutAction} className="mt-3">
|
||||
<Button type="submit" variant="outline" className="w-full">
|
||||
Sign out
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main className="min-w-0 p-4 sm:p-6 lg:p-8">{children}</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import AdminForm from "@/components/admin/admin-form";
|
||||
import { createCategory, updateCategory } from "@/app/admin/(protected)/categories/actions";
|
||||
import { categorySchema, type CategoryInput } from "@/lib/validations/category";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
type CategoryFormProps = {
|
||||
mode: "create" | "edit";
|
||||
categoryId?: string;
|
||||
defaultValues: CategoryInput;
|
||||
};
|
||||
|
||||
const kindLabels: Record<CategoryInput["kind"], string> = {
|
||||
PROJECT: "Projects",
|
||||
MELODY: "Melodies",
|
||||
};
|
||||
|
||||
export default function CategoryForm({ mode, categoryId, defaultValues }: CategoryFormProps) {
|
||||
const router = useRouter();
|
||||
const [serverError, setServerError] = useState<string | null>(null);
|
||||
const form = useForm<CategoryInput>({
|
||||
resolver: zodResolver(categorySchema),
|
||||
defaultValues,
|
||||
});
|
||||
|
||||
const onSubmit = async (values: CategoryInput) => {
|
||||
setServerError(null);
|
||||
|
||||
const result =
|
||||
mode === "create" ? await createCategory(values) : await updateCategory(categoryId ?? "", values);
|
||||
|
||||
if (result.error) {
|
||||
setServerError(result.error);
|
||||
return;
|
||||
}
|
||||
|
||||
router.push("/admin/categories");
|
||||
router.refresh();
|
||||
};
|
||||
|
||||
return (
|
||||
<AdminForm
|
||||
form={form}
|
||||
onSubmit={onSubmit}
|
||||
submitLabel={mode === "create" ? "Create category" : "Save changes"}
|
||||
submittingLabel="Saving…"
|
||||
className="max-w-2xl"
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="kind"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Section</FormLabel>
|
||||
<Select value={field.value} onValueChange={field.onChange}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Choose a section" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{Object.entries(kindLabels).map(([value, label]) => (
|
||||
<SelectItem key={value} value={value}>
|
||||
{label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="slug"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Slug</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="web-design" autoComplete="off" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="grid gap-5 sm:grid-cols-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="nameAr"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Arabic name</FormLabel>
|
||||
<FormControl>
|
||||
<Input dir="rtl" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="nameEn"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>English name</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="order"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Display order</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
max={9999}
|
||||
inputMode="numeric"
|
||||
{...field}
|
||||
onChange={(event) => field.onChange(event.target.valueAsNumber || 0)}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{serverError ? <p className="text-sm font-medium text-destructive">{serverError}</p> : null}
|
||||
</AdminForm>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
"use client";
|
||||
|
||||
import { useRef, useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
uploadedFileSchema,
|
||||
UPLOAD_RULES,
|
||||
type UploadKind,
|
||||
type UploadedFileMetadata,
|
||||
} from "@/lib/validations/upload";
|
||||
|
||||
type FileUploadProps = {
|
||||
kind: UploadKind;
|
||||
onUploaded: (files: UploadedFileMetadata[]) => void;
|
||||
id?: string;
|
||||
multiple?: boolean;
|
||||
label?: string;
|
||||
helperText?: string;
|
||||
};
|
||||
|
||||
const defaultLabels: Record<UploadKind, string> = {
|
||||
image: "Image",
|
||||
audio: "Audio",
|
||||
};
|
||||
|
||||
export default function FileUpload({
|
||||
kind,
|
||||
onUploaded,
|
||||
id,
|
||||
multiple = false,
|
||||
label,
|
||||
helperText,
|
||||
}: FileUploadProps) {
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const rules = UPLOAD_RULES[kind];
|
||||
const fieldId = id ?? `file-upload-${kind}`;
|
||||
|
||||
async function handleFiles(selectedFiles: File[]) {
|
||||
setError(null);
|
||||
setIsUploading(true);
|
||||
|
||||
try {
|
||||
const uploaded: UploadedFileMetadata[] = [];
|
||||
|
||||
for (const file of selectedFiles) {
|
||||
if (!rules.mimeTypes.includes(file.type) || file.size > rules.maxBytes) {
|
||||
throw new Error(`Unsupported or oversized ${kind} file.`);
|
||||
}
|
||||
|
||||
const body = new FormData();
|
||||
body.set("kind", kind);
|
||||
body.set("file", file);
|
||||
|
||||
const response = await fetch("/api/upload", { method: "POST", body });
|
||||
const payload: unknown = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
const message =
|
||||
typeof payload === "object" && payload !== null && "error" in payload
|
||||
? String(payload.error)
|
||||
: "The file could not be uploaded.";
|
||||
throw new Error(message);
|
||||
}
|
||||
|
||||
const parsed = uploadedFileSchema.safeParse(payload);
|
||||
if (!parsed.success) {
|
||||
throw new Error("The upload response was invalid.");
|
||||
}
|
||||
|
||||
uploaded.push(parsed.data);
|
||||
}
|
||||
|
||||
onUploaded(uploaded);
|
||||
} catch (uploadError) {
|
||||
setError(uploadError instanceof Error ? uploadError.message : "The file could not be uploaded.");
|
||||
} finally {
|
||||
setIsUploading(false);
|
||||
if (inputRef.current) {
|
||||
inputRef.current.value = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-2" dir="auto">
|
||||
<Label htmlFor={fieldId}>{label ?? defaultLabels[kind]}</Label>
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:items-center">
|
||||
<Input
|
||||
ref={inputRef}
|
||||
id={fieldId}
|
||||
type="file"
|
||||
accept={rules.accept}
|
||||
multiple={multiple}
|
||||
disabled={isUploading}
|
||||
onChange={(event) => {
|
||||
void handleFiles(Array.from(event.target.files ?? []));
|
||||
}}
|
||||
/>
|
||||
{isUploading ? (
|
||||
<Button type="button" variant="secondary" disabled>
|
||||
Uploading…
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{helperText ?? `Maximum ${Math.round(rules.maxBytes / (1024 * 1024))} MB.`}
|
||||
</p>
|
||||
{error ? <p className="text-sm text-destructive">{error}</p> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { signIn } from "next-auth/react";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import AdminForm from "@/components/admin/admin-form";
|
||||
import { loginSchema, type LoginInput } from "@/lib/validations/auth";
|
||||
|
||||
export default function LoginForm() {
|
||||
const [serverError, setServerError] = useState<string | null>(null);
|
||||
const form = useForm<LoginInput>({
|
||||
resolver: zodResolver(loginSchema),
|
||||
defaultValues: {
|
||||
email: "",
|
||||
password: "",
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = async (values: LoginInput) => {
|
||||
setServerError(null);
|
||||
|
||||
const result = await signIn("credentials", {
|
||||
email: values.email,
|
||||
password: values.password,
|
||||
redirect: false,
|
||||
callbackUrl: "/admin",
|
||||
});
|
||||
|
||||
if (!result || result.error) {
|
||||
setServerError("The email or password is incorrect.");
|
||||
return;
|
||||
}
|
||||
|
||||
window.location.assign(result.url ?? "/admin");
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader>
|
||||
<CardTitle>Admin sign in</CardTitle>
|
||||
<CardDescription>Use your admin credentials to continue.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<AdminForm form={form} onSubmit={onSubmit} submitLabel="Sign in" submittingLabel="Signing in…" className="space-y-5">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Email</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="email" autoComplete="email" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Password</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" autoComplete="current-password" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
{serverError ? <p className="text-sm font-medium text-destructive">{serverError}</p> : null}
|
||||
</AdminForm>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import AdminForm from "@/components/admin/admin-form";
|
||||
import FileUpload from "@/components/admin/file-upload";
|
||||
import { createMelody, updateMelody } from "@/app/admin/(protected)/melodies/actions";
|
||||
import { melodySchema, type MelodyInput } from "@/lib/validations/melody";
|
||||
|
||||
type CategoryOption = { id: string; nameAr: string; nameEn: string };
|
||||
|
||||
type MelodyFormProps = {
|
||||
mode: "create" | "edit";
|
||||
melodyId?: string;
|
||||
categories: CategoryOption[];
|
||||
defaultValues: MelodyInput;
|
||||
};
|
||||
|
||||
const statusLabels: Record<MelodyInput["status"], string> = {
|
||||
DRAFT: "Draft",
|
||||
PUBLISHED: "Published",
|
||||
ARCHIVED: "Archived",
|
||||
};
|
||||
|
||||
export default function MelodyForm({ mode, melodyId, categories, defaultValues }: MelodyFormProps) {
|
||||
const router = useRouter();
|
||||
const [serverError, setServerError] = useState<string | null>(null);
|
||||
const form = useForm<MelodyInput>({ resolver: zodResolver(melodySchema), defaultValues });
|
||||
|
||||
const onSubmit = async (values: MelodyInput) => {
|
||||
setServerError(null);
|
||||
const result = mode === "create" ? await createMelody(values) : await updateMelody(melodyId ?? "", values);
|
||||
if (result.error) {
|
||||
setServerError(result.error);
|
||||
return;
|
||||
}
|
||||
router.push("/admin/melodies");
|
||||
router.refresh();
|
||||
};
|
||||
|
||||
return (
|
||||
<AdminForm
|
||||
form={form}
|
||||
onSubmit={onSubmit}
|
||||
submitLabel={mode === "create" ? "Create melody" : "Save changes"}
|
||||
submittingLabel="Saving…"
|
||||
className="max-w-3xl"
|
||||
>
|
||||
<div className="grid gap-5 md:grid-cols-2">
|
||||
<FormField control={form.control} name="status" render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Status</FormLabel>
|
||||
<Select value={field.value} onValueChange={field.onChange}>
|
||||
<FormControl><SelectTrigger><SelectValue placeholder="Choose a status" /></SelectTrigger></FormControl>
|
||||
<SelectContent>{Object.entries(statusLabels).map(([value, label]) => <SelectItem key={value} value={value}>{label}</SelectItem>)}</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)} />
|
||||
<FormField control={form.control} name="categoryId" render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Melody category</FormLabel>
|
||||
<Select value={field.value || "__none"} onValueChange={(value) => field.onChange(value === "__none" ? "" : value)}>
|
||||
<FormControl><SelectTrigger><SelectValue placeholder="Choose a category" /></SelectTrigger></FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="__none">Choose a category</SelectItem>
|
||||
{categories.map((category) => <SelectItem key={category.id} value={category.id}>{category.nameEn} · {category.nameAr}</SelectItem>)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)} />
|
||||
</div>
|
||||
|
||||
<FormField control={form.control} name="slug" render={({ field }) => (
|
||||
<FormItem><FormLabel>Slug</FormLabel><FormControl><Input placeholder="melody-slug" {...field} /></FormControl><FormMessage /></FormItem>
|
||||
)} />
|
||||
|
||||
<div className="grid gap-5 md:grid-cols-2">
|
||||
<FormField control={form.control} name="titleEn" render={({ field }) => (
|
||||
<FormItem><FormLabel>English title</FormLabel><FormControl><Input {...field} /></FormControl><FormMessage /></FormItem>
|
||||
)} />
|
||||
<FormField control={form.control} name="titleAr" render={({ field }) => (
|
||||
<FormItem><FormLabel>Arabic title</FormLabel><FormControl><Input dir="rtl" {...field} /></FormControl><FormMessage /></FormItem>
|
||||
)} />
|
||||
</div>
|
||||
|
||||
<div className="grid gap-5 md:grid-cols-2">
|
||||
<FormField control={form.control} name="descEn" render={({ field }) => (
|
||||
<FormItem><FormLabel>English description</FormLabel><FormControl><textarea className="min-h-32 w-full rounded-md border border-input bg-background px-3 py-2 text-sm" {...field} value={field.value ?? ""} /></FormControl><FormMessage /></FormItem>
|
||||
)} />
|
||||
<FormField control={form.control} name="descAr" render={({ field }) => (
|
||||
<FormItem><FormLabel>Arabic description</FormLabel><FormControl><textarea dir="rtl" className="min-h-32 w-full rounded-md border border-input bg-background px-3 py-2 text-sm" {...field} value={field.value ?? ""} /></FormControl><FormMessage /></FormItem>
|
||||
)} />
|
||||
</div>
|
||||
|
||||
<FormField control={form.control} name="audioFile" render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Audio file path</FormLabel>
|
||||
<FormControl><Input placeholder="/api/uploads/audios/..." {...field} /></FormControl>
|
||||
<FormMessage />
|
||||
<FileUpload id="melody-audio-file" kind="audio" label="Upload audio file" onUploaded={(files) => field.onChange(files[0]?.url ?? field.value)} />
|
||||
</FormItem>
|
||||
)} />
|
||||
|
||||
<div className="grid gap-5 md:grid-cols-2">
|
||||
<FormField control={form.control} name="coverImage" render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Cover image path</FormLabel>
|
||||
<FormControl><Input placeholder="/api/uploads/images/..." {...field} value={field.value ?? ""} /></FormControl>
|
||||
<FormMessage />
|
||||
<FileUpload id="melody-cover-image" kind="image" label="Upload cover image" onUploaded={(files) => field.onChange(files[0]?.url ?? field.value ?? "")} />
|
||||
</FormItem>
|
||||
)} />
|
||||
<FormField control={form.control} name="durationSec" render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Duration (seconds)</FormLabel>
|
||||
<FormControl><Input type="number" min={0} max={86400} value={field.value ?? ""} onChange={(event) => field.onChange(event.target.value ? event.target.valueAsNumber : null)} /></FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)} />
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
<FormField control={form.control} name="isDownloadable" render={({ field }) => (
|
||||
<FormItem className="flex items-center gap-3 rounded-md border border-border p-3">
|
||||
<FormControl><Input type="checkbox" checked={field.value} onChange={(event) => field.onChange(event.target.checked)} className="h-4 w-4" /></FormControl>
|
||||
<FormLabel className="m-0">Allow audio download</FormLabel>
|
||||
</FormItem>
|
||||
)} />
|
||||
<FormField control={form.control} name="isFeatured" render={({ field }) => (
|
||||
<FormItem className="flex items-center gap-3 rounded-md border border-border p-3">
|
||||
<FormControl><Input type="checkbox" checked={field.value} onChange={(event) => field.onChange(event.target.checked)} className="h-4 w-4" /></FormControl>
|
||||
<FormLabel className="m-0">Feature this melody</FormLabel>
|
||||
</FormItem>
|
||||
)} />
|
||||
</div>
|
||||
|
||||
<FormField control={form.control} name="sortOrder" render={({ field }) => (
|
||||
<FormItem><FormLabel>Sort order</FormLabel><FormControl><Input type="number" min={0} max={9999} value={field.value} onChange={(event) => field.onChange(event.target.valueAsNumber || 0)} /></FormControl><FormMessage /></FormItem>
|
||||
)} />
|
||||
|
||||
{serverError ? <p className="text-sm font-medium text-destructive">{serverError}</p> : null}
|
||||
</AdminForm>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,452 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import AdminForm from "@/components/admin/admin-form";
|
||||
import FileUpload from "@/components/admin/file-upload";
|
||||
import { createProject, updateProject } from "@/app/admin/(protected)/projects/actions";
|
||||
import { projectSchema, type ProjectInput } from "@/lib/validations/project";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
type CategoryOption = {
|
||||
id: string;
|
||||
nameAr: string;
|
||||
nameEn: string;
|
||||
};
|
||||
|
||||
type ProjectFormProps = {
|
||||
mode: "create" | "edit";
|
||||
projectId?: string;
|
||||
categories: CategoryOption[];
|
||||
defaultValues: ProjectInput;
|
||||
};
|
||||
|
||||
const typeLabels: Record<ProjectInput["type"], string> = {
|
||||
PORTFOLIO: "Portfolio",
|
||||
APP: "App",
|
||||
WEBSITE: "Website",
|
||||
DESIGN: "Design",
|
||||
};
|
||||
|
||||
const statusLabels: Record<ProjectInput["status"], string> = {
|
||||
DRAFT: "Draft",
|
||||
PUBLISHED: "Published",
|
||||
ARCHIVED: "Archived",
|
||||
};
|
||||
|
||||
function parseList(value: string) {
|
||||
return value
|
||||
.split(/\r?\n|,/)
|
||||
.map((item) => item.trim())
|
||||
.filter(Boolean);
|
||||
}
|
||||
|
||||
export default function ProjectForm({ mode, projectId, categories, defaultValues }: ProjectFormProps) {
|
||||
const router = useRouter();
|
||||
const [serverError, setServerError] = useState<string | null>(null);
|
||||
const form = useForm<ProjectInput>({
|
||||
resolver: zodResolver(projectSchema),
|
||||
defaultValues,
|
||||
});
|
||||
const projectType = form.watch("type");
|
||||
|
||||
const onSubmit = async (values: ProjectInput) => {
|
||||
setServerError(null);
|
||||
const result = mode === "create" ? await createProject(values) : await updateProject(projectId ?? "", values);
|
||||
|
||||
if (result.error) {
|
||||
setServerError(result.error);
|
||||
return;
|
||||
}
|
||||
|
||||
router.push("/admin/projects");
|
||||
router.refresh();
|
||||
};
|
||||
|
||||
return (
|
||||
<AdminForm
|
||||
form={form}
|
||||
onSubmit={onSubmit}
|
||||
submitLabel={mode === "create" ? "Create project" : "Save changes"}
|
||||
submittingLabel="Saving…"
|
||||
className="max-w-3xl"
|
||||
>
|
||||
<div className="grid gap-5 md:grid-cols-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="type"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Project type</FormLabel>
|
||||
<Select value={field.value} onValueChange={field.onChange}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Choose a type" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{Object.entries(typeLabels).map(([value, label]) => (
|
||||
<SelectItem key={value} value={value}>
|
||||
{label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="status"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Status</FormLabel>
|
||||
<Select value={field.value} onValueChange={field.onChange}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Choose a status" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{Object.entries(statusLabels).map(([value, label]) => (
|
||||
<SelectItem key={value} value={value}>
|
||||
{label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="slug"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Slug</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="project-slug" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="grid gap-5 md:grid-cols-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="titleEn"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>English title</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="titleAr"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Arabic title</FormLabel>
|
||||
<FormControl>
|
||||
<Input dir="rtl" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-5 md:grid-cols-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="summaryEn"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>English summary</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} value={field.value ?? ""} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="summaryAr"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Arabic summary</FormLabel>
|
||||
<FormControl>
|
||||
<Input dir="rtl" {...field} value={field.value ?? ""} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-5 md:grid-cols-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="descEn"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>English description</FormLabel>
|
||||
<FormControl>
|
||||
<textarea className="min-h-32 w-full rounded-md border border-input bg-background px-3 py-2 text-sm" {...field} value={field.value ?? ""} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="descAr"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Arabic description</FormLabel>
|
||||
<FormControl>
|
||||
<textarea dir="rtl" className="min-h-32 w-full rounded-md border border-input bg-background px-3 py-2 text-sm" {...field} value={field.value ?? ""} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="categoryId"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Project category</FormLabel>
|
||||
<Select value={field.value || "__none"} onValueChange={(value) => field.onChange(value === "__none" ? "" : value)}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Choose a category" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="__none">No category</SelectItem>
|
||||
{categories.map((category) => (
|
||||
<SelectItem key={category.id} value={category.id}>
|
||||
{category.nameEn} · {category.nameAr}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="grid gap-5 md:grid-cols-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="coverImage"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Cover image path</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="/api/uploads/images/..." {...field} value={field.value ?? ""} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
<FileUpload
|
||||
id="project-cover-image"
|
||||
kind="image"
|
||||
label="Upload cover image"
|
||||
onUploaded={(files) => field.onChange(files[0]?.url ?? field.value ?? "")}
|
||||
/>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="images"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Gallery image paths</FormLabel>
|
||||
<FormControl>
|
||||
<textarea
|
||||
className="min-h-32 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
|
||||
placeholder="One uploaded path per line"
|
||||
value={field.value.join("\n")}
|
||||
onChange={(event) => field.onChange(parseList(event.target.value))}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
<FileUpload
|
||||
id="project-gallery-images"
|
||||
kind="image"
|
||||
label="Upload gallery images"
|
||||
multiple
|
||||
onUploaded={(files) => field.onChange([...field.value, ...files.map((file) => file.url)])}
|
||||
/>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="technologies"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Technologies</FormLabel>
|
||||
<FormControl>
|
||||
<textarea
|
||||
className="min-h-24 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
|
||||
placeholder="Next.js, TypeScript, PostgreSQL"
|
||||
value={field.value.join("\n")}
|
||||
onChange={(event) => field.onChange(parseList(event.target.value))}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="grid gap-5 md:grid-cols-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="externalUrl"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Live / external URL</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="url" placeholder="https://example.com" {...field} value={field.value ?? ""} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="repoUrl"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Repository URL</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="url" placeholder="https://github.com/..." {...field} value={field.value ?? ""} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-5 md:grid-cols-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="sortOrder"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Sort order</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="number" min={0} max={9999} value={field.value} onChange={(event) => field.onChange(event.target.valueAsNumber || 0)} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="isFeatured"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex items-center gap-3 rounded-md border border-border p-3 md:mt-7">
|
||||
<FormControl>
|
||||
<Input type="checkbox" checked={field.value} onChange={(event) => field.onChange(event.target.checked)} className="h-4 w-4" />
|
||||
</FormControl>
|
||||
<FormLabel className="m-0">Feature this project</FormLabel>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{projectType === "APP" ? (
|
||||
<section className="space-y-5 rounded-xl border border-border bg-card p-5">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold">iOS app details</h2>
|
||||
<p className="mt-1 text-sm text-muted-foreground">Add the store, release, and support details for this application.</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-5 md:grid-cols-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="platform"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Platform</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="iOS / Swift" {...field} value={field.value ?? ""} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="appVersion"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>App version</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="1.0.0" {...field} value={field.value ?? ""} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-5 md:grid-cols-2">
|
||||
{([
|
||||
["appStoreUrl", "App Store URL"],
|
||||
["testflightUrl", "TestFlight URL"],
|
||||
["supportUrl", "Support URL"],
|
||||
["appPrivacyUrl", "App privacy URL"],
|
||||
] as const).map(([name, label]) => (
|
||||
<FormField
|
||||
key={name}
|
||||
control={form.control}
|
||||
name={name}
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{label}</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="url" placeholder="https://..." {...field} value={field.value ?? ""} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
) : null}
|
||||
|
||||
{serverError ? <p className="text-sm font-medium text-destructive">{serverError}</p> : null}
|
||||
</AdminForm>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user