appserver/dashboard

SaaS Platform Dashboard

A modern, clean, and compact dashboard for managing your SaaS platform built with React, TypeScript, and Tailwind CSS.

Features

🎯 Core Management

• Users Management: Add, edit, delete, and manage user permissions
• Organizations: Multi-tenant organization management
• Applications: Deploy and manage TypeScript applications
• Database Tables: View and manage PostgreSQL database tables
• API Keys: Generate and manage API keys for external integration
• Settings: Configure platform-wide settings

🎨 Modern UI/UX

• Clean, minimalist design with Tailwind CSS
• Responsive layout for mobile and desktop
• Interactive data tables with pagination
• Real-time status updates
• Toast notifications for user feedback
• Loading states and error handling

🚀 Performance

• Built with React 18 and TypeScript
• Optimized with Vite for fast development
• React Query for efficient data fetching
• Code splitting and lazy loading
• Component-based architecture

Quick Start

Prerequisites

• Node.js 18+
• npm or yarn
• Access to SaaS platform API endpoints

Installation

1. Clone and Setup

   cd dashboard
   npm install
   

2. Configure Environment

   cp .env.example .env
   # Edit .env with your API endpoints
   

3. Start Development Server

   npm run dev
   

4. Build for Production

   npm run build
   

Environment Variables

# API Configuration
VITE_API_URL=http://localhost:8888
VITE_AUTH_API_URL=http://localhost:8888/auth
VITE_STORAGE_URL=http://localhost:8888/storage

# Environment
VITE_NODE_ENV=development

# Debug
VITE_DEBUG=false

Project Structure

dashboard/
├── src/
│   ├── components/          # Reusable components
│   │   ├── Layout.tsx      # Main app layout
│   │   ├── DashboardStats.tsx
│   │   └── DataTable.tsx   # Generic data table component
│   ├── pages/              # Page components
│   │   ├── Dashboard.tsx   # Main dashboard
│   │   ├── Users.tsx       # User management
│   │   ├── Organizations.tsx
│   │   ├── Applications.tsx
│   │   ├── Database.tsx
│   │   ├── ApiKeys.tsx
│   │   ├── Settings.tsx
│   │   └── Login.tsx       # Authentication
│   ├── hooks/              # Custom React hooks
│   │   └── useAuth.ts      # Authentication hook
│   ├── services/           # API services
│   │   └── api.ts         # API client
│   ├── types/              # TypeScript type definitions
│   │   └── index.ts
│   ├── utils/              # Utility functions
│   │   └── helpers.ts
│   ├── styles/             # CSS and styling
│   │   └── globals.css
│   ├── App.tsx             # Main app component
│   └── main.tsx            # Entry point
├── public/                 # Static assets
├── Dockerfile             # Docker configuration
├── nginx.conf            # Nginx configuration
├── package.json          # Dependencies and scripts
└── README.md             # This file

Pages Overview

🏠 Dashboard

• Platform statistics and metrics
• User growth charts
• Application and deployment trends
• Recent activity feed

👥 Users Management

• List all platform users
• Add/edit/delete users
• Manage user status (active/inactive/suspended)
• View user details and activity

🏢 Organizations

• Multi-tenant organization management
• Create and configure organizations
• Manage organization members
• View organization applications

💻 Applications

• Deploy and manage applications
• View deployment status and logs
• Configure application settings
• Monitor application health

🗄️ Database

• View database tables and schemas
• Monitor table sizes and row counts
• SQL query interface
• Data export capabilities

🔑 API Keys

• Generate API keys for external services
• Manage key permissions and expiration
• Monitor key usage and activity
• Revoke and delete keys

⚙️ Settings

• Platform configuration
• Security settings
• Database maintenance
• Notification preferences

Components

DataTable

Generic, reusable data table component with:

• Pagination support
• Search and filtering
• Sortable columns
• Custom cell rendering
• Loading and empty states

Layout

Main application layout featuring:

• Responsive sidebar navigation
• User profile and logout
• Mobile-friendly menu
• Breadcrumb support

DashboardStats

Statistics cards displaying:

• Platform metrics
• Growth indicators
• Real-time data updates
• Interactive charts

Technical Stack

Frontend

• React 18: Component framework
• TypeScript: Type safety
• Vite: Build tool and dev server
• Tailwind CSS: Utility-first CSS
• React Router: Client-side routing
• React Query: Data fetching and caching
• Lucide React: Icon library
• React Hook Form: Form management
• Recharts: Data visualization

Build Tools

• Vite: Fast build and HMR
• TypeScript: Static typing
• ESLint: Code linting
• PostCSS: CSS processing

Development

Scripts

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Lint code
npm run lint

# Fix linting issues
npm run lint:fix

Code Quality

• ESLint configuration for code consistency
• TypeScript strict mode for type safety
• Component-based architecture
• Custom hooks for logic reuse

Authentication

The dashboard uses JWT tokens for authentication:

• Login endpoint validates credentials
• Token stored in localStorage
• Automatic token refresh
• Protected routes with redirect
• Logout clears token and redirects

API Integration

All API calls are handled through a centralized service:

• Axios HTTP client
• Request/response interceptors
• Automatic token injection
• Error handling and user feedback
• Request deduplication and caching

Deployment

Docker

# Build Docker image
docker build -t saas-dashboard .

# Run container
docker run -p 80:80 saas-dashboard

Static Files

After building, static files are in dist/:

• Can be served by any web server
• Nginx configuration included
• SPA routing support
• Optimized assets with gzip

Customization

Styling

• Tailwind CSS for utility classes
• Custom components with CSS modules
• Theme configuration in tailwind.config.js
• Responsive design breakpoints

Components

• Modular component architecture
• Props-based customization
• Composition over inheritance
• Reusable utility components

Security

• XSS protection with React
• CSRF protection via API endpoints
• Secure token storage
• Input validation and sanitization
• HTTPS-only in production

Performance

• Code splitting and lazy loading
• Efficient data fetching with React Query
• Optimized bundle size with Vite
• Caching strategies
• Image and asset optimization

Contributing

1. Follow the existing code style
2. Use TypeScript for type safety
3. Write tests for new features
4. Update documentation
5. Keep components small and focused

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers

License

This dashboard is part of the SaaS Platform project.