214 lines
11 KiB
TypeScript
214 lines
11 KiB
TypeScript
"use client";
|
||
|
||
import React, { useEffect, useState } from "react";
|
||
import Link from "next/link";
|
||
import { usePathname, useRouter } from "next/navigation";
|
||
import AdminAuthGuard from "@/components/AdminAuthGuard";
|
||
import { getAdminSession, logoutAdmin, AdminUser } from "@/lib/admin-auth";
|
||
import { AyrisFooterBadge } from "@/components/AyrisFooterBadge";
|
||
|
||
export default function AdminLayoutClient({ children }: { children: React.ReactNode }) {
|
||
const pathname = usePathname();
|
||
const router = useRouter();
|
||
const [adminUser, setAdminUser] = useState<AdminUser | null>(null);
|
||
|
||
useEffect(() => {
|
||
setAdminUser(getAdminSession());
|
||
}, [pathname]);
|
||
|
||
const handleLogout = async () => {
|
||
if (confirm("Menulio Admin panelinden çıkış yapmak istediğinize emin misiniz?")) {
|
||
await logoutAdmin();
|
||
router.replace("/admin/login");
|
||
}
|
||
};
|
||
|
||
// Login page doesn't use the Admin Dashboard Shell (sidebar, header, etc.)
|
||
if (pathname === "/admin/login") {
|
||
return <>{children}</>;
|
||
}
|
||
|
||
return (
|
||
<AdminAuthGuard>
|
||
<div className="min-h-screen bg-[#09090b] text-[#fafafa] flex flex-col md:flex-row antialiased selection:bg-[#D4AF37]/30 selection:text-[#D4AF37]">
|
||
{/* Sol Sidebar */}
|
||
<aside className="w-full md:w-72 bg-[#121215] border-b md:border-b-0 md:border-r border-white/10 flex flex-col justify-between shrink-0">
|
||
<div>
|
||
{/* Logo & Başlık */}
|
||
<div className="p-6 border-b border-white/10 flex items-center justify-between">
|
||
<Link href="/admin" className="flex items-center gap-3 group">
|
||
<div className="w-9 h-9 rounded-xl bg-gradient-to-tr from-[#D4AF37] to-[#F59E0B] flex items-center justify-center shadow-lg shadow-[#D4AF37]/20">
|
||
<span className="font-extrabold text-[#0C0C0E] text-lg tracking-wider">M</span>
|
||
</div>
|
||
<div>
|
||
<div className="font-bold text-white tracking-wide text-base group-hover:text-[#D4AF37] transition-colors">
|
||
MENULIO
|
||
</div>
|
||
<div className="text-[10px] font-semibold text-[#D4AF37] tracking-widest uppercase">
|
||
Admin Stüdyosu
|
||
</div>
|
||
</div>
|
||
</Link>
|
||
</div>
|
||
|
||
{/* Navigasyon Linkleri */}
|
||
<nav className="p-4 space-y-1.5">
|
||
<div className="text-[10px] font-bold text-zinc-500 uppercase tracking-wider px-3 mb-2">
|
||
Tasarım & Şablonlar
|
||
</div>
|
||
|
||
<Link
|
||
href="/admin/templates"
|
||
className={`flex items-center gap-3 px-3 py-2.5 rounded-xl font-semibold text-sm transition-all shadow-sm ${
|
||
pathname === "/admin/templates"
|
||
? "bg-[#D4AF37]/10 text-[#D4AF37] border border-[#D4AF37]/25"
|
||
: "text-zinc-400 hover:text-white hover:bg-white/5"
|
||
}`}
|
||
>
|
||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||
</svg>
|
||
QR Şablon Stüdyosu
|
||
<span className="ml-auto text-[10px] bg-[#D4AF37] text-black font-extrabold px-1.5 py-0.5 rounded-full">
|
||
Masa Kartı
|
||
</span>
|
||
</Link>
|
||
|
||
<Link
|
||
href="/admin/menu-templates"
|
||
className={`flex items-center gap-3 px-3 py-2.5 rounded-xl font-semibold text-sm transition-all shadow-sm ${
|
||
pathname === "/admin/menu-templates"
|
||
? "bg-[#D4AF37]/10 text-[#D4AF37] border border-[#D4AF37]/25"
|
||
: "text-zinc-400 hover:text-white hover:bg-white/5"
|
||
}`}
|
||
>
|
||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
|
||
</svg>
|
||
Web Menü Şablonları
|
||
<span className="ml-auto text-[10px] bg-[#D4AF37] text-black font-extrabold px-1.5 py-0.5 rounded-full">
|
||
10 Tema
|
||
</span>
|
||
</Link>
|
||
|
||
<Link
|
||
href="/admin"
|
||
className={`flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all ${
|
||
pathname === "/admin"
|
||
? "bg-[#D4AF37]/10 text-[#D4AF37] border border-[#D4AF37]/25"
|
||
: "text-zinc-400 hover:text-white hover:bg-white/5"
|
||
}`}
|
||
>
|
||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||
</svg>
|
||
Genel Bakış & İstatistikler
|
||
</Link>
|
||
|
||
<div className="text-[10px] font-bold text-zinc-500 uppercase tracking-wider px-3 pt-4 mb-2">
|
||
Önizleme & Test
|
||
</div>
|
||
|
||
<Link
|
||
href="/templates"
|
||
target="_blank"
|
||
className="flex items-center gap-3 px-3 py-2.5 rounded-xl text-zinc-400 hover:text-white hover:bg-white/5 text-sm font-medium transition-all"
|
||
>
|
||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
|
||
</svg>
|
||
Web Menü Simülatörü
|
||
<svg className="w-3.5 h-3.5 ml-auto text-zinc-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||
</svg>
|
||
</Link>
|
||
|
||
<Link
|
||
href="/qr"
|
||
target="_blank"
|
||
className="flex items-center gap-3 px-3 py-2.5 rounded-xl text-zinc-400 hover:text-white hover:bg-white/5 text-sm font-medium transition-all"
|
||
>
|
||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z" />
|
||
</svg>
|
||
Web Masa Standı Üretici
|
||
<svg className="w-3.5 h-3.5 ml-auto text-zinc-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||
</svg>
|
||
</Link>
|
||
</nav>
|
||
</div>
|
||
|
||
{/* Alt Yönetici Profil & Çıkış Kartı */}
|
||
<div className="p-4 border-t border-white/10 space-y-3">
|
||
<div className="p-3 rounded-xl bg-white/[0.04] border border-white/5 flex items-center justify-between">
|
||
<div className="flex items-center gap-2.5 min-w-0">
|
||
<div className="w-8 h-8 rounded-lg bg-[#D4AF37]/20 border border-[#D4AF37]/40 flex items-center justify-center shrink-0">
|
||
<span className="font-extrabold text-[#D4AF37] text-xs">
|
||
{adminUser?.email?.[0]?.toUpperCase() || "A"}
|
||
</span>
|
||
</div>
|
||
<div className="min-w-0">
|
||
<div className="text-xs font-bold text-white truncate">
|
||
{adminUser?.name || "Yönetici"}
|
||
</div>
|
||
<div className="text-[10px] text-zinc-400 truncate">
|
||
{adminUser?.email || "admin@menul.io"}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button
|
||
type="button"
|
||
onClick={handleLogout}
|
||
className="p-1.5 rounded-lg text-zinc-400 hover:text-red-400 hover:bg-red-500/10 transition-colors"
|
||
title="Çıkış Yap"
|
||
>
|
||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
{/* Sağ Ana İçerik */}
|
||
<main className="flex-1 flex flex-col min-w-0 bg-[#0C0C0E]">
|
||
{/* Üst Bar */}
|
||
<header className="h-16 border-b border-white/10 px-6 flex items-center justify-between bg-[#121215]/50 backdrop-blur shrink-0">
|
||
<div className="flex items-center gap-3">
|
||
<div className="text-sm font-semibold text-zinc-300">
|
||
Dinamik Şablon & İçerik Yönetimi
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-4">
|
||
<div className="hidden sm:flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/5 border border-white/10 text-xs text-zinc-300">
|
||
<span className="w-2 h-2 rounded-full bg-[#D4AF37]" />
|
||
Oturum: <span className="font-semibold text-[#D4AF37]">{adminUser?.role === "super_admin" ? "Süper Admin" : "Yönetici"}</span>
|
||
</div>
|
||
|
||
<button
|
||
type="button"
|
||
onClick={handleLogout}
|
||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-red-500/10 border border-red-500/20 text-xs font-semibold text-red-400 hover:bg-red-500/20 transition-all cursor-pointer"
|
||
>
|
||
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
|
||
</svg>
|
||
Çıkış Yap
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
{/* Sayfa İçeriği */}
|
||
<div className="flex-1 p-6 md:p-8 overflow-y-auto">
|
||
{children}
|
||
</div>
|
||
|
||
<AyrisFooterBadge className="mt-auto border-t border-white/10 bg-[#09090b]" />
|
||
</main>
|
||
</div>
|
||
</AdminAuthGuard>
|
||
);
|
||
}
|