A modern, responsive dashboard for managing AI data agents with natural language analysis capabilities. Built with Next.js 14, React 18, TypeScript, and Tailwind CSS.

• Features
• Tech Stack
• Prerequisites
• Installation
• API Requirements
• Environment Configuration
• Development
• Production Deployment
• Dashboard Features
• API Integration
• Project Structure
• Contributing
• License

1. Overview Dashboard (Tổng quan)

   • Real-time KPI monitoring (Total queries, Success rate, Active users, Response time)
   • Usage trend analytics with line charts
   • Query type distribution with pie charts
   • Popular queries ranking with bar charts
   • Recent activities feed with status tracking

2. Agents Management (Quản lý Agents)

   • AI agent monitoring and control
   • Agent performance metrics (uptime, accuracy)
   • Start/stop/restart agent controls
   • Agent configuration and settings
   • Performance analytics and statistics
   • Agent creation and deployment

3. User Management (Quản lý người dùng)

   • User accounts and permissions
   • Role-based access control (admin, analyst, viewer)
   • User activity tracking
   • Login history and session management
   • User statistics and analytics

4. Data Management (Quản lý dữ liệu)

   • Dataset upload and management
   • Data source connections (Excel, CSV, JSON, Database)
   • Data processing status tracking
   • Data quality monitoring
   • File format support and validation
   • Data synchronization with external sources

5. Reports & Analytics (Báo cáo)

   • Automated report generation
   • Real-time system monitoring
   • Error logging and analysis
   • Performance metrics
   • Custom report creation
   • Export functionality

• Next.js 14 - React framework with App Router
• React 18 - UI library
• TypeScript - Type-safe development
• Tailwind CSS - Utility-first CSS framework
• Radix UI - Headless UI primitives
• shadcn/ui - Re-usable component library
• Recharts - Data visualization library
• Lucide React - Icon library

• Cards, Buttons, Forms, Tables
• Charts (Line, Bar, Pie)
• Modals, Dropdowns, Tooltips
• Pagination, Search, Filters
• Progress bars, Badges, Avatars

• Node.js 18.0 or higher
• npm or yarn package manager
• Backend API endpoints (see API Requirements)
• Database for data persistence
• Authentication service (optional)

1. Clone the repository

   git clone <repository-url>
   cd Dashboard-data-agent

2. Install dependencies

   npm install
   # or
   yarn install

3. Set up environment variables

   cp .env.example .env.local

4. Start development server

   npm run dev
   # or
   yarn dev

5. Open your browser

   http://localhost:3000
   

The dashboard requires the following backend API endpoints to function properly:

API_BASE_URL=http://localhost:8000/api/v1

POST /auth/login
POST /auth/logout
POST /auth/refresh
GET  /auth/profile

GET  /overview/kpis          # KPI metrics
GET  /overview/usage-trends  # Usage analytics
GET  /overview/query-types   # Query distribution
GET  /overview/activities    # Recent activities
GET  /overview/popular-queries

GET    /agents              # List all agents
POST   /agents              # Create new agent
GET    /agents/:id          # Get agent details
PUT    /agents/:id          # Update agent
DELETE /agents/:id          # Delete agent
POST   /agents/:id/start    # Start agent
POST   /agents/:id/stop     # Stop agent
POST   /agents/:id/restart  # Restart agent
GET    /agents/:id/metrics  # Agent performance
GET    /agents/:id/logs     # Agent logs

GET    /users               # List all users
POST   /users               # Create new user
GET    /users/:id           # Get user details
PUT    /users/:id           # Update user
DELETE /users/:id           # Delete user
GET    /users/:id/activity  # User activity
GET    /users/statistics    # User analytics

GET    /datasets            # List all datasets
POST   /datasets            # Upload new dataset
GET    /datasets/:id        # Get dataset details
PUT    /datasets/:id        # Update dataset
DELETE /datasets/:id        # Delete dataset
POST   /datasets/:id/sync   # Sync dataset
GET    /datasets/:id/preview # Preview data
POST   /datasets/upload     # File upload
GET    /data-sources         # Available sources

GET    /reports             # List all reports
POST   /reports             # Generate report
GET    /reports/:id         # Get report
DELETE /reports/:id         # Delete report
GET    /reports/real-time   # Real-time metrics
GET    /reports/errors      # Error logs
POST   /reports/export      # Export report

Create a .env.local file with the following variables:

# API Configuration
NEXT_PUBLIC_API_BASE_URL=http://localhost:8000/api/v1
NEXT_PUBLIC_WS_URL=ws://localhost:8000/ws

# Authentication (if required)
NEXTAUTH_SECRET=your-secret-key
NEXTAUTH_URL=http://localhost:3000

# Database (if using backend)
DATABASE_URL=postgresql://user:password@localhost:5432/dataagent

# External Services
UPLOAD_MAX_SIZE=50MB
ALLOWED_FILE_TYPES=csv,xlsx,json,txt

# Feature Flags
ENABLE_REAL_TIME=true
ENABLE_FILE_UPLOAD=true
ENABLE_EXPORT=true

npm run dev       # Start development server
npm run build     # Build for production
npm run start     # Start production server
npm run lint      # Run ESLint
npm run type-check # TypeScript check

# Install new dependencies
npm install package-name

# Add UI component
npx shadcn-ui@latest add component-name

# Generate types (if using TypeScript)
npm run generate-types

npm run build
npm run start

FROM node:18-alpine

WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production

COPY . .
RUN npm run build

EXPOSE 3000
CMD ["npm", "start"]

NODE_ENV=production
NEXT_PUBLIC_API_BASE_URL=https://api.yourdomain.com/v1
DATABASE_URL=your-production-db-url

• KPI Cards: Total queries (24,567), Success rate (94.2%), Active users (1,234), Response time (1.2s)
• Charts: Usage trends, Query type distribution, Popular queries
• Activities: Real-time activity feed with user actions and statuses

• Agent List: Name, status, uptime, accuracy, queries count
• Controls: Start, stop, restart, configure agents
• Metrics: Performance charts, response times, error rates
• Agent Types: GPT-4, Claude-3, Gemini agents

• User Roles: Admin, Analyst, Viewer
• User Info: Name, email, last login, query count, join date
• Actions: Create, edit, delete, activate/deactivate users
• Analytics: User activity charts, usage statistics

• File Types: CSV, XLSX, JSON, TXT
• Sources: Excel upload, database connection, API import
• Status: Ready, processing, error, syncing
• Actions: Upload, sync, preview, download, delete

• Real-time: Live metrics, error monitoring
• Exports: PDF, Excel, CSV formats
• Scheduling: Automated report generation
• Logs: Error tracking, performance analysis

{
  "totalQueries": 24567,
  "successRate": 94.2,
  "activeUsers": 1234,
  "avgResponseTime": 1.2,
  "trends": {
    "queries": "+12.5%",
    "successRate": "+2.1%",
    "users": "+8.3%",
    "responseTime": "-0.3s"
  }
}

{
  "data": [
    {
      "id": "agent-001",
      "name": "GPT-4 Analytics Agent",
      "status": "active",
      "uptime": "99.8%",
      "accuracy": "94.2%",
      "lastActive": "2 phút trước",
      "queries": 15420,
      "createdBy": {
        "name": "Nguyễn Văn A",
        "email": "nguyenvana@company.com"
      }
    }
  ],
  "total": 10,
  "page": 1,
  "pageSize": 20
}

{
  "data": [
    {
      "id": "ds-001",
      "name": "Sales Data Q3 2024",
      "type": "CSV",
      "source": "excel",
      "size": "45.2 MB",
      "records": 125840,
      "uploadDate": "2024-07-15",
      "status": "ready",
      "description": "Dữ liệu bán hàng quý 3 năm 2024"
    }
  ]
}

Dashboard-data-agent/
├── app/                    # Next.js App Router
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Home page
├── components/            # React components
│   ├── Layout.tsx         # Main layout
│   ├── Overview.tsx       # Overview dashboard
│   ├── Agents.tsx         # Agents management
│   ├── Users.tsx          # User management
│   ├── Data.tsx           # Data management
│   ├── Reports.tsx        # Reports system
│   ├── Settings.tsx       # Settings page
│   ├── figma/             # Figma components
│   └── ui/                # shadcn/ui components
├── lib/                   # Utility functions
│   └── utils.ts           # Helper functions
├── styles/                # Additional styles
├── guidelines/            # Development guidelines
├── public/                # Static assets
├── next.config.js         # Next.js config
├── tailwind.config.js     # Tailwind config
├── tsconfig.json          # TypeScript config
└── package.json           # Dependencies

To fully run this dashboard, you need a backend service that provides:

-- Users table
CREATE TABLE users (
  id VARCHAR PRIMARY KEY,
  name VARCHAR NOT NULL,
  email VARCHAR UNIQUE NOT NULL,
  role ENUM('admin', 'analyst', 'viewer'),
  status ENUM('active', 'inactive'),
  created_at TIMESTAMP,
  last_login TIMESTAMP
);

-- Agents table
CREATE TABLE agents (
  id VARCHAR PRIMARY KEY,
  name VARCHAR NOT NULL,
  type VARCHAR NOT NULL,
  status ENUM('active', 'inactive', 'maintenance'),
  config JSON,
  created_by VARCHAR REFERENCES users(id),
  created_at TIMESTAMP
);

-- Datasets table
CREATE TABLE datasets (
  id VARCHAR PRIMARY KEY,
  name VARCHAR NOT NULL,
  type VARCHAR NOT NULL,
  source VARCHAR NOT NULL,
  size BIGINT,
  records INTEGER,
  status ENUM('ready', 'processing', 'error'),
  file_path VARCHAR,
  created_at TIMESTAMP
);

-- Activities table
CREATE TABLE activities (
  id SERIAL PRIMARY KEY,
  user_id VARCHAR REFERENCES users(id),
  action VARCHAR NOT NULL,
  status ENUM('success', 'processing', 'error'),
  created_at TIMESTAMP
);

For real-time updates:

// Real-time agent status updates
ws://localhost:8000/ws/agents

// Live activity feed
ws://localhost:8000/ws/activities

// Real-time metrics
ws://localhost:8000/ws/metrics

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

This project is licensed under the MIT License - see the LICENSE file for details.

For support and questions:

• Create an issue in the repository
• Check the documentation
• Contact the development team

• v0.1.0 - Initial release with basic dashboard functionality
• v0.2.0 - Added real-time monitoring
• v0.3.0 - Enhanced data management features
• v1.0.0 - Full production release (planned)

Note: This dashboard currently uses mock data. To connect to real data sources, implement the backend APIs described in the API Requirements section.