11a7265460
- Restructure: move backend from new_project/ to backend/ - Add full React/TypeScript frontend (37 pages, 17 services, 16 type defs, 11 query hooks) - Add docs/ with SRS specs, user stories, and workflow documentation - Update .gitignore for new directory layout Workflows implemented: WF1 User Signup, WF2 Placement Test, WF3 Exam Configuration, WF4 General English Exam, WF5 Course Generation, WF6 Entity Student Onboarding, AI Course Generation, Adaptive Learning Engine UI, White-Label Branding, Score Release Made-with: Cursor
355 lines
16 KiB
TypeScript
355 lines
16 KiB
TypeScript
import { Outlet, Link, useNavigate, useLocation } from "react-router-dom";
|
|
import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
|
|
import {
|
|
Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent,
|
|
SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem,
|
|
SidebarHeader, SidebarFooter, SidebarSeparator, useSidebar,
|
|
} from "@/components/ui/sidebar";
|
|
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
|
|
import { NavLink } from "@/components/NavLink";
|
|
import { useAuth } from "@/contexts/AuthContext";
|
|
import NotificationDropdown from "@/components/NotificationDropdown";
|
|
import AiAssistantDrawer from "@/components/ai/AiAssistantDrawer";
|
|
import AiSearchBar from "@/components/ai/AiSearchBar";
|
|
import { usePermissions } from "@/hooks/usePermissions";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu, DropdownMenuContent, DropdownMenuItem,
|
|
DropdownMenuSeparator, DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import {
|
|
Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList,
|
|
BreadcrumbPage, BreadcrumbSeparator,
|
|
} from "@/components/ui/breadcrumb";
|
|
import {
|
|
GraduationCap, LogOut, User, Settings, LayoutDashboard, ClipboardList,
|
|
FileText, Layers, BookOpen, Wand2, GitBranch, Users, BarChart3,
|
|
Building2, History, CreditCard, Ticket, BookA, PenTool,
|
|
Calendar, ChevronDown, HelpCircle, LucideIcon, Target, FolderOpen,
|
|
CalendarDays, Landmark, UserPlus, ScrollText, Award,
|
|
HelpCircle as FaqIcon, Bell, Workflow,
|
|
CalendarOff, DollarSign, BookMarked, BarChartHorizontal, TrendingUp,
|
|
Library, Activity, Warehouse, UserCog,
|
|
} from "lucide-react";
|
|
import React from "react";
|
|
|
|
// ============= Navigation Config =============
|
|
interface NavItem { title: string; url: string; icon: LucideIcon }
|
|
|
|
const overviewItems: NavItem[] = [
|
|
{ title: "Admin Dashboard", url: "/admin/dashboard", icon: LayoutDashboard },
|
|
{ title: "Platform Dashboard", url: "/admin/platform", icon: BarChart3 },
|
|
];
|
|
|
|
const lmsItems: NavItem[] = [
|
|
{ title: "Courses", url: "/admin/courses", icon: BookOpen },
|
|
{ title: "Students", url: "/admin/students", icon: Users },
|
|
{ title: "Teachers", url: "/admin/teachers", icon: GraduationCap },
|
|
{ title: "Batches", url: "/admin/batches", icon: Layers },
|
|
{ title: "Timetable", url: "/admin/timetable", icon: Calendar },
|
|
{ title: "Reports", url: "/admin/reports", icon: BarChart3 },
|
|
];
|
|
|
|
const academicItems: NavItem[] = [
|
|
{ title: "Assignments", url: "/admin/assignments", icon: ClipboardList },
|
|
{ title: "Exams List", url: "/admin/examsList", icon: FileText },
|
|
{ title: "Exam Structures", url: "/admin/exam-structures", icon: Layers },
|
|
{ title: "Rubrics", url: "/admin/rubrics", icon: BookOpen },
|
|
{ title: "Generation", url: "/admin/generation", icon: Wand2 },
|
|
{ title: "Approval Workflows", url: "/admin/approval-workflows", icon: GitBranch },
|
|
];
|
|
|
|
const adaptiveItems: NavItem[] = [
|
|
{ title: "Taxonomy", url: "/admin/taxonomy", icon: Target },
|
|
{ title: "Resources", url: "/admin/resources", icon: FolderOpen },
|
|
];
|
|
|
|
const institutionalItems: NavItem[] = [
|
|
{ title: "Academic Years", url: "/admin/academic-years", icon: CalendarDays },
|
|
{ title: "Departments", url: "/admin/departments", icon: Landmark },
|
|
{ title: "Admissions", url: "/admin/admissions", icon: UserPlus },
|
|
{ title: "Admission Register", url: "/admin/admission-register", icon: ScrollText },
|
|
{ title: "Exam Sessions", url: "/admin/exam-sessions", icon: FileText },
|
|
{ title: "Marksheets", url: "/admin/marksheets", icon: Award },
|
|
{ title: "Student Leave", url: "/admin/student-leave", icon: CalendarOff },
|
|
{ title: "Fees & Payments", url: "/admin/fees", icon: DollarSign },
|
|
{ title: "Lessons", url: "/admin/lessons", icon: BookMarked },
|
|
{ title: "Gradebook", url: "/admin/gradebook", icon: BarChartHorizontal },
|
|
{ title: "Student Progress", url: "/admin/student-progress", icon: TrendingUp },
|
|
{ title: "Library", url: "/admin/library", icon: Library },
|
|
{ title: "Activities", url: "/admin/activities", icon: Activity },
|
|
{ title: "Facilities", url: "/admin/facilities", icon: Warehouse },
|
|
];
|
|
|
|
const managementItems: NavItem[] = [
|
|
{ title: "Users", url: "/admin/users", icon: Users },
|
|
{ title: "Entities", url: "/admin/entities", icon: Building2 },
|
|
{ title: "Classrooms", url: "/admin/classrooms", icon: GraduationCap },
|
|
{ title: "User Roles", url: "/admin/user-roles", icon: UserCog },
|
|
{ title: "Roles & Permissions", url: "/admin/roles-permissions", icon: Settings },
|
|
{ title: "Authority Matrix", url: "/admin/authority-matrix", icon: Workflow },
|
|
];
|
|
|
|
const reportItems: NavItem[] = [
|
|
{ title: "Student Performance", url: "/admin/student-performance", icon: BarChart3 },
|
|
{ title: "Stats Corporate", url: "/admin/stats-corporate", icon: Building2 },
|
|
{ title: "Record", url: "/admin/record", icon: History },
|
|
];
|
|
|
|
const trainingItems: NavItem[] = [
|
|
{ title: "Vocabulary", url: "/admin/training/vocabulary", icon: BookA },
|
|
{ title: "Grammar", url: "/admin/training/grammar", icon: PenTool },
|
|
];
|
|
|
|
const configItems: NavItem[] = [
|
|
{ title: "FAQ Manager", url: "/admin/faq", icon: FaqIcon },
|
|
{ title: "Notification Rules", url: "/admin/notification-rules", icon: Bell },
|
|
{ title: "Approval Config", url: "/admin/approval-config", icon: Workflow },
|
|
];
|
|
|
|
const supportItems: NavItem[] = [
|
|
{ title: "Payment Record", url: "/admin/payment-record", icon: CreditCard },
|
|
{ title: "Tickets", url: "/admin/tickets", icon: Ticket },
|
|
{ title: "Settings", url: "/admin/settings-platform", icon: Settings },
|
|
];
|
|
|
|
// ============= Reusable sidebar group =============
|
|
function SidebarNavGroup({ label, items }: { label: string; items: NavItem[] }) {
|
|
const { state } = useSidebar();
|
|
const collapsed = state === "collapsed";
|
|
|
|
return (
|
|
<SidebarGroup>
|
|
<SidebarGroupLabel>{label}</SidebarGroupLabel>
|
|
<SidebarGroupContent>
|
|
<SidebarMenu>
|
|
{items.map((item) => (
|
|
<SidebarMenuItem key={item.url}>
|
|
<SidebarMenuButton asChild tooltip={item.title}>
|
|
<NavLink
|
|
to={item.url}
|
|
end={item.url.endsWith("/dashboard") || item.url.endsWith("/platform")}
|
|
className="flex items-center gap-2 px-2 py-1.5 rounded-md text-sm text-sidebar-foreground hover:bg-sidebar-accent transition-colors"
|
|
activeClassName="bg-sidebar-accent text-sidebar-accent-foreground font-medium"
|
|
>
|
|
<item.icon className="h-4 w-4 shrink-0" />
|
|
{!collapsed && <span>{item.title}</span>}
|
|
</NavLink>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
))}
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
);
|
|
}
|
|
|
|
// ============= Breadcrumbs =============
|
|
const routeLabels: Record<string, string> = {
|
|
admin: "Admin", dashboard: "Dashboard", platform: "Platform", courses: "Courses",
|
|
students: "Students", teachers: "Teachers", batches: "Batches", timetable: "Timetable",
|
|
reports: "Reports", assignments: "Assignments", examsList: "Exams List",
|
|
"exam-structures": "Exam Structures", rubrics: "Rubrics", generation: "Generation",
|
|
"approval-workflows": "Approval Workflows", users: "Users", entities: "Entities",
|
|
classrooms: "Classrooms", "student-performance": "Student Performance",
|
|
"stats-corporate": "Stats Corporate", record: "Record", training: "Training",
|
|
vocabulary: "Vocabulary", grammar: "Grammar", "payment-record": "Payment Record",
|
|
tickets: "Tickets", "settings-platform": "Settings", settings: "Settings",
|
|
profile: "Profile", exam: "Exam",
|
|
"academic-years": "Academic Years", departments: "Departments",
|
|
admissions: "Admissions", "admission-register": "Admission Register",
|
|
"exam-sessions": "Exam Sessions", marksheets: "Marksheets",
|
|
faq: "FAQ Manager", "notification-rules": "Notification Rules",
|
|
"approval-config": "Approval Config",
|
|
"student-leave": "Student Leave", fees: "Fees & Payments", lessons: "Lessons",
|
|
gradebook: "Gradebook", "student-progress": "Student Progress",
|
|
library: "Library", activities: "Activities", facilities: "Facilities",
|
|
};
|
|
|
|
function AppBreadcrumbs() {
|
|
const location = useLocation();
|
|
const segments = location.pathname.split("/").filter(Boolean);
|
|
|
|
return (
|
|
<Breadcrumb>
|
|
<BreadcrumbList>
|
|
<BreadcrumbItem>
|
|
<BreadcrumbLink asChild><Link to="/admin/dashboard">Home</Link></BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
{segments.map((seg, i) => {
|
|
const path = "/" + segments.slice(0, i + 1).join("/");
|
|
const label = routeLabels[seg] || seg.charAt(0).toUpperCase() + seg.slice(1);
|
|
const isLast = i === segments.length - 1;
|
|
return (
|
|
<React.Fragment key={path}>
|
|
<BreadcrumbSeparator />
|
|
<BreadcrumbItem>
|
|
{isLast ? <BreadcrumbPage>{label}</BreadcrumbPage> : <BreadcrumbLink asChild><Link to={path}>{label}</Link></BreadcrumbLink>}
|
|
</BreadcrumbItem>
|
|
</React.Fragment>
|
|
);
|
|
})}
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
);
|
|
}
|
|
|
|
// ============= Main Layout =============
|
|
export default function AdminLmsLayout() {
|
|
const { user, logout } = useAuth();
|
|
const navigate = useNavigate();
|
|
|
|
const initials = user?.name?.split(" ").map(w => w[0]).join("").slice(0, 2).toUpperCase() ?? "??";
|
|
|
|
const handleLogout = async () => {
|
|
await logout();
|
|
navigate("/login");
|
|
};
|
|
|
|
return (
|
|
<SidebarProvider>
|
|
<div className="min-h-screen flex w-full">
|
|
<AdminSidebar />
|
|
<div className="flex-1 flex flex-col min-w-0">
|
|
<header className="h-14 border-b bg-card flex items-center justify-between px-4 shrink-0">
|
|
<div className="flex items-center gap-3">
|
|
<SidebarTrigger />
|
|
<AppBreadcrumbs />
|
|
</div>
|
|
<AiSearchBar />
|
|
<div className="flex items-center gap-2">
|
|
<NotificationDropdown />
|
|
<Button variant="ghost" size="icon" onClick={() => navigate("/admin/tickets")} className="text-muted-foreground hover:text-foreground">
|
|
<Ticket className="h-4 w-4" />
|
|
</Button>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="rounded-full">
|
|
<div className="h-8 w-8 rounded-full bg-primary flex items-center justify-center">
|
|
<span className="text-xs font-semibold text-primary-foreground">{initials}</span>
|
|
</div>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-48">
|
|
<div className="px-3 py-2">
|
|
<p className="text-sm font-medium">{user?.name ?? "User"}</p>
|
|
<p className="text-xs text-muted-foreground">{user?.email ?? ""}</p>
|
|
</div>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={() => navigate("/admin/profile")}>
|
|
<User className="mr-2 h-4 w-4" /> Profile
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => navigate("/admin/settings-platform")}>
|
|
<Settings className="mr-2 h-4 w-4" /> Settings
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={handleLogout}>
|
|
<LogOut className="mr-2 h-4 w-4" /> Logout
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</header>
|
|
<main className="flex-1 overflow-auto p-6">
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<AiAssistantDrawer />
|
|
<Link
|
|
to="/admin/tickets"
|
|
className="fixed bottom-6 right-6 z-50 flex items-center gap-2 rounded-full bg-primary px-4 py-2.5 text-primary-foreground shadow-lg hover:opacity-90 transition-opacity"
|
|
>
|
|
<HelpCircle className="h-4 w-4" />
|
|
<span className="text-sm font-medium">Need help?</span>
|
|
</Link>
|
|
</SidebarProvider>
|
|
);
|
|
}
|
|
|
|
// ============= Admin Sidebar =============
|
|
function AdminSidebar() {
|
|
const { state } = useSidebar();
|
|
const collapsed = state === "collapsed";
|
|
const { user } = useAuth();
|
|
const { hasAnyPermission, isAdmin } = usePermissions();
|
|
|
|
const showManagement = isAdmin || hasAnyPermission(["view_entities", "view_students", "view_teachers"]);
|
|
const showReports = isAdmin || hasAnyPermission(["view_statistics", "view_student_performance", "view_entity_statistics"]);
|
|
const showPayments = isAdmin || hasAnyPermission(["view_payment_record", "pay_entity"]);
|
|
|
|
return (
|
|
<Sidebar collapsible="icon">
|
|
<SidebarHeader className="p-4">
|
|
<div className="flex items-center gap-2">
|
|
<img src="/logo.png" alt="EnCoach" className="h-8 w-8 rounded-lg shrink-0 object-contain" />
|
|
{!collapsed && (
|
|
<span className="text-lg font-bold tracking-tight text-sidebar-foreground">
|
|
<span className="text-[hsl(42,40%,62%)]">En</span>
|
|
<span>Coach</span>
|
|
</span>
|
|
)}
|
|
</div>
|
|
</SidebarHeader>
|
|
<SidebarSeparator />
|
|
<SidebarContent>
|
|
<SidebarNavGroup label="Overview" items={overviewItems} />
|
|
<SidebarNavGroup label="LMS" items={lmsItems} />
|
|
<SidebarNavGroup label="Adaptive Learning" items={adaptiveItems} />
|
|
<SidebarNavGroup label="Institutional" items={institutionalItems} />
|
|
<SidebarNavGroup label="Academic" items={academicItems} />
|
|
{showManagement && <SidebarNavGroup label="Management" items={managementItems} />}
|
|
{showReports && <SidebarNavGroup label="Reports" items={reportItems} />}
|
|
<SidebarNavGroup label="Configuration" items={configItems} />
|
|
|
|
<SidebarGroup>
|
|
<Collapsible defaultOpen className="group/collapsible">
|
|
<SidebarGroupLabel asChild>
|
|
<CollapsibleTrigger className="flex w-full items-center justify-between">
|
|
Training
|
|
{!collapsed && <ChevronDown className="h-4 w-4 transition-transform group-data-[state=open]/collapsible:rotate-180" />}
|
|
</CollapsibleTrigger>
|
|
</SidebarGroupLabel>
|
|
<CollapsibleContent>
|
|
<SidebarGroupContent>
|
|
<SidebarMenu>
|
|
{trainingItems.map((item) => (
|
|
<SidebarMenuItem key={item.url}>
|
|
<SidebarMenuButton asChild tooltip={item.title}>
|
|
<NavLink
|
|
to={item.url}
|
|
className="flex items-center gap-2 px-2 py-1.5 rounded-md text-sm text-sidebar-foreground hover:bg-sidebar-accent transition-colors"
|
|
activeClassName="bg-sidebar-accent text-sidebar-accent-foreground font-medium"
|
|
>
|
|
<item.icon className="h-4 w-4 shrink-0" />
|
|
{!collapsed && <span>{item.title}</span>}
|
|
</NavLink>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
))}
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
</SidebarGroup>
|
|
|
|
<SidebarNavGroup label="Support" items={showPayments ? supportItems : supportItems.filter(i => i.url !== "/admin/payment-record")} />
|
|
</SidebarContent>
|
|
<SidebarSeparator />
|
|
<SidebarFooter className="p-3">
|
|
<div className="flex items-center gap-2">
|
|
<div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
|
|
<span className="text-xs font-semibold text-primary">{user?.name?.split(" ").map(w => w[0]).join("").slice(0, 2).toUpperCase() ?? "??"}</span>
|
|
</div>
|
|
{!collapsed && (
|
|
<div className="flex flex-col min-w-0">
|
|
<span className="text-sm font-medium truncate text-sidebar-foreground">{user?.name ?? "User"}</span>
|
|
<span className="text-xs text-muted-foreground truncate">{user?.email ?? ""}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</SidebarFooter>
|
|
</Sidebar>
|
|
);
|
|
}
|