feat: add favicon, logo and Update the platform name (only available to the superuser) and company names

web/experience/src/components/AppHeader.tsx

@@ -8,26 +8,33 @@ import { useTranslation } from "@/context/I18nContext";
 import { LogOut, Globe } from "lucide-react";
 import NotificationCenter from "./NotificationCenter";
 
+import { lmsApi, getImageUrl } from "@/lib/api";
+
 export default function AppHeader() {
     const { t, language, setLanguage } = useTranslation();
     const { branding } = useBranding();
     const { user, logout } = useAuth();
 
+    // Use platform_name if available, otherwise name, otherwise default
+    const platformName = branding?.platform_name || branding?.name || 'OpenCCB';
+
     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 ? (
-                        <Image src={branding.logo_url} alt={branding.name} fill className="object-contain" sizes="40px" />
+                        <Image src={getImageUrl(branding.logo_url)} alt={branding.name} fill className="object-contain" sizes="40px" />
                     ) : (
-                        <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-blue-500 to-blue-700">L</div>
+                        <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-blue-500 to-blue-700">
+                            {platformName.charAt(0).toUpperCase()}
+                        </div>
                     )}
                 </div>
                 <div className="flex flex-col -gap-1">
                     <span className="font-black text-lg tracking-tighter text-white leading-none">
-                        {branding?.name?.toUpperCase() || 'APRENDER'}
+                        {platformName.toUpperCase()}
                     </span>
-                    {!branding && <span className="text-[10px] font-black tracking-widest text-blue-500 uppercase">EXPERIENCIA</span>}
+                    <span className="text-[10px] font-black tracking-widest text-blue-500 uppercase">EXPERIENCIA</span>
                 </div>
             </Link>
 

web/experience/src/context/BrandingContext.tsx

@@ -34,6 +34,37 @@ export const BrandingProvider: React.FC<{ children: React.ReactNode }> = ({ chil
                 if (data.secondary_color) {
                     document.documentElement.style.setProperty('--secondary-color', data.secondary_color);
                 }
+
+                // Update Title
+                if (data.platform_name) {
+                    document.title = `${data.platform_name} | Experiencia de Aprendizaje`;
+                }
+
+                // Update Favicon
+                if (data.favicon_url) {
+                    // Import getImageUrl logic locally or assume it needs import
+                    // Since I can't easily add import at top with replace_file, I will assume getImageUrl handles the path or do logic here.
+                    // Actually I need to import getImageUrl at the top. Instead of complicating, I'll update imports too.
+                    const getImageUrl = (path?: string) => {
+                        if (!path) return '';
+                        if (path.startsWith('http')) return path;
+                        const CMS_API_URL = process.env.NEXT_PUBLIC_CMS_API_URL || "http://localhost:3001";
+                        const cleanPath = path.startsWith('/uploads') ? path.replace('/uploads', '/assets') : path;
+                        const finalPath = cleanPath.startsWith('/') ? cleanPath : `/${cleanPath}`;
+                        return `${CMS_API_URL}${finalPath}`;
+                    };
+
+                    const faviconUrl = getImageUrl(data.favicon_url);
+                    const link: HTMLLinkElement | null = document.querySelector("link[rel*='icon']");
+                    if (link) {
+                        link.href = faviconUrl;
+                    } else {
+                        const newLink = document.createElement("link");
+                        newLink.rel = "shortcut icon";
+                        newLink.href = faviconUrl;
+                        document.head.appendChild(newLink);
+                    }
+                }
             } catch (error) {
                 console.error('Failed to load branding', error);
             } finally {

web/experience/src/lib/api.ts

@@ -13,6 +13,8 @@ export interface Organization {
     id: string;
     name: string;
     logo_url?: string;
+    favicon_url?: string;
+    platform_name?: string;
     primary_color?: string;
     secondary_color?: string;
 }

web/studio/src/app/layout.tsx

@@ -15,6 +15,7 @@ export const metadata: Metadata = {
 };
 
 import AuthHeader from "@/components/AuthHeader";
+import BrandingManager from "@/components/BrandingManager";
 
 export default function RootLayout({
   children,
@@ -27,6 +28,7 @@ export default function RootLayout({
         <AuthProvider>
           <I18nProvider>
             <AuthGuard>
+              <BrandingManager />
               <header className="h-20 glass sticky top-0 z-50 px-8 flex items-center justify-between border-b border-white/5 backdrop-blur-xl bg-black/40">
                 <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-transform">

web/studio/src/app/settings/page.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import BrandingSettings from "@/components/BrandingSettings";
+import { useAuth } from "@/context/AuthContext";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+export default function SettingsPage() {
+    const { user, loading } = useAuth();
+    const router = useRouter();
+
+    useEffect(() => {
+        if (!loading && (!user || user.role !== "admin")) {
+            router.push("/");
+        }
+    }, [user, loading, router]);
+
+    if (loading) return null;
+
+    if (!user || user.role !== "admin") return null;
+
+    return (
+        <div className="pt-24 px-8 pb-12 min-h-screen bg-gradient-to-br from-gray-900 to-black">
+            <div className="max-w-4xl mx-auto mb-8">
+                <h1 className="text-3xl font-black text-white tracking-tight">Organization Settings</h1>
+                <p className="text-gray-400 mt-2">Manage your white-label branding and platform identity.</p>
+            </div>
+            <BrandingSettings />
+        </div>
+    );
+}

web/studio/src/components/BrandingManager.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { useEffect } from "react";
+import { useAuth } from "@/context/AuthContext";
+import { cmsApi, getImageUrl } from "@/lib/api";
+
+export default function BrandingManager() {
+    const { user } = useAuth();
+
+    useEffect(() => {
+        if (!user || user.role === "super_admin") return;
+        // Note: checking user.role === "admin" might be enough, but regular users in Studio (instructors) should also see branding?
+        // Usually YES.
+
+        const fetchBranding = async () => {
+            try {
+                // If user has organization_id, fetch that org
+                // cmsApi.getOrganization() fetches based on X-Organization-Id or token claims.
+                // Assuming getOrganization() returns the current context org.
+                const org = await cmsApi.getOrganization();
+
+                if (org) {
+                    // Update Title
+                    if (org.platform_name) {
+                        document.title = `${org.platform_name} | Studio`;
+                    }
+
+                    // Update Favicon
+                    if (org.favicon_url) {
+                        const faviconUrl = getImageUrl(org.favicon_url);
+                        const link: HTMLLinkElement | null = document.querySelector("link[rel*='icon']");
+                        if (link) {
+                            link.href = faviconUrl;
+                        } else {
+                            const newLink = document.createElement("link");
+                            newLink.rel = "shortcut icon";
+                            newLink.href = faviconUrl;
+                            document.head.appendChild(newLink);
+                        }
+                    }
+                }
+            } catch (err) {
+                console.error("Failed to load branding", err);
+            }
+        };
+
+        if (user) {
+            fetchBranding();
+        }
+    }, [user]);
+
+    return null;
+}

web/studio/src/components/BrandingSettings.tsx

@@ -0,0 +1,214 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { cmsApi, Organization, BrandingPayload, getImageUrl } from "@/lib/api";
+import FileUpload from "./FileUpload";
+import { useRouter } from "next/navigation";
+
+export default function BrandingSettings() {
+    const router = useRouter();
+    const [org, setOrg] = useState<Organization | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [saving, setSaving] = useState(false);
+    const [formData, setFormData] = useState<BrandingPayload>({
+        primary_color: "#3B82F6",
+        secondary_color: "#8B5CF6",
+        platform_name: "",
+    });
+
+    useEffect(() => {
+        fetchOrg();
+    }, []);
+
+    const fetchOrg = async () => {
+        try {
+            const data = await cmsApi.getOrganization();
+            setOrg(data);
+            setFormData({
+                primary_color: data.primary_color || "#3B82F6",
+                secondary_color: data.secondary_color || "#8B5CF6",
+                platform_name: data.platform_name || "",
+            });
+        } catch (error) {
+            console.error("Failed to fetch organization:", error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleSave = async () => {
+        if (!org) return;
+        setSaving(true);
+        try {
+            await cmsApi.updateOrganizationBranding(org.id, formData);
+            // Refresh to update local state logic if needed
+            fetchOrg();
+            alert("Branding updated successfully!");
+            router.refresh(); // Refresh layouts to pick up new branding
+        } catch (error) {
+            console.error("Failed to update branding:", error);
+            alert("Failed to update branding settings.");
+        } finally {
+            setSaving(false);
+        }
+    };
+
+    const handleLogoUpload = async (file: File, onProgress: (pct: number) => void) => {
+        if (!org) throw new Error("No organization loaded");
+        // Simulate progress for smoother UX if the API doesn't support it natively for direct fetch
+        // API wrapper uses fetch/xhr so branding API in api.ts needs to handle it.
+        // For now, we assume simple upload.
+        onProgress(50);
+        const res = await cmsApi.uploadOrganizationLogo(org.id, file);
+        onProgress(100);
+        return { url: res.logo_url }; // api returns { logo_url: ... }
+    };
+
+    const handleFaviconUpload = async (file: File, onProgress: (pct: number) => void) => {
+        if (!org) throw new Error("No organization loaded");
+        onProgress(50);
+        const res = await cmsApi.uploadOrganizationFavicon(org.id, file);
+        onProgress(100);
+        return { url: res.favicon_url };
+    };
+
+    if (loading) return <div className="p-8 text-center text-gray-400 animate-pulse">Loading settings...</div>;
+    if (!org) return <div className="p-8 text-center text-red-400">Failed to load organization settings.</div>;
+
+    return (
+        <div className="space-y-8 max-w-4xl mx-auto">
+            <div className="border border-white/10 rounded-2xl p-6 bg-white/5 backdrop-blur-sm">
+                <h3 className="text-xl font-bold mb-6 flex items-center gap-2">
+                    <span>🎨</span> Brand Identity
+                </h3>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                    {/* Platform Name */}
+                    <div className="col-span-full">
+                        <label className="block text-sm font-medium text-gray-400 mb-2">Platform Name</label>
+                        <input
+                            type="text"
+                            value={formData.platform_name || ""}
+                            onChange={(e) => setFormData({ ...formData, platform_name: e.target.value })}
+                            placeholder={org.name}
+                            className="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-blue-500/50 transition-colors"
+                        />
+                        <p className="text-xs text-gray-500 mt-2">Appears in the browser tab and page titles.</p>
+                    </div>
+
+                    {/* Logo Section */}
+                    <div className="space-y-4">
+                        <label className="block text-sm font-medium text-gray-400">Logo</label>
+                        <div className="p-4 bg-black/20 rounded-xl border border-white/5 flex items-center justify-center min-h-[120px]">
+                            {org.logo_url ? (
+                                <img src={getImageUrl(org.logo_url)} alt="Logo" className="max-h-16 object-contain" />
+                            ) : (
+                                <span className="text-gray-600 text-sm">No logo uploaded</span>
+                            )}
+                        </div>
+                        <FileUpload
+                            accept="image/png,image/jpeg,image/svg+xml"
+                            currentUrl={org.logo_url}
+                            customUploadFn={async (file, onProgress) => {
+                                // Adapt the response format from logo upload API to what FileUpload expects
+                                const res = await cmsApi.uploadOrganizationLogo(org.id, file);
+                                return { url: res.logo_url || "" };
+                            }}
+                            onUploadComplete={(url) => {
+                                setOrg({ ...org, logo_url: url });
+                                router.refresh();
+                            }}
+                        />
+                        <p className="text-xs text-gray-500">Recommended: SVG or PNG, max 2MB.</p>
+                    </div>
+
+                    {/* Favicon Section */}
+                    <div className="space-y-4">
+                        <label className="block text-sm font-medium text-gray-400">Favicon</label>
+                        <div className="p-4 bg-black/20 rounded-xl border border-white/5 flex items-center justify-center min-h-[120px]">
+                            {org.favicon_url ? (
+                                <img src={getImageUrl(org.favicon_url)} alt="Favicon" className="w-8 h-8 object-contain" />
+                            ) : (
+                                <span className="text-gray-600 text-sm">No favicon</span>
+                            )}
+                        </div>
+                        <FileUpload
+                            accept="image/png,image/x-icon,image/svg+xml,image/jpeg"
+                            currentUrl={org.favicon_url}
+                            customUploadFn={async (file, onProgress) => {
+                                const res = await cmsApi.uploadOrganizationFavicon(org.id, file);
+                                return { url: res.favicon_url || "" };
+                            }}
+                            onUploadComplete={(url) => {
+                                setOrg({ ...org, favicon_url: url });
+                                router.refresh();
+                            }}
+                        />
+                        <p className="text-xs text-gray-500">Recommended: ICO or PNG, 32x32px.</p>
+                    </div>
+                </div>
+            </div>
+
+            <div className="border border-white/10 rounded-2xl p-6 bg-white/5 backdrop-blur-sm">
+                <h3 className="text-xl font-bold mb-6 flex items-center gap-2">
+                    <span>🌈</span> Brand Colors
+                </h3>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                    {/* Primary Color */}
+                    <div>
+                        <label className="block text-sm font-medium text-gray-400 mb-2">Primary Color</label>
+                        <div className="flex items-center gap-4">
+                            <input
+                                type="color"
+                                value={formData.primary_color}
+                                onChange={(e) => setFormData({ ...formData, primary_color: e.target.value })}
+                                className="w-12 h-12 rounded-lg cursor-pointer bg-transparent border-none p-0"
+                            />
+                            <div className="flex-1">
+                                <input
+                                    type="text"
+                                    value={formData.primary_color}
+                                    onChange={(e) => setFormData({ ...formData, primary_color: e.target.value })}
+                                    className="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 text-white font-mono uppercase"
+                                />
+                            </div>
+                        </div>
+                        <p className="text-xs text-gray-500 mt-2">Used for main buttons, active states, and highlights.</p>
+                    </div>
+
+                    {/* Secondary Color */}
+                    <div>
+                        <label className="block text-sm font-medium text-gray-400 mb-2">Secondary Color</label>
+                        <div className="flex items-center gap-4">
+                            <input
+                                type="color"
+                                value={formData.secondary_color}
+                                onChange={(e) => setFormData({ ...formData, secondary_color: e.target.value })}
+                                className="w-12 h-12 rounded-lg cursor-pointer bg-transparent border-none p-0"
+                            />
+                            <div className="flex-1">
+                                <input
+                                    type="text"
+                                    value={formData.secondary_color}
+                                    onChange={(e) => setFormData({ ...formData, secondary_color: e.target.value })}
+                                    className="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 text-white font-mono uppercase"
+                                />
+                            </div>
+                        </div>
+                        <p className="text-xs text-gray-500 mt-2">Used for accents and gradients.</p>
+                    </div>
+                </div>
+            </div>
+
+            <div className="flex justify-end">
+                <button
+                    onClick={handleSave}
+                    disabled={saving}
+                    className="px-8 py-3 bg-blue-600 hover:bg-blue-500 text-white font-bold rounded-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-[0_0_20px_rgba(37,99,235,0.3)] hover:shadow-[0_0_30px_rgba(37,99,235,0.5)]"
+                >
+                    {saving ? "Saving Changes..." : "Save Branding Settings"}
+                </button>
+            </div>
+        </div>
+    );
+}

web/studio/src/components/FileUpload.tsx

@@ -7,9 +7,10 @@ interface FileUploadProps {
     onUploadComplete: (url: string) => void;
     currentUrl?: string;
     accept?: string;
+    customUploadFn?: (file: File, onProgress: (pct: number) => void) => Promise<{ url: string }>;
 }
 
-export default function FileUpload({ onUploadComplete, currentUrl, accept = "video/*,audio/*" }: FileUploadProps) {
+export default function FileUpload({ onUploadComplete, currentUrl, accept = "video/*,audio/*", customUploadFn }: FileUploadProps) {
     const [isUploading, setIsUploading] = useState(false);
     const [uploadProgress, setUploadProgress] = useState(0);
     const [uploadingFileName, setUploadingFileName] = useState("");
@@ -21,9 +22,14 @@ export default function FileUpload({ onUploadComplete, currentUrl, accept = "vid
         setUploadProgress(0);
         setUploadingFileName(file.name);
         try {
-            const result = await cmsApi.uploadAsset(file, (pct) => {
-                setUploadProgress(pct);
-            });
+            let result;
+            if (customUploadFn) {
+                result = await customUploadFn(file, (pct) => setUploadProgress(pct));
+            } else {
+                result = await cmsApi.uploadAsset(file, (pct) => {
+                    setUploadProgress(pct);
+                });
+            }
             onUploadComplete(result.url);
         } catch (err) {
             alert("Upload failed. Please try again.");

web/studio/src/components/Navbar.tsx

@@ -56,7 +56,6 @@ export function Navbar() {
                             </>
                         )}
 
-                        {/* 
                         <Link
                             href="/settings"
                             className="text-sm font-medium text-gray-400 hover:text-blue-400 transition-colors flex items-center gap-2"
@@ -64,7 +63,6 @@ export function Navbar() {
                             <Settings className="w-4 h-4" />
                             Settings
                         </Link>
-                        */}
                     </div>
 
                     <div className="h-6 w-px bg-white/10 mx-2" />

web/studio/src/lib/api.ts

@@ -106,6 +106,8 @@ export interface Organization {
     name: string;
     domain?: string;
     logo_url?: string;
+    favicon_url?: string;
+    platform_name?: string;
     primary_color?: string;
     secondary_color?: string;
     certificate_template?: string;
@@ -116,6 +118,7 @@ export interface Organization {
 export interface BrandingPayload {
     primary_color?: string;
     secondary_color?: string;
+    platform_name?: string;
 }
 
 export interface User {
@@ -156,6 +159,8 @@ export interface UploadResponse {
     id: string;
     filename: string;
     url: string;
+    logo_url?: string;
+    favicon_url?: string;
 }
 
 export interface GradingCategory {
@@ -390,6 +395,24 @@ export const cmsApi = {
             return res.json();
         });
     },
+    uploadOrganizationFavicon: (id: string, file: File): Promise<UploadResponse> => {
+        const formData = new FormData();
+        formData.append('file', file);
+        const token = getToken();
+        const selectedOrgId = getSelectedOrgId();
+        const headers: Record<string, string> = {
+            ...(token ? { 'Authorization': `Bearer ${token}` } : {}),
+            ...(selectedOrgId ? { 'X-Organization-Id': selectedOrgId } : {})
+        };
+        return fetch(`${API_BASE_URL}/organizations/${id}/favicon`, {
+            method: 'POST',
+            headers,
+            body: formData,
+        }).then(res => {
+            if (!res.ok) return res.json().then(err => Promise.reject(new Error(err.message || 'Favicon upload failed')));
+            return res.json();
+        });
+    },
 
     // SSO
     getSSOConfig: (): Promise<OrganizationSSOConfig | null> => apiFetch('/organization/sso'),