Refactor admin area and remove legacy root paths

app/_admin/portfolio/actions.ts

@@ -0,0 +1,607 @@
+"use server";
+
+import { MediaUsageType, Prisma } from "@prisma/client";
+import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
+import { isRedirectError } from "next/dist/client/components/redirect-error";
+import { ZodError } from "zod";
+
+import { routing } from "@/i18n/routing";
+import { toInternalAdminPath } from "@/lib/admin-routing";
+import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
+import { deleteEntityMediaUsages, replaceEntityMediaUsages } from "@/lib/media";
+import { resolveMediaSelection } from "@/lib/media-service";
+import { getLocalizedPath } from "@/lib/locale";
+import { removeManagedMediaFile } from "@/lib/media-storage";
+import { mediaFieldInputSchema } from "@/lib/media-validation";
+import { prisma } from "@/lib/prisma";
+import { isCheckedFormValue } from "@/lib/form-data";
+import {
+  assetInputSchema,
+  categoryInputSchema,
+  projectInputSchema,
+  sectionInputSchema,
+} from "@/lib/portfolio-validation";
+
+async function ensureAdmin() {
+  if (!(await isAdminAuthenticated())) {
+    await clearAdminSessionCookie();
+    redirect("/");
+  }
+}
+
+function getRedirectPath(formData: FormData, fallbackPath: string) {
+  return String(formData.get("redirectPath") ?? fallbackPath);
+}
+
+function withMessage(pathname: string, type: "success" | "error", message: string) {
+  const params = new URLSearchParams();
+  params.set(type, message);
+
+  return `${pathname}?${params.toString()}`;
+}
+
+function normalizeCheckboxValue(formData: FormData, key: string) {
+  return isCheckedFormValue(formData.get(key));
+}
+
+function parseJsonArray(rawValue: FormDataEntryValue | null, key: string) {
+  if (typeof rawValue !== "string" || rawValue.trim() === "") {
+    return [];
+  }
+
+  try {
+    const parsed = JSON.parse(rawValue);
+
+    if (!Array.isArray(parsed)) {
+      throw new Error(`${key} muss ein Array sein.`);
+    }
+
+    return parsed;
+  } catch {
+    throw new Error(`Ungueltige ${key} Nutzdaten.`);
+  }
+}
+
+function parseJsonObject(rawValue: FormDataEntryValue | null, key: string) {
+  if (typeof rawValue !== "string" || rawValue.trim() === "") {
+    return undefined;
+  }
+
+  try {
+    const parsed = JSON.parse(rawValue);
+
+    if (!parsed || Array.isArray(parsed) || typeof parsed !== "object") {
+      throw new Error(`${key} muss ein Objekt sein.`);
+    }
+
+    return parsed;
+  } catch {
+    throw new Error(`Ungueltige ${key} Nutzdaten.`);
+  }
+}
+
+function parseZodError(error: ZodError) {
+  return error.issues[0]?.message ?? "Validierung fehlgeschlagen.";
+}
+
+async function revalidatePortfolioPages() {
+  revalidatePath(toInternalAdminPath("/"));
+  revalidatePath(toInternalAdminPath("/media"));
+  revalidatePath(toInternalAdminPath("/portfolio"));
+  revalidatePath(toInternalAdminPath("/portfolio/categories"));
+  revalidatePath(toInternalAdminPath("/portfolio/projects"));
+  revalidatePath("/portfolio");
+
+  for (const locale of routing.locales) {
+    revalidatePath(getLocalizedPath(locale, "/portfolio"));
+  }
+}
+
+async function removeManagedPaths(paths: string[]) {
+  for (const filePath of Array.from(new Set(paths.filter(Boolean)))) {
+    await removeManagedMediaFile(filePath);
+  }
+}
+
+export async function upsertCategoryAction(formData: FormData) {
+  await ensureAdmin();
+
+  const redirectPath = getRedirectPath(formData, "/portfolio/categories");
+
+  try {
+    const parsed = categoryInputSchema.parse({
+      id: String(formData.get("id") ?? "").trim() || undefined,
+      slug: String(formData.get("slug") ?? ""),
+      nameAr: String(formData.get("nameAr") ?? ""),
+      nameEn: String(formData.get("nameEn") ?? ""),
+      nameDe: String(formData.get("nameDe") ?? ""),
+      descriptionAr: String(formData.get("descriptionAr") ?? ""),
+      descriptionEn: String(formData.get("descriptionEn") ?? ""),
+      descriptionDe: String(formData.get("descriptionDe") ?? ""),
+      sortOrder: String(formData.get("sortOrder") ?? "0"),
+      isActive: normalizeCheckboxValue(formData, "isActive"),
+    });
+
+    if (parsed.id) {
+      await prisma.category.update({
+        where: {
+          id: parsed.id,
+        },
+        data: parsed,
+      });
+    } else {
+      await prisma.category.create({
+        data: parsed,
+      });
+    }
+
+    await revalidatePortfolioPages();
+    redirect(withMessage(redirectPath, "success", "Kategorie gespeichert."));
+  } catch (error) {
+    if (isRedirectError(error)) {
+      throw error;
+    }
+
+    const message =
+      error instanceof ZodError
+        ? parseZodError(error)
+        : error instanceof Prisma.PrismaClientKnownRequestError && error.code === "P2002"
+          ? "Kategorie Slug muss eindeutig sein."
+          : "Kategorie konnte nicht gespeichert werden.";
+
+    redirect(withMessage(redirectPath, "error", message));
+  }
+}
+
+export async function deleteCategoryAction(formData: FormData) {
+  await ensureAdmin();
+
+  const redirectPath = getRedirectPath(formData, "/portfolio/categories");
+  const id = String(formData.get("id") ?? "");
+
+  try {
+    const projectCount = await prisma.portfolioProject.count({
+      where: {
+        categoryId: id,
+      },
+    });
+
+    if (projectCount > 0) {
+      redirect(withMessage(redirectPath, "error", "Kategorie mit Projekten kann nicht geloescht werden."));
+    }
+
+    await prisma.category.delete({
+      where: {
+        id,
+      },
+    });
+
+    await revalidatePortfolioPages();
+    redirect(withMessage(redirectPath, "success", "Kategorie geloescht."));
+  } catch (error) {
+    if (isRedirectError(error)) {
+      throw error;
+    }
+
+    redirect(withMessage(redirectPath, "error", "Kategorie konnte nicht geloescht werden."));
+  }
+}
+
+export async function saveProjectAction(formData: FormData) {
+  await ensureAdmin();
+
+  const fallbackRedirect = String(formData.get("id") ?? "").trim()
+    ? `/portfolio/projects/${String(formData.get("id") ?? "").trim()}`
+    : "/portfolio/projects/new";
+  const redirectPath = getRedirectPath(formData, fallbackRedirect);
+  const uploadedPaths: string[] = [];
+  const createdMediaAssetIds: string[] = [];
+
+  try {
+    const sections = parseJsonArray(formData.get("sections"), "sections").map((section, index) =>
+      sectionInputSchema.parse({
+        ...section,
+        media: section.media ? mediaFieldInputSchema.parse(section.media) : undefined,
+        sortOrder: section.sortOrder ?? index,
+      }),
+    );
+
+    const assets = parseJsonArray(formData.get("assets"), "assets").map((asset, index) =>
+      assetInputSchema.parse({
+        ...asset,
+        media: asset.media ? mediaFieldInputSchema.parse(asset.media) : undefined,
+        sortOrder: asset.sortOrder ?? index,
+      }),
+    );
+
+    const coverMedia = parseJsonObject(formData.get("coverMedia"), "coverMedia");
+
+    const parsed = projectInputSchema.parse({
+      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") ?? ""),
+      summaryAr: String(formData.get("summaryAr") ?? ""),
+      summaryEn: String(formData.get("summaryEn") ?? ""),
+      summaryDe: String(formData.get("summaryDe") ?? ""),
+      clientName: String(formData.get("clientName") ?? ""),
+      projectYear: String(formData.get("projectYear") ?? ""),
+      serviceLabelAr: String(formData.get("serviceLabelAr") ?? ""),
+      serviceLabelEn: String(formData.get("serviceLabelEn") ?? ""),
+      serviceLabelDe: String(formData.get("serviceLabelDe") ?? ""),
+      previewUrl: String(formData.get("previewUrl") ?? ""),
+      currentCoverImagePath: String(formData.get("currentCoverImagePath") ?? ""),
+      coverMedia: coverMedia ? mediaFieldInputSchema.parse(coverMedia) : undefined,
+      sortOrder: String(formData.get("sortOrder") ?? "0"),
+      isFeatured: normalizeCheckboxValue(formData, "isFeatured"),
+      isPublished: normalizeCheckboxValue(formData, "isPublished"),
+      sections,
+      assets,
+    });
+
+    const existingProject = parsed.id
+      ? await prisma.portfolioProject.findUnique({
+          where: {
+            id: parsed.id,
+          },
+          select: {
+            isPublished: true,
+            publishedAt: true,
+          },
+        })
+      : null;
+    const shouldPublishNow = parsed.isPublished && !existingProject?.publishedAt;
+
+    const coverSelection = await resolveMediaSelection({
+      media: parsed.coverMedia,
+      uploadFile: formData.get("coverFile"),
+      folder: "covers",
+      fallbackLabel: parsed.titleDe || parsed.titleEn || parsed.titleAr || parsed.slug,
+      required: false,
+    });
+
+    if (coverSelection.createdAssetId) {
+      createdMediaAssetIds.push(coverSelection.createdAssetId);
+    }
+
+    if (coverSelection.uploadedUrl) {
+      uploadedPaths.push(coverSelection.uploadedUrl);
+    }
+
+    const sectionRows: Array<{
+      type: (typeof parsed.sections)[number]["type"];
+      titleAr: string;
+      titleEn: string;
+      titleDe: string;
+      bodyAr: string;
+      bodyEn: string;
+      bodyDe: string;
+      imagePath: string | null;
+      imageAssetId: string | null;
+      linkUrl: string | null;
+      sortOrder: number;
+    }> = [];
+
+    for (let index = 0; index < parsed.sections.length; index += 1) {
+      const section = parsed.sections[index];
+      const sectionSelection = await resolveMediaSelection({
+        media: section.media,
+        uploadFile: formData.get(`section-image-upload-${index}`),
+        folder: "sections",
+        fallbackLabel: section.titleDe || section.titleEn || section.titleAr || `section-${index + 1}`,
+        required: false,
+      });
+
+      if (sectionSelection.createdAssetId) {
+        createdMediaAssetIds.push(sectionSelection.createdAssetId);
+      }
+
+      if (sectionSelection.uploadedUrl) {
+        uploadedPaths.push(sectionSelection.uploadedUrl);
+      }
+
+      sectionRows.push({
+        type: section.type,
+        titleAr: section.titleAr,
+        titleEn: section.titleEn,
+        titleDe: section.titleDe,
+        bodyAr: section.bodyAr,
+        bodyEn: section.bodyEn,
+        bodyDe: section.bodyDe,
+        imagePath: sectionSelection.url || null,
+        imageAssetId: sectionSelection.assetId,
+        linkUrl: section.linkUrl || null,
+        sortOrder: index,
+      });
+    }
+
+    const assetRows: Array<{
+      kind: (typeof parsed.assets)[number]["kind"];
+      filePath: string;
+      mediaAssetId: string | null;
+      altAr: string;
+      altEn: string;
+      altDe: string;
+      sortOrder: number;
+    }> = [];
+
+    for (let index = 0; index < parsed.assets.length; index += 1) {
+      const asset = parsed.assets[index];
+      const assetSelection = await resolveMediaSelection({
+        media: asset.media,
+        uploadFile: asset.fileFieldName ? formData.get(asset.fileFieldName) : null,
+        folder: "assets",
+        fallbackLabel: asset.altDe || asset.altEn || asset.altAr || `asset-${index + 1}`,
+        required: true,
+      });
+
+      if (!assetSelection.url) {
+        throw new Error("Jede Datei Zeile braucht eine vorhandene Datei oder einen neuen Upload.");
+      }
+
+      if (assetSelection.createdAssetId) {
+        createdMediaAssetIds.push(assetSelection.createdAssetId);
+      }
+
+      if (assetSelection.uploadedUrl) {
+        uploadedPaths.push(assetSelection.uploadedUrl);
+      }
+
+      assetRows.push({
+        kind: asset.kind,
+        filePath: assetSelection.url,
+        mediaAssetId: assetSelection.assetId,
+        altAr: asset.altAr,
+        altEn: asset.altEn,
+        altDe: asset.altDe,
+        sortOrder: index,
+      });
+    }
+
+    const projectResult = await prisma.$transaction(async (tx) => {
+      const currentProject = parsed.id
+        ? await tx.portfolioProject.update({
+            where: {
+              id: parsed.id,
+            },
+            data: {
+              categoryId: parsed.categoryId,
+              slug: parsed.slug,
+              viewMode: parsed.viewMode,
+              titleAr: parsed.titleAr,
+              titleEn: parsed.titleEn,
+              titleDe: parsed.titleDe,
+              summaryAr: parsed.summaryAr,
+              summaryEn: parsed.summaryEn,
+              summaryDe: parsed.summaryDe,
+              clientName: parsed.clientName,
+              projectYear: parsed.projectYear,
+              serviceLabelAr: parsed.serviceLabelAr,
+              serviceLabelEn: parsed.serviceLabelEn,
+              serviceLabelDe: parsed.serviceLabelDe,
+              previewUrl: parsed.previewUrl || null,
+              coverImagePath: coverSelection.url || null,
+              isFeatured: parsed.isFeatured,
+              isPublished: parsed.isPublished,
+              publishedAt: parsed.isPublished
+                ? shouldPublishNow
+                  ? new Date()
+                  : existingProject?.publishedAt ?? new Date()
+                : null,
+              sortOrder: parsed.sortOrder,
+            },
+          })
+        : await tx.portfolioProject.create({
+            data: {
+              categoryId: parsed.categoryId,
+              slug: parsed.slug,
+              viewMode: parsed.viewMode,
+              titleAr: parsed.titleAr,
+              titleEn: parsed.titleEn,
+              titleDe: parsed.titleDe,
+              summaryAr: parsed.summaryAr,
+              summaryEn: parsed.summaryEn,
+              summaryDe: parsed.summaryDe,
+              clientName: parsed.clientName,
+              projectYear: parsed.projectYear,
+              serviceLabelAr: parsed.serviceLabelAr,
+              serviceLabelEn: parsed.serviceLabelEn,
+              serviceLabelDe: parsed.serviceLabelDe,
+              previewUrl: parsed.previewUrl || null,
+              coverImagePath: coverSelection.url || null,
+              isFeatured: parsed.isFeatured,
+              isPublished: parsed.isPublished,
+              publishedAt: parsed.isPublished ? new Date() : null,
+              sortOrder: parsed.sortOrder,
+            },
+          });
+
+      await tx.portfolioSection.deleteMany({
+        where: {
+          projectId: currentProject.id,
+        },
+      });
+
+      await tx.portfolioAsset.deleteMany({
+        where: {
+          projectId: currentProject.id,
+        },
+      });
+
+      const createdSections = [];
+
+      for (const section of sectionRows) {
+        const createdSection = await tx.portfolioSection.create({
+          data: {
+            projectId: currentProject.id,
+            type: section.type,
+            titleAr: section.titleAr,
+            titleEn: section.titleEn,
+            titleDe: section.titleDe,
+            bodyAr: section.bodyAr,
+            bodyEn: section.bodyEn,
+            bodyDe: section.bodyDe,
+            imagePath: section.imagePath || null,
+            linkUrl: section.linkUrl || null,
+            sortOrder: section.sortOrder,
+          },
+        });
+
+        createdSections.push(createdSection);
+      }
+
+      const createdAssets = [];
+
+      for (const asset of assetRows) {
+        const createdAsset = await tx.portfolioAsset.create({
+          data: {
+            projectId: currentProject.id,
+            kind: asset.kind,
+            filePath: asset.filePath,
+            altAr: asset.altAr,
+            altEn: asset.altEn,
+            altDe: asset.altDe,
+            sortOrder: asset.sortOrder,
+          },
+        });
+
+        createdAssets.push(createdAsset);
+      }
+
+      return {
+        project: currentProject,
+        createdSections,
+        createdAssets,
+      };
+    });
+
+    await replaceEntityMediaUsages({
+      entityType: "portfolio-project",
+      entityId: projectResult.project.id,
+      usages: [
+        ...(coverSelection.assetId
+          ? [
+              {
+                assetId: coverSelection.assetId,
+                usageType: MediaUsageType.PORTFOLIO_COVER,
+                fieldKey: "cover",
+              },
+            ]
+          : []),
+        ...projectResult.createdSections.flatMap((section, index) =>
+          sectionRows[index]?.imageAssetId
+            ? [
+                {
+                  assetId: sectionRows[index].imageAssetId as string,
+                  usageType: MediaUsageType.PORTFOLIO_SECTION,
+                  fieldKey: section.id,
+                },
+              ]
+            : [],
+        ),
+        ...projectResult.createdAssets.flatMap((asset, index) =>
+          assetRows[index]?.mediaAssetId
+            ? [
+                {
+                  assetId: assetRows[index].mediaAssetId as string,
+                  usageType: MediaUsageType.PORTFOLIO_ASSET,
+                  fieldKey: asset.id,
+                },
+              ]
+            : [],
+        ),
+      ],
+    });
+
+    await revalidatePortfolioPages();
+    revalidatePath(toInternalAdminPath(`/portfolio/projects/${projectResult.project.id}`));
+    revalidatePath(`/portfolio/${projectResult.project.slug}`);
+
+    for (const locale of routing.locales) {
+      revalidatePath(getLocalizedPath(locale, `/portfolio/${projectResult.project.slug}`));
+    }
+
+    redirect(
+      withMessage(`/portfolio/projects/${projectResult.project.id}`, "success", "Projekt gespeichert."),
+    );
+  } catch (error) {
+    if (isRedirectError(error)) {
+      throw error;
+    }
+
+    const message =
+      error instanceof ZodError
+        ? parseZodError(error)
+        : error instanceof Prisma.PrismaClientKnownRequestError && error.code === "P2002"
+          ? "Projekt Slug muss eindeutig sein."
+          : error instanceof Error
+            ? error.message
+            : "Projekt konnte nicht gespeichert werden.";
+
+    await removeManagedPaths(uploadedPaths);
+    if (createdMediaAssetIds.length > 0) {
+      await prisma.mediaUsage.deleteMany({
+        where: {
+          assetId: {
+            in: createdMediaAssetIds,
+          },
+        },
+      });
+      await prisma.mediaAsset.deleteMany({
+        where: {
+          id: {
+            in: createdMediaAssetIds,
+          },
+        },
+      });
+    }
+    redirect(withMessage(redirectPath, "error", message));
+  }
+}
+
+export async function deleteProjectAction(formData: FormData) {
+  await ensureAdmin();
+
+  const id = String(formData.get("id") ?? "");
+
+  try {
+    const project = await prisma.portfolioProject.findUnique({
+      where: {
+        id,
+      },
+      select: {
+        slug: true,
+      },
+    });
+
+    if (!project) {
+      redirect(withMessage("/portfolio", "error", "Project not found."));
+    }
+
+    await prisma.portfolioProject.delete({
+      where: {
+        id,
+      },
+    });
+    await deleteEntityMediaUsages("portfolio-project", id);
+
+    await revalidatePortfolioPages();
+    revalidatePath(`/portfolio/${project.slug}`);
+
+    for (const locale of routing.locales) {
+      revalidatePath(getLocalizedPath(locale, `/portfolio/${project.slug}`));
+    }
+
+    redirect(withMessage("/portfolio", "success", "Project deleted."));
+  } catch (error) {
+    if (isRedirectError(error)) {
+      throw error;
+    }
+
+    redirect(withMessage("/portfolio", "error", "Unable to delete project."));
+  }
+}

app/_admin/portfolio/categories/page.tsx

@@ -0,0 +1,61 @@
+import { redirect } from "next/navigation";
+
+import { PortfolioCategoriesManager } from "@/components/admin/portfolio-categories-manager";
+import { AdminDashboardShell } from "@/components/admin/admin-dashboard-shell";
+import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
+import { getAdminPortfolioCategories } from "@/lib/portfolio";
+
+import { deleteCategoryAction, upsertCategoryAction } from "../actions";
+
+export const dynamic = "force-dynamic";
+
+const copy = {
+  title: "Portfolio Kategorien",
+  subtitle: "Kategorien schnell anlegen, oeffnen und direkt im Modal bearbeiten.",
+  overview: "Uebersicht",
+  maintenance: "Wartungsmodus",
+  uiKit: "UI Kit",
+  media: "Media",
+  siteSettings: "Settings",
+  portfolio: "Portfolio",
+  logout: "Ausloggen",
+  backToSite: "Zur Website",
+};
+
+export default async function AdminPortfolioCategoriesPage() {
+  if (!(await isAdminAuthenticated())) {
+    redirect("/");
+  }
+
+  async function logoutAction() {
+    "use server";
+
+    await clearAdminSessionCookie();
+    redirect("/");
+  }
+
+  const categories = await getAdminPortfolioCategories();
+  const activeCount = categories.filter((category) => category.isActive).length;
+  const assignedProjects = categories.reduce((sum, category) => sum + category.projectCount, 0);
+
+  return (
+    <AdminDashboardShell
+      copy={copy}
+      active="portfolio"
+      portfolioChild="categories"
+      logoutAction={logoutAction}
+      headerTitle={copy.title}
+      headerDescription={copy.subtitle}
+    >
+      <div className="space-y-6">
+        <PortfolioCategoriesManager
+          categories={categories}
+          activeCount={activeCount}
+          assignedProjects={assignedProjects}
+          saveCategoryAction={upsertCategoryAction}
+          removeCategoryAction={deleteCategoryAction}
+        />
+      </div>
+    </AdminDashboardShell>
+  );
+}

app/_admin/portfolio/media/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function AdminPortfolioMediaRedirectPage() {
+  redirect("/media");
+}

app/_admin/portfolio/page.tsx

@@ -0,0 +1,79 @@
+import { redirect } from "next/navigation";
+
+import { AdminDashboardShell } from "@/components/admin/admin-dashboard-shell";
+import { PortfolioProjectsOverview } from "@/components/admin/portfolio-projects-overview";
+import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
+import { getAdminPortfolioCategories, getAdminPortfolioProjects } from "@/lib/portfolio";
+
+export const dynamic = "force-dynamic";
+
+const copy = {
+  title: "Portfolio",
+  subtitle: "Zentrale Steuerung fuer Projekte, Inhalte und Medien.",
+  overview: "Uebersicht",
+  maintenance: "Wartungsmodus",
+  uiKit: "UI Kit",
+  media: "Media",
+  siteSettings: "Settings",
+  portfolio: "Portfolio",
+  logout: "Ausloggen",
+  backToSite: "Zur Website",
+};
+
+type AdminPortfolioPageProps = {
+  searchParams?: Promise<{
+    category?: string;
+    status?: "all" | "draft" | "published";
+    success?: string;
+    error?: string;
+  }>;
+};
+
+export default async function AdminPortfolioPage({ searchParams }: AdminPortfolioPageProps) {
+  const resolvedSearchParams = await searchParams;
+
+  if (!(await isAdminAuthenticated())) {
+    redirect("/");
+  }
+
+  async function logoutAction() {
+    "use server";
+
+    await clearAdminSessionCookie();
+    redirect("/");
+  }
+
+  const selectedCategory = resolvedSearchParams?.category && resolvedSearchParams.category !== "__all__"
+    ? resolvedSearchParams.category
+    : "";
+  const selectedStatus = resolvedSearchParams?.status === "draft" || resolvedSearchParams?.status === "published"
+    ? resolvedSearchParams.status
+    : "all";
+  const [categories, projects] = await Promise.all([
+    getAdminPortfolioCategories(),
+    getAdminPortfolioProjects({
+      categoryId: selectedCategory || undefined,
+      status: selectedStatus,
+    }),
+  ]);
+
+  return (
+    <AdminDashboardShell
+      copy={copy}
+      active="portfolio"
+      portfolioChild="overview"
+      logoutAction={logoutAction}
+      headerTitle={copy.title}
+      headerDescription={copy.subtitle}
+    >
+      <div className="space-y-6">
+        <PortfolioProjectsOverview
+          categories={categories}
+          projects={projects}
+          selectedCategory={selectedCategory}
+          selectedStatus={selectedStatus}
+        />
+      </div>
+    </AdminDashboardShell>
+  );
+}

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

@@ -0,0 +1,137 @@
+import { redirect } from "next/navigation";
+
+import { MotionFade } from "@/components/motion-fade";
+import { PortfolioProjectForm } from "@/components/admin/portfolio-project-form";
+import { AdminDashboardShell } from "@/components/admin/admin-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 {
+  getActivePortfolioCategories,
+  getAdminPortfolioProjectById,
+} from "@/lib/portfolio";
+
+import { deleteProjectAction, saveProjectAction } from "../../actions";
+
+export const dynamic = "force-dynamic";
+
+const copy = {
+  title: "Portfolio Projekt bearbeiten",
+  subtitle: "Projektstatus, Inhalte und Dateien anpassen.",
+  overview: "Uebersicht",
+  maintenance: "Wartungsmodus",
+  uiKit: "UI Kit",
+  media: "Media",
+  siteSettings: "Settings",
+  portfolio: "Portfolio",
+  logout: "Ausloggen",
+  backToSite: "Zur Website",
+  saveProject: "Projekt speichern",
+  dangerZone: "Gefahrenbereich",
+  dangerText: "Projektdaten werden aus der Datenbank entfernt. Hochgeladene Dateien bleiben auf dem Speicher erhalten.",
+  deleteProject: "Projekt loeschen",
+};
+
+type AdminPortfolioProjectPageProps = {
+  params: Promise<{
+    id: string;
+  }>;
+};
+
+export default async function AdminPortfolioProjectPage({
+  params,
+}: AdminPortfolioProjectPageProps) {
+  if (!(await isAdminAuthenticated())) {
+    redirect("/");
+  }
+
+  async function logoutAction() {
+    "use server";
+
+    await clearAdminSessionCookie();
+    redirect("/");
+  }
+
+  const { id } = await params;
+
+  const [categories, mediaOptions, project] = await Promise.all([
+    getActivePortfolioCategories(),
+    getMediaOptions(),
+    getAdminPortfolioProjectById(id),
+  ]);
+
+  if (!project) {
+    redirect("/portfolio?error=Project+not+found.");
+  }
+
+  return (
+    <AdminDashboardShell
+      copy={copy}
+      active="portfolio"
+      portfolioChild="projects"
+      logoutAction={logoutAction}
+      headerTitle={copy.title}
+      headerDescription={copy.subtitle}
+    >
+      <div className="space-y-6">
+        <MotionFade delay={0.15}>
+          <PortfolioProjectForm
+            action={saveProjectAction}
+            categories={categories}
+            mediaOptions={mediaOptions}
+            project={project}
+            formId="portfolio-project-form"
+            redirectPath={`/portfolio/projects/${project.id}`}
+          />
+        </MotionFade>
+
+        <MotionFade delay={0.2}>
+          <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>
+              <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>
+      </div>
+    </AdminDashboardShell>
+  );
+}

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

@@ -0,0 +1,66 @@
+import { redirect } from "next/navigation";
+
+import { MotionFade } from "@/components/motion-fade";
+import { PortfolioProjectForm } from "@/components/admin/portfolio-project-form";
+import { AdminDashboardShell } from "@/components/admin/admin-dashboard-shell";
+import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
+import { getMediaOptions } from "@/lib/media";
+import { getActivePortfolioCategories } from "@/lib/portfolio";
+
+import { saveProjectAction } from "../../actions";
+
+export const dynamic = "force-dynamic";
+
+const copy = {
+  title: "Neues Portfolio Projekt",
+  subtitle: "Projekt mit Kategorie, Abschnitten und Dateien anlegen.",
+  overview: "Uebersicht",
+  maintenance: "Wartungsmodus",
+  uiKit: "UI Kit",
+  media: "Media",
+  siteSettings: "Settings",
+  portfolio: "Portfolio",
+  logout: "Ausloggen",
+  backToSite: "Zur Website",
+};
+
+export default async function AdminNewPortfolioProjectPage() {
+  if (!(await isAdminAuthenticated())) {
+    redirect("/");
+  }
+
+  async function logoutAction() {
+    "use server";
+
+    await clearAdminSessionCookie();
+    redirect("/");
+  }
+
+  const [categories, mediaOptions] = await Promise.all([
+    getActivePortfolioCategories(),
+    getMediaOptions(),
+  ]);
+
+  return (
+    <AdminDashboardShell
+      copy={copy}
+      active="portfolio"
+      portfolioChild="new-project"
+      logoutAction={logoutAction}
+      headerTitle={copy.title}
+      headerDescription={copy.subtitle}
+    >
+      <div className="space-y-6">
+        <MotionFade delay={0.15}>
+          <PortfolioProjectForm
+            action={saveProjectAction}
+            categories={categories}
+            mediaOptions={mediaOptions}
+            formId="portfolio-project-form"
+            redirectPath="/portfolio/projects/new"
+          />
+        </MotionFade>
+      </div>
+    </AdminDashboardShell>
+  );
+}

app/_admin/portfolio/projects/page.tsx

@@ -0,0 +1,79 @@
+import { redirect } from "next/navigation";
+
+import { PortfolioProjectsOverview } from "@/components/admin/portfolio-projects-overview";
+import { AdminDashboardShell } from "@/components/admin/admin-dashboard-shell";
+import { clearAdminSessionCookie, isAdminAuthenticated } from "@/lib/admin-auth";
+import { getAdminPortfolioCategories, getAdminPortfolioProjects } from "@/lib/portfolio";
+
+export const dynamic = "force-dynamic";
+
+const copy = {
+  title: "Portfolio Projekte",
+  subtitle: "Projektliste und Einstieg in die komplette Bearbeitung.",
+  overview: "Uebersicht",
+  maintenance: "Wartungsmodus",
+  uiKit: "UI Kit",
+  media: "Media",
+  siteSettings: "Settings",
+  portfolio: "Portfolio",
+  logout: "Ausloggen",
+  backToSite: "Zur Website",
+};
+
+type AdminPortfolioProjectsPageProps = {
+  searchParams?: Promise<{
+    category?: string;
+    status?: "all" | "draft" | "published";
+  }>;
+};
+
+export default async function AdminPortfolioProjectsPage({
+  searchParams,
+}: AdminPortfolioProjectsPageProps) {
+  const resolvedSearchParams = await searchParams;
+
+  if (!(await isAdminAuthenticated())) {
+    redirect("/");
+  }
+
+  async function logoutAction() {
+    "use server";
+
+    await clearAdminSessionCookie();
+    redirect("/");
+  }
+
+  const selectedCategory = resolvedSearchParams?.category && resolvedSearchParams.category !== "__all__"
+    ? resolvedSearchParams.category
+    : "";
+  const selectedStatus = resolvedSearchParams?.status === "draft" || resolvedSearchParams?.status === "published"
+    ? resolvedSearchParams.status
+    : "all";
+  const [categories, projects] = await Promise.all([
+    getAdminPortfolioCategories(),
+    getAdminPortfolioProjects({
+      categoryId: selectedCategory || undefined,
+      status: selectedStatus,
+    }),
+  ]);
+
+  return (
+    <AdminDashboardShell
+      copy={copy}
+      active="portfolio"
+      portfolioChild="projects"
+      logoutAction={logoutAction}
+      headerTitle={copy.title}
+      headerDescription={copy.subtitle}
+    >
+      <div className="space-y-6">
+        <PortfolioProjectsOverview
+          categories={categories}
+          projects={projects}
+          selectedCategory={selectedCategory}
+          selectedStatus={selectedStatus}
+        />
+      </div>
+    </AdminDashboardShell>
+  );
+}