UrNetwork-Stats-Dashboard-remade/readme.md

# UrNetwork Stats Dashboard - Enhanced Multi-Account Edition v2.1

Hits - [demo](http://38.242.156.120:90) | [![Hits](https://hits.sh/38.242.156.120:90.svg)](https://hits.sh/38.242.156.120:90/)

Hits - [repo](https://forgejo.plainrock127.xyz/mxnticek/UrNetwork-Stats-Dashboard-remade) | [![Hits](https://hits.sh/forgejo.plainrock127.xyz/mxnticek/UrNetwork-Stats-Dashboard-remade.svg)](https://hits.sh/forgejo.plainrock127.xyz/mxnticek/UrNetwork-Stats-Dashboard-remade/)

---

## 🌟 Quick Links

- 🚀 [Quick Start Guide](QUICKSTART.md) - Get running in 5 minutes
- 📊 [Webhook Setup Tutorial](WEBHOOK_GUIDE.md) - Discord, Slack, Telegram examples
- 🎨 [Design Comparison](DESIGN_COMPARISON.md) - Why this design?
- 🔄 [Upgrade Guide](UPGRADE_GUIDE.md) - Migrating from v1.0
- 📝 [Changelog](CHANGELOG.md) - Version history
- 🇨🇿 [Český README](README_CZ.md) - Czech documentation

---

## 🇬🇧 English

### About The Project

This is a **significantly enhanced multi-account version** of the original [UrNetwork Stats Dashboard](https://github.com/techroy23/UrNetwork-Stats-Dashboard). Track unlimited UrNetwork accounts with beautiful charts, real-time updates, and webhook notifications.

**What's New in v2.1:**
- 🎯 **Multi-Account Support** - Track unlimited UrNetwork accounts
- 🎨 **Clean Design** - Cloudflare-inspired dark theme
- 📊 **Better Charts** - White text, tooltips anywhere on chart
- 🔐 **Separate Auth** - Admin password independent from UrNetwork
- ⚡ **Daily Cleanup** - Auto-delete data older than 7 days
- 📱 **Mobile Optimized** - Touch-friendly interface

> **Enhanced by AI:** v2.0+ developed with Claude (Anthropic) for better UX, multi-account support, and modern design.

---

### ✨ Key Features

#### 🎯 Multi-Account Management
- ✅ Track unlimited UrNetwork accounts simultaneously
- ✅ Combined statistics from all accounts
- ✅ Individual charts for each account
- ✅ Custom nicknames for easy identification
- ✅ Toggle accounts on/off without deletion
- ✅ Color-coded for easy distinction

#### 📊 Advanced Visualization
- ✅ Interactive Chart.js charts with tooltips **anywhere on chart**
- ✅ Total data, Paid vs Unpaid, Delta charts
- ✅ White readable text on all charts (no more squinting!)
- ✅ World map showing provider locations
- ✅ Real-time updates every minute

#### ⚙️ Automation
- ✅ Data collection every 15 minutes
- ✅ Daily cleanup (keeps last 7 days)
- ✅ Webhook notifications (Discord, Slack, Telegram)
- ✅ Device management across all accounts

#### 🎨 Modern UI
- ✅ Clean Cloudflare-inspired dark theme
- ✅ No gradients (better chart visibility)
- ✅ Blue accent color (#3b82f6)
- ✅ Fully responsive (mobile, tablet, desktop)
- ✅ Czech & English support

---

### 🚀 Quick Start

```bash
# 1. Clone repository
git clone https://forgejo.plainrock127.xyz/mxnticek/UrNetwork-Stats-Dashboard-remade
cd UrNetwork-Stats-Dashboard-remade

# 2. Install dependencies
pip install Flask Flask-SQLAlchemy Flask-APScheduler requests python-dateutil

# 3. Run
python main.py

# 4. Open browser
# http://localhost:90
```

**First Run Setup:**
1. Set your **admin password** (NOT your UrNetwork password!)
2. Add your UrNetwork accounts (email + password + nickname)
3. Done! Dashboard will start collecting data every 15 minutes

📖 **Need more details?** See [QUICKSTART.md](QUICKSTART.md)

---

### 📊 Webhook Setup - Quick Examples

#### Discord - Simple
```json
{
  "content": "📊 **${account}**: ${total_gb} GB"
}
```

#### Discord - Rich Embed (Recommended)
```json
{
  "username": "UrNetwork Bot",
  "embeds": [{
    "title": "⚡ ${account} - New Data!",
    "color": 3901635,
    "fields": [
      {"name": "💰 Paid", "value": "`${paid_gb} GB`", "inline": true},
      {"name": "📡 Unpaid", "value": "`${unpaid_gb} GB`", "inline": true},
      {"name": "💾 Total", "value": "**${total_gb} GB**", "inline": false}
    ],
    "footer": {"text": "UrNetwork Stats"},
    "timestamp": "${update_time}"
  }]
}
```

#### Telegram
```json
{
  "chat_id": "YOUR_CHAT_ID",
  "text": "📊 *${account}*\n💾 Total: ${total_gb} GB\n💰 Paid: ${paid_gb} GB\n📡 Unpaid: ${unpaid_gb} GB",
  "parse_mode": "Markdown"
}
```

**Available Variables:**
- `${account}` - Account nickname
- `${paid_gb}` - Paid data in GB
- `${unpaid_gb}` - Unpaid data in GB
- `${total_gb}` - Total data in GB
- `${update_time}` - Timestamp

📖 **Full webhook guide:** [WEBHOOK_GUIDE.md](WEBHOOK_GUIDE.md)

---

### 🎨 Why This Design?

After extensive testing, we chose a **clean Cloudflare-inspired design** because:

1. **Better Chart Visibility** - Solid dark background = better contrast
2. **Professional Look** - Mimics enterprise dashboards
3. **No Eye Strain** - Pure colors without gradients
4. **Performance** - No blur effects = faster rendering
5. **Accessibility** - High contrast ratios

**Color Scheme:**
```css
Background:   #0c0d0e  (Deep dark)
Primary:      #3b82f6  (Blue)
Text:         #e5e7eb  (Light)
Success:      #10b981  (Green)
Danger:       #ef4444  (Red)
```

📖 **Design details:** [DESIGN_COMPARISON.md](DESIGN_COMPARISON.md)

---

### 📁 Project Structure

```
urnetwork-stats/
├── main.py                  # Main application (use this!)
├── instance/
│   └── transfer_stats.db    # SQLite database (auto-created)
├── .env                     # Config (auto-created)
├── README.md                # This file
├── requirements.txt         # Dependencies
└── docs/
    ├── QUICKSTART.md        # Quick start guide
    ├── WEBHOOK_GUIDE.md     # Webhook examples
    ├── UPGRADE_GUIDE.md     # Migration from v1.0
    ├── DESIGN_COMPARISON.md # Design documentation
    └── CHANGELOG.md         # Version history
```

---

### 🛠️ Tech Stack

- **Backend:** Flask 3.0+
- **Database:** SQLAlchemy + SQLite
- **Scheduler:** APScheduler
- **Frontend:** React 18 (private dashboard)
- **Charts:** Chart.js 4.0+
- **Maps:** Leaflet.js 1.9+
- **Styling:** Custom CSS (Cloudflare-inspired)

---

### 🔄 Upgrading from v1.0

```bash
# 1. Backup
cp .env .env.backup
cp instance/transfer_stats.db instance/transfer_stats.db.backup

# 2. Download new version
git pull

# 3. Run migration
python migrate.py

# 4. Restart
python main.py
```

Your existing account will be migrated automatically!

📖 **Full upgrade guide:** [UPGRADE_GUIDE.md](UPGRADE_GUIDE.md)

---

### 🐛 Troubleshooting

**Can't login?**
```bash
# Check admin password exists
cat .env | grep ADMIN_PASSWORD

# If missing, add it
echo "ADMIN_PASSWORD=your_password" >> .env
```

**Charts not showing text?**
- Make sure you're using `main.py` v2.1+ with white text

**Webhook not working?**
1. Check URL is correct
2. Validate JSON at [jsonlint.com](https://jsonlint.com/)
3. Check logs: `tail -f nohup.out | grep webhook`

**Port already in use?**
```python
# Edit last line of main.py
app.run(host="0.0.0.0", port=8080, debug=False)  # Change port
```

---

### 🚀 Production Deployment

**With Gunicorn (recommended):**
```bash
pip install gunicorn
gunicorn --bind 0.0.0.0:90 --workers 4 main:app
```

**Systemd Service:**
```ini
[Unit]
Description=UrNetwork Stats Dashboard
After=network.target

[Service]
Type=simple
User=your_user
WorkingDirectory=/path/to/urnetwork-stats
ExecStart=/usr/bin/python3 main.py
Restart=always

[Install]
WantedBy=multi-user.target
```

```bash
sudo systemctl enable urnetwork-stats
sudo systemctl start urnetwork-stats
```

---

### 📊 Screenshots

**Public Dashboard:**
- Combined statistics from all accounts
- Individual charts per account
- World map of providers

**Private Dashboard:**
- Overview with paid vs unpaid charts
- Account details & leaderboard
- Device management

**Account Management:**
- Add unlimited accounts
- Toggle on/off
- Custom nicknames

---

### 🙏 Credits

- **Original:** [techroy23/UrNetwork-Stats-Dashboard](https://github.com/techroy23/UrNetwork-Stats-Dashboard)
- **v2.0+ Enhanced by:** Claude (Anthropic AI)
- **Design Inspiration:** Cloudflare, Vercel
- **Special Thanks:** Vlastík (mxnticek) for testing

---

### 📜 License

Extends the original UrNetwork Stats Dashboard. Please respect the original author's work.

---

### 🔮 Roadmap (v3.0?)

- [ ] Dark/Light theme toggle
- [ ] Email notifications
- [ ] Export to CSV/JSON
- [ ] Mobile app (React Native)
- [ ] Advanced analytics
- [ ] Docker container
- [ ] Cost calculator

---

### 📞 Support

- **Issues:** Use GitHub/Forgejo Issues
- **Pull Requests:** Contributions welcome!
- **Documentation:** Help improve docs

---

## 🇨🇿 Česká Dokumentace

**Kompletní český README:** [README_CZ.md](README_CZ.md)

### Rychlý Start

```bash
# 1. Klonovat
git clone https://forgejo.plainrock127.xyz/mxnticek/UrNetwork-Stats-Dashboard-remade
cd UrNetwork-Stats-Dashboard-remade

# 2. Instalace
pip install Flask Flask-SQLAlchemy Flask-APScheduler requests python-dateutil

# 3. Spustit
python main.py

# 4. Otevřít prohlížeč
# http://localhost:90
```

### Klíčové Funkce

- 🎯 **Multi-Account** - Sledujte neomezený počet účtů
- 📊 **Vylepšené Grafy** - Bílý text, tooltip kdekoliv
- 🔐 **Oddělená Auth** - Admin heslo nezávislé na UrNetwork
- ⚡ **Denní Čištění** - Auto-mazání dat starších 7 dní
- 📱 **Mobilní** - Touch-friendly rozhraní

### Webhook Příklady

**Discord - Jednoduchý:**
```json
{
  "content": "📊 **${account}**: ${total_gb} GB"
}
```

**Discord - Bohatý:**
```json
{
  "embeds": [{
    "title": "⚡ ${account} - Nová Data!",
    "color": 3901635,
    "fields": [
      {"name": "💰 Placená", "value": "`${paid_gb} GB`", "inline": true},
      {"name": "📡 Neplacená", "value": "`${unpaid_gb} GB`", "inline": true}
    ]
  }]
}
```

**Telegram:**
```json
{
  "chat_id": "VAŠE_CHAT_ID",
  "text": "📊 *${account}*\n💾 Celkem: ${total_gb} GB",
  "parse_mode": "Markdown"
}
```

📖 **Kompletní návod:** [WEBHOOK_GUIDE.md](WEBHOOK_GUIDE.md)

---

**Version:** v2.1.1 | **Last Updated:** November 21, 2024

**Made with ❤️ and 🤖 AI**