Cloudways Resource Monitor

A real-time, premium server monitoring dashboard for Cloudways managed fleets. Built with Next.js 16, TypeScript, Supabase, and Plotly.js.

🚀 Features

• Real-time Telemetry — CPU, Memory, Disk, Network, MySQL, Memcached, Varnish, and more.
• Multi-Provider Aware — Automatically filters and normalizes metrics for DigitalOcean, AWS, GCP, Vultr, Linode, and Kyup.
• Fleet Management — Dedicated Admin Portal to manage servers, users, and cross-platform assignments.
• Secure RBAC — Integrated Supabase Auth with Role-Based Access Control (Admin vs. User).
• User Self-Service — Profile management for display names and secure password updates.
• Adaptive Logo Engine — Intelligent brightness detection for SVG and image logos with automated inversion for consistent branding.
• Interactive Analytics — High-performance Plotly.js line charts with hover tooltips and dynamic time ranges (1h to 6M).
• Viewport-Optimized UI — A strictly light-themed, professional interface locked to the viewport with internal scrolling.
• Responsive & Mobile Ready — Fully optimized experience across desktop, tablet, and mobile devices.

🛠 Tech Stack

Layer	Technology
Framework	Next.js 16 (App Router)
Auth & Database	Supabase (Auth + PostgreSQL + RLS)
Language	TypeScript
Styling	TailwindCSS
Charts	Plotly.js
Icons	Google Material Symbols

📦 Setup & Installation

1. Prerequisites

• Node.js ≥ 20.9
• A Supabase Project
• Cloudways API Credentials (Email + API Key)

2. Clone & Install

git clone https://github.com/sayedibnmasud/cloudwaysServerMonitor.git
cd cloudwaysServerMonitor
npm install

3. Environment Configuration

Create a .env.local file in the root directory:

# Cloudways API Integration
CLOUDWAYS_API_KEY=your_cloudways_api_key
CLOUDWAYS_EMAIL=your_email@example.com

# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=your_supabase_anon_key
SUPABASE_SECRET_KEY=your_service_role_key # For server-side admin actions

# Site Configuration
NEXT_PUBLIC_SITE_URL=http://localhost:3000

4. Database Schema

Ensure your Supabase project has the following tables:

• profiles: Links to auth.users, stores email, full_name, and role ('admin' | 'user').
• servers: Stores server metadata (ID, Name, Provider Type, Logo URL, is_active flag).
• user_servers: Join table for assigning specific servers to standard users.

5. Development

npm run dev

🔐 Access Control & Navigation

Admin Portal (/admin)

Accessible only to users with the admin role. Allows full CRUD operations on servers and users, and management of server-to-user assignments. Role enforcement is handled at the layout/page level (not in the proxy) to avoid redundant DB queries on every request.

Server Gateway

The landing page for users to search, filter, and select from their assigned server fleet. Features a stabilized search bar for a smooth filtering experience.

Global User Dropdown

Located at the top-right of every page, providing instant access to Profile Settings, Admin Management, and Logout.

📂 Project Structure

src/
├── app/
│   ├── admin/           # Management Portal (Users & Servers)
│   ├── actions/         # Server Actions (Auth, Cloudways, Admin)
│   ├── api/             # Metrics API endpoints (graph & overview)
│   ├── auth/            # Supabase Auth callback handler
│   └── login/           # Authentication & Password Reset views
├── components/          # Reusable UI (Charts, Modals, Dropdowns)
├── lib/                 # Core logic (Supabase, Utils, Metrics)
└── proxy.ts             # Session refresh & Route protection

📄 License

MIT © 2026 Sayed Ibn Masud — see LICENSE for details.