Add animated Logo component and replace static logo images

.env.example

@@ -9,6 +9,7 @@
 # =============================================================================
 NODE_ENV=development
 ENVIRONMENT=dev
+NEXT_PUBLIC_APP_NAME=roboledger
 
 # =============================================================================
 # FRONTEND APPLICATION URLS

.github/workflows/build.yml

@@ -176,6 +176,7 @@ jobs:
       - name: Install dependencies and build Next.js
         if: steps.resolve.outputs.needs_build == 'true'
         env:
+          NEXT_PUBLIC_APP_NAME: roboledger
           NEXT_PUBLIC_ROBOSYSTEMS_API_URL: ${{ inputs.robosystems_api_url }}
           NEXT_PUBLIC_ROBOLEDGER_APP_URL: ${{ inputs.roboledger_app_url }}
           NEXT_PUBLIC_ROBOINVESTOR_APP_URL: ${{ inputs.roboinvestor_app_url }}

src/app/(app)/layout-wrapper.tsx

@@ -5,6 +5,7 @@ import { ErrorBoundary } from '@/components/error/ErrorBoundary'
 import {
   CoreNavbar,
   CoreSidebar,
+  CURRENT_APP,
   GraphFilters,
   useGraphContext,
   useToast,
@@ -32,7 +33,7 @@ export function LayoutWrapper({ children }: LayoutWrapperProps) {
     <>
       <CoreNavbar
         appName="RoboLedger"
-        currentApp="roboledger"
+        currentApp={CURRENT_APP}
         additionalComponents={
           <div className="flex items-center gap-3">
             <EntitySelector />

src/app/(landing)/login/content.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { SignInForm } from '@/lib/core'
+import { CURRENT_APP, SignInForm } from '@/lib/core'
 
 export default function LoginContent() {
   return (
@@ -9,7 +9,7 @@ export default function LoginContent() {
         process.env.NEXT_PUBLIC_ROBOSYSTEMS_API_URL || 'http://localhost:8000'
       }
       enableSSO={true}
-      currentApp="roboledger"
+      currentApp={CURRENT_APP}
       redirectTo="/home"
       onSuccess={() => {}}
       onRedirect={(url) => {

src/app/(landing)/maintenance.tsx

@@ -1,16 +1,14 @@
 'use client'
 
-import Image from 'next/image'
+import { AnimatedLogo } from '@/lib/core/ui-components/Logo'
 
 export default function MaintenancePage() {
   return (
     <div className="flex min-h-screen items-center justify-center bg-zinc-900">
       <div className="flex flex-col items-center">
-        <Image
-          src="/images/logo.png"
-          alt="RoboLedger Logo"
-          width={120}
-          height={120}
+        <AnimatedLogo
+          animate="once"
+          className="h-[120px] w-[120px] text-white"
         />
         <h1 className="font-heading mt-8 text-3xl font-semibold text-white">
           RoboLedger

src/app/(landing)/register/content.tsx

@@ -1,14 +1,14 @@
 'use client'
 
-import { SignUpForm } from '@/lib/core'
+import { CURRENT_APP, SignUpForm } from '@/lib/core'
 
 export default function RegisterContent() {
   return (
     <SignUpForm
       apiUrl={
         process.env.NEXT_PUBLIC_ROBOSYSTEMS_API_URL || 'http://localhost:8000'
       }
-      currentApp="roboledger"
+      currentApp={CURRENT_APP}
       showConfirmPassword={true}
       showTermsAcceptance={true}
       redirectTo="/login"

src/app/layout.tsx

@@ -15,7 +15,7 @@ export const metadata: Metadata = {
   description:
     'A comprehensive financial reporting app for private companies to securely share financial reports with shareholders and stakeholders. Built with React, Tailwind CSS, and Flowbite, it provides features such as customizable reports, user permissions, and real-time collaboration.',
   icons: {
-    icon: '/images/logo.png',
+    icon: '/images/logos/roboledger.png',
   },
 }
 

src/components/landing/Footer.tsx

@@ -115,7 +115,10 @@ export default function Footer() {
             <ul className="space-y-2 text-sm">
               <li>
                 <Link
-                  href="https://robosystems.ai"
+                  href={
+                    process.env.NEXT_PUBLIC_ROBOSYSTEMS_APP_URL ||
+                    'https://robosystems.ai'
+                  }
                   target="_blank"
                   rel="noopener noreferrer"
                   className="text-gray-400 transition-colors hover:text-white"
@@ -125,15 +128,21 @@ export default function Footer() {
               </li>
               <li>
                 <Link
-                  href="https://roboledger.ai"
+                  href={
+                    process.env.NEXT_PUBLIC_ROBOLEDGER_APP_URL ||
+                    'https://roboledger.ai'
+                  }
                   className="text-gray-400 transition-colors hover:text-white"
                 >
                   RoboLedger
                 </Link>
               </li>
               <li>
                 <Link
-                  href="https://roboinvestor.ai"
+                  href={
+                    process.env.NEXT_PUBLIC_ROBOINVESTOR_APP_URL ||
+                    'https://roboinvestor.ai'
+                  }
                   target="_blank"
                   rel="noopener noreferrer"
                   className="text-gray-400 transition-colors hover:text-white"
@@ -151,7 +160,7 @@ export default function Footer() {
             <ul className="space-y-2 text-sm">
               <li>
                 <Link
-                  href="https://robosystems.ai/blog"
+                  href={`${process.env.NEXT_PUBLIC_ROBOSYSTEMS_APP_URL || 'https://robosystems.ai'}/blog`}
                   target="_blank"
                   rel="noopener noreferrer"
                   className="text-gray-400 transition-colors hover:text-white"

src/components/landing/Header.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import Image from 'next/image'
+import { AnimatedLogo } from '@/lib/core/ui-components/Logo'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
 
@@ -48,13 +48,7 @@ export default function Header() {
             href="/"
             className="flex items-center transition-opacity hover:opacity-80"
           >
-            <Image
-              src="/images/logos/roboledger.png"
-              alt="RoboLedger Logo"
-              width={40}
-              height={40}
-              className="rounded-lg"
-            />
+            <AnimatedLogo animate="once" className="h-10 w-10 text-white" />
             <span className="font-heading ml-2 text-xl font-semibold text-white sm:text-2xl">
               RoboLedger
             </span>

src/lib/core/auth-components/AppSwitcher.tsx

@@ -2,11 +2,11 @@
 
 import { Dropdown, DropdownItem } from 'flowbite-react'
 import { HiViewGrid } from 'react-icons/hi'
-import { getAppConfig } from '../auth-core/config'
 import { useSSO } from '../auth-core/sso'
-import type { AppConfig } from '../auth-core/types'
+import type { AppConfig, AppName } from '../auth-core/types'
 import { useToast } from '../hooks/use-toast'
 import { customTheme } from '../theme'
+import { AnimatedLogo } from '../ui-components/Logo'
 
 export interface AppSwitcherProps {
   apiUrl: string
@@ -68,13 +68,11 @@ export function AppSwitcher({
               onClick={() => handleAppClick(app)}
               className="flex w-full items-center space-x-3 p-3"
             >
-              <div
-                className={`flex h-8 w-8 items-center justify-center rounded-sm ${getAppConfig(app.name).colorClass}`}
-              >
-                <span className="text-xs font-bold text-white">
-                  {getAppConfig(app.name).initials}
-                </span>
-              </div>
+              <AnimatedLogo
+                app={app.name as AppName}
+                animate="once"
+                className="h-8 w-8 text-black dark:text-white"
+              />
               <div className="min-w-0 flex-1">
                 <p className="text-left text-sm font-medium text-gray-900 dark:text-white">
                   {app.displayName}

src/lib/core/auth-components/SignInForm.tsx

@@ -1,12 +1,11 @@
 'use client'
 
-import Image from 'next/image'
 import React, { useEffect, useMemo, useState } from 'react'
 import { RoboSystemsAuthClient } from '../auth-core/client'
 import { getAppConfig } from '../auth-core/config'
 import { useSSO } from '../auth-core/sso'
 import type { AuthUser } from '../auth-core/types'
-import { Spinner } from '../ui-components'
+import { AnimatedLogo, Spinner } from '../ui-components'
 
 export interface SignInFormProps {
   onSuccess?: (user: AuthUser) => void
@@ -139,19 +138,13 @@ export function SignInForm({
       <div className="flex min-h-screen items-center justify-center bg-linear-to-br from-black via-gray-900 to-zinc-800 p-6">
         <div className="w-full max-w-md">
           <div className="text-center">
-            <Image
-              className="mx-auto h-12 w-auto"
-              src="/images/logo.png"
-              alt="Logo"
-              width={48}
-              height={48}
+            <AnimatedLogo
+              animate="loop"
+              className="mx-auto h-16 w-16 text-white"
             />
             <h1 className="font-heading mt-4 text-center text-2xl font-semibold tracking-tight text-white">
               {appName}
             </h1>
-            <div className="mt-6 flex justify-center">
-              <Spinner size="xl" className="border-gray-300" />
-            </div>
           </div>
         </div>
       </div>
@@ -162,17 +155,14 @@ export function SignInForm({
     <div className="flex min-h-screen items-center justify-center bg-linear-to-br from-black via-gray-900 to-zinc-800 px-4 py-12 sm:px-6 lg:px-8">
       <div className="w-full max-w-lg space-y-8">
         <div className="text-center">
-          <Image
-            className="mx-auto h-14 w-auto"
-            src="/images/logo.png"
-            alt="Logo"
-            width={56}
-            height={56}
+          <AnimatedLogo
+            animate="once"
+            className="mx-auto h-14 w-14 text-white"
           />
           <h1 className="font-heading mt-4 text-center text-2xl font-semibold tracking-tight text-white">
             {appName}
           </h1>
-          <h2 className="mt-6 text-center text-xl font-semibold tracking-tight text-gray-300">
+          <h2 className="mt-2 text-center text-xl font-semibold tracking-tight text-gray-300">
             Sign in to your account
           </h2>
         </div>

src/lib/core/auth-components/SignUpForm.tsx

@@ -1,11 +1,10 @@
 'use client'
 
-import Image from 'next/image'
 import React, { useState } from 'react'
 import { RoboSystemsAuthClient } from '../auth-core/client'
 import { getAppConfig } from '../auth-core/config'
 import type { AuthUser } from '../auth-core/types'
-import { Spinner } from '../ui-components'
+import { AnimatedLogo, Spinner } from '../ui-components'
 import { TurnstileWidget } from './TurnstileWidget'
 
 export interface SignUpFormProps {
@@ -146,12 +145,9 @@ export function SignUpForm({
     <div className="flex min-h-screen items-center justify-center bg-linear-to-br from-black via-gray-900 to-zinc-800 px-4 py-12 sm:px-6 lg:px-8">
       <div className="w-full max-w-lg space-y-8">
         <div className="text-center">
-          <Image
-            className="mx-auto h-14 w-auto"
-            src="/images/logo.png"
-            alt="Logo"
-            width={56}
-            height={56}
+          <AnimatedLogo
+            animate="once"
+            className="mx-auto h-14 w-14 text-white"
           />
           <h1 className="font-heading mt-4 text-center text-2xl font-semibold tracking-tight text-white">
             {appName}

src/lib/core/auth-components/__tests__/SignInForm.test.tsx

@@ -41,6 +41,13 @@ vi.mock('../../ui-components', () => ({
       Loading {size} {fullScreen && '(fullscreen)'}
     </div>
   ),
+  AnimatedLogo: ({ animate, className }: any) => (
+    <div
+      data-testid="animated-logo"
+      data-animate={animate}
+      className={className}
+    />
+  ),
 }))
 
 const mockUseRouter = vi.mocked(useRouter)
@@ -106,10 +113,9 @@ describe('SignInForm', () => {
     it('should show SSO checking state initially when SSO is enabled', () => {
       render(<SignInForm {...defaultProps} />)
 
-      const spinner = screen.getByTestId('spinner')
-      expect(spinner).toBeInTheDocument()
-      expect(spinner).toHaveTextContent(/loading/i)
-      expect(spinner).toHaveTextContent(/xl/i)
+      const logo = screen.getByTestId('animated-logo')
+      expect(logo).toBeInTheDocument()
+      expect(logo).toHaveAttribute('data-animate', 'loop')
     })
 
     it('should not check SSO when disabled', async () => {

src/lib/core/auth-components/__tests__/SignUpForm.test.tsx

@@ -33,6 +33,13 @@ vi.mock('../../ui-components', () => ({
       Loading {size} {fullScreen && '(fullscreen)'}
     </div>
   ),
+  AnimatedLogo: ({ animate, className }: any) => (
+    <div
+      data-testid="animated-logo"
+      data-animate={animate}
+      className={className}
+    />
+  ),
 }))
 
 const mockUseRouter = vi.mocked(useRouter)

src/lib/core/auth-core/config.ts

@@ -1,4 +1,7 @@
-import type { AppConfig } from './types'
+import type { AppConfig, AppName } from './types'
+
+export const CURRENT_APP: AppName =
+  (process.env.NEXT_PUBLIC_APP_NAME as AppName) || 'robosystems'
 
 export const APP_CONFIGS: Record<string, AppConfig> = {
   roboinvestor: {

src/lib/core/auth-core/types.ts

@@ -51,6 +51,8 @@ export interface SSOTokenResponse {
   apps: string[]
 }
 
+export type AppName = 'robosystems' | 'roboledger' | 'roboinvestor'
+
 export interface AppConfig {
   name: string
   displayName: string

src/lib/core/index.ts

@@ -299,4 +299,7 @@ if (process.env.NODE_ENV !== 'test') {
 export { client }
 
 // For backward compatibility, also export the main auth types directly
-export type { APIKey, AuthContextType, AuthUser } from './auth-core'
+export type { APIKey, AppName, AuthContextType, AuthUser } from './auth-core'
+
+// App identity
+export { CURRENT_APP } from './auth-core/config'