feat: Implement multi-tenancy with new database migrations, API updates across services, and refactor frontend API calls.

web/studio/src/app/page.tsx

@@ -1,137 +1,87 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
 import { cmsApi, Course } from "@/lib/api";
 import Link from "next/link";
 import { useAuth } from "@/context/AuthContext";
+import { Plus, BookOpen } from "lucide-react";
 
-export default function Home() {
-  const router = useRouter();
-  const { user } = useAuth();
+export default function StudioDashboard() {
   const [courses, setCourses] = useState<Course[]>([]);
-  const [mounted, setMounted] = useState(false);
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+  const { user } = useAuth();
 
   useEffect(() => {
-    setMounted(true);
-
-    // Authentication handled by AuthContext or manual check
-    // We keep this manual check as a legacy safe-guard or rely on AuthContext if we trust it fully.
-    // Given previous edits, we know AuthContext works.
-    if (typeof window !== 'undefined' && !localStorage.getItem("studio_user")) {
-      router.push("/auth/login");
-      return;
-    }
-
-    // Fetch courses
     const loadCourses = async () => {
+      if (!user) {
+        setLoading(false);
+        return;
+      };
       try {
-        setLoading(true);
         const data = await cmsApi.getCourses();
         setCourses(data);
-        setError(null);
       } catch (err) {
-        console.error("Failed to fetch courses:", err);
-        setError("Could not connect to CMS service. showing offline mode.");
+        console.error("Failed to load courses", err);
       } finally {
         setLoading(false);
       }
     };
-
     loadCourses();
-  }, [router]);
-
+  }, [user]);
 
   const handleCreateCourse = async () => {
-    const title = prompt("Enter course title:");
-    if (!title) return;
-
-    try {
-      const newCourse = await cmsApi.createCourse(title);
-      setCourses([...courses, newCourse]);
-    } catch {
-      alert("Failed to create course. Is the backend running?");
+    const title = prompt("Enter new course title:");
+    if (title) {
+      try {
+        const newCourse = await cmsApi.createCourse(title);
+        setCourses(prev => [...prev, newCourse]);
+      } catch (err) {
+        alert("Failed to create course. Please ensure the backend is running.");
+      }
     }
   };
 
-  const placeholderCourses: Course[] = [
-    {
-      id: "p1",
-      title: "Introduction to Rust (Demo)",
-      description: "A demo course to get started",
-      instructor_id: "demo",
-      passing_percentage: 70,
-      certificate_template: undefined,
-      created_at: new Date().toISOString()
-    },
-  ];
-
-  const displayCourses = courses.length > 0 ? courses : (loading ? [] : placeholderCourses);
-
   return (
-    <div className="space-y-8">
-      <div className="flex justify-between items-center">
-        <div>
-          <h2 className="text-3xl font-bold">My Courses</h2>
-          <p className="text-gray-400">Manage and create your learning content</p>
-        </div>
-        <div className="flex items-center gap-4">
-          {user?.role === 'admin' && (
-            <Link href="/admin/audit">
-              <button className="px-4 py-2 text-sm font-bold text-gray-400 hover:text-white border border-white/10 hover:border-white/30 rounded-lg transition-colors flex items-center gap-2">
-                🛡️ Audit Logs
-              </button>
-            </Link>
-          )}
-          <button onClick={handleCreateCourse} className="btn-premium">
-            + New Course
-          </button>
-        </div>
+    <div className="p-8">
+      <div className="flex justify-between items-center mb-8">
+        <h1 className="text-3xl font-bold">My Courses</h1>
+        <button onClick={handleCreateCourse} className="btn-premium flex items-center gap-2">
+          <Plus size={18} />
+          New Course
+        </button>
       </div>
 
-      {error && (
-        <div className="bg-red-500/10 border border-red-500/50 p-4 rounded-lg text-red-400 text-sm">
-          {error}
+      {loading ? (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {[1, 2, 3].map(i => (
+            <div key={i} className="h-64 glass-card animate-pulse bg-white/5 border-white/5"></div>
+          ))}
+        </div>
+      ) : courses.length === 0 ? (
+        <div className="text-center py-20 glass-card border-dashed border-white/10">
+          <p className="text-gray-500">You haven't created any courses yet.</p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {courses.map(course => (
+            <Link href={`/courses/${course.id}`} key={course.id}>
+              <div className="glass-card h-full flex flex-col group hover:border-blue-500/50 transition-all">
+                <div className="flex-1">
+                  <div className="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center mb-4">
+                    <BookOpen className="text-blue-400" />
+                  </div>
+                  <h3 className="font-bold text-lg mb-2 group-hover:text-blue-400 transition-colors">{course.title}</h3>
+                  <p className="text-sm text-gray-400 line-clamp-2">{course.description || "No description provided."}</p>
+                </div>
+                <div className="flex items-center justify-between mt-6 pt-4 border-t border-white/5 text-xs text-gray-500">
+                  <span>Last updated: {new Date(course.updated_at).toLocaleDateString()}</span>
+                  <span>ID: {course.id.slice(0, 4)}...</span>
+                </div>
+              </div>
+            </Link>
+          ))}
         </div>
       )}
-
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {loading ? (
-          <div className="col-span-full py-20 text-center text-gray-500">
-            <div className="animate-spin inline-block w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full mb-4"></div>
-            <p>Loading your courses...</p>
-          </div>
-        ) : (
-          <>
-            {displayCourses.map((course) => (
-              <Link href={`/courses/${course.id}`} key={course.id}>
-                <div className="glass p-6 hover:border-blue-500/50 transition-all group cursor-pointer h-full">
-                  <div className="h-32 bg-gradient-to-br from-blue-900/50 to-purple-900/50 rounded-lg mb-4 flex items-center justify-center border border-white/5">
-                    <span className="text-4xl group-hover:scale-110 transition-transform">📚</span>
-                  </div>
-                  <h3 className="text-xl font-semibold mb-2 group-hover:text-blue-400">{course.title}</h3>
-                  <div className="flex justify-between items-center pt-4 border-t border-white/5">
-                    <span suppressHydrationWarning className="text-xs text-gray-500">
-                      Created {mounted ? new Date(course.created_at).toLocaleDateString() : "---"}
-                    </span>
-                    <span className="text-xs font-medium text-blue-400">View Details →</span>
-                  </div>
-                </div>
-              </Link>
-            ))}
-
-            <div
-              onClick={handleCreateCourse}
-              className="glass p-6 border-dashed border-2 border-white/10 flex flex-col items-center justify-center text-gray-500 hover:border-white/20 transition-all cursor-pointer min-h-[300px]"
-            >
-              <span className="text-3xl mb-2">➕</span>
-              <span className="text-sm">Add New Course</span>
-            </div>
-          </>
-        )}
-      </div>
     </div>
   );
-}
+}