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

web/experience/src/app/auth/login/page.tsx

@@ -3,13 +3,14 @@
 import React, { useState } from "react";
 import { useRouter } from "next/navigation";
 import { lmsApi } from "@/lib/api";
-import { GraduationCap, Lock, Mail, User } from "lucide-react";
+import { GraduationCap, Lock, Mail, User, Building2 } from "lucide-react";
 
 export default function ExperienceLoginPage() {
     const router = useRouter();
     const [isLogin, setIsLogin] = useState(true);
     const [email, setEmail] = useState("");
     const [password, setPassword] = useState("");
+    const [organizationName, setOrganizationName] = useState("");
     const [fullName, setFullName] = useState("");
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState("");
@@ -37,7 +38,8 @@ export default function ExperienceLoginPage() {
                 const response = await lmsApi.register({
                     email,
                     password,
-                    full_name: fullName
+                    full_name: fullName,
+                    organization_name: organizationName,
                 });
 
                 localStorage.setItem("experience_token", response.token);
@@ -101,6 +103,24 @@ export default function ExperienceLoginPage() {
                                 </div>
                             </div>
                         )}
+                        {!isLogin && (
+                            <div>
+                                <label className="block text-sm font-bold text-gray-300 mb-2">
+                                    Organization Name (Optional)
+                                </label>
+                                <div className="relative">
+                                    <Building2 className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+                                    <input
+                                        type="text"
+                                        value={organizationName}
+                                        onChange={(e) => setOrganizationName(e.target.value)}
+                                        className="w-full bg-white/5 border border-white/10 rounded-xl py-3 pl-11 pr-4 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                                        placeholder="Your School or Company"
+                                    />
+                                </div>
+                                <p className="text-xs text-gray-500 mt-2 pl-1">If left blank, an organization will be created based on your email domain.</p>
+                            </div>
+                        )}
 
                         <div>
                             <label className="block text-sm font-bold text-gray-300 mb-2">

web/experience/src/app/auth/register/page.tsx

@@ -5,12 +5,13 @@ import { lmsApi } from "@/lib/api";
 import { useAuth } from "@/context/AuthContext";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
-import { UserPlus, Mail, Lock, User } from "lucide-react";
+import { UserPlus, Mail, Lock, User, Building2 } from "lucide-react";
 
 export default function RegisterPage() {
     const [email, setEmail] = useState("");
     const [password, setPassword] = useState("");
     const [fullName, setFullName] = useState("");
+    const [organizationName, setOrganizationName] = useState("");
     const [error, setError] = useState("");
     const [loading, setLoading] = useState(false);
 
@@ -22,7 +23,7 @@ export default function RegisterPage() {
         setLoading(true);
         setError("");
         try {
-            const res = await lmsApi.register({ email, password, full_name: fullName });
+            const res = await lmsApi.register({ email, password, full_name: fullName, organization_name: organizationName });
             login(res.user, res.token);
             router.push("/");
         } catch (err) {
@@ -97,6 +98,21 @@ export default function RegisterPage() {
                             </div>
                         </div>
 
+                        <div className="space-y-2">
+                            <label className="text-[10px] font-black uppercase tracking-widest text-gray-500 px-1">Organization Name (Optional)</label>
+                            <div className="relative">
+                                <Building2 className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500" size={18} />
+                                <input
+                                    type="text"
+                                    value={organizationName}
+                                    onChange={(e) => setOrganizationName(e.target.value)}
+                                    placeholder="Your School or Company"
+                                    className="w-full bg-white/5 border border-white/10 rounded-xl py-4 pl-12 pr-4 text-sm text-white focus:outline-none focus:border-blue-500 transition-all"
+                                />
+                            </div>
+                            <p className="text-[10px] text-gray-600 px-1">If blank, we'll use your email domain.</p>
+                        </div>
+
                         <button
                             disabled={loading}
                             type="submit"

web/experience/src/lib/api.ts

@@ -86,6 +86,7 @@ export interface AuthPayload {
     email: string;
     password?: string;
     full_name?: string;
+    organization_name?: string;
 }
 
 export interface Enrollment {