Spaces:
Sleeping
Sleeping
File size: 4,969 Bytes
f305a41 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 | import { Outlet, Link, useLocation } from "react-router-dom";
import { useAuth } from "@/contexts/AuthContext";
import { getRoleLabel } from "@/data/dummyData";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Fish, LogOut, ChevronRight } from "lucide-react";
const navItems = [
{ label: "Dashboard", href: "/hatchery/dashboard" },
{ label: "My Applications", href: "/hatchery/applications" },
{ label: "My Certificates", href: "/hatchery/certificates" },
];
export function HatcheryLayout() {
const { user, logout } = useAuth();
const location = useLocation();
const path = location.pathname;
let breadcrumb: string[] = ["Dashboard"];
let title = "Dashboard";
if (path === "/hatchery/applications") {
breadcrumb = ["Dashboard", "My Applications"];
title = "My Hatchery Applications";
} else if (path.startsWith("/hatchery/applications/") && path.endsWith("/nc-response")) {
breadcrumb = ["Dashboard", "My Applications", "NC Response"];
title = "NC Response";
} else if (path.startsWith("/hatchery/applications/")) {
breadcrumb = ["Dashboard", "My Applications", "Application Details"];
title = "Application Details";
} else if (path === "/hatchery/certificates") {
breadcrumb = ["Dashboard", "My Certificates"];
title = "My Certificates";
}
return (
<div className="min-h-screen bg-background flex">
{/* Sidebar for hatchery operator */}
<aside className="w-56 border-r border-sidebar-border bg-sidebar text-sidebar-foreground flex flex-col">
<div className="flex items-center gap-2 h-16 px-4 border-b border-sidebar-border">
<div className="w-8 h-8 rounded-lg bg-sidebar-primary flex items-center justify-center">
<Fish className="w-5 h-5 text-sidebar-primary-foreground" />
</div>
<div>
<p className="text-sm font-bold">SHAPHARI</p>
<p className="text-[11px] text-sidebar-foreground/70">Hatchery Operator</p>
</div>
</div>
<nav className="flex-1 overflow-y-auto py-4 px-3">
<ul className="space-y-1 text-sm">
{navItems.map((item) => {
const active = path === item.href || path.startsWith(item.href + "/");
return (
<li key={item.href}>
<Link
to={item.href}
className={cn(
"flex items-center gap-2 rounded-lg px-3 py-2.5 text-sidebar-foreground/80 transition-colors",
active && "bg-sidebar-primary/20 text-sidebar-primary font-medium",
!active && "hover:bg-sidebar-accent hover:text-sidebar-foreground",
)}
>
<span className="truncate">{item.label}</span>
</Link>
</li>
);
})}
</ul>
</nav>
{user && (
<div className="border-t border-sidebar-border p-3 flex items-center gap-3">
<Avatar className="h-9 w-9 flex-shrink-0">
<AvatarFallback className="bg-sidebar-primary text-sidebar-primary-foreground text-xs">
{user.name
.split(" ")
.map((n) => n[0])
.join("")}
</AvatarFallback>
</Avatar>
<div className="flex-1 min-w-0">
<p className="text-sm font-medium truncate">{user.name}</p>
<p className="text-[11px] text-sidebar-foreground/60 truncate">
{getRoleLabel(user.role)}
</p>
</div>
<Button
variant="ghost"
size="icon"
className="h-8 w-8 text-sidebar-foreground/60 hover:text-sidebar-foreground hover:bg-sidebar-accent"
onClick={logout}
title="Logout"
>
<LogOut className="h-4 w-4" />
</Button>
</div>
)}
</aside>
{/* Main content with breadcrumb */}
<div className="flex-1 flex flex-col">
<header className="border-b border-border px-4 py-3 flex flex-col gap-1">
<div className="flex items-center gap-1 text-xs text-muted-foreground">
{breadcrumb.map((crumb, index) => (
<span key={crumb} className="flex items-center gap-1">
{index > 0 && <ChevronRight className="h-3 w-3" />}
<span>{crumb}</span>
</span>
))}
</div>
<h1 className="text-lg font-semibold font-display text-foreground">{title}</h1>
</header>
<main className="p-4 md:p-6">
<Outlet />
</main>
</div>
</div>
);
}
|