realtimecursor/SETUP_GUIDE.md

Real-time collaboration system with cursor tracking and approval workflow

# 🚀 Complete Setup Guide

## Quick Start

### 1. Start the Backend Server
```bash
cd api
npm start
```

### 2. Start the Frontend
```bash
cd realtime
npm run dev
```

### 3. Access the Application
- **Frontend**: http://localhost:5173
- **Backend API**: http://localhost:3000

## 🔐 Default Admin Account

**Login Credentials:**
- **Email**: `admin@example.com`
- **Password**: `Admin123!`

## 🎯 How to Identify Admin Users

### Method 1: Check in the UI
1. Login to the application
2. Look for the **👑 Admin** badge next to user names
3. Admin users have a crown icon in their profile
4. Admin users can access the "Admin Panel" tab

### Method 2: Check via Script
```bash
cd api
node check-admin-users.js
```

This will show:
- All users with their roles
- User IDs and creation dates
- Summary of admin vs regular users

### Method 3: Check via API
```bash
# Login as admin first
curl -X POST http://localhost:3000/auth/login \
  -H "Content-Type: application/json" \
  -d '{"email":"admin@example.com","password":"Admin123!"}'

# Use the token to get all users
curl -X GET http://localhost:3000/admin/users \
  -H "Authorization: Bearer YOUR_TOKEN_HERE"
```

## 🎨 UI Features

### Enhanced Styling
- **Gradient Backgrounds**: Beautiful gradient backgrounds throughout
- **Modern Cards**: Glassmorphism-style cards with backdrop blur
- **Animated Elements**: Smooth animations and transitions
- **Responsive Design**: Works perfectly on all screen sizes
- **Custom Components**: Reusable styled components

### Admin Panel Features
- **Statistics Dashboard**: Visual cards showing user metrics
- **Advanced Search**: Real-time search by name or email
- **Role Filtering**: Filter users by admin/user roles
- **Bulk Operations**: Select and delete multiple users
- **User Avatars**: Colorful gradient avatars with initials
- **Role Badges**: Visual indicators for admin/user roles
- **Action Buttons**: Styled edit and delete buttons

### User Identification
- **Profile Avatars**: Gradient avatars with user initials
- **Role Badges**: Clear admin/user role indicators
- **User IDs**: Shortened user IDs displayed in the interface
- **"You" Indicator**: Shows which user is currently logged in
- **Admin Crown**: Crown icons for admin users

## 🔧 Testing Admin Functionality

### Run Comprehensive Tests
```bash
cd api
node test-admin-enhanced.js
```

This tests:
- User creation and management
- Role updates and permissions
- Bulk operations
- Search and filtering
- Statistics tracking

### Manual Testing Steps
1. **Login as Admin**: Use default admin credentials
2. **View Dashboard**: Check statistics cards
3. **Create Users**: Add new users with different roles
4. **Search/Filter**: Test search and role filtering
5. **Edit Users**: Update user profiles
6. **Change Roles**: Promote users to admin
7. **Bulk Delete**: Select and delete multiple users

## 📱 Responsive Design

The application is fully responsive:
- **Desktop**: Full-featured admin panel with all columns
- **Tablet**: Optimized layout with adjusted spacing
- **Mobile**: Stacked layout with touch-friendly buttons

## 🎨 CSS Classes Reference

### Custom Components
- `.auth-card` - Authentication form styling
- `.admin-card` - Admin panel card styling
- `.stat-card` - Statistics card with hover effects
- `.btn-primary` - Primary action buttons
- `.btn-success` - Success/create buttons
- `.btn-danger` - Delete/danger buttons
- `.input-field` - Styled input fields
- `.admin-table` - Enhanced table styling
- `.admin-badge` - Role indicator badges
- `.loading-spinner` - Loading animation
- `.alert-success` - Success message styling
- `.alert-error` - Error message styling

### Animations
- `.animate-fadeInUp` - Fade in from bottom
- `.animate-slideInRight` - Slide in from right
- `.animate-pulse-slow` - Slow pulsing animation

## 🔒 Security Features

### Admin Protection
- **Self-Protection**: Admins cannot delete/modify themselves
- **Role Validation**: Server-side role checking
- **JWT Authentication**: Secure token-based auth
- **Input Validation**: All inputs validated on server

### Password Requirements
- Minimum 8 characters
- At least one uppercase letter
- At least one lowercase letter
- At least one number
- At least one special character

## 🚀 Production Deployment

### Environment Variables
Create `.env` files:

**api/.env:**
```
JWT_SECRET=your-super-secret-jwt-key-change-this-in-production
PORT=3000
```

**realtime/.env:**
```
VITE_API_URL=http://localhost:3000
```

### Build for Production
```bash
# Build frontend
cd realtime
npm run build

# Start backend in production mode
cd api
NODE_ENV=production npm start
```

## 🔧 Troubleshooting

### Common Issues

1. **Server not starting**: Check if port 3000 is available
2. **Frontend not connecting**: Verify API URL in frontend
3. **Admin login fails**: Ensure server is running and default admin is created
4. **Styling issues**: Make sure Tailwind CSS is properly configured

### Debug Commands
```bash
# Check if server is running
curl http://localhost:3000/health

# Check admin users
cd api && node check-admin-users.js

# Test admin functionality
cd api && node test-admin-enhanced.js
```

## 📚 API Documentation

### Authentication Endpoints
- `POST /auth/register` - Register new user
- `POST /auth/login` - Login user
- `GET /auth/me` - Get current user
- `PUT /auth/profile` - Update profile
- `PUT /auth/change-password` - Change password

### Admin Endpoints
- `GET /admin/users` - Get all users (with filters)
- `GET /admin/stats` - Get user statistics
- `POST /admin/users` - Create user
- `PUT /admin/users/:id` - Update user
- `PUT /admin/users/:id/role` - Update user role
- `DELETE /admin/users/:id` - Delete user
- `DELETE /admin/users` - Bulk delete users

## 🎯 Next Steps

1. **Database Integration**: Replace in-memory storage with PostgreSQL/MongoDB
2. **Email Notifications**: Add email verification and notifications
3. **Advanced Permissions**: Implement granular permission system
4. **Audit Logging**: Track all admin actions
5. **File Upload**: Add profile picture uploads
6. **Export Features**: Export user data to CSV/Excel

## 🆘 Support

If you encounter any issues:
1. Check the console for error messages
2. Verify all dependencies are installed
3. Ensure both frontend and backend are running
4. Check the troubleshooting section above

The system is now fully functional with beautiful styling and comprehensive admin features! 🎉