Abdullah Yusuf

1import { AreaChart, Area, ResponsiveContainer, Tooltip } from "recharts";
2
3interface CourseAnalyticsProps {
4  courseTitle: string;
5  completionData: { week: string; completions: number }[];
6  activeStudents: number;
7}
8
9/**
10 * Al-Bashir Academy LMS; Course analytics card.
11 * Part of the instructor-facing dashboard, built with Recharts.
12 */
13export function CourseAnalyticsCard(props: CourseAnalyticsProps) {
14  const { courseTitle, completionData, activeStudents } = props;
15
16  return (
17    <div className="analytics-card">
18      <header className="analytics-header">
19        <h3>{courseTitle}</h3>
20        <span className="active-count">{activeStudents} active students</span>
21      </header>
22
23      <div className="analytics-chart">
24        <ResponsiveContainer width="100%" height={140}>
25          <AreaChart data={completionData}>
26            <Tooltip />
27            <Area
28              type="monotone"
29              dataKey="completions"
30              stroke="var(--brand-gold)"
31              fill="var(--brand-gold)"
32              fillOpacity={0.15}
33            />
34          </AreaChart>
35        </ResponsiveContainer>
36      </div>
37
38      <footer className="analytics-footer">
39        <span>Weekly completions</span>
40      </footer>
41    </div>
42  );
43}