Files
frontend/components/templates/manager-layout/ManagerLayout.tsx
T
Thanh Quy - wolf cd2de11da0 Transfer to English
2026-05-06 00:55:06 +07:00

50 lines
1.5 KiB
TypeScript

"use client";
import { useAuth } from "@/lib/auth-context";
import { ManagerProvider } from "@/lib/manager-context";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useEffect } from "react";
import type { ManagerLayoutProps } from "./ManagerLayout.types";
/**
* Manager layout template — wraps content with auth guard and ManagerProvider.
* Redirects non-managers away; shows loading state while auth resolves.
*/
export default function ManagerLayout({ children }: ManagerLayoutProps) {
const { user, isInitialized } = useAuth();
const router = useRouter();
useEffect(() => {
if (isInitialized && user !== null && user.role !== "manager") {
router.replace("/");
}
}, [user, isInitialized, router]);
if (!isInitialized || user === null) {
return (
<div className="bg-background flex min-h-screen items-center justify-center">
<div className="flex flex-col items-center gap-4 text-(--color-text-muted)">
<i className="fa-solid fa-spinner fa-spin text-3xl text-(--color-primary)"></i>
<p className="text-sm">Checking access...</p>
<Link
href="/login"
className="text-sm font-medium text-(--color-primary) hover:underline"
>
Sign in if you don&apos;t have an account
</Link>
</div>
</div>
);
}
if (user.role !== "manager") return null;
return (
<ManagerProvider>
<div className="bg-background flex min-h-screen flex-col">{children}</div>
</ManagerProvider>
);
}