feat(i18n,rtl): full Arabic localization + RTL sweep across all layouts
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
This commit is contained in:
Yamen Ahmad
@@ -3,6 +3,7 @@ import { Button } from "@/components/ui/button";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { Users, BookOpen, GraduationCap, Layers, Ticket, DollarSign, Plus, BarChart3, FolderOpen } from "lucide-react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useCourses, useBatches, useStudents, useTeachers } from "@/hooks/queries";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { api } from "@/lib/api-client";
|
||||
@@ -32,6 +33,7 @@ interface DashboardStats {
|
||||
}
|
||||
|
||||
export default function AdminLmsDashboard() {
|
||||
const { t } = useTranslation();
|
||||
const { data: coursesData, isLoading: lc } = useCourses();
|
||||
const { data: studentsData, isLoading: ls } = useStudents({ size: 500 });
|
||||
const { data: teachersData, isLoading: lt } = useTeachers({ size: 500 });
|
||||
@@ -58,12 +60,12 @@ export default function AdminLmsDashboard() {
|
||||
const openTickets = dbStats?.open_tickets ?? 0;
|
||||
|
||||
const statCards = [
|
||||
{ label: "Total Students", value: String(students.length), icon: Users, color: "text-primary" },
|
||||
{ label: "Active Courses", value: `${courses.filter(c => c.status === "active").length} / ${courses.length}`, icon: BookOpen, color: "text-info" },
|
||||
{ label: "Teachers", value: String(teachers.length), icon: GraduationCap, color: "text-success" },
|
||||
{ label: "Active Batches", value: `${batches.filter(b => b.status === "active").length} / ${batches.length}`, icon: Layers, color: "text-warning" },
|
||||
{ label: "Open Tickets", value: String(openTickets), icon: Ticket, color: "text-destructive" },
|
||||
{ label: "Revenue", value: `$${revenue.toLocaleString()}`, icon: DollarSign, color: "text-success" },
|
||||
{ label: t("adminDash.totalStudents"), value: String(students.length), icon: Users, color: "text-primary" },
|
||||
{ label: t("adminDash.activeCourses"), value: `${courses.filter(c => c.status === "active").length} / ${courses.length}`, icon: BookOpen, color: "text-info" },
|
||||
{ label: t("adminDash.teachers"), value: String(teachers.length), icon: GraduationCap, color: "text-success" },
|
||||
{ label: t("adminDash.activeBatches"), value: `${batches.filter(b => b.status === "active").length} / ${batches.length}`, icon: Layers, color: "text-warning" },
|
||||
{ label: t("adminDash.openTickets"), value: String(openTickets), icon: Ticket, color: "text-destructive" },
|
||||
{ label: t("adminDash.revenue"), value: `$${revenue.toLocaleString()}`, icon: DollarSign, color: "text-success" },
|
||||
];
|
||||
|
||||
const courseChartData = courses.map(c => {
|
||||
@@ -82,12 +84,16 @@ export default function AdminLmsDashboard() {
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Admin Dashboard</h1>
|
||||
<p className="text-muted-foreground">Platform overview and key metrics.</p>
|
||||
<h1 className="text-2xl font-bold">{t("adminDash.title")}</h1>
|
||||
<p className="text-muted-foreground">{t("adminDash.subtitle")}</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" asChild><Link to="/admin/students"><Plus className="mr-1 h-3 w-3" />Add Student</Link></Button>
|
||||
<Button asChild><Link to="/admin/courses"><Plus className="mr-1 h-3 w-3" />New Course</Link></Button>
|
||||
<Button variant="outline" asChild>
|
||||
<Link to="/admin/students"><Plus className="me-1 h-3 w-3" />{t("adminDash.addStudent")}</Link>
|
||||
</Button>
|
||||
<Button asChild>
|
||||
<Link to="/admin/courses"><Plus className="me-1 h-3 w-3" />{t("adminDash.newCourse")}</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -99,7 +105,7 @@ export default function AdminLmsDashboard() {
|
||||
<Card key={s.label}>
|
||||
<CardContent className="pt-4 pb-4">
|
||||
<s.icon className={`h-5 w-5 ${s.color} mb-1`} />
|
||||
<p className="text-lg font-bold">{s.value}</p>
|
||||
<p className="text-lg font-bold"><bdi>{s.value}</bdi></p>
|
||||
<p className="text-xs text-muted-foreground">{s.label}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
@@ -108,16 +114,16 @@ export default function AdminLmsDashboard() {
|
||||
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
||||
{[
|
||||
{ label: "Departments", value: dbStats?.total_departments ?? 0, icon: FolderOpen },
|
||||
{ label: "Classrooms", value: dbStats?.total_classrooms ?? 0, icon: BarChart3 },
|
||||
{ label: "Subjects", value: dbStats?.total_subjects ?? 0, icon: BookOpen },
|
||||
{ label: "Resources", value: dbStats?.total_resources ?? 0, icon: Layers },
|
||||
{ label: t("adminDash.departments"), value: dbStats?.total_departments ?? 0, icon: FolderOpen },
|
||||
{ label: t("adminDash.classrooms"), value: dbStats?.total_classrooms ?? 0, icon: BarChart3 },
|
||||
{ label: t("adminDash.subjects"), value: dbStats?.total_subjects ?? 0, icon: BookOpen },
|
||||
{ label: t("adminDash.resources"), value: dbStats?.total_resources ?? 0, icon: Layers },
|
||||
].map(s => (
|
||||
<Card key={s.label}>
|
||||
<CardContent className="pt-3 pb-3 flex items-center gap-3">
|
||||
<s.icon className="h-4 w-4 text-muted-foreground" />
|
||||
<div>
|
||||
<p className="text-sm font-semibold">{s.value}</p>
|
||||
<s.icon className="h-4 w-4 text-muted-foreground shrink-0" />
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-semibold"><bdi>{s.value}</bdi></p>
|
||||
<p className="text-xs text-muted-foreground">{s.label}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
@@ -127,7 +133,7 @@ export default function AdminLmsDashboard() {
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<Card>
|
||||
<CardHeader><CardTitle className="text-lg">Courses Overview</CardTitle></CardHeader>
|
||||
<CardHeader><CardTitle className="text-lg">{t("adminDash.coursesOverview")}</CardTitle></CardHeader>
|
||||
<CardContent>
|
||||
{courseChartData.length > 0 ? (
|
||||
<ResponsiveContainer width="100%" height={220}>
|
||||
@@ -136,18 +142,18 @@ export default function AdminLmsDashboard() {
|
||||
<XAxis dataKey="course" className="fill-muted-foreground" tick={{ fontSize: 10 }} />
|
||||
<YAxis className="fill-muted-foreground" tick={{ fontSize: 12 }} />
|
||||
<Tooltip />
|
||||
<Bar dataKey="capacity" name="Capacity" fill="hsl(var(--primary))" radius={[4, 4, 0, 0]} />
|
||||
<Bar dataKey="enrolled" name="Enrolled" fill="hsl(var(--info))" radius={[4, 4, 0, 0]} />
|
||||
<Bar dataKey="capacity" name={t("adminDash.chartCapacity")} fill="hsl(var(--primary))" radius={[4, 4, 0, 0]} />
|
||||
<Bar dataKey="enrolled" name={t("adminDash.chartEnrolled")} fill="hsl(var(--info))" radius={[4, 4, 0, 0]} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground py-8 text-center">No course data available.</p>
|
||||
<p className="text-sm text-muted-foreground py-8 text-center">{t("adminDash.noCourseData")}</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader><CardTitle className="text-lg">Batch Capacity</CardTitle></CardHeader>
|
||||
<CardHeader><CardTitle className="text-lg">{t("adminDash.batchCapacity")}</CardTitle></CardHeader>
|
||||
<CardContent>
|
||||
{batchChartData.length > 0 ? (
|
||||
<ResponsiveContainer width="100%" height={220}>
|
||||
@@ -156,11 +162,11 @@ export default function AdminLmsDashboard() {
|
||||
<XAxis dataKey="batch" className="fill-muted-foreground" tick={{ fontSize: 10 }} />
|
||||
<YAxis className="fill-muted-foreground" tick={{ fontSize: 12 }} />
|
||||
<Tooltip />
|
||||
<Bar dataKey="capacity" name="Capacity" fill="hsl(var(--info))" radius={[4, 4, 0, 0]} />
|
||||
<Bar dataKey="capacity" name={t("adminDash.chartCapacity")} fill="hsl(var(--info))" radius={[4, 4, 0, 0]} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground py-8 text-center">No batch data available.</p>
|
||||
<p className="text-sm text-muted-foreground py-8 text-center">{t("adminDash.noBatchData")}</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
@@ -168,31 +174,43 @@ export default function AdminLmsDashboard() {
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||||
<CardTitle className="text-lg">Quick Summary</CardTitle>
|
||||
<CardTitle className="text-lg">{t("adminDash.quickSummary")}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader><TableRow><TableHead>Module</TableHead><TableHead className="text-right">Count</TableHead><TableHead>Status</TableHead></TableRow></TableHeader>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>{t("adminDash.colModule")}</TableHead>
|
||||
<TableHead className="text-end">{t("adminDash.colCount")}</TableHead>
|
||||
<TableHead>{t("adminDash.colStatus")}</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell className="font-medium">Exams</TableCell>
|
||||
<TableCell className="text-right">{dbStats?.total_exams ?? 0}</TableCell>
|
||||
<TableCell className="text-muted-foreground">{dbStats?.total_exam_sessions ?? 0} sessions</TableCell>
|
||||
<TableCell className="font-medium">{t("adminDash.exams")}</TableCell>
|
||||
<TableCell className="text-end"><bdi>{dbStats?.total_exams ?? 0}</bdi></TableCell>
|
||||
<TableCell className="text-muted-foreground">
|
||||
{t("adminDash.examSessionsCount", { n: dbStats?.total_exam_sessions ?? 0 })}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell className="font-medium">Assignments</TableCell>
|
||||
<TableCell className="text-right">{dbStats?.total_assignments ?? 0}</TableCell>
|
||||
<TableCell className="text-muted-foreground">across courses</TableCell>
|
||||
<TableCell className="font-medium">{t("adminDash.assignments")}</TableCell>
|
||||
<TableCell className="text-end"><bdi>{dbStats?.total_assignments ?? 0}</bdi></TableCell>
|
||||
<TableCell className="text-muted-foreground">{t("adminDash.acrossCourses")}</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell className="font-medium">Support Tickets</TableCell>
|
||||
<TableCell className="text-right">{dbStats?.total_tickets ?? 0}</TableCell>
|
||||
<TableCell className="text-muted-foreground">{openTickets} open</TableCell>
|
||||
<TableCell className="font-medium">{t("adminDash.supportTickets")}</TableCell>
|
||||
<TableCell className="text-end"><bdi>{dbStats?.total_tickets ?? 0}</bdi></TableCell>
|
||||
<TableCell className="text-muted-foreground">
|
||||
{t("adminDash.ticketsOpenCount", { n: openTickets })}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell className="font-medium">Payments</TableCell>
|
||||
<TableCell className="text-right">{dbStats?.total_payments ?? 0}</TableCell>
|
||||
<TableCell className="text-muted-foreground">${revenue.toLocaleString()} total</TableCell>
|
||||
<TableCell className="font-medium">{t("adminDash.payments")}</TableCell>
|
||||
<TableCell className="text-end"><bdi>{dbStats?.total_payments ?? 0}</bdi></TableCell>
|
||||
<TableCell className="text-muted-foreground">
|
||||
{t("adminDash.revenueTotal", { amount: `$${revenue.toLocaleString()}` })}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
Reference in New Issue
Block a user