feat: Implement organization branding, course pacing, and display upcoming deadlines in the experience portal.

web/experience/src/app/courses/[id]/calendar/page.tsx

@@ -0,0 +1,208 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { lmsApi, Course, Lesson, Module } from "@/lib/api";
+import Link from "next/link";
+import {
+    Calendar as CalendarIcon,
+    ChevronLeft,
+    ChevronRight,
+    ChevronRight as ChevronRightIcon,
+    AlertCircle,
+    Clock,
+    CheckCircle2
+} from "lucide-react";
+
+export default function StudentCalendarPage({ params }: { params: { id: string } }) {
+    const [course, setCourse] = useState<(Course & { modules: Module[] }) | null>(null);
+    const [lessons, setLessons] = useState<Lesson[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [currentDate, setCurrentDate] = useState(new Date());
+
+    useEffect(() => {
+        const loadData = async () => {
+            try {
+                const courseData = await lmsApi.getCourseOutline(params.id);
+                setCourse(courseData);
+
+                // Flatten lessons from modules
+                const allLessons: Lesson[] = [];
+                courseData.modules?.forEach(mod => {
+                    mod.lessons.forEach(lesson => {
+                        allLessons.push(lesson);
+                    });
+                });
+                setLessons(allLessons);
+            } catch (err) {
+                console.error("Failed to load course data", err);
+            } finally {
+                setLoading(false);
+            }
+        };
+        loadData();
+    }, [params.id]);
+
+    const getDaysInMonth = (year: number, month: number) => new Date(year, month + 1, 0).getDate();
+    const getFirstDayOfMonth = (year: number, month: number) => new Date(year, month, 1).getDay();
+
+    const renderCalendar = () => {
+        const year = currentDate.getFullYear();
+        const month = currentDate.getMonth();
+        const daysInMonth = getDaysInMonth(year, month);
+        const firstDay = getFirstDayOfMonth(year, month);
+        const days = [];
+
+        // Padding
+        for (let i = 0; i < firstDay; i++) {
+            days.push(<div key={`empty-${i}`} className="h-28 border border-white/5 bg-white/[0.01]"></div>);
+        }
+
+        // Days
+        for (let day = 1; day <= daysInMonth; day++) {
+            const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+            const dayLessons = lessons.filter(l => l.due_date && l.due_date.startsWith(dateStr));
+            const isToday = new Date().toDateString() === new Date(year, month, day).toDateString();
+
+            days.push(
+                <div key={day} className={`h-28 border border-white/5 p-2 relative hover:bg-white/5 transition-colors group ${isToday ? 'bg-blue-500/5' : ''}`}>
+                    <span className={`text-sm font-black ${isToday ? 'text-blue-400' : 'text-gray-600'}`}>
+                        {day}
+                        {isToday && <span className="ml-2 text-[8px] uppercase tracking-widest px-1.5 py-0.5 bg-blue-500 text-white rounded">Today</span>}
+                    </span>
+                    <div className="mt-1 space-y-1 overflow-y-auto max-h-20">
+                        {dayLessons.map(lesson => (
+                            <Link key={lesson.id} href={`/courses/${params.id}/lessons/${lesson.id}`}>
+                                <div
+                                    className={`text-[9px] p-1 rounded truncate flex items-center gap-1 mb-1 border transition-all hover:scale-[1.02] ${lesson.important_date_type === 'exam' ? 'bg-red-500/10 text-red-400 border-red-500/20' :
+                                            lesson.important_date_type === 'assignment' ? 'bg-blue-500/10 text-blue-400 border-blue-500/20' :
+                                                'bg-green-500/10 text-green-400 border-green-500/20'
+                                        }`}
+                                >
+                                    <span className="w-1 h-1 rounded-full bg-current"></span>
+                                    {lesson.title}
+                                </div>
+                            </Link>
+                        ))}
+                    </div>
+                </div>
+            );
+        }
+
+        return days;
+    };
+
+    const nextMonth = () => setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1));
+    const prevMonth = () => setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1));
+
+    if (loading) return <div className="py-20 text-center animate-pulse text-gray-500 font-bold uppercase tracking-widest text-xs">Syncing your timeline...</div>;
+    if (!course) return <div className="text-center py-20 text-red-400">Course not found.</div>;
+
+    const monthName = currentDate.toLocaleString('default', { month: 'long' });
+    const year = currentDate.getFullYear();
+
+    return (
+        <div className="max-w-6xl mx-auto px-6 py-20">
+            <div className="mb-12 flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
+                <div>
+                    <div className="flex items-center gap-2 mb-4 text-blue-500 font-bold text-xs uppercase tracking-widest">
+                        <Link href={`/courses/${params.id}`} className="hover:text-white transition-colors">Outline</Link>
+                        <ChevronRightIcon size={14} className="text-gray-600" />
+                        <span>Timeline</span>
+                    </div>
+                    <h1 className="text-4xl font-black tracking-tight mb-2">Course <span className="text-blue-500">Timeline</span></h1>
+                    <p className="text-gray-500 font-medium">{course.title}</p>
+                </div>
+
+                <div className="flex flex-wrap gap-4">
+                    <div className="flex items-center gap-2 px-4 py-2 rounded-full border border-white/5 bg-white/2 text-[10px] font-black uppercase tracking-widest text-gray-400">
+                        <div className="w-2 h-2 rounded-full bg-red-500"></div> Exam
+                    </div>
+                    <div className="flex items-center gap-2 px-4 py-2 rounded-full border border-white/5 bg-white/2 text-[10px] font-black uppercase tracking-widest text-gray-400">
+                        <div className="w-2 h-2 rounded-full bg-blue-500"></div> Assignment
+                    </div>
+                    <div className="flex items-center gap-2 px-4 py-2 rounded-full border border-white/5 bg-white/2 text-[10px] font-black uppercase tracking-widest text-gray-400">
+                        <div className="w-2 h-2 rounded-full bg-green-500"></div> Task
+                    </div>
+                </div>
+            </div>
+
+            <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
+                <div className="lg:col-span-3">
+                    <div className="glass-card bg-white/[0.01] border-white/5 p-6 rounded-3xl overflow-hidden shadow-2xl">
+                        <div className="flex items-center justify-between mb-8">
+                            <h3 className="text-xl font-black uppercase tracking-tight italic">{monthName} {year}</h3>
+                            <div className="flex items-center gap-2 bg-white/5 rounded-2xl p-1 border border-white/10">
+                                <button onClick={prevMonth} className="p-2 hover:bg-white/10 rounded-xl transition-colors"><ChevronLeft className="w-5 h-5" /></button>
+                                <button onClick={() => setCurrentDate(new Date())} className="px-4 py-1 text-[10px] font-black uppercase tracking-widest hover:text-blue-400 transition-colors">Today</button>
+                                <button onClick={nextMonth} className="p-2 hover:bg-white/10 rounded-xl transition-colors"><ChevronRight className="w-5 h-5" /></button>
+                            </div>
+                        </div>
+
+                        <div className="grid grid-cols-7 border-t border-l border-white/5 rounded-2xl overflow-hidden">
+                            {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => (
+                                <div key={day} className="bg-white/5 py-4 text-center text-[10px] font-black uppercase tracking-widest text-gray-600 border-r border-b border-white/5">
+                                    {day}
+                                </div>
+                            ))}
+                            {renderCalendar()}
+                        </div>
+                    </div>
+                </div>
+
+                <div className="space-y-8">
+                    <div className="glass-card p-8 border-blue-500/20 bg-blue-500/5 rounded-3xl relative overflow-hidden">
+                        <div className="relative z-10">
+                            <h4 className="text-xs font-black uppercase tracking-[0.2em] text-blue-400 mb-6 flex items-center gap-2">
+                                <AlertCircle size={14} /> Upcoming Deadlines
+                            </h4>
+                            <div className="space-y-6">
+                                {lessons
+                                    .filter(l => l.due_date && new Date(l.due_date) >= new Date())
+                                    .sort((a, b) => new Date(a.due_date!).getTime() - new Date(b.due_date!).getTime())
+                                    .slice(0, 5)
+                                    .map(lesson => (
+                                        <Link key={lesson.id} href={`/courses/${params.id}/lessons/${lesson.id}`} className="block group">
+                                            <div className="text-[10px] font-black uppercase tracking-widest text-gray-500 mb-1 flex justify-between">
+                                                <span>{lesson.important_date_type || 'Activity'}</span>
+                                                <span className="text-blue-500 font-black">{new Date(lesson.due_date!).toLocaleDateString()}</span>
+                                            </div>
+                                            <div className="font-bold text-sm group-hover:text-blue-400 transition-colors">{lesson.title}</div>
+                                        </Link>
+                                    ))
+                                }
+                                {lessons.filter(l => l.due_date && new Date(l.due_date) >= new Date()).length === 0 && (
+                                    <div className="text-xs text-gray-600 italic py-4">No upcoming deadlines. You are all caught up!</div>
+                                )}
+                            </div>
+                        </div>
+                        <div className="absolute -bottom-10 -right-10 w-40 h-40 bg-blue-500/10 blur-[60px] rounded-full"></div>
+                    </div>
+
+                    <div className="glass-card p-8 border-white/5 bg-white/[0.01] rounded-3xl">
+                        <h4 className="text-xs font-black uppercase tracking-[0.2em] text-gray-500 mb-6 flex items-center gap-2">
+                            <Clock size={14} /> Course Pace
+                        </h4>
+                        <div className="space-y-4">
+                            <div className="flex items-center justify-between">
+                                <span className="text-xs font-medium text-gray-600">Mode</span>
+                                <span className="text-xs font-black uppercase tracking-widest text-white">{course.pacing_mode.replace('_', '-')}</span>
+                            </div>
+                            {course.start_date && (
+                                <div className="flex items-center justify-between">
+                                    <span className="text-xs font-medium text-gray-600">Start Date</span>
+                                    <span className="text-xs font-black text-white">{new Date(course.start_date).toLocaleDateString()}</span>
+                                </div>
+                            )}
+                            {course.end_date && (
+                                <div className="flex items-center justify-between">
+                                    <span className="text-xs font-medium text-gray-600">End Date</span>
+                                    <span className="text-xs font-black text-white">{new Date(course.end_date).toLocaleDateString()}</span>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

web/experience/src/app/courses/[id]/page.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react";
 import { lmsApi, Course, Module } from "@/lib/api";
 import Link from "next/link";
-import { BookOpen, ChevronRight, PlayCircle } from "lucide-react";
+import { BookOpen, ChevronRight, PlayCircle, Calendar, Clock, Info } from "lucide-react";
 
 export default function CourseOutlinePage({ params }: { params: { id: string } }) {
     const [courseData, setCourseData] = useState<(Course & { modules: Module[] }) | null>(null);
@@ -45,6 +45,25 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
                     {courseData.description || "Master the core principles and advanced techniques in this structured curriculum. Each module is designed to provide actionable insights and hands-on experience."}
                 </p>
 
+                <div className="flex flex-wrap items-center gap-4 mb-10">
+                    <div className={`flex items-center gap-2 px-4 py-2 rounded-full border text-xs font-bold uppercase tracking-widest ${courseData.pacing_mode === 'instructor_led' ? 'bg-purple-500/10 border-purple-500/30 text-purple-400' : 'bg-blue-500/10 border-blue-500/30 text-blue-400'
+                        }`}>
+                        {courseData.pacing_mode === 'instructor_led' ? <Clock size={14} /> : <Info size={14} />}
+                        {courseData.pacing_mode === 'instructor_led' ? 'Instructor-Led' : 'Self-Paced'}
+                    </div>
+
+                    {courseData.pacing_mode === 'instructor_led' && (courseData.start_date || courseData.end_date) && (
+                        <div className="flex items-center gap-4 text-xs font-bold text-gray-500 uppercase tracking-widest">
+                            <Calendar size={14} />
+                            <span>
+                                {courseData.start_date ? new Date(courseData.start_date).toLocaleDateString() : 'TBD'}
+                                <span className="mx-2 text-gray-700">→</span>
+                                {courseData.end_date ? new Date(courseData.end_date).toLocaleDateString() : 'TBD'}
+                            </span>
+                        </div>
+                    )}
+                </div>
+
                 <div className="flex items-center justify-between">
                     <div className="flex items-center gap-8">
                         <div className="flex flex-col">
@@ -60,11 +79,18 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
                         </div>
                     </div>
 
-                    <Link href={`/courses/${params.id}/progress`}>
-                        <button className="px-8 py-3 glass hover:border-blue-500/50 transition-all font-bold text-xs uppercase tracking-widest flex items-center gap-3 active:scale-95">
-                            📊 View Progress
-                        </button>
-                    </Link>
+                    <div className="flex gap-2">
+                        <Link href={`/courses/${params.id}/calendar`}>
+                            <button className="px-6 py-3 glass hover:border-blue-500/50 transition-all font-bold text-xs uppercase tracking-widest flex items-center gap-3 active:scale-95">
+                                <Calendar size={16} /> Timeline
+                            </button>
+                        </Link>
+                        <Link href={`/courses/${params.id}/progress`}>
+                            <button className="px-8 py-3 glass hover:border-blue-500/50 transition-all font-bold text-xs uppercase tracking-widest flex items-center gap-3 active:scale-95">
+                                📊 Progress
+                            </button>
+                        </Link>
+                    </div>
                 </div>
             </div>
 
@@ -98,8 +124,18 @@ export default function CourseOutlinePage({ params }: { params: { id: string } }
                                                     </span>
                                                 </div>
                                             </div>
-                                            <div className="opacity-0 group-hover:opacity-100 transition-opacity">
-                                                <ChevronRight size={18} className="text-blue-500" />
+                                            <div className="flex items-center gap-6">
+                                                {lesson.due_date && (
+                                                    <div className="text-right hidden sm:block">
+                                                        <div className="text-[9px] font-black uppercase tracking-widest text-gray-600">Deadline</div>
+                                                        <div className={`text-[10px] font-bold ${new Date(lesson.due_date) < new Date() ? 'text-red-400' : 'text-blue-400'}`}>
+                                                            {new Date(lesson.due_date).toLocaleDateString()}
+                                                        </div>
+                                                    </div>
+                                                )}
+                                                <div className="opacity-0 group-hover:opacity-100 transition-opacity">
+                                                    <ChevronRight size={18} className="text-blue-500" />
+                                                </div>
                                             </div>
                                         </div>
                                     </div>

web/experience/src/app/globals.css

@@ -7,8 +7,12 @@
   --background-start-rgb: 10, 10, 20;
   --background-end-rgb: 0, 0, 0;
 
-  --accent-primary: #3b82f6;
-  --accent-secondary: #8b5cf6;
+  /* Branding Defaults */
+  --primary-color: #3b82f6;
+  --secondary-color: #8b5cf6;
+
+  --accent-primary: var(--primary-color);
+  --accent-secondary: var(--secondary-color);
   --glass-bg: rgba(255, 255, 255, 0.03);
   --glass-border: rgba(255, 255, 255, 0.08);
   --glass-blur: blur(16px);

web/experience/src/app/layout.tsx

@@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import Link from "next/link";
 import { AuthProvider } from "@/context/AuthContext";
+import { BrandingProvider, useBranding } from "@/context/BrandingContext";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -11,6 +12,36 @@ export const metadata: Metadata = {
   description: "Consume high-fidelity educational content with OpenCCB",
 };
 
+function AppHeader() {
+  const { branding } = useBranding();
+
+  return (
+    <header className="h-16 glass sticky top-0 z-50 px-6 flex items-center justify-between backdrop-blur-xl bg-black/40 border-b border-white/5">
+      <Link href="/" className="flex items-center gap-3 group">
+        <div className="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center font-black text-white shadow-lg shadow-blue-500/20 group-hover:scale-105 transition-all overflow-hidden relative">
+          {branding?.logo_url ? (
+            <img src={branding.logo_url} alt={branding.name} className="w-full h-full object-contain" />
+          ) : (
+            <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-blue-500 to-blue-700">L</div>
+          )}
+        </div>
+        <div className="flex flex-col -gap-1">
+          <span className="font-black text-lg tracking-tighter text-white leading-none">
+            {branding?.name?.toUpperCase() || 'LEARN'}
+          </span>
+          {!branding && <span className="text-[10px] font-black tracking-widest text-blue-500 uppercase">EXPERIENCE</span>}
+        </div>
+      </Link>
+
+      <nav className="hidden md:flex items-center gap-8">
+        <Link href="/" className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-400 hover:text-white transition-colors">Catalog</Link>
+        <Link href="#" className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-400 hover:text-white transition-colors">My Learning</Link>
+        <div className="w-8 h-8 rounded-full bg-white/5 border border-white/10" />
+      </nav>
+    </header>
+  );
+}
+
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -19,34 +50,19 @@ export default function RootLayout({
   return (
     <html lang="en" className="dark">
       <body className={`${inter.className} bg-[#050505] text-[#e5e5e5] min-h-screen flex flex-col`}>
-        <AuthProvider>
-          {/* Header */}
-          <header className="h-16 glass sticky top-0 z-50 px-6 flex items-center justify-between border-b border-white/5 backdrop-blur-xl bg-black/40">
-            <Link href="/" className="flex items-center gap-2 group">
-              <div className="w-8 h-8 rounded-lg bg-blue-600 flex items-center justify-center font-black text-white shadow-lg shadow-blue-500/20 group-hover:scale-105 transition-transform">
-                L
-              </div>
-              <span className="font-black text-xl tracking-tighter text-white">LEARN<span className="text-blue-500">EXPERIENCE</span></span>
-            </Link>
-
-            <nav className="hidden md:flex items-center gap-8">
-              <Link href="/" className="text-xs font-black uppercase tracking-widest text-gray-400 hover:text-white transition-colors">Catalog</Link>
-              <Link href="#" className="text-xs font-black uppercase tracking-widest text-gray-400 hover:text-white transition-colors">My Learning</Link>
-              <div className="w-8 h-8 rounded-full bg-white/5 border border-white/10" />
-            </nav>
-          </header>
-
-          <main className="flex-1">
-            {children}
-          </main>
-
-          {/* Footer */}
-          <footer className="py-12 px-6 border-t border-white/5 text-center bg-black/20">
-            <p className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-600">
-              Powered by OpenCCB &copy; 2023. Advanced Agentic Coding.
-            </p>
-          </footer>
-        </AuthProvider>
+        <BrandingProvider>
+          <AuthProvider>
+            <AppHeader />
+            <main className="flex-1">
+              {children}
+            </main>
+            <footer className="py-12 px-6 border-t border-white/5 text-center bg-black/20">
+              <p className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-600">
+                Powered by OpenCCB &copy; 2023. Advanced Agentic Coding.
+              </p>
+            </footer>
+          </AuthProvider>
+        </BrandingProvider>
       </body>
     </html>
   );

web/experience/src/app/page.tsx

@@ -1,17 +1,18 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { lmsApi, Course } from "@/lib/api";
+import { lmsApi, Course, Lesson } from "@/lib/api";
 import Link from "next/link";
 import { useAuth } from "@/context/AuthContext";
 import { useRouter } from "next/navigation";
-import { Rocket, CheckCircle2, ArrowRight, Star } from "lucide-react";
+import { Rocket, CheckCircle2, ArrowRight, Star, Calendar, Clock, AlertCircle } from "lucide-react";
 
 export default function CatalogPage() {
   const [courses, setCourses] = useState<Course[]>([]);
   const [enrollments, setEnrollments] = useState<string[]>([]);
   const [loading, setLoading] = useState(true);
   const [gamification, setGamification] = useState<{ points: number, badges: any[] } | null>(null);
+  const [upcomingDeadlines, setUpcomingDeadlines] = useState<{ lesson: Lesson, courseTitle: string }[]>([]);
 
   const { user } = useAuth();
   const router = useRouter();
@@ -28,6 +29,24 @@ export default function CatalogPage() {
 
           const gamificationData = await lmsApi.getGamification(user.id);
           setGamification(gamificationData);
+
+          // Fetch deadlines for enrolled courses
+          const deadlines: { lesson: Lesson, courseTitle: string }[] = [];
+          for (const enrollment of enrollmentData) {
+            try {
+              const outline = await lmsApi.getCourseOutline(enrollment.course_id);
+              outline.modules.forEach(mod => {
+                mod.lessons.forEach(l => {
+                  if (l.due_date && new Date(l.due_date) >= new Date()) {
+                    deadlines.push({ lesson: l, courseTitle: outline.title });
+                  }
+                });
+              });
+            } catch (err) {
+              console.error(`Failed to fetch outline for course ${enrollment.course_id}`, err);
+            }
+          }
+          setUpcomingDeadlines(deadlines.sort((a, b) => new Date(a.lesson.due_date!).getTime() - new Date(b.lesson.due_date!).getTime()).slice(0, 3));
         }
       } catch (err) {
         console.error(err);
@@ -115,7 +134,33 @@ export default function CatalogPage() {
               )}
             </div>
             {/* Visual Flair */}
-            <div className="absolute -bottom-10 -right-10 w-40 h-40 bg-blue-500/5 blur-[80px] rounded-full"></div>
+          </div>
+        </div>
+      )}
+
+      {user && upcomingDeadlines.length > 0 && (
+        <div className="mb-16 animate-in fade-in slide-in-from-top-4 duration-700 delay-200">
+          <h3 className="text-xs font-black uppercase tracking-[0.3em] text-gray-500 mb-6 flex items-center gap-2">
+            <Calendar size={14} /> Upcoming Deadlines
+          </h3>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {upcomingDeadlines.map(({ lesson, courseTitle }) => (
+              <Link key={lesson.id} href={`/courses/${lesson.module_id}/lessons/${lesson.id}`} className="group">
+                <div className="glass-card p-6 border-blue-500/10 bg-blue-500/2 rounded-3xl hover:border-blue-500/30 transition-all">
+                  <div className="flex justify-between items-start mb-4">
+                    <div className="text-[10px] font-black uppercase tracking-widest text-blue-400 group-hover:text-blue-300 transition-colors">
+                      {lesson.important_date_type || 'Activity'}
+                    </div>
+                    <div className="text-right">
+                      <div className="text-xs font-black text-white">{new Date(lesson.due_date!).toLocaleDateString()}</div>
+                      <div className="text-[8px] font-bold text-gray-600 uppercase tracking-widest">Deadline</div>
+                    </div>
+                  </div>
+                  <h4 className="font-bold text-sm text-gray-200 mb-1 group-hover:text-white transition-colors line-clamp-1">{lesson.title}</h4>
+                  <p className="text-[10px] text-gray-500 font-bold uppercase tracking-widest">{courseTitle}</p>
+                </div>
+              </Link>
+            ))}
           </div>
         </div>
       )}

web/experience/src/context/BrandingContext.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { lmsApi, Organization } from '@/lib/api';
+
+interface BrandingContextType {
+    branding: Organization | null;
+    loading: boolean;
+}
+
+const BrandingContext = createContext<BrandingContextType>({
+    branding: null,
+    loading: true,
+});
+
+export const useBranding = () => useContext(BrandingContext);
+
+export const BrandingProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+    const [branding, setBranding] = useState<Organization | null>(null);
+    const [loading, setLoading] = useState(true);
+
+    const orgId = process.env.NEXT_PUBLIC_ORG_ID || '00000000-0000-0000-0000-000000000001';
+
+    useEffect(() => {
+        const loadBranding = async () => {
+            try {
+                const data = await lmsApi.getBranding(orgId);
+                setBranding(data);
+
+                // Apply CSS variables
+                if (data.primary_color) {
+                    document.documentElement.style.setProperty('--primary-color', data.primary_color);
+                }
+                if (data.secondary_color) {
+                    document.documentElement.style.setProperty('--secondary-color', data.secondary_color);
+                }
+            } catch (error) {
+                console.error('Failed to load branding', error);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        loadBranding();
+    }, [orgId]);
+
+    return (
+        <BrandingContext.Provider value={{ branding, loading }}>
+            {children}
+        </BrandingContext.Provider>
+    );
+};

web/experience/src/lib/api.ts

@@ -1,4 +1,13 @@
 export const API_BASE_URL = process.env.NEXT_PUBLIC_LMS_API_URL || "http://localhost:3002";
+export const CMS_API_URL = process.env.NEXT_PUBLIC_CMS_API_URL || "http://localhost:3001";
+
+export interface Organization {
+    id: string;
+    name: string;
+    logo_url?: string;
+    primary_color?: string;
+    secondary_color?: string;
+}
 
 export interface Course {
     id: string;
@@ -7,6 +16,9 @@ export interface Course {
     instructor_id: string;
     passing_percentage: number;
     certificate_template?: string;
+    pacing_mode: string;
+    start_date?: string;
+    end_date?: string;
     created_at: string;
 }
 
@@ -55,6 +67,8 @@ export interface Lesson {
     max_attempts: number | null;
     allow_retry: boolean;
     position: number;
+    due_date?: string;
+    important_date_type?: 'exam' | 'assignment' | 'milestone' | 'live-session';
     created_at: string;
 }
 
@@ -177,5 +191,11 @@ export const lmsApi = {
         const response = await fetch(`${API_BASE_URL}/users/${userId}/gamification`);
         if (!response.ok) throw new Error('Failed to fetch gamification data');
         return response.json();
+    },
+
+    async getBranding(orgId: string): Promise<Organization> {
+        const response = await fetch(`${CMS_API_URL}/organizations/${orgId}/branding`);
+        if (!response.ok) throw new Error('Failed to fetch branding');
+        return response.json();
     }
 };