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;
 }