Nebula-Saas-Dashboard

A modern, responsive admin dashboard built with vanilla JavaScript featuring analytics, user management, billing systems, and dark/light mode.

Comment

Saas-Dashboard

A modern, responsive admin dashboard built with vanilla JavaScript featuring analytics, user management, billing systems, and dark/light mode.

https://img.shields.io/badge/Status-Production%2520Ready-success https://img.shields.io/badge/License-MIT-blue https://img.shields.io/badge/Version-1.0.0-green

🚀 Live Demo View Live Demo • Report Bug

📸 Preview https://via.placeholder.com/800x400/4f46e5/ffffff?text=SaaS+Admin+Dashboard

✨ Features 📊 Analytics & Reporting Interactive Charts - Revenue trends, user signups, and subscription analytics

KPI Dashboard - Key performance indicators with trend analysis

Real-time Data - Dynamic chart updates with period filters

👥 User Management User CRUD - Create, read, update, and delete users

Advanced Filtering - Filter by status, plan, and search functionality

Bulk Actions - Export users and batch operations

💳 Billing & Subscriptions Plan Management - Change, upgrade, or cancel subscriptions

Payment History - Complete transaction records

Billing Information - Manage company and payment details

⚙️ Settings & Customization Theme System - Dark/Light mode with persistence

Security Settings - Password updates and 2FA

Profile Management - User preferences and account settings

📱 Responsive Design Mobile-First - Optimized for all screen sizes

Touch-Friendly - Enhanced mobile interactions

Cross-Device - Consistent experience across devices

🛠️ Technology Stack Frontend:

https://img.shields.io/badge/HTML5-E34F26?logo=html5&logoColor=white

https://img.shields.io/badge/CSS3-1572B6?logo=css3&logoColor=white

https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=black

Libraries:

https://img.shields.io/badge/Chart.js-FF6384?logo=chart.js&logoColor=white

https://img.shields.io/badge/Font_Awesome-528DD7?logo=font-awesome&logoColor=white

Features:

✅ No Framework Dependencies

✅ Zero Build Process

✅ Vanilla JavaScript

✅ CSS Custom Properties

✅ Local Storage API

🚀 Quick Start Prerequisites Modern web browser (Chrome, Firefox, Safari, Edge)

Local web server (for local development)

Installation Clone the repository

bash git clone https://github.com/yourusername/saas-dashboard.git cd saas-dashboard Serve the files (choose one method)

Option A: Using Python

bash

Python 3

python -m http.server 8000

Python 2

python -m SimpleHTTPServer 8000 Option B: Using Node.js

bash npx http-server Option C: Using PHP

bash php -S localhost:8000 Open your browser

text http://localhost:8000 File Structure text saas-dashboard/ ├── index.html # Main application file ├── style.css # All styles and responsive design ├── script.js # Application logic and functionality ├── README.md # Project documentation └── assets/ # Additional resources (if any) 📖 Usage Guide Navigation Dashboard: View analytics and key metrics

Users: Manage user accounts and permissions

Billing: Handle subscriptions and payments

Settings: Configure application preferences

Key Interactions Click sidebar items to switch between pages

Use chart period buttons (Monthly/Quarterly/Yearly) to update visualizations

Click "Add User" to create new user accounts

Use search boxes to filter user lists

Toggle dark/light mode using the theme switch

Mobile Usage Tap the hamburger menu to open navigation

Swipe tables horizontally to view all columns

Use touch-friendly larger buttons and inputs

🎨 Customization Theming Modify CSS custom properties in :root and .dark-mode sections:

css :root { --primary: #4f46e5; /* Brand color / --bg-primary: #ffffff; / Background / --text-primary: #1e293b; / Text color */ } Adding New Pages Add navigation item in sidebar

Create page container in HTML

Implement page logic in JavaScript

Update routing in setActivePage() function

Extending Charts Add new chart types by extending the initCharts() function:

javascript // Example: Add a new chart const newChart = new Chart(ctx, { type: 'doughnut', data: chartData, options: chartOptions }); 🤝 Contributing We welcome contributions! Please see our Contributing Guide for details.

Development Setup Fork the repository

Create a feature branch (git checkout -b feature/amazing-feature)

Commit your changes (git commit -m 'Add amazing feature')

Push to the branch (git push origin feature/amazing-feature)

Open a Pull Request

Reporting Issues Found a bug? Please create an issue with:

Description of the problem

Steps to reproduce

Browser and OS information

Screenshots (if applicable)

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

🙏 Acknowledgments Chart.js for powerful data visualization

Font Awesome for beautiful icons

Google Fonts for Inter typeface

Tailwind CSS for design inspiration

📞 Support Documentation: View Docs

Issues: GitHub Issues

Email: support@yourcompany.com

⭐ Star this repo if you found it helpful!

Built with ❤️ by [Your Name] https://img.shields.io/badge/GitHub-100000?logo=github&logoColor=white https://img.shields.io/badge/Twitter-1DA1F2?logo=twitter&logoColor=white https://img.shields.io/badge/LinkedIn-0077B5?logo=linkedin&logoColor=white

Built With

Share this project:

Updates