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>