# DeployHub Admin Panel

A comprehensive admin dashboard for managing DeployHub users, apps, and builds.

## Features

### Dashboard
- **Real-time Statistics**: View total users, apps, builds, and active users
- **Usage Charts**: Line charts for user growth and bar charts for build activity
- **Platform Distribution**: Pie chart showing Android vs iOS app distribution
- **Recent Activity**: Lists of recent users and builds
- **App Icons Marquee**: Animated showcase of uploaded app icons

### User Management
- **User List**: Paginated view of all registered users
- **Search Functionality**: Search users by name or email
- **User Details**: View total apps and builds per user
- **Activate/Deactivate**: Control user access with a single click
- **User Deletion**: Remove users from the system
- **Activity Tracking**: See when users were last active
- **Role Management**: View user roles (admin/user)

### Security & Access Control
- **Role-Based Access**: Only users with admin role can access the panel
- **JWT Authentication**: Secure token-based authentication
- **Account Status Checking**: Automatically validates user status on every request
- **Deactivation Messages**: Users see proper messages when their account is deactivated

## Setup

### Prerequisites
- Backend server running on port 4000 (or configured API URL)
- PostgreSQL database with migrations applied
- At least one admin user in the database

### Installation

1. Navigate to the admin-frontend directory:
```bash
cd admin-frontend
```

2. Install dependencies:
```bash
npm install
```

3. Configure environment variables:
Create a `.env.local` file:
```env
NEXT_PUBLIC_API_URL=http://localhost:4000
```

4. Run the development server:
```bash
npm run dev
```

The admin panel will be available at `http://localhost:3001`

### Production Build

```bash
npm run build
npm start
```

## Database Setup

Run the migration to add admin fields to users table:

```bash
cd backend
npm run migration:run
```

### Create First Admin User

Connect to your PostgreSQL database and update an existing user to admin:

```sql
UPDATE users 
SET role = 'admin', is_active = true 
WHERE email = 'your-admin-email@example.com';
```

## Admin API Endpoints

All admin endpoints are under `/api/admin` and require:
- Valid JWT token in Authorization header
- User must have `role = 'admin'`

### Available Endpoints

- `GET /api/admin/stats` - Dashboard statistics
- `GET /api/admin/users` - List all users (paginated)
- `GET /api/admin/users/:id` - Get user details
- `PATCH /api/admin/users/:id/status` - Update user active status
- `PATCH /api/admin/users/:id/role` - Update user role
- `DELETE /api/admin/users/:id` - Delete user
- `GET /api/admin/recent-builds` - Get recent builds
- `GET /api/admin/recent-users` - Get recent users
- `GET /api/admin/apps-with-icons` - Get apps with icons for marquee

## User Frontend Integration

The user frontend (`frontend/`) has been updated to handle deactivated accounts:

- When a deactivated user tries to access their dashboard, they see a friendly message
- The message informs them their account is deactivated and to contact admin
- Users can log out and try a different account

## Features Added to Backend

### User Entity
- `role`: User role (default: 'user', can be 'admin')
- `isActive`: Account status (default: true)
- `lastActiveAt`: Timestamp of last activity

### Middleware Updates
- JWT strategy now checks `isActive` status
- Returns 401 error with message if account is deactivated
- `lastActiveAt` is updated on login and profile updates

### Admin Module
- AdminController: RESTful API for admin operations
- AdminService: Business logic for user management and statistics
- AdminGuard: Ensures only admins can access admin endpoints
- RolesGuard: Flexible role-based authorization

## Port Configuration

- **Frontend (User Panel)**: `http://localhost:3000`
- **Admin Frontend**: `http://localhost:3001`
- **Backend API**: `http://localhost:4000`

## Charts & Visualization

The admin panel uses [Recharts](https://recharts.org/) for data visualization:
- Line charts for trends
- Bar charts for activity
- Pie charts for distribution

## Responsive Design

The admin panel is fully responsive and works on:
- Desktop (optimized)
- Tablet
- Mobile (limited)

## Security Best Practices

1. Always use HTTPS in production
2. Set strong JWT secrets
3. Regularly review admin user list
4. Monitor user activity logs
5. Keep dependencies updated

## Troubleshooting

### Can't access admin panel
- Ensure your user has `role = 'admin'` in the database
- Check that backend is running on the correct port
- Verify `.env.local` has correct API URL

### Charts not displaying
- Ensure `recharts` is installed: `npm install recharts`
- Check browser console for errors

### Authentication failing
- Clear browser localStorage
- Check JWT_SECRET matches between backend and tokens
- Verify backend is returning proper error messages

## Future Enhancements

Potential features for future versions:
- Email notifications to deactivated users
- Bulk user operations
- Export user/build data to CSV
- Advanced filtering and sorting
- User activity logs viewer
- System health monitoring
- API usage analytics

## Support

For issues or questions:
1. Check the main DeployHub documentation
2. Review backend logs for errors
3. Check browser console for frontend errors
4. Verify database migrations are up to date