shaily/KAFM-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Admin part is added and navbar context file is added

Browse Source
This commit is contained in:
Shaily Mishra
2026-07-27 19:05:11 +05:30
parent cdb52e717e
commit 954de712a7
23 changed files with 2525 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
components/layouts/sidebar.tsx
View File

@@ -1,65 +1,78 @@
import { SIDEBAR_ITEMS } from "@/constants/constant";
"use client";
import { OPERATIONS_SIDEBAR_ITEMS, ADMIN_SIDEBAR_ITEMS } from "@/constants/constant";
import SidebarItem from "./sideBarItem";
import {
ShieldCheck,
Activity,
ChevronDown,
ChevronsLeft,
} from "lucide-react";
import { ShieldCheck, Activity, ChevronDown, ChevronsLeft } from "lucide-react";
import { useSession, signOut } from "next-auth/react";
import { useNav } from "./context/navContext";
export default function Sidebar() {
const { data: session } = useSession();
console.log("Session data ",session?.user?.name)
console.log("Session data ",session?.user?.email)
const { mode, setMode } = useNav();
const currentItems = mode === "operations" ? OPERATIONS_SIDEBAR_ITEMS : ADMIN_SIDEBAR_ITEMS;
return (
<aside className="fixed bg-[#071321] text-white h-screen overflow-y-auto [scrollbar-color:#1b2a40_#071321] [scrollbar-width:thin]">
<div className="flex items-center gap-2 px-2 pt-2 pb-3">
<div className="flex h-9 w-9 items-center justify-center rounded-lg
bg-[#3de0c4] font-bold text-[#05111d] text-sm">
<aside className="fixed bg-[#071321] text-white h-screen w-64 overflow-y-auto [scrollbar-color:#1b2a40_#071321] [scrollbar-width:thin]">
{/* App Logo */}
<div className="flex items-center gap-2 px-4 pt-3 pb-3">
<div className="flex h-9 w-9 items-center justify-center rounded-lg bg-[#3de0c4] font-bold text-[#05111d] text-sm">
K
</div>
<span className="text-sm font-bold tracking-tight text-white">
KA<span className="text-[#3de0c4]">FM</span>
</span>
</div>
<hr className="border-[#142538]" />
<div className="mx-4 my-4 flex rounded-xl
bg-[#091624] p-2 border border-[#142538]">
<button className="flex flex-1
items-center justify-center gap-1 rounded-lg bg-[#3de0c4] py-1.5 text-xs
text-black font-bold shadow-sm">
{/* Mode Switcher Buttons */}
<div className="mx-4 my-4 flex rounded-xl bg-[#091624] p-1 border border-[#142538]">
<button
onClick={() => setMode("operations")}
className={`flex flex-1 items-center justify-center gap-1 rounded-lg py-1.5 text-xs font-bold transition-all ${
mode === "operations"
? "bg-[#3de0c4] text-black shadow-sm"
: "text-slate-400 hover:text-white"
}`}
>
<Activity size={14} />
Operations
</button>
<button className="flex flex-1 items-center justify-center gap-1
rounded-lg py-1 text-xs text-slate-400 font-medium hover:text-white transition-colors">
<button
onClick={() => setMode("admin")}
className={`flex flex-1 items-center justify-center gap-1 rounded-lg py-1.5 text-xs font-bold transition-all ${
mode === "admin"
? "bg-[#3de0c4] text-black shadow-sm"
: "text-slate-400 hover:text-white"
}`}
>
<ShieldCheck size={14} />
Admin
</button>
</div>
<p className="px-2 text-xs font-semibold uppercase
tracking-wider text-slate-500">
Tenant runtime
<p className="px-4 text-[10px] font-semibold uppercase tracking-wider text-slate-500">
{mode === "operations" ? "Tenant Runtime" : "System Platform"}
</p>
{/* Dynamic Navigation Items */}
<div className="py-1">
{SIDEBAR_ITEMS.map((item) => (
<SidebarItem
key={item.title}
item={item}
/>
{currentItems.map((item) => (
<SidebarItem key={item.title} item={item} />
))}
</div>
<div className="px-3 pb-2 pt-1
border-t border-[#0f1f30]">
<div className="px-3 pb-2 pt-1 border-t border-[#0f1f30]">
<button className="flex w-full items-center gap-2 rounded-xl py-2 px-3 text-xs text-slate-400 hover:bg-[#091624] hover:text-white transition-colors">
<ChevronsLeft size={16} />
Minimise menu
</button>
</div>
{/* Profile Card Section */}
{/* Profile Card */}
<div className="m-3 mt-0 rounded-xl border border-[#142538] bg-[#071321] p-2.5">
<div className="flex items-center justify-between">
<div className="flex gap-2.5 items-center">
@@ -67,16 +80,19 @@ console.log("Session data ",session?.user?.email)
DT
</div>
<div className="min-w-0 leading-tight">
<h4 className="font-semibold text-xs text-white truncate">{session?.user?.name}</h4>
<h4 className="font-semibold text-xs text-white truncate">{session?.user?.name || "User"}</h4>
<p className="text-[11px] text-slate-500 truncate">
{session?.user?.email}
{session?.user?.email || "user@example.com"}
</p>
</div>
</div>
<ChevronDown className="-rotate-90 text-slate-500 shrink-0" size={14}
onClick={() => signOut({ callbackUrl: "/login" })} />
</div>
<ChevronDown
className="-rotate-90 text-slate-500 shrink-0 cursor-pointer"
size={14}
onClick={() => signOut({ callbackUrl: "/login" })}
/>
</div>
</div>
</aside>
);
}