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,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