feat: institutional + support + training admin sections (backend + frontend)
Ship three fully-wired admin areas end-to-end with APIs, seeds, tests and docs. Backend (new `encoach_lms_api` addon + existing addons): - Institutional: academic years/terms, departments, admission registers & admissions, courses/batches, lessons, fees (terms + student fees + invoicing with income-account auto-wiring), gradebook (assignments/grades), library, facilities (encoach.asset), student leave, result templates + marksheets (incl. delete-with-cascade). - Support: `encoach.ticket` model + CRUD/assignee routes; payment records derived from `op.student.fees.details` and `account.move`; platform settings backed by `encoach.code` and `ir.config_parameter` (packages + grading config). - Training: `encoach.vocab.item` + `encoach.grammar.rule` (plus progress models) with CRUD, pagination, search/level filters, and upsert-style progress endpoints. Odoo 19 compatibility: `_sql_constraints` replaced with `@api.constrains`; `ValidationError`/`UserError` mapped to HTTP 400. Frontend: - Rewire institutional admin pages (Academic Year Manager, Admissions, Courses, Lessons, Fees, Gradebook, Library, Facilities, Student Leave, Marksheets, Taxonomy, Resources) to real APIs with React Query invalidation and dialogs. - New typed services: `payments.service.ts`, `platformSettings.service.ts`, `training.service.ts`. Updated `fees/gradebook/lms/courseware/taxonomy/ resources/student-progress/generation` services + related types. - Rewrite `VocabularyPage`, `GrammarPage`, `PaymentRecordPage`, `SettingsPage`, `TicketsPage` to consume live data with search/filter/progress/CRUD flows. - New shared components: `TaxonomyCascade`, `MaterialViewer`, `teacher/TeacherLibrary`. - Favicons/branding assets and misc. UX polish across teacher/student pages. Tooling & QA: - Seeders: `seed_demo.py`, `seed_demo_data.py`, `seed_institutional.py` (idempotent, covers institutional + support + training fixtures incl. income-account wiring). - API write-flow test suites: `test_write_flows.py` (institutional), `test_support_flows.py` (support), `test_training_flows.py` (training), `test_ai_full.py`. All suites pass end-to-end. - Docs: add `docs/PROJECT_SUMMARY.md` with per-section scope, artifacts and QA. - `.gitignore`: ignore `pgdata_bak_*/`, `frontend/.vite/`, `frontend/dist/`, `frontend/node_modules/`. Made-with: Cursor
This commit is contained in:
Yamen Ahmad
235
frontend/src/components/MaterialViewer.tsx
Normal file
235
frontend/src/components/MaterialViewer.tsx
Normal file
@@ -0,0 +1,235 @@
|
||||
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ExternalLink, Download, FileText, Video, Music, Image, Link2 } from "lucide-react";
|
||||
import { API_BASE_URL } from "@/lib/api-client";
|
||||
import type { ChapterMaterial, MaterialType } from "@/types/courseware";
|
||||
|
||||
interface MaterialViewerProps {
|
||||
material: ChapterMaterial | null;
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onDownload?: (materialId: number, name: string) => void;
|
||||
}
|
||||
|
||||
const typeLabels: Record<MaterialType, string> = {
|
||||
pdf: "PDF Document",
|
||||
document: "Document",
|
||||
video: "Video",
|
||||
audio: "Audio",
|
||||
image: "Image",
|
||||
link: "External Link",
|
||||
article: "Article",
|
||||
};
|
||||
|
||||
const typeIcons: Record<MaterialType, React.ReactNode> = {
|
||||
pdf: <FileText className="h-4 w-4" />,
|
||||
document: <FileText className="h-4 w-4" />,
|
||||
video: <Video className="h-4 w-4" />,
|
||||
audio: <Music className="h-4 w-4" />,
|
||||
image: <Image className="h-4 w-4" />,
|
||||
link: <Link2 className="h-4 w-4" />,
|
||||
article: <FileText className="h-4 w-4" />,
|
||||
};
|
||||
|
||||
function getContentUrl(materialId: number): string {
|
||||
const token = localStorage.getItem("encoach_token") ?? "";
|
||||
return `${API_BASE_URL}/materials/${materialId}/content?token=${token}`;
|
||||
}
|
||||
|
||||
function isYouTubeUrl(url: string): boolean {
|
||||
return /(?:youtube\.com\/(?:watch|embed)|youtu\.be\/)/.test(url);
|
||||
}
|
||||
|
||||
function getYouTubeEmbedUrl(url: string): string {
|
||||
const match = url.match(
|
||||
/(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([\w-]+)/
|
||||
);
|
||||
return match ? `https://www.youtube.com/embed/${match[1]}` : url;
|
||||
}
|
||||
|
||||
function PdfViewer({ material }: { material: ChapterMaterial }) {
|
||||
if (material.file_url) {
|
||||
return (
|
||||
<iframe
|
||||
src={getContentUrl(material.id)}
|
||||
className="w-full h-full min-h-[600px] rounded-lg border"
|
||||
title={material.name}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (material.url) {
|
||||
return (
|
||||
<iframe
|
||||
src={material.url}
|
||||
className="w-full h-full min-h-[600px] rounded-lg border"
|
||||
title={material.name}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return <EmptyState message="No PDF file available." />;
|
||||
}
|
||||
|
||||
function VideoViewer({ material }: { material: ChapterMaterial }) {
|
||||
if (material.url && isYouTubeUrl(material.url)) {
|
||||
return (
|
||||
<iframe
|
||||
src={getYouTubeEmbedUrl(material.url)}
|
||||
className="w-full aspect-video rounded-lg border"
|
||||
title={material.name}
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (material.url) {
|
||||
return (
|
||||
<video
|
||||
src={material.url}
|
||||
controls
|
||||
className="w-full rounded-lg border"
|
||||
title={material.name}
|
||||
>
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
);
|
||||
}
|
||||
if (material.file_url) {
|
||||
return (
|
||||
<video
|
||||
src={getContentUrl(material.id)}
|
||||
controls
|
||||
className="w-full rounded-lg border"
|
||||
title={material.name}
|
||||
>
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
);
|
||||
}
|
||||
return <EmptyState message="No video source available." />;
|
||||
}
|
||||
|
||||
function AudioViewer({ material }: { material: ChapterMaterial }) {
|
||||
const src = material.url || (material.file_url ? getContentUrl(material.id) : null);
|
||||
if (!src) return <EmptyState message="No audio source available." />;
|
||||
return (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<audio src={src} controls className="w-full max-w-lg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ImageViewer({ material }: { material: ChapterMaterial }) {
|
||||
const src = material.url || (material.file_url ? getContentUrl(material.id) : null);
|
||||
if (!src) return <EmptyState message="No image available." />;
|
||||
return (
|
||||
<div className="flex items-center justify-center">
|
||||
<img
|
||||
src={src}
|
||||
alt={material.name}
|
||||
className="max-w-full max-h-[70vh] rounded-lg border object-contain"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ArticleViewer({ material }: { material: ChapterMaterial }) {
|
||||
if (!material.description) return <EmptyState message="No article content available." />;
|
||||
return (
|
||||
<div className="prose prose-sm dark:prose-invert max-w-none p-4 rounded-lg border bg-card">
|
||||
<div className="whitespace-pre-wrap">{material.description}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function LinkViewer({ material }: { material: ChapterMaterial }) {
|
||||
if (!material.url) return <EmptyState message="No URL available." />;
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2 p-4 rounded-lg border bg-muted/50">
|
||||
<Link2 className="h-5 w-5 text-primary shrink-0" />
|
||||
<a
|
||||
href={material.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary underline break-all flex-1"
|
||||
>
|
||||
{material.url}
|
||||
</a>
|
||||
<Button variant="outline" size="sm" asChild>
|
||||
<a href={material.url} target="_blank" rel="noopener noreferrer">
|
||||
<ExternalLink className="h-4 w-4 mr-1" /> Open
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
<iframe
|
||||
src={material.url}
|
||||
className="w-full min-h-[500px] rounded-lg border"
|
||||
title={material.name}
|
||||
sandbox="allow-scripts allow-same-origin"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function EmptyState({ message }: { message: string }) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
|
||||
<FileText className="h-12 w-12 mb-3 opacity-40" />
|
||||
<p>{message}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const viewers: Record<MaterialType, React.FC<{ material: ChapterMaterial }>> = {
|
||||
pdf: PdfViewer,
|
||||
document: PdfViewer,
|
||||
video: VideoViewer,
|
||||
audio: AudioViewer,
|
||||
image: ImageViewer,
|
||||
link: LinkViewer,
|
||||
article: ArticleViewer,
|
||||
};
|
||||
|
||||
export default function MaterialViewer({ material, open, onOpenChange, onDownload }: MaterialViewerProps) {
|
||||
if (!material) return null;
|
||||
|
||||
const Viewer = viewers[material.type] ?? ArticleViewer;
|
||||
|
||||
return (
|
||||
<Sheet open={open} onOpenChange={onOpenChange}>
|
||||
<SheetContent side="right" className="w-full sm:max-w-2xl lg:max-w-4xl overflow-y-auto">
|
||||
<SheetHeader className="space-y-3 pb-4 border-b">
|
||||
<div className="flex items-center gap-2">
|
||||
{typeIcons[material.type]}
|
||||
<Badge variant="outline">{typeLabels[material.type]}</Badge>
|
||||
</div>
|
||||
<SheetTitle className="text-lg">{material.name}</SheetTitle>
|
||||
{material.description && material.type !== "article" && (
|
||||
<p className="text-sm text-muted-foreground">{material.description}</p>
|
||||
)}
|
||||
<div className="flex gap-2">
|
||||
{material.allow_download && material.file_url && onDownload && (
|
||||
<Button variant="outline" size="sm" onClick={() => onDownload(material.id, material.name)}>
|
||||
<Download className="h-4 w-4 mr-1" /> Download
|
||||
</Button>
|
||||
)}
|
||||
{material.url && (
|
||||
<Button variant="outline" size="sm" asChild>
|
||||
<a href={material.url} target="_blank" rel="noopener noreferrer">
|
||||
<ExternalLink className="h-4 w-4 mr-1" /> Open Link
|
||||
</a>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</SheetHeader>
|
||||
|
||||
<div className="mt-6">
|
||||
<Viewer material={material} />
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
);
|
||||
}
|
||||
143
frontend/src/components/TaxonomyCascade.tsx
Normal file
143
frontend/src/components/TaxonomyCascade.tsx
Normal file
@@ -0,0 +1,143 @@
|
||||
import { useEffect } from "react";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { taxonomyService } from "@/services/taxonomy.service";
|
||||
import { lmsService } from "@/services/lms.service";
|
||||
|
||||
interface TaxonomyCascadeProps {
|
||||
subjectId: string;
|
||||
onSubjectChange: (id: string) => void;
|
||||
domainId: string;
|
||||
onDomainChange: (id: string) => void;
|
||||
topicIds: number[];
|
||||
onTopicIdsChange: (ids: number[]) => void;
|
||||
objectiveIds: number[];
|
||||
onObjectiveIdsChange: (ids: number[]) => void;
|
||||
}
|
||||
|
||||
export function TaxonomyCascade({
|
||||
subjectId, onSubjectChange,
|
||||
domainId, onDomainChange,
|
||||
topicIds, onTopicIdsChange,
|
||||
objectiveIds, onObjectiveIdsChange,
|
||||
}: TaxonomyCascadeProps) {
|
||||
const { data: subjects } = useQuery({
|
||||
queryKey: ["taxonomy", "subjects"],
|
||||
queryFn: () => taxonomyService.listSubjects(),
|
||||
});
|
||||
|
||||
const numericSubjectId = subjectId !== "none" ? Number(subjectId) : undefined;
|
||||
const numericDomainId = domainId !== "none" ? Number(domainId) : undefined;
|
||||
|
||||
const { data: domains } = useQuery({
|
||||
queryKey: ["taxonomy", "domains", numericSubjectId],
|
||||
queryFn: () => taxonomyService.listDomains({ subject_id: numericSubjectId }),
|
||||
enabled: !!numericSubjectId,
|
||||
});
|
||||
|
||||
const { data: topics } = useQuery({
|
||||
queryKey: ["taxonomy", "topics", numericDomainId],
|
||||
queryFn: () => taxonomyService.listTopics({ domain_id: numericDomainId }),
|
||||
enabled: !!numericDomainId,
|
||||
});
|
||||
|
||||
const { data: objectivesData } = useQuery({
|
||||
queryKey: ["learning-objectives", topicIds],
|
||||
queryFn: () => lmsService.listLearningObjectives({ topic_ids: topicIds.join(",") }),
|
||||
enabled: topicIds.length > 0,
|
||||
});
|
||||
const objectives = objectivesData?.items ?? [];
|
||||
|
||||
useEffect(() => {
|
||||
if (subjectId === "none") {
|
||||
if (domainId !== "none") onDomainChange("none");
|
||||
if (topicIds.length > 0) onTopicIdsChange([]);
|
||||
if (objectiveIds.length > 0) onObjectiveIdsChange([]);
|
||||
}
|
||||
}, [subjectId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (domainId === "none") {
|
||||
if (topicIds.length > 0) onTopicIdsChange([]);
|
||||
if (objectiveIds.length > 0) onObjectiveIdsChange([]);
|
||||
}
|
||||
}, [domainId]);
|
||||
|
||||
const toggleTopic = (id: number) => {
|
||||
const next = topicIds.includes(id) ? topicIds.filter(t => t !== id) : [...topicIds, id];
|
||||
onTopicIdsChange(next);
|
||||
if (next.length === 0 && objectiveIds.length > 0) onObjectiveIdsChange([]);
|
||||
};
|
||||
|
||||
const toggleObjective = (id: number) => {
|
||||
onObjectiveIdsChange(
|
||||
objectiveIds.includes(id) ? objectiveIds.filter(o => o !== id) : [...objectiveIds, id],
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs">Subject</Label>
|
||||
<Select value={subjectId} onValueChange={(v) => { onSubjectChange(v); if (v === "none") { onDomainChange("none"); } }}>
|
||||
<SelectTrigger className="h-8 text-sm"><SelectValue placeholder="Select subject" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">None</SelectItem>
|
||||
{(subjects ?? []).map(s => <SelectItem key={s.id} value={String(s.id)}>{s.name}</SelectItem>)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs">Domain</Label>
|
||||
<Select value={domainId} onValueChange={onDomainChange} disabled={!numericSubjectId}>
|
||||
<SelectTrigger className="h-8 text-sm"><SelectValue placeholder={numericSubjectId ? "Select domain" : "Select subject first"} /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">None</SelectItem>
|
||||
{(domains ?? []).map(d => <SelectItem key={d.id} value={String(d.id)}>{d.name}</SelectItem>)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{numericDomainId && (topics ?? []).length > 0 && (
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs">Topics</Label>
|
||||
<div className="flex flex-wrap gap-1.5 p-2 rounded border bg-muted/30 max-h-[100px] overflow-y-auto">
|
||||
{(topics ?? []).map(t => (
|
||||
<Badge
|
||||
key={t.id}
|
||||
variant={topicIds.includes(t.id) ? "default" : "outline"}
|
||||
className="cursor-pointer select-none text-xs"
|
||||
onClick={() => toggleTopic(t.id)}
|
||||
>
|
||||
{t.name}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{topicIds.length > 0 && objectives.length > 0 && (
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs">Learning Objectives</Label>
|
||||
<div className="space-y-1 p-2 rounded border bg-muted/30 max-h-[100px] overflow-y-auto">
|
||||
{objectives.map(o => (
|
||||
<label key={o.id} className="flex items-center gap-2 text-xs cursor-pointer">
|
||||
<Checkbox
|
||||
checked={objectiveIds.includes(o.id)}
|
||||
onCheckedChange={() => toggleObjective(o.id)}
|
||||
/>
|
||||
<span>{o.name}</span>
|
||||
{o.bloom_level && <Badge variant="outline" className="text-[10px] h-4">{o.bloom_level}</Badge>}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -2,7 +2,7 @@ import RoleLayout, { NavGroup } from "./RoleLayout";
|
||||
import {
|
||||
LayoutDashboard, BookOpen, ClipboardList, FileText,
|
||||
CalendarCheck, Users, Calendar, User, MessageSquare,
|
||||
Megaphone, Wand2,
|
||||
Megaphone, Wand2, Library,
|
||||
} from "lucide-react";
|
||||
|
||||
const navGroups: NavGroup[] = [
|
||||
@@ -11,6 +11,7 @@ const navGroups: NavGroup[] = [
|
||||
items: [
|
||||
{ title: "Dashboard", url: "/teacher/dashboard", icon: LayoutDashboard },
|
||||
{ title: "Courses", url: "/teacher/courses", icon: BookOpen },
|
||||
{ title: "Resource Library", url: "/teacher/library", icon: Library },
|
||||
{ title: "Assignments", url: "/teacher/assignments", icon: ClipboardList },
|
||||
],
|
||||
},
|
||||
|
||||
@@ -35,6 +35,7 @@ const DialogContent = React.forwardRef<
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Content
|
||||
ref={ref}
|
||||
aria-describedby={props["aria-describedby"] ?? undefined}
|
||||
className={cn(
|
||||
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
|
||||
className,
|
||||
|
||||
Reference in New Issue
Block a user