Home Page and Dashboard

What this section is for

The home page serves as the central hub of the admin panel, providing a quick overview of key metrics, agent and knowledge base management, and access to core system functionality through convenient sidebar navigation.

How to access this section

• After system login — automatic redirect to home
• Logo click — from any admin panel section
• "Home" button in the sidebar navigation
• Direct link: /
• Required permissions: Authorized user

Interface structure

Sidebar navigation

Main system navigation with sections:

Main sections

• Home — main page with overview
• My agents — AI agent management
• Knowledge — knowledge bases and documents
• Users — user management (for administrators)
• Models — catalog of available AI models
• Billing — payment and subscription management

Bottom section

• Theme switcher — Light Mode / Dark Mode
• User information — current user's email
• "Sign Out" button — secure system logout

Central content

Welcome Banner

Displayed for new users:

• "$10 Welcome Gift Added to Your Account" — startup bonus information
• Description — explanation that money was added for testing
• "Got it" button — hide banner after acknowledgment

Top section - Analytics and Balance

Analytics Grid: 4 cards with key metrics:

1. Active Users

   • Icon: Users
   • Shows number of unique users
   • Percentage change compared to previous period

2. Active Agents

   • Icon: Brain
   • Number of working AI agents
   • Activity change trend

3. Agents Work Time

   • Icon: Timer
   • Total time of task execution by agents
   • Formatted in human-readable format

4. Total Cost

   • Icon: DollarSign
   • Amount spent on AI operations
   • Currency depends on region ($ for Flutch, ₽ for Agentech)

Balance Card:

• "Account Balance" — current account balance
• Amount with correct currency
• "Add Funds" button — balance top-up
• States: loading, error, normal mode

Agents section

For new users (without agents):

• "Create your first agent" heading
• Template grid for quick first agent creation
• Interactive cards of various agent types

For users with agents:

• "My agents" heading
• Actions:
  • "View All" — link with agent count
  • Create button for new agent
• Agent list — first few created agents

Knowledge bases section

For users without knowledge bases:

• "Create your first knowledge base" heading
• "Create knowledge base" button — go to creation

For users with knowledge bases:

• "My knowledge bases" heading
• Actions:
  • "View All" — link with total count
  • "Create knowledge base" button — create new
• Knowledge base list — first few created bases

Component functionality

Analytics grid

Data source

• API request via React Query
• Period comparison — current vs previous
• Automatic updates when data changes

Formatting

• Numbers: abbreviated format (1K, 1.2M)
• Time: readable format (2h 30m, 45s)
• Currency: localized format with correct symbol
• Percentages: with + or - sign and color indication

Loading states

• Skeleton screens during loading
• Error message for API problems
• Empty state when no data available

Balance management

Balance display

• Current amount with localized currency
• Multi-currency support ($ / ₽)
• Formatting with thousand separators

Fund top-up

• "Add Funds" button — opens modal window
• TopUpModal — top-up interface
• Auto-update balance after operations

Error handling

• Error screen with retry button
• Retry function for API reconnection
• Graceful degradation when service unavailable

Welcome banner

Display logic

• Shows once for new users
• Status check via API on load
• Auto-hide after clicking "Got it"

Animations

• Smooth appearance on page load
• Hide animation when closing (300ms)
• Decorative elements — gradient shapes

Responsiveness and UX

Responsive design

• Mobile-first layout approach
• Adaptive grid for analytics
• Collapsible navigation on small screens

Loading states

• Skeleton screens for all sections
• Lazy loading components via React.Suspense
• Progressive loading of content

Accessibility

• Semantic HTML markup
• ARIA labels for interactive elements
• Keyboard navigation for all functions
• Screen reader support

Common usage scenarios

Scenario 1: New user first login

1. After onboarding lands on home page
2. Sees welcome banner with $10 gift
3. Closes banner by clicking "Got it"
4. Sees empty sections — suggestions to create first agent
5. Clicks agent template — goes to creation
6. After creation agent appears in list

Scenario 2: Daily work of existing user

1. System login — immediately sees current analytics
2. Checks metrics — user count, agent work time
3. Controls expenses — looks at Total Cost and balance
4. Manages agents — through quick actions on home
5. Tops up balance if needed via "Add Funds"

Scenario 3: Performance monitoring

1. Regularly checks analytics — metric change trends
2. Compares periods — activity growth/decline
3. Tracks cost — AI operations budget control
4. Plans scaling based on activity metrics

Scenario 4: System navigation

1. Uses sidebar menu to navigate between sections
2. Switches theme when needed
3. Returns to home by clicking logo
4. Safely logs out via Sign Out button

Important limitations

• Analytics data updates with delay (not real-time)
• Balance may not sync instantly after operations
• Welcome banner shows only once
• Lazy loading may cause brief delays on first section visits
• Mobile version has limited functionality compared to desktop

Common problems and solutions

Problem: Analytics doesn't load

Solutions:

1. Refresh page — possible temporary API unavailability
2. Check internet connection
3. Clear browser cache if problem persists
4. If metrics show "0" — possibly no activity yet

Problem: Balance shows wrong amount

Solutions:

1. Wait for automatic update (up to 30 seconds)
2. Refresh page manually
3. Check transaction history in Billing section
4. Ensure top-up operation completed successfully

Problem: Welcome banner doesn't disappear

Solutions:

1. Click "Got it" button again
2. Wait for hide animation completion (300ms)
3. Refresh page if banner still visible
4. Clear browser localStorage as last resort

Problem: Sidebar navigation unresponsive

Solutions:

1. Ensure JavaScript is enabled in browser
2. Try refreshing page
3. Check browser console for errors
4. In mobile version ensure menu is expanded

Problem: Agent/knowledge base sections empty when they exist

Solutions:

1. Wait for full data loading (skeleton screens disappear)
2. Refresh page if data doesn't load
3. Check access rights — agents might belong to another user
4. Ensure you're in correct organization/company

Performance and optimization

Loading strategies

• Code splitting — components load on demand
• React.Suspense — smooth state transitions
• Lazy imports — reduce initial bundle size

Data caching

• React Query — automatic caching and invalidation
• Stale-while-revalidate — show cache while updating data
• Background refetch — updates without blocking UI

Performance monitoring

• Web Vitals — track key metrics
• Error Boundary — graceful error handling
• Performance monitoring — optimize bottlenecks

What's next?

After exploring the home page, it's recommended to:

1. Agent management — create and configure AI assistants
2. Work with knowledge bases — upload documents and information
3. Analytics and metrics — detailed usage analysis
4. Billing management — configure payments and plans