e1f059069f
Frontend - i18n: install tailwindcss-rtl, Cairo font, RTL-aware direction in index.css. - Language toggle: localize aria-label / menu label, persist choice, update document dir synchronously. - Sidebar: add `side` prop so the drawer pins to the right in RTL; wire up AdminLmsLayout, RoleLayout (student/teacher) and AppSidebar to pass side = i18n.dir() === 'rtl' ? 'right' : 'left'. - AdminLmsLayout: convert every nav item from hard-coded title to titleKey, translate group labels (incl. the collapsible Training), breadcrumbs, user menu (Profile / Settings / Logout), help button and toggle aria labels; replace physical mr-/right- utilities with logical me-/end-. - AI components (AiTipBanner, AiInsightsPanel, AiAlertBanner, AiSearchBar, AiAssistantDrawer): apply dir="auto" at the container level, localize titles, loading / error / empty states. - Dashboards (admin / student / teacher): wrap numeric values in <bdi>, localize dates via ar-EG, fix flex direction for KPI and assignment cards. - UI primitives (breadcrumb, calendar, carousel, dropdown-menu, menubar, context-menu, pagination, sidebar): flip chevrons in RTL via a scoped CSS rule, swap pl-/pr-/ml-/mr- for ps-/pe-/ms-/me-. - Add logical-direction helpers and bidirectional isolation classes. Locales - Expand en.ts and ar.ts with full `nav`, `sidebarGroup`, `breadcrumb`, `userMenu`, `chrome`, `ai`, and dashboard key sets; keep key parity. API client - `api-client.ts` reads the active language from localStorage/i18n and sends `Accept-Language` on every request so the backend can localize AI output. Backend (encoach_ai) - openai_service: add _LANGUAGE_NAMES, normalize_language, language-aware system prompt injection for every OpenAI call. - coach_service + controllers (coach_controller, ai_controller): thread the requested language from headers / user locale down to OpenAIService. - ai_feedback: fix latent registry error by pointing course_id at op.course instead of the non-existent encoach.course. Other - .gitignore: ignore runtime odoo logs and local caches. Made-with: Cursor
394 lines
18 KiB
TypeScript
394 lines
18 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 { ThemeToggle } from "@/components/ThemeToggle";
|
|
import { LanguageToggle } from "@/components/LanguageToggle";
|
|
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, Sparkles,
|
|
} from "lucide-react";
|
|
import React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
// ============= Navigation Config =============
|
|
// Items store i18n keys (`titleKey`) rather than literal strings so Arabic
|
|
// language switches update the sidebar without the component having to
|
|
// re-mount.
|
|
interface NavItem { titleKey: string; url: string; icon: LucideIcon }
|
|
|
|
const overviewItems: NavItem[] = [
|
|
{ titleKey: "nav.adminDashboard", url: "/admin/dashboard", icon: LayoutDashboard },
|
|
{ titleKey: "nav.platformDashboard", url: "/admin/platform", icon: BarChart3 },
|
|
];
|
|
|
|
const lmsItems: NavItem[] = [
|
|
{ titleKey: "nav.courses", url: "/admin/courses", icon: BookOpen },
|
|
{ titleKey: "nav.students", url: "/admin/students", icon: Users },
|
|
{ titleKey: "nav.teachers", url: "/admin/teachers", icon: GraduationCap },
|
|
{ titleKey: "nav.batches", url: "/admin/batches", icon: Layers },
|
|
{ titleKey: "nav.timetable", url: "/admin/timetable", icon: Calendar },
|
|
{ titleKey: "nav.reports", url: "/admin/reports", icon: BarChart3 },
|
|
];
|
|
|
|
const academicItems: NavItem[] = [
|
|
{ titleKey: "nav.assignments", url: "/admin/assignments", icon: ClipboardList },
|
|
{ titleKey: "nav.examsList", url: "/admin/examsList", icon: FileText },
|
|
{ titleKey: "nav.examStructures", url: "/admin/exam-structures", icon: Layers },
|
|
{ titleKey: "nav.rubrics", url: "/admin/rubrics", icon: BookOpen },
|
|
{ titleKey: "nav.generation", url: "/admin/generation", icon: Wand2 },
|
|
{ titleKey: "nav.reviewQueue", url: "/admin/exam/review-queue", icon: Sparkles },
|
|
{ titleKey: "nav.aiPrompts", url: "/admin/ai/prompts", icon: Wand2 },
|
|
{ titleKey: "nav.aiFeedback", url: "/admin/ai/feedback", icon: Sparkles },
|
|
{ titleKey: "nav.approvalWorkflows", url: "/admin/approval-workflows", icon: GitBranch },
|
|
];
|
|
|
|
const adaptiveItems: NavItem[] = [
|
|
{ titleKey: "nav.taxonomy", url: "/admin/taxonomy", icon: Target },
|
|
{ titleKey: "nav.resources", url: "/admin/resources", icon: FolderOpen },
|
|
];
|
|
|
|
const institutionalItems: NavItem[] = [
|
|
{ titleKey: "nav.academicYears", url: "/admin/academic-years", icon: CalendarDays },
|
|
{ titleKey: "nav.departments", url: "/admin/departments", icon: Landmark },
|
|
{ titleKey: "nav.admissions", url: "/admin/admissions", icon: UserPlus },
|
|
{ titleKey: "nav.admissionRegister", url: "/admin/admission-register", icon: ScrollText },
|
|
{ titleKey: "nav.examSessions", url: "/admin/exam-sessions", icon: FileText },
|
|
{ titleKey: "nav.marksheets", url: "/admin/marksheets", icon: Award },
|
|
{ titleKey: "nav.studentLeave", url: "/admin/student-leave", icon: CalendarOff },
|
|
{ titleKey: "nav.fees", url: "/admin/fees", icon: DollarSign },
|
|
{ titleKey: "nav.lessons", url: "/admin/lessons", icon: BookMarked },
|
|
{ titleKey: "nav.gradebook", url: "/admin/gradebook", icon: BarChartHorizontal },
|
|
{ titleKey: "nav.studentProgress", url: "/admin/student-progress", icon: TrendingUp },
|
|
{ titleKey: "nav.library", url: "/admin/library", icon: Library },
|
|
{ titleKey: "nav.activities", url: "/admin/activities", icon: Activity },
|
|
{ titleKey: "nav.facilities", url: "/admin/facilities", icon: Warehouse },
|
|
];
|
|
|
|
const managementItems: NavItem[] = [
|
|
{ titleKey: "nav.users", url: "/admin/users", icon: Users },
|
|
{ titleKey: "nav.entities", url: "/admin/entities", icon: Building2 },
|
|
{ titleKey: "nav.classrooms", url: "/admin/classrooms", icon: GraduationCap },
|
|
{ titleKey: "nav.userRoles", url: "/admin/user-roles", icon: UserCog },
|
|
{ titleKey: "nav.rolesPermissions", url: "/admin/roles-permissions", icon: Settings },
|
|
{ titleKey: "nav.authorityMatrix", url: "/admin/authority-matrix", icon: Workflow },
|
|
];
|
|
|
|
const reportItems: NavItem[] = [
|
|
{ titleKey: "nav.studentPerformance", url: "/admin/student-performance", icon: BarChart3 },
|
|
{ titleKey: "nav.statsCorporate", url: "/admin/stats-corporate", icon: Building2 },
|
|
{ titleKey: "nav.record", url: "/admin/record", icon: History },
|
|
];
|
|
|
|
const trainingItems: NavItem[] = [
|
|
{ titleKey: "nav.vocabulary", url: "/admin/training/vocabulary", icon: BookA },
|
|
{ titleKey: "nav.grammar", url: "/admin/training/grammar", icon: PenTool },
|
|
];
|
|
|
|
const configItems: NavItem[] = [
|
|
{ titleKey: "nav.faqManager", url: "/admin/faq", icon: FaqIcon },
|
|
{ titleKey: "nav.notificationRules", url: "/admin/notification-rules", icon: Bell },
|
|
{ titleKey: "nav.approvalConfig", url: "/admin/approval-config", icon: Workflow },
|
|
];
|
|
|
|
const supportItems: NavItem[] = [
|
|
{ titleKey: "nav.paymentRecord", url: "/admin/payment-record", icon: CreditCard },
|
|
{ titleKey: "nav.tickets", url: "/admin/tickets", icon: Ticket },
|
|
{ titleKey: "nav.settings", url: "/admin/settings-platform", icon: Settings },
|
|
];
|
|
|
|
// ============= Reusable sidebar group =============
|
|
function SidebarNavGroup({ labelKey, items }: { labelKey: string; items: NavItem[] }) {
|
|
const { state } = useSidebar();
|
|
const { t } = useTranslation();
|
|
const collapsed = state === "collapsed";
|
|
|
|
return (
|
|
<SidebarGroup>
|
|
<SidebarGroupLabel>{t(labelKey)}</SidebarGroupLabel>
|
|
<SidebarGroupContent>
|
|
<SidebarMenu>
|
|
{items.map((item) => {
|
|
const label = t(item.titleKey);
|
|
return (
|
|
<SidebarMenuItem key={item.url}>
|
|
<SidebarMenuButton asChild tooltip={label}>
|
|
<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>{label}</span>}
|
|
</NavLink>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
);
|
|
})}
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
);
|
|
}
|
|
|
|
// ============= Breadcrumbs =============
|
|
// Map URL segments to i18n keys so breadcrumbs follow the active locale.
|
|
// Segments without an entry fall back to a Title-cased version of the slug.
|
|
const routeLabelKeys: Record<string, string> = {
|
|
admin: "breadcrumb.admin", dashboard: "breadcrumb.dashboard",
|
|
platform: "breadcrumb.platform", courses: "nav.courses",
|
|
students: "nav.students", teachers: "nav.teachers", batches: "nav.batches",
|
|
timetable: "nav.timetable", reports: "nav.reports",
|
|
assignments: "nav.assignments", examsList: "nav.examsList",
|
|
"exam-structures": "nav.examStructures", rubrics: "nav.rubrics",
|
|
generation: "nav.generation", "review-queue": "nav.reviewQueue",
|
|
review: "breadcrumb.review", prompts: "nav.aiPrompts", ai: "breadcrumb.ai",
|
|
feedback: "breadcrumb.feedback",
|
|
"approval-workflows": "nav.approvalWorkflows", users: "nav.users",
|
|
entities: "nav.entities", classrooms: "nav.classrooms",
|
|
"student-performance": "nav.studentPerformance",
|
|
"stats-corporate": "nav.statsCorporate", record: "nav.record",
|
|
training: "sidebarGroup.training", vocabulary: "nav.vocabulary",
|
|
grammar: "nav.grammar", "payment-record": "nav.paymentRecord",
|
|
tickets: "nav.tickets", "settings-platform": "nav.settings",
|
|
settings: "nav.settings", profile: "nav.profile", exam: "breadcrumb.exam",
|
|
"academic-years": "nav.academicYears", departments: "nav.departments",
|
|
admissions: "nav.admissions", "admission-register": "nav.admissionRegister",
|
|
"exam-sessions": "nav.examSessions", marksheets: "nav.marksheets",
|
|
faq: "nav.faqManager", "notification-rules": "nav.notificationRules",
|
|
"approval-config": "nav.approvalConfig",
|
|
"student-leave": "nav.studentLeave", fees: "nav.fees",
|
|
lessons: "nav.lessons", gradebook: "nav.gradebook",
|
|
"student-progress": "nav.studentProgress", library: "nav.library",
|
|
activities: "nav.activities", facilities: "nav.facilities",
|
|
};
|
|
|
|
function AppBreadcrumbs() {
|
|
const location = useLocation();
|
|
const { t } = useTranslation();
|
|
const segments = location.pathname.split("/").filter(Boolean);
|
|
|
|
return (
|
|
<Breadcrumb>
|
|
<BreadcrumbList>
|
|
<BreadcrumbItem>
|
|
<BreadcrumbLink asChild><Link to="/admin/dashboard">{t("common.home")}</Link></BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
{segments.map((seg, i) => {
|
|
const path = "/" + segments.slice(0, i + 1).join("/");
|
|
const key = routeLabelKeys[seg];
|
|
const label = key ? t(key) : 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 { t } = useTranslation();
|
|
|
|
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 aria-label={t("chrome.toggleSidebar")} />
|
|
<AppBreadcrumbs />
|
|
</div>
|
|
<AiSearchBar />
|
|
<div className="flex items-center gap-2">
|
|
<LanguageToggle />
|
|
<ThemeToggle />
|
|
<NotificationDropdown />
|
|
<Button variant="ghost" size="icon" aria-label={t("chrome.ticketsTooltip")} 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 ?? t("userMenu.userFallback")}</p>
|
|
<p className="text-xs text-muted-foreground">{user?.email ?? ""}</p>
|
|
</div>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={() => navigate("/admin/profile")}>
|
|
<User className="me-2 h-4 w-4" /> {t("userMenu.profile")}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => navigate("/admin/settings-platform")}>
|
|
<Settings className="me-2 h-4 w-4" /> {t("userMenu.settings")}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={handleLogout}>
|
|
<LogOut className="me-2 h-4 w-4" /> {t("userMenu.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 end-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">{t("chrome.needHelp")}</span>
|
|
</Link>
|
|
</SidebarProvider>
|
|
);
|
|
}
|
|
|
|
// ============= Admin Sidebar =============
|
|
function AdminSidebar() {
|
|
const { state } = useSidebar();
|
|
const collapsed = state === "collapsed";
|
|
const { user } = useAuth();
|
|
const { hasAnyPermission, isAdmin } = usePermissions();
|
|
const { t, i18n } = useTranslation();
|
|
const sidebarSide = i18n.dir() === "rtl" ? "right" : "left";
|
|
|
|
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 side={sidebarSide} collapsible="icon">
|
|
<SidebarHeader className="p-4">
|
|
<div className="flex items-center gap-2">
|
|
{collapsed ? (
|
|
<img
|
|
src="/logo.png"
|
|
alt={t("chrome.adminAlt")}
|
|
className="h-9 w-9 shrink-0 rounded-lg object-contain"
|
|
/>
|
|
) : (
|
|
<img
|
|
src="/logo.png"
|
|
alt={t("chrome.adminAltLong")}
|
|
className="h-14 w-auto shrink-0 object-contain"
|
|
/>
|
|
)}
|
|
</div>
|
|
</SidebarHeader>
|
|
<SidebarSeparator />
|
|
<SidebarContent>
|
|
<SidebarNavGroup labelKey="sidebarGroup.overview" items={overviewItems} />
|
|
<SidebarNavGroup labelKey="sidebarGroup.lms" items={lmsItems} />
|
|
<SidebarNavGroup labelKey="sidebarGroup.adaptiveLearning" items={adaptiveItems} />
|
|
<SidebarNavGroup labelKey="sidebarGroup.institutional" items={institutionalItems} />
|
|
<SidebarNavGroup labelKey="sidebarGroup.academic" items={academicItems} />
|
|
{showManagement && <SidebarNavGroup labelKey="sidebarGroup.management" items={managementItems} />}
|
|
{showReports && <SidebarNavGroup labelKey="sidebarGroup.reports" items={reportItems} />}
|
|
<SidebarNavGroup labelKey="sidebarGroup.configuration" items={configItems} />
|
|
|
|
<SidebarGroup>
|
|
<Collapsible defaultOpen className="group/collapsible">
|
|
<SidebarGroupLabel asChild>
|
|
<CollapsibleTrigger className="flex w-full items-center justify-between">
|
|
{t("sidebarGroup.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) => {
|
|
const label = t(item.titleKey);
|
|
return (
|
|
<SidebarMenuItem key={item.url}>
|
|
<SidebarMenuButton asChild tooltip={label}>
|
|
<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>{label}</span>}
|
|
</NavLink>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
);
|
|
})}
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
</SidebarGroup>
|
|
|
|
<SidebarNavGroup labelKey="sidebarGroup.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 ?? t("userMenu.userFallback")}</span>
|
|
<span className="text-xs text-muted-foreground truncate">{user?.email ?? ""}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</SidebarFooter>
|
|
</Sidebar>
|
|
);
|
|
}
|