feat: Implement multi-tenancy with organization ID in LMS tables and middleware, refactor web API calls, and update analytics and gamification features."

web/studio/src/context/AuthContext.tsx

@@ -6,8 +6,10 @@ import { User } from '@/lib/api';
 interface AuthContextType {
     user: User | null;
     token: string | null;
+    selectedOrgId: string | null;
     login: (user: User, token: string) => void;
     logout: () => void;
+    setOrganizationId: (id: string | null) => void;
     loading: boolean;
 }
 
@@ -16,14 +18,19 @@ const AuthContext = createContext<AuthContextType | undefined>(undefined);
 export function AuthProvider({ children }: { children: React.ReactNode }) {
     const [user, setUser] = useState<User | null>(null);
     const [token, setToken] = useState<string | null>(null);
+    const [selectedOrgId, setSelectedOrgId] = useState<string | null>(null);
     const [loading, setLoading] = useState(true);
 
     useEffect(() => {
         const savedUser = localStorage.getItem('studio_user');
         const savedToken = localStorage.getItem('studio_token');
+        const savedOrgId = localStorage.getItem('studio_selected_org_id');
+
         if (savedUser && savedToken) {
-            setUser(JSON.parse(savedUser));
+            const u = JSON.parse(savedUser);
+            setUser(u);
             setToken(savedToken);
+            setSelectedOrgId(savedOrgId || u.organization_id || null);
         }
         setLoading(false);
     }, []);
@@ -31,19 +38,34 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     const login = (newUser: User, newToken: string) => {
         setUser(newUser);
         setToken(newToken);
+        setSelectedOrgId(newUser.organization_id || null);
         localStorage.setItem('studio_user', JSON.stringify(newUser));
         localStorage.setItem('studio_token', newToken);
+        if (newUser.organization_id) {
+            localStorage.setItem('studio_selected_org_id', newUser.organization_id);
+        }
     };
 
     const logout = () => {
         setUser(null);
         setToken(null);
+        setSelectedOrgId(null);
         localStorage.removeItem('studio_user');
         localStorage.removeItem('studio_token');
+        localStorage.removeItem('studio_selected_org_id');
+    };
+
+    const setOrganizationId = (id: string | null) => {
+        setSelectedOrgId(id);
+        if (id) {
+            localStorage.setItem('studio_selected_org_id', id);
+        } else {
+            localStorage.removeItem('studio_selected_org_id');
+        }
     };
 
     return (
-        <AuthContext.Provider value={{ user, token, login, logout, loading }}>
+        <AuthContext.Provider value={{ user, token, selectedOrgId, login, logout, setOrganizationId, loading }}>
             {children}
         </AuthContext.Provider>
     );

web/studio/src/lib/api.ts

@@ -191,13 +191,16 @@ export interface CreateWebhookPayload {
 }
 
 const getToken = () => typeof window !== 'undefined' ? localStorage.getItem('studio_token') : null;
+const getSelectedOrgId = () => typeof window !== 'undefined' ? localStorage.getItem('studio_selected_org_id') : null;
 
 const apiFetch = (url: string, options: RequestInit = {}) => {
     const token = getToken();
+    const selectedOrgId = getSelectedOrgId();
     const headers = {
         'Content-Type': 'application/json',
         ...options.headers,
-        ...(token ? { 'Authorization': `Bearer ${token}` } : {})
+        ...(token ? { 'Authorization': `Bearer ${token}` } : {}),
+        ...(selectedOrgId ? { 'X-Organization-Id': selectedOrgId } : {})
     };
 
     return fetch(`${API_BASE_URL}${url}`, { ...options, headers }).then(async res => {
@@ -273,8 +276,10 @@ export const cmsApi = {
         formData.append('file', file);
 
         const token = getToken();
+        const selectedOrgId = getSelectedOrgId();
         const headers: Record<string, string> = {
-            ...(token ? { 'Authorization': `Bearer ${token}` } : {})
+            ...(token ? { 'Authorization': `Bearer ${token}` } : {}),
+            ...(selectedOrgId ? { 'X-Organization-Id': selectedOrgId } : {})
         };
 
         // Note: We don't set 'Content-Type' for multipart/form-data.
@@ -295,8 +300,10 @@ export const cmsApi = {
         const formData = new FormData();
         formData.append('file', file);
         const token = getToken();
+        const selectedOrgId = getSelectedOrgId();
         const headers: Record<string, string> = {
-            ...(token ? { 'Authorization': `Bearer ${token}` } : {})
+            ...(token ? { 'Authorization': `Bearer ${token}` } : {}),
+            ...(selectedOrgId ? { 'X-Organization-Id': selectedOrgId } : {})
         };
         return fetch(`${API_BASE_URL}/organizations/${id}/logo`, {
             method: 'POST',