CloudyPanel - Web Dashboard

CloudyPanel is the web-based administration dashboard for CloudyAI, built with Vue 3 and Vite. It provides real-time monitoring, configuration management, and analytics.

🎯 Features

• Real-Time Monitoring: Live message feed with WebSocket
• Guild Management: Configure server settings
• Analytics Dashboard: View moderation statistics
• Sanction History: Browse past sanctions and logs
• User Management: View user-specific moderation history
• Modern UI: Responsive design with TailwindCSS

🚀 Quick Start

Installation

cd CloudyPanel
npm install

Configuration

Create .env file:

VITE_API_URL=http://localhost:3000

Running

# Development
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

🌐 Access

• Development: http://localhost:8080
• Production: Serve dist/ folder with any static file server

📊 Dashboard Features

Overview Page

• Total guilds configured
• Messages moderated today
• Active sanctions
• Recent activity feed

Guild Configuration

• View/edit guild settings
• Enable/disable AI moderation
• Configure custom rules
• Set thresholds

Moderation Logs

• Filter by guild, user, action
• View violation details
• Export logs

Analytics

• Moderation trends
• Most common violations
• User statistics
• Time-based charts

🔧 Tech Stack

• Framework: Vue 3 (Composition API)
• Build Tool: Vite
• Styling: TailwindCSS
• State Management: Pinia
• HTTP Client: Axios
• WebSocket: Socket.io-client
• Charts: Chart.js

📁 Project Structure

CloudyPanel/
├── src/
│   ├── components/      # Vue components
│   ├── views/           # Page views
│   ├── router/          # Vue Router
│   ├── stores/          # Pinia stores
│   ├── services/        # API services
│   ├── assets/          # Static assets
│   └── main.js          # Entry point
├── public/              # Public assets
└── .env

🔐 Authentication

CloudyPanel uses JWT authentication:

1. Login with Discord OAuth
2. Receive JWT token
3. Token stored in localStorage
4. Included in all API requests

📝 Environment Variables

Variable	Description	Required
VITE_API_URL	CloudyAPI base URL	Yes

🐛 Troubleshooting

Cannot connect to API

• Verify VITE_API_URL is correct
• Check CloudyAPI is running
• Ensure CORS is configured

WebSocket not connecting

• Check CloudyAPI WebSocket endpoint
• Verify firewall settings
• Check browser console for errors

Build fails

• Run npm install to update dependencies
• Clear node_modules and reinstall
• Check Node.js version (18+)