Refactor portfolio admin and views

app/[locale]/(site)/portfolio/[slug]/page.tsx

@@ -1,22 +1,16 @@
 import type { Metadata } from "next";
-import { ArrowLeft, ArrowUpRight, CalendarDays, FolderKanban, Tag, UserRound } from "lucide-react";
-import Link from "next/link";
-import Image from "next/image";
 import { getTranslations } from "next-intl/server";
 import { notFound } from "next/navigation";
 
 import { Container } from "@/components/layout/container";
 import { PageHero } from "@/components/layout/page-hero";
-import { MotionFade } from "@/components/motion-fade";
+import { PortfolioProjectDetail } from "@/components/site/portfolio-project-detail";
 import { buildLocalizedMetadata } from "@/lib/metadata";
-import { getLocalizedPath, resolveLocale } from "@/lib/locale";
+import { resolveLocale } from "@/lib/locale";
 import {
   getLocalizedValue,
   getPublishedPortfolioProjectBySlug,
 } from "@/lib/portfolio";
-import { AppCard } from "@/components/ui/app-card";
-import { Button } from "@/components/ui/button";
-import { CardContent } from "@/components/ui/card";
 
 type PortfolioItemPageProps = {
   params: {
@@ -27,98 +21,6 @@ type PortfolioItemPageProps = {
 
 export const dynamic = "force-dynamic";
 
-function PortfolioImage({
-  src,
-  alt,
-  className,
-  width,
-  height,
-}: {
-  src: string;
-  alt: string;
-  className: string;
-  width: number;
-  height: number;
-}) {
-  return (
-    <Image
-      src={src}
-      alt={alt}
-      width={width}
-      height={height}
-      unoptimized
-      className={className}
-    />
-  );
-}
-
-function renderSectionContent(
-  section: NonNullable<Awaited<ReturnType<typeof getPublishedPortfolioProjectBySlug>>>["sections"][number],
-  localeKey: ReturnType<typeof resolveLocale>,
-  t: Awaited<ReturnType<typeof getTranslations>>,
-) {
-  const title = getLocalizedValue(section.title, localeKey);
-  const body = getLocalizedValue(section.body, localeKey);
-
-  if (section.type === "GALLERY") {
-    return (
-      <div className="space-y-4">
-        <h2 className="text-lg font-semibold text-foreground">{title}</h2>
-        {section.imagePath ? (
-          <PortfolioImage
-            src={section.imagePath}
-            alt={title}
-            width={1200}
-            height={720}
-            className="h-56 w-full rounded-md object-cover"
-          />
-        ) : (
-          <div className="rounded-md border border-dashed border-border px-4 py-10 text-center text-sm text-muted-foreground">
-            No image configured.
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  if (section.type === "LINK") {
-    return (
-      <div className="space-y-4">
-        <h2 className="text-lg font-semibold text-foreground">{title}</h2>
-        {body ? (
-          <p className="whitespace-pre-line text-sm text-muted-foreground">{body}</p>
-        ) : null}
-        {section.linkUrl ? (
-          <Button asChild variant="outline">
-            <Link href={section.linkUrl} target="_blank" rel="noreferrer">
-              {t("openLink")}
-              <ArrowUpRight className="h-4 w-4" />
-            </Link>
-          </Button>
-        ) : null}
-      </div>
-    );
-  }
-
-  if (section.type === "STATS" || section.type === "DELIVERABLES") {
-    return (
-      <div className="space-y-4">
-        <h2 className="text-lg font-semibold text-foreground">{title}</h2>
-        <div className="rounded-md border border-input bg-background p-4">
-          <p className="whitespace-pre-line text-sm text-muted-foreground">{body}</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-4">
-      <h2 className="text-lg font-semibold text-foreground">{title}</h2>
-      <p className="whitespace-pre-line text-sm text-muted-foreground">{body}</p>
-    </div>
-  );
-}
-
 export async function generateMetadata({
   params: { locale, slug },
 }: PortfolioItemPageProps): Promise<Metadata> {
@@ -161,129 +63,8 @@ export default async function PortfolioItemPage({
         description={getLocalizedValue(item.summary, localeKey)}
       />
 
-      <Container size="wide" className="flex flex-col gap-section pb-12 lg:pb-16">
-        <MotionFade>
-        <AppCard level={3}>
-          <CardContent className="p-6 lg:p-10">
-            <Button asChild variant="ghost" className="h-auto px-0 py-0 text-sm">
-              <Link href={getLocalizedPath(localeKey, "/portfolio")}>
-                <ArrowLeft className="h-4 w-4" />
-                {t("back")}
-              </Link>
-            </Button>
-
-            <h1 className="mt-5 text-3xl font-semibold text-foreground sm:text-4xl">
-              {getLocalizedValue(item.title, localeKey)}
-            </h1>
-            <p className="mt-4 text-base text-muted-foreground sm:text-lg">
-              {getLocalizedValue(item.summary, localeKey)}
-            </p>
-
-            {item.coverImagePath ? (
-              <div className="mt-6 overflow-hidden rounded-lg border border-border bg-card">
-                <PortfolioImage
-                  src={item.coverImagePath}
-                  alt={getLocalizedValue(item.title, localeKey)}
-                  width={1600}
-                  height={900}
-                  className="h-auto w-full object-cover"
-                />
-              </div>
-            ) : null}
-
-            <div className="mt-6 flex flex-wrap gap-3 text-sm text-foreground/80">
-              {[
-                {
-                  icon: Tag,
-                  label: getLocalizedValue(item.category.name, localeKey),
-                },
-                {
-                  icon: CalendarDays,
-                  label: String(item.projectYear),
-                },
-                {
-                  icon: FolderKanban,
-                  label: getLocalizedValue(item.serviceLabel, localeKey),
-                },
-                {
-                  icon: UserRound,
-                  label: item.clientName,
-                },
-              ].map((meta) => {
-                const Icon = meta.icon;
-
-                return (
-                  <AppCard key={meta.label} level={2}>
-                    <CardContent className="flex items-center gap-2 p-3">
-                      <Icon className="h-4 w-4 text-brand-primary" />
-                      {meta.label}
-                    </CardContent>
-                  </AppCard>
-                );
-              })}
-            </div>
-
-            {item.previewUrl ? (
-              <div className="mt-6">
-                <Button asChild>
-                  <Link href={item.previewUrl} target="_blank" rel="noreferrer">
-                    {t("preview")}
-                    <ArrowUpRight className="h-4 w-4" />
-                  </Link>
-                </Button>
-              </div>
-            ) : null}
-          </CardContent>
-        </AppCard>
-        </MotionFade>
-
-        <div className="grid gap-4 md:grid-cols-3">
-        {item.sections.map((section, index) => (
-          <MotionFade key={section.id} delay={0.05 * (index + 1)}>
-            <AppCard>
-              <CardContent className="p-5">
-                {renderSectionContent(section, localeKey, t)}
-              </CardContent>
-            </AppCard>
-          </MotionFade>
-        ))}
-        </div>
-
-        {item.assets.length > 0 ? (
-          <MotionFade delay={0.1}>
-          <AppCard>
-            <CardContent className="p-6 lg:p-8">
-              <h2 className="text-xl font-semibold text-foreground">{t("gallery")}</h2>
-              <div className="mt-4 grid gap-4 md:grid-cols-2">
-                {item.assets.map((asset) => (
-                  <div key={asset.id} className="overflow-hidden rounded-lg border border-border bg-card">
-                    {asset.kind === "IMAGE" ? (
-                      <PortfolioImage
-                        src={asset.filePath}
-                        alt={getLocalizedValue(asset.alt, localeKey)}
-                        width={1200}
-                        height={720}
-                        className="h-64 w-full object-cover"
-                      />
-                    ) : (
-                      <div className="flex h-64 items-center justify-center bg-muted/40 p-6 text-center text-sm text-muted-foreground">
-                        <div className="space-y-3">
-                          <p>{getLocalizedValue(asset.alt, localeKey)}</p>
-                          <Button asChild variant="outline">
-                            <Link href={asset.filePath} target="_blank" rel="noreferrer">
-                              {t("download")}
-                            </Link>
-                          </Button>
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                ))}
-              </div>
-            </CardContent>
-          </AppCard>
-          </MotionFade>
-        ) : null}
+      <Container size="wide" className="pb-12 lg:pb-16">
+        <PortfolioProjectDetail item={item} locale={localeKey} t={t} />
       </Container>
     </>
   );

app/root/marquee/page.tsx

@@ -46,7 +46,6 @@ export default async function RootMarqueePage() {
       logoutAction={logoutAction}
       headerTitle={copy.title}
       headerDescription={copy.subtitle}
-      saveFormId="marquee-settings-form"
     >
       <div className="space-y-6">
         <MotionFade delay={0.14}>

app/root/portfolio/actions.ts

@@ -220,6 +220,7 @@ export async function saveProjectAction(formData: FormData) {
       id: String(formData.get("id") ?? "").trim() || undefined,
       categoryId: String(formData.get("categoryId") ?? ""),
       slug: String(formData.get("slug") ?? ""),
+      viewMode: String(formData.get("viewMode") ?? "GRID"),
       titleAr: String(formData.get("titleAr") ?? ""),
       titleEn: String(formData.get("titleEn") ?? ""),
       titleDe: String(formData.get("titleDe") ?? ""),
@@ -369,6 +370,7 @@ export async function saveProjectAction(formData: FormData) {
             data: {
               categoryId: parsed.categoryId,
               slug: parsed.slug,
+              viewMode: parsed.viewMode,
               titleAr: parsed.titleAr,
               titleEn: parsed.titleEn,
               titleDe: parsed.titleDe,
@@ -396,6 +398,7 @@ export async function saveProjectAction(formData: FormData) {
             data: {
               categoryId: parsed.categoryId,
               slug: parsed.slug,
+              viewMode: parsed.viewMode,
               titleAr: parsed.titleAr,
               titleEn: parsed.titleEn,
               titleDe: parsed.titleDe,

app/root/portfolio/projects/[id]/page.tsx

@@ -6,6 +6,15 @@ import { RootDashboardShell } from "@/components/root/root-dashboard-shell";
 import { AppCard } from "@/components/ui/app-card";
 import { Button } from "@/components/ui/button";
 import { CardContent } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
 import { getMediaOptions } from "@/lib/media";
 import {
@@ -72,8 +81,6 @@ export default async function RootPortfolioProjectPage({
       logoutAction={logoutAction}
       headerTitle={copy.title}
       headerDescription={copy.subtitle}
-      saveFormId="portfolio-project-form"
-      saveButtonLabel={copy.saveProject}
     >
       <div className="space-y-6">
         <MotionFade delay={0.15}>
@@ -88,20 +95,37 @@ export default async function RootPortfolioProjectPage({
         </MotionFade>
 
         <MotionFade delay={0.2}>
-          <AppCard>
-            <CardContent className="flex items-center justify-between gap-4 p-6">
+          <AppCard level={2}>
+            <CardContent className="flex flex-col gap-4 p-6 lg:flex-row lg:items-center lg:justify-between">
               <div>
                 <p className="text-sm font-medium text-foreground">{copy.dangerZone}</p>
                 <p className="mt-1 text-sm text-muted-foreground">
                   {copy.dangerText}
                 </p>
               </div>
-              <form action={deleteProjectAction}>
-                <input type="hidden" name="id" value={project.id} />
-                <Button type="submit" variant="destructive">
-                  {copy.deleteProject}
-                </Button>
-              </form>
+              <Dialog>
+                <DialogTrigger asChild>
+                  <Button type="button" variant="destructive">
+                    {copy.deleteProject}
+                  </Button>
+                </DialogTrigger>
+                <DialogContent>
+                  <DialogHeader>
+                    <DialogTitle>{copy.deleteProject}</DialogTitle>
+                    <DialogDescription>
+                      This action permanently removes the project data from the database.
+                    </DialogDescription>
+                  </DialogHeader>
+                  <DialogFooter>
+                    <form action={deleteProjectAction}>
+                      <input type="hidden" name="id" value={project.id} />
+                      <Button type="submit" variant="destructive">
+                        Confirm Delete
+                      </Button>
+                    </form>
+                  </DialogFooter>
+                </DialogContent>
+              </Dialog>
             </CardContent>
           </AppCard>
         </MotionFade>

app/root/portfolio/projects/new/page.tsx

@@ -49,7 +49,6 @@ export default async function RootNewPortfolioProjectPage() {
       logoutAction={logoutAction}
       headerTitle={copy.title}
       headerDescription={copy.subtitle}
-      saveFormId="portfolio-project-form"
     >
       <div className="space-y-6">
         <MotionFade delay={0.15}>

app/root/site-settings/page.tsx

@@ -54,7 +54,6 @@ export default async function RootSiteSettingsPage() {
       logoutAction={logoutAction}
       headerTitle={copy.title}
       headerDescription={copy.subtitle}
-      saveFormId="site-settings-form"
     >
       <div className="space-y-6">
         <MotionFade delay={0.16}>

app/root/smtp/contact-protection/page.tsx

@@ -47,7 +47,6 @@ export default async function RootSMTPProtectionPage() {
       logoutAction={logoutAction}
       headerTitle={copy.title}
       headerDescription={copy.subtitle}
-      saveFormId="contact-protection-form"
     >
       <div className="space-y-6">
         <MotionFade delay={0.16}>

app/root/smtp/page.tsx

@@ -48,7 +48,6 @@ export default async function RootSMTPPage() {
       logoutAction={logoutAction}
       headerTitle={copy.title}
       headerDescription={copy.subtitle}
-      saveFormId="smtp-settings-form"
       headerActions={(
         <form action={sendTestEmailAction}>
           <Button type="submit" variant="outline">