# 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**
   ```bash
   cd dashboard
   npm install
   ```

2. **Configure Environment**
   ```bash
   cp .env.example .env
   # Edit .env with your API endpoints
   ```

3. **Start Development Server**
   ```bash
   npm run dev
   ```

4. **Build for Production**
   ```bash
   npm run build
   ```

### Environment Variables

```env
# 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**
```bash
# 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**
```bash
# 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.