Aglentic AI Messenger Admin Dashboard

A modern, full-featured admin dashboard for managing AI-powered customer service conversations through Facebook Messenger. Built with Next.js 16, React 19, TypeScript, and Tailwind CSS.

Project Overview

This frontend application integrates with the Aglentic backend to provide administrators with:

• Real-time Conversation Monitoring - View and manage active customer conversations
• Client Management - Browse and update customer profiles
• Bot Control Panel - Configure and monitor AI bot performance
• Message Analytics - Track messaging patterns and metrics
• Database Management - Browse and explore database tables

Features

Dashboard

• Analytics Cards - Display key metrics (total clients, active conversations, messages today, bot status)
• Conversation List - Search and filter customer conversations with real-time updates
• Conversation Panel - View full message history and send manual responses
• Bot Status Monitor - Real-time bot health, uptime, and performance metrics

Conversations Management

• Search conversations by client name
• View complete message thread with timestamps
• Send manual responses when needed
• Human takeover toggle for agent intervention
• Message thread auto-scrolling

Bot Controls

• Model selection (Gemini or Mistral)
• Auto-respond configuration
• Response delay settings
• Retry policy management
• Activity logging

Orders Management

• Order list with filtering and search
• Order status tracking (pending, confirmed, cancelled)
• Order details modal
• CSV export functionality
• Real-time status updates

Database Browser

• Table exploration and viewing
• Record count display
• SQL query preview
• Data download capabilities

Layout

• Responsive sidebar navigation
• Top navigation bar with notifications
• Mobile-friendly design
• Persistent menu state

Project Structure

├── app/
│   ├── layout.tsx          # Root layout with metadata
│   ├── page.tsx            # Main dashboard page
│   └── globals.css         # Global styles
├── components/
│   ├── auth/               # Authentication components
│   ├── bot/                # Bot control components
│   ├── conversations/      # Conversation management components
│   ├── dashboard/          # Dashboard & analytics
│   ├── database/           # Database browser components
│   ├── layout/             # Layout components (Navbar, Sidebar)
│   └── orders/             # Order management components
├── hooks/
│   ├── useBot.ts          # Bot status & settings hooks
│   ├── useClients.ts      # Client data hooks
│   └── useMessages.ts     # Message data hooks
├── services/
│   └── api.ts             # API client with typed endpoints
├── types/
│   ├── client.ts          # Client type definitions
│   └── message.ts         # Message type definitions
├── utils/
│   ├── constants.ts       # App constants
│   ├── formatting.ts      # String & date formatting utilities
│   └── helpers.ts         # General helper functions
└── package.json

Key Technologies

• Next.js 16 - React framework with App Router
• React 19 - UI library
• TypeScript - Type safety and developer experience
• Tailwind CSS - Utility-first styling
• SWR - Data fetching and caching
• Lucide Icons - Beautiful icon library

Getting Started

Prerequisites

• Node.js 18+ (for Next.js 16)
• npm or yarn package manager

Installation

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env.local
# Edit .env.local with your API URL

Environment Variables

Create a .env.local file:

NEXT_PUBLIC_API_URL=http://localhost:8000

Development Server

npm run dev

Open http://localhost:3000 to view the dashboard.

API Integration

The dashboard integrates with the backend API through the services/api.ts file:

Client Endpoints

GET  /clients                 # List all clients
GET  /clients/:id            # Get client details
PUT  /clients/:id            # Update client
DELETE /clients/:id          # Delete client

Message Endpoints

POST /messages               # Log a message
GET  /messages/recent/:id    # Get recent messages (newest first)
GET  /messages/recent/:id/chronological  # Get recent messages (oldest first)

Bot Endpoints

GET  /bot/status            # Get bot status
GET  /bot/settings          # Get bot settings
PUT  /bot/settings          # Update bot settings
POST /bot/restart           # Restart bot
POST /bot/stop              # Stop bot

Data Fetching Strategy

The application uses SWR (Stale-While-Revalidate) for all data fetching:

// useClients hook example
const { clients, isLoading, error, mutate } = useClients(limit, offset);

// useMessages hook example
const { messages, isLoading, error, mutate } = useMessages(clientId, limit);

Benefits:

• Automatic caching and revalidation
• Real-time data updates without constant polling
• Built-in error handling
• Easy data mutation triggering

Styling

The dashboard uses a cohesive design system:

• Color Palette

  • Primary: Blue (UI actions)
  • Success: Green
  • Warning: Yellow
  • Error: Red
  • Neutral: Slate

• Typography

  • Headlines: Bold, larger sizes
  • Body text: Regular weight, readable line-height
  • Monospace: For code/database content

• Layout

  • Flexbox for single-axis layouts
  • CSS Grid for complex 2D layouts
  • Responsive design with Tailwind breakpoints

Hooks

useClients

Fetch and manage client data with pagination.

const { clients, isLoading, error, mutate } = useClients(limit, offset);

useMessages

Fetch messages for a specific client with auto-refresh.

const { messages, isLoading } = useMessages(clientId, limit);

useBot

Manage bot status and settings.

const { botStatus } = useBotStatus();
const { botSettings, mutate } = useBotSettings();

Components

Layout Components

• MainLayout - Root layout wrapper
• Navbar - Top navigation bar
• Sidebar - Navigation sidebar with menu items

Dashboard Components

• Dashboard - Main dashboard page
• Analytics - Statistics cards

Conversation Components

• ConversationList - List of active conversations
• ConversationPanel - Detailed conversation view
• MessageThread - Message display with auto-scroll
• HumanTakeoverToggle - Switch between AI and human mode

Bot Components

• BotStatus - Current bot status and controls
• BotControls - Bot configuration settings
• BotActivityLog - Activity history

Order Components

• OrderList - Orders table with filtering
• OrderDetails - Order information modal
• OrderFilter - Status filter control
• OrderStatusUpdate - Quick status update widget

Database Components

• DatabaseBrowser - Browse available tables
• TableViewer - View table data with export

Development

Adding a New Feature

1. Create types in types/ folder
2. Add API methods to services/api.ts
3. Create custom hook in hooks/ folder
4. Build components in components/ folder
5. Update exports in __init__ files

Best Practices

• Use TypeScript for all components and hooks
• Implement proper error handling
• Add loading states for async operations
• Use semantic HTML
• Keep components focused and reusable
• Follow Tailwind CSS conventions
• Add proper ARIA labels for accessibility

Deployment

Build

npm run build

Start Production Server

npm start

Deploy to Vercel

npm install -g vercel
vercel

Future Enhancements

• Real-time WebSocket integration
• Advanced analytics and reporting
• User authentication and role-based access
• Dark mode support
• Message template management
• Customer segmentation
• Performance optimization metrics
• Integration with payment systems

Troubleshooting

API Connection Issues

• Verify NEXT_PUBLIC_API_URL environment variable
• Ensure backend server is running on correct port
• Check CORS configuration in backend
• Review browser console for errors

Data Not Loading

• Check network tab in browser DevTools
• Verify API endpoints are correct
• Check for authentication/authorization issues
• Review SWR cache status

Styling Issues

• Ensure Tailwind CSS is properly configured
• Clear .next build cache
• Rebuild with npm run build
• Check for CSS conflicts

Contributing

1. Create a feature branch
2. Make your changes
3. Test thoroughly
4. Submit a pull request

License

This project is part of the Aglentic customer service platform.

Support

For issues and support, please contact the development team or open an issue in the repository.