Spaces:
Sleeping
Sleeping
File size: 5,273 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 125 126 127 128 129 130 131 132 133 | 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 { ClipboardList, LogOut, ChevronRight, ReceiptIndianRupee } from "lucide-react";
const navItems = [
{ label: "Dashboard", href: "/auditor/dashboard" },
{ label: "My Audits", href: "/auditor/audits" },
{ label: "My TA Claims", href: "/auditor/ta-claims" },
];
export function AuditorLayout() {
const { user, logout } = useAuth();
const location = useLocation();
const path = location.pathname;
let breadcrumb: string[] = ["Dashboard"];
let title = "Auditor Dashboard";
if (path === "/auditor/audits") {
breadcrumb = ["Dashboard", "My Audits"];
title = "My Audits";
} else if (path.startsWith("/auditor/audits/")) {
breadcrumb = ["Dashboard", "My Audits", "Audit Detail"];
title = "Audit Detail";
} else if (path === "/auditor/ta-claims") {
breadcrumb = ["Dashboard", "My TA Claims"];
title = "My TA Claims";
} else if (path === "/auditor/ta-claims/new") {
breadcrumb = ["Dashboard", "My TA Claims", "New Claim"];
title = "New TA Claim";
}
return (
<div className="min-h-screen bg-background flex">
{/* Sidebar for auditor */}
<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">
<ClipboardList 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">Auditor Portal</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>
<div className="flex items-center justify-between gap-2">
<h1 className="text-lg font-semibold font-display text-foreground">{title}</h1>
{path.startsWith("/auditor/ta-claims") && (
<Button size="sm" variant="outline" asChild>
<Link to="/auditor/ta-claims/new">
<ReceiptIndianRupee className="h-4 w-4 mr-1" /> New TA Claim
</Link>
</Button>
)}
</div>
</header>
<main className="p-4 md:p-6">
<Outlet />
</main>
</div>
</div>
);
}
|