sass-mohfarawati/components/admin/admin-dashboard-shell.tsx

import type { ReactNode } from "react";
import {
  FolderKanban,
  Globe2,
  ImageIcon,
  Languages,
  LayoutDashboard,
  LogOut,
  Palette,
  PlusSquare,
  Search,
  ShieldAlert,
  SwatchBook,
  Tags,
  Type,
} from "lucide-react";
import Link from "next/link";

import { AdminFlash } from "@/components/admin/admin-flash";
import { DashboardLayout } from "@/components/dashboard/dashboard-layout";
import { MotionFade } from "@/components/motion-fade";
import { SidebarMaintenanceControl } from "@/components/admin/sidebar-maintenance-control";
import { SoundToggle } from "@/components/sound-toggle";
import { ThemeToggle } from "@/components/theme-toggle";
import { Button } from "@/components/ui/button";
import { buildSiteUrl, getAdminAppPath } from "@/lib/admin-routing";
import { getMaintenanceMode, getSiteSettingsMediaBindings } from "@/lib/app-config";
import { getAdminNavigation } from "@/lib/admin-navigation";
import type { FlashMessages } from "@/lib/admin-feedback";

import { updateMaintenanceModeAction } from "@/app/_admin/maintenance/actions";

type AdminDashboardCopy = {
  title: string;
  subtitle: string;
  overview: string;
  maintenance: string;
  uiKit: string;
  portfolio: string;
  media: string;
  siteSettings: string;
  brandSettings?: string;
  localizationSettings?: string;
  seoSettings?: string;
  marquee?: string;
  smtp?: string;
  logout: string;
  backToSite: string;
};

type AdminDashboardShellProps = {
  copy: AdminDashboardCopy;
  active: "overview" | "maintenance" | "ui-kit" | "portfolio" | "media" | "site-settings" | "smtp" | "marquee";
  portfolioChild?: "overview" | "projects" | "new-project" | "categories";
  siteSettingsChild?: "brand" | "localization" | "seo";
  flash?: FlashMessages;
  logoutAction: () => Promise<void>;
  headerTitle: string;
  headerDescription: string;
  headerActions?: ReactNode;
  sidebarTopContent?: ReactNode;
  toolbar?: ReactNode;
  children: ReactNode;
};

export async function AdminDashboardShell({
  copy,
  active,
  portfolioChild,
  siteSettingsChild,
  flash,
  logoutAction,
  headerTitle,
  headerDescription,
  headerActions,
  sidebarTopContent,
  toolbar,
  children,
}: AdminDashboardShellProps) {
  const [mediaBindings, maintenanceEnabled] = await Promise.all([
    getSiteSettingsMediaBindings(),
    getMaintenanceMode(),
  ]);
  const sidebarItems = getAdminNavigation(copy, active, portfolioChild, siteSettingsChild);
  const normalizedSidebarItems = sidebarItems.filter(
    (item) =>
      item.href !== getAdminAppPath("/maintenance") &&
      item.href !== getAdminAppPath("/ui-kit") &&
      item.href !== getAdminAppPath("/smtp") &&
      item.href !== getAdminAppPath("/marquee"),
  );
  const footerSidebarItems = [getAdminAppPath("/marquee"), getAdminAppPath("/smtp")]
    .map((href) => sidebarItems.find((item) => item.href === href))
    .filter((item): item is NonNullable<typeof item> => Boolean(item));
  const headerIcon =
    active === "overview"
      ? LayoutDashboard
      : active === "maintenance"
        ? ShieldAlert
        : active === "ui-kit"
          ? SwatchBook
          : active === "site-settings"
            ? siteSettingsChild === "localization"
              ? Languages
              : siteSettingsChild === "seo"
                ? Search
              : siteSettingsChild === "brand"
                ? Palette
                : Globe2
            : active === "marquee"
              ? Type
          : active === "smtp"
            ? ShieldAlert
            : active === "media"
            ? ImageIcon
            : portfolioChild === "categories"
              ? Tags
              : portfolioChild === "new-project"
                ? PlusSquare
                : FolderKanban;
  return (
    <DashboardLayout
      title={headerTitle}
      description={headerDescription}
      icon={headerIcon}
      items={normalizedSidebarItems}
      sidebarIconSrc={mediaBindings.favicon?.url}
      sidebarBrandHref={buildSiteUrl()}
      sidebarBrandHoverLabel={copy.backToSite}
      sidebarTop={sidebarTopContent}
      sidebarFooterItems={footerSidebarItems}
      sidebarFooter={
        <>
          <SidebarMaintenanceControl
            action={updateMaintenanceModeAction}
            initialEnabled={maintenanceEnabled}
            label="Mohs Status"
          />
          <Button
            asChild
            variant={active === "ui-kit" ? "default" : "outline"}
            className="w-full justify-between"
          >
            <Link href={getAdminAppPath("/ui-kit")}>
              {copy.uiKit}
              <SwatchBook className="h-4 w-4" />
            </Link>
          </Button>
          <form action={logoutAction}>
            <Button type="submit" variant="ghost" className="w-full justify-between text-destructive hover:bg-destructive/10 hover:text-destructive">
              {copy.logout}
              <LogOut className="h-4 w-4" />
            </Button>
          </form>
        </>
      }
      headerActions={
        <div className="flex flex-wrap items-center justify-end gap-2">
          {headerActions}
          <SoundToggle
            ariaLabel="Mute sounds"
            mutedAriaLabel="Unmute sounds"
          />
          <ThemeToggle
            ariaLabel="Theme wechseln"
          />
        </div>
      }
    >
      <div className="space-y-6">
        {flash?.success || flash?.error ? (
          <MotionFade delay={0.05}>
            <AdminFlash success={flash.success} error={flash.error} />
          </MotionFade>
        ) : null}
        {toolbar ? <MotionFade delay={0.05}>{toolbar}</MotionFade> : null}
        {children}
      </div>
    </DashboardLayout>
  );
}