diff --git a/app/src/components/LmsPanel.jsx b/app/src/components/LmsPanel.jsx
new file mode 100644
index 0000000..1212309
--- /dev/null
+++ b/app/src/components/LmsPanel.jsx
@@ -0,0 +1,72 @@
+import React, { useState, useEffect } from 'react';
+
+export function LmsPanel() {
+ const [paths, setPaths] = useState([]);
+ const [certificates, setCertificates] = useState([]);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ async function fetchData() {
+ try {
+ const [pathsRes, certsRes] = await Promise.all([
+ fetch('/api/lms/paths').then(r => r.json()),
+ fetch('/api/lms/me').then(r => r.json()).catch(() => ({ certificates: [] }))
+ ]);
+ if (pathsRes.paths) setPaths(pathsRes.paths);
+ if (certsRes.certificates) setCertificates(certsRes.certificates);
+ } catch (err) {
+ console.error(err);
+ } finally {
+ setLoading(false);
+ }
+ }
+ fetchData();
+ }, []);
+
+ if (loading) return در حال بارگذاری دورهها...
;
+
+ return (
+
+
دورههای آموزشی و مسیرهای یادگیری
+
+ {certificates.length > 0 && (
+
+
گواهینامههای شما
+
+ {certificates.map(cert => (
+
+
{cert.path.title}
+
تاریخ صدور: {new Date(cert.issuedAt).toLocaleDateString('fa-IR')}
+
مشاهده گواهینامه ←
+
+ ))}
+
+
+ )}
+
+
مسیرهای یادگیری
+
+ {paths.map(path => (
+
+
{path.title}
+
{path.description}
+
+
سرفصلها:
+
+ {path.modules.map(mod => (
+ -
+ {mod.order}
+ {mod.article.title}
+ ({mod.article.readTime} دقیقه)
+
+ ))}
+
+
+
+ ))}
+
+