commit c5332ce6b0bd0e04f9b944fd5deb70da5885ae31
Author: Muhammad Ibrahim <iby@9.technology>
Date:   Tue Sep 16 15:36:42 2025 +0100

    first commit

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..bd47193
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,137 @@
+# Dependencies
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.env.production
+
+# Build outputs
+dist/
+build/
+out/
+
+# Logs
+logs/
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Runtime data
+pids/
+*.pid
+*.seed
+*.pid.lock
+
+# Coverage directory used by tools like istanbul
+coverage/
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Dependency directories
+jspm_packages/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+
+# Gatsby files
+.cache/
+public
+
+# Storybook build outputs
+.out
+.storybook-out
+
+# Temporary folders
+tmp/
+temp/
+
+# Editor directories and files
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Database
+*.db
+*.sqlite
+*.sqlite3
+
+# Prisma
+prisma/migrations/dev.db*
+
+# Backend specific
+backend/logs/
+backend/uploads/
+backend/temp/
+
+# Frontend specific
+frontend/dist/
+frontend/.vite/
+
+# Agent specific
+agents/*.log
+
+# SSL certificates
+*.pem
+*.key
+*.crt
+*.csr
+
+# Backup files
+*.bak
+*.backup
+*.old
+
+# Test files
+test-results/
+playwright-report/
+test-results.xml
+
+# Package manager lock files (uncomment if you want to ignore them)
+# package-lock.json
+# yarn.lock
+# pnpm-lock.yaml
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..0b533d9
--- /dev/null
+++ b/README.md
@@ -0,0 +1,434 @@
+# PatchMon - Linux Patch Monitoring System
+
+A comprehensive system for monitoring Linux package updates across multiple hosts with a modern web interface and automated agent deployment.
+
+## Features
+
+- **Multi-Host Monitoring**: Monitor package updates across multiple Linux servers
+- **Real-time Dashboard**: Web-based dashboard with statistics and host management
+- **Automated Agents**: Lightweight agents for automatic data collection
+- **Host Grouping**: Organize hosts into groups for better management
+- **Repository Tracking**: Monitor APT/YUM repositories and their usage
+- **Security Updates**: Track security-specific package updates
+- **User Management**: Role-based access control with granular permissions
+- **Dark Mode**: Modern UI with dark/light theme support
+- **Agent Versioning**: Manage and auto-update agent versions
+- **API Credentials**: Secure agent authentication system
+
+## Prerequisites
+
+- **Node.js**: 18.0.0 or higher
+- **PostgreSQL**: 12 or higher
+- **Linux**: Ubuntu, Debian, CentOS, RHEL, or Fedora (for agents)
+
+## Quick Start
+
+### 1. Clone and Install
+
+```bash
+git clone <repository-url>
+cd patchmon
+npm install
+```
+
+### 2. Database Setup
+
+Create a PostgreSQL database:
+
+```sql
+CREATE DATABASE patchmon;
+CREATE USER patchmon_user WITH PASSWORD 'your_secure_password';
+GRANT ALL PRIVILEGES ON DATABASE patchmon TO patchmon_user;
+```
+
+### 3. Environment Configuration
+
+Create `.env` file in the project root:
+
+```bash
+# Database
+DATABASE_URL="postgresql://patchmon_user:your_secure_password@localhost:5432/patchmon?schema=public"
+
+# Backend
+NODE_ENV=production
+PORT=3001
+API_VERSION=v1
+
+# Security
+CORS_ORIGINS=https://your-frontend.example
+RATE_LIMIT_WINDOW_MS=900000
+RATE_LIMIT_MAX=100
+AUTH_RATE_LIMIT_WINDOW_MS=600000
+AUTH_RATE_LIMIT_MAX=20
+AGENT_RATE_LIMIT_WINDOW_MS=60000
+AGENT_RATE_LIMIT_MAX=120
+ENABLE_HSTS=true
+TRUST_PROXY=1
+JSON_BODY_LIMIT=5mb
+ENABLE_LOGGING=false
+LOG_LEVEL=info
+
+# JWT Secret (generate a strong secret)
+JWT_SECRET=your-super-secure-jwt-secret-here
+
+# Frontend
+VITE_API_URL=https://your-api.example/api/v1
+```
+
+### 4. Database Migration
+
+```bash
+cd backend
+npx prisma migrate deploy
+npx prisma generate
+```
+
+### 5. Create Admin User
+
+```bash
+cd backend
+node -e "
+const { PrismaClient } = require('@prisma/client');
+const bcrypt = require('bcryptjs');
+const prisma = new PrismaClient();
+
+async function createAdmin() {
+  const hashedPassword = await bcrypt.hash('admin123', 10);
+  await prisma.user.create({
+    data: {
+      username: 'admin',
+      email: 'admin@example.com',
+      password: hashedPassword,
+      role: 'admin'
+    }
+  });
+  console.log('Admin user created: admin / admin123');
+  await prisma.\$disconnect();
+}
+
+createAdmin().catch(console.error);
+"
+```
+
+### 6. Start Services
+
+**Development:**
+```bash
+# Start both backend and frontend
+npm run dev
+
+# Or start individually
+npm run dev:backend
+npm run dev:frontend
+```
+
+**Production:**
+```bash
+# Build frontend
+npm run build:frontend
+
+# Start backend
+cd backend
+npm start
+```
+
+### 7. Access the Application
+
+- **Frontend**: http://localhost:3000
+- **Backend API**: http://localhost:3001
+- **Default Login**: admin / admin123
+
+## Agent Installation
+
+### Automatic Installation
+
+1. **Create a Host** in the web interface
+2. **Copy the installation command** from the host detail page
+3. **Run on your Linux server**:
+
+```bash
+curl -sSL https://your-patchmon-server.com/api/v1/hosts/install | bash -s -- your-api-id your-api-key
+```
+
+### Manual Installation
+
+1. **Download the agent script**:
+```bash
+wget https://your-patchmon-server.com/api/v1/hosts/agent/download
+chmod +x patchmon-agent.sh
+sudo mv patchmon-agent.sh /usr/local/bin/
+```
+
+2. **Configure with API credentials**:
+```bash
+sudo /usr/local/bin/patchmon-agent.sh configure your-api-id your-api-key
+```
+
+3. **Test the connection**:
+```bash
+sudo /usr/local/bin/patchmon-agent.sh test
+```
+
+4. **Start monitoring**:
+```bash
+sudo /usr/local/bin/patchmon-agent.sh update
+```
+
+## Configuration
+
+### Backend Configuration
+
+Key environment variables:
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `DATABASE_URL` | Required | PostgreSQL connection string |
+| `JWT_SECRET` | Required | Secret for JWT token signing |
+| `CORS_ORIGINS` | `http://localhost:3000` | Comma-separated allowed origins |
+| `RATE_LIMIT_MAX` | `100` | Max requests per window |
+| `RATE_LIMIT_WINDOW_MS` | `900000` | Rate limit window (15 min) |
+| `ENABLE_LOGGING` | `false` | Enable file logging |
+| `TRUST_PROXY` | `1` | Trust reverse proxy headers |
+
+### Frontend Configuration
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `VITE_API_URL` | `/api/v1` | Backend API URL |
+| `VITE_ENABLE_LOGGING` | `false` | Enable dev server logging |
+
+### Agent Configuration
+
+The agent automatically configures itself with:
+- **Update interval**: Set in PatchMon settings (default: 60 minutes)
+- **Auto-update**: Can be enabled per-host or globally
+- **Repository tracking**: Automatically detects APT/YUM repositories
+
+## User Management
+
+### Roles and Permissions
+
+- **Admin**: Full system access
+- **Manager**: Host and package management
+- **Viewer**: Read-only access
+
+### Creating Users
+
+1. **Via Web Interface**: Admin → Users → Add User
+2. **Via API**: POST `/api/v1/auth/admin/users`
+
+## Host Management
+
+### Adding Hosts
+
+1. **Web Interface**: Hosts → Add Host
+2. **API**: POST `/api/v1/hosts/create`
+
+### Host Groups
+
+Organize hosts into groups for better management:
+- Create groups in Host Groups section
+- Assign hosts to groups
+- View group-specific statistics
+
+## Monitoring and Alerts
+
+### Dashboard
+
+- **Overview**: Total hosts, packages, updates needed
+- **Host Status**: Online/offline status
+- **Update Statistics**: Security updates, regular updates
+- **Recent Activity**: Latest host updates
+
+### Package Management
+
+- **Package List**: All packages across all hosts
+- **Update Status**: Which packages need updates
+- **Security Updates**: Critical security patches
+- **Host Dependencies**: Which hosts use specific packages
+
+## Security Features
+
+### Authentication
+
+- **JWT Tokens**: Secure session management
+- **API Credentials**: Per-host authentication
+- **Password Hashing**: bcrypt with salt rounds
+
+### Security Headers
+
+- **Helmet.js**: Security headers (CSP, HSTS, etc.)
+- **CORS**: Configurable origin restrictions
+- **Rate Limiting**: Per-route rate limits
+- **Input Validation**: express-validator on all endpoints
+
+### Agent Security
+
+- **HTTPS Only**: Agents use HTTPS for communication
+- **API Key Rotation**: Regenerate credentials when needed
+- **Secure Storage**: Credentials stored in protected files
+
+## Troubleshooting
+
+### Common Issues
+
+**Agent Connection Failed:**
+```bash
+# Check agent configuration
+sudo /usr/local/bin/patchmon-agent.sh test
+
+# Verify API credentials
+sudo /usr/local/bin/patchmon-agent.sh ping
+```
+
+**Database Connection Issues:**
+```bash
+# Test database connection
+cd backend
+npx prisma db push
+
+# Check migration status
+npx prisma migrate status
+```
+
+**Frontend Build Issues:**
+```bash
+# Clear node_modules and reinstall
+rm -rf node_modules package-lock.json
+npm install
+
+# Rebuild
+npm run build:frontend
+```
+
+### Logs
+
+**Backend Logs:**
+- Enable logging: `ENABLE_LOGGING=true`
+- Log files: `backend/logs/`
+
+**Agent Logs:**
+- Log file: `/var/log/patchmon-agent.log`
+- Debug mode: `sudo /usr/local/bin/patchmon-agent.sh diagnostics`
+
+## Development
+
+### Project Structure
+
+```
+patchmon/
+├── backend/                 # Express.js API server
+│   ├── src/
+│   │   ├── routes/         # API route handlers
+│   │   ├── middleware/     # Authentication, validation
+│   │   └── server.js       # Main server file
+│   ├── prisma/            # Database schema and migrations
+│   └── package.json
+├── frontend/               # React.js web application
+│   ├── src/
+│   │   ├── components/     # Reusable UI components
+│   │   ├── pages/          # Page components
+│   │   ├── contexts/       # React contexts
+│   │   └── utils/          # Utility functions
+│   └── package.json
+├── agents/                 # Agent scripts
+│   └── patchmon-agent.sh   # Main agent script
+└── README.md
+```
+
+### API Documentation
+
+**Authentication:**
+- `POST /api/v1/auth/login` - User login
+- `POST /api/v1/auth/logout` - User logout
+- `GET /api/v1/auth/me` - Get current user
+
+**Hosts:**
+- `GET /api/v1/hosts` - List hosts
+- `POST /api/v1/hosts/create` - Create host
+- `POST /api/v1/hosts/update` - Agent update (API credentials)
+- `DELETE /api/v1/hosts/:id` - Delete host
+
+**Packages:**
+- `GET /api/v1/packages` - List packages
+- `GET /api/v1/packages/:id` - Get package details
+- `GET /api/v1/packages/search/:query` - Search packages
+
+## Production Deployment
+
+### Reverse Proxy (Nginx)
+
+```nginx
+server {
+    listen 443 ssl http2;
+    server_name your-patchmon.example.com;
+    
+    ssl_certificate /path/to/cert.pem;
+    ssl_certificate_key /path/to/key.pem;
+    
+    # Frontend
+    location / {
+        root /path/to/patchmon/frontend/dist;
+        try_files $uri $uri/ /index.html;
+    }
+    
+    # Backend API
+    location /api/ {
+        proxy_pass http://localhost:3001;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+}
+```
+
+### Systemd Service
+
+Create `/etc/systemd/system/patchmon.service`:
+
+```ini
+[Unit]
+Description=PatchMon Backend
+After=network.target
+
+[Service]
+Type=simple
+User=patchmon
+WorkingDirectory=/path/to/patchmon/backend
+ExecStart=/usr/bin/node src/server.js
+Restart=always
+Environment=NODE_ENV=production
+
+[Install]
+WantedBy=multi-user.target
+```
+
+Enable and start:
+```bash
+sudo systemctl enable patchmon
+sudo systemctl start patchmon
+```
+
+## License
+
+[Add your license information here]
+
+## Support
+
+For issues and questions:
+- Create an issue in the repository
+- Check the troubleshooting section
+- Review agent logs for connection issues
+
+## Contributing
+
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Add tests if applicable
+5. Submit a pull request
+
+---
+
+**Note**: Remember to change default passwords and secrets before deploying to production!
diff --git a/agents/patchmon-agent.sh b/agents/patchmon-agent.sh
new file mode 100755
index 0000000..7ab2df2
--- /dev/null
+++ b/agents/patchmon-agent.sh
@@ -0,0 +1,1097 @@
+#!/bin/bash
+
+# PatchMon Agent Script
+# This script sends package update information to the PatchMon server using API credentials
+
+# Configuration
+PATCHMON_SERVER="http://localhost:3001"
+API_VERSION="v1"
+AGENT_VERSION="1.2.2"
+CONFIG_FILE="/etc/patchmon/agent.conf"
+CREDENTIALS_FILE="/etc/patchmon/credentials"
+LOG_FILE="/var/log/patchmon-agent.log"
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+# Logging function
+log() {
+    echo "[$(date '+%Y-%m-%d %H:%M:%S')] $1" | tee -a "$LOG_FILE"
+}
+
+# Error handling
+error() {
+    echo -e "${RED}ERROR: $1${NC}" >&2
+    log "ERROR: $1"
+    exit 1
+}
+
+# Info logging
+info() {
+    echo -e "${BLUE}INFO: $1${NC}"
+    log "INFO: $1"
+}
+
+# Success logging
+success() {
+    echo -e "${GREEN}SUCCESS: $1${NC}"
+    log "SUCCESS: $1"
+}
+
+# Warning logging
+warning() {
+    echo -e "${YELLOW}WARNING: $1${NC}"
+    log "WARNING: $1"
+}
+
+# Check if running as root
+check_root() {
+    if [[ $EUID -ne 0 ]]; then
+        error "This script must be run as root"
+    fi
+}
+
+# Create necessary directories
+setup_directories() {
+    mkdir -p /etc/patchmon
+    mkdir -p /var/log
+    touch "$LOG_FILE"
+    chmod 600 "$LOG_FILE"
+}
+
+# Load configuration
+load_config() {
+    if [[ -f "$CONFIG_FILE" ]]; then
+        source "$CONFIG_FILE"
+    fi
+}
+
+# Load API credentials
+load_credentials() {
+    if [[ ! -f "$CREDENTIALS_FILE" ]]; then
+        error "Credentials file not found at $CREDENTIALS_FILE. Please configure API credentials first."
+    fi
+    
+    source "$CREDENTIALS_FILE"
+    
+    if [[ -z "$API_ID" ]] || [[ -z "$API_KEY" ]]; then
+        error "API_ID and API_KEY must be configured in $CREDENTIALS_FILE"
+    fi
+    
+    # Use PATCHMON_URL from credentials if available, otherwise use default
+    if [[ -n "$PATCHMON_URL" ]]; then
+        PATCHMON_SERVER="$PATCHMON_URL"
+    fi
+}
+
+# Configure API credentials
+configure_credentials() {
+    info "Setting up API credentials..."
+    
+    if [[ -z "$1" ]] || [[ -z "$2" ]]; then
+        echo "Usage: $0 configure <API_ID> <API_KEY> [SERVER_URL]"
+        echo ""
+        echo "Example:"
+        echo "  $0 configure patchmon_1a2b3c4d abcd1234567890abcdef1234567890abcdef1234567890abcdef1234567890"
+        echo "  $0 configure patchmon_1a2b3c4d abcd1234567890abcdef1234567890abcdef1234567890abcdef1234567890 http://patchmon.example.com"
+        echo ""
+        echo "Contact your PatchMon administrator to get your API credentials."
+        exit 1
+    fi
+    
+    local api_id="$1"
+    local api_key="$2"
+    local server_url="${3:-$PATCHMON_SERVER}"
+    
+    # Validate API ID format
+    if [[ ! "$api_id" =~ ^patchmon_[a-f0-9]{16}$ ]]; then
+        error "Invalid API ID format. API ID should be in format: patchmon_xxxxxxxxxxxxxxxx"
+    fi
+    
+    # Validate API Key format (64 hex characters)
+    if [[ ! "$api_key" =~ ^[a-f0-9]{64}$ ]]; then
+        error "Invalid API Key format. API Key should be 64 hexadecimal characters."
+    fi
+    
+    # Validate server URL format
+    if [[ ! "$server_url" =~ ^https?:// ]]; then
+        error "Invalid server URL format. Must start with http:// or https://"
+    fi
+    
+    # Create credentials file
+    cat > "$CREDENTIALS_FILE" << EOF
+# PatchMon API Credentials
+# Generated on $(date)
+PATCHMON_URL="$server_url"
+API_ID="$api_id"
+API_KEY="$api_key"
+EOF
+    
+    chmod 600 "$CREDENTIALS_FILE"
+    success "API credentials configured successfully"
+    info "Credentials saved to: $CREDENTIALS_FILE"
+    
+    # Test credentials
+    info "Testing API credentials..."
+    test_credentials
+}
+
+# Test API credentials
+test_credentials() {
+    load_credentials
+    
+    local response=$(curl -s -X POST \
+        -H "Content-Type: application/json" \
+        -H "X-API-ID: $API_ID" \
+        -H "X-API-KEY: $API_KEY" \
+        "$PATCHMON_SERVER/api/$API_VERSION/hosts/ping")
+    
+    if [[ $? -eq 0 ]] && echo "$response" | grep -q "success"; then
+        success "API credentials are valid"
+        local hostname=$(echo "$response" | grep -o '"hostname":"[^"]*' | cut -d'"' -f4)
+        if [[ -n "$hostname" ]]; then
+            info "Connected as host: $hostname"
+        fi
+    else
+        error "API credentials test failed: $response"
+    fi
+}
+
+# Detect OS and version
+detect_os() {
+    if [[ -f /etc/os-release ]]; then
+        source /etc/os-release
+        OS_TYPE=$(echo "$ID" | tr '[:upper:]' '[:lower:]')
+        OS_VERSION="$VERSION_ID"
+        
+        # Map OS variations to their appropriate categories
+        case "$OS_TYPE" in
+            "pop"|"linuxmint"|"elementary")
+                OS_TYPE="ubuntu"
+                ;;
+            "opensuse"|"opensuse-leap"|"opensuse-tumbleweed")
+                OS_TYPE="suse"
+                ;;
+            "rocky"|"almalinux")
+                OS_TYPE="rhel"
+                ;;
+        esac
+        
+    elif [[ -f /etc/redhat-release ]]; then
+        if grep -q "CentOS" /etc/redhat-release; then
+            OS_TYPE="centos"
+        elif grep -q "Red Hat" /etc/redhat-release; then
+            OS_TYPE="rhel"
+        fi
+        OS_VERSION=$(grep -oE '[0-9]+\.[0-9]+' /etc/redhat-release | head -1)
+    else
+        error "Unable to detect OS version"
+    fi
+    
+    ARCHITECTURE=$(uname -m)
+    HOSTNAME=$(hostname)
+    IP_ADDRESS=$(hostname -I | awk '{print $1}')
+}
+
+# Get repository information based on OS
+get_repository_info() {
+    local repos_json="["
+    local first=true
+    
+    case "$OS_TYPE" in
+        "ubuntu"|"debian")
+            get_apt_repositories repos_json first
+            ;;
+        "centos"|"rhel"|"fedora")
+            get_yum_repositories repos_json first
+            ;;
+        *)
+            # Return empty array for unsupported OS
+            ;;
+    esac
+    
+    repos_json+="]"
+    echo "$repos_json"
+}
+
+# Get repository info for APT-based systems
+get_apt_repositories() {
+    local -n repos_ref=$1
+    local -n first_ref=$2
+    
+    # Parse traditional .list files
+    local sources_files="/etc/apt/sources.list"
+    if [[ -d "/etc/apt/sources.list.d" ]]; then
+        sources_files="$sources_files $(find /etc/apt/sources.list.d -name '*.list' 2>/dev/null)"
+    fi
+    
+    for file in $sources_files; do
+        if [[ -f "$file" ]]; then
+            while IFS= read -r line; do
+                # Skip comments and empty lines
+                if [[ "$line" =~ ^[[:space:]]*# ]] || [[ -z "$line" ]]; then
+                    continue
+                fi
+                
+                # Parse repository line (deb or deb-src)
+                if [[ "$line" =~ ^[[:space:]]*(deb|deb-src)[[:space:]]+ ]]; then
+                    # Clean the line and extract components
+                    local clean_line=$(echo "$line" | xargs)
+                    local repo_type=$(echo "$clean_line" | awk '{print $1}')
+                    
+                    # Handle modern APT format with options like [signed-by=...]
+                    local url=""
+                    local distribution=""
+                    local components=""
+                    
+                    if [[ "$clean_line" =~ \[.*\] ]]; then
+                        # Modern format: deb [options] URL distribution components
+                        # Extract URL (first field after the options)
+                        url=$(echo "$clean_line" | sed 's/deb[^[:space:]]* \[[^]]*\] //' | awk '{print $1}')
+                        distribution=$(echo "$clean_line" | sed 's/deb[^[:space:]]* \[[^]]*\] //' | awk '{print $2}')
+                        components=$(echo "$clean_line" | sed 's/deb[^[:space:]]* \[[^]]*\] [^[:space:]]* [^[:space:]]* //')
+                    else
+                        # Traditional format: deb URL distribution components
+                        url=$(echo "$clean_line" | awk '{print $2}')
+                        distribution=$(echo "$clean_line" | awk '{print $3}')
+                        components=$(echo "$clean_line" | cut -d' ' -f4- | xargs)
+                    fi
+                    
+                    # Skip if URL doesn't look like a valid URL
+                    if [[ ! "$url" =~ ^https?:// ]] && [[ ! "$url" =~ ^ftp:// ]]; then
+                        continue
+                    fi
+                    
+                    # Skip if distribution is empty or looks malformed
+                    if [[ -z "$distribution" ]] || [[ "$distribution" =~ \[.*\] ]]; then
+                        continue
+                    fi
+                    
+                    # Determine if repository uses HTTPS
+                    local is_secure=false
+                    if [[ "$url" =~ ^https:// ]]; then
+                        is_secure=true
+                    fi
+                    
+                    # Generate repository name from URL and distribution
+                    local repo_name="$distribution"
+                    
+                    # Extract meaningful name from URL for better identification
+                    if [[ "$url" =~ archive\.ubuntu\.com ]]; then
+                        repo_name="ubuntu-$distribution"
+                    elif [[ "$url" =~ security\.ubuntu\.com ]]; then
+                        repo_name="ubuntu-$distribution-security"
+                    elif [[ "$url" =~ deb\.nodesource\.com ]]; then
+                        repo_name="nodesource-$distribution"
+                    elif [[ "$url" =~ packagecloud\.io ]]; then
+                        repo_name="packagecloud-$(echo "$url" | cut -d'/' -f4-5 | tr '/' '-')"
+                    elif [[ "$url" =~ ppa\.launchpad ]]; then
+                        repo_name="ppa-$(echo "$url" | cut -d'/' -f4-5 | tr '/' '-')"
+                    elif [[ "$url" =~ packages\.microsoft\.com ]]; then
+                        repo_name="microsoft-$(echo "$url" | cut -d'/' -f4-)"
+                    elif [[ "$url" =~ download\.docker\.com ]]; then
+                        repo_name="docker-$distribution"
+                    else
+                        # Fallback: use domain name + distribution
+                        local domain=$(echo "$url" | cut -d'/' -f3 | cut -d':' -f1)
+                        repo_name="$domain-$distribution"
+                    fi
+                    
+                    # Add component suffix if relevant
+                    if [[ "$components" =~ updates ]]; then
+                        repo_name="$repo_name-updates"
+                    elif [[ "$components" =~ security ]]; then
+                        repo_name="$repo_name-security"
+                    elif [[ "$components" =~ backports ]]; then
+                        repo_name="$repo_name-backports"
+                    fi
+                    
+                    if [[ "$first_ref" == true ]]; then
+                        first_ref=false
+                    else
+                        repos_ref+=","
+                    fi
+                    
+                    repos_ref+="{\"name\":\"$repo_name\",\"url\":\"$url\",\"distribution\":\"$distribution\",\"components\":\"$components\",\"repoType\":\"$repo_type\",\"isEnabled\":true,\"isSecure\":$is_secure}"
+                fi
+            done < "$file"
+        fi
+    done
+    
+    # Parse modern DEB822 format (.sources files)
+    if [[ -d "/etc/apt/sources.list.d" ]]; then
+        local sources_files_deb822=$(find /etc/apt/sources.list.d -name '*.sources' 2>/dev/null)
+        for file in $sources_files_deb822; do
+            if [[ -f "$file" ]]; then
+                local deb822_result=$(parse_deb822_sources_simple "$file")
+                if [[ -n "$deb822_result" ]]; then
+                    if [[ "$first_ref" == true ]]; then
+                        first_ref=false
+                        repos_ref+="$deb822_result"
+                    else
+                        repos_ref+=",$deb822_result"
+                    fi
+                fi
+            fi
+        done
+    fi
+}
+
+# Simple DEB822 parser that returns JSON string
+parse_deb822_sources_simple() {
+    local file=$1
+    local result=""
+    local enabled=""
+    local types=""
+    local uris=""
+    local suites=""
+    local components=""
+    local name=""
+    local first_entry=true
+    
+    while IFS= read -r line; do
+        # Skip empty lines and comments
+        if [[ -z "$line" ]] || [[ "$line" =~ ^[[:space:]]*# ]]; then
+            continue
+        fi
+        
+        # Parse key-value pairs
+        if [[ "$line" =~ ^([^:]+):[[:space:]]*(.*)$ ]]; then
+            local key="${BASH_REMATCH[1]}"
+            local value="${BASH_REMATCH[2]}"
+            
+            case "$key" in
+                "Enabled")
+                    enabled="$value"
+                    ;;
+                "Types")
+                    types="$value"
+                    ;;
+                "URIs")
+                    uris="$value"
+                    ;;
+                "Suites")
+                    suites="$value"
+                    ;;
+                "Components")
+                    components="$value"
+                    ;;
+                "X-Repolib-Name")
+                    name="$value"
+                    ;;
+            esac
+        fi
+        
+        # Process repository entry when we hit a blank line
+        if [[ -z "$line" ]] || [[ "$line" =~ ^[[:space:]]*$ ]]; then
+            if [[ -n "$uris" && -n "$suites" && "$enabled" == "yes" ]]; then
+                local entry_result=$(process_deb822_entry_simple "$name" "$types" "$uris" "$suites" "$components")
+                if [[ -n "$entry_result" ]]; then
+                    if [[ "$first_entry" == true ]]; then
+                        first_entry=false
+                        result="$entry_result"
+                    else
+                        result="$result,$entry_result"
+                    fi
+                fi
+            fi
+            # Reset variables for next entry
+            enabled=""
+            types=""
+            uris=""
+            suites=""
+            components=""
+            name=""
+        fi
+    done < "$file"
+    
+    # Process the last entry if file doesn't end with blank line
+    if [[ -n "$uris" && -n "$suites" && "$enabled" == "yes" ]]; then
+        local entry_result=$(process_deb822_entry_simple "$name" "$types" "$uris" "$suites" "$components")
+        if [[ -n "$entry_result" ]]; then
+            if [[ "$first_entry" == true ]]; then
+                result="$entry_result"
+            else
+                result="$result,$entry_result"
+            fi
+        fi
+    fi
+    
+    echo "$result"
+}
+
+# Process a DEB822 repository entry and return JSON
+process_deb822_entry_simple() {
+    local name=$1
+    local types=$2
+    local uris=$3
+    local suites=$4
+    local components=$5
+    local result=""
+    local first_entry=true
+    
+    # Handle multiple URIs
+    for uri in $uris; do
+        # Skip if URI doesn't look like a valid URL
+        if [[ ! "$uri" =~ ^https?:// ]] && [[ ! "$uri" =~ ^ftp:// ]]; then
+            continue
+        fi
+        
+        # Handle multiple suites
+        for suite in $suites; do
+            # Skip if suite looks malformed
+            if [[ -z "$suite" ]]; then
+                continue
+            fi
+            
+            # Determine if repository uses HTTPS
+            local is_secure=false
+            if [[ "$uri" =~ ^https:// ]]; then
+                is_secure=true
+            fi
+            
+            # Generate repository name
+            local repo_name=""
+            if [[ -n "$name" ]]; then
+                repo_name=$(echo "$name" | tr ' ' '-' | tr '[:upper:]' '[:lower:]')
+            else
+                repo_name="$suite"
+            fi
+            
+            # Extract meaningful name from URI for better identification
+            if [[ "$uri" =~ apt\.pop-os\.org/ubuntu ]]; then
+                repo_name="pop-os-ubuntu-$suite"
+            elif [[ "$uri" =~ apt\.pop-os\.org/release ]]; then
+                repo_name="pop-os-release-$suite"
+            elif [[ "$uri" =~ apt\.pop-os\.org/proprietary ]]; then
+                repo_name="pop-os-apps-$suite"
+            elif [[ "$uri" =~ archive\.ubuntu\.com ]]; then
+                repo_name="ubuntu-$suite"
+            elif [[ "$uri" =~ security\.ubuntu\.com ]]; then
+                repo_name="ubuntu-$suite-security"
+            else
+                # Fallback: use domain name + suite
+                local domain=$(echo "$uri" | cut -d'/' -f3 | cut -d':' -f1)
+                repo_name="$domain-$suite"
+            fi
+            
+            # Add component suffix if relevant and not already included
+            if [[ "$suite" != *"security"* && "$components" =~ security ]]; then
+                repo_name="$repo_name-security"
+            elif [[ "$suite" != *"updates"* && "$components" =~ updates ]]; then
+                repo_name="$repo_name-updates"
+            elif [[ "$suite" != *"backports"* && "$components" =~ backports ]]; then
+                repo_name="$repo_name-backports"
+            fi
+            
+            # Determine repo type (prefer deb over deb-src)
+            local repo_type="deb"
+            if [[ "$types" =~ deb-src ]] && [[ ! "$types" =~ ^deb[[:space:]] ]]; then
+                repo_type="deb-src"
+            fi
+            
+            local json_entry="{\"name\":\"$repo_name\",\"url\":\"$uri\",\"distribution\":\"$suite\",\"components\":\"$components\",\"repoType\":\"$repo_type\",\"isEnabled\":true,\"isSecure\":$is_secure}"
+            
+            if [[ "$first_entry" == true ]]; then
+                first_entry=false
+                result="$json_entry"
+            else
+                result="$result,$json_entry"
+            fi
+        done
+    done
+    
+    echo "$result"
+}
+
+# Get repository info for YUM-based systems
+get_yum_repositories() {
+    local -n repos_ref=$1
+    local -n first_ref=$2
+    
+    # Parse yum/dnf repository configuration
+    if command -v dnf >/dev/null 2>&1; then
+        local repo_info=$(dnf repolist all --verbose 2>/dev/null | grep -E "^Repo-id|^Repo-baseurl|^Repo-name|^Repo-status")
+    elif command -v yum >/dev/null 2>&1; then
+        local repo_info=$(yum repolist all -v 2>/dev/null | grep -E "^Repo-id|^Repo-baseurl|^Repo-name|^Repo-status")
+    fi
+    
+    # This is a simplified implementation - would need more work for full YUM support
+    # For now, return empty for non-APT systems
+}
+
+# Get package information based on OS
+get_package_info() {
+    local packages_json="["
+    local first=true
+    
+    case "$OS_TYPE" in
+        "ubuntu"|"debian")
+            get_apt_packages packages_json first
+            ;;
+        "centos"|"rhel"|"fedora")
+            get_yum_packages packages_json first
+            ;;
+        *)
+            error "Unsupported OS type: $OS_TYPE"
+            ;;
+    esac
+    
+    packages_json+="]"
+    echo "$packages_json"
+}
+
+# Get package info for APT-based systems
+get_apt_packages() {
+    local -n packages_ref=$1
+    local -n first_ref=$2
+    
+    # Update package lists
+    apt-get update -qq
+    
+    # Get upgradable packages
+    local upgradable=$(apt list --upgradable 2>/dev/null | grep -v "WARNING")
+    
+    while IFS= read -r line; do
+        if [[ "$line" =~ ^([^/]+)/([^[:space:]]+)[[:space:]]+([^[:space:]]+)[[:space:]]+.*[[:space:]]([^[:space:]]+)[[:space:]]*(\[.*\])? ]]; then
+            local package_name="${BASH_REMATCH[1]}"
+            local current_version="${BASH_REMATCH[4]}"
+            local available_version="${BASH_REMATCH[3]}"
+            local is_security_update=false
+            
+            # Check if it's a security update
+            if echo "$line" | grep -q "security"; then
+                is_security_update=true
+            fi
+            
+            if [[ "$first_ref" == true ]]; then
+                first_ref=false
+            else
+                packages_ref+=","
+            fi
+            
+            packages_ref+="{\"name\":\"$package_name\",\"currentVersion\":\"$current_version\",\"availableVersion\":\"$available_version\",\"needsUpdate\":true,\"isSecurityUpdate\":$is_security_update}"
+        fi
+    done <<< "$upgradable"
+    
+    # Get installed packages that are up to date
+    local installed=$(dpkg-query -W -f='${Package} ${Version}\n' | head -100)
+    
+    while IFS=' ' read -r package_name version; do
+        if [[ -n "$package_name" && -n "$version" ]]; then
+            # Check if this package is not in the upgrade list
+            if ! echo "$upgradable" | grep -q "^$package_name/"; then
+                if [[ "$first_ref" == true ]]; then
+                    first_ref=false
+                else
+                    packages_ref+=","
+                fi
+                
+                packages_ref+="{\"name\":\"$package_name\",\"currentVersion\":\"$version\",\"needsUpdate\":false,\"isSecurityUpdate\":false}"
+            fi
+        fi
+    done <<< "$installed"
+}
+
+# Get package info for YUM/DNF-based systems
+get_yum_packages() {
+    local -n packages_ref=$1
+    local -n first_ref=$2
+    
+    local package_manager="yum"
+    if command -v dnf &> /dev/null; then
+        package_manager="dnf"
+    fi
+    
+    # Get upgradable packages
+    local upgradable=$($package_manager check-update 2>/dev/null | grep -v "^$" | grep -v "^Loaded" | grep -v "^Last metadata" | tail -n +2)
+    
+    while IFS= read -r line; do
+        if [[ "$line" =~ ^([^[:space:]]+)[[:space:]]+([^[:space:]]+)[[:space:]]+([^[:space:]]+) ]]; then
+            local package_name="${BASH_REMATCH[1]}"
+            local available_version="${BASH_REMATCH[2]}"
+            local repo="${BASH_REMATCH[3]}"
+            
+            # Get current version
+            local current_version=$($package_manager list installed "$package_name" 2>/dev/null | grep "^$package_name" | awk '{print $2}')
+            
+            local is_security_update=false
+            if echo "$repo" | grep -q "security"; then
+                is_security_update=true
+            fi
+            
+            if [[ "$first_ref" == true ]]; then
+                first_ref=false
+            else
+                packages_ref+=","
+            fi
+            
+            packages_ref+="{\"name\":\"$package_name\",\"currentVersion\":\"$current_version\",\"availableVersion\":\"$available_version\",\"needsUpdate\":true,\"isSecurityUpdate\":$is_security_update}"
+        fi
+    done <<< "$upgradable"
+    
+    # Get some installed packages that are up to date
+    local installed=$($package_manager list installed 2>/dev/null | grep -v "^Loaded" | grep -v "^Installed" | head -100)
+    
+    while IFS= read -r line; do
+        if [[ "$line" =~ ^([^[:space:]]+)[[:space:]]+([^[:space:]]+) ]]; then
+            local package_name="${BASH_REMATCH[1]}"
+            local version="${BASH_REMATCH[2]}"
+            
+            # Check if this package is not in the upgrade list
+            if ! echo "$upgradable" | grep -q "^$package_name "; then
+                if [[ "$first_ref" == true ]]; then
+                    first_ref=false
+                else
+                    packages_ref+=","
+                fi
+                
+                packages_ref+="{\"name\":\"$package_name\",\"currentVersion\":\"$version\",\"needsUpdate\":false,\"isSecurityUpdate\":false}"
+            fi
+        fi
+    done <<< "$installed"
+}
+
+# Send package update to server
+send_update() {
+    load_credentials
+    
+    info "Collecting package information..."
+    local packages_json=$(get_package_info)
+    
+    info "Collecting repository information..."
+    local repositories_json=$(get_repository_info)
+    
+    info "Sending update to PatchMon server..."
+    
+    local payload=$(cat <<EOF
+{
+    "packages": $packages_json,
+    "repositories": $repositories_json,
+    "osType": "$OS_TYPE",
+    "osVersion": "$OS_VERSION",
+    "ip": "$IP_ADDRESS",
+    "architecture": "$ARCHITECTURE",
+    "agentVersion": "$AGENT_VERSION"
+}
+EOF
+)
+    
+    local response=$(curl -s -X POST \
+        -H "Content-Type: application/json" \
+        -H "X-API-ID: $API_ID" \
+        -H "X-API-KEY: $API_KEY" \
+        -d "$payload" \
+        "$PATCHMON_SERVER/api/$API_VERSION/hosts/update")
+    
+    if [[ $? -eq 0 ]]; then
+        if echo "$response" | grep -q "success"; then
+            success "Update sent successfully"
+            echo "$response" | grep -o '"packagesProcessed":[0-9]*' | cut -d':' -f2 | xargs -I {} info "Processed {} packages"
+            
+            # Check for auto-update instructions (look specifically in autoUpdate section)
+            if echo "$response" | grep -q '"autoUpdate":{'; then
+                local auto_update_section=$(echo "$response" | grep -o '"autoUpdate":{[^}]*}')
+                local should_update=$(echo "$auto_update_section" | grep -o '"shouldUpdate":true' | cut -d':' -f2)
+                if [[ "$should_update" == "true" ]]; then
+                    local latest_version=$(echo "$auto_update_section" | grep -o '"latestVersion":"[^"]*' | cut -d'"' -f4)
+                    local current_version=$(echo "$auto_update_section" | grep -o '"currentVersion":"[^"]*' | cut -d'"' -f4)
+                    local update_message=$(echo "$auto_update_section" | grep -o '"message":"[^"]*' | cut -d'"' -f4)
+                    
+                    info "Auto-update detected: $update_message"
+                    info "Current version: $current_version, Latest version: $latest_version"
+                    
+                    # Automatically run update-agent command
+                    info "Automatically updating agent to latest version..."
+                    if "$0" update-agent; then
+                        success "Agent auto-update completed successfully"
+                    else
+                        warning "Agent auto-update failed, but data was sent successfully"
+                    fi
+                fi
+            fi
+            
+            # Check for crontab update instructions (look specifically in crontabUpdate section)
+            if echo "$response" | grep -q '"crontabUpdate":{'; then
+                local crontab_update_section=$(echo "$response" | grep -o '"crontabUpdate":{[^}]*}')
+                local should_update_crontab=$(echo "$crontab_update_section" | grep -o '"shouldUpdate":true' | cut -d':' -f2)
+                if [[ "$should_update_crontab" == "true" ]]; then
+                    local crontab_message=$(echo "$crontab_update_section" | grep -o '"message":"[^"]*' | cut -d'"' -f4)
+                    local crontab_command=$(echo "$crontab_update_section" | grep -o '"command":"[^"]*' | cut -d'"' -f4)
+                    
+                    if [[ -n "$crontab_message" ]]; then
+                        info "Crontab update detected: $crontab_message"
+                    fi
+                    
+                    if [[ "$crontab_command" == "update-crontab" ]]; then
+                        info "Automatically updating crontab with new interval..."
+                        if "$0" update-crontab; then
+                            success "Crontab updated successfully"
+                        else
+                            warning "Crontab update failed, but data was sent successfully"
+                        fi
+                    fi
+                fi
+            fi
+        else
+            error "Update failed: $response"
+        fi
+    else
+        error "Failed to send update"
+    fi
+}
+
+# Ping server to check connectivity
+ping_server() {
+    load_credentials
+    
+    local response=$(curl -s -X POST \
+        -H "Content-Type: application/json" \
+        -H "X-API-ID: $API_ID" \
+        -H "X-API-KEY: $API_KEY" \
+        "$PATCHMON_SERVER/api/$API_VERSION/hosts/ping")
+    
+    if [[ $? -eq 0 ]] && echo "$response" | grep -q "success"; then
+        success "Ping successful"
+        local hostname=$(echo "$response" | grep -o '"hostname":"[^"]*' | cut -d'"' -f4)
+        if [[ -n "$hostname" ]]; then
+            info "Connected as host: $hostname"
+        fi
+        
+        # Check for crontab update trigger
+        local should_update_crontab=$(echo "$response" | grep -o '"shouldUpdate":true' | cut -d':' -f2)
+        if [[ "$should_update_crontab" == "true" ]]; then
+            local message=$(echo "$response" | grep -o '"message":"[^"]*' | cut -d'"' -f4)
+            local command=$(echo "$response" | grep -o '"command":"[^"]*' | cut -d'"' -f4)
+            
+            if [[ -n "$message" ]]; then
+                info "$message"
+            fi
+            
+            if [[ "$command" == "update-crontab" ]]; then
+                info "Automatically updating crontab with new interval..."
+                if "$0" update-crontab; then
+                    success "Crontab updated successfully"
+                else
+                    warning "Crontab update failed, but ping was successful"
+                fi
+            fi
+        fi
+    else
+        error "Ping failed: $response"
+    fi
+}
+
+# Check for agent updates
+check_version() {
+    load_credentials
+    
+    info "Checking for agent updates..."
+    
+    local response=$(curl -s -X GET "$PATCHMON_SERVER/api/$API_VERSION/hosts/agent/version")
+    
+    if [[ $? -eq 0 ]]; then
+        local current_version=$(echo "$response" | grep -o '"currentVersion":"[^"]*' | cut -d'"' -f4)
+        local download_url=$(echo "$response" | grep -o '"downloadUrl":"[^"]*' | cut -d'"' -f4)
+        local release_notes=$(echo "$response" | grep -o '"releaseNotes":"[^"]*' | cut -d'"' -f4)
+        
+        if [[ -n "$current_version" ]]; then
+            if [[ "$current_version" != "$AGENT_VERSION" ]]; then
+                warning "Agent update available!"
+                echo "  Current version: $AGENT_VERSION"
+                echo "  Latest version: $current_version"
+                if [[ -n "$release_notes" ]]; then
+                    echo "  Release notes: $release_notes"
+                fi
+                echo "  Download URL: $download_url"
+                echo ""
+                echo "To update, run: $0 update-agent"
+            else
+                success "Agent is up to date (version $AGENT_VERSION)"
+            fi
+        else
+            warning "Could not determine current version from server"
+        fi
+    else
+        error "Failed to check for updates"
+    fi
+}
+
+# Update agent script
+update_agent() {
+    load_credentials
+    
+    info "Updating agent script..."
+    
+    local response=$(curl -s -X GET "$PATCHMON_SERVER/api/$API_VERSION/hosts/agent/version")
+    
+    if [[ $? -eq 0 ]]; then
+        local download_url=$(echo "$response" | grep -o '"downloadUrl":"[^"]*' | cut -d'"' -f4)
+        
+        if [[ -z "$download_url" ]]; then
+            download_url="$PATCHMON_SERVER/api/$API_VERSION/hosts/agent/download"
+        elif [[ "$download_url" =~ ^/ ]]; then
+            # If download_url is relative, prepend the server URL
+            download_url="$PATCHMON_SERVER$download_url"
+        fi
+        
+        info "Downloading latest agent from: $download_url"
+        
+        # Create backup of current script
+        cp "$0" "$0.backup.$(date +%Y%m%d_%H%M%S)"
+        
+        # Download new version
+        if curl -s -o "/tmp/patchmon-agent-new.sh" "$download_url"; then
+            # Verify the downloaded script is valid
+            if bash -n "/tmp/patchmon-agent-new.sh" 2>/dev/null; then
+                # Replace current script
+                mv "/tmp/patchmon-agent-new.sh" "$0"
+                chmod +x "$0"
+                success "Agent updated successfully"
+                info "Backup saved as: $0.backup.$(date +%Y%m%d_%H%M%S)"
+                
+                # Get the new version number
+                local new_version=$(grep '^AGENT_VERSION=' "$0" | cut -d'"' -f2)
+                info "Updated to version: $new_version"
+                
+                # Automatically run update to send new information to PatchMon
+                info "Sending updated information to PatchMon..."
+                if "$0" update; then
+                    success "Successfully sent updated information to PatchMon"
+                else
+                    warning "Failed to send updated information to PatchMon (this is not critical)"
+                fi
+            else
+                error "Downloaded script is invalid"
+                rm -f "/tmp/patchmon-agent-new.sh"
+            fi
+        else
+            error "Failed to download new agent script"
+        fi
+    else
+        error "Failed to get update information"
+    fi
+}
+
+# Update crontab with current policy
+update_crontab() {
+    load_credentials
+    info "Updating crontab with current policy..."
+    local response=$(curl -s -X GET "$PATCHMON_SERVER/api/$API_VERSION/settings/update-interval")
+    if [[ $? -eq 0 ]]; then
+        local update_interval=$(echo "$response" | grep -o '"updateInterval":[0-9]*' | cut -d':' -f2)
+        if [[ -n "$update_interval" ]]; then
+            # Generate the expected crontab entry
+            local expected_crontab=""
+            if [[ $update_interval -eq 60 ]]; then
+                # Hourly updates
+                expected_crontab="0 * * * * /usr/local/bin/patchmon-agent.sh update >/dev/null 2>&1"
+            else
+                # Custom interval updates
+                expected_crontab="*/$update_interval * * * * /usr/local/bin/patchmon-agent.sh update >/dev/null 2>&1"
+            fi
+            
+            # Get current crontab
+            local current_crontab=$(crontab -l 2>/dev/null | grep "patchmon-agent.sh update" | head -1)
+            
+            # Check if crontab needs updating
+            if [[ "$current_crontab" == "$expected_crontab" ]]; then
+                info "Crontab is already up to date (interval: $update_interval minutes)"
+                return 0
+            fi
+            
+            info "Setting update interval to $update_interval minutes"
+            echo "$expected_crontab" | crontab -
+            success "Crontab updated successfully"
+        else
+            error "Could not determine update interval from server"
+        fi
+    else
+        error "Failed to get update interval policy"
+    fi
+}
+
+# Show detailed system diagnostics
+show_diagnostics() {
+    info "PatchMon Agent Diagnostics v$AGENT_VERSION"
+    echo ""
+    
+    # System information
+    echo "=== System Information ==="
+    echo "OS: $(uname -s)"
+    echo "Architecture: $(uname -m)"
+    echo "Kernel: $(uname -r)"
+    echo "Hostname: $(hostname)"
+    echo "Uptime: $(uptime -p 2>/dev/null || uptime)"
+    echo ""
+    
+    # Agent information
+    echo "=== Agent Information ==="
+    echo "Version: $AGENT_VERSION"
+    echo "Script Path: $0"
+    echo "Config File: $CONFIG_FILE"
+    echo "Credentials File: $CREDENTIALS_FILE"
+    echo "Log File: $LOG_FILE"
+    echo "Script Size: $(stat -c%s "$0" 2>/dev/null || echo "Unknown") bytes"
+    echo "Last Modified: $(stat -c%y "$0" 2>/dev/null || echo "Unknown")"
+    echo ""
+    
+    # Configuration
+    if [[ -f "$CONFIG_FILE" ]]; then
+        echo "=== Configuration ==="
+        cat "$CONFIG_FILE"
+        echo ""
+    else
+        echo "=== Configuration ==="
+        echo "No configuration file found at $CONFIG_FILE"
+        echo ""
+    fi
+    
+    # Credentials status
+    echo "=== Credentials Status ==="
+    if [[ -f "$CREDENTIALS_FILE" ]]; then
+        echo "Credentials file exists: Yes"
+        echo "File size: $(stat -c%s "$CREDENTIALS_FILE" 2>/dev/null || echo "Unknown") bytes"
+        echo "File permissions: $(stat -c%a "$CREDENTIALS_FILE" 2>/dev/null || echo "Unknown")"
+    else
+        echo "Credentials file exists: No"
+    fi
+    echo ""
+    
+    # Crontab status
+    echo "=== Crontab Status ==="
+    local crontab_entries=$(crontab -l 2>/dev/null | grep patchmon-agent || echo "None")
+    if [[ "$crontab_entries" != "None" ]]; then
+        echo "Crontab entries:"
+        echo "$crontab_entries"
+    else
+        echo "No crontab entries found"
+    fi
+    echo ""
+    
+    # Network connectivity
+    echo "=== Network Connectivity ==="
+    if ping -c 1 -W 3 "$(echo "$PATCHMON_SERVER" | sed 's|http://||' | sed 's|https://||' | cut -d: -f1)" >/dev/null 2>&1; then
+        echo "Server reachable: Yes"
+    else
+        echo "Server reachable: No"
+    fi
+    echo "Server URL: $PATCHMON_SERVER"
+    echo ""
+    
+    # Recent logs
+    echo "=== Recent Logs (last 10 lines) ==="
+    if [[ -f "$LOG_FILE" ]]; then
+        tail -10 "$LOG_FILE" 2>/dev/null || echo "Could not read log file"
+    else
+        echo "Log file does not exist"
+    fi
+}
+
+# Show current configuration
+show_config() {
+    info "Current Configuration:"
+    echo "  Server: ${PATCHMON_SERVER}"
+    echo "  API Version: ${API_VERSION}"
+    echo "  Agent Version: ${AGENT_VERSION}"
+    echo "  Config File: ${CONFIG_FILE}"
+    echo "  Credentials File: ${CREDENTIALS_FILE}"
+    echo "  Log File: ${LOG_FILE}"
+    
+    if [[ -f "$CREDENTIALS_FILE" ]]; then
+        source "$CREDENTIALS_FILE"
+        echo "  API ID: ${API_ID}"
+        echo "  API Key: ${API_KEY:0:8}..." # Show only first 8 characters
+    else
+        echo "  API Credentials: Not configured"
+    fi
+}
+
+# Main function
+main() {
+    case "$1" in
+        "configure")
+            check_root
+            setup_directories
+            load_config
+            configure_credentials "$2" "$3"
+            ;;
+        "test")
+            check_root
+            setup_directories
+            load_config
+            test_credentials
+            ;;
+        "update")
+            check_root
+            setup_directories
+            load_config
+            detect_os
+            send_update
+            ;;
+        "ping")
+            check_root
+            setup_directories
+            load_config
+            ping_server
+            ;;
+        "config")
+            load_config
+            show_config
+            ;;
+        "check-version")
+            check_root
+            setup_directories
+            load_config
+            check_version
+            ;;
+        "update-agent")
+            check_root
+            setup_directories
+            load_config
+            update_agent
+            ;;
+        "update-crontab")
+            check_root
+            setup_directories
+            load_config
+            update_crontab
+            ;;
+        "diagnostics")
+            show_diagnostics
+            ;;
+        *)
+            echo "PatchMon Agent v$AGENT_VERSION - API Credential Based"
+            echo "Usage: $0 {configure|test|update|ping|config|check-version|update-agent|update-crontab|diagnostics}"
+            echo ""
+            echo "Commands:"
+            echo "  configure <API_ID> <API_KEY>  - Configure API credentials for this host"
+            echo "  test                          - Test API credentials connectivity"
+            echo "  update                        - Send package update information to server"
+            echo "  ping                          - Test connectivity to server"
+            echo "  config                        - Show current configuration"
+            echo "  check-version                 - Check for agent updates"
+            echo "  update-agent                  - Update agent to latest version"
+            echo "  update-crontab                - Update crontab with current policy"
+            echo "  diagnostics                   - Show detailed system diagnostics"
+            echo ""
+            echo "Setup Process:"
+            echo "  1. Contact your PatchMon administrator to create a host entry"
+            echo "  2. Run: $0 configure <API_ID> <API_KEY> (provided by admin)"
+            echo "  3. Run: $0 test (to verify connection)"
+            echo "  4. Run: $0 update (to send initial package data)"
+            echo ""
+            echo "Configuration:"
+            echo "  Edit $CONFIG_FILE to customize server settings"
+            echo "  PATCHMON_SERVER=http://your-server:3001"
+            exit 1
+            ;;
+    esac
+}
+
+# Run main function
+main "$@" 
\ No newline at end of file
diff --git a/agents/patchmon_install.sh b/agents/patchmon_install.sh
new file mode 100644
index 0000000..cb18375
--- /dev/null
+++ b/agents/patchmon_install.sh
@@ -0,0 +1,156 @@
+#!/bin/bash
+
+# PatchMon Agent Installation Script
+# Usage: curl -sSL {PATCHMON_URL}/api/v1/hosts/install | bash -s -- {PATCHMON_URL} {API_ID} {API_KEY}
+
+set -e
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+# Functions
+error() {
+    echo -e "${RED}❌ ERROR: $1${NC}" >&2
+    exit 1
+}
+
+info() {
+    echo -e "${BLUE}ℹ️  $1${NC}"
+}
+
+success() {
+    echo -e "${GREEN}✅ $1${NC}"
+}
+
+warning() {
+    echo -e "${YELLOW}⚠️  $1${NC}"
+}
+
+# Check if running as root
+if [[ $EUID -ne 0 ]]; then
+   error "This script must be run as root (use sudo)"
+fi
+
+# Default server URL (will be replaced by backend with configured URL)
+PATCHMON_URL="http://localhost:3001"
+
+# Parse arguments
+if [[ $# -ne 3 ]]; then
+    echo "Usage: curl -sSL {PATCHMON_URL}/api/v1/hosts/install | bash -s -- {PATCHMON_URL} {API_ID} {API_KEY}"
+    echo ""
+    echo "Example:"
+    echo "curl -sSL http://patchmon.example.com/api/v1/hosts/install | bash -s -- http://patchmon.example.com patchmon_1a2b3c4d abcd1234567890abcdef1234567890abcdef1234567890abcdef1234567890"
+    echo ""
+    echo "Contact your PatchMon administrator to get your API credentials."
+    exit 1
+fi
+
+PATCHMON_URL="$1"
+API_ID="$2"
+API_KEY="$3"
+
+# Validate inputs
+if [[ ! "$PATCHMON_URL" =~ ^https?:// ]]; then
+    error "Invalid URL format. Must start with http:// or https://"
+fi
+
+if [[ ! "$API_ID" =~ ^patchmon_[a-f0-9]{16}$ ]]; then
+    error "Invalid API ID format. API ID should be in format: patchmon_xxxxxxxxxxxxxxxx"
+fi
+
+if [[ ! "$API_KEY" =~ ^[a-f0-9]{64}$ ]]; then
+    error "Invalid API Key format. API Key should be 64 hexadecimal characters."
+fi
+
+info "🚀 Installing PatchMon Agent..."
+info "   Server: $PATCHMON_URL"
+info "   API ID: $API_ID"
+
+# Create patchmon directory
+info "📁 Creating configuration directory..."
+mkdir -p /etc/patchmon
+
+# Download the agent script
+info "📥 Downloading PatchMon agent script..."
+curl -sSL "$PATCHMON_URL/api/v1/hosts/agent/download" -o /usr/local/bin/patchmon-agent.sh
+chmod +x /usr/local/bin/patchmon-agent.sh
+
+# Get the agent version from the downloaded script
+AGENT_VERSION=$(grep '^AGENT_VERSION=' /usr/local/bin/patchmon-agent.sh | cut -d'"' -f2)
+info "📋 Agent version: $AGENT_VERSION"
+
+# Get expected agent version from server
+EXPECTED_VERSION=$(curl -s "$PATCHMON_URL/api/v1/hosts/agent/version" | grep -o '"currentVersion":"[^"]*' | cut -d'"' -f4 2>/dev/null || echo "Unknown")
+if [[ "$EXPECTED_VERSION" != "Unknown" ]]; then
+    info "📋 Expected version: $EXPECTED_VERSION"
+    if [[ "$AGENT_VERSION" != "$EXPECTED_VERSION" ]]; then
+        warning "⚠️  Agent version mismatch! Installed: $AGENT_VERSION, Expected: $EXPECTED_VERSION"
+    fi
+fi
+
+# Get update interval policy from server
+UPDATE_INTERVAL=$(curl -s "$PATCHMON_URL/api/v1/settings/update-interval" | grep -o '"updateInterval":[0-9]*' | cut -d':' -f2 2>/dev/null || echo "60")
+info "📋 Update interval: $UPDATE_INTERVAL minutes"
+
+# Create credentials file
+info "🔐 Setting up API credentials..."
+cat > /etc/patchmon/credentials << EOF
+# PatchMon API Credentials
+# Generated on $(date)
+PATCHMON_URL="$PATCHMON_URL"
+API_ID="$API_ID"
+API_KEY="$API_KEY"
+EOF
+
+chmod 600 /etc/patchmon/credentials
+
+# Test the configuration
+info "🧪 Testing configuration..."
+if /usr/local/bin/patchmon-agent.sh test; then
+    success "Configuration test passed!"
+else
+    error "Configuration test failed. Please check your credentials."
+fi
+
+# Send initial update
+info "📊 Sending initial package data..."
+if /usr/local/bin/patchmon-agent.sh update; then
+    success "Initial package data sent successfully!"
+else
+    warning "Initial package data failed, but agent is configured. You can run 'patchmon-agent.sh update' manually."
+fi
+
+# Setup crontab for automatic updates
+info "⏰ Setting up automatic updates every $UPDATE_INTERVAL minutes..."
+if [[ $UPDATE_INTERVAL -eq 60 ]]; then
+    # Hourly updates
+    echo "0 * * * * /usr/local/bin/patchmon-agent.sh update >/dev/null 2>&1" | crontab -
+else
+    # Custom interval updates
+    echo "*/$UPDATE_INTERVAL * * * * /usr/local/bin/patchmon-agent.sh update >/dev/null 2>&1" | crontab -
+fi
+
+success "🎉 PatchMon Agent installation complete!"
+echo ""
+echo "📋 Installation Summary:"
+echo "   • Agent installed: /usr/local/bin/patchmon-agent.sh"
+echo "   • Agent version: $AGENT_VERSION"
+if [[ "$EXPECTED_VERSION" != "Unknown" ]]; then
+    echo "   • Expected version: $EXPECTED_VERSION"
+fi
+echo "   • Config directory: /etc/patchmon/"
+echo "   • Credentials file: /etc/patchmon/credentials"
+echo "   • Automatic updates: Every $UPDATE_INTERVAL minutes via crontab"
+echo "   • View logs: tail -f /var/log/patchmon-agent.sh"
+echo ""
+echo "🔧 Manual commands:"
+echo "   • Test connection: patchmon-agent.sh test"
+echo "   • Send update: patchmon-agent.sh update"
+echo "   • Check status: patchmon-agent.sh ping"
+echo ""
+success "Your host is now connected to PatchMon!"
+
diff --git a/backend/env.example b/backend/env.example
new file mode 100644
index 0000000..6f37d61
--- /dev/null
+++ b/backend/env.example
@@ -0,0 +1,17 @@
+# Database Configuration
+DATABASE_URL="postgresql://patchmon_user:p@tchm0n_p@55@localhost:5432/patchmon_db"
+
+# Server Configuration
+PORT=3001
+NODE_ENV=development
+
+# API Configuration
+API_VERSION=v1
+CORS_ORIGIN=http://localhost:3000
+
+# Rate Limiting
+RATE_LIMIT_WINDOW_MS=900000
+RATE_LIMIT_MAX=100
+
+# Logging
+LOG_LEVEL=info 
diff --git a/backend/package.json b/backend/package.json
new file mode 100644
index 0000000..1433daf
--- /dev/null
+++ b/backend/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "patchmon-backend",
+  "version": "1.0.0",
+  "description": "Backend API for Linux Patch Monitoring System",
+  "main": "src/server.js",
+  "scripts": {
+    "dev": "nodemon src/server.js",
+    "start": "node src/server.js",
+    "build": "echo 'No build step needed for Node.js'",
+    "db:generate": "prisma generate",
+    "db:migrate": "prisma migrate dev",
+    "db:push": "prisma db push",
+    "db:studio": "prisma studio"
+  },
+  "dependencies": {
+    "@prisma/client": "^5.7.0",
+    "bcryptjs": "^2.4.3",
+    "cors": "^2.8.5",
+    "dotenv": "^16.3.1",
+    "express": "^4.18.2",
+    "express-rate-limit": "^7.1.5",
+    "express-validator": "^7.0.1",
+    "helmet": "^7.1.0",
+    "jsonwebtoken": "^9.0.2",
+    "moment": "^2.30.1",
+    "uuid": "^9.0.1",
+    "winston": "^3.11.0"
+  },
+  "devDependencies": {
+    "nodemon": "^3.0.2",
+    "prisma": "^5.7.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}
diff --git a/backend/prisma/migrations/20250716185346_init/migration.sql b/backend/prisma/migrations/20250716185346_init/migration.sql
new file mode 100644
index 0000000..4350de6
--- /dev/null
+++ b/backend/prisma/migrations/20250716185346_init/migration.sql
@@ -0,0 +1,77 @@
+-- CreateTable
+CREATE TABLE "hosts" (
+    "id" TEXT NOT NULL,
+    "hostname" TEXT NOT NULL,
+    "ip" TEXT,
+    "os_type" TEXT NOT NULL,
+    "os_version" TEXT NOT NULL,
+    "architecture" TEXT,
+    "last_update" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "status" TEXT NOT NULL DEFAULT 'active',
+    "token" TEXT NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "hosts_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "packages" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "description" TEXT,
+    "category" TEXT,
+    "latest_version" TEXT,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "packages_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "host_packages" (
+    "id" TEXT NOT NULL,
+    "host_id" TEXT NOT NULL,
+    "package_id" TEXT NOT NULL,
+    "current_version" TEXT NOT NULL,
+    "available_version" TEXT,
+    "needs_update" BOOLEAN NOT NULL DEFAULT false,
+    "is_security_update" BOOLEAN NOT NULL DEFAULT false,
+    "last_checked" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "host_packages_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "update_history" (
+    "id" TEXT NOT NULL,
+    "host_id" TEXT NOT NULL,
+    "packages_count" INTEGER NOT NULL,
+    "security_count" INTEGER NOT NULL,
+    "timestamp" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "status" TEXT NOT NULL DEFAULT 'success',
+    "error_message" TEXT,
+
+    CONSTRAINT "update_history_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "hosts_hostname_key" ON "hosts"("hostname");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "hosts_token_key" ON "hosts"("token");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "packages_name_key" ON "packages"("name");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "host_packages_host_id_package_id_key" ON "host_packages"("host_id", "package_id");
+
+-- AddForeignKey
+ALTER TABLE "host_packages" ADD CONSTRAINT "host_packages_host_id_fkey" FOREIGN KEY ("host_id") REFERENCES "hosts"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "host_packages" ADD CONSTRAINT "host_packages_package_id_fkey" FOREIGN KEY ("package_id") REFERENCES "packages"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "update_history" ADD CONSTRAINT "update_history_host_id_fkey" FOREIGN KEY ("host_id") REFERENCES "hosts"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/backend/prisma/migrations/20250915171333_add_role_permissions/migration.sql b/backend/prisma/migrations/20250915171333_add_role_permissions/migration.sql
new file mode 100644
index 0000000..bcd695a
--- /dev/null
+++ b/backend/prisma/migrations/20250915171333_add_role_permissions/migration.sql
@@ -0,0 +1,67 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `token` on the `hosts` table. All the data in the column will be lost.
+  - A unique constraint covering the columns `[api_id]` on the table `hosts` will be added. If there are existing duplicate values, this will fail.
+  - A unique constraint covering the columns `[api_key]` on the table `hosts` will be added. If there are existing duplicate values, this will fail.
+  - Added the required column `api_id` to the `hosts` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `api_key` to the `hosts` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- DropIndex
+DROP INDEX "hosts_token_key";
+
+-- AlterTable
+ALTER TABLE "hosts" DROP COLUMN "token",
+ADD COLUMN     "api_id" TEXT NOT NULL,
+ADD COLUMN     "api_key" TEXT NOT NULL;
+
+-- CreateTable
+CREATE TABLE "users" (
+    "id" TEXT NOT NULL,
+    "username" TEXT NOT NULL,
+    "email" TEXT NOT NULL,
+    "password_hash" TEXT NOT NULL,
+    "role" TEXT NOT NULL DEFAULT 'admin',
+    "is_active" BOOLEAN NOT NULL DEFAULT true,
+    "last_login" TIMESTAMP(3),
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "users_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "role_permissions" (
+    "id" TEXT NOT NULL,
+    "role" TEXT NOT NULL,
+    "can_view_dashboard" BOOLEAN NOT NULL DEFAULT true,
+    "can_view_hosts" BOOLEAN NOT NULL DEFAULT true,
+    "can_manage_hosts" BOOLEAN NOT NULL DEFAULT false,
+    "can_view_packages" BOOLEAN NOT NULL DEFAULT true,
+    "can_manage_packages" BOOLEAN NOT NULL DEFAULT false,
+    "can_view_users" BOOLEAN NOT NULL DEFAULT false,
+    "can_manage_users" BOOLEAN NOT NULL DEFAULT false,
+    "can_view_reports" BOOLEAN NOT NULL DEFAULT true,
+    "can_export_data" BOOLEAN NOT NULL DEFAULT false,
+    "can_manage_settings" BOOLEAN NOT NULL DEFAULT false,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "role_permissions_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "users_username_key" ON "users"("username");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "users_email_key" ON "users"("email");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "role_permissions_role_key" ON "role_permissions"("role");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "hosts_api_id_key" ON "hosts"("api_id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "hosts_api_key_key" ON "hosts"("api_key");
diff --git a/backend/prisma/migrations/20250915190113_add_settings_table/migration.sql b/backend/prisma/migrations/20250915190113_add_settings_table/migration.sql
new file mode 100644
index 0000000..1038fb1
--- /dev/null
+++ b/backend/prisma/migrations/20250915190113_add_settings_table/migration.sql
@@ -0,0 +1,13 @@
+-- CreateTable
+CREATE TABLE "settings" (
+    "id" TEXT NOT NULL,
+    "server_url" TEXT NOT NULL DEFAULT 'http://localhost:3001',
+    "server_protocol" TEXT NOT NULL DEFAULT 'http',
+    "server_host" TEXT NOT NULL DEFAULT 'localhost',
+    "server_port" INTEGER NOT NULL DEFAULT 3001,
+    "frontend_url" TEXT NOT NULL DEFAULT 'http://localhost:3000',
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "settings_pkey" PRIMARY KEY ("id")
+);
diff --git a/backend/prisma/migrations/20250915200316_add_dashboard_preferences/migration.sql b/backend/prisma/migrations/20250915200316_add_dashboard_preferences/migration.sql
new file mode 100644
index 0000000..8fe0634
--- /dev/null
+++ b/backend/prisma/migrations/20250915200316_add_dashboard_preferences/migration.sql
@@ -0,0 +1,18 @@
+-- CreateTable
+CREATE TABLE "dashboard_preferences" (
+    "id" TEXT NOT NULL,
+    "user_id" TEXT NOT NULL,
+    "card_id" TEXT NOT NULL,
+    "enabled" BOOLEAN NOT NULL DEFAULT true,
+    "order" INTEGER NOT NULL DEFAULT 0,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "dashboard_preferences_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "dashboard_preferences_user_id_card_id_key" ON "dashboard_preferences"("user_id", "card_id");
+
+-- AddForeignKey
+ALTER TABLE "dashboard_preferences" ADD CONSTRAINT "dashboard_preferences_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/backend/prisma/migrations/20250915203810_add_host_groups/migration.sql b/backend/prisma/migrations/20250915203810_add_host_groups/migration.sql
new file mode 100644
index 0000000..5976f6c
--- /dev/null
+++ b/backend/prisma/migrations/20250915203810_add_host_groups/migration.sql
@@ -0,0 +1,20 @@
+-- AlterTable
+ALTER TABLE "hosts" ADD COLUMN     "host_group_id" TEXT;
+
+-- CreateTable
+CREATE TABLE "host_groups" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "description" TEXT,
+    "color" TEXT DEFAULT '#3B82F6',
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "host_groups_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "host_groups_name_key" ON "host_groups"("name");
+
+-- AddForeignKey
+ALTER TABLE "hosts" ADD CONSTRAINT "hosts_host_group_id_fkey" FOREIGN KEY ("host_group_id") REFERENCES "host_groups"("id") ON DELETE SET NULL ON UPDATE CASCADE;
diff --git a/backend/prisma/migrations/20250915235823_add_agent_versioning/migration.sql b/backend/prisma/migrations/20250915235823_add_agent_versioning/migration.sql
new file mode 100644
index 0000000..5584e88
--- /dev/null
+++ b/backend/prisma/migrations/20250915235823_add_agent_versioning/migration.sql
@@ -0,0 +1,19 @@
+-- AlterTable
+ALTER TABLE "hosts" ADD COLUMN     "agent_version" TEXT;
+
+-- CreateTable
+CREATE TABLE "agent_versions" (
+    "id" TEXT NOT NULL,
+    "version" TEXT NOT NULL,
+    "is_current" BOOLEAN NOT NULL DEFAULT false,
+    "release_notes" TEXT,
+    "download_url" TEXT,
+    "min_server_version" TEXT,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "agent_versions_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "agent_versions_version_key" ON "agent_versions"("version");
diff --git a/backend/prisma/migrations/20250916001500_add_agent_script_content/migration.sql b/backend/prisma/migrations/20250916001500_add_agent_script_content/migration.sql
new file mode 100644
index 0000000..93a62e7
--- /dev/null
+++ b/backend/prisma/migrations/20250916001500_add_agent_script_content/migration.sql
@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "agent_versions" ADD COLUMN     "is_default" BOOLEAN NOT NULL DEFAULT false,
+ADD COLUMN     "script_content" TEXT;
diff --git a/backend/prisma/migrations/20250916004317_add_update_interval_setting/migration.sql b/backend/prisma/migrations/20250916004317_add_update_interval_setting/migration.sql
new file mode 100644
index 0000000..99c0aad
--- /dev/null
+++ b/backend/prisma/migrations/20250916004317_add_update_interval_setting/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "settings" ADD COLUMN     "update_interval" INTEGER NOT NULL DEFAULT 60;
diff --git a/backend/prisma/migrations/20250916011838_add_auto_update_setting/migration.sql b/backend/prisma/migrations/20250916011838_add_auto_update_setting/migration.sql
new file mode 100644
index 0000000..bbeb20d
--- /dev/null
+++ b/backend/prisma/migrations/20250916011838_add_auto_update_setting/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "settings" ADD COLUMN     "auto_update" BOOLEAN NOT NULL DEFAULT false;
diff --git a/backend/prisma/migrations/20250916012912_add_host_auto_update/migration.sql b/backend/prisma/migrations/20250916012912_add_host_auto_update/migration.sql
new file mode 100644
index 0000000..e8ae986
--- /dev/null
+++ b/backend/prisma/migrations/20250916012912_add_host_auto_update/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "hosts" ADD COLUMN     "auto_update" BOOLEAN NOT NULL DEFAULT true;
diff --git a/backend/prisma/migrations/20250916040214_add_repositories_module/migration.sql b/backend/prisma/migrations/20250916040214_add_repositories_module/migration.sql
new file mode 100644
index 0000000..f46a75c
--- /dev/null
+++ b/backend/prisma/migrations/20250916040214_add_repositories_module/migration.sql
@@ -0,0 +1,40 @@
+-- CreateTable
+CREATE TABLE "repositories" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "url" TEXT NOT NULL,
+    "distribution" TEXT NOT NULL,
+    "components" TEXT NOT NULL,
+    "repo_type" TEXT NOT NULL,
+    "is_active" BOOLEAN NOT NULL DEFAULT true,
+    "is_secure" BOOLEAN NOT NULL DEFAULT true,
+    "priority" INTEGER,
+    "description" TEXT,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "repositories_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "host_repositories" (
+    "id" TEXT NOT NULL,
+    "host_id" TEXT NOT NULL,
+    "repository_id" TEXT NOT NULL,
+    "is_enabled" BOOLEAN NOT NULL DEFAULT true,
+    "last_checked" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "host_repositories_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "repositories_url_distribution_components_key" ON "repositories"("url", "distribution", "components");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "host_repositories_host_id_repository_id_key" ON "host_repositories"("host_id", "repository_id");
+
+-- AddForeignKey
+ALTER TABLE "host_repositories" ADD CONSTRAINT "host_repositories_host_id_fkey" FOREIGN KEY ("host_id") REFERENCES "hosts"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "host_repositories" ADD CONSTRAINT "host_repositories_repository_id_fkey" FOREIGN KEY ("repository_id") REFERENCES "repositories"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/backend/prisma/migrations/migration_lock.toml b/backend/prisma/migrations/migration_lock.toml
new file mode 100644
index 0000000..fbffa92
--- /dev/null
+++ b/backend/prisma/migrations/migration_lock.toml
@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "postgresql"
\ No newline at end of file
diff --git a/backend/prisma/schema.prisma b/backend/prisma/schema.prisma
new file mode 100644
index 0000000..7503af7
--- /dev/null
+++ b/backend/prisma/schema.prisma
@@ -0,0 +1,217 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+model User {
+  id            String   @id @default(cuid())
+  username      String   @unique
+  email         String   @unique
+  passwordHash  String   @map("password_hash")
+  role          String   @default("admin") // admin, user
+  isActive      Boolean  @default(true) @map("is_active")
+  lastLogin     DateTime? @map("last_login")
+  createdAt     DateTime @map("created_at") @default(now())
+  updatedAt     DateTime @map("updated_at") @updatedAt
+  
+  // Relationships
+  dashboardPreferences DashboardPreferences[]
+  
+  @@map("users")
+}
+
+model RolePermissions {
+  id                    String   @id @default(cuid())
+  role                  String   @unique // admin, user, custom roles
+  canViewDashboard      Boolean  @default(true) @map("can_view_dashboard")
+  canViewHosts          Boolean  @default(true) @map("can_view_hosts")
+  canManageHosts        Boolean  @default(false) @map("can_manage_hosts")
+  canViewPackages       Boolean  @default(true) @map("can_view_packages")
+  canManagePackages     Boolean  @default(false) @map("can_manage_packages")
+  canViewUsers          Boolean  @default(false) @map("can_view_users")
+  canManageUsers        Boolean  @default(false) @map("can_manage_users")
+  canViewReports        Boolean  @default(true) @map("can_view_reports")
+  canExportData         Boolean  @default(false) @map("can_export_data")
+  canManageSettings     Boolean  @default(false) @map("can_manage_settings")
+  createdAt             DateTime @map("created_at") @default(now())
+  updatedAt             DateTime @map("updated_at") @updatedAt
+  
+  @@map("role_permissions")
+}
+
+model HostGroup {
+  id            String   @id @default(cuid())
+  name          String   @unique
+  description   String?
+  color         String?  @default("#3B82F6") // Hex color for UI display
+  createdAt     DateTime @map("created_at") @default(now())
+  updatedAt     DateTime @map("updated_at") @updatedAt
+  
+  // Relationships
+  hosts         Host[]
+  
+  @@map("host_groups")
+}
+
+model Host {
+  id            String   @id @default(cuid())
+  hostname      String   @unique
+  ip            String?
+  osType        String   @map("os_type")
+  osVersion     String   @map("os_version")
+  architecture  String?
+  lastUpdate    DateTime @map("last_update") @default(now())
+  status        String   @default("active") // active, inactive, error
+  apiId         String   @unique @map("api_id") // New API ID for authentication
+  apiKey        String   @unique @map("api_key") // New API Key for authentication
+  hostGroupId   String?  @map("host_group_id") // Optional group association
+  agentVersion  String?  @map("agent_version") // Agent script version
+  autoUpdate    Boolean  @map("auto_update") @default(true) // Enable auto-update for this host
+  createdAt     DateTime @map("created_at") @default(now())
+  updatedAt     DateTime @map("updated_at") @updatedAt
+  
+  // Relationships
+  hostPackages  HostPackage[]
+  updateHistory UpdateHistory[]
+  hostRepositories HostRepository[]
+  hostGroup     HostGroup? @relation(fields: [hostGroupId], references: [id], onDelete: SetNull)
+  
+  @@map("hosts")
+}
+
+model Package {
+  id            String   @id @default(cuid())
+  name          String   @unique
+  description   String?
+  category      String?  // system, security, development, etc.
+  latestVersion String?  @map("latest_version")
+  createdAt     DateTime @map("created_at") @default(now())
+  updatedAt     DateTime @map("updated_at") @updatedAt
+  
+  // Relationships
+  hostPackages  HostPackage[]
+  
+  @@map("packages")
+}
+
+model HostPackage {
+  id               String   @id @default(cuid())
+  hostId           String   @map("host_id")
+  packageId        String   @map("package_id")
+  currentVersion   String   @map("current_version")
+  availableVersion String?  @map("available_version")
+  needsUpdate      Boolean  @map("needs_update") @default(false)
+  isSecurityUpdate Boolean  @map("is_security_update") @default(false)
+  lastChecked      DateTime @map("last_checked") @default(now())
+  
+  // Relationships
+  host             Host     @relation(fields: [hostId], references: [id], onDelete: Cascade)
+  package          Package  @relation(fields: [packageId], references: [id], onDelete: Cascade)
+  
+  @@unique([hostId, packageId])
+  @@map("host_packages")
+}
+
+model UpdateHistory {
+  id             String   @id @default(cuid())
+  hostId         String   @map("host_id")
+  packagesCount  Int      @map("packages_count")
+  securityCount  Int      @map("security_count")
+  timestamp      DateTime @default(now())
+  status         String   @default("success") // success, error
+  errorMessage   String?  @map("error_message")
+  
+  // Relationships
+  host           Host     @relation(fields: [hostId], references: [id], onDelete: Cascade)
+  
+  @@map("update_history")
+}
+
+model Repository {
+  id            String   @id @default(cuid())
+  name          String   // Repository name (e.g., "focal", "focal-updates")
+  url           String   // Repository URL
+  distribution  String   // Distribution (e.g., "focal", "jammy")
+  components    String   // Components (e.g., "main restricted universe multiverse")
+  repoType      String   @map("repo_type") // "deb" or "deb-src"
+  isActive      Boolean  @map("is_active") @default(true)
+  isSecure      Boolean  @map("is_secure") @default(true) // HTTPS vs HTTP
+  priority      Int?     // Repository priority
+  description   String?  // Optional description
+  createdAt     DateTime @map("created_at") @default(now())
+  updatedAt     DateTime @map("updated_at") @updatedAt
+  
+  // Relationships
+  hostRepositories HostRepository[]
+  
+  @@unique([url, distribution, components])
+  @@map("repositories")
+}
+
+model HostRepository {
+  id           String   @id @default(cuid())
+  hostId       String   @map("host_id")
+  repositoryId String   @map("repository_id")
+  isEnabled    Boolean  @map("is_enabled") @default(true)
+  lastChecked  DateTime @map("last_checked") @default(now())
+  
+  // Relationships
+  host         Host       @relation(fields: [hostId], references: [id], onDelete: Cascade)
+  repository   Repository @relation(fields: [repositoryId], references: [id], onDelete: Cascade)
+  
+  @@unique([hostId, repositoryId])
+  @@map("host_repositories")
+}
+
+model Settings {
+  id              String   @id @default(cuid())
+  serverUrl       String   @map("server_url") @default("http://localhost:3001")
+  serverProtocol  String   @map("server_protocol") @default("http") // http, https
+  serverHost      String   @map("server_host") @default("localhost")
+  serverPort      Int      @map("server_port") @default(3001)
+  frontendUrl     String   @map("frontend_url") @default("http://localhost:3000")
+  updateInterval  Int      @map("update_interval") @default(60) // Update interval in minutes
+  autoUpdate      Boolean  @map("auto_update") @default(false) // Enable automatic agent updates
+  createdAt       DateTime @map("created_at") @default(now())
+  updatedAt       DateTime @map("updated_at") @updatedAt
+
+  @@map("settings")
+}
+
+model DashboardPreferences {
+  id              String   @id @default(cuid())
+  userId          String   @map("user_id")
+  cardId          String   @map("card_id") // e.g., "totalHosts", "securityUpdates", etc.
+  enabled         Boolean  @default(true)
+  order           Int      @default(0)
+  createdAt       DateTime @map("created_at") @default(now())
+  updatedAt       DateTime @map("updated_at") @updatedAt
+  
+  // Relationships
+  user            User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+  
+  @@unique([userId, cardId])
+  @@map("dashboard_preferences")
+}
+
+model AgentVersion {
+  id              String   @id @default(cuid())
+  version         String   @unique // e.g., "1.0.0", "1.1.0"
+  isCurrent       Boolean  @default(false) @map("is_current") // Only one version can be current
+  releaseNotes    String?  @map("release_notes")
+  downloadUrl     String?  @map("download_url") // URL to download the agent script
+  minServerVersion String? @map("min_server_version") // Minimum server version required
+  scriptContent   String?  @map("script_content") // The actual agent script content
+  isDefault       Boolean  @default(false) @map("is_default") // Default version for new installations
+  createdAt       DateTime @map("created_at") @default(now())
+  updatedAt       DateTime @map("updated_at") @updatedAt
+  
+  @@map("agent_versions")
+} 
\ No newline at end of file
diff --git a/backend/src/middleware/auth.js b/backend/src/middleware/auth.js
new file mode 100644
index 0000000..b62d1bb
--- /dev/null
+++ b/backend/src/middleware/auth.js
@@ -0,0 +1,98 @@
+const jwt = require('jsonwebtoken');
+const { PrismaClient } = require('@prisma/client');
+
+const prisma = new PrismaClient();
+
+// Middleware to verify JWT token
+const authenticateToken = async (req, res, next) => {
+  try {
+    const authHeader = req.headers['authorization'];
+    const token = authHeader && authHeader.split(' ')[1]; // Bearer TOKEN
+
+    if (!token) {
+      return res.status(401).json({ error: 'Access token required' });
+    }
+
+    // Verify token
+    const decoded = jwt.verify(token, process.env.JWT_SECRET || 'your-secret-key');
+    
+    // Get user from database
+    const user = await prisma.user.findUnique({
+      where: { id: decoded.userId },
+      select: {
+        id: true,
+        username: true,
+        email: true,
+        role: true,
+        isActive: true,
+        lastLogin: true
+      }
+    });
+
+    if (!user || !user.isActive) {
+      return res.status(401).json({ error: 'Invalid or inactive user' });
+    }
+
+    // Update last login
+    await prisma.user.update({
+      where: { id: user.id },
+      data: { lastLogin: new Date() }
+    });
+
+    req.user = user;
+    next();
+  } catch (error) {
+    if (error.name === 'JsonWebTokenError') {
+      return res.status(401).json({ error: 'Invalid token' });
+    }
+    if (error.name === 'TokenExpiredError') {
+      return res.status(401).json({ error: 'Token expired' });
+    }
+    console.error('Auth middleware error:', error);
+    return res.status(500).json({ error: 'Authentication failed' });
+  }
+};
+
+// Middleware to check admin role
+const requireAdmin = (req, res, next) => {
+  if (req.user.role !== 'admin') {
+    return res.status(403).json({ error: 'Admin access required' });
+  }
+  next();
+};
+
+// Middleware to check if user is authenticated (optional)
+const optionalAuth = async (req, res, next) => {
+  try {
+    const authHeader = req.headers['authorization'];
+    const token = authHeader && authHeader.split(' ')[1];
+
+    if (token) {
+      const decoded = jwt.verify(token, process.env.JWT_SECRET || 'your-secret-key');
+      const user = await prisma.user.findUnique({
+        where: { id: decoded.userId },
+        select: {
+          id: true,
+          username: true,
+          email: true,
+          role: true,
+          isActive: true
+        }
+      });
+
+      if (user && user.isActive) {
+        req.user = user;
+      }
+    }
+    next();
+  } catch (error) {
+    // Continue without authentication for optional auth
+    next();
+  }
+};
+
+module.exports = {
+  authenticateToken,
+  requireAdmin,
+  optionalAuth
+};
diff --git a/backend/src/middleware/permissions.js b/backend/src/middleware/permissions.js
new file mode 100644
index 0000000..378494a
--- /dev/null
+++ b/backend/src/middleware/permissions.js
@@ -0,0 +1,59 @@
+const { PrismaClient } = require('@prisma/client');
+const prisma = new PrismaClient();
+
+// Permission middleware factory
+const requirePermission = (permission) => {
+  return async (req, res, next) => {
+    try {
+      // Get user's role permissions
+      const rolePermissions = await prisma.rolePermissions.findUnique({
+        where: { role: req.user.role }
+      });
+
+      // If no specific permissions found, default to admin permissions (for backward compatibility)
+      if (!rolePermissions) {
+        console.warn(`No permissions found for role: ${req.user.role}, defaulting to admin access`);
+        return next();
+      }
+
+      // Check if user has the required permission
+      if (!rolePermissions[permission]) {
+        return res.status(403).json({ 
+          error: 'Insufficient permissions',
+          message: `You don't have permission to ${permission.replace('can', '').toLowerCase()}`
+        });
+      }
+
+      next();
+    } catch (error) {
+      console.error('Permission check error:', error);
+      res.status(500).json({ error: 'Permission check failed' });
+    }
+  };
+};
+
+// Specific permission middlewares
+const requireViewDashboard = requirePermission('canViewDashboard');
+const requireViewHosts = requirePermission('canViewHosts');
+const requireManageHosts = requirePermission('canManageHosts');
+const requireViewPackages = requirePermission('canViewPackages');
+const requireManagePackages = requirePermission('canManagePackages');
+const requireViewUsers = requirePermission('canViewUsers');
+const requireManageUsers = requirePermission('canManageUsers');
+const requireViewReports = requirePermission('canViewReports');
+const requireExportData = requirePermission('canExportData');
+const requireManageSettings = requirePermission('canManageSettings');
+
+module.exports = {
+  requirePermission,
+  requireViewDashboard,
+  requireViewHosts,
+  requireManageHosts,
+  requireViewPackages,
+  requireManagePackages,
+  requireViewUsers,
+  requireManageUsers,
+  requireViewReports,
+  requireExportData,
+  requireManageSettings
+};
diff --git a/backend/src/routes/authRoutes.js b/backend/src/routes/authRoutes.js
new file mode 100644
index 0000000..32db367
--- /dev/null
+++ b/backend/src/routes/authRoutes.js
@@ -0,0 +1,452 @@
+const express = require('express');
+const bcrypt = require('bcryptjs');
+const jwt = require('jsonwebtoken');
+const { PrismaClient } = require('@prisma/client');
+const { body, validationResult } = require('express-validator');
+const { authenticateToken, requireAdmin } = require('../middleware/auth');
+const { requireViewUsers, requireManageUsers } = require('../middleware/permissions');
+
+const router = express.Router();
+const prisma = new PrismaClient();
+
+// Generate JWT token
+const generateToken = (userId) => {
+  return jwt.sign(
+    { userId },
+    process.env.JWT_SECRET || 'your-secret-key',
+    { expiresIn: process.env.JWT_EXPIRES_IN || '24h' }
+  );
+};
+
+// Admin endpoint to list all users
+router.get('/admin/users', authenticateToken, requireViewUsers, async (req, res) => {
+  try {
+    const users = await prisma.user.findMany({
+      select: {
+        id: true,
+        username: true,
+        email: true,
+        role: true,
+        isActive: true,
+        lastLogin: true,
+        createdAt: true,
+        updatedAt: true
+      },
+      orderBy: {
+        createdAt: 'desc'
+      }
+    })
+
+    res.json(users)
+  } catch (error) {
+    console.error('List users error:', error)
+    res.status(500).json({ error: 'Failed to fetch users' })
+  }
+})
+
+// Admin endpoint to create a new user
+router.post('/admin/users', authenticateToken, requireManageUsers, [
+  body('username').isLength({ min: 3 }).withMessage('Username must be at least 3 characters'),
+  body('email').isEmail().withMessage('Valid email is required'),
+  body('password').isLength({ min: 6 }).withMessage('Password must be at least 6 characters'),
+  body('role').optional().custom(async (value) => {
+    if (!value) return true; // Optional field
+    const rolePermissions = await prisma.rolePermissions.findUnique({
+      where: { role: value }
+    });
+    if (!rolePermissions) {
+      throw new Error('Invalid role specified');
+    }
+    return true;
+  })
+], async (req, res) => {
+  try {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) {
+      return res.status(400).json({ errors: errors.array() });
+    }
+
+    const { username, email, password, role = 'user' } = req.body;
+
+    // Check if user already exists
+    const existingUser = await prisma.user.findFirst({
+      where: {
+        OR: [
+          { username },
+          { email }
+        ]
+      }
+    });
+
+    if (existingUser) {
+      return res.status(409).json({ error: 'Username or email already exists' });
+    }
+
+    // Hash password
+    const passwordHash = await bcrypt.hash(password, 12);
+
+    // Create user
+    const user = await prisma.user.create({
+      data: {
+        username,
+        email,
+        passwordHash,
+        role
+      },
+      select: {
+        id: true,
+        username: true,
+        email: true,
+        role: true,
+        isActive: true,
+        createdAt: true
+      }
+    });
+
+    res.status(201).json({
+      message: 'User created successfully',
+      user
+    });
+  } catch (error) {
+    console.error('User creation error:', error);
+    res.status(500).json({ error: 'Failed to create user' });
+  }
+});
+
+// Admin endpoint to update a user
+router.put('/admin/users/:userId', authenticateToken, requireManageUsers, [
+  body('username').optional().isLength({ min: 3 }).withMessage('Username must be at least 3 characters'),
+  body('email').optional().isEmail().withMessage('Valid email is required'),
+  body('role').optional().custom(async (value) => {
+    if (!value) return true; // Optional field
+    const rolePermissions = await prisma.rolePermissions.findUnique({
+      where: { role: value }
+    });
+    if (!rolePermissions) {
+      throw new Error('Invalid role specified');
+    }
+    return true;
+  }),
+  body('isActive').optional().isBoolean().withMessage('isActive must be a boolean')
+], async (req, res) => {
+  try {
+    const { userId } = req.params;
+    const errors = validationResult(req);
+    
+    if (!errors.isEmpty()) {
+      return res.status(400).json({ errors: errors.array() });
+    }
+
+    const { username, email, role, isActive } = req.body;
+    const updateData = {};
+
+    if (username) updateData.username = username;
+    if (email) updateData.email = email;
+    if (role) updateData.role = role;
+    if (typeof isActive === 'boolean') updateData.isActive = isActive;
+
+    // Check if user exists
+    const existingUser = await prisma.user.findUnique({
+      where: { id: userId }
+    });
+
+    if (!existingUser) {
+      return res.status(404).json({ error: 'User not found' });
+    }
+
+    // Check if username/email already exists (excluding current user)
+    if (username || email) {
+      const duplicateUser = await prisma.user.findFirst({
+        where: {
+          AND: [
+            { id: { not: userId } },
+            {
+              OR: [
+                ...(username ? [{ username }] : []),
+                ...(email ? [{ email }] : [])
+              ]
+            }
+          ]
+        }
+      });
+
+      if (duplicateUser) {
+        return res.status(409).json({ error: 'Username or email already exists' });
+      }
+    }
+
+    // Prevent deactivating the last admin
+    if (isActive === false && existingUser.role === 'admin') {
+      const adminCount = await prisma.user.count({
+        where: { 
+          role: 'admin',
+          isActive: true
+        }
+      });
+
+      if (adminCount <= 1) {
+        return res.status(400).json({ error: 'Cannot deactivate the last admin user' });
+      }
+    }
+
+    // Update user
+    const updatedUser = await prisma.user.update({
+      where: { id: userId },
+      data: updateData,
+      select: {
+        id: true,
+        username: true,
+        email: true,
+        role: true,
+        isActive: true,
+        lastLogin: true,
+        createdAt: true,
+        updatedAt: true
+      }
+    });
+
+    res.json({
+      message: 'User updated successfully',
+      user: updatedUser
+    });
+  } catch (error) {
+    console.error('User update error:', error);
+    res.status(500).json({ error: 'Failed to update user' });
+  }
+});
+
+// Admin endpoint to delete a user
+router.delete('/admin/users/:userId', authenticateToken, requireManageUsers, async (req, res) => {
+  try {
+    const { userId } = req.params;
+
+    // Prevent self-deletion
+    if (userId === req.user.id) {
+      return res.status(400).json({ error: 'Cannot delete your own account' });
+    }
+
+    // Check if user exists
+    const user = await prisma.user.findUnique({
+      where: { id: userId }
+    });
+
+    if (!user) {
+      return res.status(404).json({ error: 'User not found' });
+    }
+
+    // Prevent deleting the last admin
+    if (user.role === 'admin') {
+      const adminCount = await prisma.user.count({
+        where: { 
+          role: 'admin',
+          isActive: true
+        }
+      });
+
+      if (adminCount <= 1) {
+        return res.status(400).json({ error: 'Cannot delete the last admin user' });
+      }
+    }
+
+    // Delete user
+    await prisma.user.delete({
+      where: { id: userId }
+    });
+
+    res.json({
+      message: 'User deleted successfully'
+    });
+  } catch (error) {
+    console.error('User deletion error:', error);
+    res.status(500).json({ error: 'Failed to delete user' });
+  }
+});
+
+// Login
+router.post('/login', [
+  body('username').notEmpty().withMessage('Username is required'),
+  body('password').notEmpty().withMessage('Password is required')
+], async (req, res) => {
+  try {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) {
+      return res.status(400).json({ errors: errors.array() });
+    }
+
+    const { username, password } = req.body;
+
+    // Find user by username or email
+    const user = await prisma.user.findFirst({
+      where: {
+        OR: [
+          { username },
+          { email: username }
+        ],
+        isActive: true
+      }
+    });
+
+    if (!user) {
+      return res.status(401).json({ error: 'Invalid credentials' });
+    }
+
+    // Verify password
+    const isValidPassword = await bcrypt.compare(password, user.passwordHash);
+    if (!isValidPassword) {
+      return res.status(401).json({ error: 'Invalid credentials' });
+    }
+
+    // Update last login
+    await prisma.user.update({
+      where: { id: user.id },
+      data: { lastLogin: new Date() }
+    });
+
+    // Generate token
+    const token = generateToken(user.id);
+
+    res.json({
+      message: 'Login successful',
+      token,
+      user: {
+        id: user.id,
+        username: user.username,
+        email: user.email,
+        role: user.role
+      }
+    });
+  } catch (error) {
+    console.error('Login error:', error);
+    res.status(500).json({ error: 'Login failed' });
+  }
+});
+
+// Get current user profile
+router.get('/profile', authenticateToken, async (req, res) => {
+  try {
+    res.json({
+      user: req.user
+    });
+  } catch (error) {
+    console.error('Get profile error:', error);
+    res.status(500).json({ error: 'Failed to get profile' });
+  }
+});
+
+// Update user profile
+router.put('/profile', authenticateToken, [
+  body('username').optional().isLength({ min: 3 }).withMessage('Username must be at least 3 characters'),
+  body('email').optional().isEmail().withMessage('Valid email is required')
+], async (req, res) => {
+  try {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) {
+      return res.status(400).json({ errors: errors.array() });
+    }
+
+    const { username, email } = req.body;
+    const updateData = {};
+
+    if (username) updateData.username = username;
+    if (email) updateData.email = email;
+
+    // Check if username/email already exists (excluding current user)
+    if (username || email) {
+      const existingUser = await prisma.user.findFirst({
+        where: {
+          AND: [
+            { id: { not: req.user.id } },
+            {
+              OR: [
+                ...(username ? [{ username }] : []),
+                ...(email ? [{ email }] : [])
+              ]
+            }
+          ]
+        }
+      });
+
+      if (existingUser) {
+        return res.status(409).json({ error: 'Username or email already exists' });
+      }
+    }
+
+    const updatedUser = await prisma.user.update({
+      where: { id: req.user.id },
+      data: updateData,
+      select: {
+        id: true,
+        username: true,
+        email: true,
+        role: true,
+        isActive: true,
+        lastLogin: true,
+        updatedAt: true
+      }
+    });
+
+    res.json({
+      message: 'Profile updated successfully',
+      user: updatedUser
+    });
+  } catch (error) {
+    console.error('Update profile error:', error);
+    res.status(500).json({ error: 'Failed to update profile' });
+  }
+});
+
+// Change password
+router.put('/change-password', authenticateToken, [
+  body('currentPassword').notEmpty().withMessage('Current password is required'),
+  body('newPassword').isLength({ min: 6 }).withMessage('New password must be at least 6 characters')
+], async (req, res) => {
+  try {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) {
+      return res.status(400).json({ errors: errors.array() });
+    }
+
+    const { currentPassword, newPassword } = req.body;
+
+    // Get user with password hash
+    const user = await prisma.user.findUnique({
+      where: { id: req.user.id }
+    });
+
+    // Verify current password
+    const isValidPassword = await bcrypt.compare(currentPassword, user.passwordHash);
+    if (!isValidPassword) {
+      return res.status(401).json({ error: 'Current password is incorrect' });
+    }
+
+    // Hash new password
+    const newPasswordHash = await bcrypt.hash(newPassword, 12);
+
+    // Update password
+    await prisma.user.update({
+      where: { id: req.user.id },
+      data: { passwordHash: newPasswordHash }
+    });
+
+    res.json({
+      message: 'Password changed successfully'
+    });
+  } catch (error) {
+    console.error('Change password error:', error);
+    res.status(500).json({ error: 'Failed to change password' });
+  }
+});
+
+// Logout (client-side token removal)
+router.post('/logout', authenticateToken, async (req, res) => {
+  try {
+    res.json({
+      message: 'Logout successful'
+    });
+  } catch (error) {
+    console.error('Logout error:', error);
+    res.status(500).json({ error: 'Logout failed' });
+  }
+});
+
+module.exports = router;
diff --git a/backend/src/routes/dashboardPreferencesRoutes.js b/backend/src/routes/dashboardPreferencesRoutes.js
new file mode 100644
index 0000000..2d98d96
--- /dev/null
+++ b/backend/src/routes/dashboardPreferencesRoutes.js
@@ -0,0 +1,89 @@
+const express = require('express');
+const { body, validationResult } = require('express-validator');
+const { PrismaClient } = require('@prisma/client');
+const { authenticateToken } = require('../middleware/auth');
+
+const router = express.Router();
+const prisma = new PrismaClient();
+
+// Get user's dashboard preferences
+router.get('/', authenticateToken, async (req, res) => {
+  try {
+    const preferences = await prisma.dashboardPreferences.findMany({
+      where: { userId: req.user.id },
+      orderBy: { order: 'asc' }
+    });
+    
+    res.json(preferences);
+  } catch (error) {
+    console.error('Dashboard preferences fetch error:', error);
+    res.status(500).json({ error: 'Failed to fetch dashboard preferences' });
+  }
+});
+
+// Update dashboard preferences (bulk update)
+router.put('/', authenticateToken, [
+  body('preferences').isArray().withMessage('Preferences must be an array'),
+  body('preferences.*.cardId').isString().withMessage('Card ID is required'),
+  body('preferences.*.enabled').isBoolean().withMessage('Enabled must be boolean'),
+  body('preferences.*.order').isInt().withMessage('Order must be integer')
+], async (req, res) => {
+  try {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) {
+      return res.status(400).json({ errors: errors.array() });
+    }
+
+    const { preferences } = req.body;
+    const userId = req.user.id;
+
+    // Delete existing preferences for this user
+    await prisma.dashboardPreferences.deleteMany({
+      where: { userId }
+    });
+
+    // Create new preferences
+    const newPreferences = preferences.map(pref => ({
+      userId,
+      cardId: pref.cardId,
+      enabled: pref.enabled,
+      order: pref.order
+    }));
+
+    const createdPreferences = await prisma.dashboardPreferences.createMany({
+      data: newPreferences
+    });
+
+    res.json({
+      message: 'Dashboard preferences updated successfully',
+      preferences: newPreferences
+    });
+  } catch (error) {
+    console.error('Dashboard preferences update error:', error);
+    res.status(500).json({ error: 'Failed to update dashboard preferences' });
+  }
+});
+
+// Get default dashboard card configuration
+router.get('/defaults', authenticateToken, async (req, res) => {
+  try {
+    const defaultCards = [
+      { cardId: 'totalHosts', title: 'Total Hosts', icon: 'Server', enabled: true, order: 0 },
+      { cardId: 'hostsNeedingUpdates', title: 'Needs Updating', icon: 'AlertTriangle', enabled: true, order: 1 },
+      { cardId: 'totalOutdatedPackages', title: 'Outdated Packages', icon: 'Package', enabled: true, order: 2 },
+      { cardId: 'securityUpdates', title: 'Security Updates', icon: 'Shield', enabled: true, order: 3 },
+      { cardId: 'erroredHosts', title: 'Errored Hosts', icon: 'AlertTriangle', enabled: true, order: 4 },
+      { cardId: 'osDistribution', title: 'OS Distribution', icon: 'BarChart3', enabled: true, order: 5 },
+      { cardId: 'updateStatus', title: 'Update Status', icon: 'BarChart3', enabled: true, order: 6 },
+      { cardId: 'packagePriority', title: 'Package Priority', icon: 'BarChart3', enabled: true, order: 7 },
+      { cardId: 'quickStats', title: 'Quick Stats', icon: 'TrendingUp', enabled: true, order: 8 }
+    ];
+
+    res.json(defaultCards);
+  } catch (error) {
+    console.error('Default dashboard cards error:', error);
+    res.status(500).json({ error: 'Failed to fetch default dashboard cards' });
+  }
+});
+
+module.exports = router;
diff --git a/backend/src/routes/dashboardRoutes.js b/backend/src/routes/dashboardRoutes.js
new file mode 100644
index 0000000..c5483fb
--- /dev/null
+++ b/backend/src/routes/dashboardRoutes.js
@@ -0,0 +1,313 @@
+const express = require('express');
+const { PrismaClient } = require('@prisma/client');
+const moment = require('moment');
+const { authenticateToken } = require('../middleware/auth');
+const { 
+  requireViewDashboard, 
+  requireViewHosts, 
+  requireViewPackages 
+} = require('../middleware/permissions');
+
+const router = express.Router();
+const prisma = new PrismaClient();
+
+// Get dashboard statistics
+router.get('/stats', authenticateToken, requireViewDashboard, async (req, res) => {
+  try {
+    const now = new Date();
+    const twentyFourHoursAgo = moment(now).subtract(24, 'hours').toDate();
+
+    // Get all statistics in parallel for better performance
+    const [
+      totalHosts,
+      hostsNeedingUpdates,
+      totalOutdatedPackages,
+      erroredHosts,
+      securityUpdates,
+      osDistribution,
+      updateTrends
+    ] = await Promise.all([
+      // Total hosts count
+      prisma.host.count({
+        where: { status: 'active' }
+      }),
+
+      // Hosts needing updates (distinct hosts with packages needing updates)
+      prisma.host.count({
+        where: {
+          status: 'active',
+          hostPackages: {
+            some: {
+              needsUpdate: true
+            }
+          }
+        }
+      }),
+
+      // Total outdated packages across all hosts
+      prisma.hostPackage.count({
+        where: { needsUpdate: true }
+      }),
+
+      // Errored hosts (not updated in 24 hours)
+      prisma.host.count({
+        where: {
+          status: 'active',
+          lastUpdate: {
+            lt: twentyFourHoursAgo
+          }
+        }
+      }),
+
+      // Security updates count
+      prisma.hostPackage.count({
+        where: {
+          needsUpdate: true,
+          isSecurityUpdate: true
+        }
+      }),
+
+      // OS distribution for pie chart
+      prisma.host.groupBy({
+        by: ['osType'],
+        where: { status: 'active' },
+        _count: {
+          osType: true
+        }
+      }),
+
+      // Update trends for the last 7 days
+      prisma.updateHistory.groupBy({
+        by: ['timestamp'],
+        where: {
+          timestamp: {
+            gte: moment(now).subtract(7, 'days').toDate()
+          }
+        },
+        _count: {
+          id: true
+        },
+        _sum: {
+          packagesCount: true,
+          securityCount: true
+        }
+      })
+    ]);
+
+    // Format OS distribution for pie chart
+    const osDistributionFormatted = osDistribution.map(item => ({
+      name: item.osType,
+      count: item._count.osType
+    }));
+
+    // Calculate update status distribution
+    const updateStatusDistribution = [
+      { name: 'Up to date', count: totalHosts - hostsNeedingUpdates },
+      { name: 'Needs updates', count: hostsNeedingUpdates },
+      { name: 'Errored', count: erroredHosts }
+    ];
+
+    // Package update priority distribution
+    const packageUpdateDistribution = [
+      { name: 'Security', count: securityUpdates },
+      { name: 'Regular', count: totalOutdatedPackages - securityUpdates }
+    ];
+
+    res.json({
+      cards: {
+        totalHosts,
+        hostsNeedingUpdates,
+        totalOutdatedPackages,
+        erroredHosts,
+        securityUpdates
+      },
+      charts: {
+        osDistribution: osDistributionFormatted,
+        updateStatusDistribution,
+        packageUpdateDistribution
+      },
+      trends: updateTrends,
+      lastUpdated: now.toISOString()
+    });
+  } catch (error) {
+    console.error('Error fetching dashboard stats:', error);
+    res.status(500).json({ error: 'Failed to fetch dashboard statistics' });
+  }
+});
+
+// Get hosts with their update status
+router.get('/hosts', authenticateToken, requireViewHosts, async (req, res) => {
+  try {
+    const hosts = await prisma.host.findMany({
+      // Show all hosts regardless of status
+      select: {
+        id: true,
+        hostname: true,
+        ip: true,
+        osType: true,
+        osVersion: true,
+        lastUpdate: true,
+        status: true,
+        agentVersion: true,
+        autoUpdate: true,
+        hostGroup: {
+          select: {
+            id: true,
+            name: true,
+            color: true
+          }
+        },
+        _count: {
+          select: {
+            hostPackages: {
+              where: {
+                needsUpdate: true
+              }
+            }
+          }
+        }
+      },
+      orderBy: { lastUpdate: 'desc' }
+    });
+
+    // Get update counts for each host separately
+    const hostsWithUpdateInfo = await Promise.all(
+      hosts.map(async (host) => {
+        const updatesCount = await prisma.hostPackage.count({
+          where: {
+            hostId: host.id,
+            needsUpdate: true
+          }
+        });
+
+        return {
+          ...host,
+          updatesCount,
+          isStale: moment(host.lastUpdate).isBefore(moment().subtract(24, 'hours'))
+        };
+      })
+    );
+
+    res.json(hostsWithUpdateInfo);
+  } catch (error) {
+    console.error('Error fetching hosts:', error);
+    res.status(500).json({ error: 'Failed to fetch hosts' });
+  }
+});
+
+// Get packages that need updates across all hosts
+router.get('/packages', authenticateToken, requireViewPackages, async (req, res) => {
+  try {
+    const packages = await prisma.package.findMany({
+      where: {
+        hostPackages: {
+          some: {
+            needsUpdate: true
+          }
+        }
+      },
+      select: {
+        id: true,
+        name: true,
+        description: true,
+        category: true,
+        latestVersion: true,
+        hostPackages: {
+          where: { needsUpdate: true },
+          select: {
+            currentVersion: true,
+            availableVersion: true,
+            isSecurityUpdate: true,
+            host: {
+              select: {
+                id: true,
+                hostname: true,
+                osType: true
+              }
+            }
+          }
+        }
+      },
+      orderBy: {
+        name: 'asc'
+      }
+    });
+
+    const packagesWithHostInfo = packages.map(pkg => ({
+      id: pkg.id,
+      name: pkg.name,
+      description: pkg.description,
+      category: pkg.category,
+      latestVersion: pkg.latestVersion,
+      affectedHostsCount: pkg.hostPackages.length,
+      isSecurityUpdate: pkg.hostPackages.some(hp => hp.isSecurityUpdate),
+      affectedHosts: pkg.hostPackages.map(hp => ({
+        hostId: hp.host.id,
+        hostname: hp.host.hostname,
+        osType: hp.host.osType,
+        currentVersion: hp.currentVersion,
+        availableVersion: hp.availableVersion,
+        isSecurityUpdate: hp.isSecurityUpdate
+      }))
+    }));
+
+    res.json(packagesWithHostInfo);
+  } catch (error) {
+    console.error('Error fetching packages:', error);
+    res.status(500).json({ error: 'Failed to fetch packages' });
+  }
+});
+
+// Get detailed host information
+router.get('/hosts/:hostId', authenticateToken, requireViewHosts, async (req, res) => {
+  try {
+    const { hostId } = req.params;
+    
+    const host = await prisma.host.findUnique({
+      where: { id: hostId },
+      include: {
+        hostGroup: {
+          select: {
+            id: true,
+            name: true,
+            color: true
+          }
+        },
+        hostPackages: {
+          include: {
+            package: true
+          },
+          orderBy: {
+            needsUpdate: 'desc'
+          }
+        },
+        updateHistory: {
+          orderBy: {
+            timestamp: 'desc'
+          },
+          take: 10
+        }
+      }
+    });
+
+    if (!host) {
+      return res.status(404).json({ error: 'Host not found' });
+    }
+
+    const hostWithStats = {
+      ...host,
+      stats: {
+        totalPackages: host.hostPackages.length,
+        outdatedPackages: host.hostPackages.filter(hp => hp.needsUpdate).length,
+        securityUpdates: host.hostPackages.filter(hp => hp.needsUpdate && hp.isSecurityUpdate).length
+      }
+    };
+
+    res.json(hostWithStats);
+  } catch (error) {
+    console.error('Error fetching host details:', error);
+    res.status(500).json({ error: 'Failed to fetch host details' });
+  }
+});
+
+module.exports = router; 
\ No newline at end of file
diff --git a/backend/src/routes/hostGroupRoutes.js b/backend/src/routes/hostGroupRoutes.js
new file mode 100644
index 0000000..6084376
--- /dev/null
+++ b/backend/src/routes/hostGroupRoutes.js
@@ -0,0 +1,225 @@
+const express = require('express');
+const { body, validationResult } = require('express-validator');
+const { PrismaClient } = require('@prisma/client');
+const { authenticateToken } = require('../middleware/auth');
+const { requireManageHosts } = require('../middleware/permissions');
+
+const router = express.Router();
+const prisma = new PrismaClient();
+
+// Get all host groups
+router.get('/', authenticateToken, async (req, res) => {
+  try {
+    const hostGroups = await prisma.hostGroup.findMany({
+      include: {
+        _count: {
+          select: {
+            hosts: true
+          }
+        }
+      },
+      orderBy: {
+        name: 'asc'
+      }
+    });
+
+    res.json(hostGroups);
+  } catch (error) {
+    console.error('Error fetching host groups:', error);
+    res.status(500).json({ error: 'Failed to fetch host groups' });
+  }
+});
+
+// Get a specific host group by ID
+router.get('/:id', authenticateToken, async (req, res) => {
+  try {
+    const { id } = req.params;
+
+    const hostGroup = await prisma.hostGroup.findUnique({
+      where: { id },
+      include: {
+        hosts: {
+          select: {
+            id: true,
+            hostname: true,
+            ip: true,
+            osType: true,
+            osVersion: true,
+            status: true,
+            lastUpdate: true
+          }
+        }
+      }
+    });
+
+    if (!hostGroup) {
+      return res.status(404).json({ error: 'Host group not found' });
+    }
+
+    res.json(hostGroup);
+  } catch (error) {
+    console.error('Error fetching host group:', error);
+    res.status(500).json({ error: 'Failed to fetch host group' });
+  }
+});
+
+// Create a new host group
+router.post('/', authenticateToken, requireManageHosts, [
+  body('name').trim().isLength({ min: 1 }).withMessage('Name is required'),
+  body('description').optional().trim(),
+  body('color').optional().isHexColor().withMessage('Color must be a valid hex color')
+], async (req, res) => {
+  try {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) {
+      return res.status(400).json({ errors: errors.array() });
+    }
+
+    const { name, description, color } = req.body;
+
+    // Check if host group with this name already exists
+    const existingGroup = await prisma.hostGroup.findUnique({
+      where: { name }
+    });
+
+    if (existingGroup) {
+      return res.status(400).json({ error: 'A host group with this name already exists' });
+    }
+
+    const hostGroup = await prisma.hostGroup.create({
+      data: {
+        name,
+        description: description || null,
+        color: color || '#3B82F6'
+      }
+    });
+
+    res.status(201).json(hostGroup);
+  } catch (error) {
+    console.error('Error creating host group:', error);
+    res.status(500).json({ error: 'Failed to create host group' });
+  }
+});
+
+// Update a host group
+router.put('/:id', authenticateToken, requireManageHosts, [
+  body('name').trim().isLength({ min: 1 }).withMessage('Name is required'),
+  body('description').optional().trim(),
+  body('color').optional().isHexColor().withMessage('Color must be a valid hex color')
+], async (req, res) => {
+  try {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) {
+      return res.status(400).json({ errors: errors.array() });
+    }
+
+    const { id } = req.params;
+    const { name, description, color } = req.body;
+
+    // Check if host group exists
+    const existingGroup = await prisma.hostGroup.findUnique({
+      where: { id }
+    });
+
+    if (!existingGroup) {
+      return res.status(404).json({ error: 'Host group not found' });
+    }
+
+    // Check if another host group with this name already exists
+    const duplicateGroup = await prisma.hostGroup.findFirst({
+      where: {
+        name,
+        id: { not: id }
+      }
+    });
+
+    if (duplicateGroup) {
+      return res.status(400).json({ error: 'A host group with this name already exists' });
+    }
+
+    const hostGroup = await prisma.hostGroup.update({
+      where: { id },
+      data: {
+        name,
+        description: description || null,
+        color: color || '#3B82F6'
+      }
+    });
+
+    res.json(hostGroup);
+  } catch (error) {
+    console.error('Error updating host group:', error);
+    res.status(500).json({ error: 'Failed to update host group' });
+  }
+});
+
+// Delete a host group
+router.delete('/:id', authenticateToken, requireManageHosts, async (req, res) => {
+  try {
+    const { id } = req.params;
+
+    // Check if host group exists
+    const existingGroup = await prisma.hostGroup.findUnique({
+      where: { id },
+      include: {
+        _count: {
+          select: {
+            hosts: true
+          }
+        }
+      }
+    });
+
+    if (!existingGroup) {
+      return res.status(404).json({ error: 'Host group not found' });
+    }
+
+    // Check if host group has hosts
+    if (existingGroup._count.hosts > 0) {
+      return res.status(400).json({ 
+        error: 'Cannot delete host group that contains hosts. Please move or remove hosts first.' 
+      });
+    }
+
+    await prisma.hostGroup.delete({
+      where: { id }
+    });
+
+    res.json({ message: 'Host group deleted successfully' });
+  } catch (error) {
+    console.error('Error deleting host group:', error);
+    res.status(500).json({ error: 'Failed to delete host group' });
+  }
+});
+
+// Get hosts in a specific group
+router.get('/:id/hosts', authenticateToken, async (req, res) => {
+  try {
+    const { id } = req.params;
+
+    const hosts = await prisma.host.findMany({
+      where: { hostGroupId: id },
+      select: {
+        id: true,
+        hostname: true,
+        ip: true,
+        osType: true,
+        osVersion: true,
+        architecture: true,
+        status: true,
+        lastUpdate: true,
+        createdAt: true
+      },
+      orderBy: {
+        hostname: 'asc'
+      }
+    });
+
+    res.json(hosts);
+  } catch (error) {
+    console.error('Error fetching hosts in group:', error);
+    res.status(500).json({ error: 'Failed to fetch hosts in group' });
+  }
+});
+
+module.exports = router;
diff --git a/backend/src/routes/hostRoutes.js b/backend/src/routes/hostRoutes.js
new file mode 100644
index 0000000..7b15beb
--- /dev/null
+++ b/backend/src/routes/hostRoutes.js
@@ -0,0 +1,928 @@
+const express = require('express');
+const { PrismaClient } = require('@prisma/client');
+const { body, validationResult } = require('express-validator');
+const { v4: uuidv4 } = require('uuid');
+const bcrypt = require('bcryptjs');
+const crypto = require('crypto');
+const path = require('path');
+const fs = require('fs');
+const { authenticateToken, requireAdmin } = require('../middleware/auth');
+const { requireManageHosts, requireManageSettings } = require('../middleware/permissions');
+
+const router = express.Router();
+const prisma = new PrismaClient();
+
+// Public endpoint to download the agent script
+router.get('/agent/download', async (req, res) => {
+  try {
+    const { version } = req.query;
+    
+    let agentVersion;
+    
+    if (version) {
+      // Download specific version
+      agentVersion = await prisma.agentVersion.findUnique({
+        where: { version }
+      });
+      
+      if (!agentVersion) {
+        return res.status(404).json({ error: 'Agent version not found' });
+      }
+    } else {
+      // Download current version (latest)
+      agentVersion = await prisma.agentVersion.findFirst({
+        where: { isCurrent: true },
+        orderBy: { createdAt: 'desc' }
+      });
+
+      if (!agentVersion) {
+        // Fallback to default version
+        agentVersion = await prisma.agentVersion.findFirst({
+          where: { isDefault: true },
+          orderBy: { createdAt: 'desc' }
+        });
+      }
+    }
+    
+    if (!agentVersion) {
+      return res.status(404).json({ error: 'No agent version available' });
+    }
+    
+    // Use script content from database if available, otherwise fallback to file
+    if (agentVersion.scriptContent) {
+      res.setHeader('Content-Type', 'application/x-shellscript');
+      res.setHeader('Content-Disposition', `attachment; filename="patchmon-agent-${agentVersion.version}.sh"`);
+      res.send(agentVersion.scriptContent);
+    } else {
+      // Fallback to file system
+      const agentPath = path.join(__dirname, '../../../agents/patchmon-agent.sh');
+      
+      if (!fs.existsSync(agentPath)) {
+        return res.status(404).json({ error: 'Agent script not found' });
+      }
+
+      res.setHeader('Content-Type', 'application/x-shellscript');
+      res.setHeader('Content-Disposition', `attachment; filename="patchmon-agent-${agentVersion.version}.sh"`);
+      res.sendFile(path.resolve(agentPath));
+    }
+  } catch (error) {
+    console.error('Agent download error:', error);
+    res.status(500).json({ error: 'Failed to download agent script' });
+  }
+});
+
+// Version check endpoint for agents
+router.get('/agent/version', async (req, res) => {
+  try {
+    const currentVersion = await prisma.agentVersion.findFirst({
+      where: { isCurrent: true },
+      orderBy: { createdAt: 'desc' }
+    });
+
+    if (!currentVersion) {
+      return res.status(404).json({ error: 'No current agent version found' });
+    }
+
+    res.json({
+      currentVersion: currentVersion.version,
+      downloadUrl: currentVersion.downloadUrl || `/api/v1/hosts/agent/download`,
+      releaseNotes: currentVersion.releaseNotes,
+      minServerVersion: currentVersion.minServerVersion
+    });
+  } catch (error) {
+    console.error('Version check error:', error);
+    res.status(500).json({ error: 'Failed to get agent version' });
+  }
+});
+
+// Generate API credentials
+const generateApiCredentials = () => {
+  const apiId = `patchmon_${crypto.randomBytes(8).toString('hex')}`;
+  const apiKey = crypto.randomBytes(32).toString('hex');
+  return { apiId, apiKey };
+};
+
+// Middleware to validate API credentials
+const validateApiCredentials = async (req, res, next) => {
+  try {
+    const apiId = req.headers['x-api-id'] || req.body.apiId;
+    const apiKey = req.headers['x-api-key'] || req.body.apiKey;
+    
+    if (!apiId || !apiKey) {
+      return res.status(401).json({ error: 'API ID and Key required' });
+    }
+
+    const host = await prisma.host.findFirst({
+      where: { 
+        apiId: apiId,
+        apiKey: apiKey
+      }
+    });
+
+    if (!host) {
+      return res.status(401).json({ error: 'Invalid API credentials' });
+    }
+
+    req.hostRecord = host;
+    next();
+  } catch (error) {
+    console.error('API credential validation error:', error);
+    res.status(500).json({ error: 'API credential validation failed' });
+  }
+};
+
+// Admin endpoint to create a new host manually (replaces auto-registration)
+router.post('/create', authenticateToken, requireManageHosts, [
+  body('hostname').isLength({ min: 1 }).withMessage('Hostname is required'),
+  body('hostGroupId').optional()
+], async (req, res) => {
+  try {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) {
+      return res.status(400).json({ errors: errors.array() });
+    }
+
+    const { hostname, hostGroupId } = req.body;
+    
+    // Generate unique API credentials for this host
+    const { apiId, apiKey } = generateApiCredentials();
+    
+    // Check if host already exists
+    const existingHost = await prisma.host.findUnique({
+      where: { hostname }
+    });
+
+    if (existingHost) {
+      return res.status(409).json({ error: 'Host already exists' });
+    }
+
+    // If hostGroupId is provided, verify the group exists
+    if (hostGroupId) {
+      const hostGroup = await prisma.hostGroup.findUnique({
+        where: { id: hostGroupId }
+      });
+
+      if (!hostGroup) {
+        return res.status(400).json({ error: 'Host group not found' });
+      }
+    }
+
+    // Create new host with API credentials - system info will be populated when agent connects
+    const host = await prisma.host.create({
+      data: {
+        hostname,
+        osType: 'unknown', // Will be updated when agent connects
+        osVersion: 'unknown', // Will be updated when agent connects
+        ip: null, // Will be updated when agent connects
+        architecture: null, // Will be updated when agent connects
+        apiId,
+        apiKey,
+        hostGroupId: hostGroupId || null,
+        status: 'pending' // Will change to 'active' when agent connects
+      },
+      include: {
+        hostGroup: {
+          select: {
+            id: true,
+            name: true,
+            color: true
+          }
+        }
+      }
+    });
+
+    res.status(201).json({
+      message: 'Host created successfully',
+      hostId: host.id,
+      hostname: host.hostname,
+      apiId: host.apiId,
+      apiKey: host.apiKey,
+      hostGroup: host.hostGroup,
+      instructions: 'Use these credentials in your patchmon agent configuration. System information will be automatically detected when the agent connects.'
+    });
+  } catch (error) {
+    console.error('Host creation error:', error);
+    res.status(500).json({ error: 'Failed to create host' });
+  }
+});
+
+// Legacy register endpoint (deprecated - returns error message)
+router.post('/register', async (req, res) => {
+  res.status(400).json({ 
+    error: 'Host registration has been disabled. Please contact your administrator to add this host to PatchMon.',
+    deprecated: true,
+    message: 'Hosts must now be pre-created by administrators with specific API credentials.'
+  });
+});
+
+// Update host information and packages (now uses API credentials)
+router.post('/update', validateApiCredentials, [
+  body('packages').isArray().withMessage('Packages must be an array'),
+  body('packages.*.name').isLength({ min: 1 }).withMessage('Package name is required'),
+  body('packages.*.currentVersion').isLength({ min: 1 }).withMessage('Current version is required'),
+  body('packages.*.availableVersion').optional().isLength({ min: 1 }),
+  body('packages.*.needsUpdate').isBoolean().withMessage('needsUpdate must be boolean'),
+  body('packages.*.isSecurityUpdate').optional().isBoolean().withMessage('isSecurityUpdate must be boolean'),
+  body('agentVersion').optional().isLength({ min: 1 }).withMessage('Agent version must be a non-empty string')
+], async (req, res) => {
+  try {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) {
+      return res.status(400).json({ errors: errors.array() });
+    }
+
+    const { packages, repositories } = req.body;
+    const host = req.hostRecord;
+
+    // Update host last update timestamp and OS info if provided
+    const updateData = { lastUpdate: new Date() };
+    if (req.body.osType) updateData.osType = req.body.osType;
+    if (req.body.osVersion) updateData.osVersion = req.body.osVersion;
+    if (req.body.ip) updateData.ip = req.body.ip;
+    if (req.body.architecture) updateData.architecture = req.body.architecture;
+    if (req.body.agentVersion) updateData.agentVersion = req.body.agentVersion;
+    
+    // If this is the first update (status is 'pending'), change to 'active'
+    if (host.status === 'pending') {
+      updateData.status = 'active';
+    }
+
+    await prisma.host.update({
+      where: { id: host.id },
+      data: updateData
+    });
+
+    // Process packages in transaction
+    await prisma.$transaction(async (tx) => {
+      // Clear existing host packages
+      await tx.hostPackage.deleteMany({
+        where: { hostId: host.id }
+      });
+
+      // Process each package
+      for (const packageData of packages) {
+        // Find or create package
+        let pkg = await tx.package.findUnique({
+          where: { name: packageData.name }
+        });
+
+        if (!pkg) {
+          pkg = await tx.package.create({
+            data: {
+              name: packageData.name,
+              description: packageData.description || null,
+              category: packageData.category || null,
+              latestVersion: packageData.availableVersion || packageData.currentVersion
+            }
+          });
+        } else {
+          // Update package latest version if newer
+          if (packageData.availableVersion && packageData.availableVersion !== pkg.latestVersion) {
+            await tx.package.update({
+              where: { id: pkg.id },
+              data: { latestVersion: packageData.availableVersion }
+            });
+          }
+        }
+
+        // Create host package relationship
+        await tx.hostPackage.create({
+          data: {
+            hostId: host.id,
+            packageId: pkg.id,
+            currentVersion: packageData.currentVersion,
+            availableVersion: packageData.availableVersion || null,
+            needsUpdate: packageData.needsUpdate,
+            isSecurityUpdate: packageData.isSecurityUpdate || false,
+            lastChecked: new Date()
+          }
+        });
+      }
+
+      // Process repositories if provided
+      if (repositories && Array.isArray(repositories)) {
+        // Clear existing host repositories
+        await tx.hostRepository.deleteMany({
+          where: { hostId: host.id }
+        });
+
+        // Process each repository
+        for (const repoData of repositories) {
+          // Find or create repository
+          let repo = await tx.repository.findFirst({
+            where: {
+              url: repoData.url,
+              distribution: repoData.distribution,
+              components: repoData.components
+            }
+          });
+
+          if (!repo) {
+            repo = await tx.repository.create({
+              data: {
+                name: repoData.name,
+                url: repoData.url,
+                distribution: repoData.distribution,
+                components: repoData.components,
+                repoType: repoData.repoType,
+                isActive: true,
+                isSecure: repoData.isSecure || false,
+                description: `${repoData.repoType} repository for ${repoData.distribution}`
+              }
+            });
+          }
+
+          // Create host repository relationship
+          await tx.hostRepository.create({
+            data: {
+              hostId: host.id,
+              repositoryId: repo.id,
+              isEnabled: repoData.isEnabled !== false, // Default to enabled
+              lastChecked: new Date()
+            }
+          });
+        }
+      }
+    });
+
+    // Create update history record
+    const securityCount = packages.filter(pkg => pkg.isSecurityUpdate).length;
+    const updatesCount = packages.filter(pkg => pkg.needsUpdate).length;
+
+    await prisma.updateHistory.create({
+      data: {
+        hostId: host.id,
+        packagesCount: updatesCount,
+        securityCount,
+        status: 'success'
+      }
+    });
+
+    // Check if auto-update is enabled and if there's a newer agent version available
+    let autoUpdateResponse = null;
+    try {
+      const settings = await prisma.settings.findFirst();
+      // Check both global auto-update setting AND host-specific auto-update setting
+      if (settings && settings.autoUpdate && host.autoUpdate) {
+        // Get current agent version from the request
+        const currentAgentVersion = req.body.agentVersion;
+        
+        if (currentAgentVersion) {
+          // Get the latest agent version
+          const latestAgentVersion = await prisma.agentVersion.findFirst({
+            where: { isCurrent: true },
+            orderBy: { createdAt: 'desc' }
+          });
+          
+          if (latestAgentVersion && latestAgentVersion.version !== currentAgentVersion) {
+            // There's a newer version available
+            autoUpdateResponse = {
+              shouldUpdate: true,
+              currentVersion: currentAgentVersion,
+              latestVersion: latestAgentVersion.version,
+              message: 'A newer agent version is available. Run: /usr/local/bin/patchmon-agent.sh update-agent',
+              updateCommand: 'update-agent'
+            };
+          }
+        }
+      }
+    } catch (error) {
+      console.error('Auto-update check error:', error);
+      // Don't fail the update if auto-update check fails
+    }
+
+    const response = {
+      message: 'Host updated successfully',
+      packagesProcessed: packages.length,
+      updatesAvailable: updatesCount,
+      securityUpdates: securityCount
+    };
+
+    // Add auto-update response if available
+    if (autoUpdateResponse) {
+      response.autoUpdate = autoUpdateResponse;
+    }
+
+    // Check if crontab update is needed (when update interval changes)
+    // This is a simple check - if the host has auto-update enabled, we'll suggest crontab update
+    if (host.autoUpdate) {
+      // For now, we'll always suggest crontab update to ensure it's current
+      // In a more sophisticated implementation, we could track when the interval last changed
+      response.crontabUpdate = {
+        shouldUpdate: true,
+        message: 'Please ensure your crontab is up to date with current interval settings',
+        command: 'update-crontab'
+      };
+    }
+
+    res.json(response);
+  } catch (error) {
+    console.error('Host update error:', error);
+    
+    // Log error in update history
+    try {
+      await prisma.updateHistory.create({
+        data: {
+          hostId: req.hostRecord.id,
+          packagesCount: 0,
+          securityCount: 0,
+          status: 'error',
+          errorMessage: error.message
+        }
+      });
+    } catch (logError) {
+      console.error('Failed to log update error:', logError);
+    }
+
+    res.status(500).json({ error: 'Failed to update host' });
+  }
+});
+
+// Get host information (now uses API credentials)
+router.get('/info', validateApiCredentials, async (req, res) => {
+  try {
+    const host = await prisma.host.findUnique({
+      where: { id: req.hostRecord.id },
+      select: {
+        id: true,
+        hostname: true,
+        ip: true,
+        osType: true,
+        osVersion: true,
+        architecture: true,
+        lastUpdate: true,
+        status: true,
+        createdAt: true,
+        apiId: true // Include API ID for reference
+      }
+    });
+
+    res.json(host);
+  } catch (error) {
+    console.error('Get host info error:', error);
+    res.status(500).json({ error: 'Failed to fetch host information' });
+  }
+});
+
+// Ping endpoint for health checks (now uses API credentials)
+router.post('/ping', validateApiCredentials, async (req, res) => {
+  try {
+    // Update last update timestamp
+    await prisma.host.update({
+      where: { id: req.hostRecord.id },
+      data: { lastUpdate: new Date() }
+    });
+
+    const response = { 
+      message: 'Ping successful',
+      timestamp: new Date().toISOString(),
+      hostname: req.hostRecord.hostname
+    };
+
+    // Check if this is a crontab update trigger
+    if (req.body.triggerCrontabUpdate && req.hostRecord.autoUpdate) {
+      console.log(`Triggering crontab update for host: ${req.hostRecord.hostname}`);
+      response.crontabUpdate = {
+        shouldUpdate: true,
+        message: 'Update interval changed, please run: /usr/local/bin/patchmon-agent.sh update-crontab',
+        command: 'update-crontab'
+      };
+    }
+
+    res.json(response);
+  } catch (error) {
+    console.error('Ping error:', error);
+    res.status(500).json({ error: 'Ping failed' });
+  }
+});
+
+// Admin endpoint to regenerate API credentials for a host
+router.post('/:hostId/regenerate-credentials', authenticateToken, requireManageHosts, async (req, res) => {
+  try {
+    const { hostId } = req.params;
+    
+    const host = await prisma.host.findUnique({
+      where: { id: hostId }
+    });
+
+    if (!host) {
+      return res.status(404).json({ error: 'Host not found' });
+    }
+
+    // Generate new API credentials
+    const { apiId, apiKey } = generateApiCredentials();
+
+    // Update host with new credentials
+    const updatedHost = await prisma.host.update({
+      where: { id: hostId },
+      data: { apiId, apiKey }
+    });
+
+    res.json({
+      message: 'API credentials regenerated successfully',
+      hostname: updatedHost.hostname,
+      apiId: updatedHost.apiId,
+      apiKey: updatedHost.apiKey,
+      warning: 'Previous credentials are now invalid. Update your agent configuration.'
+    });
+  } catch (error) {
+    console.error('Credential regeneration error:', error);
+    res.status(500).json({ error: 'Failed to regenerate credentials' });
+  }
+});
+
+// Admin endpoint to bulk update host groups
+router.put('/bulk/group', authenticateToken, requireManageHosts, [
+  body('hostIds').isArray().withMessage('Host IDs must be an array'),
+  body('hostIds.*').isLength({ min: 1 }).withMessage('Each host ID must be provided'),
+  body('hostGroupId').optional()
+], async (req, res) => {
+  try {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) {
+      return res.status(400).json({ errors: errors.array() });
+    }
+
+    const { hostIds, hostGroupId } = req.body;
+
+    // If hostGroupId is provided, verify the group exists
+    if (hostGroupId) {
+      const hostGroup = await prisma.hostGroup.findUnique({
+        where: { id: hostGroupId }
+      });
+
+      if (!hostGroup) {
+        return res.status(400).json({ error: 'Host group not found' });
+      }
+    }
+
+    // Check if all hosts exist
+    const existingHosts = await prisma.host.findMany({
+      where: { id: { in: hostIds } },
+      select: { id: true, hostname: true }
+    });
+
+    if (existingHosts.length !== hostIds.length) {
+      const foundIds = existingHosts.map(h => h.id);
+      const missingIds = hostIds.filter(id => !foundIds.includes(id));
+      return res.status(400).json({ 
+        error: 'Some hosts not found',
+        missingHostIds: missingIds
+      });
+    }
+
+    // Bulk update host groups
+    const updateResult = await prisma.host.updateMany({
+      where: { id: { in: hostIds } },
+      data: {
+        hostGroupId: hostGroupId || null
+      }
+    });
+
+    // Get updated hosts with group information
+    const updatedHosts = await prisma.host.findMany({
+      where: { id: { in: hostIds } },
+      select: {
+        id: true,
+        hostname: true,
+        hostGroup: {
+          select: {
+            id: true,
+            name: true,
+            color: true
+          }
+        }
+      }
+    });
+
+    res.json({
+      message: `Successfully updated ${updateResult.count} host${updateResult.count !== 1 ? 's' : ''}`,
+      updatedCount: updateResult.count,
+      hosts: updatedHosts
+    });
+  } catch (error) {
+    console.error('Bulk host group update error:', error);
+    res.status(500).json({ error: 'Failed to update host groups' });
+  }
+});
+
+// Admin endpoint to update host group
+router.put('/:hostId/group', authenticateToken, requireManageHosts, [
+  body('hostGroupId').optional()
+], async (req, res) => {
+  try {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) {
+      return res.status(400).json({ errors: errors.array() });
+    }
+
+    const { hostId } = req.params;
+    const { hostGroupId } = req.body;
+
+    // Check if host exists
+    const host = await prisma.host.findUnique({
+      where: { id: hostId }
+    });
+
+    if (!host) {
+      return res.status(404).json({ error: 'Host not found' });
+    }
+
+    // If hostGroupId is provided, verify the group exists
+    if (hostGroupId) {
+      const hostGroup = await prisma.hostGroup.findUnique({
+        where: { id: hostGroupId }
+      });
+
+      if (!hostGroup) {
+        return res.status(400).json({ error: 'Host group not found' });
+      }
+    }
+
+    // Update host group
+    const updatedHost = await prisma.host.update({
+      where: { id: hostId },
+      data: {
+        hostGroupId: hostGroupId || null
+      },
+      include: {
+        hostGroup: {
+          select: {
+            id: true,
+            name: true,
+            color: true
+          }
+        }
+      }
+    });
+
+    res.json({
+      message: 'Host group updated successfully',
+      host: updatedHost
+    });
+  } catch (error) {
+    console.error('Host group update error:', error);
+    res.status(500).json({ error: 'Failed to update host group' });
+  }
+});
+
+// Admin endpoint to list all hosts
+router.get('/admin/list', authenticateToken, requireManageHosts, async (req, res) => {
+  try {
+    const hosts = await prisma.host.findMany({
+      select: {
+        id: true,
+        hostname: true,
+        ip: true,
+        osType: true,
+        osVersion: true,
+        architecture: true,
+        lastUpdate: true,
+        status: true,
+        apiId: true,
+        agentVersion: true,
+        autoUpdate: true,
+        createdAt: true
+      },
+      orderBy: { createdAt: 'desc' }
+    });
+
+    res.json(hosts);
+  } catch (error) {
+    console.error('List hosts error:', error);
+    res.status(500).json({ error: 'Failed to fetch hosts' });
+  }
+});
+
+// Admin endpoint to delete host
+router.delete('/:hostId', authenticateToken, requireManageHosts, async (req, res) => {
+  try {
+    const { hostId } = req.params;
+    
+    // Delete host and all related data (cascade)
+    await prisma.host.delete({
+      where: { id: hostId }
+    });
+
+    res.json({ message: 'Host deleted successfully' });
+  } catch (error) {
+    console.error('Host deletion error:', error);
+    res.status(500).json({ error: 'Failed to delete host' });
+  }
+});
+
+// Toggle host auto-update setting
+router.patch('/:hostId/auto-update', authenticateToken, requireManageHosts, [
+  body('autoUpdate').isBoolean().withMessage('Auto-update must be a boolean')
+], async (req, res) => {
+  try {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) {
+      return res.status(400).json({ errors: errors.array() });
+    }
+
+    const { hostId } = req.params;
+    const { autoUpdate } = req.body;
+
+    const host = await prisma.host.update({
+      where: { id: hostId },
+      data: { autoUpdate }
+    });
+
+    res.json({
+      message: `Host auto-update ${autoUpdate ? 'enabled' : 'disabled'} successfully`,
+      host: {
+        id: host.id,
+        hostname: host.hostname,
+        autoUpdate: host.autoUpdate
+      }
+    });
+  } catch (error) {
+    console.error('Host auto-update toggle error:', error);
+    res.status(500).json({ error: 'Failed to toggle host auto-update' });
+  }
+});
+
+// Serve the installation script
+router.get('/install', async (req, res) => {
+  try {
+    const fs = require('fs');
+    const path = require('path');
+    
+    const scriptPath = path.join(__dirname, '../../../agents/patchmon_install.sh');
+    
+    if (!fs.existsSync(scriptPath)) {
+      return res.status(404).json({ error: 'Installation script not found' });
+    }
+    
+    let script = fs.readFileSync(scriptPath, 'utf8');
+    
+    // Get the configured server URL from settings
+    try {
+      const settings = await prisma.settings.findFirst();
+      if (settings) {
+        // Replace the default server URL in the script with the configured one
+        script = script.replace(
+          /PATCHMON_URL="[^"]*"/g,
+          `PATCHMON_URL="${settings.serverUrl}"`
+        );
+      }
+    } catch (settingsError) {
+      console.warn('Could not fetch settings, using default server URL:', settingsError.message);
+    }
+    
+    res.setHeader('Content-Type', 'text/plain');
+    res.setHeader('Content-Disposition', 'inline; filename="patchmon_install.sh"');
+    res.send(script);
+  } catch (error) {
+    console.error('Installation script error:', error);
+    res.status(500).json({ error: 'Failed to serve installation script' });
+  }
+});
+
+// ==================== AGENT VERSION MANAGEMENT ====================
+
+// Get all agent versions (admin only)
+router.get('/agent/versions', authenticateToken, requireManageSettings, async (req, res) => {
+  try {
+    const versions = await prisma.agentVersion.findMany({
+      orderBy: { createdAt: 'desc' }
+    });
+
+    res.json(versions);
+  } catch (error) {
+    console.error('Get agent versions error:', error);
+    res.status(500).json({ error: 'Failed to get agent versions' });
+  }
+});
+
+// Create new agent version (admin only)
+router.post('/agent/versions', authenticateToken, requireManageSettings, [
+  body('version').isLength({ min: 1 }).withMessage('Version is required'),
+  body('releaseNotes').optional().isString(),
+  body('downloadUrl').optional().isURL().withMessage('Download URL must be valid'),
+  body('minServerVersion').optional().isString(),
+  body('scriptContent').optional().isString(),
+  body('isDefault').optional().isBoolean()
+], async (req, res) => {
+  try {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) {
+      return res.status(400).json({ errors: errors.array() });
+    }
+
+    const { version, releaseNotes, downloadUrl, minServerVersion, scriptContent, isDefault } = req.body;
+
+    // Check if version already exists
+    const existingVersion = await prisma.agentVersion.findUnique({
+      where: { version }
+    });
+
+    if (existingVersion) {
+      return res.status(400).json({ error: 'Version already exists' });
+    }
+
+    // If this is being set as default, unset other defaults
+    if (isDefault) {
+      await prisma.agentVersion.updateMany({
+        where: { isDefault: true },
+        data: { isDefault: false }
+      });
+    }
+
+    const agentVersion = await prisma.agentVersion.create({
+      data: {
+        version,
+        releaseNotes,
+        downloadUrl,
+        minServerVersion,
+        scriptContent,
+        isDefault: isDefault || false,
+        isCurrent: false
+      }
+    });
+
+    res.status(201).json(agentVersion);
+  } catch (error) {
+    console.error('Create agent version error:', error);
+    res.status(500).json({ error: 'Failed to create agent version' });
+  }
+});
+
+// Set current agent version (admin only)
+router.patch('/agent/versions/:versionId/current', authenticateToken, requireManageSettings, async (req, res) => {
+  try {
+    const { versionId } = req.params;
+
+    // First, unset all current versions
+    await prisma.agentVersion.updateMany({
+      where: { isCurrent: true },
+      data: { isCurrent: false }
+    });
+
+    // Set the specified version as current
+    const agentVersion = await prisma.agentVersion.update({
+      where: { id: versionId },
+      data: { isCurrent: true }
+    });
+
+    res.json(agentVersion);
+  } catch (error) {
+    console.error('Set current agent version error:', error);
+    res.status(500).json({ error: 'Failed to set current agent version' });
+  }
+});
+
+// Set default agent version (admin only)
+router.patch('/agent/versions/:versionId/default', authenticateToken, requireManageSettings, async (req, res) => {
+  try {
+    const { versionId } = req.params;
+
+    // First, unset all default versions
+    await prisma.agentVersion.updateMany({
+      where: { isDefault: true },
+      data: { isDefault: false }
+    });
+
+    // Set the specified version as default
+    const agentVersion = await prisma.agentVersion.update({
+      where: { id: versionId },
+      data: { isDefault: true }
+    });
+
+    res.json(agentVersion);
+  } catch (error) {
+    console.error('Set default agent version error:', error);
+    res.status(500).json({ error: 'Failed to set default agent version' });
+  }
+});
+
+// Delete agent version (admin only)
+router.delete('/agent/versions/:versionId', authenticateToken, requireManageSettings, async (req, res) => {
+  try {
+    const { versionId } = req.params;
+
+    const agentVersion = await prisma.agentVersion.findUnique({
+      where: { id: versionId }
+    });
+
+    if (!agentVersion) {
+      return res.status(404).json({ error: 'Agent version not found' });
+    }
+
+    if (agentVersion.isCurrent) {
+      return res.status(400).json({ error: 'Cannot delete current agent version' });
+    }
+
+    await prisma.agentVersion.delete({
+      where: { id: versionId }
+    });
+
+    res.json({ message: 'Agent version deleted successfully' });
+  } catch (error) {
+    console.error('Delete agent version error:', error);
+    res.status(500).json({ error: 'Failed to delete agent version' });
+  }
+});
+
+module.exports = router; 
\ No newline at end of file
diff --git a/backend/src/routes/packageRoutes.js b/backend/src/routes/packageRoutes.js
new file mode 100644
index 0000000..ca22234
--- /dev/null
+++ b/backend/src/routes/packageRoutes.js
@@ -0,0 +1,213 @@
+const express = require('express');
+const { PrismaClient } = require('@prisma/client');
+const { body, validationResult } = require('express-validator');
+
+const router = express.Router();
+const prisma = new PrismaClient();
+
+// Get all packages with their update status
+router.get('/', async (req, res) => {
+  try {
+    const { 
+      page = 1, 
+      limit = 50, 
+      search = '', 
+      category = '', 
+      needsUpdate = '', 
+      isSecurityUpdate = '' 
+    } = req.query;
+
+    const skip = (parseInt(page) - 1) * parseInt(limit);
+    const take = parseInt(limit);
+
+    // Build where clause
+    const where = {
+      AND: [
+        // Search filter
+        search ? {
+          OR: [
+            { name: { contains: search, mode: 'insensitive' } },
+            { description: { contains: search, mode: 'insensitive' } }
+          ]
+        } : {},
+        // Category filter
+        category ? { category: { equals: category } } : {},
+        // Update status filters
+        needsUpdate ? {
+          hostPackages: {
+            some: {
+              needsUpdate: needsUpdate === 'true'
+            }
+          }
+        } : {},
+        isSecurityUpdate ? {
+          hostPackages: {
+            some: {
+              isSecurityUpdate: isSecurityUpdate === 'true'
+            }
+          }
+        } : {}
+      ]
+    };
+
+    // Get packages with counts
+    const [packages, totalCount] = await Promise.all([
+      prisma.package.findMany({
+        where,
+        select: {
+          id: true,
+          name: true,
+          description: true,
+          category: true,
+          latestVersion: true,
+          createdAt: true,
+          _count: {
+            hostPackages: true
+          }
+        },
+        skip,
+        take,
+        orderBy: {
+          name: 'asc'
+        }
+      }),
+      prisma.package.count({ where })
+    ]);
+
+    // Get additional stats for each package
+    const packagesWithStats = await Promise.all(
+      packages.map(async (pkg) => {
+        const [updatesCount, securityCount, affectedHosts] = await Promise.all([
+          prisma.hostPackage.count({
+            where: {
+              packageId: pkg.id,
+              needsUpdate: true
+            }
+          }),
+          prisma.hostPackage.count({
+            where: {
+              packageId: pkg.id,
+              needsUpdate: true,
+              isSecurityUpdate: true
+            }
+          }),
+          prisma.hostPackage.findMany({
+            where: {
+              packageId: pkg.id,
+              needsUpdate: true
+            },
+            select: {
+              host: {
+                select: {
+                  id: true,
+                  hostname: true,
+                  osType: true
+                }
+              }
+            },
+            take: 10 // Limit to first 10 for performance
+          })
+        ]);
+
+        return {
+          ...pkg,
+          stats: {
+            totalInstalls: pkg._count.hostPackages,
+            updatesNeeded: updatesCount,
+            securityUpdates: securityCount,
+            affectedHosts: affectedHosts.map(hp => hp.host)
+          }
+        };
+      })
+    );
+
+    res.json({
+      packages: packagesWithStats,
+      pagination: {
+        page: parseInt(page),
+        limit: parseInt(limit),
+        total: totalCount,
+        pages: Math.ceil(totalCount / parseInt(limit))
+      }
+    });
+  } catch (error) {
+    console.error('Error fetching packages:', error);
+    res.status(500).json({ error: 'Failed to fetch packages' });
+  }
+});
+
+// Get package details by ID
+router.get('/:packageId', async (req, res) => {
+  try {
+    const { packageId } = req.params;
+
+    const packageData = await prisma.package.findUnique({
+      where: { id: packageId },
+      include: {
+        hostPackages: {
+          include: {
+            host: {
+              select: {
+                id: true,
+                hostname: true,
+                ip: true,
+                osType: true,
+                osVersion: true,
+                lastUpdate: true
+              }
+            }
+          },
+          orderBy: {
+            needsUpdate: 'desc'
+          }
+        }
+      }
+    });
+
+    if (!packageData) {
+      return res.status(404).json({ error: 'Package not found' });
+    }
+
+    // Calculate statistics
+    const stats = {
+      totalInstalls: packageData.hostPackages.length,
+      updatesNeeded: packageData.hostPackages.filter(hp => hp.needsUpdate).length,
+      securityUpdates: packageData.hostPackages.filter(hp => hp.needsUpdate && hp.isSecurityUpdate).length,
+      upToDate: packageData.hostPackages.filter(hp => !hp.needsUpdate).length
+    };
+
+    // Group by version
+    const versionDistribution = packageData.hostPackages.reduce((acc, hp) => {
+      const version = hp.currentVersion;
+      acc[version] = (acc[version] || 0) + 1;
+      return acc;
+    }, {});
+
+    // Group by OS type
+    const osDistribution = packageData.hostPackages.reduce((acc, hp) => {
+      const osType = hp.host.osType;
+      acc[osType] = (acc[osType] || 0) + 1;
+      return acc;
+    }, {});
+
+    res.json({
+      ...packageData,
+      stats,
+      distributions: {
+        versions: Object.entries(versionDistribution).map(([version, count]) => ({
+          version,
+          count
+        })),
+        osTypes: Object.entries(osDistribution).map(([osType, count]) => ({
+          osType,
+          count
+        }))
+      }
+    });
+  } catch (error) {
+    console.error('Error fetching package details:', error);
+    res.status(500).json({ error: 'Failed to fetch package details' });
+  }
+});
+
+module.exports = router; 
\ No newline at end of file
diff --git a/backend/src/routes/permissionsRoutes.js b/backend/src/routes/permissionsRoutes.js
new file mode 100644
index 0000000..493973b
--- /dev/null
+++ b/backend/src/routes/permissionsRoutes.js
@@ -0,0 +1,173 @@
+const express = require('express');
+const { PrismaClient } = require('@prisma/client');
+const { authenticateToken, requireAdmin } = require('../middleware/auth');
+const { requireManageSettings } = require('../middleware/permissions');
+
+const router = express.Router();
+const prisma = new PrismaClient();
+
+// Get all role permissions
+router.get('/roles', authenticateToken, requireManageSettings, async (req, res) => {
+  try {
+    const permissions = await prisma.rolePermissions.findMany({
+      orderBy: {
+        role: 'asc'
+      }
+    });
+
+    res.json(permissions);
+  } catch (error) {
+    console.error('Get role permissions error:', error);
+    res.status(500).json({ error: 'Failed to fetch role permissions' });
+  }
+});
+
+// Get permissions for a specific role
+router.get('/roles/:role', authenticateToken, requireManageSettings, async (req, res) => {
+  try {
+    const { role } = req.params;
+    
+    const permissions = await prisma.rolePermissions.findUnique({
+      where: { role }
+    });
+
+    if (!permissions) {
+      return res.status(404).json({ error: 'Role not found' });
+    }
+
+    res.json(permissions);
+  } catch (error) {
+    console.error('Get role permission error:', error);
+    res.status(500).json({ error: 'Failed to fetch role permission' });
+  }
+});
+
+// Create or update role permissions
+router.put('/roles/:role', authenticateToken, requireManageSettings, async (req, res) => {
+  try {
+    const { role } = req.params;
+    const {
+      canViewDashboard,
+      canViewHosts,
+      canManageHosts,
+      canViewPackages,
+      canManagePackages,
+      canViewUsers,
+      canManageUsers,
+      canViewReports,
+      canExportData,
+      canManageSettings
+    } = req.body;
+
+    // Prevent modifying admin role permissions (admin should always have full access)
+    if (role === 'admin') {
+      return res.status(400).json({ error: 'Cannot modify admin role permissions' });
+    }
+
+    const permissions = await prisma.rolePermissions.upsert({
+      where: { role },
+      update: {
+        canViewDashboard,
+        canViewHosts,
+        canManageHosts,
+        canViewPackages,
+        canManagePackages,
+        canViewUsers,
+        canManageUsers,
+        canViewReports,
+        canExportData,
+        canManageSettings
+      },
+      create: {
+        role,
+        canViewDashboard,
+        canViewHosts,
+        canManageHosts,
+        canViewPackages,
+        canManagePackages,
+        canViewUsers,
+        canManageUsers,
+        canViewReports,
+        canExportData,
+        canManageSettings
+      }
+    });
+
+    res.json({
+      message: 'Role permissions updated successfully',
+      permissions
+    });
+  } catch (error) {
+    console.error('Update role permissions error:', error);
+    res.status(500).json({ error: 'Failed to update role permissions' });
+  }
+});
+
+// Delete a role (and its permissions)
+router.delete('/roles/:role', authenticateToken, requireManageSettings, async (req, res) => {
+  try {
+    const { role } = req.params;
+
+    // Prevent deleting admin role
+    if (role === 'admin') {
+      return res.status(400).json({ error: 'Cannot delete admin role' });
+    }
+
+    // Check if any users are using this role
+    const usersWithRole = await prisma.user.count({
+      where: { role }
+    });
+
+    if (usersWithRole > 0) {
+      return res.status(400).json({ 
+        error: `Cannot delete role "${role}" because ${usersWithRole} user(s) are currently using it` 
+      });
+    }
+
+    await prisma.rolePermissions.delete({
+      where: { role }
+    });
+
+    res.json({
+      message: `Role "${role}" deleted successfully`
+    });
+  } catch (error) {
+    console.error('Delete role error:', error);
+    res.status(500).json({ error: 'Failed to delete role' });
+  }
+});
+
+// Get user's permissions based on their role
+router.get('/user-permissions', authenticateToken, async (req, res) => {
+  try {
+    const userRole = req.user.role;
+    
+    const permissions = await prisma.rolePermissions.findUnique({
+      where: { role: userRole }
+    });
+
+    if (!permissions) {
+      // If no specific permissions found, return default admin permissions
+      return res.json({
+        role: userRole,
+        canViewDashboard: true,
+        canViewHosts: true,
+        canManageHosts: true,
+        canViewPackages: true,
+        canManagePackages: true,
+        canViewUsers: true,
+        canManageUsers: true,
+        canViewReports: true,
+        canExportData: true,
+        canManageSettings: true,
+      });
+    }
+
+    res.json(permissions);
+  } catch (error) {
+    console.error('Get user permissions error:', error);
+    res.status(500).json({ error: 'Failed to fetch user permissions' });
+  }
+});
+
+module.exports = router;
diff --git a/backend/src/routes/repositoryRoutes.js b/backend/src/routes/repositoryRoutes.js
new file mode 100644
index 0000000..c275a96
--- /dev/null
+++ b/backend/src/routes/repositoryRoutes.js
@@ -0,0 +1,301 @@
+const express = require('express');
+const { body, validationResult } = require('express-validator');
+const { PrismaClient } = require('@prisma/client');
+const { authenticateToken } = require('../middleware/auth');
+const { requireViewHosts, requireManageHosts } = require('../middleware/permissions');
+
+const router = express.Router();
+const prisma = new PrismaClient();
+
+// Get all repositories with host count
+router.get('/', authenticateToken, requireViewHosts, async (req, res) => {
+  try {
+    const repositories = await prisma.repository.findMany({
+      include: {
+        hostRepositories: {
+          include: {
+            host: {
+              select: {
+                id: true,
+                hostname: true,
+                status: true
+              }
+            }
+          }
+        },
+        _count: {
+          select: {
+            hostRepositories: true
+          }
+        }
+      },
+      orderBy: [
+        { name: 'asc' },
+        { url: 'asc' }
+      ]
+    });
+
+    // Transform data to include host counts and status
+    const transformedRepos = repositories.map(repo => ({
+      ...repo,
+      hostCount: repo._count.hostRepositories,
+      enabledHostCount: repo.hostRepositories.filter(hr => hr.isEnabled).length,
+      activeHostCount: repo.hostRepositories.filter(hr => hr.host.status === 'active').length,
+      hosts: repo.hostRepositories.map(hr => ({
+        id: hr.host.id,
+        hostname: hr.host.hostname,
+        status: hr.host.status,
+        isEnabled: hr.isEnabled,
+        lastChecked: hr.lastChecked
+      }))
+    }));
+
+    res.json(transformedRepos);
+  } catch (error) {
+    console.error('Repository list error:', error);
+    res.status(500).json({ error: 'Failed to fetch repositories' });
+  }
+});
+
+// Get repositories for a specific host
+router.get('/host/:hostId', authenticateToken, requireViewHosts, async (req, res) => {
+  try {
+    const { hostId } = req.params;
+
+    const hostRepositories = await prisma.hostRepository.findMany({
+      where: { hostId },
+      include: {
+        repository: true,
+        host: {
+          select: {
+            id: true,
+            hostname: true
+          }
+        }
+      },
+      orderBy: {
+        repository: {
+          name: 'asc'
+        }
+      }
+    });
+
+    res.json(hostRepositories);
+  } catch (error) {
+    console.error('Host repositories error:', error);
+    res.status(500).json({ error: 'Failed to fetch host repositories' });
+  }
+});
+
+// Get repository details with all hosts
+router.get('/:repositoryId', authenticateToken, requireViewHosts, async (req, res) => {
+  try {
+    const { repositoryId } = req.params;
+
+    const repository = await prisma.repository.findUnique({
+      where: { id: repositoryId },
+      include: {
+        hostRepositories: {
+          include: {
+            host: {
+              select: {
+                id: true,
+                hostname: true,
+                ip: true,
+                osType: true,
+                osVersion: true,
+                status: true,
+                lastUpdate: true
+              }
+            }
+          },
+          orderBy: {
+            host: {
+              hostname: 'asc'
+            }
+          }
+        }
+      }
+    });
+
+    if (!repository) {
+      return res.status(404).json({ error: 'Repository not found' });
+    }
+
+    res.json(repository);
+  } catch (error) {
+    console.error('Repository detail error:', error);
+    res.status(500).json({ error: 'Failed to fetch repository details' });
+  }
+});
+
+// Update repository information (admin only)
+router.put('/:repositoryId', authenticateToken, requireManageHosts, [
+  body('name').optional().isLength({ min: 1 }).withMessage('Name is required'),
+  body('description').optional(),
+  body('isActive').optional().isBoolean().withMessage('isActive must be a boolean'),
+  body('priority').optional().isInt({ min: 0 }).withMessage('Priority must be a positive integer')
+], async (req, res) => {
+  try {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) {
+      return res.status(400).json({ errors: errors.array() });
+    }
+
+    const { repositoryId } = req.params;
+    const { name, description, isActive, priority } = req.body;
+
+    const repository = await prisma.repository.update({
+      where: { id: repositoryId },
+      data: {
+        ...(name && { name }),
+        ...(description !== undefined && { description }),
+        ...(isActive !== undefined && { isActive }),
+        ...(priority !== undefined && { priority })
+      },
+      include: {
+        _count: {
+          select: {
+            hostRepositories: true
+          }
+        }
+      }
+    });
+
+    res.json(repository);
+  } catch (error) {
+    console.error('Repository update error:', error);
+    res.status(500).json({ error: 'Failed to update repository' });
+  }
+});
+
+// Toggle repository status for a specific host
+router.patch('/host/:hostId/repository/:repositoryId', authenticateToken, requireManageHosts, [
+  body('isEnabled').isBoolean().withMessage('isEnabled must be a boolean')
+], async (req, res) => {
+  try {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) {
+      return res.status(400).json({ errors: errors.array() });
+    }
+
+    const { hostId, repositoryId } = req.params;
+    const { isEnabled } = req.body;
+
+    const hostRepository = await prisma.hostRepository.update({
+      where: {
+        hostId_repositoryId: {
+          hostId,
+          repositoryId
+        }
+      },
+      data: {
+        isEnabled,
+        lastChecked: new Date()
+      },
+      include: {
+        repository: true,
+        host: {
+          select: {
+            hostname: true
+          }
+        }
+      }
+    });
+
+    res.json({
+      message: `Repository ${isEnabled ? 'enabled' : 'disabled'} for host ${hostRepository.host.hostname}`,
+      hostRepository
+    });
+  } catch (error) {
+    console.error('Host repository toggle error:', error);
+    res.status(500).json({ error: 'Failed to toggle repository status' });
+  }
+});
+
+// Get repository statistics
+router.get('/stats/summary', authenticateToken, requireViewHosts, async (req, res) => {
+  try {
+    const stats = await prisma.repository.aggregate({
+      _count: true
+    });
+
+    const hostRepoStats = await prisma.hostRepository.aggregate({
+      _count: {
+        isEnabled: true
+      },
+      where: {
+        isEnabled: true
+      }
+    });
+
+    const secureRepos = await prisma.repository.count({
+      where: { isSecure: true }
+    });
+
+    const activeRepos = await prisma.repository.count({
+      where: { isActive: true }
+    });
+
+    res.json({
+      totalRepositories: stats._count,
+      activeRepositories: activeRepos,
+      secureRepositories: secureRepos,
+      enabledHostRepositories: hostRepoStats._count.isEnabled,
+      securityPercentage: stats._count > 0 ? Math.round((secureRepos / stats._count) * 100) : 0
+    });
+  } catch (error) {
+    console.error('Repository stats error:', error);
+    res.status(500).json({ error: 'Failed to fetch repository statistics' });
+  }
+});
+
+// Cleanup orphaned repositories (admin only)
+router.delete('/cleanup/orphaned', authenticateToken, requireManageHosts, async (req, res) => {
+  try {
+    console.log('Cleaning up orphaned repositories...');
+    
+    // Find repositories with no host relationships
+    const orphanedRepos = await prisma.repository.findMany({
+      where: {
+        hostRepositories: {
+          none: {}
+        }
+      }
+    });
+
+    if (orphanedRepos.length === 0) {
+      return res.json({
+        message: 'No orphaned repositories found',
+        deletedCount: 0,
+        deletedRepositories: []
+      });
+    }
+
+    // Delete orphaned repositories
+    const deleteResult = await prisma.repository.deleteMany({
+      where: {
+        hostRepositories: {
+          none: {}
+        }
+      }
+    });
+
+    console.log(`Deleted ${deleteResult.count} orphaned repositories`);
+
+    res.json({
+      message: `Successfully deleted ${deleteResult.count} orphaned repositories`,
+      deletedCount: deleteResult.count,
+      deletedRepositories: orphanedRepos.map(repo => ({
+        id: repo.id,
+        name: repo.name,
+        url: repo.url
+      }))
+    });
+  } catch (error) {
+    console.error('Repository cleanup error:', error);
+    res.status(500).json({ error: 'Failed to cleanup orphaned repositories' });
+  }
+});
+
+module.exports = router;
diff --git a/backend/src/routes/settingsRoutes.js b/backend/src/routes/settingsRoutes.js
new file mode 100644
index 0000000..9bba6c5
--- /dev/null
+++ b/backend/src/routes/settingsRoutes.js
@@ -0,0 +1,253 @@
+const express = require('express');
+const { body, validationResult } = require('express-validator');
+const { PrismaClient } = require('@prisma/client');
+const { authenticateToken } = require('../middleware/auth');
+const { requireManageSettings } = require('../middleware/permissions');
+
+const router = express.Router();
+const prisma = new PrismaClient();
+
+// Function to trigger crontab updates on all hosts with auto-update enabled
+async function triggerCrontabUpdates() {
+  try {
+    console.log('Triggering crontab updates on all hosts with auto-update enabled...');
+    
+    // Get all hosts that have auto-update enabled
+    const hosts = await prisma.host.findMany({
+      where: { 
+        autoUpdate: true,
+        status: 'active' // Only update active hosts
+      },
+      select: {
+        id: true,
+        hostname: true,
+        apiId: true,
+        apiKey: true
+      }
+    });
+    
+    console.log(`Found ${hosts.length} hosts with auto-update enabled`);
+    
+    // For each host, we'll send a special update command that triggers crontab update
+    // This is done by sending a ping with a special flag
+    for (const host of hosts) {
+      try {
+        console.log(`Triggering crontab update for host: ${host.hostname}`);
+        
+        // We'll use the existing ping endpoint but add a special parameter
+        // The agent will detect this and run update-crontab command
+        const http = require('http');
+        const https = require('https');
+        
+        const serverUrl = process.env.SERVER_URL || 'http://localhost:3001';
+        const url = new URL(`${serverUrl}/api/v1/hosts/ping`);
+        const isHttps = url.protocol === 'https:';
+        const client = isHttps ? https : http;
+        
+        const postData = JSON.stringify({
+          triggerCrontabUpdate: true,
+          message: 'Update interval changed, please update your crontab'
+        });
+        
+        const options = {
+          hostname: url.hostname,
+          port: url.port || (isHttps ? 443 : 80),
+          path: url.pathname,
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'Content-Length': Buffer.byteLength(postData),
+            'X-API-ID': host.apiId,
+            'X-API-KEY': host.apiKey
+          }
+        };
+        
+        const req = client.request(options, (res) => {
+          if (res.statusCode === 200) {
+            console.log(`Successfully triggered crontab update for ${host.hostname}`);
+          } else {
+            console.error(`Failed to trigger crontab update for ${host.hostname}: ${res.statusCode}`);
+          }
+        });
+        
+        req.on('error', (error) => {
+          console.error(`Error triggering crontab update for ${host.hostname}:`, error.message);
+        });
+        
+        req.write(postData);
+        req.end();
+      } catch (error) {
+        console.error(`Error triggering crontab update for ${host.hostname}:`, error.message);
+      }
+    }
+    
+    console.log('Crontab update trigger completed');
+  } catch (error) {
+    console.error('Error in triggerCrontabUpdates:', error);
+  }
+}
+
+// Get current settings
+router.get('/', authenticateToken, requireManageSettings, async (req, res) => {
+  try {
+    let settings = await prisma.settings.findFirst();
+    
+    // If no settings exist, create default settings
+    if (!settings) {
+      settings = await prisma.settings.create({
+        data: {
+          serverUrl: 'http://localhost:3001',
+          serverProtocol: 'http',
+          serverHost: 'localhost',
+          serverPort: 3001,
+          frontendUrl: 'http://localhost:3000',
+          updateInterval: 60,
+          autoUpdate: false
+        }
+      });
+    }
+    
+    console.log('Returning settings:', settings);
+    res.json(settings);
+  } catch (error) {
+    console.error('Settings fetch error:', error);
+    res.status(500).json({ error: 'Failed to fetch settings' });
+  }
+});
+
+// Update settings
+router.put('/', authenticateToken, requireManageSettings, [
+  body('serverProtocol').isIn(['http', 'https']).withMessage('Protocol must be http or https'),
+  body('serverHost').isLength({ min: 1 }).withMessage('Server host is required'),
+  body('serverPort').isInt({ min: 1, max: 65535 }).withMessage('Port must be between 1 and 65535'),
+  body('frontendUrl').isLength({ min: 1 }).withMessage('Frontend URL is required'),
+  body('updateInterval').isInt({ min: 5, max: 1440 }).withMessage('Update interval must be between 5 and 1440 minutes'),
+  body('autoUpdate').isBoolean().withMessage('Auto update must be a boolean')
+], async (req, res) => {
+  try {
+    console.log('Settings update request body:', req.body);
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) {
+      console.log('Validation errors:', errors.array());
+      return res.status(400).json({ errors: errors.array() });
+    }
+
+    const { serverProtocol, serverHost, serverPort, frontendUrl, updateInterval, autoUpdate } = req.body;
+    console.log('Extracted values:', { serverProtocol, serverHost, serverPort, frontendUrl, updateInterval, autoUpdate });
+    
+    // Construct server URL from components
+    const serverUrl = `${serverProtocol}://${serverHost}:${serverPort}`;
+    
+    let settings = await prisma.settings.findFirst();
+    
+    if (settings) {
+      // Update existing settings
+      console.log('Updating existing settings with data:', {
+        serverUrl,
+        serverProtocol,
+        serverHost,
+        serverPort,
+        frontendUrl,
+        updateInterval: updateInterval || 60,
+        autoUpdate: autoUpdate || false
+      });
+      const oldUpdateInterval = settings.updateInterval;
+      
+      settings = await prisma.settings.update({
+        where: { id: settings.id },
+        data: {
+          serverUrl,
+          serverProtocol,
+          serverHost,
+          serverPort,
+          frontendUrl,
+          updateInterval: updateInterval || 60,
+          autoUpdate: autoUpdate || false
+        }
+      });
+      console.log('Settings updated successfully:', settings);
+      
+      // If update interval changed, trigger crontab updates on all hosts with auto-update enabled
+      if (oldUpdateInterval !== (updateInterval || 60)) {
+        console.log(`Update interval changed from ${oldUpdateInterval} to ${updateInterval || 60} minutes. Triggering crontab updates...`);
+        await triggerCrontabUpdates();
+      }
+    } else {
+      // Create new settings
+      settings = await prisma.settings.create({
+        data: {
+          serverUrl,
+          serverProtocol,
+          serverHost,
+          serverPort,
+          frontendUrl,
+          updateInterval: updateInterval || 60,
+          autoUpdate: autoUpdate || false
+        }
+      });
+    }
+    
+    res.json({
+      message: 'Settings updated successfully',
+      settings
+    });
+  } catch (error) {
+    console.error('Settings update error:', error);
+    res.status(500).json({ error: 'Failed to update settings' });
+  }
+});
+
+// Get server URL for public use (used by installation scripts)
+router.get('/server-url', async (req, res) => {
+  try {
+    const settings = await prisma.settings.findFirst();
+    
+    if (!settings) {
+      return res.json({ serverUrl: 'http://localhost:3001' });
+    }
+    
+    res.json({ serverUrl: settings.serverUrl });
+  } catch (error) {
+    console.error('Server URL fetch error:', error);
+    res.json({ serverUrl: 'http://localhost:3001' });
+  }
+});
+
+// Get update interval policy for agents (public endpoint)
+router.get('/update-interval', async (req, res) => {
+  try {
+    const settings = await prisma.settings.findFirst();
+    
+    if (!settings) {
+      return res.json({ updateInterval: 60 });
+    }
+    
+    res.json({ 
+      updateInterval: settings.updateInterval,
+      cronExpression: `*/${settings.updateInterval} * * * *` // Generate cron expression
+    });
+  } catch (error) {
+    console.error('Update interval fetch error:', error);
+    res.json({ updateInterval: 60, cronExpression: '0 * * * *' });
+  }
+});
+
+// Get auto-update policy for agents (public endpoint)
+router.get('/auto-update', async (req, res) => {
+  try {
+    const settings = await prisma.settings.findFirst();
+    
+    if (!settings) {
+      return res.json({ autoUpdate: false });
+    }
+    
+    res.json({ 
+      autoUpdate: settings.autoUpdate || false
+    });
+  } catch (error) {
+    console.error('Auto-update fetch error:', error);
+    res.json({ autoUpdate: false });
+  }
+});
+
+module.exports = router;
diff --git a/backend/src/server.js b/backend/src/server.js
new file mode 100644
index 0000000..5c4d95a
--- /dev/null
+++ b/backend/src/server.js
@@ -0,0 +1,179 @@
+require('dotenv').config();
+const express = require('express');
+const cors = require('cors');
+const helmet = require('helmet');
+const rateLimit = require('express-rate-limit');
+const { PrismaClient } = require('@prisma/client');
+const winston = require('winston');
+
+// Import routes
+const authRoutes = require('./routes/authRoutes');
+const hostRoutes = require('./routes/hostRoutes');
+const hostGroupRoutes = require('./routes/hostGroupRoutes');
+const packageRoutes = require('./routes/packageRoutes');
+const dashboardRoutes = require('./routes/dashboardRoutes');
+const permissionsRoutes = require('./routes/permissionsRoutes');
+const settingsRoutes = require('./routes/settingsRoutes');
+const dashboardPreferencesRoutes = require('./routes/dashboardPreferencesRoutes');
+const repositoryRoutes = require('./routes/repositoryRoutes');
+
+// Initialize Prisma client
+const prisma = new PrismaClient();
+
+// Initialize logger - only if logging is enabled
+const logger = process.env.ENABLE_LOGGING === 'true' ? winston.createLogger({
+  level: process.env.LOG_LEVEL || 'info',
+  format: winston.format.combine(
+    winston.format.timestamp(),
+    winston.format.errors({ stack: true }),
+    winston.format.json()
+  ),
+  transports: [
+    new winston.transports.File({ filename: 'logs/error.log', level: 'error' }),
+    new winston.transports.File({ filename: 'logs/combined.log' }),
+  ],
+}) : {
+  info: () => {},
+  error: () => {},
+  warn: () => {},
+  debug: () => {}
+};
+
+if (process.env.ENABLE_LOGGING === 'true' && process.env.NODE_ENV !== 'production') {
+  logger.add(new winston.transports.Console({
+    format: winston.format.simple()
+  }));
+}
+
+const app = express();
+const PORT = process.env.PORT || 3001;
+
+// Trust proxy (needed when behind reverse proxy) and remove X-Powered-By
+if (process.env.TRUST_PROXY) {
+  app.set('trust proxy', process.env.TRUST_PROXY === 'true' ? 1 : parseInt(process.env.TRUST_PROXY, 10) || true);
+} else {
+  app.set('trust proxy', 1);
+}
+app.disable('x-powered-by');
+
+// Rate limiting
+const limiter = rateLimit({
+  windowMs: parseInt(process.env.RATE_LIMIT_WINDOW_MS) || 15 * 60 * 1000,
+  max: parseInt(process.env.RATE_LIMIT_MAX) || 100,
+  message: 'Too many requests from this IP, please try again later.',
+});
+
+// Middleware
+// Helmet with stricter defaults (CSP/HSTS only in production)
+app.use(helmet({
+  contentSecurityPolicy: process.env.NODE_ENV === 'production' ? {
+    useDefaults: true,
+    directives: {
+      defaultSrc: ["'self'"],
+      scriptSrc: ["'self'"],
+      styleSrc: ["'self'", "'unsafe-inline'"],
+      imgSrc: ["'self'", 'data:'],
+      fontSrc: ["'self'", 'data:'],
+      connectSrc: ["'self'"],
+      frameAncestors: ["'none'"],
+      objectSrc: ["'none'"]
+    }
+  } : false,
+  hsts: process.env.ENABLE_HSTS === 'true' || process.env.NODE_ENV === 'production'
+}));
+
+// CORS allowlist from comma-separated env
+const parseOrigins = (val) => (val || '').split(',').map(s => s.trim()).filter(Boolean);
+const allowedOrigins = parseOrigins(process.env.CORS_ORIGINS || process.env.CORS_ORIGIN || 'http://localhost:3000');
+app.use(cors({
+  origin: function(origin, callback) {
+    // Allow non-browser/SSR tools with no origin
+    if (!origin) return callback(null, true);
+    if (allowedOrigins.includes(origin)) return callback(null, true);
+    return callback(new Error('Not allowed by CORS'));
+  },
+  credentials: true
+}));
+app.use(limiter);
+// Reduce body size limits to reasonable defaults
+app.use(express.json({ limit: process.env.JSON_BODY_LIMIT || '5mb' }));
+app.use(express.urlencoded({ extended: true, limit: process.env.JSON_BODY_LIMIT || '5mb' }));
+
+// Request logging - only if logging is enabled
+if (process.env.ENABLE_LOGGING === 'true') {
+  app.use((req, res, next) => {
+    logger.info(`${req.method} ${req.path} - ${req.ip}`);
+    next();
+  });
+}
+
+// Health check endpoint
+app.get('/health', (req, res) => {
+  res.json({ status: 'ok', timestamp: new Date().toISOString() });
+});
+
+// API routes
+const apiVersion = process.env.API_VERSION || 'v1';
+
+// Per-route rate limits
+const authLimiter = rateLimit({
+  windowMs: parseInt(process.env.AUTH_RATE_LIMIT_WINDOW_MS) || 10 * 60 * 1000,
+  max: parseInt(process.env.AUTH_RATE_LIMIT_MAX) || 20
+});
+const agentLimiter = rateLimit({
+  windowMs: parseInt(process.env.AGENT_RATE_LIMIT_WINDOW_MS) || 60 * 1000,
+  max: parseInt(process.env.AGENT_RATE_LIMIT_MAX) || 120
+});
+
+app.use(`/api/${apiVersion}/auth`, authLimiter, authRoutes);
+app.use(`/api/${apiVersion}/hosts`, agentLimiter, hostRoutes);
+app.use(`/api/${apiVersion}/host-groups`, hostGroupRoutes);
+app.use(`/api/${apiVersion}/packages`, packageRoutes);
+app.use(`/api/${apiVersion}/dashboard`, dashboardRoutes);
+app.use(`/api/${apiVersion}/permissions`, permissionsRoutes);
+app.use(`/api/${apiVersion}/settings`, settingsRoutes);
+app.use(`/api/${apiVersion}/dashboard-preferences`, dashboardPreferencesRoutes);
+app.use(`/api/${apiVersion}/repositories`, repositoryRoutes);
+
+// Error handling middleware
+app.use((err, req, res, next) => {
+  if (process.env.ENABLE_LOGGING === 'true') {
+    logger.error(err.stack);
+  }
+  res.status(500).json({ 
+    error: 'Something went wrong!', 
+    message: process.env.NODE_ENV === 'development' ? err.message : undefined 
+  });
+});
+
+// 404 handler
+app.use('*', (req, res) => {
+  res.status(404).json({ error: 'Route not found' });
+});
+
+// Graceful shutdown
+process.on('SIGTERM', async () => {
+  if (process.env.ENABLE_LOGGING === 'true') {
+    logger.info('SIGTERM received, shutting down gracefully');
+  }
+  await prisma.$disconnect();
+  process.exit(0);
+});
+
+process.on('SIGINT', async () => {
+  if (process.env.ENABLE_LOGGING === 'true') {
+    logger.info('SIGINT received, shutting down gracefully');
+  }
+  await prisma.$disconnect();
+  process.exit(0);
+});
+
+// Start server
+app.listen(PORT, () => {
+  if (process.env.ENABLE_LOGGING === 'true') {
+    logger.info(`Server running on port ${PORT}`);
+    logger.info(`Environment: ${process.env.NODE_ENV}`);
+  }
+});
+
+module.exports = app; 
\ No newline at end of file
diff --git a/frontend/index.html b/frontend/index.html
new file mode 100644
index 0000000..b51290e
--- /dev/null
+++ b/frontend/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>PatchMon - Linux Patch Monitoring Dashboard</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html> 
\ No newline at end of file
diff --git a/frontend/package.json b/frontend/package.json
new file mode 100644
index 0000000..4a62453
--- /dev/null
+++ b/frontend/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "patchmon-frontend",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@tanstack/react-query": "^5.87.4",
+    "axios": "^1.6.2",
+    "chart.js": "^4.4.0",
+    "clsx": "^2.0.0",
+    "date-fns": "^2.30.0",
+    "lucide-react": "^0.294.0",
+    "react": "^18.2.0",
+    "react-chartjs-2": "^5.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.20.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@vitejs/plugin-react": "^4.3.3",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.53.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.4",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.3.6",
+    "vite": "^7.1.5"
+  },
+  "overrides": {
+    "esbuild": "^0.24.4"
+  }
+}
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
new file mode 100644
index 0000000..387612e
--- /dev/null
+++ b/frontend/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+} 
\ No newline at end of file
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
new file mode 100644
index 0000000..0ea9f5a
--- /dev/null
+++ b/frontend/src/App.jsx
@@ -0,0 +1,117 @@
+import React from 'react'
+import { Routes, Route } from 'react-router-dom'
+import { AuthProvider } from './contexts/AuthContext'
+import { ThemeProvider } from './contexts/ThemeContext'
+import ProtectedRoute from './components/ProtectedRoute'
+import Layout from './components/Layout'
+import Login from './pages/Login'
+import Dashboard from './pages/Dashboard'
+import Hosts from './pages/Hosts'
+import HostGroups from './pages/HostGroups'
+import Packages from './pages/Packages'
+import Repositories from './pages/Repositories'
+import RepositoryDetail from './pages/RepositoryDetail'
+import Users from './pages/Users'
+import Permissions from './pages/Permissions'
+import Settings from './pages/Settings'
+import Profile from './pages/Profile'
+import HostDetail from './pages/HostDetail'
+import PackageDetail from './pages/PackageDetail'
+
+function App() {
+  return (
+    <ThemeProvider>
+      <AuthProvider>
+        <Routes>
+        <Route path="/login" element={<Login />} />
+        <Route path="/" element={
+          <ProtectedRoute requirePermission="canViewDashboard">
+            <Layout>
+              <Dashboard />
+            </Layout>
+          </ProtectedRoute>
+        } />
+        <Route path="/hosts" element={
+          <ProtectedRoute requirePermission="canViewHosts">
+            <Layout>
+              <Hosts />
+            </Layout>
+          </ProtectedRoute>
+        } />
+        <Route path="/hosts/:hostId" element={
+          <ProtectedRoute requirePermission="canViewHosts">
+            <Layout>
+              <HostDetail />
+            </Layout>
+          </ProtectedRoute>
+        } />
+        <Route path="/host-groups" element={
+          <ProtectedRoute requirePermission="canManageHosts">
+            <Layout>
+              <HostGroups />
+            </Layout>
+          </ProtectedRoute>
+        } />
+        <Route path="/packages" element={
+          <ProtectedRoute requirePermission="canViewPackages">
+            <Layout>
+              <Packages />
+            </Layout>
+          </ProtectedRoute>
+        } />
+        <Route path="/repositories" element={
+          <ProtectedRoute requirePermission="canViewHosts">
+            <Layout>
+              <Repositories />
+            </Layout>
+          </ProtectedRoute>
+        } />
+        <Route path="/repositories/:repositoryId" element={
+          <ProtectedRoute requirePermission="canViewHosts">
+            <Layout>
+              <RepositoryDetail />
+            </Layout>
+          </ProtectedRoute>
+        } />
+        <Route path="/users" element={
+          <ProtectedRoute requirePermission="canViewUsers">
+            <Layout>
+              <Users />
+            </Layout>
+          </ProtectedRoute>
+        } />
+        <Route path="/permissions" element={
+          <ProtectedRoute requirePermission="canManageSettings">
+            <Layout>
+              <Permissions />
+            </Layout>
+          </ProtectedRoute>
+        } />
+        <Route path="/settings" element={
+          <ProtectedRoute requirePermission="canManageSettings">
+            <Layout>
+              <Settings />
+            </Layout>
+          </ProtectedRoute>
+        } />
+        <Route path="/profile" element={
+          <ProtectedRoute>
+            <Layout>
+              <Profile />
+            </Layout>
+          </ProtectedRoute>
+        } />
+        <Route path="/packages/:packageId" element={
+          <ProtectedRoute requirePermission="canViewPackages">
+            <Layout>
+              <PackageDetail />
+            </Layout>
+          </ProtectedRoute>
+        } />
+        </Routes>
+      </AuthProvider>
+    </ThemeProvider>
+  )
+}
+
+export default App 
\ No newline at end of file
diff --git a/frontend/src/components/DashboardSettingsModal.jsx b/frontend/src/components/DashboardSettingsModal.jsx
new file mode 100644
index 0000000..330b855
--- /dev/null
+++ b/frontend/src/components/DashboardSettingsModal.jsx
@@ -0,0 +1,306 @@
+import React, { useState, useEffect } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { 
+  DndContext, 
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import {
+  useSortable,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { 
+  X, 
+  GripVertical, 
+  Eye, 
+  EyeOff, 
+  Save, 
+  RotateCcw,
+  Settings as SettingsIcon
+} from 'lucide-react';
+import { dashboardPreferencesAPI } from '../utils/api';
+
+// Sortable Card Item Component
+const SortableCardItem = ({ card, onToggle }) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: card.cardId });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={`flex items-center justify-between p-3 bg-white border border-secondary-200 rounded-lg ${
+        isDragging ? 'shadow-lg' : 'shadow-sm'
+      }`}
+    >
+      <div className="flex items-center gap-3">
+        <button
+          {...attributes}
+          {...listeners}
+          className="text-secondary-400 hover:text-secondary-600 cursor-grab active:cursor-grabbing"
+        >
+          <GripVertical className="h-4 w-4" />
+        </button>
+        <div className="flex items-center gap-2">
+          <div className="text-sm font-medium text-secondary-900">
+            {card.title}
+          </div>
+        </div>
+      </div>
+      
+      <button
+        onClick={() => onToggle(card.cardId)}
+        className={`flex items-center gap-1 px-2 py-1 rounded text-xs font-medium transition-colors ${
+          card.enabled
+            ? 'bg-green-100 text-green-800 hover:bg-green-200'
+            : 'bg-secondary-100 text-secondary-600 hover:bg-secondary-200'
+        }`}
+      >
+        {card.enabled ? (
+          <>
+            <Eye className="h-3 w-3" />
+            Visible
+          </>
+        ) : (
+          <>
+            <EyeOff className="h-3 w-3" />
+            Hidden
+          </>
+        )}
+      </button>
+    </div>
+  );
+};
+
+const DashboardSettingsModal = ({ isOpen, onClose }) => {
+  const [cards, setCards] = useState([]);
+  const [hasChanges, setHasChanges] = useState(false);
+  const queryClient = useQueryClient();
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  // Fetch user's dashboard preferences
+  const { data: preferences, isLoading } = useQuery({
+    queryKey: ['dashboardPreferences'],
+    queryFn: () => dashboardPreferencesAPI.get().then(res => res.data),
+    enabled: isOpen
+  });
+
+  // Fetch default card configuration
+  const { data: defaultCards } = useQuery({
+    queryKey: ['dashboardDefaultCards'],
+    queryFn: () => dashboardPreferencesAPI.getDefaults().then(res => res.data),
+    enabled: isOpen
+  });
+
+  // Update preferences mutation
+  const updatePreferencesMutation = useMutation({
+    mutationFn: (preferences) => dashboardPreferencesAPI.update(preferences),
+    onSuccess: (response) => {
+      // Optimistically update the query cache with the correct data structure
+      queryClient.setQueryData(['dashboardPreferences'], response.data.preferences);
+      // Also invalidate to ensure fresh data
+      queryClient.invalidateQueries(['dashboardPreferences']);
+      setHasChanges(false);
+      onClose();
+    },
+    onError: (error) => {
+      console.error('Failed to update dashboard preferences:', error);
+    }
+  });
+
+  // Initialize cards when preferences or defaults are loaded
+  useEffect(() => {
+    if (preferences && defaultCards) {
+      // Merge user preferences with default cards
+      const mergedCards = defaultCards.map(defaultCard => {
+        const userPreference = preferences.find(p => p.cardId === defaultCard.cardId);
+        return {
+          ...defaultCard,
+          enabled: userPreference ? userPreference.enabled : defaultCard.enabled,
+          order: userPreference ? userPreference.order : defaultCard.order
+        };
+      }).sort((a, b) => a.order - b.order);
+      
+      setCards(mergedCards);
+    }
+  }, [preferences, defaultCards]);
+
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+
+    if (active.id !== over.id) {
+      setCards((items) => {
+        const oldIndex = items.findIndex(item => item.cardId === active.id);
+        const newIndex = items.findIndex(item => item.cardId === over.id);
+        
+        const newItems = arrayMove(items, oldIndex, newIndex);
+        
+        // Update order values
+        return newItems.map((item, index) => ({
+          ...item,
+          order: index
+        }));
+      });
+      setHasChanges(true);
+    }
+  };
+
+  const handleToggle = (cardId) => {
+    setCards(prevCards => 
+      prevCards.map(card => 
+        card.cardId === cardId 
+          ? { ...card, enabled: !card.enabled }
+          : card
+      )
+    );
+    setHasChanges(true);
+  };
+
+  const handleSave = () => {
+    const preferences = cards.map(card => ({
+      cardId: card.cardId,
+      enabled: card.enabled,
+      order: card.order
+    }));
+    
+    updatePreferencesMutation.mutate(preferences);
+  };
+
+  const handleReset = () => {
+    if (defaultCards) {
+      const resetCards = defaultCards.map(card => ({
+        ...card,
+        enabled: true,
+        order: card.order
+      }));
+      setCards(resetCards);
+      setHasChanges(true);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 overflow-y-auto">
+      <div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+        <div className="fixed inset-0 bg-secondary-500 bg-opacity-75 transition-opacity" onClick={onClose} />
+        
+        <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
+          <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+            <div className="flex items-center justify-between mb-4">
+              <div className="flex items-center gap-2">
+                <SettingsIcon className="h-5 w-5 text-primary-600" />
+                <h3 className="text-lg font-medium text-secondary-900">
+                  Dashboard Settings
+                </h3>
+              </div>
+              <button
+                onClick={onClose}
+                className="text-secondary-400 hover:text-secondary-600"
+              >
+                <X className="h-5 w-5" />
+              </button>
+            </div>
+            
+            <p className="text-sm text-secondary-600 mb-6">
+              Customize your dashboard by reordering cards and toggling their visibility. 
+              Drag cards to reorder them, and click the visibility toggle to show/hide cards.
+            </p>
+
+            {isLoading ? (
+              <div className="flex items-center justify-center py-8">
+                <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary-600"></div>
+              </div>
+            ) : (
+              <DndContext
+                sensors={sensors}
+                collisionDetection={closestCenter}
+                onDragEnd={handleDragEnd}
+              >
+                <SortableContext items={cards.map(card => card.cardId)} strategy={verticalListSortingStrategy}>
+                  <div className="space-y-2 max-h-96 overflow-y-auto">
+                    {cards.map((card) => (
+                      <SortableCardItem
+                        key={card.cardId}
+                        card={card}
+                        onToggle={handleToggle}
+                      />
+                    ))}
+                  </div>
+                </SortableContext>
+              </DndContext>
+            )}
+          </div>
+          
+          <div className="bg-secondary-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+            <button
+              onClick={handleSave}
+              disabled={!hasChanges || updatePreferencesMutation.isPending}
+              className={`w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium text-white sm:ml-3 sm:w-auto sm:text-sm ${
+                !hasChanges || updatePreferencesMutation.isPending
+                  ? 'bg-secondary-400 cursor-not-allowed'
+                  : 'bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'
+              }`}
+            >
+              {updatePreferencesMutation.isPending ? (
+                <>
+                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+                  Saving...
+                </>
+              ) : (
+                <>
+                  <Save className="h-4 w-4 mr-2" />
+                  Save Changes
+                </>
+              )}
+            </button>
+            
+            <button
+              onClick={handleReset}
+              className="mt-3 w-full inline-flex justify-center rounded-md border border-secondary-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-secondary-700 hover:bg-secondary-50 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            >
+              <RotateCcw className="h-4 w-4 mr-2" />
+              Reset to Defaults
+            </button>
+            
+            <button
+              onClick={onClose}
+              className="mt-3 w-full inline-flex justify-center rounded-md border border-secondary-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-secondary-700 hover:bg-secondary-50 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DashboardSettingsModal;
diff --git a/frontend/src/components/Layout.jsx b/frontend/src/components/Layout.jsx
new file mode 100644
index 0000000..57593f3
--- /dev/null
+++ b/frontend/src/components/Layout.jsx
@@ -0,0 +1,439 @@
+import React from 'react'
+import { Link, useLocation } from 'react-router-dom'
+import { 
+  Home, 
+  Server, 
+  Package, 
+  Shield, 
+  BarChart3,
+  Menu,
+  X,
+  LogOut,
+  User,
+  Users,
+  Settings,
+  UserCircle,
+  ChevronLeft,
+  ChevronRight,
+  Clock,
+  RefreshCw,
+  GitBranch,
+  Wrench
+} from 'lucide-react'
+import { useState, useEffect, useRef } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { useAuth } from '../contexts/AuthContext'
+import { dashboardAPI, formatRelativeTime } from '../utils/api'
+
+const Layout = ({ children }) => {
+  const [sidebarOpen, setSidebarOpen] = useState(false)
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
+    // Load sidebar state from localStorage, default to false
+    const saved = localStorage.getItem('sidebarCollapsed')
+    return saved ? JSON.parse(saved) : false
+  })
+  const [userMenuOpen, setUserMenuOpen] = useState(false)
+  const location = useLocation()
+  const { user, logout, canViewHosts, canManageHosts, canViewPackages, canViewUsers, canManageUsers, canManageSettings } = useAuth()
+  const userMenuRef = useRef(null)
+
+  // Fetch dashboard stats for the "Last updated" info
+  const { data: stats, refetch } = useQuery({
+    queryKey: ['dashboardStats'],
+    queryFn: () => dashboardAPI.getStats().then(res => res.data),
+    refetchInterval: 60000, // Refresh every minute
+    staleTime: 30000, // Consider data stale after 30 seconds
+  })
+
+  const navigation = [
+    { name: 'Dashboard', href: '/', icon: Home },
+    {
+      section: 'Inventory',
+      items: [
+        ...(canViewHosts() ? [{ name: 'Hosts', href: '/hosts', icon: Server }] : []),
+        ...(canManageHosts() ? [{ name: 'Host Groups', href: '/host-groups', icon: Users }] : []),
+        ...(canViewPackages() ? [{ name: 'Packages', href: '/packages', icon: Package }] : []),
+        ...(canViewHosts() ? [{ name: 'Repos', href: '/repositories', icon: GitBranch }] : []),
+        { name: 'Services', href: '/services', icon: Wrench, comingSoon: true },
+        { name: 'Reporting', href: '/reporting', icon: BarChart3, comingSoon: true },
+      ]
+    },
+    {
+      section: 'Users',
+      items: [
+        ...(canViewUsers() ? [{ name: 'Users', href: '/users', icon: Users }] : []),
+        ...(canManageSettings() ? [{ name: 'Permissions', href: '/permissions', icon: Shield }] : []),
+      ]
+    },
+    {
+      section: 'Settings',
+      items: [
+        ...(canManageSettings() ? [{ name: 'Settings', href: '/settings', icon: Settings }] : []),
+      ]
+    }
+  ]
+
+  const isActive = (path) => location.pathname === path
+
+  // Get page title based on current route
+  const getPageTitle = () => {
+    const path = location.pathname
+    
+    if (path === '/') return 'Dashboard'
+    if (path === '/hosts') return 'Hosts'
+    if (path === '/host-groups') return 'Host Groups'
+    if (path === '/packages') return 'Packages'
+    if (path === '/repositories' || path.startsWith('/repositories/')) return 'Repositories'
+    if (path === '/services') return 'Services'
+    if (path === '/users') return 'Users'
+    if (path === '/permissions') return 'Permissions'
+    if (path === '/settings') return 'Settings'
+    if (path === '/profile') return 'My Profile'
+    if (path.startsWith('/hosts/')) return 'Host Details'
+    if (path.startsWith('/packages/')) return 'Package Details'
+    
+    return 'PatchMon'
+  }
+
+  const handleLogout = async () => {
+    await logout()
+    setUserMenuOpen(false)
+  }
+
+  // Save sidebar collapsed state to localStorage
+  useEffect(() => {
+    localStorage.setItem('sidebarCollapsed', JSON.stringify(sidebarCollapsed))
+  }, [sidebarCollapsed])
+
+  // Close user menu when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (userMenuRef.current && !userMenuRef.current.contains(event.target)) {
+        setUserMenuOpen(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [])
+
+  return (
+    <div className="min-h-screen bg-secondary-50">
+      {/* Mobile sidebar */}
+      <div className={`fixed inset-0 z-50 lg:hidden ${sidebarOpen ? 'block' : 'hidden'}`}>
+        <div className="fixed inset-0 bg-secondary-600 bg-opacity-75" onClick={() => setSidebarOpen(false)} />
+        <div className="relative flex w-full max-w-xs flex-col bg-white pb-4 pt-5 shadow-xl">
+          <div className="absolute right-0 top-0 -mr-12 pt-2">
+            <button
+              type="button"
+              className="ml-1 flex h-10 w-10 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
+              onClick={() => setSidebarOpen(false)}
+            >
+              <X className="h-6 w-6 text-white" />
+            </button>
+          </div>
+          <div className="flex flex-shrink-0 items-center px-4">
+            <div className="flex items-center">
+              <Shield className="h-8 w-8 text-primary-600" />
+              <h1 className="ml-2 text-xl font-bold text-secondary-900 dark:text-white">PatchMon</h1>
+            </div>
+          </div>
+          <nav className="mt-8 flex-1 space-y-6 px-2">
+            {navigation.map((item, index) => {
+              if (item.name) {
+                // Single item (Dashboard)
+                return (
+                  <Link
+                    key={item.name}
+                    to={item.href}
+                    className={`group flex items-center px-2 py-2 text-sm font-medium rounded-md ${
+                      isActive(item.href)
+                        ? 'bg-primary-100 text-primary-900'
+                        : 'text-secondary-600 hover:bg-secondary-50 hover:text-secondary-900'
+                    }`}
+                    onClick={() => setSidebarOpen(false)}
+                  >
+                    <item.icon className="mr-3 h-5 w-5" />
+                    {item.name}
+                  </Link>
+                )
+              } else if (item.section) {
+                // Section with items
+                return (
+                  <div key={item.section}>
+                    <h3 className="text-xs font-semibold text-secondary-500 uppercase tracking-wider mb-2 px-2">
+                      {item.section}
+                    </h3>
+                    <div className="space-y-1">
+                      {item.items.map((subItem) => (
+                        <Link
+                          key={subItem.name}
+                          to={subItem.href}
+                          className={`group flex items-center px-2 py-2 text-sm font-medium rounded-md ${
+                            isActive(subItem.href)
+                              ? 'bg-primary-100 text-primary-900'
+                              : 'text-secondary-600 hover:bg-secondary-50 hover:text-secondary-900'
+                          } ${subItem.comingSoon ? 'opacity-50 cursor-not-allowed' : ''}`}
+                          onClick={subItem.comingSoon ? (e) => e.preventDefault() : () => setSidebarOpen(false)}
+                        >
+                          <subItem.icon className="mr-3 h-5 w-5" />
+                          <span className="flex items-center gap-2">
+                            {subItem.name}
+                            {subItem.comingSoon && (
+                              <span className="text-xs bg-secondary-100 text-secondary-600 px-1.5 py-0.5 rounded">
+                                Soon
+                              </span>
+                            )}
+                          </span>
+                        </Link>
+                      ))}
+                    </div>
+                  </div>
+                )
+              }
+              return null
+            })}
+          </nav>
+        </div>
+      </div>
+
+      {/* Desktop sidebar */}
+      <div className={`hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:flex-col transition-all duration-300 ${
+        sidebarCollapsed ? 'lg:w-16' : 'lg:w-64'
+      } bg-white dark:bg-secondary-800`}>
+        <div className={`flex grow flex-col gap-y-5 overflow-y-auto border-r border-secondary-200 dark:border-secondary-600 bg-white dark:bg-secondary-800 ${
+          sidebarCollapsed ? 'px-2 shadow-lg' : 'px-6'
+        }`}>
+          <div className={`flex h-16 shrink-0 items-center border-b border-secondary-200 ${
+            sidebarCollapsed ? 'justify-center' : 'justify-between'
+          }`}>
+            {sidebarCollapsed ? (
+              <button
+                onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
+                className="flex items-center justify-center w-8 h-8 rounded-md hover:bg-secondary-100 transition-colors"
+                title="Expand sidebar"
+              >
+                <ChevronRight className="h-5 w-5 text-white" />
+              </button>
+            ) : (
+              <>
+                <div className="flex items-center">
+                  <Shield className="h-8 w-8 text-primary-600" />
+                  <h1 className="ml-2 text-xl font-bold text-secondary-900 dark:text-white">PatchMon</h1>
+                </div>
+                <button
+                  onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
+                  className="flex items-center justify-center w-8 h-8 rounded-md hover:bg-secondary-100 transition-colors"
+                  title="Collapse sidebar"
+                >
+                  <ChevronLeft className="h-5 w-5 text-white" />
+                </button>
+              </>
+            )}
+          </div>
+          <nav className="flex flex-1 flex-col">
+            <ul className="flex flex-1 flex-col gap-y-6">
+              {navigation.map((item, index) => {
+                if (item.name) {
+                  // Single item (Dashboard)
+                  return (
+                    <li key={item.name}>
+                      <Link
+                        to={item.href}
+                        className={`group flex gap-x-3 rounded-md text-sm leading-6 font-semibold transition-all duration-200 ${
+                          isActive(item.href)
+                            ? 'bg-primary-50 dark:bg-primary-600 text-primary-700 dark:text-white'
+                            : 'text-secondary-700 dark:text-secondary-200 hover:text-primary-700 dark:hover:text-primary-300 hover:bg-secondary-50 dark:hover:bg-secondary-700'
+                        } ${sidebarCollapsed ? 'justify-center p-2' : 'p-2'}`}
+                        title={sidebarCollapsed ? item.name : ''}
+                      >
+                        <item.icon className={`h-5 w-5 shrink-0 ${sidebarCollapsed ? 'mx-auto' : ''}`} />
+                        {!sidebarCollapsed && (
+                          <span className="truncate">{item.name}</span>
+                        )}
+                      </Link>
+                    </li>
+                  )
+                } else if (item.section) {
+                  // Section with items
+                  return (
+                    <li key={item.section}>
+                      {!sidebarCollapsed && (
+                        <h3 className="text-xs font-semibold text-secondary-500 dark:text-secondary-300 uppercase tracking-wider mb-2 px-2">
+                          {item.section}
+                        </h3>
+                      )}
+                      <ul className={`space-y-1 ${sidebarCollapsed ? '' : '-mx-2'}`}>
+                        {item.items.map((subItem) => (
+                          <li key={subItem.name}>
+                            <Link
+                              to={subItem.href}
+                              className={`group flex gap-x-3 rounded-md text-sm leading-6 font-medium transition-all duration-200 ${
+                                isActive(subItem.href)
+                                  ? 'bg-primary-50 dark:bg-primary-600 text-primary-700 dark:text-white'
+                                  : 'text-secondary-700 dark:text-secondary-200 hover:text-primary-700 dark:hover:text-primary-300 hover:bg-secondary-50 dark:hover:bg-secondary-700'
+                              } ${sidebarCollapsed ? 'justify-center p-2' : 'p-2'} ${
+                                subItem.comingSoon ? 'opacity-50 cursor-not-allowed' : ''
+                              }`}
+                              title={sidebarCollapsed ? subItem.name : ''}
+                              onClick={subItem.comingSoon ? (e) => e.preventDefault() : undefined}
+                            >
+                              <subItem.icon className={`h-5 w-5 shrink-0 ${sidebarCollapsed ? 'mx-auto' : ''}`} />
+                              {!sidebarCollapsed && (
+                                <span className="truncate flex items-center gap-2">
+                                  {subItem.name}
+                                  {subItem.comingSoon && (
+                                    <span className="text-xs bg-secondary-100 text-secondary-600 px-1.5 py-0.5 rounded">
+                                      Soon
+                                    </span>
+                                  )}
+                                </span>
+                              )}
+                            </Link>
+                          </li>
+                        ))}
+                      </ul>
+                    </li>
+                  )
+                }
+                return null
+              })}
+            </ul>
+          </nav>
+          
+          {/* Profile Section - Bottom of Sidebar */}
+          <div className="border-t border-secondary-200">
+            {!sidebarCollapsed ? (
+              <div className="space-y-1">
+                {/* My Profile Link */}
+                <Link
+                  to="/profile"
+                  className={`group flex gap-x-3 rounded-md text-sm leading-6 font-medium transition-all duration-200 p-2 ${
+                    isActive('/profile')
+                      ? 'bg-primary-50 dark:bg-primary-600 text-primary-700 dark:text-white'
+                      : 'text-secondary-700 dark:text-secondary-200 hover:text-primary-700 dark:hover:text-primary-300 hover:bg-secondary-50 dark:hover:bg-secondary-500'
+                  }`}
+                >
+                  <UserCircle className="h-5 w-5 shrink-0" />
+                  <span className="truncate">My Profile</span>
+                </Link>
+                
+                {/* User Info with Sign Out */}
+                <div className="flex items-center justify-between p-2">
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-x-2">
+                      <p className="text-sm font-medium text-secondary-900 dark:text-white truncate">
+                        {user?.username}
+                      </p>
+                      {user?.role === 'admin' && (
+                        <span className="inline-flex items-center rounded-full bg-primary-100 px-1.5 py-0.5 text-xs font-medium text-primary-800">
+                          Admin
+                        </span>
+                      )}
+                    </div>
+                    <p className="text-xs text-secondary-500 dark:text-secondary-300 truncate">
+                      {user?.email}
+                    </p>
+                  </div>
+                  <button
+                    onClick={handleLogout}
+                    className="ml-2 p-1.5 text-secondary-400 hover:text-secondary-600 hover:bg-secondary-100 rounded transition-colors"
+                    title="Sign out"
+                  >
+                    <LogOut className="h-4 w-4" />
+                  </button>
+                </div>
+              </div>
+            ) : (
+              <div className="space-y-1">
+                <Link
+                  to="/profile"
+                  className="flex items-center justify-center p-2 text-secondary-700 hover:bg-secondary-50 rounded-md transition-colors"
+                  title="My Profile"
+                >
+                  <UserCircle className="h-5 w-5 text-white" />
+                </Link>
+                <button
+                  onClick={handleLogout}
+                  className="flex items-center justify-center w-full p-2 text-secondary-700 hover:bg-secondary-50 rounded-md transition-colors"
+                  title="Sign out"
+                >
+                  <LogOut className="h-5 w-5 text-white" />
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Main content */}
+      <div className={`transition-all duration-300 ${
+        sidebarCollapsed ? 'lg:pl-16' : 'lg:pl-64'
+      }`}>
+        {/* Top bar */}
+        <div className="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-secondary-200 dark:border-secondary-600 bg-white dark:bg-secondary-800 px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8">
+          <button
+            type="button"
+            className="-m-2.5 p-2.5 text-secondary-700 lg:hidden"
+            onClick={() => setSidebarOpen(true)}
+          >
+            <Menu className="h-6 w-6" />
+          </button>
+
+          {/* Separator */}
+          <div className="h-6 w-px bg-secondary-200 lg:hidden" />
+
+          <div className="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
+            <div className="relative flex flex-1 items-center">
+              <h2 className="text-lg font-semibold text-secondary-900 dark:text-secondary-100">
+                {getPageTitle()}
+              </h2>
+            </div>
+            <div className="flex items-center gap-x-4 lg:gap-x-6">
+
+              {/* Last updated info */}
+              {stats && (
+                <div className="flex items-center gap-x-2 text-sm text-secondary-500 dark:text-secondary-400">
+                  <Clock className="h-4 w-4" />
+                  <span>Last updated: {formatRelativeTime(stats.lastUpdated)}</span>
+                  <button
+                    onClick={() => refetch()}
+                    className="p-1 hover:bg-secondary-100 dark:hover:bg-secondary-800 rounded"
+                    title="Refresh data"
+                  >
+                    <RefreshCw className="h-4 w-4" />
+                  </button>
+                </div>
+              )}
+              
+              {/* Customize Dashboard Button - Only show on Dashboard page */}
+              {location.pathname === '/' && (
+                <button
+                  onClick={() => {
+                    // This will be handled by the Dashboard component
+                    const event = new CustomEvent('openDashboardSettings');
+                    window.dispatchEvent(event);
+                  }}
+                  className="btn-outline flex items-center gap-2"
+                >
+                  <Settings className="h-4 w-4" />
+                  Customize Dashboard
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <main className="py-6 bg-secondary-50 dark:bg-secondary-800 min-h-screen">
+          <div className="px-4 sm:px-6 lg:px-8">
+            {children}
+          </div>
+        </main>
+      </div>
+    </div>
+  )
+}
+
+export default Layout 
\ No newline at end of file
diff --git a/frontend/src/components/ProtectedRoute.jsx b/frontend/src/components/ProtectedRoute.jsx
new file mode 100644
index 0000000..df3fb5c
--- /dev/null
+++ b/frontend/src/components/ProtectedRoute.jsx
@@ -0,0 +1,47 @@
+import React from 'react'
+import { Navigate } from 'react-router-dom'
+import { useAuth } from '../contexts/AuthContext'
+
+const ProtectedRoute = ({ children, requireAdmin = false, requirePermission = null }) => {
+  const { isAuthenticated, isAdmin, isLoading, hasPermission } = useAuth()
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
+      </div>
+    )
+  }
+
+  if (!isAuthenticated()) {
+    return <Navigate to="/login" replace />
+  }
+
+  // Check admin requirement
+  if (requireAdmin && !isAdmin()) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="text-center">
+          <h2 className="text-xl font-semibold text-secondary-900 mb-2">Access Denied</h2>
+          <p className="text-secondary-600">You don't have permission to access this page.</p>
+        </div>
+      </div>
+    )
+  }
+
+  // Check specific permission requirement
+  if (requirePermission && !hasPermission(requirePermission)) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="text-center">
+          <h2 className="text-xl font-semibold text-secondary-900 mb-2">Access Denied</h2>
+          <p className="text-secondary-600">You don't have permission to access this page.</p>
+        </div>
+      </div>
+    )
+  }
+
+  return children
+}
+
+export default ProtectedRoute
diff --git a/frontend/src/contexts/AuthContext.jsx b/frontend/src/contexts/AuthContext.jsx
new file mode 100644
index 0000000..11c5d7f
--- /dev/null
+++ b/frontend/src/contexts/AuthContext.jsx
@@ -0,0 +1,246 @@
+import React, { createContext, useContext, useState, useEffect } from 'react'
+
+const AuthContext = createContext()
+
+export const useAuth = () => {
+  const context = useContext(AuthContext)
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider')
+  }
+  return context
+}
+
+export const AuthProvider = ({ children }) => {
+  const [user, setUser] = useState(null)
+  const [token, setToken] = useState(null)
+  const [permissions, setPermissions] = useState(null)
+  const [isLoading, setIsLoading] = useState(true)
+
+  // Initialize auth state from localStorage
+  useEffect(() => {
+    const storedToken = localStorage.getItem('token')
+    const storedUser = localStorage.getItem('user')
+    const storedPermissions = localStorage.getItem('permissions')
+
+    if (storedToken && storedUser) {
+      try {
+        setToken(storedToken)
+        setUser(JSON.parse(storedUser))
+        if (storedPermissions) {
+          setPermissions(JSON.parse(storedPermissions))
+        } else {
+          // Fetch permissions if not stored
+          fetchPermissions(storedToken)
+        }
+      } catch (error) {
+        console.error('Error parsing stored user data:', error)
+        localStorage.removeItem('token')
+        localStorage.removeItem('user')
+        localStorage.removeItem('permissions')
+      }
+    }
+    setIsLoading(false)
+  }, [])
+
+  // Periodically refresh permissions when user is logged in
+  useEffect(() => {
+    if (token && user) {
+      // Refresh permissions every 30 seconds
+      const interval = setInterval(() => {
+        refreshPermissions()
+      }, 30000)
+
+      return () => clearInterval(interval)
+    }
+  }, [token, user])
+
+  const fetchPermissions = async (authToken) => {
+    try {
+      const response = await fetch('/api/v1/permissions/user-permissions', {
+        headers: {
+          'Authorization': `Bearer ${authToken}`,
+        },
+      })
+
+      if (response.ok) {
+        const data = await response.json()
+        setPermissions(data)
+        localStorage.setItem('permissions', JSON.stringify(data))
+        return data
+      } else {
+        console.error('Failed to fetch permissions')
+        return null
+      }
+    } catch (error) {
+      console.error('Error fetching permissions:', error)
+      return null
+    }
+  }
+
+  const refreshPermissions = async () => {
+    if (token) {
+      const updatedPermissions = await fetchPermissions(token)
+      return updatedPermissions
+    }
+    return null
+  }
+
+  const login = async (username, password) => {
+    try {
+      const response = await fetch('/api/v1/auth/login', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ username, password }),
+      })
+
+      const data = await response.json()
+
+      if (response.ok) {
+        setToken(data.token)
+        setUser(data.user)
+        localStorage.setItem('token', data.token)
+        localStorage.setItem('user', JSON.stringify(data.user))
+        
+        // Fetch user permissions after successful login
+        const userPermissions = await fetchPermissions(data.token)
+        if (userPermissions) {
+          setPermissions(userPermissions)
+        }
+        
+        return { success: true }
+      } else {
+        return { success: false, error: data.error || 'Login failed' }
+      }
+    } catch (error) {
+      return { success: false, error: 'Network error occurred' }
+    }
+  }
+
+  const logout = async () => {
+    try {
+      if (token) {
+        await fetch('/api/v1/auth/logout', {
+          method: 'POST',
+          headers: {
+            'Authorization': `Bearer ${token}`,
+            'Content-Type': 'application/json',
+          },
+        })
+      }
+    } catch (error) {
+      console.error('Logout error:', error)
+    } finally {
+      setToken(null)
+      setUser(null)
+      setPermissions(null)
+      localStorage.removeItem('token')
+      localStorage.removeItem('user')
+      localStorage.removeItem('permissions')
+    }
+  }
+
+  const updateProfile = async (profileData) => {
+    try {
+      const response = await fetch('/api/v1/auth/profile', {
+        method: 'PUT',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(profileData),
+      })
+
+      const data = await response.json()
+
+      if (response.ok) {
+        setUser(data.user)
+        localStorage.setItem('user', JSON.stringify(data.user))
+        return { success: true, user: data.user }
+      } else {
+        return { success: false, error: data.error || 'Update failed' }
+      }
+    } catch (error) {
+      return { success: false, error: 'Network error occurred' }
+    }
+  }
+
+  const changePassword = async (currentPassword, newPassword) => {
+    try {
+      const response = await fetch('/api/v1/auth/change-password', {
+        method: 'PUT',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ currentPassword, newPassword }),
+      })
+
+      const data = await response.json()
+
+      if (response.ok) {
+        return { success: true }
+      } else {
+        return { success: false, error: data.error || 'Password change failed' }
+      }
+    } catch (error) {
+      return { success: false, error: 'Network error occurred' }
+    }
+  }
+
+  const isAuthenticated = () => {
+    return !!(token && user)
+  }
+
+  const isAdmin = () => {
+    return user?.role === 'admin'
+  }
+
+  // Permission checking functions
+  const hasPermission = (permission) => {
+    return permissions?.[permission] === true
+  }
+
+  const canViewDashboard = () => hasPermission('canViewDashboard')
+  const canViewHosts = () => hasPermission('canViewHosts')
+  const canManageHosts = () => hasPermission('canManageHosts')
+  const canViewPackages = () => hasPermission('canViewPackages')
+  const canManagePackages = () => hasPermission('canManagePackages')
+  const canViewUsers = () => hasPermission('canViewUsers')
+  const canManageUsers = () => hasPermission('canManageUsers')
+  const canViewReports = () => hasPermission('canViewReports')
+  const canExportData = () => hasPermission('canExportData')
+  const canManageSettings = () => hasPermission('canManageSettings')
+
+  const value = {
+    user,
+    token,
+    permissions,
+    isLoading,
+    login,
+    logout,
+    updateProfile,
+    changePassword,
+    refreshPermissions,
+    isAuthenticated,
+    isAdmin,
+    hasPermission,
+    canViewDashboard,
+    canViewHosts,
+    canManageHosts,
+    canViewPackages,
+    canManagePackages,
+    canViewUsers,
+    canManageUsers,
+    canViewReports,
+    canExportData,
+    canManageSettings
+  }
+
+  return (
+    <AuthContext.Provider value={value}>
+      {children}
+    </AuthContext.Provider>
+  )
+}
diff --git a/frontend/src/contexts/ThemeContext.jsx b/frontend/src/contexts/ThemeContext.jsx
new file mode 100644
index 0000000..a289b3c
--- /dev/null
+++ b/frontend/src/contexts/ThemeContext.jsx
@@ -0,0 +1,54 @@
+import React, { createContext, useContext, useEffect, useState } from 'react'
+
+const ThemeContext = createContext()
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext)
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider')
+  }
+  return context
+}
+
+export const ThemeProvider = ({ children }) => {
+  const [theme, setTheme] = useState(() => {
+    // Check localStorage first, then system preference
+    const savedTheme = localStorage.getItem('theme')
+    if (savedTheme) {
+      return savedTheme
+    }
+    // Check system preference
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      return 'dark'
+    }
+    return 'light'
+  })
+
+  useEffect(() => {
+    // Apply theme to document
+    if (theme === 'dark') {
+      document.documentElement.classList.add('dark')
+    } else {
+      document.documentElement.classList.remove('dark')
+    }
+    
+    // Save to localStorage
+    localStorage.setItem('theme', theme)
+  }, [theme])
+
+  const toggleTheme = () => {
+    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light')
+  }
+
+  const value = {
+    theme,
+    toggleTheme,
+    isDark: theme === 'dark'
+  }
+
+  return (
+    <ThemeContext.Provider value={value}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
new file mode 100644
index 0000000..43fafdb
--- /dev/null
+++ b/frontend/src/index.css
@@ -0,0 +1,127 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    font-family: Inter, ui-sans-serif, system-ui;
+  }
+  
+  body {
+    @apply bg-secondary-50 dark:bg-secondary-800 text-secondary-900 dark:text-secondary-100 antialiased;
+  }
+}
+
+@layer components {
+  .btn {
+    @apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors duration-150;
+  }
+  
+  .btn-primary {
+    @apply btn bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
+  }
+  
+  .btn-secondary {
+    @apply btn bg-secondary-600 text-white hover:bg-secondary-700 focus:ring-secondary-500;
+  }
+  
+  .btn-success {
+    @apply btn bg-success-600 text-white hover:bg-success-700 focus:ring-success-500;
+  }
+  
+  .btn-warning {
+    @apply btn bg-warning-600 text-white hover:bg-warning-700 focus:ring-warning-500;
+  }
+  
+  .btn-danger {
+    @apply btn bg-danger-600 text-white hover:bg-danger-700 focus:ring-danger-500;
+  }
+  
+  .btn-outline {
+    @apply btn border-secondary-300 dark:border-secondary-600 text-secondary-700 dark:text-secondary-200 bg-white dark:bg-secondary-800 hover:bg-secondary-50 dark:hover:bg-secondary-700 focus:ring-secondary-500;
+  }
+  
+  .card {
+    @apply bg-white dark:bg-secondary-800 rounded-lg shadow-card dark:shadow-card-dark border border-secondary-200 dark:border-secondary-600;
+  }
+  
+  .card-hover {
+    @apply card hover:shadow-card-hover transition-shadow duration-150;
+  }
+  
+  .input {
+    @apply block w-full px-3 py-2 border border-secondary-300 dark:border-secondary-600 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm bg-white dark:bg-secondary-800 text-secondary-900 dark:text-secondary-100;
+  }
+  
+  .label {
+    @apply block text-sm font-medium text-secondary-700 dark:text-secondary-200;
+  }
+  
+  .badge {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
+  }
+  
+  .badge-primary {
+    @apply badge bg-primary-100 text-primary-800;
+  }
+  
+  .badge-secondary {
+    @apply badge bg-secondary-100 text-secondary-800;
+  }
+  
+  .badge-success {
+    @apply badge bg-success-100 text-success-800;
+  }
+  
+  .badge-warning {
+    @apply badge bg-warning-100 text-warning-800;
+  }
+  
+  .badge-danger {
+    @apply badge bg-danger-100 text-danger-800;
+  }
+}
+
+@layer utilities {
+  .text-shadow {
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  }
+  
+  .scrollbar-thin {
+    scrollbar-width: thin;
+    scrollbar-color: #cbd5e1 #f1f5f9;
+  }
+  
+  .dark .scrollbar-thin {
+    scrollbar-color: #64748b #475569;
+  }
+  
+  .scrollbar-thin::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  .scrollbar-thin::-webkit-scrollbar-track {
+    background: #f1f5f9;
+  }
+  
+  .dark .scrollbar-thin::-webkit-scrollbar-track {
+    background: #475569;
+  }
+  
+  .scrollbar-thin::-webkit-scrollbar-thumb {
+    background-color: #cbd5e1;
+    border-radius: 3px;
+  }
+  
+  .dark .scrollbar-thin::-webkit-scrollbar-thumb {
+    background-color: #64748b;
+  }
+  
+  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+    background-color: #94a3b8;
+  }
+  
+  .dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+    background-color: #94a3b8;
+  }
+} 
\ No newline at end of file
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
new file mode 100644
index 0000000..a1e2515
--- /dev/null
+++ b/frontend/src/main.jsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import App from './App.jsx'
+import './index.css'
+
+// Create a client for React Query
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: 1,
+      staleTime: 5 * 60 * 1000, // 5 minutes
+    },
+  },
+})
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <QueryClientProvider client={queryClient}>
+        <App />
+      </QueryClientProvider>
+    </BrowserRouter>
+  </React.StrictMode>,
+) 
\ No newline at end of file
diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx
new file mode 100644
index 0000000..be63256
--- /dev/null
+++ b/frontend/src/pages/Dashboard.jsx
@@ -0,0 +1,460 @@
+import React, { useState, useEffect } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { useNavigate } from 'react-router-dom'
+import { 
+  Server, 
+  Package, 
+  AlertTriangle, 
+  Shield, 
+  TrendingUp,
+  RefreshCw,
+  Clock
+} from 'lucide-react'
+import { Chart as ChartJS, ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement, Title } from 'chart.js'
+import { Pie, Bar } from 'react-chartjs-2'
+import { dashboardAPI, dashboardPreferencesAPI, formatRelativeTime } from '../utils/api'
+import DashboardSettingsModal from '../components/DashboardSettingsModal'
+import { useTheme } from '../contexts/ThemeContext'
+
+// Register Chart.js components
+ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement, Title)
+
+const Dashboard = () => {
+  const [showSettingsModal, setShowSettingsModal] = useState(false)
+  const [cardPreferences, setCardPreferences] = useState([])
+  const navigate = useNavigate()
+  const { isDark } = useTheme()
+
+  // Navigation handlers
+  const handleTotalHostsClick = () => {
+    navigate('/hosts')
+  }
+
+  const handleHostsNeedingUpdatesClick = () => {
+    navigate('/hosts?filter=needsUpdates')
+  }
+
+  const handleOutdatedPackagesClick = () => {
+    navigate('/packages?filter=outdated')
+  }
+
+  const handleSecurityUpdatesClick = () => {
+    navigate('/packages?filter=security')
+  }
+
+  const { data: stats, isLoading, error, refetch } = useQuery({
+    queryKey: ['dashboardStats'],
+    queryFn: () => dashboardAPI.getStats().then(res => res.data),
+      refetchInterval: 60000, // Refresh every minute
+      staleTime: 30000, // Consider data stale after 30 seconds
+  })
+
+  // Fetch user's dashboard preferences
+  const { data: preferences, refetch: refetchPreferences } = useQuery({
+    queryKey: ['dashboardPreferences'],
+    queryFn: () => dashboardPreferencesAPI.get().then(res => res.data),
+    staleTime: 5 * 60 * 1000, // Consider data fresh for 5 minutes
+  })
+
+  // Fetch default card configuration
+  const { data: defaultCards } = useQuery({
+    queryKey: ['dashboardDefaultCards'],
+    queryFn: () => dashboardPreferencesAPI.getDefaults().then(res => res.data),
+  })
+
+  // Merge preferences with default cards
+  useEffect(() => {
+    if (preferences && defaultCards) {
+      const mergedCards = defaultCards.map(defaultCard => {
+        const userPreference = preferences.find(p => p.cardId === defaultCard.cardId);
+        return {
+          ...defaultCard,
+          enabled: userPreference ? userPreference.enabled : defaultCard.enabled,
+          order: userPreference ? userPreference.order : defaultCard.order
+        };
+      }).sort((a, b) => a.order - b.order);
+      
+      setCardPreferences(mergedCards);
+    } else if (defaultCards) {
+      // If no preferences exist, use defaults
+      setCardPreferences(defaultCards.sort((a, b) => a.order - b.order));
+    }
+  }, [preferences, defaultCards])
+
+  // Listen for custom event from Layout component
+  useEffect(() => {
+    const handleOpenSettings = () => {
+      setShowSettingsModal(true);
+    };
+
+    window.addEventListener('openDashboardSettings', handleOpenSettings);
+    return () => {
+      window.removeEventListener('openDashboardSettings', handleOpenSettings);
+    };
+  }, [])
+
+  // Helper function to check if a card should be displayed
+  const isCardEnabled = (cardId) => {
+    const card = cardPreferences.find(c => c.cardId === cardId);
+    return card ? card.enabled : true; // Default to enabled if not found
+  }
+
+  // Helper function to get card type for layout grouping
+  const getCardType = (cardId) => {
+    if (['totalHosts', 'hostsNeedingUpdates', 'totalOutdatedPackages', 'securityUpdates'].includes(cardId)) {
+      return 'stats';
+    } else if (['osDistribution', 'updateStatus', 'packagePriority'].includes(cardId)) {
+      return 'charts';
+    } else if (['erroredHosts', 'quickStats'].includes(cardId)) {
+      return 'fullwidth';
+    }
+    return 'fullwidth'; // Default to full width
+  }
+
+  // Helper function to get CSS class for card group
+  const getGroupClassName = (cardType) => {
+    switch (cardType) {
+      case 'stats':
+        return 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4';
+      case 'charts':
+        return 'grid grid-cols-1 lg:grid-cols-3 gap-6';
+      case 'fullwidth':
+        return 'space-y-6';
+      default:
+        return 'space-y-6';
+    }
+  }
+
+  // Helper function to render a card by ID
+  const renderCard = (cardId) => {
+    switch (cardId) {
+      case 'totalHosts':
+        return (
+          <div 
+            className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200"
+            onClick={handleTotalHostsClick}
+          >
+            <div className="flex items-center">
+              <div className="flex-shrink-0">
+                <Server className="h-5 w-5 text-primary-600 mr-2" />
+              </div>
+              <div className="w-0 flex-1">
+                <p className="text-sm text-secondary-500 dark:text-white">Total Hosts</p>
+                <p className="text-xl font-semibold text-secondary-900 dark:text-white">
+                  {stats.cards.totalHosts}
+                </p>
+              </div>
+            </div>
+          </div>
+        );
+      
+      case 'hostsNeedingUpdates':
+        return (
+          <div 
+            className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200"
+            onClick={handleHostsNeedingUpdatesClick}
+          >
+            <div className="flex items-center">
+              <div className="flex-shrink-0">
+                <AlertTriangle className="h-5 w-5 text-warning-600 mr-2" />
+              </div>
+              <div className="w-0 flex-1">
+                <p className="text-sm text-secondary-500 dark:text-white">Needs Updating</p>
+                <p className="text-xl font-semibold text-secondary-900 dark:text-white">
+                  {stats.cards.hostsNeedingUpdates}
+                </p>
+              </div>
+            </div>
+          </div>
+        );
+      
+      case 'totalOutdatedPackages':
+        return (
+          <div 
+            className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200"
+            onClick={handleOutdatedPackagesClick}
+          >
+            <div className="flex items-center">
+              <div className="flex-shrink-0">
+                <Package className="h-5 w-5 text-secondary-600 mr-2" />
+              </div>
+              <div className="w-0 flex-1">
+                <p className="text-sm text-secondary-500 dark:text-white">Outdated Packages</p>
+                <p className="text-xl font-semibold text-secondary-900 dark:text-white">
+                  {stats.cards.totalOutdatedPackages}
+                </p>
+              </div>
+            </div>
+          </div>
+        );
+      
+      case 'securityUpdates':
+        return (
+          <div 
+            className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200"
+            onClick={handleSecurityUpdatesClick}
+          >
+            <div className="flex items-center">
+              <div className="flex-shrink-0">
+                <Shield className="h-5 w-5 text-danger-600 mr-2" />
+              </div>
+              <div className="w-0 flex-1">
+                <p className="text-sm text-secondary-500 dark:text-white">Security Updates</p>
+                <p className="text-xl font-semibold text-secondary-900 dark:text-white">
+                  {stats.cards.securityUpdates}
+                </p>
+              </div>
+            </div>
+          </div>
+        );
+      
+      case 'erroredHosts':
+        return (
+          <div className={`border rounded-lg p-4 ${
+            stats.cards.erroredHosts > 0 
+              ? 'bg-danger-50 border-danger-200' 
+              : 'bg-success-50 border-success-200'
+          }`}>
+            <div className="flex">
+              <AlertTriangle className={`h-5 w-5 ${
+                stats.cards.erroredHosts > 0 ? 'text-danger-400' : 'text-success-400'
+              }`} />
+              <div className="ml-3">
+                {stats.cards.erroredHosts > 0 ? (
+                  <>
+                    <h3 className="text-sm font-medium text-danger-800">
+                      {stats.cards.erroredHosts} host{stats.cards.erroredHosts > 1 ? 's' : ''} haven't reported in 24+ hours
+                    </h3>
+                    <p className="text-sm text-danger-700 mt-1">
+                      These hosts may be offline or experiencing connectivity issues.
+                    </p>
+                  </>
+                ) : (
+                  <>
+                    <h3 className="text-sm font-medium text-success-800">
+                      All hosts are reporting normally
+                    </h3>
+                    <p className="text-sm text-success-700 mt-1">
+                      No hosts have failed to report in the last 24 hours.
+                    </p>
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+        );
+      
+      case 'osDistribution':
+        return (
+          <div className="card p-6">
+            <h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-4">OS Distribution</h3>
+            <div className="h-64">
+              <Pie data={osChartData} options={chartOptions} />
+            </div>
+          </div>
+        );
+      
+      case 'updateStatus':
+        return (
+          <div className="card p-6">
+            <h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-4">Update Status</h3>
+            <div className="h-64">
+              <Pie data={updateStatusChartData} options={chartOptions} />
+            </div>
+          </div>
+        );
+      
+      case 'packagePriority':
+        return (
+          <div className="card p-6">
+            <h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-4">Package Priority</h3>
+            <div className="h-64">
+              <Pie data={packagePriorityChartData} options={chartOptions} />
+            </div>
+          </div>
+        );
+      
+      case 'quickStats':
+        return (
+          <div className="card p-6">
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="text-lg font-medium text-secondary-900 dark:text-white">Quick Stats</h3>
+              <TrendingUp className="h-5 w-5 text-success-500" />
+            </div>
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+              <div className="text-center">
+                <div className="text-2xl font-bold text-primary-600">
+                  {((stats.cards.hostsNeedingUpdates / stats.cards.totalHosts) * 100).toFixed(1)}%
+                </div>
+                <div className="text-sm text-secondary-500 dark:text-secondary-300">Hosts need updates</div>
+              </div>
+              <div className="text-center">
+                <div className="text-2xl font-bold text-danger-600">
+                  {stats.cards.securityUpdates}
+                </div>
+                <div className="text-sm text-secondary-500 dark:text-secondary-300">Security updates pending</div>
+              </div>
+              <div className="text-center">
+                <div className="text-2xl font-bold text-success-600">
+                  {stats.cards.totalHosts - stats.cards.erroredHosts}
+                </div>
+                <div className="text-sm text-secondary-500 dark:text-secondary-300">Hosts online</div>
+              </div>
+            </div>
+          </div>
+        );
+      
+      default:
+        return null;
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <RefreshCw className="h-8 w-8 animate-spin text-primary-600" />
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="bg-danger-50 border border-danger-200 rounded-md p-4">
+        <div className="flex">
+          <AlertTriangle className="h-5 w-5 text-danger-400" />
+          <div className="ml-3">
+            <h3 className="text-sm font-medium text-danger-800">Error loading dashboard</h3>
+            <p className="text-sm text-danger-700 mt-1">
+              {error.message || 'Failed to load dashboard statistics'}
+            </p>
+            <button
+              onClick={() => refetch()}
+              className="mt-2 btn-danger text-xs"
+            >
+              Try again
+            </button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  const chartOptions = {
+    responsive: true,
+    plugins: {
+      legend: {
+        position: 'bottom',
+        labels: {
+          color: isDark ? '#ffffff' : '#374151',
+          font: {
+            size: 12
+          }
+        }
+      },
+    },
+  }
+
+  const osChartData = {
+    labels: stats.charts.osDistribution.map(item => item.name),
+    datasets: [
+      {
+        data: stats.charts.osDistribution.map(item => item.count),
+        backgroundColor: [
+          '#3B82F6', // Blue
+          '#10B981', // Green
+          '#F59E0B', // Yellow
+          '#EF4444', // Red
+          '#8B5CF6', // Purple
+          '#06B6D4', // Cyan
+        ],
+        borderWidth: 2,
+        borderColor: '#ffffff',
+      },
+    ],
+  }
+
+  const updateStatusChartData = {
+    labels: stats.charts.updateStatusDistribution.map(item => item.name),
+    datasets: [
+      {
+        data: stats.charts.updateStatusDistribution.map(item => item.count),
+        backgroundColor: [
+          '#10B981', // Green - Up to date
+          '#F59E0B', // Yellow - Needs updates
+          '#EF4444', // Red - Errored
+        ],
+        borderWidth: 2,
+        borderColor: '#ffffff',
+      },
+    ],
+  }
+
+  const packagePriorityChartData = {
+    labels: stats.charts.packageUpdateDistribution.map(item => item.name),
+    datasets: [
+      {
+        data: stats.charts.packageUpdateDistribution.map(item => item.count),
+        backgroundColor: [
+          '#EF4444', // Red - Security
+          '#3B82F6', // Blue - Regular
+        ],
+        borderWidth: 2,
+        borderColor: '#ffffff',
+      },
+    ],
+  }
+
+  return (
+    <div className="space-y-6">
+
+      {/* Dynamically Rendered Cards - Unified Order */}
+      {(() => {
+        const enabledCards = cardPreferences
+          .filter(card => isCardEnabled(card.cardId))
+          .sort((a, b) => a.order - b.order);
+        
+        // Group consecutive cards of the same type for proper layout
+        const cardGroups = [];
+        let currentGroup = null;
+        
+        enabledCards.forEach(card => {
+          const cardType = getCardType(card.cardId);
+          
+          if (!currentGroup || currentGroup.type !== cardType) {
+            // Start a new group
+            currentGroup = {
+              type: cardType,
+              cards: [card]
+            };
+            cardGroups.push(currentGroup);
+          } else {
+            // Add to existing group
+            currentGroup.cards.push(card);
+          }
+        });
+        
+        return (
+          <>
+            {cardGroups.map((group, groupIndex) => (
+              <div key={groupIndex} className={getGroupClassName(group.type)}>
+                {group.cards.map(card => (
+                  <div key={card.cardId}>
+                    {renderCard(card.cardId)}
+            </div>
+                ))}
+          </div>
+            ))}
+          </>
+        );
+      })()}
+
+      {/* Dashboard Settings Modal */}
+      <DashboardSettingsModal 
+        isOpen={showSettingsModal} 
+        onClose={() => setShowSettingsModal(false)} 
+      />
+    </div>
+  )
+}
+
+export default Dashboard 
\ No newline at end of file
diff --git a/frontend/src/pages/HostDetail.jsx b/frontend/src/pages/HostDetail.jsx
new file mode 100644
index 0000000..27dfdaa
--- /dev/null
+++ b/frontend/src/pages/HostDetail.jsx
@@ -0,0 +1,732 @@
+import React, { useState } from 'react'
+import { useParams, Link, useNavigate } from 'react-router-dom'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { 
+  Server, 
+  ArrowLeft, 
+  Package, 
+  Shield, 
+  Clock, 
+  CheckCircle,
+  AlertTriangle,
+  RefreshCw,
+  Calendar,
+  Monitor,
+  HardDrive,
+  Key,
+  Trash2,
+  X,
+  Copy,
+  Eye,
+  Code,
+  EyeOff,
+  ToggleLeft,
+  ToggleRight
+} from 'lucide-react'
+import { dashboardAPI, adminHostsAPI, settingsAPI, formatRelativeTime, formatDate } from '../utils/api'
+
+const HostDetail = () => {
+  const { hostId } = useParams()
+  const navigate = useNavigate()
+  const queryClient = useQueryClient()
+  const [showCredentialsModal, setShowCredentialsModal] = useState(false)
+  const [showDeleteModal, setShowDeleteModal] = useState(false)
+  
+  const { data: host, isLoading, error, refetch } = useQuery({
+    queryKey: ['host', hostId],
+    queryFn: () => dashboardAPI.getHostDetail(hostId).then(res => res.data),
+    refetchInterval: 60000,
+    staleTime: 30000,
+  })
+
+  const deleteHostMutation = useMutation({
+    mutationFn: (hostId) => adminHostsAPI.delete(hostId),
+    onSuccess: () => {
+      queryClient.invalidateQueries(['hosts'])
+      navigate('/hosts')
+    },
+  })
+
+  // Toggle auto-update mutation
+  const toggleAutoUpdateMutation = useMutation({
+    mutationFn: (autoUpdate) => adminHostsAPI.toggleAutoUpdate(hostId, autoUpdate).then(res => res.data),
+    onSuccess: () => {
+      queryClient.invalidateQueries(['host', hostId])
+      queryClient.invalidateQueries(['hosts'])
+    }
+  })
+
+  const handleDeleteHost = async () => {
+    if (window.confirm(`Are you sure you want to delete host "${host.hostname}"? This action cannot be undone.`)) {
+      try {
+        await deleteHostMutation.mutateAsync(hostId)
+      } catch (error) {
+        console.error('Failed to delete host:', error)
+        alert('Failed to delete host')
+      }
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <RefreshCw className="h-8 w-8 animate-spin text-primary-600" />
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <Link to="/hosts" className="text-secondary-500 hover:text-secondary-700">
+              <ArrowLeft className="h-5 w-5" />
+            </Link>
+          </div>
+        </div>
+        
+        <div className="bg-danger-50 border border-danger-200 rounded-md p-4">
+          <div className="flex">
+            <AlertTriangle className="h-5 w-5 text-danger-400" />
+            <div className="ml-3">
+              <h3 className="text-sm font-medium text-danger-800">Error loading host</h3>
+              <p className="text-sm text-danger-700 mt-1">
+                {error.message || 'Failed to load host details'}
+              </p>
+              <button
+                onClick={() => refetch()}
+                className="mt-2 btn-danger text-xs"
+              >
+                Try again
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (!host) {
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <Link to="/hosts" className="text-secondary-500 hover:text-secondary-700">
+              <ArrowLeft className="h-5 w-5" />
+            </Link>
+          </div>
+        </div>
+        
+        <div className="card p-8 text-center">
+          <Server className="h-12 w-12 text-secondary-400 mx-auto mb-4" />
+          <h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-2">Host Not Found</h3>
+          <p className="text-secondary-600 dark:text-secondary-300">
+            The requested host could not be found.
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  const getStatusColor = (isStale, needsUpdate) => {
+    if (isStale) return 'text-danger-600'
+    if (needsUpdate) return 'text-warning-600'
+    return 'text-success-600'
+  }
+
+  const getStatusIcon = (isStale, needsUpdate) => {
+    if (isStale) return <AlertTriangle className="h-5 w-5" />
+    if (needsUpdate) return <Clock className="h-5 w-5" />
+    return <CheckCircle className="h-5 w-5" />
+  }
+
+  const getStatusText = (isStale, needsUpdate) => {
+    if (isStale) return 'Stale'
+    if (needsUpdate) return 'Needs Updates'
+    return 'Up to Date'
+  }
+
+  const isStale = new Date() - new Date(host.lastUpdate) > 24 * 60 * 60 * 1000
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <Link to="/hosts" className="text-secondary-500 hover:text-secondary-700 dark:text-secondary-400 dark:hover:text-secondary-200">
+            <ArrowLeft className="h-5 w-5" />
+          </Link>
+          <h1 className="text-2xl font-bold text-secondary-900 dark:text-white">{host.hostname}</h1>
+        </div>
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => setShowCredentialsModal(true)}
+            className="btn-outline flex items-center gap-2"
+          >
+            <Key className="h-4 w-4" />
+            View Credentials
+          </button>
+          <button
+            onClick={() => setShowDeleteModal(true)}
+            className="btn-danger flex items-center gap-2"
+          >
+            <Trash2 className="h-4 w-4" />
+            Delete Host
+          </button>
+        </div>
+      </div>
+
+      {/* Host Information */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Basic Info */}
+        <div className="card p-6">
+          <h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-4">Host Information</h3>
+          <div className="space-y-4">
+            <div className="flex items-center gap-3">
+              <Server className="h-5 w-5 text-secondary-400" />
+              <div>
+                <p className="text-sm text-secondary-500 dark:text-secondary-300">Hostname</p>
+                <p className="font-medium text-secondary-900 dark:text-white">{host.hostname}</p>
+              </div>
+            </div>
+            
+            <div className="flex items-center gap-3">
+              <Shield className="h-5 w-5 text-secondary-400" />
+              <div>
+                <p className="text-sm text-secondary-500 dark:text-secondary-300">Host Group</p>
+                {host.hostGroup ? (
+                  <span 
+                    className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium text-white"
+                    style={{ backgroundColor: host.hostGroup.color }}
+                  >
+                    {host.hostGroup.name}
+                  </span>
+                ) : (
+                  <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-secondary-100 dark:bg-secondary-700 text-secondary-800 dark:text-secondary-200">
+                    Ungrouped
+                  </span>
+                )}
+              </div>
+            </div>
+            
+            <div className="flex items-center gap-3">
+              <Monitor className="h-5 w-5 text-secondary-400" />
+              <div>
+                <p className="text-sm text-secondary-500 dark:text-secondary-300">Operating System</p>
+                <p className="font-medium text-secondary-900 dark:text-white">{host.osType} {host.osVersion}</p>
+              </div>
+            </div>
+            
+            {host.ip && (
+              <div className="flex items-center gap-3">
+                <HardDrive className="h-5 w-5 text-secondary-400" />
+                <div>
+                  <p className="text-sm text-secondary-500 dark:text-secondary-300">IP Address</p>
+                  <p className="font-medium text-secondary-900 dark:text-white">{host.ip}</p>
+                </div>
+              </div>
+            )}
+            
+            {host.architecture && (
+              <div className="flex items-center gap-3">
+                <Package className="h-5 w-5 text-secondary-400" />
+                <div>
+                  <p className="text-sm text-secondary-500 dark:text-secondary-300">Architecture</p>
+                  <p className="font-medium text-secondary-900 dark:text-white">{host.architecture}</p>
+                </div>
+              </div>
+            )}
+            
+            <div className="flex items-center gap-3">
+              <Calendar className="h-5 w-5 text-secondary-400" />
+              <div>
+                <p className="text-sm text-secondary-500 dark:text-secondary-300">Last Update</p>
+                <p className="font-medium text-secondary-900 dark:text-white">{formatRelativeTime(host.lastUpdate)}</p>
+              </div>
+            </div>
+            
+            {host.agentVersion && (
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  <Code className="h-5 w-5 text-secondary-400" />
+                  <div>
+                    <p className="text-sm text-secondary-500 dark:text-secondary-300">Agent Version</p>
+                    <p className="font-medium text-secondary-900 dark:text-white">{host.agentVersion}</p>
+                  </div>
+                </div>
+                
+                {/* Auto-Update Toggle */}
+                <div className="flex items-center gap-2">
+                  <span className="text-sm text-secondary-500 dark:text-secondary-300">Auto-update</span>
+                  <button
+                    onClick={() => toggleAutoUpdateMutation.mutate(!host.autoUpdate)}
+                    disabled={toggleAutoUpdateMutation.isPending}
+                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 ${
+                      host.autoUpdate 
+                        ? 'bg-primary-600 dark:bg-primary-500' 
+                        : 'bg-secondary-200 dark:bg-secondary-600'
+                    }`}
+                  >
+                    <span
+                      className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                        host.autoUpdate ? 'translate-x-6' : 'translate-x-1'
+                      }`}
+                    />
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Statistics */}
+        <div className="card p-6">
+          <h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-4">Statistics</h3>
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+            <div className="text-center">
+              <div className="flex items-center justify-center w-12 h-12 bg-primary-100 rounded-lg mx-auto mb-2">
+                <Package className="h-6 w-6 text-primary-600" />
+              </div>
+              <p className="text-2xl font-bold text-secondary-900 dark:text-white">{host.stats.totalPackages}</p>
+              <p className="text-sm text-secondary-500 dark:text-secondary-300">Total Packages</p>
+            </div>
+            
+            <div className="text-center">
+              <div className="flex items-center justify-center w-12 h-12 bg-warning-100 rounded-lg mx-auto mb-2">
+                <Clock className="h-6 w-6 text-warning-600" />
+              </div>
+              <p className="text-2xl font-bold text-secondary-900 dark:text-white">{host.stats.outdatedPackages}</p>
+              <p className="text-sm text-secondary-500 dark:text-secondary-300">Outdated</p>
+            </div>
+            
+            <div className="text-center">
+              <div className="flex items-center justify-center w-12 h-12 bg-danger-100 rounded-lg mx-auto mb-2">
+                <Shield className="h-6 w-6 text-danger-600" />
+              </div>
+              <p className="text-2xl font-bold text-secondary-900 dark:text-white">{host.stats.securityUpdates}</p>
+              <p className="text-sm text-secondary-500 dark:text-secondary-300">Security Updates</p>
+            </div>
+          </div>
+          
+          {/* Status */}
+          <div className="mt-6 pt-4 border-t border-secondary-200 dark:border-secondary-600">
+            <div className={`flex items-center gap-2 ${getStatusColor(isStale, host.stats.outdatedPackages > 0)}`}>
+              {getStatusIcon(isStale, host.stats.outdatedPackages > 0)}
+              <span className="font-medium">{getStatusText(isStale, host.stats.outdatedPackages > 0)}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Packages */}
+      <div className="card">
+        <div className="px-6 py-4 border-b border-secondary-200 dark:border-secondary-600">
+          <h3 className="text-lg font-medium text-secondary-900 dark:text-white">Packages</h3>
+        </div>
+        
+        <div className="overflow-x-auto">
+          <table className="min-w-full divide-y divide-secondary-200 dark:divide-secondary-600">
+            <thead className="bg-secondary-50 dark:bg-secondary-700">
+              <tr>
+                <th className="px-6 py-3 text-left text-xs font-medium text-secondary-500 dark:text-secondary-300 uppercase tracking-wider">
+                  Package
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-secondary-500 dark:text-secondary-300 uppercase tracking-wider">
+                  Current Version
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-secondary-500 dark:text-secondary-300 uppercase tracking-wider">
+                  Available Version
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-secondary-500 dark:text-secondary-300 uppercase tracking-wider">
+                  Status
+                </th>
+              </tr>
+            </thead>
+            <tbody className="bg-white dark:bg-secondary-800 divide-y divide-secondary-200 dark:divide-secondary-600">
+              {host.hostPackages?.map((hostPackage) => (
+                <tr key={hostPackage.id} className="hover:bg-secondary-50 dark:hover:bg-secondary-700">
+                  <td className="px-6 py-4 whitespace-nowrap">
+                    <div className="flex items-center">
+                      <Package className="h-4 w-4 text-secondary-400 mr-3" />
+                      <div>
+                        <div className="text-sm font-medium text-secondary-900 dark:text-white">
+                          {hostPackage.package.name}
+                        </div>
+                        {hostPackage.package.description && (
+                          <div className="text-sm text-secondary-500 dark:text-secondary-300">
+                            {hostPackage.package.description}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-secondary-900 dark:text-white">
+                    {hostPackage.currentVersion}
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-secondary-900 dark:text-white">
+                    {hostPackage.availableVersion || '-'}
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap">
+                    {hostPackage.needsUpdate ? (
+                      <div className="flex items-center gap-2">
+                        <span className={`badge ${hostPackage.isSecurityUpdate ? 'badge-danger' : 'badge-warning'}`}>
+                          {hostPackage.isSecurityUpdate ? 'Security Update' : 'Update Available'}
+                        </span>
+                        {hostPackage.isSecurityUpdate && (
+                          <Shield className="h-4 w-4 text-danger-600" />
+                        )}
+                      </div>
+                    ) : (
+                      <span className="badge-success">Up to date</span>
+                    )}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        
+        {host.hostPackages?.length === 0 && (
+          <div className="text-center py-8">
+            <Package className="h-12 w-12 text-secondary-400 mx-auto mb-4" />
+            <p className="text-secondary-500 dark:text-secondary-300">No packages found</p>
+          </div>
+        )}
+      </div>
+
+      {/* Update History */}
+      <div className="card">
+        <div className="px-6 py-4 border-b border-secondary-200 dark:border-secondary-600">
+          <h3 className="text-lg font-medium text-secondary-900 dark:text-white">Update History</h3>
+        </div>
+        
+        <div className="p-6">
+          {host.updateHistory?.length > 0 ? (
+            <div className="space-y-4">
+              {host.updateHistory.map((update, index) => (
+                <div key={update.id} className="flex items-center justify-between py-3 border-b border-secondary-100 dark:border-secondary-700 last:border-0">
+                  <div className="flex items-center gap-3">
+                    <div className={`w-2 h-2 rounded-full ${update.status === 'success' ? 'bg-success-500' : 'bg-danger-500'}`} />
+                    <div>
+                      <p className="text-sm font-medium text-secondary-900 dark:text-white">
+                        {update.status === 'success' ? 'Update Successful' : 'Update Failed'}
+                      </p>
+                      <p className="text-xs text-secondary-500 dark:text-secondary-300">
+                        {formatDate(update.timestamp)}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="text-right">
+                    <p className="text-sm text-secondary-900 dark:text-white">
+                      {update.packagesCount} packages
+                    </p>
+                    {update.securityCount > 0 && (
+                      <p className="text-xs text-danger-600">
+                        {update.securityCount} security updates
+                      </p>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="text-center py-8">
+              <Calendar className="h-12 w-12 text-secondary-400 mx-auto mb-4" />
+              <p className="text-secondary-500 dark:text-secondary-300">No update history available</p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Credentials Modal */}
+      {showCredentialsModal && (
+        <CredentialsModal
+          host={host}
+          isOpen={showCredentialsModal}
+          onClose={() => setShowCredentialsModal(false)}
+        />
+      )}
+
+      {/* Delete Confirmation Modal */}
+      {showDeleteModal && (
+        <DeleteConfirmationModal
+          host={host}
+          isOpen={showDeleteModal}
+          onClose={() => setShowDeleteModal(false)}
+          onConfirm={handleDeleteHost}
+          isLoading={deleteHostMutation.isPending}
+        />
+      )}
+    </div>
+  )
+}
+
+// Credentials Modal Component
+const CredentialsModal = ({ host, isOpen, onClose }) => {
+  const [showApiKey, setShowApiKey] = useState(false)
+  const [activeTab, setActiveTab] = useState('credentials')
+
+  const { data: serverUrlData } = useQuery({
+    queryKey: ['serverUrl'],
+    queryFn: () => settingsAPI.getServerUrl().then(res => res.data),
+  })
+  
+  const serverUrl = serverUrlData?.serverUrl || 'http://localhost:3001'
+
+  const copyToClipboard = (text) => {
+    navigator.clipboard.writeText(text)
+  }
+
+  const getSetupCommands = () => {
+    return `# Run this on the target host: ${host?.hostname}
+
+echo "🔄 Setting up PatchMon agent..."
+
+# Download and install agent
+echo "📥 Downloading agent script..."
+curl -o /tmp/patchmon-agent.sh ${serverUrl}/api/v1/hosts/agent/download
+sudo mkdir -p /etc/patchmon
+sudo mv /tmp/patchmon-agent.sh /usr/local/bin/patchmon-agent.sh
+sudo chmod +x /usr/local/bin/patchmon-agent.sh
+
+# Configure credentials
+echo "🔑 Configuring API credentials..."
+sudo /usr/local/bin/patchmon-agent.sh configure "${host?.apiId}" "${host?.apiKey}"
+
+# Test configuration
+echo "🧪 Testing configuration..."
+sudo /usr/local/bin/patchmon-agent.sh test
+
+# Send initial update
+echo "📊 Sending initial package data..."
+sudo /usr/local/bin/patchmon-agent.sh update
+
+# Setup crontab
+echo "⏰ Setting up hourly crontab..."
+echo "0 * * * * /usr/local/bin/patchmon-agent.sh update >/dev/null 2>&1" | sudo crontab -
+
+echo "✅ PatchMon agent setup complete!"
+echo "   - Agent installed: /usr/local/bin/patchmon-agent.sh"
+echo "   - Config directory: /etc/patchmon/"
+echo "   - Updates: Every hour via crontab"
+echo "   - View logs: tail -f /var/log/patchmon-agent.log"`
+  }
+
+  if (!isOpen || !host) return null
+
+  const commands = getSetupCommands()
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white dark:bg-secondary-800 rounded-lg p-6 w-full max-w-4xl max-h-[90vh] overflow-y-auto">
+        <div className="flex justify-between items-center mb-4">
+          <h3 className="text-lg font-medium text-secondary-900 dark:text-white">Host Setup - {host.hostname}</h3>
+          <button onClick={onClose} className="text-secondary-400 hover:text-secondary-600 dark:text-secondary-500 dark:hover:text-secondary-300">
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        {/* Tabs */}
+        <div className="border-b border-secondary-200 dark:border-secondary-600 mb-6">
+          <nav className="-mb-px flex space-x-8">
+            <button
+              onClick={() => setActiveTab('credentials')}
+              className={`py-2 px-1 border-b-2 font-medium text-sm ${
+                activeTab === 'credentials'
+                  ? 'border-primary-500 text-primary-600 dark:text-primary-400'
+                  : 'border-transparent text-secondary-500 dark:text-secondary-400 hover:text-secondary-700 dark:hover:text-secondary-300 hover:border-secondary-300 dark:hover:border-secondary-500'
+              }`}
+            >
+              API Credentials
+            </button>
+            <button
+              onClick={() => setActiveTab('quick-install')}
+              className={`py-2 px-1 border-b-2 font-medium text-sm ${
+                activeTab === 'quick-install'
+                  ? 'border-primary-500 text-primary-600 dark:text-primary-400'
+                  : 'border-transparent text-secondary-500 dark:text-secondary-400 hover:text-secondary-700 dark:hover:text-secondary-300 hover:border-secondary-300 dark:hover:border-secondary-500'
+              }`}
+            >
+              Quick Install
+            </button>
+          </nav>
+        </div>
+
+        {/* Tab Content */}
+        {activeTab === 'credentials' && (
+          <div className="space-y-6">
+            <div className="bg-secondary-50 dark:bg-secondary-700 rounded-lg p-4">
+              <h4 className="text-sm font-medium text-secondary-900 dark:text-white mb-3">API Credentials</h4>
+              <div className="space-y-4">
+                <div>
+                  <label className="block text-sm font-medium text-secondary-700 dark:text-secondary-200 mb-1">API ID</label>
+                  <div className="flex items-center gap-2">
+                    <input
+                      type="text"
+                      value={host.apiId}
+                      readOnly
+                      className="flex-1 px-3 py-2 border border-secondary-300 dark:border-secondary-600 rounded-md bg-secondary-50 dark:bg-secondary-800 text-sm font-mono text-secondary-900 dark:text-white"
+                    />
+                    <button
+                      onClick={() => copyToClipboard(host.apiId)}
+                      className="btn-outline flex items-center gap-1"
+                    >
+                      <Copy className="h-4 w-4" />
+                      Copy
+                    </button>
+                  </div>
+                </div>
+                
+                <div>
+                  <label className="block text-sm font-medium text-secondary-700 dark:text-secondary-200 mb-1">API Key</label>
+                  <div className="flex items-center gap-2">
+                    <input
+                      type={showApiKey ? 'text' : 'password'}
+                      value={host.apiKey}
+                      readOnly
+                      className="flex-1 px-3 py-2 border border-secondary-300 dark:border-secondary-600 rounded-md bg-secondary-50 dark:bg-secondary-800 text-sm font-mono text-secondary-900 dark:text-white"
+                    />
+                    <button
+                      onClick={() => setShowApiKey(!showApiKey)}
+                      className="btn-outline flex items-center gap-1"
+                    >
+                      {showApiKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                    </button>
+                    <button
+                      onClick={() => copyToClipboard(host.apiKey)}
+                      className="btn-outline flex items-center gap-1"
+                    >
+                      <Copy className="h-4 w-4" />
+                      Copy
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-warning-50 dark:bg-warning-900 border border-warning-200 dark:border-warning-700 rounded-lg p-4">
+              <div className="flex">
+                <AlertTriangle className="h-5 w-5 text-warning-400 dark:text-warning-300" />
+                <div className="ml-3">
+                  <h3 className="text-sm font-medium text-warning-800 dark:text-warning-200">Security Notice</h3>
+                  <p className="text-sm text-warning-700 dark:text-warning-300 mt-1">
+                    Keep these credentials secure. They provide full access to this host's monitoring data.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {activeTab === 'quick-install' && (
+          <div className="space-y-4">
+            <div className="bg-primary-50 dark:bg-primary-900 border border-primary-200 dark:border-primary-700 rounded-lg p-4">
+              <h4 className="text-sm font-medium text-primary-900 dark:text-primary-200 mb-2">One-Line Installation</h4>
+              <p className="text-sm text-primary-700 dark:text-primary-300 mb-3">
+                Copy and run this command on the target host to automatically install and configure the PatchMon agent:
+              </p>
+              <div className="flex items-center gap-2">
+                <input
+                  type="text"
+                  value={`curl -s ${serverUrl}/api/v1/hosts/install | bash -s -- ${serverUrl} "${host.apiId}" "${host.apiKey}"`}
+                  readOnly
+                  className="flex-1 px-3 py-2 border border-primary-300 dark:border-primary-600 rounded-md bg-white dark:bg-secondary-800 text-sm font-mono text-secondary-900 dark:text-white"
+                />
+                <button
+                  onClick={() => copyToClipboard(`curl -s ${serverUrl}/api/v1/hosts/install | bash -s -- ${serverUrl} "${host.apiId}" "${host.apiKey}"`)}
+                  className="btn-primary flex items-center gap-1"
+                >
+                  <Copy className="h-4 w-4" />
+                  Copy
+                </button>
+              </div>
+            </div>
+
+            <div className="bg-secondary-50 dark:bg-secondary-700 rounded-lg p-4">
+              <h4 className="text-sm font-medium text-secondary-900 dark:text-white mb-3">Manual Installation</h4>
+              <p className="text-sm text-secondary-600 dark:text-secondary-300 mb-3">
+                If you prefer manual installation, run these commands on the target host:
+              </p>
+              <pre className="bg-secondary-900 dark:bg-secondary-800 text-secondary-100 dark:text-secondary-200 p-4 rounded-md text-sm overflow-x-auto">
+                <code>{commands}</code>
+              </pre>
+              <button
+                onClick={() => copyToClipboard(commands)}
+                className="mt-3 btn-outline flex items-center gap-1"
+              >
+                <Copy className="h-4 w-4" />
+                Copy Commands
+              </button>
+            </div>
+          </div>
+        )}
+
+        <div className="flex justify-end pt-6">
+          <button onClick={onClose} className="btn-primary">
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// Delete Confirmation Modal Component
+const DeleteConfirmationModal = ({ host, isOpen, onClose, onConfirm, isLoading }) => {
+  if (!isOpen || !host) return null
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white dark:bg-secondary-800 rounded-lg p-6 w-full max-w-md">
+        <div className="flex items-center gap-3 mb-4">
+          <div className="w-10 h-10 bg-danger-100 dark:bg-danger-900 rounded-full flex items-center justify-center">
+            <AlertTriangle className="h-5 w-5 text-danger-600 dark:text-danger-400" />
+          </div>
+          <div>
+            <h3 className="text-lg font-semibold text-secondary-900 dark:text-white">
+              Delete Host
+            </h3>
+            <p className="text-sm text-secondary-600 dark:text-secondary-300">
+              This action cannot be undone
+            </p>
+          </div>
+        </div>
+        
+        <div className="mb-6">
+          <p className="text-secondary-700 dark:text-secondary-300">
+            Are you sure you want to delete the host{' '}
+            <span className="font-semibold">"{host.hostname}"</span>?
+          </p>
+          <div className="mt-3 p-3 bg-danger-50 dark:bg-danger-900 border border-danger-200 dark:border-danger-700 rounded-md">
+            <p className="text-sm text-danger-800 dark:text-danger-200">
+              <strong>Warning:</strong> This will permanently remove the host and all its associated data, 
+              including package information and update history.
+            </p>
+          </div>
+        </div>
+        
+        <div className="flex justify-end gap-3">
+          <button
+            onClick={onClose}
+            className="btn-outline"
+            disabled={isLoading}
+          >
+            Cancel
+          </button>
+          <button
+            onClick={onConfirm}
+            className="btn-danger"
+            disabled={isLoading}
+          >
+            {isLoading ? 'Deleting...' : 'Delete Host'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default HostDetail
+
+ 
\ No newline at end of file
diff --git a/frontend/src/pages/HostGroups.jsx b/frontend/src/pages/HostGroups.jsx
new file mode 100644
index 0000000..1f4568c
--- /dev/null
+++ b/frontend/src/pages/HostGroups.jsx
@@ -0,0 +1,498 @@
+import React, { useState } from 'react'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { 
+  Plus, 
+  Edit, 
+  Trash2, 
+  Server, 
+  Users,
+  AlertTriangle,
+  CheckCircle
+} from 'lucide-react'
+import { hostGroupsAPI } from '../utils/api'
+
+const HostGroups = () => {
+  const [showCreateModal, setShowCreateModal] = useState(false)
+  const [showEditModal, setShowEditModal] = useState(false)
+  const [selectedGroup, setSelectedGroup] = useState(null)
+  const [showDeleteModal, setShowDeleteModal] = useState(false)
+  const [groupToDelete, setGroupToDelete] = useState(null)
+
+  const queryClient = useQueryClient()
+
+  // Fetch host groups
+  const { data: hostGroups, isLoading, error } = useQuery({
+    queryKey: ['hostGroups'],
+    queryFn: () => hostGroupsAPI.list().then(res => res.data),
+  })
+
+  // Create host group mutation
+  const createMutation = useMutation({
+    mutationFn: (data) => hostGroupsAPI.create(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries(['hostGroups'])
+      setShowCreateModal(false)
+    },
+    onError: (error) => {
+      console.error('Failed to create host group:', error)
+    }
+  })
+
+  // Update host group mutation
+  const updateMutation = useMutation({
+    mutationFn: ({ id, data }) => hostGroupsAPI.update(id, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries(['hostGroups'])
+      setShowEditModal(false)
+      setSelectedGroup(null)
+    },
+    onError: (error) => {
+      console.error('Failed to update host group:', error)
+    }
+  })
+
+  // Delete host group mutation
+  const deleteMutation = useMutation({
+    mutationFn: (id) => hostGroupsAPI.delete(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries(['hostGroups'])
+      setShowDeleteModal(false)
+      setGroupToDelete(null)
+    },
+    onError: (error) => {
+      console.error('Failed to delete host group:', error)
+    }
+  })
+
+  const handleCreate = (data) => {
+    createMutation.mutate(data)
+  }
+
+  const handleEdit = (group) => {
+    setSelectedGroup(group)
+    setShowEditModal(true)
+  }
+
+  const handleUpdate = (data) => {
+    updateMutation.mutate({ id: selectedGroup.id, data })
+  }
+
+  const handleDeleteClick = (group) => {
+    setGroupToDelete(group)
+    setShowDeleteModal(true)
+  }
+
+  const handleDeleteConfirm = () => {
+    deleteMutation.mutate(groupToDelete.id)
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="bg-danger-50 border border-danger-200 rounded-md p-4">
+        <div className="flex">
+          <AlertTriangle className="h-5 w-5 text-danger-400" />
+          <div className="ml-3">
+            <h3 className="text-sm font-medium text-danger-800">
+              Error loading host groups
+            </h3>
+            <p className="text-sm text-danger-700 mt-1">
+              {error.message || 'Failed to load host groups'}
+            </p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="text-secondary-600 dark:text-secondary-300">
+            Organize your hosts into logical groups for better management
+          </p>
+        </div>
+        <button
+          onClick={() => setShowCreateModal(true)}
+          className="btn-primary flex items-center gap-2"
+        >
+          <Plus className="h-4 w-4" />
+          Create Group
+        </button>
+      </div>
+
+      {/* Host Groups Grid */}
+      {hostGroups && hostGroups.length > 0 ? (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {hostGroups.map((group) => (
+            <div key={group.id} className="bg-white dark:bg-secondary-800 border border-secondary-200 dark:border-secondary-600 rounded-lg p-6 hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow">
+              <div className="flex items-start justify-between">
+                <div className="flex items-center gap-3">
+                  <div 
+                    className="w-3 h-3 rounded-full"
+                    style={{ backgroundColor: group.color }}
+                  />
+                  <div>
+                    <h3 className="text-lg font-semibold text-secondary-900 dark:text-white">
+                      {group.name}
+                    </h3>
+                    {group.description && (
+                      <p className="text-sm text-secondary-600 dark:text-secondary-300 mt-1">
+                        {group.description}
+                      </p>
+                    )}
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  <button
+                    onClick={() => handleEdit(group)}
+                    className="p-1 text-secondary-400 hover:text-secondary-600 hover:bg-secondary-100 rounded"
+                    title="Edit group"
+                  >
+                    <Edit className="h-4 w-4" />
+                  </button>
+                  <button
+                    onClick={() => handleDeleteClick(group)}
+                    className="p-1 text-secondary-400 hover:text-danger-600 hover:bg-danger-50 rounded"
+                    title="Delete group"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </button>
+                </div>
+              </div>
+              
+              <div className="mt-4 flex items-center gap-4 text-sm text-secondary-600 dark:text-secondary-300">
+                <div className="flex items-center gap-1">
+                  <Server className="h-4 w-4" />
+                  <span>{group._count.hosts} host{group._count.hosts !== 1 ? 's' : ''}</span>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="text-center py-12">
+          <Server className="h-12 w-12 text-secondary-400 mx-auto mb-4" />
+          <h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-2">
+            No host groups yet
+          </h3>
+          <p className="text-secondary-600 dark:text-secondary-300 mb-6">
+            Create your first host group to organize your hosts
+          </p>
+          <button
+            onClick={() => setShowCreateModal(true)}
+            className="btn-primary flex items-center gap-2 mx-auto"
+          >
+            <Plus className="h-4 w-4" />
+            Create Group
+          </button>
+        </div>
+      )}
+
+      {/* Create Modal */}
+      {showCreateModal && (
+        <CreateHostGroupModal
+          onClose={() => setShowCreateModal(false)}
+          onSubmit={handleCreate}
+          isLoading={createMutation.isPending}
+        />
+      )}
+
+      {/* Edit Modal */}
+      {showEditModal && selectedGroup && (
+        <EditHostGroupModal
+          group={selectedGroup}
+          onClose={() => {
+            setShowEditModal(false)
+            setSelectedGroup(null)
+          }}
+          onSubmit={handleUpdate}
+          isLoading={updateMutation.isPending}
+        />
+      )}
+
+      {/* Delete Confirmation Modal */}
+      {showDeleteModal && groupToDelete && (
+        <DeleteHostGroupModal
+          group={groupToDelete}
+          onClose={() => {
+            setShowDeleteModal(false)
+            setGroupToDelete(null)
+          }}
+          onConfirm={handleDeleteConfirm}
+          isLoading={deleteMutation.isPending}
+        />
+      )}
+    </div>
+  )
+}
+
+// Create Host Group Modal
+const CreateHostGroupModal = ({ onClose, onSubmit, isLoading }) => {
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+    color: '#3B82F6'
+  })
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    onSubmit(formData)
+  }
+
+  const handleChange = (e) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    })
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white dark:bg-secondary-800 rounded-lg p-6 w-full max-w-md">
+        <h3 className="text-lg font-semibold text-secondary-900 dark:text-white mb-4">
+          Create Host Group
+        </h3>
+        
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-secondary-700 dark:text-secondary-200 mb-1">
+              Name *
+            </label>
+            <input
+              type="text"
+              name="name"
+              value={formData.name}
+              onChange={handleChange}
+              required
+              className="w-full px-3 py-2 border border-secondary-300 dark:border-secondary-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 bg-white dark:bg-secondary-700 text-secondary-900 dark:text-white placeholder-secondary-500 dark:placeholder-secondary-400"
+              placeholder="e.g., Production Servers"
+            />
+          </div>
+          
+          <div>
+            <label className="block text-sm font-medium text-secondary-700 dark:text-secondary-200 mb-1">
+              Description
+            </label>
+            <textarea
+              name="description"
+              value={formData.description}
+              onChange={handleChange}
+              rows={3}
+              className="w-full px-3 py-2 border border-secondary-300 dark:border-secondary-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 bg-white dark:bg-secondary-700 text-secondary-900 dark:text-white placeholder-secondary-500 dark:placeholder-secondary-400"
+              placeholder="Optional description for this group"
+            />
+          </div>
+          
+          <div>
+            <label className="block text-sm font-medium text-secondary-700 dark:text-secondary-200 mb-1">
+              Color
+            </label>
+            <div className="flex items-center gap-3">
+              <input
+                type="color"
+                name="color"
+                value={formData.color}
+                onChange={handleChange}
+                className="w-12 h-10 border border-secondary-300 rounded cursor-pointer"
+              />
+              <input
+                type="text"
+                value={formData.color}
+                onChange={handleChange}
+                className="flex-1 px-3 py-2 border border-secondary-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500"
+                placeholder="#3B82F6"
+              />
+            </div>
+          </div>
+          
+          <div className="flex justify-end gap-3 pt-4">
+            <button
+              type="button"
+              onClick={onClose}
+              className="btn-outline"
+              disabled={isLoading}
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="btn-primary"
+              disabled={isLoading}
+            >
+              {isLoading ? 'Creating...' : 'Create Group'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+// Edit Host Group Modal
+const EditHostGroupModal = ({ group, onClose, onSubmit, isLoading }) => {
+  const [formData, setFormData] = useState({
+    name: group.name,
+    description: group.description || '',
+    color: group.color || '#3B82F6'
+  })
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    onSubmit(formData)
+  }
+
+  const handleChange = (e) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    })
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white dark:bg-secondary-800 rounded-lg p-6 w-full max-w-md">
+        <h3 className="text-lg font-semibold text-secondary-900 dark:text-white mb-4">
+          Edit Host Group
+        </h3>
+        
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-secondary-700 dark:text-secondary-200 mb-1">
+              Name *
+            </label>
+            <input
+              type="text"
+              name="name"
+              value={formData.name}
+              onChange={handleChange}
+              required
+              className="w-full px-3 py-2 border border-secondary-300 dark:border-secondary-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 bg-white dark:bg-secondary-700 text-secondary-900 dark:text-white placeholder-secondary-500 dark:placeholder-secondary-400"
+              placeholder="e.g., Production Servers"
+            />
+          </div>
+          
+          <div>
+            <label className="block text-sm font-medium text-secondary-700 dark:text-secondary-200 mb-1">
+              Description
+            </label>
+            <textarea
+              name="description"
+              value={formData.description}
+              onChange={handleChange}
+              rows={3}
+              className="w-full px-3 py-2 border border-secondary-300 dark:border-secondary-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 bg-white dark:bg-secondary-700 text-secondary-900 dark:text-white placeholder-secondary-500 dark:placeholder-secondary-400"
+              placeholder="Optional description for this group"
+            />
+          </div>
+          
+          <div>
+            <label className="block text-sm font-medium text-secondary-700 dark:text-secondary-200 mb-1">
+              Color
+            </label>
+            <div className="flex items-center gap-3">
+              <input
+                type="color"
+                name="color"
+                value={formData.color}
+                onChange={handleChange}
+                className="w-12 h-10 border border-secondary-300 rounded cursor-pointer"
+              />
+              <input
+                type="text"
+                value={formData.color}
+                onChange={handleChange}
+                className="flex-1 px-3 py-2 border border-secondary-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500"
+                placeholder="#3B82F6"
+              />
+            </div>
+          </div>
+          
+          <div className="flex justify-end gap-3 pt-4">
+            <button
+              type="button"
+              onClick={onClose}
+              className="btn-outline"
+              disabled={isLoading}
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="btn-primary"
+              disabled={isLoading}
+            >
+              {isLoading ? 'Updating...' : 'Update Group'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+// Delete Confirmation Modal
+const DeleteHostGroupModal = ({ group, onClose, onConfirm, isLoading }) => {
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white dark:bg-secondary-800 rounded-lg p-6 w-full max-w-md">
+        <div className="flex items-center gap-3 mb-4">
+          <div className="w-10 h-10 bg-danger-100 rounded-full flex items-center justify-center">
+            <AlertTriangle className="h-5 w-5 text-danger-600" />
+          </div>
+          <div>
+            <h3 className="text-lg font-semibold text-secondary-900 dark:text-white">
+              Delete Host Group
+            </h3>
+            <p className="text-sm text-secondary-600 dark:text-secondary-300">
+              This action cannot be undone
+            </p>
+          </div>
+        </div>
+        
+        <div className="mb-6">
+          <p className="text-secondary-700 dark:text-secondary-200">
+            Are you sure you want to delete the host group{' '}
+            <span className="font-semibold">"{group.name}"</span>?
+          </p>
+          {group._count.hosts > 0 && (
+            <div className="mt-3 p-3 bg-warning-50 border border-warning-200 rounded-md">
+              <p className="text-sm text-warning-800">
+                <strong>Warning:</strong> This group contains {group._count.hosts} host{group._count.hosts !== 1 ? 's' : ''}. 
+                You must move or remove these hosts before deleting the group.
+              </p>
+            </div>
+          )}
+        </div>
+        
+        <div className="flex justify-end gap-3">
+          <button
+            onClick={onClose}
+            className="btn-outline"
+            disabled={isLoading}
+          >
+            Cancel
+          </button>
+          <button
+            onClick={onConfirm}
+            className="btn-danger"
+            disabled={isLoading || group._count.hosts > 0}
+          >
+            {isLoading ? 'Deleting...' : 'Delete Group'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default HostGroups
diff --git a/frontend/src/pages/Hosts.jsx b/frontend/src/pages/Hosts.jsx
new file mode 100644
index 0000000..c1690a7
--- /dev/null
+++ b/frontend/src/pages/Hosts.jsx
@@ -0,0 +1,1598 @@
+import React, { useState, useEffect } from 'react'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { Link, useSearchParams } from 'react-router-dom'
+import { 
+  Server, 
+  AlertTriangle, 
+  CheckCircle, 
+  Clock,
+  RefreshCw,
+  ExternalLink,
+  Plus,
+  Key,
+  Trash2,
+  Copy,
+  X,
+  Eye,
+  EyeOff,
+  Users,
+  CheckSquare,
+  Square,
+  Search,
+  Filter,
+  ArrowUpDown,
+  ArrowUp,
+  ArrowDown,
+  ChevronDown,
+  Settings,
+  Columns,
+  GripVertical,
+  Eye as EyeIcon,
+  EyeOff as EyeOffIcon
+} from 'lucide-react'
+import { dashboardAPI, adminHostsAPI, settingsAPI, hostGroupsAPI, formatRelativeTime } from '../utils/api'
+
+// Add Host Modal Component
+const AddHostModal = ({ isOpen, onClose, onSuccess }) => {
+  const [formData, setFormData] = useState({
+    hostname: '',
+    hostGroupId: ''
+  })
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [error, setError] = useState('')
+
+  // Fetch host groups for selection
+  const { data: hostGroups } = useQuery({
+    queryKey: ['hostGroups'],
+    queryFn: () => hostGroupsAPI.list().then(res => res.data),
+    enabled: isOpen
+  })
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setIsSubmitting(true)
+    setError('')
+
+    console.log('Submitting form data:', formData)
+
+    try {
+      const response = await adminHostsAPI.create(formData)
+      console.log('Host created successfully:', response.data)
+      onSuccess(response.data)
+      setFormData({ hostname: '', hostGroupId: '' })
+      onClose()
+    } catch (err) {
+      console.error('Full error object:', err)
+      console.error('Error response:', err.response)
+      
+      let errorMessage = 'Failed to create host'
+      
+      if (err.response?.data?.errors) {
+        // Validation errors
+        errorMessage = err.response.data.errors.map(e => e.msg).join(', ')
+      } else if (err.response?.data?.error) {
+        // Single error message
+        errorMessage = err.response.data.error
+      } else if (err.message) {
+        // Network or other error
+        errorMessage = err.message
+      }
+      
+      setError(errorMessage)
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg p-6 w-full max-w-md">
+        <div className="flex justify-between items-center mb-4">
+          <h3 className="text-lg font-medium text-secondary-900">Add New Host</h3>
+          <button onClick={onClose} className="text-secondary-400 hover:text-secondary-600">
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-secondary-700">Hostname *</label>
+            <input
+              type="text"
+              required
+              value={formData.hostname}
+              onChange={(e) => setFormData({ ...formData, hostname: e.target.value })}
+              className="mt-1 block w-full border-secondary-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500"
+              placeholder="server.example.com"
+            />
+            <p className="mt-1 text-sm text-secondary-500">
+              System information (OS, IP, architecture) will be automatically detected when the agent connects.
+            </p>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-secondary-700">Host Group</label>
+            <select
+              value={formData.hostGroupId}
+              onChange={(e) => setFormData({ ...formData, hostGroupId: e.target.value })}
+              className="mt-1 block w-full border-secondary-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500"
+            >
+              <option value="">No group (ungrouped)</option>
+              {hostGroups?.map((group) => (
+                <option key={group.id} value={group.id}>
+                  {group.name}
+                </option>
+              ))}
+            </select>
+            <p className="mt-1 text-sm text-secondary-500">
+              Optional: Assign this host to a group for better organization.
+            </p>
+          </div>
+
+          {error && (
+            <div className="bg-danger-50 border border-danger-200 rounded-md p-3">
+              <p className="text-sm text-danger-700">{error}</p>
+            </div>
+          )}
+
+          <div className="flex justify-end space-x-3">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2 text-sm font-medium text-secondary-700 bg-white border border-secondary-300 rounded-md hover:bg-secondary-50"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={isSubmitting}
+              className="px-4 py-2 text-sm font-medium text-white bg-primary-600 border border-transparent rounded-md hover:bg-primary-700 disabled:opacity-50"
+            >
+              {isSubmitting ? 'Creating...' : 'Create Host'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+// Credentials Modal Component
+const CredentialsModal = ({ host, isOpen, onClose }) => {
+  const [showApiKey, setShowApiKey] = useState(false)
+  const [activeTab, setActiveTab] = useState(host?.isNewHost ? 'quick' : 'credentials')
+
+  // Update active tab when host changes
+  React.useEffect(() => {
+    if (host?.isNewHost) {
+      setActiveTab('quick')
+    } else {
+      setActiveTab('credentials')
+    }
+  }, [host?.isNewHost])
+
+  const copyToClipboard = (text, label) => {
+    navigator.clipboard.writeText(text)
+    alert(`${label} copied to clipboard!`)
+  }
+
+  // Fetch server URL from settings
+  const { data: settings } = useQuery({
+    queryKey: ['settings'],
+    queryFn: () => settingsAPI.get().then(res => res.data),
+    enabled: isOpen // Only fetch when modal is open
+  })
+
+  const serverUrl = settings?.serverUrl || window.location.origin.replace(':3000', ':3001')
+
+  const getSetupCommands = () => {
+    return {
+      oneLine: `curl -sSL ${serverUrl}/api/v1/hosts/install | bash -s -- ${serverUrl} "${host?.apiId}" "${host?.apiKey}"`,
+
+      download: `# Download and setup PatchMon agent
+curl -o /tmp/patchmon-agent.sh ${serverUrl}/api/v1/hosts/agent/download
+sudo mkdir -p /etc/patchmon
+sudo mv /tmp/patchmon-agent.sh /usr/local/bin/patchmon-agent.sh
+sudo chmod +x /usr/local/bin/patchmon-agent.sh`,
+
+      configure: `# Configure API credentials
+sudo /usr/local/bin/patchmon-agent.sh configure "${host?.apiId}" "${host?.apiKey}"`,
+
+      test: `# Test the configuration
+sudo /usr/local/bin/patchmon-agent.sh test`,
+
+      initialUpdate: `# Send initial package data
+sudo /usr/local/bin/patchmon-agent.sh update`,
+
+      crontab: `# Add to crontab for hourly updates (run as root)
+echo "0 * * * * /usr/local/bin/patchmon-agent.sh update >/dev/null 2>&1" | sudo crontab -`,
+
+      fullSetup: `#!/bin/bash
+# Complete PatchMon Agent Setup Script
+# Run this on the target host: ${host?.hostname}
+
+echo "🔄 Setting up PatchMon agent..."
+
+# Download and install agent
+echo "📥 Downloading agent script..."
+curl -o /tmp/patchmon-agent.sh ${serverUrl}/api/v1/hosts/agent/download
+sudo mkdir -p /etc/patchmon
+sudo mv /tmp/patchmon-agent.sh /usr/local/bin/patchmon-agent.sh
+sudo chmod +x /usr/local/bin/patchmon-agent.sh
+
+# Configure credentials
+echo "🔑 Configuring API credentials..."
+sudo /usr/local/bin/patchmon-agent.sh configure "${host?.apiId}" "${host?.apiKey}"
+
+# Test configuration
+echo "🧪 Testing configuration..."
+sudo /usr/local/bin/patchmon-agent.sh test
+
+# Send initial update
+echo "📊 Sending initial package data..."
+sudo /usr/local/bin/patchmon-agent.sh update
+
+# Setup crontab
+echo "⏰ Setting up hourly crontab..."
+echo "0 * * * * /usr/local/bin/patchmon-agent.sh update >/dev/null 2>&1" | sudo crontab -
+
+echo "✅ PatchMon agent setup complete!"
+echo "   - Agent installed: /usr/local/bin/patchmon-agent.sh"
+echo "   - Config directory: /etc/patchmon/"
+echo "   - Updates: Every hour via crontab"
+echo "   - View logs: tail -f /var/log/patchmon-agent.log"`
+    }
+  }
+
+  if (!isOpen || !host) return null
+
+  const commands = getSetupCommands()
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg p-6 w-full max-w-4xl max-h-[90vh] overflow-y-auto">
+        <div className="flex justify-between items-center mb-4">
+          <h3 className="text-lg font-medium text-secondary-900">Host Setup - {host.hostname}</h3>
+          <button onClick={onClose} className="text-secondary-400 hover:text-secondary-600">
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        {/* Tabs */}
+        <div className="flex space-x-1 mb-6 bg-secondary-100 p-1 rounded-lg">
+          <button
+            onClick={() => setActiveTab('quick')}
+            className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
+              activeTab === 'quick'
+                ? 'bg-white text-secondary-900 shadow-sm'
+                : 'text-secondary-600 hover:text-secondary-900'
+            }`}
+          >
+            Quick Install
+          </button>
+          <button
+            onClick={() => setActiveTab('credentials')}
+            className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
+              activeTab === 'credentials'
+                ? 'bg-white text-secondary-900 shadow-sm'
+                : 'text-secondary-600 hover:text-secondary-900'
+            }`}
+          >
+            API Credentials
+          </button>
+          <button
+            onClick={() => setActiveTab('setup')}
+            className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
+              activeTab === 'setup'
+                ? 'bg-white text-secondary-900 shadow-sm'
+                : 'text-secondary-600 hover:text-secondary-900'
+            }`}
+          >
+            Setup Instructions
+          </button>
+          <button
+            onClick={() => setActiveTab('script')}
+            className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
+              activeTab === 'script'
+                ? 'bg-white text-secondary-900 shadow-sm'
+                : 'text-secondary-600 hover:text-secondary-900'
+            }`}
+          >
+            Auto-Setup Script
+          </button>
+        </div>
+
+        {/* Tab Content */}
+        {activeTab === 'quick' && (
+          <div className="space-y-6">
+            <div className="bg-green-50 border border-green-200 rounded-md p-4">
+              <h4 className="text-sm font-medium text-green-800 mb-2">🚀 One-Line Installation</h4>
+              <p className="text-sm text-green-700">
+                Copy and paste this single command on <strong>{host.hostname}</strong> to install and configure the PatchMon agent automatically.
+              </p>
+            </div>
+
+            <div className="border border-secondary-200 rounded-lg p-4">
+              <h5 className="font-medium text-secondary-900 mb-3">Installation Command</h5>
+              <div className="bg-secondary-900 text-secondary-100 p-3 rounded font-mono text-sm">
+                <div className="flex justify-between items-start">
+                  <code className="flex-1 whitespace-pre-wrap break-all">{commands.oneLine}</code>
+                  <button
+                    onClick={() => copyToClipboard(commands.oneLine, 'Installation command')}
+                    className="ml-2 text-secondary-400 hover:text-secondary-200 flex-shrink-0"
+                  >
+                    <Copy className="h-4 w-4" />
+                  </button>
+                </div>
+              </div>
+              <p className="text-xs text-secondary-500 mt-2">
+                This command will download, install, configure, and set up automatic updates for the PatchMon agent.
+              </p>
+            </div>
+
+            <div className="bg-blue-50 border border-blue-200 rounded-md p-4">
+              <h4 className="text-sm font-medium text-blue-800 mb-2">📋 What This Command Does</h4>
+              <ul className="text-sm text-blue-700 space-y-1">
+                <li>• Downloads the PatchMon installation script</li>
+                <li>• Installs the agent to <code>/usr/local/bin/patchmon-agent.sh</code></li>
+                <li>• Configures API credentials for <strong>{host.hostname}</strong></li>
+                <li>• Tests the connection to PatchMon server</li>
+                <li>• Sends initial package data</li>
+                <li>• Sets up hourly automatic updates via crontab</li>
+              </ul>
+            </div>
+
+            <div className="bg-amber-50 border border-amber-200 rounded-md p-4">
+              <h4 className="text-sm font-medium text-amber-800 mb-2">⚠️ Requirements</h4>
+              <ul className="text-sm text-amber-700 space-y-1">
+                <li>• Must be run as root (use <code>sudo</code>)</li>
+                <li>• Requires internet connection to download agent</li>
+                <li>• Requires <code>curl</code> and <code>bash</code> to be installed</li>
+                <li>• Host must be able to reach the PatchMon server</li>
+              </ul>
+            </div>
+          </div>
+        )}
+
+        {activeTab === 'credentials' && (
+          <div className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-secondary-700 mb-2">API ID</label>
+              <div className="flex">
+                <input
+                  type="text"
+                  readOnly
+                  value={host.apiId}
+                  className="flex-1 block w-full border-secondary-300 rounded-l-md shadow-sm bg-secondary-50"
+                />
+                <button
+                  onClick={() => copyToClipboard(host.apiId, 'API ID')}
+                  className="px-3 py-2 border border-l-0 border-secondary-300 rounded-r-md bg-secondary-50 hover:bg-secondary-100"
+                >
+                  <Copy className="h-4 w-4" />
+                </button>
+              </div>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-secondary-700 mb-2">API Key</label>
+              <div className="flex">
+                <input
+                  type={showApiKey ? 'text' : 'password'}
+                  readOnly
+                  value={host.apiKey}
+                  className="flex-1 block w-full border-secondary-300 rounded-l-md shadow-sm bg-secondary-50"
+                />
+                <button
+                  onClick={() => setShowApiKey(!showApiKey)}
+                  className="px-3 py-2 border border-l-0 border-r-0 border-secondary-300 bg-secondary-50 hover:bg-secondary-100"
+                >
+                  {showApiKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                </button>
+                <button
+                  onClick={() => copyToClipboard(host.apiKey, 'API Key')}
+                  className="px-3 py-2 border border-l-0 border-secondary-300 rounded-r-md bg-secondary-50 hover:bg-secondary-100"
+                >
+                  <Copy className="h-4 w-4" />
+                </button>
+              </div>
+            </div>
+
+            <div className="bg-amber-50 border border-amber-200 rounded-md p-4">
+              <h4 className="text-sm font-medium text-amber-800 mb-2">⚠️ Security Note</h4>
+              <p className="text-sm text-amber-700">
+                Keep these credentials secure. They provide access to update package information for <strong>{host.hostname}</strong> only.
+              </p>
+            </div>
+          </div>
+        )}
+
+        {activeTab === 'setup' && (
+          <div className="space-y-6">
+            <div className="bg-blue-50 border border-blue-200 rounded-md p-4">
+              <h4 className="text-sm font-medium text-blue-800 mb-2">📋 Step-by-Step Setup</h4>
+              <p className="text-sm text-blue-700">
+                Follow these commands on <strong>{host.hostname}</strong> to install and configure the PatchMon agent.
+              </p>
+            </div>
+
+            {/* Step 1: Download & Install */}
+            <div className="border border-secondary-200 rounded-lg p-4">
+              <h5 className="font-medium text-secondary-900 mb-3">Step 1: Download & Install Agent</h5>
+              <div className="bg-secondary-900 text-secondary-100 p-3 rounded font-mono text-sm">
+                <div className="flex justify-between items-start">
+                  <code className="flex-1 whitespace-pre-wrap">{commands.download}</code>
+                  <button
+                    onClick={() => copyToClipboard(commands.download, 'Download commands')}
+                    className="ml-2 text-secondary-400 hover:text-secondary-200 flex-shrink-0"
+                  >
+                    <Copy className="h-4 w-4" />
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            {/* Step 2: Configure */}
+            <div className="border border-secondary-200 rounded-lg p-4">
+              <h5 className="font-medium text-secondary-900 mb-3">Step 2: Configure API Credentials</h5>
+              <div className="bg-secondary-900 text-secondary-100 p-3 rounded font-mono text-sm">
+                <div className="flex justify-between items-start">
+                  <code className="flex-1">{commands.configure}</code>
+                  <button
+                    onClick={() => copyToClipboard(commands.configure, 'Configure command')}
+                    className="ml-2 text-secondary-400 hover:text-secondary-200"
+                  >
+                    <Copy className="h-4 w-4" />
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            {/* Step 3: Test */}
+            <div className="border border-secondary-200 rounded-lg p-4">
+              <h5 className="font-medium text-secondary-900 mb-3">Step 3: Test Configuration</h5>
+              <div className="bg-secondary-900 text-secondary-100 p-3 rounded font-mono text-sm">
+                <div className="flex justify-between items-start">
+                  <code className="flex-1">{commands.test}</code>
+                  <button
+                    onClick={() => copyToClipboard(commands.test, 'Test command')}
+                    className="ml-2 text-secondary-400 hover:text-secondary-200"
+                  >
+                    <Copy className="h-4 w-4" />
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            {/* Step 4: Initial Update */}
+            <div className="border border-secondary-200 rounded-lg p-4">
+              <h5 className="font-medium text-secondary-900 mb-3">Step 4: Send Initial Package Data</h5>
+              <p className="text-sm text-secondary-600 mb-3">
+                This will automatically detect and send system information (OS, IP, architecture) along with package data.
+              </p>
+              <div className="bg-secondary-900 text-secondary-100 p-3 rounded font-mono text-sm">
+                <div className="flex justify-between items-start">
+                  <code className="flex-1">{commands.initialUpdate}</code>
+                  <button
+                    onClick={() => copyToClipboard(commands.initialUpdate, 'Initial update command')}
+                    className="ml-2 text-secondary-400 hover:text-secondary-200"
+                  >
+                    <Copy className="h-4 w-4" />
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            {/* Step 5: Crontab */}
+            <div className="border border-secondary-200 rounded-lg p-4">
+              <h5 className="font-medium text-secondary-900 mb-3">Step 5: Setup Hourly Updates</h5>
+              <div className="bg-secondary-900 text-secondary-100 p-3 rounded font-mono text-sm">
+                <div className="flex justify-between items-start">
+                  <code className="flex-1">{commands.crontab}</code>
+                  <button
+                    onClick={() => copyToClipboard(commands.crontab, 'Crontab command')}
+                    className="ml-2 text-secondary-400 hover:text-secondary-200"
+                  >
+                    <Copy className="h-4 w-4" />
+                  </button>
+                </div>
+              </div>
+              <p className="text-xs text-secondary-500 mt-2">
+                This sets up automatic package updates every hour at the top of the hour.
+              </p>
+            </div>
+          </div>
+        )}
+
+        {activeTab === 'script' && (
+          <div className="space-y-4">
+            <div className="bg-green-50 border border-green-200 rounded-md p-4">
+              <h4 className="text-sm font-medium text-green-800 mb-2">🚀 Automated Setup</h4>
+              <p className="text-sm text-green-700">
+                Copy this complete setup script to <strong>{host.hostname}</strong> and run it to automatically install and configure everything.
+              </p>
+            </div>
+
+            <div className="border border-secondary-200 rounded-lg p-4">
+              <div className="flex justify-between items-center mb-3">
+                <h5 className="font-medium text-secondary-900">Complete Setup Script</h5>
+                <button
+                  onClick={() => copyToClipboard(commands.fullSetup, 'Complete setup script')}
+                  className="px-3 py-1 bg-primary-600 text-white rounded text-sm hover:bg-primary-700 flex items-center gap-2"
+                >
+                  <Copy className="h-4 w-4" />
+                  Copy Script
+                </button>
+              </div>
+              <div className="bg-secondary-900 text-secondary-100 p-4 rounded font-mono text-xs overflow-x-auto">
+                <pre className="whitespace-pre-wrap">{commands.fullSetup}</pre>
+              </div>
+              <div className="mt-3 text-sm text-secondary-600">
+                <p><strong>Usage:</strong></p>
+                <p>1. Copy the script above</p>
+                <p>2. Save it to a file on {host.hostname} (e.g., <code>setup-patchmon.sh</code>)</p>
+                <p>3. Run: <code>chmod +x setup-patchmon.sh && sudo ./setup-patchmon.sh</code></p>
+              </div>
+            </div>
+          </div>
+        )}
+
+        <div className="mt-6 flex justify-end space-x-3">
+          <a
+            href={`${serverUrl}/api/v1/hosts/agent/download`}
+            download="patchmon-agent.sh"
+            className="px-4 py-2 text-sm font-medium text-primary-700 bg-primary-50 border border-primary-200 rounded-md hover:bg-primary-100"
+          >
+            Download Agent Script
+          </a>
+          <button
+            onClick={onClose}
+            className="px-4 py-2 text-sm font-medium text-secondary-700 bg-white border border-secondary-300 rounded-md hover:bg-secondary-50"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const Hosts = () => {
+  const [showAddModal, setShowAddModal] = useState(false)
+  const [selectedHosts, setSelectedHosts] = useState([])
+  const [showBulkAssignModal, setShowBulkAssignModal] = useState(false)
+  const [searchParams] = useSearchParams()
+  
+  // Table state
+  const [searchTerm, setSearchTerm] = useState('')
+  const [sortField, setSortField] = useState('hostname')
+  const [sortDirection, setSortDirection] = useState('asc')
+  const [groupFilter, setGroupFilter] = useState('all')
+  const [statusFilter, setStatusFilter] = useState('all')
+  const [osFilter, setOsFilter] = useState('all')
+  const [showFilters, setShowFilters] = useState(false)
+  const [groupBy, setGroupBy] = useState('none')
+  const [showColumnSettings, setShowColumnSettings] = useState(false)
+
+  // Handle URL filter parameters
+  useEffect(() => {
+    const filter = searchParams.get('filter')
+    if (filter === 'needsUpdates') {
+      setShowFilters(true)
+      // We'll filter hosts with updates > 0 in the filtering logic
+    }
+  }, [searchParams])
+
+  // Column configuration
+  const [columnConfig, setColumnConfig] = useState(() => {
+    const defaultConfig = [
+      { id: 'select', label: 'Select', visible: true, order: 0 },
+      { id: 'host', label: 'Host', visible: true, order: 1 },
+      { id: 'ip', label: 'IP Address', visible: false, order: 2 },
+      { id: 'group', label: 'Group', visible: true, order: 3 },
+      { id: 'os', label: 'OS', visible: true, order: 4 },
+      { id: 'osVersion', label: 'OS Version', visible: false, order: 5 },
+      { id: 'agentVersion', label: 'Agent Version', visible: true, order: 6 },
+      { id: 'autoUpdate', label: 'Auto-update', visible: true, order: 7 },
+      { id: 'status', label: 'Status', visible: true, order: 8 },
+      { id: 'updates', label: 'Updates', visible: true, order: 9 },
+      { id: 'lastUpdate', label: 'Last Update', visible: true, order: 10 },
+      { id: 'actions', label: 'Actions', visible: true, order: 11 }
+    ]
+
+    const saved = localStorage.getItem('hosts-column-config')
+    if (saved) {
+      const savedConfig = JSON.parse(saved)
+      
+      // Check if agentVersion column exists in saved config
+      const hasAgentVersion = savedConfig.some(col => col.id === 'agentVersion')
+      const hasAutoUpdate = savedConfig.some(col => col.id === 'autoUpdate')
+      
+      let needsUpdate = false
+      let updatedConfig = [...savedConfig]
+      
+      if (!hasAgentVersion) {
+        // Add agentVersion column to saved config
+        const agentVersionColumn = { id: 'agentVersion', label: 'Agent Version', visible: true, order: 6 }
+        
+        // Insert agentVersion column at the correct position
+        updatedConfig = updatedConfig.map(col => {
+          if (col.order >= 6) {
+            return { ...col, order: col.order + 1 }
+          }
+          return col
+        })
+        
+        updatedConfig.push(agentVersionColumn)
+        needsUpdate = true
+      }
+      
+      if (!hasAutoUpdate) {
+        // Add autoUpdate column to saved config
+        const autoUpdateColumn = { id: 'autoUpdate', label: 'Auto-update', visible: true, order: 7 }
+        
+        // Insert autoUpdate column at the correct position
+        updatedConfig = updatedConfig.map(col => {
+          if (col.order >= 7) {
+            return { ...col, order: col.order + 1 }
+          }
+          return col
+        })
+        
+        updatedConfig.push(autoUpdateColumn)
+        needsUpdate = true
+      }
+      
+      if (needsUpdate) {
+        updatedConfig.sort((a, b) => a.order - b.order)
+        localStorage.setItem('hosts-column-config', JSON.stringify(updatedConfig))
+        return updatedConfig
+      }
+      
+      return savedConfig
+    }
+    
+    return defaultConfig
+  })
+  
+  const queryClient = useQueryClient()
+
+  const { data: hosts, isLoading, error, refetch } = useQuery({
+    queryKey: ['hosts'],
+    queryFn: () => dashboardAPI.getHosts().then(res => res.data),
+      refetchInterval: 60000,
+      staleTime: 30000,
+  })
+
+  const { data: hostGroups } = useQuery({
+    queryKey: ['hostGroups'],
+    queryFn: () => hostGroupsAPI.list().then(res => res.data),
+  })
+
+  const bulkUpdateGroupMutation = useMutation({
+    mutationFn: ({ hostIds, hostGroupId }) => adminHostsAPI.bulkUpdateGroup(hostIds, hostGroupId),
+    onSuccess: () => {
+      queryClient.invalidateQueries(['hosts'])
+      setSelectedHosts([])
+      setShowBulkAssignModal(false)
+    },
+  })
+
+  // Toggle auto-update mutation
+  const toggleAutoUpdateMutation = useMutation({
+    mutationFn: ({ hostId, autoUpdate }) => adminHostsAPI.toggleAutoUpdate(hostId, autoUpdate).then(res => res.data),
+    onSuccess: () => {
+      queryClient.invalidateQueries(['hosts'])
+    }
+  })
+
+  // Helper functions for bulk selection
+  const handleSelectHost = (hostId) => {
+    setSelectedHosts(prev => 
+      prev.includes(hostId) 
+        ? prev.filter(id => id !== hostId)
+        : [...prev, hostId]
+    )
+  }
+
+  const handleSelectAll = () => {
+    if (selectedHosts.length === hosts.length) {
+      setSelectedHosts([])
+    } else {
+      setSelectedHosts(hosts.map(host => host.id))
+    }
+  }
+
+  const handleBulkAssign = (hostGroupId) => {
+    bulkUpdateGroupMutation.mutate({ hostIds: selectedHosts, hostGroupId })
+  }
+
+  // Table filtering and sorting logic
+  const filteredAndSortedHosts = React.useMemo(() => {
+    if (!hosts) return []
+
+    let filtered = hosts.filter(host => {
+      // Search filter
+      const matchesSearch = searchTerm === '' || 
+        host.hostname.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        host.ip?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        host.osType?.toLowerCase().includes(searchTerm.toLowerCase())
+
+      // Group filter
+      const matchesGroup = groupFilter === 'all' || 
+        (groupFilter === 'ungrouped' && !host.hostGroup) ||
+        (groupFilter !== 'ungrouped' && host.hostGroup?.id === groupFilter)
+
+      // Status filter
+      const matchesStatus = statusFilter === 'all' || host.status === statusFilter
+
+      // OS filter
+      const matchesOs = osFilter === 'all' || host.osType?.toLowerCase() === osFilter.toLowerCase()
+
+      // URL filter for hosts needing updates
+      const filter = searchParams.get('filter')
+      const matchesUrlFilter = filter !== 'needsUpdates' || (host.updatesCount && host.updatesCount > 0)
+
+      return matchesSearch && matchesGroup && matchesStatus && matchesOs && matchesUrlFilter
+    })
+
+    // Sorting
+    filtered.sort((a, b) => {
+      let aValue, bValue
+      
+      switch (sortField) {
+        case 'hostname':
+          aValue = a.hostname.toLowerCase()
+          bValue = b.hostname.toLowerCase()
+          break
+        case 'ip':
+          aValue = a.ip?.toLowerCase() || 'zzz_no_ip'
+          bValue = b.ip?.toLowerCase() || 'zzz_no_ip'
+          break
+        case 'group':
+          aValue = a.hostGroup?.name || 'zzz_ungrouped'
+          bValue = b.hostGroup?.name || 'zzz_ungrouped'
+          break
+        case 'os':
+          aValue = a.osType?.toLowerCase() || 'zzz_unknown'
+          bValue = b.osType?.toLowerCase() || 'zzz_unknown'
+          break
+        case 'osVersion':
+          aValue = a.osVersion?.toLowerCase() || 'zzz_unknown'
+          bValue = b.osVersion?.toLowerCase() || 'zzz_unknown'
+          break
+        case 'agentVersion':
+          aValue = a.agentVersion?.toLowerCase() || 'zzz_no_version'
+          bValue = b.agentVersion?.toLowerCase() || 'zzz_no_version'
+          break
+        case 'status':
+          aValue = a.status
+          bValue = b.status
+          break
+        case 'updates':
+          aValue = a.updatesCount || 0
+          bValue = b.updatesCount || 0
+          break
+        case 'lastUpdate':
+          aValue = new Date(a.lastUpdate)
+          bValue = new Date(b.lastUpdate)
+          break
+        default:
+          aValue = a[sortField]
+          bValue = b[sortField]
+      }
+
+      if (aValue < bValue) return sortDirection === 'asc' ? -1 : 1
+      if (aValue > bValue) return sortDirection === 'asc' ? 1 : -1
+      return 0
+    })
+
+    return filtered
+  }, [hosts, searchTerm, groupFilter, statusFilter, osFilter, sortField, sortDirection, searchParams])
+
+  // Group hosts by selected field
+  const groupedHosts = React.useMemo(() => {
+    if (groupBy === 'none') {
+      return { 'All Hosts': filteredAndSortedHosts }
+    }
+
+    const groups = {}
+    filteredAndSortedHosts.forEach(host => {
+      let groupKey
+      switch (groupBy) {
+        case 'group':
+          groupKey = host.hostGroup?.name || 'Ungrouped'
+          break
+        case 'status':
+          groupKey = host.status.charAt(0).toUpperCase() + host.status.slice(1)
+          break
+        case 'os':
+          groupKey = host.osType || 'Unknown'
+          break
+        default:
+          groupKey = 'All Hosts'
+      }
+      
+      if (!groups[groupKey]) {
+        groups[groupKey] = []
+      }
+      groups[groupKey].push(host)
+    })
+
+    return groups
+  }, [filteredAndSortedHosts, groupBy])
+
+  const handleSort = (field) => {
+    if (sortField === field) {
+      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc')
+    } else {
+      setSortField(field)
+      setSortDirection('asc')
+    }
+  }
+
+  const getSortIcon = (field) => {
+    if (sortField !== field) return <ArrowUpDown className="h-4 w-4" />
+    return sortDirection === 'asc' ? <ArrowUp className="h-4 w-4" /> : <ArrowDown className="h-4 w-4" />
+  }
+
+  // Column management functions
+  const updateColumnConfig = (newConfig) => {
+    setColumnConfig(newConfig)
+    localStorage.setItem('hosts-column-config', JSON.stringify(newConfig))
+  }
+
+  const toggleColumnVisibility = (columnId) => {
+    const newConfig = columnConfig.map(col => 
+      col.id === columnId ? { ...col, visible: !col.visible } : col
+    )
+    updateColumnConfig(newConfig)
+  }
+
+  const reorderColumns = (fromIndex, toIndex) => {
+    const newConfig = [...columnConfig]
+    const [movedColumn] = newConfig.splice(fromIndex, 1)
+    newConfig.splice(toIndex, 0, movedColumn)
+    
+    // Update order values
+    const updatedConfig = newConfig.map((col, index) => ({ ...col, order: index }))
+    updateColumnConfig(updatedConfig)
+  }
+
+  const resetColumns = () => {
+    const defaultConfig = [
+      { id: 'select', label: 'Select', visible: true, order: 0 },
+      { id: 'host', label: 'Host', visible: true, order: 1 },
+      { id: 'ip', label: 'IP Address', visible: false, order: 2 },
+      { id: 'group', label: 'Group', visible: true, order: 3 },
+      { id: 'os', label: 'OS', visible: true, order: 4 },
+      { id: 'osVersion', label: 'OS Version', visible: false, order: 5 },
+      { id: 'status', label: 'Status', visible: true, order: 6 },
+      { id: 'updates', label: 'Updates', visible: true, order: 7 },
+      { id: 'lastUpdate', label: 'Last Update', visible: true, order: 8 },
+      { id: 'actions', label: 'Actions', visible: true, order: 9 }
+    ]
+    updateColumnConfig(defaultConfig)
+  }
+
+  // Get visible columns in order
+  const visibleColumns = columnConfig
+    .filter(col => col.visible)
+    .sort((a, b) => a.order - b.order)
+
+  // Helper function to render table cell content
+  const renderCellContent = (column, host) => {
+    switch (column.id) {
+      case 'select':
+        return (
+          <button
+            onClick={() => handleSelectHost(host.id)}
+            className="flex items-center gap-2 hover:text-secondary-700"
+          >
+            {selectedHosts.includes(host.id) ? (
+              <CheckSquare className="h-4 w-4 text-primary-600" />
+            ) : (
+              <Square className="h-4 w-4 text-secondary-400" />
+            )}
+          </button>
+        )
+      case 'host':
+        return (
+          <Link
+            to={`/hosts/${host.id}`}
+            className="text-sm font-medium text-primary-600 hover:text-primary-900 hover:underline"
+          >
+            {host.hostname}
+          </Link>
+        )
+      case 'ip':
+        return (
+          <div className="text-sm text-secondary-900 dark:text-white">
+            {host.ip || 'N/A'}
+          </div>
+        )
+      case 'group':
+        return host.hostGroup ? (
+          <span 
+            className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium text-white"
+            style={{ backgroundColor: host.hostGroup.color }}
+          >
+            {host.hostGroup.name}
+          </span>
+        ) : (
+          <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-secondary-100 text-secondary-800">
+            Ungrouped
+          </span>
+        )
+      case 'os':
+        return (
+          <div className="text-sm text-secondary-900 dark:text-white">
+            {host.osType}
+          </div>
+        )
+      case 'osVersion':
+        return (
+          <div className="text-sm text-secondary-900 dark:text-white">
+            {host.osVersion || 'N/A'}
+          </div>
+        )
+      case 'agentVersion':
+        return (
+          <div className="text-sm text-secondary-900 dark:text-white">
+            {host.agentVersion || 'N/A'}
+          </div>
+        )
+      case 'autoUpdate':
+        return (
+          <span className={`text-sm font-medium ${
+            host.autoUpdate 
+              ? 'text-green-600 dark:text-green-400' 
+              : 'text-red-600 dark:text-red-400'
+          }`}>
+            {host.autoUpdate ? 'Yes' : 'No'}
+          </span>
+        )
+      case 'status':
+        return (
+          <div className="text-sm text-secondary-900 dark:text-white">
+            {host.status.charAt(0).toUpperCase() + host.status.slice(1)}
+          </div>
+        )
+      case 'updates':
+        return (
+          <div className="text-sm text-secondary-900 dark:text-white">
+            {host.updatesCount || 0}
+          </div>
+        )
+      case 'lastUpdate':
+        return (
+          <div className="text-sm text-secondary-500 dark:text-secondary-300">
+            {formatRelativeTime(host.lastUpdate)}
+          </div>
+        )
+      case 'actions':
+        return (
+          <Link
+            to={`/hosts/${host.id}`}
+            className="text-primary-600 hover:text-primary-900 flex items-center gap-1"
+          >
+            View
+            <ExternalLink className="h-3 w-3" />
+          </Link>
+        )
+      default:
+        return null
+    }
+  }
+
+  const handleHostCreated = (newHost) => {
+    queryClient.invalidateQueries(['hosts'])
+    // Host created successfully - user can view details for setup instructions
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <RefreshCw className="h-8 w-8 animate-spin text-primary-600" />
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="bg-danger-50 border border-danger-200 rounded-md p-4">
+        <div className="flex">
+          <AlertTriangle className="h-5 w-5 text-danger-400" />
+          <div className="ml-3">
+            <h3 className="text-sm font-medium text-danger-800">Error loading hosts</h3>
+            <p className="text-sm text-danger-700 mt-1">
+              {error.message || 'Failed to load hosts'}
+            </p>
+            <button
+              onClick={() => refetch()}
+              className="mt-2 btn-danger text-xs"
+            >
+              Try again
+            </button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  const getStatusColor = (host) => {
+    if (host.isStale) return 'text-danger-600'
+    if (host.updatesCount > 0) return 'text-warning-600'
+    return 'text-success-600'
+  }
+
+  const getStatusIcon = (host) => {
+    if (host.isStale) return <AlertTriangle className="h-5 w-5" />
+    if (host.updatesCount > 0) return <Clock className="h-5 w-5" />
+    return <CheckCircle className="h-5 w-5" />
+  }
+
+  const getStatusText = (host) => {
+    if (host.isStale) return 'Stale'
+    if (host.updatesCount > 0) return 'Needs Updates'
+    return 'Up to Date'
+  }
+
+  return (
+    <div className="space-y-6">
+
+      {/* Stats Summary */}
+      <div className="grid grid-cols-1 sm:grid-cols-4 gap-4 mb-4">
+        <div className="card p-4">
+          <div className="flex items-center">
+            <Server className="h-5 w-5 text-primary-600 mr-2" />
+            <div>
+              <p className="text-sm text-secondary-500 dark:text-white">Total Hosts</p>
+              <p className="text-xl font-semibold text-secondary-900 dark:text-white">{hosts?.length || 0}</p>
+            </div>
+          </div>
+        </div>
+        <div className="card p-4">
+          <div className="flex items-center">
+            <CheckCircle className="h-5 w-5 text-success-600 mr-2" />
+            <div>
+              <p className="text-sm text-secondary-500 dark:text-white">Up to Date</p>
+              <p className="text-xl font-semibold text-secondary-900 dark:text-white">
+                {hosts?.filter(h => !h.isStale && h.updatesCount === 0).length || 0}
+              </p>
+            </div>
+          </div>
+        </div>
+        <div className="card p-4">
+          <div className="flex items-center">
+            <Clock className="h-5 w-5 text-warning-600 mr-2" />
+            <div>
+              <p className="text-sm text-secondary-500 dark:text-white">Needs Updates</p>
+              <p className="text-xl font-semibold text-secondary-900 dark:text-white">
+                {hosts?.filter(h => !h.isStale && h.updatesCount > 0).length || 0}
+              </p>
+            </div>
+          </div>
+        </div>
+        <div className="card p-4">
+          <div className="flex items-center">
+            <AlertTriangle className="h-5 w-5 text-danger-600 mr-2" />
+            <div>
+              <p className="text-sm text-secondary-500 dark:text-white">Stale</p>
+              <p className="text-xl font-semibold text-secondary-900 dark:text-white">
+                {hosts?.filter(h => h.isStale).length || 0}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Hosts List */}
+      <div className="card">
+        <div className="px-4 py-4 sm:p-4">
+          <div className="flex items-center justify-end mb-4">
+            {selectedHosts.length > 0 && (
+              <div className="flex items-center gap-3">
+                <span className="text-sm text-secondary-600">
+                  {selectedHosts.length} host{selectedHosts.length !== 1 ? 's' : ''} selected
+                </span>
+                <button
+                  onClick={() => setShowBulkAssignModal(true)}
+                  className="btn-outline flex items-center gap-2"
+                >
+                  <Users className="h-4 w-4" />
+                  Assign to Group
+                </button>
+                <button
+                  onClick={() => setSelectedHosts([])}
+                  className="text-sm text-secondary-500 hover:text-secondary-700"
+                >
+                  Clear Selection
+                </button>
+              </div>
+            )}
+          </div>
+          
+          {/* Table Controls */}
+          <div className="mb-4 space-y-4">
+            {/* Search and Filter Bar */}
+            <div className="flex flex-col sm:flex-row gap-4">
+              <div className="flex-1">
+                <div className="relative">
+                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-secondary-400 dark:text-secondary-500" />
+                  <input
+                    type="text"
+                    placeholder="Search hosts, IP addresses, or OS..."
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                    className="pl-10 pr-4 py-2 w-full border border-secondary-300 dark:border-secondary-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white placeholder-secondary-500 dark:placeholder-secondary-400"
+                  />
+                </div>
+              </div>
+              <div className="flex gap-2">
+                <button
+                  onClick={() => setShowFilters(!showFilters)}
+                  className={`btn-outline flex items-center gap-2 ${showFilters ? 'bg-primary-50 border-primary-300' : ''}`}
+                >
+                  <Filter className="h-4 w-4" />
+                  Filters
+                </button>
+                <button
+                  onClick={() => setShowColumnSettings(true)}
+                  className="btn-outline flex items-center gap-2"
+                >
+                  <Columns className="h-4 w-4" />
+                  Columns
+                </button>
+                <div className="relative">
+                  <select
+                    value={groupBy}
+                    onChange={(e) => setGroupBy(e.target.value)}
+                    className="appearance-none bg-white dark:bg-secondary-800 border-2 border-secondary-300 dark:border-secondary-600 rounded-lg px-3 py-2 pr-8 text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 text-secondary-900 dark:text-white hover:border-secondary-400 dark:hover:border-secondary-500 transition-colors"
+                  >
+                    <option value="none">No Grouping</option>
+                    <option value="group">Group by Host Group</option>
+                    <option value="status">Group by Status</option>
+                    <option value="os">Group by OS</option>
+                  </select>
+                  <ChevronDown className="absolute right-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-secondary-400 dark:text-secondary-500 pointer-events-none" />
+                </div>
+                <button
+                  onClick={() => setShowAddModal(true)}
+                  className="btn-primary flex items-center gap-2"
+                >
+                  <Plus className="h-4 w-4" />
+                  Add Host
+                </button>
+              </div>
+            </div>
+
+            {/* Advanced Filters */}
+            {showFilters && (
+              <div className="bg-secondary-50 dark:bg-secondary-700 p-4 rounded-lg border dark:border-secondary-600">
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium text-secondary-700 dark:text-secondary-200 mb-1">Host Group</label>
+                    <select
+                      value={groupFilter}
+                      onChange={(e) => setGroupFilter(e.target.value)}
+                      className="w-full border border-secondary-300 dark:border-secondary-600 rounded-lg px-3 py-2 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white"
+                    >
+                      <option value="all">All Groups</option>
+                      <option value="ungrouped">Ungrouped</option>
+                      {hostGroups?.map(group => (
+                        <option key={group.id} value={group.id}>{group.name}</option>
+                      ))}
+                    </select>
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-secondary-700 dark:text-secondary-200 mb-1">Status</label>
+                    <select
+                      value={statusFilter}
+                      onChange={(e) => setStatusFilter(e.target.value)}
+                      className="w-full border border-secondary-300 dark:border-secondary-600 rounded-lg px-3 py-2 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white"
+                    >
+                      <option value="all">All Status</option>
+                      <option value="active">Active</option>
+                      <option value="pending">Pending</option>
+                      <option value="inactive">Inactive</option>
+                      <option value="error">Error</option>
+                    </select>
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-secondary-700 dark:text-secondary-200 mb-1">Operating System</label>
+                    <select
+                      value={osFilter}
+                      onChange={(e) => setOsFilter(e.target.value)}
+                      className="w-full border border-secondary-300 dark:border-secondary-600 rounded-lg px-3 py-2 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white"
+                    >
+                      <option value="all">All OS</option>
+                      <option value="linux">Linux</option>
+                      <option value="windows">Windows</option>
+                      <option value="macos">macOS</option>
+                    </select>
+                  </div>
+                  <div className="flex items-end">
+                    <button
+                      onClick={() => {
+                        setSearchTerm('')
+                        setGroupFilter('all')
+                        setStatusFilter('all')
+                        setOsFilter('all')
+                        setGroupBy('none')
+                      }}
+                      className="btn-outline w-full"
+                    >
+                      Clear Filters
+                    </button>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {(!hosts || hosts.length === 0) ? (
+            <div className="text-center py-8">
+              <Server className="h-12 w-12 text-secondary-400 mx-auto mb-4" />
+              <p className="text-secondary-500">No hosts registered yet</p>
+              <p className="text-sm text-secondary-400 mt-2">
+                Click "Add Host" to manually register a new host and get API credentials
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-6">
+              {Object.entries(groupedHosts).map(([groupName, groupHosts]) => (
+                <div key={groupName} className="space-y-3">
+                  {/* Group Header */}
+                  {groupBy !== 'none' && (
+                    <div className="flex items-center justify-between bg-secondary-100 dark:bg-secondary-700 px-4 py-2 rounded-lg">
+                      <h3 className="text-sm font-medium text-secondary-900 dark:text-white">
+                        {groupName} ({groupHosts.length})
+                      </h3>
+                    </div>
+                  )}
+                  
+                  {/* Table for this group */}
+            <div className="overflow-x-auto">
+                    <table className="min-w-full divide-y divide-secondary-200 dark:divide-secondary-600">
+                <thead className="bg-secondary-50 dark:bg-secondary-700">
+                  <tr>
+                    {visibleColumns.map((column) => (
+                      <th key={column.id} className="px-4 py-2 text-center text-xs font-medium text-secondary-500 dark:text-secondary-300 uppercase tracking-wider">
+                        {column.id === 'select' ? (
+                          <button
+                            onClick={handleSelectAll}
+                            className="flex items-center gap-2 hover:text-secondary-700"
+                          >
+                            {selectedHosts.length === groupHosts.length ? (
+                              <CheckSquare className="h-4 w-4" />
+                            ) : (
+                              <Square className="h-4 w-4" />
+                            )}
+                          </button>
+                        ) : column.id === 'host' ? (
+                          <button
+                            onClick={() => handleSort('hostname')}
+                            className="flex items-center gap-2 hover:text-secondary-700"
+                          >
+                            {column.label}
+                            {getSortIcon('hostname')}
+                          </button>
+                        ) : column.id === 'ip' ? (
+                          <button
+                            onClick={() => handleSort('ip')}
+                            className="flex items-center gap-2 hover:text-secondary-700"
+                          >
+                            {column.label}
+                            {getSortIcon('ip')}
+                          </button>
+                        ) : column.id === 'group' ? (
+                          <button
+                            onClick={() => handleSort('group')}
+                            className="flex items-center gap-2 hover:text-secondary-700"
+                          >
+                            {column.label}
+                            {getSortIcon('group')}
+                          </button>
+                        ) : column.id === 'os' ? (
+                          <button
+                            onClick={() => handleSort('os')}
+                            className="flex items-center gap-2 hover:text-secondary-700"
+                          >
+                            {column.label}
+                            {getSortIcon('os')}
+                          </button>
+                        ) : column.id === 'osVersion' ? (
+                          <button
+                            onClick={() => handleSort('osVersion')}
+                            className="flex items-center gap-2 hover:text-secondary-700"
+                          >
+                            {column.label}
+                            {getSortIcon('osVersion')}
+                          </button>
+                        ) : column.id === 'agentVersion' ? (
+                          <button
+                            onClick={() => handleSort('agentVersion')}
+                            className="flex items-center gap-2 hover:text-secondary-700"
+                          >
+                            {column.label}
+                            {getSortIcon('agentVersion')}
+                          </button>
+                        ) : column.id === 'autoUpdate' ? (
+                          <div className="flex items-center gap-2 font-normal text-xs text-secondary-500 dark:text-secondary-300 normal-case tracking-wider">
+                            {column.label}
+                          </div>
+                        ) : column.id === 'status' ? (
+                          <button
+                            onClick={() => handleSort('status')}
+                            className="flex items-center gap-2 hover:text-secondary-700"
+                          >
+                            {column.label}
+                            {getSortIcon('status')}
+                          </button>
+                        ) : column.id === 'updates' ? (
+                          <button
+                            onClick={() => handleSort('updates')}
+                            className="flex items-center gap-2 hover:text-secondary-700"
+                          >
+                            {column.label}
+                            {getSortIcon('updates')}
+                          </button>
+                        ) : column.id === 'lastUpdate' ? (
+                          <button
+                            onClick={() => handleSort('lastUpdate')}
+                            className="flex items-center gap-2 hover:text-secondary-700"
+                          >
+                            {column.label}
+                            {getSortIcon('lastUpdate')}
+                          </button>
+                        ) : (
+                          column.label
+                        )}
+                    </th>
+                    ))}
+                  </tr>
+                </thead>
+                      <tbody className="bg-white dark:bg-secondary-800 divide-y divide-secondary-200 dark:divide-secondary-600">
+                        {groupHosts.map((host) => (
+                          <tr key={host.id} className={`hover:bg-secondary-50 dark:hover:bg-secondary-700 ${selectedHosts.includes(host.id) ? 'bg-primary-50 dark:bg-primary-600' : ''}`}>
+                            {visibleColumns.map((column) => (
+                              <td key={column.id} className="px-4 py-2 whitespace-nowrap text-center">
+                                {renderCellContent(column, host)}
+                              </td>
+                            ))}
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                            </div>
+                </div>
+              ))}
+                              </div>
+                            )}
+                          </div>
+                        </div>
+
+      {/* Modals */}
+      <AddHostModal 
+        isOpen={showAddModal} 
+        onClose={() => setShowAddModal(false)} 
+        onSuccess={handleHostCreated}
+      />
+      
+
+      {/* Bulk Assign Modal */}
+      {showBulkAssignModal && (
+        <BulkAssignModal
+          selectedHosts={selectedHosts}
+          hosts={hosts}
+          onClose={() => setShowBulkAssignModal(false)}
+          onAssign={handleBulkAssign}
+          isLoading={bulkUpdateGroupMutation.isPending}
+        />
+      )}
+
+      {/* Column Settings Modal */}
+      {showColumnSettings && (
+        <ColumnSettingsModal
+          columnConfig={columnConfig}
+          onClose={() => setShowColumnSettings(false)}
+          onToggleVisibility={toggleColumnVisibility}
+          onReorder={reorderColumns}
+          onReset={resetColumns}
+        />
+      )}
+                        </div>
+  )
+}
+
+// Bulk Assign Modal Component
+const BulkAssignModal = ({ selectedHosts, hosts, onClose, onAssign, isLoading }) => {
+  const [selectedGroupId, setSelectedGroupId] = useState('')
+
+  // Fetch host groups for selection
+  const { data: hostGroups } = useQuery({
+    queryKey: ['hostGroups'],
+    queryFn: () => hostGroupsAPI.list().then(res => res.data),
+  })
+
+  const selectedHostNames = hosts
+    .filter(host => selectedHosts.includes(host.id))
+    .map(host => host.hostname)
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    onAssign(selectedGroupId || null)
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg p-6 w-full max-w-md">
+        <div className="flex justify-between items-center mb-4">
+          <h3 className="text-lg font-semibold text-secondary-900">
+            Assign to Host Group
+          </h3>
+          <button onClick={onClose} className="text-secondary-400 hover:text-secondary-600">
+            <X className="h-5 w-5" />
+          </button>
+                        </div>
+
+        <div className="mb-4">
+          <p className="text-sm text-secondary-600 mb-2">
+            Assigning {selectedHosts.length} host{selectedHosts.length !== 1 ? 's' : ''}:
+          </p>
+          <div className="max-h-32 overflow-y-auto bg-secondary-50 rounded-md p-3">
+            {selectedHostNames.map((hostname, index) => (
+              <div key={index} className="text-sm text-secondary-700">
+                • {hostname}
+                        </div>
+            ))}
+          </div>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-secondary-700 mb-1">
+              Host Group
+            </label>
+            <select
+              value={selectedGroupId}
+              onChange={(e) => setSelectedGroupId(e.target.value)}
+              className="w-full px-3 py-2 border border-secondary-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500"
+            >
+              <option value="">No group (ungrouped)</option>
+              {hostGroups?.map((group) => (
+                <option key={group.id} value={group.id}>
+                  {group.name}
+                </option>
+              ))}
+            </select>
+            <p className="mt-1 text-sm text-secondary-500">
+              Select a group to assign these hosts to, or leave ungrouped.
+            </p>
+          </div>
+
+          <div className="flex justify-end gap-3 pt-4">
+            <button
+              type="button"
+              onClick={onClose}
+              className="btn-outline"
+              disabled={isLoading}
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="btn-primary"
+              disabled={isLoading}
+            >
+              {isLoading ? 'Assigning...' : 'Assign to Group'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+// Column Settings Modal Component
+const ColumnSettingsModal = ({ columnConfig, onClose, onToggleVisibility, onReorder, onReset }) => {
+  const [draggedIndex, setDraggedIndex] = useState(null)
+
+  const handleDragStart = (e, index) => {
+    setDraggedIndex(index)
+    e.dataTransfer.effectAllowed = 'move'
+  }
+
+  const handleDragOver = (e) => {
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'move'
+  }
+
+  const handleDrop = (e, dropIndex) => {
+    e.preventDefault()
+    if (draggedIndex !== null && draggedIndex !== dropIndex) {
+      onReorder(draggedIndex, dropIndex)
+    }
+    setDraggedIndex(null)
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white dark:bg-secondary-800 rounded-lg shadow-xl max-w-md w-full mx-4">
+        <div className="px-6 py-4 border-b border-secondary-200 dark:border-secondary-600">
+          <div className="flex items-center justify-between">
+            <h3 className="text-lg font-medium text-secondary-900 dark:text-white">Column Settings</h3>
+            <button
+              onClick={onClose}
+              className="text-secondary-400 hover:text-secondary-600 dark:text-secondary-500 dark:hover:text-secondary-300"
+            >
+              <X className="h-5 w-5" />
+            </button>
+          </div>
+        </div>
+        
+        <div className="px-6 py-4">
+          <p className="text-sm text-secondary-600 dark:text-secondary-300 mb-4">
+            Drag to reorder columns or toggle visibility
+          </p>
+          
+          <div className="space-y-2">
+            {columnConfig.map((column, index) => (
+              <div
+                key={column.id}
+                draggable
+                onDragStart={(e) => handleDragStart(e, index)}
+                onDragOver={handleDragOver}
+                onDrop={(e) => handleDrop(e, index)}
+                className={`flex items-center justify-between p-3 border rounded-lg cursor-move ${
+                  draggedIndex === index ? 'opacity-50' : 'hover:bg-secondary-50 dark:hover:bg-secondary-700'
+                } border-secondary-200 dark:border-secondary-600`}
+              >
+                <div className="flex items-center gap-3">
+                  <GripVertical className="h-4 w-4 text-secondary-400 dark:text-secondary-500" />
+                  <span className="text-sm font-medium text-secondary-900 dark:text-white">
+                    {column.label}
+                          </span>
+                </div>
+                <button
+                  onClick={() => onToggleVisibility(column.id)}
+                  className={`p-1 rounded ${
+                    column.visible 
+                      ? 'text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300' 
+                      : 'text-secondary-400 hover:text-secondary-600 dark:text-secondary-500 dark:hover:text-secondary-300'
+                  }`}
+                >
+                  {column.visible ? (
+                    <EyeIcon className="h-4 w-4" />
+                  ) : (
+                    <EyeOffIcon className="h-4 w-4" />
+                  )}
+                </button>
+              </div>
+            ))}
+            </div>
+          
+          <div className="flex justify-between mt-6">
+            <button
+              onClick={onReset}
+              className="btn-outline"
+            >
+              Reset to Default
+            </button>
+            <button
+              onClick={onClose}
+              className="btn-primary"
+            >
+              Done
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Hosts 
\ No newline at end of file
diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login.jsx
new file mode 100644
index 0000000..151dae6
--- /dev/null
+++ b/frontend/src/pages/Login.jsx
@@ -0,0 +1,158 @@
+import React, { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Eye, EyeOff, Lock, User, AlertCircle } from 'lucide-react'
+import { useAuth } from '../contexts/AuthContext'
+
+const Login = () => {
+  const [formData, setFormData] = useState({
+    username: '',
+    password: ''
+  })
+  const [showPassword, setShowPassword] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  const navigate = useNavigate()
+  const { login } = useAuth()
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setIsLoading(true)
+    setError('')
+
+    try {
+      const result = await login(formData.username, formData.password)
+      
+      if (result.success) {
+        // Redirect to dashboard
+        navigate('/')
+      } else {
+        setError(result.error || 'Login failed')
+      }
+    } catch (err) {
+      setError('Network error occurred')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleInputChange = (e) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    })
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-secondary-50 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-md w-full space-y-8">
+        <div>
+          <div className="mx-auto h-12 w-12 flex items-center justify-center rounded-full bg-primary-100">
+            <Lock className="h-6 w-6 text-primary-600" />
+          </div>
+          <h2 className="mt-6 text-center text-3xl font-extrabold text-secondary-900">
+            Sign in to PatchMon
+          </h2>
+          <p className="mt-2 text-center text-sm text-secondary-600">
+            Monitor and manage your Linux package updates
+          </p>
+        </div>
+
+        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+          <div className="space-y-4">
+            <div>
+              <label htmlFor="username" className="block text-sm font-medium text-secondary-700">
+                Username or Email
+              </label>
+              <div className="mt-1 relative">
+                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                  <User className="h-5 w-5 text-secondary-400" />
+                </div>
+                <input
+                  id="username"
+                  name="username"
+                  type="text"
+                  required
+                  value={formData.username}
+                  onChange={handleInputChange}
+                  className="appearance-none rounded-md relative block w-full pl-10 pr-3 py-2 border border-secondary-300 placeholder-secondary-500 text-secondary-900 focus:outline-none focus:ring-primary-500 focus:border-primary-500 focus:z-10 sm:text-sm"
+                  placeholder="Enter your username or email"
+                />
+              </div>
+            </div>
+
+            <div>
+              <label htmlFor="password" className="block text-sm font-medium text-secondary-700">
+                Password
+              </label>
+              <div className="mt-1 relative">
+                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                  <Lock className="h-5 w-5 text-secondary-400" />
+                </div>
+                <input
+                  id="password"
+                  name="password"
+                  type={showPassword ? 'text' : 'password'}
+                  required
+                  value={formData.password}
+                  onChange={handleInputChange}
+                  className="appearance-none rounded-md relative block w-full pl-10 pr-10 py-2 border border-secondary-300 placeholder-secondary-500 text-secondary-900 focus:outline-none focus:ring-primary-500 focus:border-primary-500 focus:z-10 sm:text-sm"
+                  placeholder="Enter your password"
+                />
+                <div className="absolute inset-y-0 right-0 pr-3 flex items-center">
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="text-secondary-400 hover:text-secondary-500"
+                  >
+                    {showPassword ? (
+                      <EyeOff className="h-5 w-5" />
+                    ) : (
+                      <Eye className="h-5 w-5" />
+                    )}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {error && (
+            <div className="bg-danger-50 border border-danger-200 rounded-md p-3">
+              <div className="flex">
+                <AlertCircle className="h-5 w-5 text-danger-400" />
+                <div className="ml-3">
+                  <p className="text-sm text-danger-700">{error}</p>
+                </div>
+              </div>
+            </div>
+          )}
+
+          <div>
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {isLoading ? (
+                <div className="flex items-center">
+                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+                  Signing in...
+                </div>
+              ) : (
+                'Sign in'
+              )}
+            </button>
+          </div>
+
+          <div className="text-center">
+            <p className="text-sm text-secondary-600">
+              Need help? Contact your system administrator.
+            </p>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+export default Login
diff --git a/frontend/src/pages/PackageDetail.jsx b/frontend/src/pages/PackageDetail.jsx
new file mode 100644
index 0000000..0c3fe29
--- /dev/null
+++ b/frontend/src/pages/PackageDetail.jsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import { useParams } from 'react-router-dom'
+import { Package } from 'lucide-react'
+
+const PackageDetail = () => {
+  const { packageId } = useParams()
+  
+  return (
+    <div className="space-y-6">
+      
+      <div className="card p-8 text-center">
+        <Package className="h-12 w-12 text-secondary-400 mx-auto mb-4" />
+        <h3 className="text-lg font-medium text-secondary-900 mb-2">Package Details</h3>
+        <p className="text-secondary-600">
+          Detailed view for package: {packageId}
+        </p>
+        <p className="text-secondary-600 mt-2">
+          This page will show package information, affected hosts, version distribution, and more.
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default PackageDetail 
\ No newline at end of file
diff --git a/frontend/src/pages/Packages.jsx b/frontend/src/pages/Packages.jsx
new file mode 100644
index 0000000..d558a9f
--- /dev/null
+++ b/frontend/src/pages/Packages.jsx
@@ -0,0 +1,294 @@
+import React, { useState, useEffect } from 'react'
+import { Link, useSearchParams } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+import { 
+  Package, 
+  Server, 
+  Shield, 
+  RefreshCw, 
+  Search, 
+  AlertTriangle, 
+  Filter,
+  ExternalLink
+} from 'lucide-react'
+import { dashboardAPI } from '../utils/api'
+
+const Packages = () => {
+  const [searchTerm, setSearchTerm] = useState('')
+  const [categoryFilter, setCategoryFilter] = useState('all')
+  const [securityFilter, setSecurityFilter] = useState('all')
+  const [searchParams] = useSearchParams()
+
+  // Handle URL filter parameters
+  useEffect(() => {
+    const filter = searchParams.get('filter')
+    if (filter === 'outdated') {
+      // For outdated packages, we want to show all packages that need updates
+      // This is the default behavior, so we don't need to change filters
+      setCategoryFilter('all')
+      setSecurityFilter('all')
+    } else if (filter === 'security') {
+      // For security updates, filter to show only security updates
+      setSecurityFilter('security')
+      setCategoryFilter('all')
+    }
+  }, [searchParams])
+
+  const { data: packages, isLoading, error, refetch } = useQuery({
+    queryKey: ['packages'],
+    queryFn: () => dashboardAPI.getPackages().then(res => res.data),
+    refetchInterval: 60000,
+    staleTime: 30000,
+  })
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <RefreshCw className="h-8 w-8 animate-spin text-primary-600" />
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="space-y-6">
+        
+        <div className="bg-danger-50 border border-danger-200 rounded-md p-4">
+          <div className="flex">
+            <AlertTriangle className="h-5 w-5 text-danger-400" />
+            <div className="ml-3">
+              <h3 className="text-sm font-medium text-danger-800">Error loading packages</h3>
+              <p className="text-sm text-danger-700 mt-1">
+                {error.message || 'Failed to load packages'}
+              </p>
+              <button
+                onClick={() => refetch()}
+                className="mt-2 btn-danger text-xs"
+              >
+                Try again
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  // Filter packages based on search and filters
+  const filteredPackages = packages?.filter(pkg => {
+    const matchesSearch = pkg.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                         (pkg.description && pkg.description.toLowerCase().includes(searchTerm.toLowerCase()))
+    
+    const matchesCategory = categoryFilter === 'all' || pkg.category === categoryFilter
+    
+    const matchesSecurity = securityFilter === 'all' || 
+                           (securityFilter === 'security' && pkg.isSecurityUpdate) ||
+                           (securityFilter === 'regular' && !pkg.isSecurityUpdate)
+    
+    return matchesSearch && matchesCategory && matchesSecurity
+  }) || []
+
+  // Get unique categories
+  const categories = [...new Set(packages?.map(pkg => pkg.category).filter(Boolean))] || []
+
+  // Calculate unique affected hosts
+  const uniqueAffectedHosts = new Set()
+  packages?.forEach(pkg => {
+    pkg.affectedHosts.forEach(host => {
+      uniqueAffectedHosts.add(host.hostId)
+    })
+  })
+  const uniqueAffectedHostsCount = uniqueAffectedHosts.size
+
+  return (
+    <div className="space-y-6">
+
+      {/* Summary Stats */}
+      <div className="grid grid-cols-1 sm:grid-cols-4 gap-4">
+        <div className="card p-4">
+          <div className="flex items-center">
+            <Package className="h-5 w-5 text-primary-600 mr-2" />
+            <div>
+              <p className="text-sm text-secondary-500 dark:text-white">Total Packages</p>
+              <p className="text-xl font-semibold text-secondary-900 dark:text-white">{packages?.length || 0}</p>
+            </div>
+          </div>
+        </div>
+        
+        <div className="card p-4">
+          <div className="flex items-center">
+            <Shield className="h-5 w-5 text-danger-600 mr-2" />
+            <div>
+              <p className="text-sm text-secondary-500 dark:text-white">Security Updates</p>
+              <p className="text-xl font-semibold text-secondary-900 dark:text-white">
+                {packages?.filter(pkg => pkg.isSecurityUpdate).length || 0}
+              </p>
+            </div>
+          </div>
+        </div>
+        
+        <div className="card p-4">
+          <div className="flex items-center">
+            <Server className="h-5 w-5 text-warning-600 mr-2" />
+            <div>
+              <p className="text-sm text-secondary-500 dark:text-white">Affected Hosts</p>
+              <p className="text-xl font-semibold text-secondary-900 dark:text-white">
+                {uniqueAffectedHostsCount}
+              </p>
+            </div>
+          </div>
+        </div>
+        
+        <div className="card p-4">
+          <div className="flex items-center">
+            <Filter className="h-5 w-5 text-secondary-600 mr-2" />
+            <div>
+              <p className="text-sm text-secondary-500 dark:text-white">Categories</p>
+              <p className="text-xl font-semibold text-secondary-900 dark:text-white">{categories.length}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Filters */}
+      <div className="card p-4">
+        <div className="flex flex-col sm:flex-row gap-4">
+          {/* Search */}
+          <div className="flex-1">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-secondary-400 dark:text-secondary-500" />
+              <input
+                type="text"
+                placeholder="Search packages..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="w-full pl-10 pr-4 py-2 border border-secondary-300 dark:border-secondary-600 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white placeholder-secondary-500 dark:placeholder-secondary-400"
+              />
+            </div>
+          </div>
+          
+          {/* Category Filter */}
+          <div className="sm:w-48">
+            <select
+              value={categoryFilter}
+              onChange={(e) => setCategoryFilter(e.target.value)}
+              className="w-full px-3 py-2 border border-secondary-300 dark:border-secondary-600 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white"
+            >
+              <option value="all">All Categories</option>
+              {categories.map(category => (
+                <option key={category} value={category}>{category}</option>
+              ))}
+            </select>
+          </div>
+          
+          {/* Security Filter */}
+          <div className="sm:w-48">
+            <select
+              value={securityFilter}
+              onChange={(e) => setSecurityFilter(e.target.value)}
+              className="w-full px-3 py-2 border border-secondary-300 dark:border-secondary-600 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white"
+            >
+              <option value="all">All Updates</option>
+              <option value="security">Security Only</option>
+              <option value="regular">Regular Only</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      {/* Packages List */}
+      <div className="card">
+        <div className="px-4 py-5 sm:p-6">
+          <h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-4">
+            Packages Needing Updates ({filteredPackages.length})
+          </h3>
+          
+          {filteredPackages.length === 0 ? (
+            <div className="text-center py-8">
+              <Package className="h-12 w-12 text-secondary-400 mx-auto mb-4" />
+              <p className="text-secondary-500 dark:text-secondary-300">
+                {packages?.length === 0 ? 'No packages need updates' : 'No packages match your filters'}
+              </p>
+              {packages?.length === 0 && (
+                <p className="text-sm text-secondary-400 dark:text-secondary-400 mt-2">
+                  All packages are up to date across all hosts
+                </p>
+              )}
+            </div>
+          ) : (
+            <div className="overflow-x-auto">
+              <table className="min-w-full divide-y divide-secondary-200 dark:divide-secondary-600">
+                <thead className="bg-secondary-50 dark:bg-secondary-700">
+                  <tr>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-secondary-500 dark:text-secondary-300 uppercase tracking-wider">
+                      Package
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-secondary-500 dark:text-secondary-300 uppercase tracking-wider">
+                      Latest Version
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-secondary-500 dark:text-secondary-300 uppercase tracking-wider">
+                      Affected Hosts
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-secondary-500 dark:text-secondary-300 uppercase tracking-wider">
+                      Priority
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="bg-white dark:bg-secondary-800 divide-y divide-secondary-200 dark:divide-secondary-600">
+                  {filteredPackages.map((pkg) => (
+                    <tr key={pkg.id} className="hover:bg-secondary-50 dark:hover:bg-secondary-700">
+                      <td className="px-6 py-4 whitespace-nowrap">
+                        <div className="flex items-center">
+                          <Package className="h-5 w-5 text-secondary-400 mr-3" />
+                          <div>
+                            <div className="text-sm font-medium text-secondary-900 dark:text-white">
+                              {pkg.name}
+                            </div>
+                            {pkg.description && (
+                              <div className="text-sm text-secondary-500 dark:text-secondary-300 max-w-md truncate">
+                                {pkg.description}
+                              </div>
+                            )}
+                            {pkg.category && (
+                              <div className="text-xs text-secondary-400 dark:text-secondary-400">
+                                Category: {pkg.category}
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-secondary-900 dark:text-white">
+                        {pkg.latestVersion || 'Unknown'}
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap">
+                        <div className="text-sm text-secondary-900 dark:text-white">
+                          {pkg.affectedHostsCount} host{pkg.affectedHostsCount !== 1 ? 's' : ''}
+                        </div>
+                        <div className="text-xs text-secondary-500 dark:text-secondary-300">
+                          {pkg.affectedHosts.slice(0, 2).map(host => host.hostname).join(', ')}
+                          {pkg.affectedHosts.length > 2 && ` +${pkg.affectedHosts.length - 2} more`}
+                        </div>
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap">
+                        {pkg.isSecurityUpdate ? (
+                          <span className="badge-danger flex items-center gap-1">
+                            <Shield className="h-3 w-3" />
+                            Security Update
+                          </span>
+                        ) : (
+                          <span className="badge-warning">Regular Update</span>
+                        )}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Packages 
\ No newline at end of file
diff --git a/frontend/src/pages/Permissions.jsx b/frontend/src/pages/Permissions.jsx
new file mode 100644
index 0000000..ac24b91
--- /dev/null
+++ b/frontend/src/pages/Permissions.jsx
@@ -0,0 +1,389 @@
+import React, { useState } from 'react'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { 
+  Shield, 
+  Settings, 
+  Users, 
+  Server, 
+  Package, 
+  BarChart3, 
+  Download, 
+  Eye, 
+  Edit, 
+  Trash2, 
+  Plus,
+  Save,
+  X,
+  AlertTriangle,
+  RefreshCw
+} from 'lucide-react'
+import { permissionsAPI } from '../utils/api'
+import { useAuth } from '../contexts/AuthContext'
+
+const Permissions = () => {
+  const [editingRole, setEditingRole] = useState(null)
+  const [showAddModal, setShowAddModal] = useState(false)
+  const queryClient = useQueryClient()
+  const { refreshPermissions } = useAuth()
+
+  // Fetch all role permissions
+  const { data: roles, isLoading, error } = useQuery({
+    queryKey: ['rolePermissions'],
+    queryFn: () => permissionsAPI.getRoles().then(res => res.data)
+  })
+
+  // Update role permissions mutation
+  const updateRoleMutation = useMutation({
+    mutationFn: ({ role, permissions }) => permissionsAPI.updateRole(role, permissions),
+    onSuccess: () => {
+      queryClient.invalidateQueries(['rolePermissions'])
+      setEditingRole(null)
+      // Refresh user permissions to apply changes immediately
+      refreshPermissions()
+    }
+  })
+
+  // Delete role mutation
+  const deleteRoleMutation = useMutation({
+    mutationFn: (role) => permissionsAPI.deleteRole(role),
+    onSuccess: () => {
+      queryClient.invalidateQueries(['rolePermissions'])
+    }
+  })
+
+  const handleSavePermissions = async (role, permissions) => {
+    try {
+      await updateRoleMutation.mutateAsync({ role, permissions })
+    } catch (error) {
+      console.error('Failed to update permissions:', error)
+    }
+  }
+
+  const handleDeleteRole = async (role) => {
+    if (window.confirm(`Are you sure you want to delete the "${role}" role? This action cannot be undone.`)) {
+      try {
+        await deleteRoleMutation.mutateAsync(role)
+      } catch (error) {
+        console.error('Failed to delete role:', error)
+      }
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="bg-danger-50 border border-danger-200 rounded-md p-4">
+        <div className="flex">
+          <AlertTriangle className="h-5 w-5 text-danger-400" />
+          <div className="ml-3">
+            <h3 className="text-sm font-medium text-danger-800">Error loading permissions</h3>
+            <p className="mt-1 text-sm text-danger-700">{error.message}</p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex justify-end items-center">
+        <div className="flex space-x-3">
+          <button
+            onClick={() => refreshPermissions()}
+            className="inline-flex items-center px-4 py-2 border border-secondary-300 text-sm font-medium rounded-md text-secondary-700 bg-white hover:bg-secondary-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
+          >
+            <RefreshCw className="h-4 w-4 mr-2" />
+            Refresh Permissions
+          </button>
+          <button
+            onClick={() => setShowAddModal(true)}
+            className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
+          >
+            <Plus className="h-4 w-4 mr-2" />
+            Add Role
+          </button>
+        </div>
+      </div>
+
+      {/* Roles List */}
+      <div className="space-y-4">
+        {roles && Array.isArray(roles) && roles.map((role) => (
+          <RolePermissionsCard
+            key={role.id}
+            role={role}
+            isEditing={editingRole === role.role}
+            onEdit={() => setEditingRole(role.role)}
+            onCancel={() => setEditingRole(null)}
+            onSave={handleSavePermissions}
+            onDelete={handleDeleteRole}
+          />
+        ))}
+      </div>
+
+      {/* Add Role Modal */}
+      <AddRoleModal
+        isOpen={showAddModal}
+        onClose={() => setShowAddModal(false)}
+        onSuccess={() => {
+          queryClient.invalidateQueries(['rolePermissions'])
+          setShowAddModal(false)
+        }}
+      />
+    </div>
+  )
+}
+
+// Role Permissions Card Component
+const RolePermissionsCard = ({ role, isEditing, onEdit, onCancel, onSave, onDelete }) => {
+  const [permissions, setPermissions] = useState(role)
+
+  const permissionFields = [
+    { key: 'canViewDashboard', label: 'View Dashboard', icon: BarChart3, description: 'Access to the main dashboard' },
+    { key: 'canViewHosts', label: 'View Hosts', icon: Server, description: 'See host information and status' },
+    { key: 'canManageHosts', label: 'Manage Hosts', icon: Edit, description: 'Add, edit, and delete hosts' },
+    { key: 'canViewPackages', label: 'View Packages', icon: Package, description: 'See package information' },
+    { key: 'canManagePackages', label: 'Manage Packages', icon: Settings, description: 'Edit package details' },
+    { key: 'canViewUsers', label: 'View Users', icon: Users, description: 'See user list and details' },
+    { key: 'canManageUsers', label: 'Manage Users', icon: Shield, description: 'Add, edit, and delete users' },
+    { key: 'canViewReports', label: 'View Reports', icon: BarChart3, description: 'Access to reports and analytics' },
+    { key: 'canExportData', label: 'Export Data', icon: Download, description: 'Download data and reports' },
+    { key: 'canManageSettings', label: 'Manage Settings', icon: Settings, description: 'System configuration access' }
+  ]
+
+  const handlePermissionChange = (key, value) => {
+    setPermissions(prev => ({
+      ...prev,
+      [key]: value
+    }))
+  }
+
+  const handleSave = () => {
+    onSave(role.role, permissions)
+  }
+
+  const isAdminRole = role.role === 'admin'
+
+  return (
+    <div className="bg-white dark:bg-secondary-800 shadow rounded-lg">
+      <div className="px-6 py-4 border-b border-secondary-200 dark:border-secondary-600">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center">
+            <Shield className="h-5 w-5 text-primary-600 mr-3" />
+            <h3 className="text-lg font-medium text-secondary-900 dark:text-white capitalize">{role.role}</h3>
+            {isAdminRole && (
+              <span className="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800">
+                System Role
+              </span>
+            )}
+          </div>
+          <div className="flex items-center space-x-2">
+            {isEditing ? (
+              <>
+                <button
+                  onClick={handleSave}
+                  className="inline-flex items-center px-3 py-1 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700"
+                >
+                  <Save className="h-4 w-4 mr-1" />
+                  Save
+                </button>
+                <button
+                  onClick={onCancel}
+                  className="inline-flex items-center px-3 py-1 border border-secondary-300 text-sm font-medium rounded-md text-secondary-700 bg-white hover:bg-secondary-50"
+                >
+                  <X className="h-4 w-4 mr-1" />
+                  Cancel
+                </button>
+              </>
+            ) : (
+              <>
+                <button
+                  onClick={onEdit}
+                  disabled={isAdminRole}
+                  className="inline-flex items-center px-3 py-1 border border-transparent text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  <Edit className="h-4 w-4 mr-1" />
+                  Edit
+                </button>
+                {!isAdminRole && (
+                  <button
+                    onClick={() => onDelete(role.role)}
+                    className="inline-flex items-center px-3 py-1 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700"
+                  >
+                    <Trash2 className="h-4 w-4 mr-1" />
+                    Delete
+                  </button>
+                )}
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="px-6 py-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {permissionFields.map((field) => {
+            const Icon = field.icon
+            const isChecked = permissions[field.key]
+            
+            return (
+              <div key={field.key} className="flex items-start">
+                <div className="flex items-center h-5">
+                  <input
+                    type="checkbox"
+                    checked={isChecked}
+                    onChange={(e) => handlePermissionChange(field.key, e.target.checked)}
+                    disabled={!isEditing || (isAdminRole && field.key === 'canManageUsers')}
+                    className="h-4 w-4 text-primary-600 focus:ring-primary-500 border-secondary-300 rounded disabled:opacity-50"
+                  />
+                </div>
+                <div className="ml-3">
+                  <div className="flex items-center">
+                    <Icon className="h-4 w-4 text-secondary-400 mr-2" />
+                    <label className="text-sm font-medium text-secondary-900 dark:text-white">
+                      {field.label}
+                    </label>
+                  </div>
+                  <p className="text-xs text-secondary-500 mt-1">
+                    {field.description}
+                  </p>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// Add Role Modal Component
+const AddRoleModal = ({ isOpen, onClose, onSuccess }) => {
+  const [formData, setFormData] = useState({
+    role: '',
+    canViewDashboard: true,
+    canViewHosts: true,
+    canManageHosts: false,
+    canViewPackages: true,
+    canManagePackages: false,
+    canViewUsers: false,
+    canManageUsers: false,
+    canViewReports: true,
+    canExportData: false,
+    canManageSettings: false
+  })
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setIsLoading(true)
+    setError('')
+
+    try {
+      await permissionsAPI.updateRole(formData.role, formData)
+      onSuccess()
+    } catch (err) {
+      setError(err.response?.data?.error || 'Failed to create role')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleInputChange = (e) => {
+    const { name, value, type, checked } = e.target
+    setFormData({
+      ...formData,
+      [name]: type === 'checkbox' ? checked : value
+    })
+  }
+
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg p-6 w-full max-w-2xl max-h-[90vh] overflow-y-auto">
+        <h3 className="text-lg font-medium text-secondary-900 mb-4">Add New Role</h3>
+        
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-secondary-700 mb-1">
+              Role Name
+            </label>
+            <input
+              type="text"
+              name="role"
+              required
+              value={formData.role}
+              onChange={handleInputChange}
+              className="block w-full border-secondary-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500"
+              placeholder="e.g., host_manager, readonly"
+            />
+            <p className="mt-1 text-xs text-secondary-500">Use lowercase with underscores (e.g., host_manager)</p>
+          </div>
+
+          <div className="space-y-3">
+            <h4 className="text-sm font-medium text-secondary-900 dark:text-white">Permissions</h4>
+            {[
+              { key: 'canViewDashboard', label: 'View Dashboard' },
+              { key: 'canViewHosts', label: 'View Hosts' },
+              { key: 'canManageHosts', label: 'Manage Hosts' },
+              { key: 'canViewPackages', label: 'View Packages' },
+              { key: 'canManagePackages', label: 'Manage Packages' },
+              { key: 'canViewUsers', label: 'View Users' },
+              { key: 'canManageUsers', label: 'Manage Users' },
+              { key: 'canViewReports', label: 'View Reports' },
+              { key: 'canExportData', label: 'Export Data' },
+              { key: 'canManageSettings', label: 'Manage Settings' }
+            ].map((permission) => (
+              <div key={permission.key} className="flex items-center">
+                <input
+                  type="checkbox"
+                  name={permission.key}
+                  checked={formData[permission.key]}
+                  onChange={handleInputChange}
+                  className="h-4 w-4 text-primary-600 focus:ring-primary-500 border-secondary-300 rounded"
+                />
+                <label className="ml-2 block text-sm text-secondary-700">
+                  {permission.label}
+                </label>
+              </div>
+            ))}
+          </div>
+
+          {error && (
+            <div className="bg-danger-50 border border-danger-200 rounded-md p-3">
+              <p className="text-sm text-danger-700">{error}</p>
+            </div>
+          )}
+
+          <div className="flex justify-end space-x-3">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2 text-sm font-medium text-secondary-700 bg-white border border-secondary-300 rounded-md hover:bg-secondary-50"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="px-4 py-2 text-sm font-medium text-white bg-primary-600 border border-transparent rounded-md hover:bg-primary-700 disabled:opacity-50"
+            >
+              {isLoading ? 'Creating...' : 'Create Role'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+export default Permissions
diff --git a/frontend/src/pages/Profile.jsx b/frontend/src/pages/Profile.jsx
new file mode 100644
index 0000000..8fc99b3
--- /dev/null
+++ b/frontend/src/pages/Profile.jsx
@@ -0,0 +1,414 @@
+import React, { useState } from 'react'
+import { useAuth } from '../contexts/AuthContext'
+import { useTheme } from '../contexts/ThemeContext'
+import { 
+  User, 
+  Mail, 
+  Shield, 
+  Key, 
+  Save, 
+  Eye, 
+  EyeOff,
+  CheckCircle,
+  AlertCircle,
+  Sun,
+  Moon,
+  Settings
+} from 'lucide-react'
+
+const Profile = () => {
+  const { user, updateProfile, changePassword } = useAuth()
+  const { theme, toggleTheme, isDark } = useTheme()
+  const [activeTab, setActiveTab] = useState('profile')
+  const [isLoading, setIsLoading] = useState(false)
+  const [message, setMessage] = useState({ type: '', text: '' })
+
+  const [profileData, setProfileData] = useState({
+    username: user?.username || '',
+    email: user?.email || ''
+  })
+
+  const [passwordData, setPasswordData] = useState({
+    currentPassword: '',
+    newPassword: '',
+    confirmPassword: ''
+  })
+
+  const [showPasswords, setShowPasswords] = useState({
+    current: false,
+    new: false,
+    confirm: false
+  })
+
+  const handleProfileSubmit = async (e) => {
+    e.preventDefault()
+    setIsLoading(true)
+    setMessage({ type: '', text: '' })
+
+    try {
+      const result = await updateProfile(profileData)
+      if (result.success) {
+        setMessage({ type: 'success', text: 'Profile updated successfully!' })
+      } else {
+        setMessage({ type: 'error', text: result.error || 'Failed to update profile' })
+      }
+    } catch (error) {
+      setMessage({ type: 'error', text: 'Network error occurred' })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handlePasswordSubmit = async (e) => {
+    e.preventDefault()
+    setIsLoading(true)
+    setMessage({ type: '', text: '' })
+
+    if (passwordData.newPassword !== passwordData.confirmPassword) {
+      setMessage({ type: 'error', text: 'New passwords do not match' })
+      setIsLoading(false)
+      return
+    }
+
+    if (passwordData.newPassword.length < 6) {
+      setMessage({ type: 'error', text: 'New password must be at least 6 characters' })
+      setIsLoading(false)
+      return
+    }
+
+    try {
+      const result = await changePassword(passwordData.currentPassword, passwordData.newPassword)
+      if (result.success) {
+        setMessage({ type: 'success', text: 'Password changed successfully!' })
+        setPasswordData({
+          currentPassword: '',
+          newPassword: '',
+          confirmPassword: ''
+        })
+      } else {
+        setMessage({ type: 'error', text: result.error || 'Failed to change password' })
+      }
+    } catch (error) {
+      setMessage({ type: 'error', text: 'Network error occurred' })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target
+    if (activeTab === 'profile') {
+      setProfileData(prev => ({ ...prev, [name]: value }))
+    } else {
+      setPasswordData(prev => ({ ...prev, [name]: value }))
+    }
+  }
+
+  const togglePasswordVisibility = (field) => {
+    setShowPasswords(prev => ({ ...prev, [field]: !prev[field] }))
+  }
+
+  const tabs = [
+    { id: 'profile', name: 'Profile Information', icon: User },
+    { id: 'password', name: 'Change Password', icon: Key },
+    { id: 'preferences', name: 'Preferences', icon: Settings }
+  ]
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div>
+        <p className="text-sm text-secondary-600 dark:text-secondary-300">
+          Manage your account information and security settings
+        </p>
+      </div>
+
+      {/* User Info Card */}
+      <div className="bg-white dark:bg-secondary-800 shadow rounded-lg p-6">
+        <div className="flex items-center space-x-4">
+          <div className="flex-shrink-0">
+            <div className="h-16 w-16 rounded-full bg-primary-100 flex items-center justify-center">
+              <User className="h-8 w-8 text-primary-600" />
+            </div>
+          </div>
+          <div className="flex-1">
+            <h3 className="text-lg font-medium text-secondary-900 dark:text-white">{user?.username}</h3>
+            <p className="text-sm text-secondary-600 dark:text-secondary-300">{user?.email}</p>
+            <div className="mt-2">
+              <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                user?.role === 'admin' 
+                  ? 'bg-primary-100 text-primary-800' 
+                  : user?.role === 'host_manager'
+                  ? 'bg-green-100 text-green-800'
+                  : user?.role === 'readonly'
+                  ? 'bg-yellow-100 text-yellow-800'
+                  : 'bg-secondary-100 text-secondary-800'
+              }`}>
+                <Shield className="h-3 w-3 mr-1" />
+                {user?.role?.charAt(0).toUpperCase() + user?.role?.slice(1).replace('_', ' ')}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <div className="bg-white dark:bg-secondary-800 shadow rounded-lg">
+        <div className="border-b border-secondary-200 dark:border-secondary-600">
+          <nav className="-mb-px flex space-x-8 px-6">
+            {tabs.map((tab) => {
+              const Icon = tab.icon
+              return (
+                <button
+                  key={tab.id}
+                  onClick={() => setActiveTab(tab.id)}
+                  className={`py-4 px-1 border-b-2 font-medium text-sm flex items-center ${
+                    activeTab === tab.id
+                      ? 'border-primary-500 text-primary-600 dark:text-primary-400'
+                      : 'border-transparent text-secondary-500 dark:text-secondary-400 hover:text-secondary-700 dark:hover:text-secondary-300 hover:border-secondary-300 dark:hover:border-secondary-500'
+                  }`}
+                >
+                  <Icon className="h-4 w-4 mr-2" />
+                  {tab.name}
+                </button>
+              )
+            })}
+          </nav>
+        </div>
+
+        <div className="p-6">
+          {/* Success/Error Message */}
+          {message.text && (
+            <div className={`mb-6 rounded-md p-4 ${
+              message.type === 'success' 
+                ? 'bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-700' 
+                : 'bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700'
+            }`}>
+              <div className="flex">
+                {message.type === 'success' ? (
+                  <CheckCircle className="h-5 w-5 text-green-400 dark:text-green-300" />
+                ) : (
+                  <AlertCircle className="h-5 w-5 text-red-400 dark:text-red-300" />
+                )}
+                <div className="ml-3">
+                  <p className={`text-sm font-medium ${
+                    message.type === 'success' ? 'text-green-800 dark:text-green-200' : 'text-red-800 dark:text-red-200'
+                  }`}>
+                    {message.text}
+                  </p>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Profile Information Tab */}
+          {activeTab === 'profile' && (
+            <form onSubmit={handleProfileSubmit} className="space-y-6">
+              <div>
+                <h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-4">Profile Information</h3>
+                <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
+                  <div>
+                    <label htmlFor="username" className="block text-sm font-medium text-secondary-700 dark:text-secondary-200">
+                      Username
+                    </label>
+                    <div className="mt-1 relative">
+                      <input
+                        type="text"
+                        name="username"
+                        id="username"
+                        value={profileData.username}
+                        onChange={handleInputChange}
+                        className="block w-full border-secondary-300 dark:border-secondary-600 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 pl-10 bg-white dark:bg-secondary-700 text-secondary-900 dark:text-white"
+                        required
+                      />
+                      <User className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-secondary-400 dark:text-secondary-500" />
+                    </div>
+                  </div>
+
+                  <div>
+                    <label htmlFor="email" className="block text-sm font-medium text-secondary-700 dark:text-secondary-200">
+                      Email Address
+                    </label>
+                    <div className="mt-1 relative">
+                      <input
+                        type="email"
+                        name="email"
+                        id="email"
+                        value={profileData.email}
+                        onChange={handleInputChange}
+                        className="block w-full border-secondary-300 dark:border-secondary-600 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 pl-10 bg-white dark:bg-secondary-700 text-secondary-900 dark:text-white"
+                        required
+                      />
+                      <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-secondary-400 dark:text-secondary-500" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex justify-end">
+                <button
+                  type="submit"
+                  disabled={isLoading}
+                  className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 disabled:opacity-50"
+                >
+                  <Save className="h-4 w-4 mr-2" />
+                  {isLoading ? 'Saving...' : 'Save Changes'}
+                </button>
+              </div>
+            </form>
+          )}
+
+          {/* Change Password Tab */}
+          {activeTab === 'password' && (
+            <form onSubmit={handlePasswordSubmit} className="space-y-6">
+              <div>
+                <h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-4">Change Password</h3>
+                <div className="space-y-4">
+                  <div>
+                    <label htmlFor="currentPassword" className="block text-sm font-medium text-secondary-700 dark:text-secondary-200">
+                      Current Password
+                    </label>
+                    <div className="mt-1 relative">
+                      <input
+                        type={showPasswords.current ? 'text' : 'password'}
+                        name="currentPassword"
+                        id="currentPassword"
+                        value={passwordData.currentPassword}
+                        onChange={handleInputChange}
+                        className="block w-full border-secondary-300 dark:border-secondary-600 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 pl-10 pr-10 bg-white dark:bg-secondary-700 text-secondary-900 dark:text-white"
+                        required
+                      />
+                      <Key className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-secondary-400 dark:text-secondary-500" />
+                      <button
+                        type="button"
+                        onClick={() => togglePasswordVisibility('current')}
+                        className="absolute right-3 top-1/2 transform -translate-y-1/2 text-secondary-400 dark:text-secondary-500 hover:text-secondary-600 dark:hover:text-secondary-300"
+                      >
+                        {showPasswords.current ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                      </button>
+                    </div>
+                  </div>
+
+                  <div>
+                    <label htmlFor="newPassword" className="block text-sm font-medium text-secondary-700 dark:text-secondary-200">
+                      New Password
+                    </label>
+                    <div className="mt-1 relative">
+                      <input
+                        type={showPasswords.new ? 'text' : 'password'}
+                        name="newPassword"
+                        id="newPassword"
+                        value={passwordData.newPassword}
+                        onChange={handleInputChange}
+                        className="block w-full border-secondary-300 dark:border-secondary-600 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 pl-10 pr-10 bg-white dark:bg-secondary-700 text-secondary-900 dark:text-white"
+                        required
+                        minLength="6"
+                      />
+                      <Key className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-secondary-400 dark:text-secondary-500" />
+                      <button
+                        type="button"
+                        onClick={() => togglePasswordVisibility('new')}
+                        className="absolute right-3 top-1/2 transform -translate-y-1/2 text-secondary-400 dark:text-secondary-500 hover:text-secondary-600 dark:hover:text-secondary-300"
+                      >
+                        {showPasswords.new ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                      </button>
+                    </div>
+                    <p className="mt-1 text-xs text-secondary-500 dark:text-secondary-400">Must be at least 6 characters long</p>
+                  </div>
+
+                  <div>
+                    <label htmlFor="confirmPassword" className="block text-sm font-medium text-secondary-700 dark:text-secondary-200">
+                      Confirm New Password
+                    </label>
+                    <div className="mt-1 relative">
+                      <input
+                        type={showPasswords.confirm ? 'text' : 'password'}
+                        name="confirmPassword"
+                        id="confirmPassword"
+                        value={passwordData.confirmPassword}
+                        onChange={handleInputChange}
+                        className="block w-full border-secondary-300 dark:border-secondary-600 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 pl-10 pr-10 bg-white dark:bg-secondary-700 text-secondary-900 dark:text-white"
+                        required
+                        minLength="6"
+                      />
+                      <Key className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-secondary-400 dark:text-secondary-500" />
+                      <button
+                        type="button"
+                        onClick={() => togglePasswordVisibility('confirm')}
+                        className="absolute right-3 top-1/2 transform -translate-y-1/2 text-secondary-400 dark:text-secondary-500 hover:text-secondary-600 dark:hover:text-secondary-300"
+                      >
+                        {showPasswords.confirm ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex justify-end">
+                <button
+                  type="submit"
+                  disabled={isLoading}
+                  className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 disabled:opacity-50"
+                >
+                  <Key className="h-4 w-4 mr-2" />
+                  {isLoading ? 'Changing...' : 'Change Password'}
+                </button>
+              </div>
+            </form>
+          )}
+
+          {/* Preferences Tab */}
+          {activeTab === 'preferences' && (
+            <div className="space-y-6">
+              <div>
+                <h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-4">Preferences</h3>
+                
+                {/* Theme Settings */}
+                <div className="space-y-4">
+                  <div>
+                    <h4 className="text-sm font-medium text-secondary-700 dark:text-secondary-200 mb-3">Appearance</h4>
+                    <div className="bg-secondary-50 dark:bg-secondary-700 p-4 rounded-lg">
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center space-x-3">
+                          <div className="flex-shrink-0">
+                            {isDark ? (
+                              <Moon className="h-5 w-5 text-secondary-600 dark:text-secondary-400" />
+                            ) : (
+                              <Sun className="h-5 w-5 text-secondary-600 dark:text-secondary-400" />
+                            )}
+                          </div>
+                          <div>
+                            <p className="text-sm font-medium text-secondary-900 dark:text-white">
+                              {isDark ? 'Dark Mode' : 'Light Mode'}
+                            </p>
+                            <p className="text-xs text-secondary-500 dark:text-secondary-400">
+                              {isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+                            </p>
+                          </div>
+                        </div>
+                        <button
+                          onClick={toggleTheme}
+                          className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 ${
+                            isDark ? 'bg-primary-600' : 'bg-secondary-300'
+                          }`}
+                        >
+                          <span
+                            className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                              isDark ? 'translate-x-6' : 'translate-x-1'
+                            }`}
+                          />
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Profile
diff --git a/frontend/src/pages/Repositories.jsx b/frontend/src/pages/Repositories.jsx
new file mode 100644
index 0000000..3ef0371
--- /dev/null
+++ b/frontend/src/pages/Repositories.jsx
@@ -0,0 +1,272 @@
+import React, { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Link } from 'react-router-dom';
+import { 
+  Server, 
+  Shield, 
+  ShieldCheck, 
+  AlertTriangle,
+  Users,
+  Globe,
+  Lock,
+  Unlock,
+  Database,
+  Eye
+} from 'lucide-react';
+import { repositoryAPI } from '../utils/api';
+
+const Repositories = () => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [filterType, setFilterType] = useState('all'); // all, secure, insecure
+  const [filterStatus, setFilterStatus] = useState('all'); // all, active, inactive
+
+  // Fetch repositories
+  const { data: repositories = [], isLoading, error } = useQuery({
+    queryKey: ['repositories'],
+    queryFn: () => repositoryAPI.list().then(res => res.data)
+  });
+
+  // Fetch repository statistics
+  const { data: stats } = useQuery({
+    queryKey: ['repository-stats'],
+    queryFn: () => repositoryAPI.getStats().then(res => res.data)
+  });
+
+  // Filter repositories based on search and filters
+  const filteredRepositories = repositories.filter(repo => {
+    const matchesSearch = repo.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                         repo.url.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                         repo.distribution.toLowerCase().includes(searchTerm.toLowerCase());
+    
+    const matchesType = filterType === 'all' || 
+                       (filterType === 'secure' && repo.isSecure) ||
+                       (filterType === 'insecure' && !repo.isSecure);
+    
+    const matchesStatus = filterStatus === 'all' ||
+                         (filterStatus === 'active' && repo.isActive) ||
+                         (filterStatus === 'inactive' && !repo.isActive);
+    
+    return matchesSearch && matchesType && matchesStatus;
+  });
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
+        <div className="flex items-center">
+          <AlertTriangle className="h-5 w-5 text-red-400 mr-2" />
+          <span className="text-red-700 dark:text-red-300">
+            Failed to load repositories: {error.message}
+          </span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-secondary-900 dark:text-white">
+            Repositories
+          </h1>
+          <p className="text-secondary-500 dark:text-secondary-300 mt-1">
+            Manage and monitor package repositories across your infrastructure
+          </p>
+        </div>
+      </div>
+
+      {/* Statistics Cards */}
+      {stats && (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          <div className="bg-white dark:bg-secondary-800 rounded-lg shadow hover:shadow-md transition-shadow p-6">
+            <div className="flex items-center">
+              <div className="flex-shrink-0">
+                <Database className="h-8 w-8 text-blue-600" />
+              </div>
+              <div className="ml-4">
+                <p className="text-sm font-medium text-secondary-500 dark:text-secondary-300">Total Repositories</p>
+                <p className="text-2xl font-bold text-secondary-900 dark:text-white">{stats.totalRepositories}</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-white dark:bg-secondary-800 rounded-lg shadow hover:shadow-md transition-shadow p-6">
+            <div className="flex items-center">
+              <div className="flex-shrink-0">
+                <Server className="h-8 w-8 text-green-600" />
+              </div>
+              <div className="ml-4">
+                <p className="text-sm font-medium text-secondary-500 dark:text-secondary-300">Active Repositories</p>
+                <p className="text-2xl font-bold text-secondary-900 dark:text-white">{stats.activeRepositories}</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-white dark:bg-secondary-800 rounded-lg shadow hover:shadow-md transition-shadow p-6">
+            <div className="flex items-center">
+              <div className="flex-shrink-0">
+                <Shield className="h-8 w-8 text-blue-600" />
+              </div>
+              <div className="ml-4">
+                <p className="text-sm font-medium text-secondary-500 dark:text-secondary-300">Secure (HTTPS)</p>
+                <p className="text-2xl font-bold text-secondary-900 dark:text-white">{stats.secureRepositories}</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-white dark:bg-secondary-800 rounded-lg shadow hover:shadow-md transition-shadow p-6">
+            <div className="flex items-center">
+              <div className="flex-shrink-0">
+                <div className="relative">
+                  <ShieldCheck className="h-8 w-8 text-green-600" />
+                  <span className="absolute -top-1 -right-1 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-xs font-medium px-1.5 py-0.5 rounded-full">
+                    {stats.securityPercentage}%
+                  </span>
+                </div>
+              </div>
+              <div className="ml-4">
+                <p className="text-sm font-medium text-secondary-500 dark:text-secondary-300">Security Score</p>
+                <p className="text-2xl font-bold text-secondary-900 dark:text-white">{stats.securityPercentage}%</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Search and Filters */}
+      <div className="bg-white dark:bg-secondary-800 rounded-lg shadow p-6">
+        <div className="flex flex-col sm:flex-row gap-4">
+          {/* Search */}
+          <div className="flex-1">
+            <input
+              type="text"
+              placeholder="Search repositories..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="w-full px-3 py-2 border border-secondary-300 dark:border-secondary-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-secondary-700 dark:text-white"
+            />
+          </div>
+
+          {/* Security Filter */}
+          <div>
+            <select
+              value={filterType}
+              onChange={(e) => setFilterType(e.target.value)}
+              className="px-3 py-2 border border-secondary-300 dark:border-secondary-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-secondary-700 dark:text-white"
+            >
+              <option value="all">All Security Types</option>
+              <option value="secure">HTTPS Only</option>
+              <option value="insecure">HTTP Only</option>
+            </select>
+          </div>
+
+          {/* Status Filter */}
+          <div>
+            <select
+              value={filterStatus}
+              onChange={(e) => setFilterStatus(e.target.value)}
+              className="px-3 py-2 border border-secondary-300 dark:border-secondary-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-secondary-700 dark:text-white"
+            >
+              <option value="all">All Statuses</option>
+              <option value="active">Active Only</option>
+              <option value="inactive">Inactive Only</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      {/* Repositories List */}
+      <div className="bg-white dark:bg-secondary-800 rounded-lg shadow">
+        <div className="px-6 py-4 border-b border-secondary-200 dark:border-secondary-700">
+          <h2 className="text-lg font-semibold text-secondary-900 dark:text-white">
+            Repositories ({filteredRepositories.length})
+          </h2>
+        </div>
+
+        {filteredRepositories.length === 0 ? (
+          <div className="px-6 py-12 text-center">
+            <Database className="mx-auto h-12 w-12 text-secondary-400" />
+            <h3 className="mt-2 text-sm font-medium text-secondary-900 dark:text-white">No repositories found</h3>
+            <p className="mt-1 text-sm text-secondary-500 dark:text-secondary-300">
+              {searchTerm || filterType !== 'all' || filterStatus !== 'all' 
+                ? 'Try adjusting your search or filters.' 
+                : 'No repositories have been reported by your hosts yet.'}
+            </p>
+          </div>
+        ) : (
+          <div className="divide-y divide-secondary-200 dark:divide-secondary-700">
+            {filteredRepositories.map((repo) => (
+              <div key={repo.id} className="px-6 py-4 hover:bg-secondary-50 dark:hover:bg-secondary-700/50">
+                <div className="flex items-center justify-between">
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-3">
+                      <div className="flex items-center gap-2">
+                        {repo.isSecure ? (
+                          <Lock className="h-4 w-4 text-green-600" />
+                        ) : (
+                          <Unlock className="h-4 w-4 text-orange-600" />
+                        )}
+                        <h3 className="text-lg font-medium text-secondary-900 dark:text-white">
+                          {repo.name}
+                        </h3>
+                        <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                          repo.isActive
+                            ? 'bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-300'
+                            : 'bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-300'
+                        }`}>
+                          {repo.isActive ? 'Active' : 'Inactive'}
+                        </span>
+                      </div>
+                    </div>
+                    
+                    <div className="mt-2 space-y-1">
+                      <p className="text-sm text-secondary-600 dark:text-secondary-300">
+                        <Globe className="inline h-4 w-4 mr-1" />
+                        {repo.url}
+                      </p>
+                      <div className="flex items-center gap-4 text-sm text-secondary-500 dark:text-secondary-400">
+                        <span>Distribution: <span className="font-medium">{repo.distribution}</span></span>
+                        <span>Type: <span className="font-medium">{repo.repoType}</span></span>
+                        <span>Components: <span className="font-medium">{repo.components}</span></span>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="flex items-center gap-4">
+                    {/* Host Count */}
+                    <div className="text-center">
+                      <div className="flex items-center gap-1 text-sm text-secondary-500 dark:text-secondary-400">
+                        <Users className="h-4 w-4" />
+                        <span>{repo.hostCount} hosts</span>
+                      </div>
+                    </div>
+
+                    {/* View Details */}
+                    <Link
+                      to={`/repositories/${repo.id}`}
+                      className="btn-outline text-sm flex items-center gap-1"
+                    >
+                      <Eye className="h-4 w-4" />
+                      View
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Repositories;
diff --git a/frontend/src/pages/RepositoryDetail.jsx b/frontend/src/pages/RepositoryDetail.jsx
new file mode 100644
index 0000000..dbac0a0
--- /dev/null
+++ b/frontend/src/pages/RepositoryDetail.jsx
@@ -0,0 +1,369 @@
+import React, { useState } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { 
+  ArrowLeft,
+  Server, 
+  Shield, 
+  ShieldOff,
+  AlertTriangle,
+  Users,
+  Globe,
+  Lock,
+  Unlock,
+  Database,
+  Calendar,
+  Activity
+} from 'lucide-react';
+import { repositoryAPI } from '../utils/api';
+
+const RepositoryDetail = () => {
+  const { repositoryId } = useParams();
+  const queryClient = useQueryClient();
+  const [editMode, setEditMode] = useState(false);
+  const [formData, setFormData] = useState({});
+
+  // Fetch repository details
+  const { data: repository, isLoading, error } = useQuery({
+    queryKey: ['repository', repositoryId],
+    queryFn: () => repositoryAPI.getById(repositoryId).then(res => res.data),
+    enabled: !!repositoryId
+  });
+
+  // Update repository mutation
+  const updateRepositoryMutation = useMutation({
+    mutationFn: (data) => repositoryAPI.update(repositoryId, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries(['repository', repositoryId]);
+      queryClient.invalidateQueries(['repositories']);
+      setEditMode(false);
+    }
+  });
+
+
+  const handleEdit = () => {
+    setFormData({
+      name: repository.name,
+      description: repository.description || '',
+      isActive: repository.isActive,
+      priority: repository.priority || ''
+    });
+    setEditMode(true);
+  };
+
+  const handleSave = () => {
+    updateRepositoryMutation.mutate(formData);
+  };
+
+  const handleCancel = () => {
+    setEditMode(false);
+    setFormData({});
+  };
+
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center gap-4">
+          <Link
+            to="/repositories"
+            className="btn-outline flex items-center gap-2"
+          >
+            <ArrowLeft className="h-4 w-4" />
+            Back to Repositories
+          </Link>
+        </div>
+        <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
+          <div className="flex items-center">
+            <AlertTriangle className="h-5 w-5 text-red-400 mr-2" />
+            <span className="text-red-700 dark:text-red-300">
+              Failed to load repository: {error.message}
+            </span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!repository) {
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center gap-4">
+          <Link
+            to="/repositories"
+            className="btn-outline flex items-center gap-2"
+          >
+            <ArrowLeft className="h-4 w-4" />
+            Back to Repositories
+          </Link>
+        </div>
+        <div className="text-center py-12">
+          <Database className="mx-auto h-12 w-12 text-secondary-400" />
+          <h3 className="mt-2 text-sm font-medium text-secondary-900 dark:text-white">Repository not found</h3>
+          <p className="mt-1 text-sm text-secondary-500 dark:text-secondary-300">
+            The repository you're looking for doesn't exist.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <Link
+            to="/repositories"
+            className="btn-outline flex items-center gap-2"
+          >
+            <ArrowLeft className="h-4 w-4" />
+            Back
+          </Link>
+          <div>
+            <div className="flex items-center gap-3">
+              {repository.isSecure ? (
+                <Lock className="h-6 w-6 text-green-600" />
+              ) : (
+                <Unlock className="h-6 w-6 text-orange-600" />
+              )}
+              <h1 className="text-2xl font-bold text-secondary-900 dark:text-white">
+                {repository.name}
+              </h1>
+              <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                repository.isActive
+                  ? 'bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-300'
+                  : 'bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-300'
+              }`}>
+                {repository.isActive ? 'Active' : 'Inactive'}
+              </span>
+            </div>
+            <p className="text-secondary-500 dark:text-secondary-300 mt-1">
+              Repository configuration and host assignments
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          {editMode ? (
+            <>
+              <button
+                onClick={handleCancel}
+                className="btn-outline"
+                disabled={updateRepositoryMutation.isPending}
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleSave}
+                className="btn-primary"
+                disabled={updateRepositoryMutation.isPending}
+              >
+                {updateRepositoryMutation.isPending ? 'Saving...' : 'Save Changes'}
+              </button>
+            </>
+          ) : (
+            <button
+              onClick={handleEdit}
+              className="btn-primary"
+            >
+              Edit Repository
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Repository Information */}
+      <div className="bg-white dark:bg-secondary-800 rounded-lg shadow">
+        <div className="px-6 py-4 border-b border-secondary-200 dark:border-secondary-700">
+          <h2 className="text-lg font-semibold text-secondary-900 dark:text-white">
+            Repository Information
+          </h2>
+        </div>
+        <div className="px-6 py-4 space-y-4">
+          {editMode ? (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div>
+                <label className="block text-sm font-medium text-secondary-700 dark:text-secondary-300 mb-1">
+                  Repository Name
+                </label>
+                <input
+                  type="text"
+                  value={formData.name}
+                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                  className="w-full px-3 py-2 border border-secondary-300 dark:border-secondary-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-secondary-700 dark:text-white"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-secondary-700 dark:text-secondary-300 mb-1">
+                  Priority
+                </label>
+                <input
+                  type="number"
+                  value={formData.priority}
+                  onChange={(e) => setFormData({ ...formData, priority: e.target.value })}
+                  className="w-full px-3 py-2 border border-secondary-300 dark:border-secondary-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-secondary-700 dark:text-white"
+                  placeholder="Optional priority"
+                />
+              </div>
+              <div className="md:col-span-2">
+                <label className="block text-sm font-medium text-secondary-700 dark:text-secondary-300 mb-1">
+                  Description
+                </label>
+                <textarea
+                  value={formData.description}
+                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                  rows="3"
+                  className="w-full px-3 py-2 border border-secondary-300 dark:border-secondary-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-secondary-700 dark:text-white"
+                  placeholder="Optional description"
+                />
+              </div>
+              <div className="flex items-center">
+                <input
+                  type="checkbox"
+                  id="isActive"
+                  checked={formData.isActive}
+                  onChange={(e) => setFormData({ ...formData, isActive: e.target.checked })}
+                  className="h-4 w-4 text-primary-600 focus:ring-primary-500 border-secondary-300 rounded"
+                />
+                <label htmlFor="isActive" className="ml-2 block text-sm text-secondary-900 dark:text-white">
+                  Repository is active
+                </label>
+              </div>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div className="space-y-4">
+                <div>
+                  <label className="text-sm font-medium text-secondary-500 dark:text-secondary-400">URL</label>
+                  <div className="flex items-center mt-1">
+                    <Globe className="h-4 w-4 text-secondary-400 mr-2" />
+                    <span className="text-secondary-900 dark:text-white">{repository.url}</span>
+                  </div>
+                </div>
+                <div>
+                  <label className="text-sm font-medium text-secondary-500 dark:text-secondary-400">Distribution</label>
+                  <p className="text-secondary-900 dark:text-white mt-1">{repository.distribution}</p>
+                </div>
+                <div>
+                  <label className="text-sm font-medium text-secondary-500 dark:text-secondary-400">Components</label>
+                  <p className="text-secondary-900 dark:text-white mt-1">{repository.components}</p>
+                </div>
+                <div>
+                  <label className="text-sm font-medium text-secondary-500 dark:text-secondary-400">Repository Type</label>
+                  <p className="text-secondary-900 dark:text-white mt-1">{repository.repoType}</p>
+                </div>
+              </div>
+              <div className="space-y-4">
+                <div>
+                  <label className="text-sm font-medium text-secondary-500 dark:text-secondary-400">Security</label>
+                  <div className="flex items-center mt-1">
+                    {repository.isSecure ? (
+                      <>
+                        <Shield className="h-4 w-4 text-green-600 mr-2" />
+                        <span className="text-green-600">Secure (HTTPS)</span>
+                      </>
+                    ) : (
+                      <>
+                        <ShieldOff className="h-4 w-4 text-orange-600 mr-2" />
+                        <span className="text-orange-600">Insecure (HTTP)</span>
+                      </>
+                    )}
+                  </div>
+                </div>
+                {repository.priority && (
+                  <div>
+                    <label className="text-sm font-medium text-secondary-500 dark:text-secondary-400">Priority</label>
+                    <p className="text-secondary-900 dark:text-white mt-1">{repository.priority}</p>
+                  </div>
+                )}
+                {repository.description && (
+                  <div>
+                    <label className="text-sm font-medium text-secondary-500 dark:text-secondary-400">Description</label>
+                    <p className="text-secondary-900 dark:text-white mt-1">{repository.description}</p>
+                  </div>
+                )}
+                <div>
+                  <label className="text-sm font-medium text-secondary-500 dark:text-secondary-400">Created</label>
+                  <div className="flex items-center mt-1">
+                    <Calendar className="h-4 w-4 text-secondary-400 mr-2" />
+                    <span className="text-secondary-900 dark:text-white">
+                      {new Date(repository.createdAt).toLocaleDateString()}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Hosts Using This Repository */}
+      <div className="bg-white dark:bg-secondary-800 rounded-lg shadow">
+        <div className="px-6 py-4 border-b border-secondary-200 dark:border-secondary-700">
+          <h2 className="text-lg font-semibold text-secondary-900 dark:text-white flex items-center gap-2">
+            <Users className="h-5 w-5" />
+            Hosts Using This Repository ({repository.hostRepositories?.length || 0})
+          </h2>
+        </div>
+        {!repository.hostRepositories || repository.hostRepositories.length === 0 ? (
+          <div className="px-6 py-12 text-center">
+            <Server className="mx-auto h-12 w-12 text-secondary-400" />
+            <h3 className="mt-2 text-sm font-medium text-secondary-900 dark:text-white">No hosts using this repository</h3>
+            <p className="mt-1 text-sm text-secondary-500 dark:text-secondary-300">
+              This repository hasn't been reported by any hosts yet.
+            </p>
+          </div>
+        ) : (
+          <div className="divide-y divide-secondary-200 dark:divide-secondary-700">
+            {repository.hostRepositories.map((hostRepo) => (
+              <div key={hostRepo.id} className="px-6 py-4 hover:bg-secondary-50 dark:hover:bg-secondary-700/50">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    <div className={`w-3 h-3 rounded-full ${
+                      hostRepo.host.status === 'active' 
+                        ? 'bg-green-500' 
+                        : hostRepo.host.status === 'pending'
+                        ? 'bg-yellow-500'
+                        : 'bg-red-500'
+                    }`} />
+                    <div>
+                      <Link
+                        to={`/hosts/${hostRepo.host.id}`}
+                        className="text-primary-600 hover:text-primary-700 font-medium"
+                      >
+                        {hostRepo.host.hostname}
+                      </Link>
+                      <div className="flex items-center gap-4 text-sm text-secondary-500 dark:text-secondary-400 mt-1">
+                        <span>IP: {hostRepo.host.ip}</span>
+                        <span>OS: {hostRepo.host.osType} {hostRepo.host.osVersion}</span>
+                        <span>Last Update: {new Date(hostRepo.host.lastUpdate).toLocaleDateString()}</span>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-4">
+                    <div className="text-center">
+                      <div className="text-xs text-secondary-500 dark:text-secondary-400">Last Checked</div>
+                      <div className="text-sm text-secondary-900 dark:text-white">
+                        {new Date(hostRepo.lastChecked).toLocaleDateString()}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default RepositoryDetail;
diff --git a/frontend/src/pages/Settings.jsx b/frontend/src/pages/Settings.jsx
new file mode 100644
index 0000000..ecb2408
--- /dev/null
+++ b/frontend/src/pages/Settings.jsx
@@ -0,0 +1,824 @@
+import React, { useState, useEffect } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { Save, Server, Globe, Shield, AlertCircle, CheckCircle, Code, Plus, Trash2, Star, Download, X, Settings as SettingsIcon } from 'lucide-react';
+import { settingsAPI, agentVersionAPI } from '../utils/api';
+
+const Settings = () => {
+  const [formData, setFormData] = useState({
+    serverProtocol: 'http',
+    serverHost: 'localhost',
+    serverPort: 3001,
+    frontendUrl: 'http://localhost:3000',
+    updateInterval: 60,
+    autoUpdate: false
+  });
+  const [errors, setErrors] = useState({});
+  const [isDirty, setIsDirty] = useState(false);
+  
+  // Tab management
+  const [activeTab, setActiveTab] = useState('server');
+  
+  // Tab configuration
+  const tabs = [
+    { id: 'server', name: 'Server Configuration', icon: Server },
+    { id: 'frontend', name: 'Frontend Configuration', icon: Globe },
+    { id: 'agent', name: 'Agent Management', icon: SettingsIcon }
+  ];
+  
+  // Agent version management state
+  const [showAgentVersionModal, setShowAgentVersionModal] = useState(false);
+  const [editingAgentVersion, setEditingAgentVersion] = useState(null);
+  const [agentVersionForm, setAgentVersionForm] = useState({
+    version: '',
+    releaseNotes: '',
+    scriptContent: '',
+    isDefault: false
+  });
+
+  const queryClient = useQueryClient();
+
+  // Fetch current settings
+  const { data: settings, isLoading, error } = useQuery({
+    queryKey: ['settings'],
+    queryFn: () => settingsAPI.get().then(res => res.data)
+  });
+
+  // Update form data when settings are loaded
+  useEffect(() => {
+    if (settings) {
+      console.log('Settings loaded:', settings);
+      console.log('updateInterval from settings:', settings.updateInterval);
+      const newFormData = {
+        serverProtocol: settings.serverProtocol || 'http',
+        serverHost: settings.serverHost || 'localhost',
+        serverPort: settings.serverPort || 3001,
+        frontendUrl: settings.frontendUrl || 'http://localhost:3000',
+        updateInterval: settings.updateInterval || 60,
+        autoUpdate: settings.autoUpdate || false
+      };
+      console.log('Setting form data to:', newFormData);
+      setFormData(newFormData);
+      setIsDirty(false);
+    }
+  }, [settings]);
+
+  // Update settings mutation
+  const updateSettingsMutation = useMutation({
+    mutationFn: (data) => {
+      console.log('Mutation called with data:', data);
+      return settingsAPI.update(data).then(res => {
+        console.log('API response:', res);
+        return res.data;
+      });
+    },
+    onSuccess: (data) => {
+      console.log('Mutation success:', data);
+      console.log('Invalidating queries and updating form data');
+      queryClient.invalidateQueries(['settings']);
+      // Update form data with the returned data
+      setFormData({
+        serverProtocol: data.serverProtocol || 'http',
+        serverHost: data.serverHost || 'localhost',
+        serverPort: data.serverPort || 3001,
+        frontendUrl: data.frontendUrl || 'http://localhost:3000',
+        updateInterval: data.updateInterval || 60,
+        autoUpdate: data.autoUpdate || false
+      });
+      setIsDirty(false);
+      setErrors({});
+    },
+    onError: (error) => {
+      console.log('Mutation error:', error);
+      if (error.response?.data?.errors) {
+        setErrors(error.response.data.errors.reduce((acc, err) => {
+          acc[err.path] = err.msg;
+          return acc;
+        }, {}));
+      } else {
+        setErrors({ general: error.response?.data?.error || 'Failed to update settings' });
+      }
+    }
+  });
+
+  // Agent version queries and mutations
+  const { data: agentVersions, isLoading: agentVersionsLoading, error: agentVersionsError } = useQuery({
+    queryKey: ['agentVersions'],
+    queryFn: () => {
+      console.log('Fetching agent versions...');
+      return agentVersionAPI.list().then(res => {
+        console.log('Agent versions API response:', res);
+        return res.data;
+      });
+    }
+  });
+
+  // Debug agent versions
+  useEffect(() => {
+    console.log('Agent versions data:', agentVersions);
+    console.log('Agent versions loading:', agentVersionsLoading);
+    console.log('Agent versions error:', agentVersionsError);
+  }, [agentVersions, agentVersionsLoading, agentVersionsError]);
+
+  const createAgentVersionMutation = useMutation({
+    mutationFn: (data) => agentVersionAPI.create(data).then(res => res.data),
+    onSuccess: () => {
+      queryClient.invalidateQueries(['agentVersions']);
+      setShowAgentVersionModal(false);
+      setAgentVersionForm({ version: '', releaseNotes: '', scriptContent: '', isDefault: false });
+    }
+  });
+
+  const setCurrentAgentVersionMutation = useMutation({
+    mutationFn: (id) => agentVersionAPI.setCurrent(id).then(res => res.data),
+    onSuccess: () => {
+      queryClient.invalidateQueries(['agentVersions']);
+    }
+  });
+
+  const setDefaultAgentVersionMutation = useMutation({
+    mutationFn: (id) => agentVersionAPI.setDefault(id).then(res => res.data),
+    onSuccess: () => {
+      queryClient.invalidateQueries(['agentVersions']);
+    }
+  });
+
+  const deleteAgentVersionMutation = useMutation({
+    mutationFn: (id) => agentVersionAPI.delete(id).then(res => res.data),
+    onSuccess: () => {
+      queryClient.invalidateQueries(['agentVersions']);
+    }
+  });
+
+  const handleInputChange = (field, value) => {
+    console.log(`handleInputChange: ${field} = ${value}`);
+    setFormData(prev => {
+      const newData = { ...prev, [field]: value };
+      console.log('New form data:', newData);
+      return newData;
+    });
+    setIsDirty(true);
+    if (errors[field]) {
+      setErrors(prev => ({ ...prev, [field]: null }));
+    }
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    updateSettingsMutation.mutate(formData);
+  };
+
+  const validateForm = () => {
+    const newErrors = {};
+    
+    if (!formData.serverHost.trim()) {
+      newErrors.serverHost = 'Server host is required';
+    }
+    
+    if (!formData.serverPort || formData.serverPort < 1 || formData.serverPort > 65535) {
+      newErrors.serverPort = 'Port must be between 1 and 65535';
+    }
+    
+    try {
+      new URL(formData.frontendUrl);
+    } catch {
+      newErrors.frontendUrl = 'Frontend URL must be a valid URL';
+    }
+    
+    if (!formData.updateInterval || formData.updateInterval < 5 || formData.updateInterval > 1440) {
+      newErrors.updateInterval = 'Update interval must be between 5 and 1440 minutes';
+    }
+    
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSave = () => {
+    console.log('Saving settings:', formData);
+    if (validateForm()) {
+      console.log('Validation passed, calling mutation');
+      updateSettingsMutation.mutate(formData);
+    } else {
+      console.log('Validation failed:', errors);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700 rounded-md p-4">
+        <div className="flex">
+          <AlertCircle className="h-5 w-5 text-red-400 dark:text-red-300" />
+          <div className="ml-3">
+            <h3 className="text-sm font-medium text-red-800 dark:text-red-200">Error loading settings</h3>
+            <p className="mt-1 text-sm text-red-700 dark:text-red-300">
+              {error.response?.data?.error || 'Failed to load settings'}
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto p-6">
+      <div className="mb-8">
+        <p className="text-secondary-600 dark:text-secondary-300">
+          Configure your PatchMon server settings. These settings will be used in installation scripts and agent communications.
+        </p>
+      </div>
+
+      {errors.general && (
+        <div className="mb-6 bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700 rounded-md p-4">
+          <div className="flex">
+            <AlertCircle className="h-5 w-5 text-red-400 dark:text-red-300" />
+            <div className="ml-3">
+              <p className="text-sm text-red-700 dark:text-red-300">{errors.general}</p>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Tab Navigation */}
+      <div className="bg-white dark:bg-secondary-800 shadow rounded-lg">
+        <div className="border-b border-secondary-200 dark:border-secondary-600">
+          <nav className="-mb-px flex space-x-8 px-6">
+            {tabs.map((tab) => {
+              const Icon = tab.icon;
+              return (
+                <button
+                  key={tab.id}
+                  onClick={() => setActiveTab(tab.id)}
+                  className={`py-4 px-1 border-b-2 font-medium text-sm flex items-center gap-2 ${
+                    activeTab === tab.id
+                      ? 'border-primary-500 text-primary-600 dark:text-primary-400'
+                      : 'border-transparent text-secondary-500 dark:text-secondary-400 hover:text-secondary-700 dark:hover:text-secondary-300 hover:border-secondary-300 dark:hover:border-secondary-500'
+                  }`}
+                >
+                  <Icon className="h-4 w-4" />
+                  {tab.name}
+                </button>
+              );
+            })}
+          </nav>
+        </div>
+
+        {/* Tab Content */}
+        <div className="p-6">
+          {/* Server Configuration Tab */}
+          {activeTab === 'server' && (
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <div className="flex items-center mb-6">
+                <Server className="h-6 w-6 text-primary-600 mr-3" />
+                <h2 className="text-xl font-semibold text-secondary-900 dark:text-white">Server Configuration</h2>
+              </div>
+          
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div>
+              <label className="block text-sm font-medium text-secondary-700 dark:text-secondary-200 mb-2">
+                Protocol
+              </label>
+              <select
+                value={formData.serverProtocol}
+                onChange={(e) => handleInputChange('serverProtocol', e.target.value)}
+                className="w-full border-secondary-300 dark:border-secondary-600 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-secondary-700 text-secondary-900 dark:text-white"
+              >
+                <option value="http">HTTP</option>
+                <option value="https">HTTPS</option>
+              </select>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-secondary-700 dark:text-secondary-200 mb-2">
+                Host *
+              </label>
+              <input
+                type="text"
+                value={formData.serverHost}
+                onChange={(e) => handleInputChange('serverHost', e.target.value)}
+                className={`w-full border rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-secondary-700 text-secondary-900 dark:text-white ${
+                  errors.serverHost ? 'border-red-300 dark:border-red-500' : 'border-secondary-300 dark:border-secondary-600'
+                }`}
+                placeholder="example.com"
+              />
+              {errors.serverHost && (
+                <p className="mt-1 text-sm text-red-600 dark:text-red-400">{errors.serverHost}</p>
+              )}
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-secondary-700 dark:text-secondary-200 mb-2">
+                Port *
+              </label>
+              <input
+                type="number"
+                value={formData.serverPort}
+                onChange={(e) => handleInputChange('serverPort', parseInt(e.target.value))}
+                className={`w-full border rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-secondary-700 text-secondary-900 dark:text-white ${
+                  errors.serverPort ? 'border-red-300 dark:border-red-500' : 'border-secondary-300 dark:border-secondary-600'
+                }`}
+                min="1"
+                max="65535"
+              />
+              {errors.serverPort && (
+                <p className="mt-1 text-sm text-red-600 dark:text-red-400">{errors.serverPort}</p>
+              )}
+            </div>
+          </div>
+
+          <div className="mt-4 p-4 bg-secondary-50 dark:bg-secondary-700 rounded-md">
+            <h4 className="text-sm font-medium text-secondary-900 dark:text-white mb-2">Server URL</h4>
+            <p className="text-sm text-secondary-600 dark:text-secondary-300 font-mono">
+              {formData.serverProtocol}://{formData.serverHost}:{formData.serverPort}
+            </p>
+            <p className="text-xs text-secondary-500 dark:text-secondary-400 mt-1">
+              This URL will be used in installation scripts and agent communications.
+            </p>
+              </div>
+
+              {/* Update Interval */}
+              <div>
+                <label className="block text-sm font-medium text-secondary-700 dark:text-secondary-200 mb-2">
+                  Agent Update Interval (minutes)
+                </label>
+                <input
+                  type="number"
+                  min="5"
+                  max="1440"
+                  value={formData.updateInterval}
+                  onChange={(e) => {
+                    console.log('Update interval input changed:', e.target.value);
+                    handleInputChange('updateInterval', parseInt(e.target.value) || 60);
+                  }}
+                  className={`w-full border rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-secondary-700 text-secondary-900 dark:text-white ${
+                    errors.updateInterval ? 'border-red-300 dark:border-red-500' : 'border-secondary-300 dark:border-secondary-600'
+                  }`}
+                  placeholder="60"
+                />
+                {errors.updateInterval && (
+                  <p className="mt-1 text-sm text-red-600 dark:text-red-400">{errors.updateInterval}</p>
+                )}
+                <p className="mt-1 text-sm text-secondary-500 dark:text-secondary-400">
+                  How often agents should check for updates (5-1440 minutes). This affects new installations.
+                </p>
+              </div>
+
+              {/* Auto-Update Setting */}
+              <div>
+                <label className="block text-sm font-medium text-secondary-700 dark:text-secondary-200 mb-2">
+                  <div className="flex items-center gap-2">
+                    <input
+                      type="checkbox"
+                      checked={formData.autoUpdate}
+                      onChange={(e) => handleInputChange('autoUpdate', e.target.checked)}
+                      className="rounded border-secondary-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50"
+                    />
+                    Enable Automatic Agent Updates
+                  </div>
+                </label>
+                <p className="mt-1 text-sm text-secondary-500 dark:text-secondary-400">
+                  When enabled, agents will automatically update themselves when a newer version is available during their regular update cycle.
+                </p>
+              </div>
+
+              {/* Security Notice */}
+              <div className="bg-blue-50 dark:bg-blue-900 border border-blue-200 dark:border-blue-700 rounded-md p-4">
+                <div className="flex">
+                  <Shield className="h-5 w-5 text-blue-400 dark:text-blue-300" />
+                  <div className="ml-3">
+                    <h3 className="text-sm font-medium text-blue-800 dark:text-blue-200">Security Notice</h3>
+                    <p className="mt-1 text-sm text-blue-700 dark:text-blue-300">
+                      Changing these settings will affect all installation scripts and agent communications. 
+                      Make sure the server URL is accessible from your client networks.
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              {/* Save Button */}
+              <div className="flex justify-end">
+                <button
+                  type="button"
+                  onClick={handleSave}
+                  disabled={!isDirty || updateSettingsMutation.isPending}
+                  className={`inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white ${
+                    !isDirty || updateSettingsMutation.isPending
+                      ? 'bg-secondary-400 cursor-not-allowed'
+                      : 'bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'
+                  }`}
+                >
+                  {updateSettingsMutation.isPending ? (
+                    <>
+                      <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+                      Saving...
+                    </>
+                  ) : (
+                    <>
+                      <Save className="h-4 w-4 mr-2" />
+                      Save Settings
+                    </>
+                  )}
+                </button>
+              </div>
+
+              {updateSettingsMutation.isSuccess && (
+                <div className="bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-700 rounded-md p-4">
+                  <div className="flex">
+                    <CheckCircle className="h-5 w-5 text-green-400 dark:text-green-300" />
+                    <div className="ml-3">
+                      <p className="text-sm text-green-700 dark:text-green-300">Settings saved successfully!</p>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </form>
+          )}
+
+          {/* Frontend Configuration Tab */}
+          {activeTab === 'frontend' && (
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <div className="flex items-center mb-6">
+                <Globe className="h-6 w-6 text-primary-600 mr-3" />
+                <h2 className="text-xl font-semibold text-secondary-900 dark:text-white">Frontend Configuration</h2>
+              </div>
+              
+              <div>
+                <label className="block text-sm font-medium text-secondary-700 dark:text-secondary-200 mb-2">
+                  Frontend URL *
+                </label>
+                <input
+                  type="url"
+                  value={formData.frontendUrl}
+                  onChange={(e) => handleInputChange('frontendUrl', e.target.value)}
+                  className={`w-full border rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-secondary-700 text-secondary-900 dark:text-white ${
+                    errors.frontendUrl ? 'border-red-300 dark:border-red-500' : 'border-secondary-300 dark:border-secondary-600'
+                  }`}
+                  placeholder="https://patchmon.example.com"
+                />
+                {errors.frontendUrl && (
+                  <p className="mt-1 text-sm text-red-600 dark:text-red-400">{errors.frontendUrl}</p>
+                )}
+                <p className="mt-1 text-sm text-secondary-500 dark:text-secondary-400">
+                  The URL where users will access the PatchMon web interface.
+                </p>
+              </div>
+
+              {/* Save Button */}
+              <div className="flex justify-end">
+                <button
+                  type="button"
+                  onClick={handleSave}
+                  disabled={!isDirty || updateSettingsMutation.isPending}
+                  className={`inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white ${
+                    !isDirty || updateSettingsMutation.isPending
+                      ? 'bg-secondary-400 cursor-not-allowed'
+                      : 'bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'
+                  }`}
+                >
+                  {updateSettingsMutation.isPending ? (
+                    <>
+                      <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+                      Saving...
+                    </>
+                  ) : (
+                    <>
+                      <Save className="h-4 w-4 mr-2" />
+                      Save Settings
+                    </>
+                  )}
+                </button>
+              </div>
+
+              {updateSettingsMutation.isSuccess && (
+                <div className="bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-700 rounded-md p-4">
+                  <div className="flex">
+                    <CheckCircle className="h-5 w-5 text-green-400 dark:text-green-300" />
+                    <div className="ml-3">
+                      <p className="text-sm text-green-700 dark:text-green-300">Settings saved successfully!</p>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </form>
+          )}
+
+          {/* Agent Management Tab */}
+          {activeTab === 'agent' && (
+            <div className="space-y-6">
+              <div className="flex items-center justify-between mb-6">
+                <div>
+                  <div className="flex items-center mb-2">
+                    <SettingsIcon className="h-6 w-6 text-primary-600 mr-3" />
+                    <h2 className="text-xl font-semibold text-secondary-900 dark:text-white">Agent Version Management</h2>
+                  </div>
+                  <p className="text-sm text-secondary-500 dark:text-secondary-300">
+                    Manage different versions of the PatchMon agent script
+                  </p>
+                </div>
+                <button
+                  onClick={() => setShowAgentVersionModal(true)}
+                  className="btn-primary flex items-center gap-2"
+                >
+                  <Plus className="h-4 w-4" />
+                  Add Version
+                </button>
+              </div>
+
+              {/* Version Summary */}
+              {agentVersions && agentVersions.length > 0 && (
+                <div className="bg-secondary-50 dark:bg-secondary-700 rounded-lg p-4 mb-6">
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div className="flex items-center gap-2">
+                      <CheckCircle className="h-4 w-4 text-green-600 dark:text-green-400" />
+                      <span className="text-sm font-medium text-secondary-700 dark:text-secondary-300">Current Version:</span>
+                      <span className="text-sm text-secondary-900 dark:text-white font-mono">
+                        {agentVersions.find(v => v.isCurrent)?.version || 'None'}
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Star className="h-4 w-4 text-yellow-600 dark:text-yellow-400" />
+                      <span className="text-sm font-medium text-secondary-700 dark:text-secondary-300">Default Version:</span>
+                      <span className="text-sm text-secondary-900 dark:text-white font-mono">
+                        {agentVersions.find(v => v.isDefault)?.version || 'None'}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+        {agentVersionsLoading ? (
+          <div className="flex items-center justify-center py-8">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
+          </div>
+        ) : agentVersionsError ? (
+          <div className="text-center py-8">
+            <p className="text-red-600 dark:text-red-400">Error loading agent versions: {agentVersionsError.message}</p>
+          </div>
+        ) : !agentVersions || agentVersions.length === 0 ? (
+          <div className="text-center py-8">
+            <p className="text-secondary-500 dark:text-secondary-400">No agent versions found</p>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {agentVersions.map((version) => (
+              <div key={version.id} className="border border-secondary-200 dark:border-secondary-600 rounded-lg p-4">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    <Code className="h-5 w-5 text-secondary-400 dark:text-secondary-500" />
+                    <div>
+                      <div className="flex items-center gap-2">
+                        <h3 className="text-lg font-medium text-secondary-900 dark:text-white">
+                          Version {version.version}
+                        </h3>
+                        {version.isDefault && (
+                          <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200">
+                            <Star className="h-3 w-3 mr-1" />
+                            Default
+                          </span>
+                        )}
+                        {version.isCurrent && (
+                          <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
+                            Current
+                          </span>
+                        )}
+                      </div>
+                      {version.releaseNotes && (
+                        <div className="text-sm text-secondary-500 dark:text-secondary-300 mt-1">
+                          <p className="line-clamp-3 whitespace-pre-line">
+                            {version.releaseNotes}
+                          </p>
+                        </div>
+                      )}
+                      <p className="text-xs text-secondary-400 dark:text-secondary-400 mt-1">
+                        Created: {new Date(version.createdAt).toLocaleDateString()}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <button
+                      onClick={() => {
+                        const downloadUrl = `/api/v1/hosts/agent/download?version=${version.version}`;
+                        window.open(downloadUrl, '_blank');
+                      }}
+                      className="btn-outline text-xs flex items-center gap-1"
+                    >
+                      <Download className="h-3 w-3" />
+                      Download
+                    </button>
+                    <button
+                      onClick={() => setCurrentAgentVersionMutation.mutate(version.id)}
+                      disabled={version.isCurrent || setCurrentAgentVersionMutation.isPending}
+                      className="btn-outline text-xs flex items-center gap-1"
+                    >
+                      <CheckCircle className="h-3 w-3" />
+                      Set Current
+                    </button>
+                    <button
+                      onClick={() => setDefaultAgentVersionMutation.mutate(version.id)}
+                      disabled={version.isDefault || setDefaultAgentVersionMutation.isPending}
+                      className="btn-outline text-xs flex items-center gap-1"
+                    >
+                      <Star className="h-3 w-3" />
+                      Set Default
+                    </button>
+                    <button
+                      onClick={() => deleteAgentVersionMutation.mutate(version.id)}
+                      disabled={version.isDefault || version.isCurrent || deleteAgentVersionMutation.isPending}
+                      className="btn-danger text-xs flex items-center gap-1"
+                    >
+                      <Trash2 className="h-3 w-3" />
+                      Delete
+                    </button>
+                  </div>
+                </div>
+              </div>
+            ))}
+            
+            {agentVersions?.length === 0 && (
+              <div className="text-center py-8">
+                <Code className="h-12 w-12 text-secondary-400 mx-auto mb-4" />
+                <p className="text-secondary-500 dark:text-secondary-300">No agent versions found</p>
+                <p className="text-sm text-secondary-400 dark:text-secondary-400 mt-2">
+                  Add your first agent version to get started
+                </p>
+              </div>
+            )}
+              </div>
+            )}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Agent Version Modal */}
+      {showAgentVersionModal && (
+        <AgentVersionModal
+          isOpen={showAgentVersionModal}
+          onClose={() => {
+            setShowAgentVersionModal(false);
+            setAgentVersionForm({ version: '', releaseNotes: '', scriptContent: '', isDefault: false });
+          }}
+          onSubmit={createAgentVersionMutation.mutate}
+          isLoading={createAgentVersionMutation.isPending}
+        />
+      )}
+    </div>
+  );
+};
+
+// Agent Version Modal Component
+const AgentVersionModal = ({ isOpen, onClose, onSubmit, isLoading }) => {
+  const [formData, setFormData] = useState({
+    version: '',
+    releaseNotes: '',
+    scriptContent: '',
+    isDefault: false
+  });
+  const [errors, setErrors] = useState({});
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    
+    // Basic validation
+    const newErrors = {};
+    if (!formData.version.trim()) newErrors.version = 'Version is required';
+    if (!formData.scriptContent.trim()) newErrors.scriptContent = 'Script content is required';
+    
+    if (Object.keys(newErrors).length > 0) {
+      setErrors(newErrors);
+      return;
+    }
+    
+    onSubmit(formData);
+  };
+
+  const handleFileUpload = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        setFormData(prev => ({ ...prev, scriptContent: event.target.result }));
+      };
+      reader.readAsText(file);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white dark:bg-secondary-800 rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
+        <div className="px-6 py-4 border-b border-secondary-200 dark:border-secondary-600">
+          <div className="flex items-center justify-between">
+            <h3 className="text-lg font-medium text-secondary-900 dark:text-white">Add Agent Version</h3>
+            <button
+              onClick={onClose}
+              className="text-secondary-400 hover:text-secondary-600 dark:text-secondary-500 dark:hover:text-secondary-300"
+            >
+              <X className="h-5 w-5" />
+            </button>
+          </div>
+        </div>
+        
+        <form onSubmit={handleSubmit} className="px-6 py-4">
+          <div className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-secondary-700 dark:text-secondary-200 mb-1">
+                Version *
+              </label>
+              <input
+                type="text"
+                value={formData.version}
+                onChange={(e) => setFormData(prev => ({ ...prev, version: e.target.value }))}
+                className={`block w-full border rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-secondary-700 text-secondary-900 dark:text-white ${
+                  errors.version ? 'border-red-300 dark:border-red-500' : 'border-secondary-300 dark:border-secondary-600'
+                }`}
+                placeholder="e.g., 1.0.1"
+              />
+              {errors.version && (
+                <p className="mt-1 text-sm text-red-600 dark:text-red-400">{errors.version}</p>
+              )}
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-secondary-700 dark:text-secondary-200 mb-1">
+                Release Notes
+              </label>
+              <textarea
+                value={formData.releaseNotes}
+                onChange={(e) => setFormData(prev => ({ ...prev, releaseNotes: e.target.value }))}
+                rows={3}
+                className="block w-full border border-secondary-300 dark:border-secondary-600 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-secondary-700 text-secondary-900 dark:text-white"
+                placeholder="Describe what's new in this version..."
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-secondary-700 dark:text-secondary-200 mb-1">
+                Script Content *
+              </label>
+              <div className="space-y-2">
+                <input
+                  type="file"
+                  accept=".sh"
+                  onChange={handleFileUpload}
+                  className="block w-full text-sm text-secondary-500 dark:text-secondary-400 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100 dark:file:bg-primary-900 dark:file:text-primary-200"
+                />
+                <textarea
+                  value={formData.scriptContent}
+                  onChange={(e) => setFormData(prev => ({ ...prev, scriptContent: e.target.value }))}
+                  rows={10}
+                  className={`block w-full border rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-secondary-700 text-secondary-900 dark:text-white font-mono text-sm ${
+                    errors.scriptContent ? 'border-red-300 dark:border-red-500' : 'border-secondary-300 dark:border-secondary-600'
+                  }`}
+                  placeholder="Paste the agent script content here..."
+                />
+                {errors.scriptContent && (
+                  <p className="mt-1 text-sm text-red-600 dark:text-red-400">{errors.scriptContent}</p>
+                )}
+              </div>
+            </div>
+
+            <div className="flex items-center">
+              <input
+                type="checkbox"
+                id="isDefault"
+                checked={formData.isDefault}
+                onChange={(e) => setFormData(prev => ({ ...prev, isDefault: e.target.checked }))}
+                className="h-4 w-4 text-primary-600 focus:ring-primary-500 border-secondary-300 dark:border-secondary-600 rounded"
+              />
+              <label htmlFor="isDefault" className="ml-2 block text-sm text-secondary-700 dark:text-secondary-200">
+                Set as default version for new installations
+              </label>
+            </div>
+          </div>
+          
+          <div className="flex justify-end gap-3 mt-6">
+            <button
+              type="button"
+              onClick={onClose}
+              className="btn-outline"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="btn-primary"
+            >
+              {isLoading ? 'Creating...' : 'Create Version'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Settings;
diff --git a/frontend/src/pages/Users.jsx b/frontend/src/pages/Users.jsx
new file mode 100644
index 0000000..5320b78
--- /dev/null
+++ b/frontend/src/pages/Users.jsx
@@ -0,0 +1,490 @@
+import React, { useState } from 'react'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { Plus, Trash2, Edit, User, Mail, Shield, Calendar, CheckCircle, XCircle } from 'lucide-react'
+import { adminUsersAPI, permissionsAPI } from '../utils/api'
+import { useAuth } from '../contexts/AuthContext'
+
+const Users = () => {
+  const [showAddModal, setShowAddModal] = useState(false)
+  const [editingUser, setEditingUser] = useState(null)
+  const queryClient = useQueryClient()
+  const { user: currentUser } = useAuth()
+
+  // Fetch users
+  const { data: users, isLoading, error } = useQuery({
+    queryKey: ['users'],
+    queryFn: () => adminUsersAPI.list().then(res => res.data)
+  })
+
+  // Fetch available roles
+  const { data: roles } = useQuery({
+    queryKey: ['rolePermissions'],
+    queryFn: () => permissionsAPI.getRoles().then(res => res.data)
+  })
+
+  // Delete user mutation
+  const deleteUserMutation = useMutation({
+    mutationFn: adminUsersAPI.delete,
+    onSuccess: () => {
+      queryClient.invalidateQueries(['users'])
+    }
+  })
+
+  // Update user mutation
+  const updateUserMutation = useMutation({
+    mutationFn: ({ id, data }) => adminUsersAPI.update(id, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries(['users'])
+      setEditingUser(null)
+    }
+  })
+
+  const handleDeleteUser = async (userId, username) => {
+    if (window.confirm(`Are you sure you want to delete user "${username}"? This action cannot be undone.`)) {
+      try {
+        await deleteUserMutation.mutateAsync(userId)
+      } catch (error) {
+        console.error('Failed to delete user:', error)
+      }
+    }
+  }
+
+  const handleUserCreated = () => {
+    queryClient.invalidateQueries(['users'])
+    setShowAddModal(false)
+  }
+
+  const handleEditUser = (user) => {
+    setEditingUser(user)
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="bg-danger-50 border border-danger-200 rounded-md p-4">
+        <div className="flex">
+          <XCircle className="h-5 w-5 text-danger-400" />
+          <div className="ml-3">
+            <h3 className="text-sm font-medium text-danger-800">Error loading users</h3>
+            <p className="mt-1 text-sm text-danger-700">{error.message}</p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex justify-end items-center">
+        <button
+          onClick={() => setShowAddModal(true)}
+          className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
+        >
+          <Plus className="h-4 w-4 mr-2" />
+          Add User
+        </button>
+      </div>
+
+      {/* Users Table */}
+      <div className="bg-white dark:bg-secondary-800 shadow overflow-hidden sm:rounded-md">
+        <ul className="divide-y divide-secondary-200 dark:divide-secondary-600">
+          {users && Array.isArray(users) && users.length > 0 ? (
+            users.map((user) => (
+              <li key={user.id}>
+                <div className="px-4 py-4 flex items-center justify-between">
+                  <div className="flex items-center">
+                    <div className="flex-shrink-0">
+                      <div className="h-10 w-10 rounded-full bg-primary-100 flex items-center justify-center">
+                        <User className="h-5 w-5 text-primary-600" />
+                      </div>
+                    </div>
+                    <div className="ml-4">
+                      <div className="flex items-center">
+                        <p className="text-sm font-medium text-secondary-900 dark:text-white">{user.username}</p>
+                        {user.id === currentUser?.id && (
+                          <span className="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+                            You
+                          </span>
+                        )}
+                        <span className={`ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                          user.role === 'admin' 
+                            ? 'bg-primary-100 text-primary-800' 
+                            : user.role === 'host_manager'
+                            ? 'bg-green-100 text-green-800'
+                            : user.role === 'readonly'
+                            ? 'bg-yellow-100 text-yellow-800'
+                            : 'bg-secondary-100 text-secondary-800'
+                        }`}>
+                          <Shield className="h-3 w-3 mr-1" />
+                          {user.role.charAt(0).toUpperCase() + user.role.slice(1).replace('_', ' ')}
+                        </span>
+                        {user.isActive ? (
+                          <CheckCircle className="ml-2 h-4 w-4 text-green-500" />
+                        ) : (
+                          <XCircle className="ml-2 h-4 w-4 text-red-500" />
+                        )}
+                      </div>
+                      <div className="flex items-center mt-1 text-sm text-secondary-500 dark:text-secondary-300">
+                        <Mail className="h-4 w-4 mr-1" />
+                        {user.email}
+                      </div>
+                      <div className="flex items-center mt-1 text-sm text-secondary-500 dark:text-secondary-300">
+                        <Calendar className="h-4 w-4 mr-1" />
+                        Created: {new Date(user.createdAt).toLocaleDateString()}
+                        {user.lastLogin && (
+                          <>
+                            <span className="mx-2">•</span>
+                            Last login: {new Date(user.lastLogin).toLocaleDateString()}
+                          </>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <button
+                      onClick={() => handleEditUser(user)}
+                      className="text-secondary-400 hover:text-secondary-600 dark:text-secondary-500 dark:hover:text-secondary-300"
+                      title="Edit user"
+                    >
+                      <Edit className="h-4 w-4" />
+                    </button>
+                    <button
+                      onClick={() => handleDeleteUser(user.id, user.username)}
+                      className="text-danger-400 hover:text-danger-600 dark:text-danger-500 dark:hover:text-danger-400 disabled:text-gray-300 disabled:cursor-not-allowed"
+                      title={
+                        user.id === currentUser?.id 
+                          ? "Cannot delete your own account" 
+                          : user.role === 'admin' && users.filter(u => u.role === 'admin').length === 1
+                            ? "Cannot delete the last admin user"
+                            : "Delete user"
+                      }
+                      disabled={
+                        user.id === currentUser?.id || 
+                        (user.role === 'admin' && users.filter(u => u.role === 'admin').length === 1)
+                      }
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </button>
+                  </div>
+                </div>
+              </li>
+            ))
+          ) : (
+            <li>
+              <div className="px-4 py-8 text-center">
+                <User className="h-12 w-12 text-secondary-400 mx-auto mb-4" />
+                <p className="text-secondary-500 dark:text-secondary-300">No users found</p>
+                <p className="text-sm text-secondary-400 dark:text-secondary-400 mt-2">
+                  Click "Add User" to create the first user
+                </p>
+              </div>
+            </li>
+          )}
+        </ul>
+      </div>
+
+      {/* Add User Modal */}
+      <AddUserModal
+        isOpen={showAddModal}
+        onClose={() => setShowAddModal(false)}
+        onUserCreated={handleUserCreated}
+        roles={roles}
+      />
+
+      {/* Edit User Modal */}
+      {editingUser && (
+        <EditUserModal
+          user={editingUser}
+          isOpen={!!editingUser}
+          onClose={() => setEditingUser(null)}
+          onUserUpdated={() => updateUserMutation.mutate()}
+          roles={roles}
+        />
+      )}
+    </div>
+  )
+}
+
+// Add User Modal Component
+const AddUserModal = ({ isOpen, onClose, onUserCreated, roles }) => {
+  const [formData, setFormData] = useState({
+    username: '',
+    email: '',
+    password: '',
+    role: 'user'
+  })
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setIsLoading(true)
+    setError('')
+
+    try {
+      const response = await adminUsersAPI.create(formData)
+      onUserCreated()
+    } catch (err) {
+      setError(err.response?.data?.error || 'Failed to create user')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleInputChange = (e) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    })
+  }
+
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white dark:bg-secondary-800 rounded-lg p-6 w-full max-w-md">
+        <h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-4">Add New User</h3>
+        
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-secondary-700 dark:text-secondary-200 mb-1">
+              Username
+            </label>
+            <input
+              type="text"
+              name="username"
+              required
+              value={formData.username}
+              onChange={handleInputChange}
+              className="block w-full border-secondary-300 dark:border-secondary-600 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-secondary-700 text-secondary-900 dark:text-white"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-secondary-700 dark:text-secondary-200 mb-1">
+              Email
+            </label>
+            <input
+              type="email"
+              name="email"
+              required
+              value={formData.email}
+              onChange={handleInputChange}
+              className="block w-full border-secondary-300 dark:border-secondary-600 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-secondary-700 text-secondary-900 dark:text-white"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-secondary-700 dark:text-secondary-200 mb-1">
+              Password
+            </label>
+            <input
+              type="password"
+              name="password"
+              required
+              minLength={6}
+              value={formData.password}
+              onChange={handleInputChange}
+              className="block w-full border-secondary-300 dark:border-secondary-600 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-secondary-700 text-secondary-900 dark:text-white"
+            />
+            <p className="mt-1 text-xs text-secondary-500 dark:text-secondary-400">Minimum 6 characters</p>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-secondary-700 dark:text-secondary-200 mb-1">
+              Role
+            </label>
+            <select
+              name="role"
+              value={formData.role}
+              onChange={handleInputChange}
+              className="block w-full border-secondary-300 dark:border-secondary-600 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-secondary-700 text-secondary-900 dark:text-white"
+            >
+              {roles && Array.isArray(roles) ? (
+                roles.map((role) => (
+                  <option key={role.role} value={role.role}>
+                    {role.role.charAt(0).toUpperCase() + role.role.slice(1).replace('_', ' ')}
+                  </option>
+                ))
+              ) : (
+                <>
+                  <option value="user">User</option>
+                  <option value="admin">Admin</option>
+                </>
+              )}
+            </select>
+          </div>
+
+          {error && (
+            <div className="bg-danger-50 dark:bg-danger-900 border border-danger-200 dark:border-danger-700 rounded-md p-3">
+              <p className="text-sm text-danger-700 dark:text-danger-300">{error}</p>
+            </div>
+          )}
+
+          <div className="flex justify-end space-x-3">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2 text-sm font-medium text-secondary-700 dark:text-secondary-200 bg-white dark:bg-secondary-700 border border-secondary-300 dark:border-secondary-600 rounded-md hover:bg-secondary-50 dark:hover:bg-secondary-600"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="px-4 py-2 text-sm font-medium text-white bg-primary-600 border border-transparent rounded-md hover:bg-primary-700 disabled:opacity-50"
+            >
+              {isLoading ? 'Creating...' : 'Create User'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+// Edit User Modal Component
+const EditUserModal = ({ user, isOpen, onClose, onUserUpdated, roles }) => {
+  const [formData, setFormData] = useState({
+    username: user?.username || '',
+    email: user?.email || '',
+    role: user?.role || 'user',
+    isActive: user?.isActive ?? true
+  })
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setIsLoading(true)
+    setError('')
+
+    try {
+      await adminUsersAPI.update(user.id, formData)
+      onUserUpdated()
+    } catch (err) {
+      setError(err.response?.data?.error || 'Failed to update user')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleInputChange = (e) => {
+    const { name, value, type, checked } = e.target
+    setFormData({
+      ...formData,
+      [name]: type === 'checkbox' ? checked : value
+    })
+  }
+
+  if (!isOpen || !user) return null
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white dark:bg-secondary-800 rounded-lg p-6 w-full max-w-md">
+        <h3 className="text-lg font-medium text-secondary-900 dark:text-white mb-4">Edit User</h3>
+        
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-secondary-700 dark:text-secondary-200 mb-1">
+              Username
+            </label>
+            <input
+              type="text"
+              name="username"
+              required
+              value={formData.username}
+              onChange={handleInputChange}
+              className="block w-full border-secondary-300 dark:border-secondary-600 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-secondary-700 text-secondary-900 dark:text-white"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-secondary-700 dark:text-secondary-200 mb-1">
+              Email
+            </label>
+            <input
+              type="email"
+              name="email"
+              required
+              value={formData.email}
+              onChange={handleInputChange}
+              className="block w-full border-secondary-300 dark:border-secondary-600 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-secondary-700 text-secondary-900 dark:text-white"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-secondary-700 dark:text-secondary-200 mb-1">
+              Role
+            </label>
+            <select
+              name="role"
+              value={formData.role}
+              onChange={handleInputChange}
+              className="block w-full border-secondary-300 dark:border-secondary-600 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-secondary-700 text-secondary-900 dark:text-white"
+            >
+              {roles && Array.isArray(roles) ? (
+                roles.map((role) => (
+                  <option key={role.role} value={role.role}>
+                    {role.role.charAt(0).toUpperCase() + role.role.slice(1).replace('_', ' ')}
+                  </option>
+                ))
+              ) : (
+                <>
+                  <option value="user">User</option>
+                  <option value="admin">Admin</option>
+                </>
+              )}
+            </select>
+          </div>
+
+          <div className="flex items-center">
+            <input
+              type="checkbox"
+              name="isActive"
+              checked={formData.isActive}
+              onChange={handleInputChange}
+              className="h-4 w-4 text-primary-600 focus:ring-primary-500 border-secondary-300 rounded"
+            />
+            <label className="ml-2 block text-sm text-secondary-700 dark:text-secondary-200">
+              Active user
+            </label>
+          </div>
+
+          {error && (
+            <div className="bg-danger-50 dark:bg-danger-900 border border-danger-200 dark:border-danger-700 rounded-md p-3">
+              <p className="text-sm text-danger-700 dark:text-danger-300">{error}</p>
+            </div>
+          )}
+
+          <div className="flex justify-end space-x-3">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2 text-sm font-medium text-secondary-700 dark:text-secondary-200 bg-white dark:bg-secondary-700 border border-secondary-300 dark:border-secondary-600 rounded-md hover:bg-secondary-50 dark:hover:bg-secondary-600"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="px-4 py-2 text-sm font-medium text-white bg-primary-600 border border-transparent rounded-md hover:bg-primary-700 disabled:opacity-50"
+            >
+              {isLoading ? 'Updating...' : 'Update User'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+export default Users
diff --git a/frontend/src/utils/api.js b/frontend/src/utils/api.js
new file mode 100644
index 0000000..2cab793
--- /dev/null
+++ b/frontend/src/utils/api.js
@@ -0,0 +1,194 @@
+import axios from 'axios'
+
+const API_BASE_URL = import.meta.env.VITE_API_URL || '/api/v1'
+
+// Create axios instance with default config
+const api = axios.create({
+  baseURL: API_BASE_URL,
+  timeout: 10000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+})
+
+// Request interceptor
+api.interceptors.request.use(
+  (config) => {
+    // Add auth token if available
+    const token = localStorage.getItem('token')
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`
+    }
+    return config
+  },
+  (error) => {
+    return Promise.reject(error)
+  }
+)
+
+// Response interceptor
+api.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response?.status === 401) {
+      // Handle unauthorized
+      localStorage.removeItem('token')
+      window.location.href = '/login'
+    }
+    return Promise.reject(error)
+  }
+)
+
+// Dashboard API
+export const dashboardAPI = {
+  getStats: () => api.get('/dashboard/stats'),
+  getHosts: () => api.get('/dashboard/hosts'),
+  getPackages: () => api.get('/dashboard/packages'),
+  getHostDetail: (hostId) => api.get(`/dashboard/hosts/${hostId}`),
+}
+
+// Admin Hosts API (for management interface)
+export const adminHostsAPI = {
+  create: (data) => api.post('/hosts/create', data),
+  list: () => api.get('/hosts/admin/list'),
+  delete: (hostId) => api.delete(`/hosts/${hostId}`),
+  regenerateCredentials: (hostId) => api.post(`/hosts/${hostId}/regenerate-credentials`),
+  updateGroup: (hostId, hostGroupId) => api.put(`/hosts/${hostId}/group`, { hostGroupId }),
+  bulkUpdateGroup: (hostIds, hostGroupId) => api.put('/hosts/bulk/group', { hostIds, hostGroupId }),
+  toggleAutoUpdate: (hostId, autoUpdate) => api.patch(`/hosts/${hostId}/auto-update`, { autoUpdate })
+}
+
+// Host Groups API
+export const hostGroupsAPI = {
+  list: () => api.get('/host-groups'),
+  get: (id) => api.get(`/host-groups/${id}`),
+  create: (data) => api.post('/host-groups', data),
+  update: (id, data) => api.put(`/host-groups/${id}`, data),
+  delete: (id) => api.delete(`/host-groups/${id}`),
+  getHosts: (id) => api.get(`/host-groups/${id}/hosts`),
+}
+
+// Admin Users API (for user management)
+export const adminUsersAPI = {
+  list: () => api.get('/auth/admin/users'),
+  create: (userData) => api.post('/auth/admin/users', userData),
+  update: (userId, userData) => api.put(`/auth/admin/users/${userId}`, userData),
+  delete: (userId) => api.delete(`/auth/admin/users/${userId}`)
+}
+
+// Permissions API (for role management)
+export const permissionsAPI = {
+  getRoles: () => api.get('/permissions/roles'),
+  getRole: (role) => api.get(`/permissions/roles/${role}`),
+  updateRole: (role, permissions) => api.put(`/permissions/roles/${role}`, permissions),
+  deleteRole: (role) => api.delete(`/permissions/roles/${role}`),
+  getUserPermissions: () => api.get('/permissions/user-permissions')
+}
+
+// Settings API
+export const settingsAPI = {
+  get: () => api.get('/settings'),
+  update: (settings) => api.put('/settings', settings),
+  getServerUrl: () => api.get('/settings/server-url')
+}
+
+// Agent Version API
+export const agentVersionAPI = {
+  list: () => api.get('/hosts/agent/versions'),
+  create: (data) => api.post('/hosts/agent/versions', data),
+  update: (id, data) => api.put(`/hosts/agent/versions/${id}`, data),
+  delete: (id) => api.delete(`/hosts/agent/versions/${id}`),
+  setCurrent: (id) => api.patch(`/hosts/agent/versions/${id}/current`),
+  setDefault: (id) => api.patch(`/hosts/agent/versions/${id}/default`),
+  download: (version) => api.get(`/hosts/agent/download${version ? `?version=${version}` : ''}`, { responseType: 'blob' })
+}
+
+// Repository API
+export const repositoryAPI = {
+  list: () => api.get('/repositories'),
+  getById: (repositoryId) => api.get(`/repositories/${repositoryId}`),
+  getByHost: (hostId) => api.get(`/repositories/host/${hostId}`),
+  update: (repositoryId, data) => api.put(`/repositories/${repositoryId}`, data),
+  toggleHostRepository: (hostId, repositoryId, isEnabled) => 
+    api.patch(`/repositories/host/${hostId}/repository/${repositoryId}`, { isEnabled }),
+  getStats: () => api.get('/repositories/stats/summary'),
+  cleanupOrphaned: () => api.delete('/repositories/cleanup/orphaned')
+}
+
+// Dashboard Preferences API
+export const dashboardPreferencesAPI = {
+  get: () => api.get('/dashboard-preferences'),
+  update: (preferences) => api.put('/dashboard-preferences', { preferences }),
+  getDefaults: () => api.get('/dashboard-preferences/defaults')
+}
+
+// Hosts API (for agent communication - kept for compatibility)
+export const hostsAPI = {
+  // Legacy register endpoint (now deprecated)
+  register: (data) => api.post('/hosts/register', data),
+  
+  // Updated to use API credentials
+  update: (apiId, apiKey, data) => api.post('/hosts/update', data, {
+    headers: { 
+      'X-API-ID': apiId,
+      'X-API-KEY': apiKey
+    }
+  }),
+  getInfo: (apiId, apiKey) => api.get('/hosts/info', {
+    headers: { 
+      'X-API-ID': apiId,
+      'X-API-KEY': apiKey
+    }
+  }),
+  ping: (apiId, apiKey) => api.post('/hosts/ping', {}, {
+    headers: { 
+      'X-API-ID': apiId,
+      'X-API-KEY': apiKey
+    }
+  }),
+  toggleAutoUpdate: (id, autoUpdate) => api.patch(`/hosts/${id}/auto-update`, { autoUpdate })
+}
+
+// Packages API
+export const packagesAPI = {
+  getAll: (params = {}) => api.get('/packages', { params }),
+  getById: (packageId) => api.get(`/packages/${packageId}`),
+  getCategories: () => api.get('/packages/categories/list'),
+  getHosts: (packageId, params = {}) => api.get(`/packages/${packageId}/hosts`, { params }),
+  update: (packageId, data) => api.put(`/packages/${packageId}`, data),
+  search: (query, params = {}) => api.get(`/packages/search/${query}`, { params }),
+}
+
+// Utility functions
+export const formatError = (error) => {
+  if (error.response?.data?.message) {
+    return error.response.data.message
+  }
+  if (error.response?.data?.error) {
+    return error.response.data.error
+  }
+  if (error.message) {
+    return error.message
+  }
+  return 'An unexpected error occurred'
+}
+
+export const formatDate = (date) => {
+  return new Date(date).toLocaleString()
+}
+
+export const formatRelativeTime = (date) => {
+  const now = new Date()
+  const diff = now - new Date(date)
+  const seconds = Math.floor(diff / 1000)
+  const minutes = Math.floor(seconds / 60)
+  const hours = Math.floor(minutes / 60)
+  const days = Math.floor(hours / 24)
+
+  if (days > 0) return `${days} day${days > 1 ? 's' : ''} ago`
+  if (hours > 0) return `${hours} hour${hours > 1 ? 's' : ''} ago`
+  if (minutes > 0) return `${minutes} minute${minutes > 1 ? 's' : ''} ago`
+  return `${seconds} second${seconds > 1 ? 's' : ''} ago`
+}
+
+export default api 
\ No newline at end of file
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
new file mode 100644
index 0000000..327ad4a
--- /dev/null
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,85 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a8a',
+        },
+        secondary: {
+          50: '#f8fafc',
+          100: '#f1f5f9',
+          200: '#e2e8f0',
+          300: '#cbd5e1',
+          400: '#94a3b8',
+          500: '#64748b',
+          600: '#475569',
+          700: '#334155',
+          800: '#1e293b',
+          900: '#0f172a',
+        },
+        success: {
+          50: '#f0fdf4',
+          100: '#dcfce7',
+          200: '#bbf7d0',
+          300: '#86efac',
+          400: '#4ade80',
+          500: '#22c55e',
+          600: '#16a34a',
+          700: '#15803d',
+          800: '#166534',
+          900: '#14532d',
+        },
+        warning: {
+          50: '#fffbeb',
+          100: '#fef3c7',
+          200: '#fde68a',
+          300: '#fcd34d',
+          400: '#fbbf24',
+          500: '#f59e0b',
+          600: '#d97706',
+          700: '#b45309',
+          800: '#92400e',
+          900: '#78350f',
+        },
+        danger: {
+          50: '#fef2f2',
+          100: '#fee2e2',
+          200: '#fecaca',
+          300: '#fca5a5',
+          400: '#f87171',
+          500: '#ef4444',
+          600: '#dc2626',
+          700: '#b91c1c',
+          800: '#991b1b',
+          900: '#7f1d1d',
+        },
+      },
+      fontFamily: {
+        sans: ['Inter', 'ui-sans-serif', 'system-ui'],
+        mono: ['JetBrains Mono', 'ui-monospace', 'monospace'],
+      },
+      boxShadow: {
+        'card': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+        'card-hover': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+        'card-dark': '0 1px 3px 0 rgba(255, 255, 255, 0.1), 0 1px 2px 0 rgba(255, 255, 255, 0.06)',
+        'card-hover-dark': '0 4px 6px -1px rgba(255, 255, 255, 0.15), 0 2px 4px -1px rgba(255, 255, 255, 0.1)',
+      },
+    },
+  },
+  plugins: [],
+} 
\ No newline at end of file
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
new file mode 100644
index 0000000..760b4fa
--- /dev/null
+++ b/frontend/vite.config.js
@@ -0,0 +1,35 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+    strictPort: true, // Exit if port is already in use
+    allowedHosts: ['localhost'],
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3001',
+        changeOrigin: true,
+        secure: false,
+        configure: process.env.VITE_ENABLE_LOGGING === 'true' ? (proxy, options) => {
+          proxy.on('error', (err, req, res) => {
+            console.log('proxy error', err);
+          });
+          proxy.on('proxyReq', (proxyReq, req, res) => {
+            console.log('Sending Request to the Target:', req.method, req.url);
+          });
+          proxy.on('proxyRes', (proxyRes, req, res) => {
+            console.log('Received Response from the Target:', proxyRes.statusCode, req.url);
+          });
+        } : undefined,
+      },
+    },
+  },
+  build: {
+    outDir: 'dist',
+    sourcemap: process.env.NODE_ENV !== 'production',
+    target: 'es2018',
+  },
+}) 
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..0fc1e58
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,7815 @@
+{
+  "name": "patchmon",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "patchmon",
+      "version": "1.0.0",
+      "workspaces": [
+        "backend",
+        "frontend"
+      ],
+      "devDependencies": {
+        "concurrently": "^8.2.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "backend": {
+      "name": "patchmon-backend",
+      "version": "1.0.0",
+      "dependencies": {
+        "@prisma/client": "^5.7.0",
+        "bcryptjs": "^2.4.3",
+        "cors": "^2.8.5",
+        "dotenv": "^16.3.1",
+        "express": "^4.18.2",
+        "express-rate-limit": "^7.1.5",
+        "express-validator": "^7.0.1",
+        "helmet": "^7.1.0",
+        "jsonwebtoken": "^9.0.2",
+        "moment": "^2.30.1",
+        "uuid": "^9.0.1",
+        "winston": "^3.11.0"
+      },
+      "devDependencies": {
+        "nodemon": "^3.0.2",
+        "prisma": "^5.7.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "frontend": {
+      "name": "patchmon-frontend",
+      "version": "1.0.0",
+      "dependencies": {
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/sortable": "^10.0.0",
+        "@dnd-kit/utilities": "^3.2.2",
+        "@tanstack/react-query": "^5.87.4",
+        "axios": "^1.6.2",
+        "chart.js": "^4.4.0",
+        "clsx": "^2.0.0",
+        "date-fns": "^2.30.0",
+        "lucide-react": "^0.294.0",
+        "react": "^18.2.0",
+        "react-chartjs-2": "^5.2.0",
+        "react-dom": "^18.2.0",
+        "react-router-dom": "^6.20.1"
+      },
+      "devDependencies": {
+        "@types/react": "^18.2.37",
+        "@types/react-dom": "^18.2.15",
+        "@vitejs/plugin-react": "^4.3.3",
+        "autoprefixer": "^10.4.16",
+        "eslint": "^8.53.0",
+        "eslint-plugin-react": "^7.33.2",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-react-refresh": "^0.4.4",
+        "postcss": "^8.4.32",
+        "tailwindcss": "^3.3.6",
+        "vite": "^7.1.5"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@ampproject/remapping": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
+      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
+      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.0.tgz",
+      "integrity": "sha512-60X7qkglvrap8mn1lh2ebxXdZYtUcpd7gsmy9kLaBJ4i/WdY8PqTSdxyA8qraikqKQK5C1KRBKXqznrVapyNaw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.0.tgz",
+      "integrity": "sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@ampproject/remapping": "^2.2.0",
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.0",
+        "@babel/helper-compilation-targets": "^7.27.2",
+        "@babel/helper-module-transforms": "^7.27.3",
+        "@babel/helpers": "^7.27.6",
+        "@babel/parser": "^7.28.0",
+        "@babel/template": "^7.27.2",
+        "@babel/traverse": "^7.28.0",
+        "@babel/types": "^7.28.0",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/core/node_modules/debug": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@babel/core/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@babel/core/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.0.tgz",
+      "integrity": "sha512-lJjzvrbEeWrhB4P3QBsH7tey117PjLZnDbLiQEKjQ/fNJTjuq4HSqgFA+UNSwZT8D7dxxbnuSBMsa1lrWzKlQg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.0",
+        "@babel/types": "^7.28.0",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.27.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz",
+      "integrity": "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.27.2",
+        "@babel/helper-validator-option": "^7.27.1",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
+      "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.27.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.27.3.tgz",
+      "integrity": "sha512-dSOvYwvyLsWBeIRyOeHXp5vPj5l1I011r52FM1+r1jCERv+aFXYk4whgQccYEGYxK2H3ZAIA8nuPkQ0HaUo3qg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "@babel/traverse": "^7.27.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz",
+      "integrity": "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
+      "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
+      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.27.6",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.27.6.tgz",
+      "integrity": "sha512-muE8Tt8M22638HU31A3CgfSUciwz1fhATfoVai05aPXGor//CdWDCbnlY1yvBPo07njuVOCNGCSp/GTt12lIug==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.27.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.0.tgz",
+      "integrity": "sha512-jVZGvOxOuNSsuQuLRTh13nU0AogFlw32w/MT+LV6D3sP5WdbW61E77RnkbaO2dUvmPAYrBDJXGn5gGS6tH4j8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.0"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.27.1.tgz",
+      "integrity": "sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.27.1.tgz",
+      "integrity": "sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.27.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.6.tgz",
+      "integrity": "sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.27.2",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
+      "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/parser": "^7.27.2",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.0.tgz",
+      "integrity": "sha512-mGe7UK5wWyh0bKRfupsUchrQGqvDbZDbKJw+kcRGSmdHVYrv+ltd0pnpDTVpiTqnaBru9iEvA8pz8W46v0Amwg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.0",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/parser": "^7.28.0",
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.0",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse/node_modules/debug": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@babel/traverse/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@babel/types": {
+      "version": "7.28.1",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.1.tgz",
+      "integrity": "sha512-x0LvFTekgSX+83TI28Y9wYPUfzrnl2aT5+5QLnO6v7mSJYtEEevuDRN0F0uSHRk1G1IWZC43o00Y0xDDrpBGPQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@colors/colors": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.6.0.tgz",
+      "integrity": "sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.1.90"
+      }
+    },
+    "node_modules/@dabh/diagnostics": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@dabh/diagnostics/-/diagnostics-2.0.3.tgz",
+      "integrity": "sha512-hrlQOIi7hAfzsMqlGSFyVucrx38O+j6wiGOf//H2ecvIEqYN4ADBSS2iLMh5UFyDunCNniUIPk/q3riFv45xRA==",
+      "license": "MIT",
+      "dependencies": {
+        "colorspace": "1.1.x",
+        "enabled": "2.0.x",
+        "kuler": "^2.0.0"
+      }
+    },
+    "node_modules/@dnd-kit/accessibility": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
+      "integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/core": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/accessibility": "^3.1.1",
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/sortable": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-10.0.0.tgz",
+      "integrity": "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.3.0",
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/utilities": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
+      "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.9.tgz",
+      "integrity": "sha512-OaGtL73Jck6pBKjNIe24BnFE6agGl+6KxDtTfHhy1HmhthfKouEcOhqpSL64K4/0WCtbKFLOdzD/44cJ4k9opA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.9.tgz",
+      "integrity": "sha512-5WNI1DaMtxQ7t7B6xa572XMXpHAaI/9Hnhk8lcxF4zVN4xstUgTlvuGDorBguKEnZO70qwEcLpfifMLoxiPqHQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.9.tgz",
+      "integrity": "sha512-IDrddSmpSv51ftWslJMvl3Q2ZT98fUSL2/rlUXuVqRXHCs5EUF1/f+jbjF5+NG9UffUDMCiTyh8iec7u8RlTLg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.9.tgz",
+      "integrity": "sha512-I853iMZ1hWZdNllhVZKm34f4wErd4lMyeV7BLzEExGEIZYsOzqDWDf+y082izYUE8gtJnYHdeDpN/6tUdwvfiw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.9.tgz",
+      "integrity": "sha512-XIpIDMAjOELi/9PB30vEbVMs3GV1v2zkkPnuyRRURbhqjyzIINwj+nbQATh4H9GxUgH1kFsEyQMxwiLFKUS6Rg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.9.tgz",
+      "integrity": "sha512-jhHfBzjYTA1IQu8VyrjCX4ApJDnH+ez+IYVEoJHeqJm9VhG9Dh2BYaJritkYK3vMaXrf7Ogr/0MQ8/MeIefsPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.9.tgz",
+      "integrity": "sha512-z93DmbnY6fX9+KdD4Ue/H6sYs+bhFQJNCPZsi4XWJoYblUqT06MQUdBCpcSfuiN72AbqeBFu5LVQTjfXDE2A6Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.9.tgz",
+      "integrity": "sha512-mrKX6H/vOyo5v71YfXWJxLVxgy1kyt1MQaD8wZJgJfG4gq4DpQGpgTB74e5yBeQdyMTbgxp0YtNj7NuHN0PoZg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.9.tgz",
+      "integrity": "sha512-HBU2Xv78SMgaydBmdor38lg8YDnFKSARg1Q6AT0/y2ezUAKiZvc211RDFHlEZRFNRVhcMamiToo7bDx3VEOYQw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.9.tgz",
+      "integrity": "sha512-BlB7bIcLT3G26urh5Dmse7fiLmLXnRlopw4s8DalgZ8ef79Jj4aUcYbk90g8iCa2467HX8SAIidbL7gsqXHdRw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.9.tgz",
+      "integrity": "sha512-e7S3MOJPZGp2QW6AK6+Ly81rC7oOSerQ+P8L0ta4FhVi+/j/v2yZzx5CqqDaWjtPFfYz21Vi1S0auHrap3Ma3A==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.9.tgz",
+      "integrity": "sha512-Sbe10Bnn0oUAB2AalYztvGcK+o6YFFA/9829PhOCUS9vkJElXGdphz0A3DbMdP8gmKkqPmPcMJmJOrI3VYB1JQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.9.tgz",
+      "integrity": "sha512-YcM5br0mVyZw2jcQeLIkhWtKPeVfAerES5PvOzaDxVtIyZ2NUBZKNLjC5z3/fUlDgT6w89VsxP2qzNipOaaDyA==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.9.tgz",
+      "integrity": "sha512-++0HQvasdo20JytyDpFvQtNrEsAgNG2CY1CLMwGXfFTKGBGQT3bOeLSYE2l1fYdvML5KUuwn9Z8L1EWe2tzs1w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.9.tgz",
+      "integrity": "sha512-uNIBa279Y3fkjV+2cUjx36xkx7eSjb8IvnL01eXUKXez/CBHNRw5ekCGMPM0BcmqBxBcdgUWuUXmVWwm4CH9kg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.9.tgz",
+      "integrity": "sha512-Mfiphvp3MjC/lctb+7D287Xw1DGzqJPb/J2aHHcHxflUo+8tmN/6d4k6I2yFR7BVo5/g7x2Monq4+Yew0EHRIA==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.9.tgz",
+      "integrity": "sha512-iSwByxzRe48YVkmpbgoxVzn76BXjlYFXC7NvLYq+b+kDjyyk30J0JY47DIn8z1MO3K0oSl9fZoRmZPQI4Hklzg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.9.tgz",
+      "integrity": "sha512-9jNJl6FqaUG+COdQMjSCGW4QiMHH88xWbvZ+kRVblZsWrkXlABuGdFJ1E9L7HK+T0Yqd4akKNa/lO0+jDxQD4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.9.tgz",
+      "integrity": "sha512-RLLdkflmqRG8KanPGOU7Rpg829ZHu8nFy5Pqdi9U01VYtG9Y0zOG6Vr2z4/S+/3zIyOxiK6cCeYNWOFR9QP87g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.9.tgz",
+      "integrity": "sha512-YaFBlPGeDasft5IIM+CQAhJAqS3St3nJzDEgsgFixcfZeyGPCd6eJBWzke5piZuZ7CtL656eOSYKk4Ls2C0FRQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.9.tgz",
+      "integrity": "sha512-1MkgTCuvMGWuqVtAvkpkXFmtL8XhWy+j4jaSO2wxfJtilVCi0ZE37b8uOdMItIHz4I6z1bWWtEX4CJwcKYLcuA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.9.tgz",
+      "integrity": "sha512-4Xd0xNiMVXKh6Fa7HEJQbrpP3m3DDn43jKxMjxLLRjWnRsfxjORYJlXPO4JNcXtOyfajXorRKY9NkOpTHptErg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.9.tgz",
+      "integrity": "sha512-WjH4s6hzo00nNezhp3wFIAfmGZ8U7KtrJNlFMRKxiI9mxEK1scOMAaa9i4crUtu+tBr+0IN6JCuAcSBJZfnphw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.9.tgz",
+      "integrity": "sha512-mGFrVJHmZiRqmP8xFOc6b84/7xa5y5YvR1x8djzXpJBSv/UsNK6aqec+6JDjConTgvvQefdGhFDAs2DLAds6gQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.9.tgz",
+      "integrity": "sha512-b33gLVU2k11nVx1OhX3C8QQP6UHQK4ZtN56oFWvVXvz2VkDoe6fbG8TOgHFxEvqeqohmRnIHe5A1+HADk4OQww==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.9.tgz",
+      "integrity": "sha512-PPOl1mi6lpLNQxnGoyAfschAodRFYXJ+9fs6WHXz7CSWKbOqiMZsubC+BQsVKuul+3vKLuwTHsS2c2y9EoKwxQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.7.0.tgz",
+      "integrity": "sha512-dyybb3AcajC7uha6CvhdVRJqaKyn7w2YKqKyAN37NKYgZT36w+iRb0Dymmc5qEJ549c/S31cMMSFd75bteCpCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
+      "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
+      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^9.6.0",
+        "globals": "^13.19.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/debug": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@eslint/js": {
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz",
+      "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@humanwhocodes/config-array": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
+      "integrity": "sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==",
+      "deprecated": "Use @eslint/config-array instead",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanwhocodes/object-schema": "^2.0.3",
+        "debug": "^4.3.1",
+        "minimatch": "^3.0.5"
+      },
+      "engines": {
+        "node": ">=10.10.0"
+      }
+    },
+    "node_modules/@humanwhocodes/config-array/node_modules/debug": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@humanwhocodes/config-array/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/object-schema": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
+      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
+      "deprecated": "Use @eslint/object-schema instead",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@isaacs/cliui/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.12",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.12.tgz",
+      "integrity": "sha512-OuLGC46TjB5BbN1dH8JULVVZY4WTdkF7tV9Ys6wLL1rubZnCMstOhNHueU5bLCrnRuDhKPDM4g6sw4Bel5Gzqg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.4.tgz",
+      "integrity": "sha512-VT2+G1VQs/9oz078bLrYbecdZKs912zQlkelYpuf+SXF+QvZDYJlbx/LSx+meSAwdDFnF8FVXW92AVjjkVmgFw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.29",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.29.tgz",
+      "integrity": "sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
+      "license": "MIT"
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@prisma/client": {
+      "version": "5.22.0",
+      "resolved": "https://registry.npmjs.org/@prisma/client/-/client-5.22.0.tgz",
+      "integrity": "sha512-M0SVXfyHnQREBKxCgyo7sffrKttwE6R8PMq330MIUF0pTwjUhLbW84pFDlf06B27XyCR++VtjugEnIHdr07SVA==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=16.13"
+      },
+      "peerDependencies": {
+        "prisma": "*"
+      },
+      "peerDependenciesMeta": {
+        "prisma": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@prisma/debug": {
+      "version": "5.22.0",
+      "resolved": "https://registry.npmjs.org/@prisma/debug/-/debug-5.22.0.tgz",
+      "integrity": "sha512-AUt44v3YJeggO2ZU5BkXI7M4hu9BF2zzH2iF2V5pyXT/lRTyWiElZ7It+bRH1EshoMRxHgpYg4VB6rCM+mG5jQ==",
+      "devOptional": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/@prisma/engines": {
+      "version": "5.22.0",
+      "resolved": "https://registry.npmjs.org/@prisma/engines/-/engines-5.22.0.tgz",
+      "integrity": "sha512-UNjfslWhAt06kVL3CjkuYpHAWSO6L4kDCVPegV6itt7nD1kSJavd3vhgAEhjglLJJKEdJ7oIqDJ+yHk6qO8gPA==",
+      "devOptional": true,
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@prisma/debug": "5.22.0",
+        "@prisma/engines-version": "5.22.0-44.605197351a3c8bdd595af2d2a9bc3025bca48ea2",
+        "@prisma/fetch-engine": "5.22.0",
+        "@prisma/get-platform": "5.22.0"
+      }
+    },
+    "node_modules/@prisma/engines-version": {
+      "version": "5.22.0-44.605197351a3c8bdd595af2d2a9bc3025bca48ea2",
+      "resolved": "https://registry.npmjs.org/@prisma/engines-version/-/engines-version-5.22.0-44.605197351a3c8bdd595af2d2a9bc3025bca48ea2.tgz",
+      "integrity": "sha512-2PTmxFR2yHW/eB3uqWtcgRcgAbG1rwG9ZriSvQw+nnb7c4uCr3RAcGMb6/zfE88SKlC1Nj2ziUvc96Z379mHgQ==",
+      "devOptional": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/@prisma/fetch-engine": {
+      "version": "5.22.0",
+      "resolved": "https://registry.npmjs.org/@prisma/fetch-engine/-/fetch-engine-5.22.0.tgz",
+      "integrity": "sha512-bkrD/Mc2fSvkQBV5EpoFcZ87AvOgDxbG99488a5cexp5Ccny+UM6MAe/UFkUC0wLYD9+9befNOqGiIJhhq+HbA==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@prisma/debug": "5.22.0",
+        "@prisma/engines-version": "5.22.0-44.605197351a3c8bdd595af2d2a9bc3025bca48ea2",
+        "@prisma/get-platform": "5.22.0"
+      }
+    },
+    "node_modules/@prisma/get-platform": {
+      "version": "5.22.0",
+      "resolved": "https://registry.npmjs.org/@prisma/get-platform/-/get-platform-5.22.0.tgz",
+      "integrity": "sha512-pHhpQdr1UPFpt+zFfnPazhulaZYCUqeIcPpJViYoq9R+D/yw4fjE+CtnsnKzPYm0ddUbeXUzjGVGIRVgPDCk4Q==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@prisma/debug": "5.22.0"
+      }
+    },
+    "node_modules/@remix-run/router": {
+      "version": "1.23.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.0.tgz",
+      "integrity": "sha512-O3rHJzAQKamUz1fvE0Qaw0xSFqsA/yafi2iqeE0pvdFtCO1viYx8QL6f3Ln/aCCTLxs68SLf0KPM9eSeM8yBnA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-beta.19",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.19.tgz",
+      "integrity": "sha512-3FL3mnMbPu0muGOCaKAhhFEYmqv9eTfPSJRJmANrCwtgK8VuxpsZDGK+m0LYAGoyO8+0j5uRe4PeyPDK1yA/hA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.45.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.45.1.tgz",
+      "integrity": "sha512-NEySIFvMY0ZQO+utJkgoMiCAjMrGvnbDLHvcmlA33UXJpYBCvlBEbMMtV837uCkS+plG2umfhn0T5mMAxGrlRA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.45.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.45.1.tgz",
+      "integrity": "sha512-ujQ+sMXJkg4LRJaYreaVx7Z/VMgBBd89wGS4qMrdtfUFZ+TSY5Rs9asgjitLwzeIbhwdEhyj29zhst3L1lKsRQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.45.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.45.1.tgz",
+      "integrity": "sha512-FSncqHvqTm3lC6Y13xncsdOYfxGSLnP+73k815EfNmpewPs+EyM49haPS105Rh4aF5mJKywk9X0ogzLXZzN9lA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.45.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.45.1.tgz",
+      "integrity": "sha512-2/vVn/husP5XI7Fsf/RlhDaQJ7x9zjvC81anIVbr4b/f0xtSmXQTFcGIQ/B1cXIYM6h2nAhJkdMHTnD7OtQ9Og==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.45.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.45.1.tgz",
+      "integrity": "sha512-4g1kaDxQItZsrkVTdYQ0bxu4ZIQ32cotoQbmsAnW1jAE4XCMbcBPDirX5fyUzdhVCKgPcrwWuucI8yrVRBw2+g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.45.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.45.1.tgz",
+      "integrity": "sha512-L/6JsfiL74i3uK1Ti2ZFSNsp5NMiM4/kbbGEcOCps99aZx3g8SJMO1/9Y0n/qKlWZfn6sScf98lEOUe2mBvW9A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.45.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.45.1.tgz",
+      "integrity": "sha512-RkdOTu2jK7brlu+ZwjMIZfdV2sSYHK2qR08FUWcIoqJC2eywHbXr0L8T/pONFwkGukQqERDheaGTeedG+rra6Q==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.45.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.45.1.tgz",
+      "integrity": "sha512-3kJ8pgfBt6CIIr1o+HQA7OZ9mp/zDk3ctekGl9qn/pRBgrRgfwiffaUmqioUGN9hv0OHv2gxmvdKOkARCtRb8Q==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.45.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.45.1.tgz",
+      "integrity": "sha512-k3dOKCfIVixWjG7OXTCOmDfJj3vbdhN0QYEqB+OuGArOChek22hn7Uy5A/gTDNAcCy5v2YcXRJ/Qcnm4/ma1xw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.45.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.45.1.tgz",
+      "integrity": "sha512-PmI1vxQetnM58ZmDFl9/Uk2lpBBby6B6rF4muJc65uZbxCs0EA7hhKCk2PKlmZKuyVSHAyIw3+/SiuMLxKxWog==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loongarch64-gnu": {
+      "version": "4.45.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.45.1.tgz",
+      "integrity": "sha512-9UmI0VzGmNJ28ibHW2GpE2nF0PBQqsyiS4kcJ5vK+wuwGnV5RlqdczVocDSUfGX/Na7/XINRVoUgJyFIgipoRg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
+      "version": "4.45.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.45.1.tgz",
+      "integrity": "sha512-7nR2KY8oEOUTD3pBAxIBBbZr0U7U+R9HDTPNy+5nVVHDXI4ikYniH1oxQz9VoB5PbBU1CZuDGHkLJkd3zLMWsg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.45.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.45.1.tgz",
+      "integrity": "sha512-nlcl3jgUultKROfZijKjRQLUu9Ma0PeNv/VFHkZiKbXTBQXhpytS8CIj5/NfBeECZtY2FJQubm6ltIxm/ftxpw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.45.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.45.1.tgz",
+      "integrity": "sha512-HJV65KLS51rW0VY6rvZkiieiBnurSzpzore1bMKAhunQiECPuxsROvyeaot/tcK3A3aGnI+qTHqisrpSgQrpgA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.45.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.45.1.tgz",
+      "integrity": "sha512-NITBOCv3Qqc6hhwFt7jLV78VEO/il4YcBzoMGGNxznLgRQf43VQDae0aAzKiBeEPIxnDrACiMgbqjuihx08OOw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.45.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.45.1.tgz",
+      "integrity": "sha512-+E/lYl6qu1zqgPEnTrs4WysQtvc/Sh4fC2nByfFExqgYrqkKWp1tWIbe+ELhixnenSpBbLXNi6vbEEJ8M7fiHw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.45.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.45.1.tgz",
+      "integrity": "sha512-a6WIAp89p3kpNoYStITT9RbTbTnqarU7D8N8F2CV+4Cl9fwCOZraLVuVFvlpsW0SbIiYtEnhCZBPLoNdRkjQFw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.45.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.45.1.tgz",
+      "integrity": "sha512-T5Bi/NS3fQiJeYdGvRpTAP5P02kqSOpqiopwhj0uaXB6nzs5JVi2XMJb18JUSKhCOX8+UE1UKQufyD6Or48dJg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.45.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.45.1.tgz",
+      "integrity": "sha512-lxV2Pako3ujjuUe9jiU3/s7KSrDfH6IgTSQOnDWr9aJ92YsFd7EurmClK0ly/t8dzMkDtd04g60WX6yl0sGfdw==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.45.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.45.1.tgz",
+      "integrity": "sha512-M/fKi4sasCdM8i0aWJjCSFm2qEnYRR8AMLG2kxp6wD13+tMGA4Z1tVAuHkNRjud5SW2EM3naLuK35w9twvf6aA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.87.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.87.4.tgz",
+      "integrity": "sha512-uNsg6zMxraEPDVO2Bn+F3/ctHi+Zsk+MMpcN8h6P7ozqD088F6mFY5TfGM7zuyIrL7HKpDyu6QHfLWiDxh3cuw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.87.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.87.4.tgz",
+      "integrity": "sha512-T5GT/1ZaNsUXf5I3RhcYuT17I4CPlbZgyLxc/ZGv7ciS6esytlbjb3DgUFO6c8JWYMDpdjSWInyGZUErgzqhcA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "5.87.4"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19"
+      }
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
+      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.7.tgz",
+      "integrity": "sha512-dkO5fhS7+/oos4ciWxyEyjWe48zmG6wbCheo/G2ZnHx4fs3EU6YC6UM8rk56gAjNJ9P3MTH2jo5jb92/K6wbng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.20.7"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.15",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "18.3.23",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.23.tgz",
+      "integrity": "sha512-/LDXMQh55EzZQ0uVAZmKKhfENivEvWz6E+EYzh+/MCjMhNsotd+ZHhBGIjFDTi6+fz0OhQQQLbTgdQIxxCsC0w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "18.3.7",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
+      "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^18.0.0"
+      }
+    },
+    "node_modules/@types/triple-beam": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@types/triple-beam/-/triple-beam-1.3.5.tgz",
+      "integrity": "sha512-6WaYesThRMCl19iryMYP7/x2OVgCtbIVflDGFpWnb9irXI3UjYE4AzmYuiUKY1AJstGijoY+MgUszMgRxIYTYw==",
+      "license": "MIT"
+    },
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
+      "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.6.0.tgz",
+      "integrity": "sha512-5Kgff+m8e2PB+9j51eGHEpn5kUzRKH2Ry0qGoe8ItJg7pqnkPrYPkDQZGgGmTa0EGarHrkjLvOdU3b1fzI8otQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.27.4",
+        "@babel/plugin-transform-react-jsx-self": "^7.27.1",
+        "@babel/plugin-transform-react-jsx-source": "^7.27.1",
+        "@rolldown/pluginutils": "1.0.0-beta.19",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.17.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0"
+      }
+    },
+    "node_modules/accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
+    "node_modules/array-buffer-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
+      "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "is-array-buffer": "^3.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
+      "license": "MIT"
+    },
+    "node_modules/array-includes": {
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.9.tgz",
+      "integrity": "sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.0",
+        "es-object-atoms": "^1.1.1",
+        "get-intrinsic": "^1.3.0",
+        "is-string": "^1.1.1",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.findlast": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
+      "integrity": "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flat": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz",
+      "integrity": "sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flatmap": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz",
+      "integrity": "sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.tosorted": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz",
+      "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3",
+        "es-errors": "^1.3.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/arraybuffer.prototype.slice": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz",
+      "integrity": "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "is-array-buffer": "^3.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/async": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
+      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
+      "license": "MIT"
+    },
+    "node_modules/async-function": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
+      "integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/autoprefixer": {
+      "version": "10.4.21",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
+      "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.24.4",
+        "caniuse-lite": "^1.0.30001702",
+        "fraction.js": "^4.3.7",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/axios": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.12.2.tgz",
+      "integrity": "sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.4",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/bcryptjs": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-2.4.3.tgz",
+      "integrity": "sha512-V/Hy/X9Vt7f3BbPJEi8BdVFMByHi+jNXrYkW3huaybV/kQ0KJg0Y6PkEMbn+zeT+i+SiKZ/HMqJGIIt4LZDqNQ==",
+      "license": "MIT"
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/body-parser": {
+      "version": "1.20.3",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
+      "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "3.1.2",
+        "content-type": "~1.0.5",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "on-finished": "2.4.1",
+        "qs": "6.13.0",
+        "raw-body": "2.5.2",
+        "type-is": "~1.6.18",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.25.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.1.tgz",
+      "integrity": "sha512-KGj0KoOMXLpSNkkEI6Z6mShmQy0bc1I+T7K9N81k4WWMrfz+6fQ6es80B/YLAeRoKvjYE1YSHHOW1qe9xIVzHw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001726",
+        "electron-to-chromium": "^1.5.173",
+        "node-releases": "^2.0.19",
+        "update-browserslist-db": "^1.1.3"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/buffer-equal-constant-time": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
+      "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
+      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.0",
+        "es-define-property": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001727",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001727.tgz",
+      "integrity": "sha512-pB68nIHmbN6L/4C6MH1DokyR3bYqFwjaSs/sWDHGj4CTcFtQUQMuJftVwWkXq7mNWOybD3KhUv3oWHoGxgP14Q==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chalk/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/chart.js": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.0.tgz",
+      "integrity": "sha512-aYeC/jDgSEx8SHWZvANYMioYMZ2KX02W6f6uVfyteuCGcadDLcYVHdfdygsTQkQ4TKn5lghoojAsPj5pu0SnvQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/color": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^1.9.3",
+        "color-string": "^1.6.0"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT"
+    },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
+    "node_modules/color/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/color/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "license": "MIT"
+    },
+    "node_modules/colorspace": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/colorspace/-/colorspace-1.1.4.tgz",
+      "integrity": "sha512-BgvKJiuVu1igBUF2kEjRCZXol6wiiGbY5ipL/oVPwm0BL9sIpMIzM8IK7vwuxIIzOXMV3Ey5w+vxhm0rR/TN8w==",
+      "license": "MIT",
+      "dependencies": {
+        "color": "^3.1.3",
+        "text-hex": "1.0.x"
+      }
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/concurrently": {
+      "version": "8.2.2",
+      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-8.2.2.tgz",
+      "integrity": "sha512-1dP4gpXFhei8IOtlXRE/T/4H88ElHgTiUzh71YUmtjTEHMSRS2Z/fgOxHSxxusGHogsRfxNq1vyAwxSC+EVyDg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.1.2",
+        "date-fns": "^2.30.0",
+        "lodash": "^4.17.21",
+        "rxjs": "^7.8.1",
+        "shell-quote": "^1.8.1",
+        "spawn-command": "0.0.2",
+        "supports-color": "^8.1.1",
+        "tree-kill": "^1.2.2",
+        "yargs": "^17.7.2"
+      },
+      "bin": {
+        "conc": "dist/bin/concurrently.js",
+        "concurrently": "dist/bin/concurrently.js"
+      },
+      "engines": {
+        "node": "^14.13.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
+      }
+    },
+    "node_modules/content-disposition": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "5.2.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/content-type": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cookie": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz",
+      "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
+      "license": "MIT"
+    },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/data-view-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
+      "integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz",
+      "integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/inspect-js"
+      }
+    },
+    "node_modules/data-view-byte-offset": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz",
+      "integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
+    "node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/destroy": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/dotenv": {
+      "version": "16.6.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz",
+      "integrity": "sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/ecdsa-sig-formatter": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
+      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+      "license": "MIT"
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.185",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.185.tgz",
+      "integrity": "sha512-dYOZfUk57hSMPePoIQ1fZWl1Fkj+OshhEVuPacNKWzC1efe56OsHY3l/jCfiAgIICOU3VgOIdoq7ahg7r7n6MQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/enabled": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/enabled/-/enabled-2.0.0.tgz",
+      "integrity": "sha512-AKrN98kuwOzMIdAizXGI86UFBoo26CL21UM763y1h/GMSJ4/OHU9k2YlsmBpyScFo/wbLzWQJBMCW4+IO3/+OQ==",
+      "license": "MIT"
+    },
+    "node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/es-abstract": {
+      "version": "1.24.0",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.0.tgz",
+      "integrity": "sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.2",
+        "arraybuffer.prototype.slice": "^1.0.4",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "data-view-buffer": "^1.0.2",
+        "data-view-byte-length": "^1.0.2",
+        "data-view-byte-offset": "^1.0.1",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "es-set-tostringtag": "^2.1.0",
+        "es-to-primitive": "^1.3.0",
+        "function.prototype.name": "^1.1.8",
+        "get-intrinsic": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "get-symbol-description": "^1.1.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "internal-slot": "^1.1.0",
+        "is-array-buffer": "^3.0.5",
+        "is-callable": "^1.2.7",
+        "is-data-view": "^1.0.2",
+        "is-negative-zero": "^2.0.3",
+        "is-regex": "^1.2.1",
+        "is-set": "^2.0.3",
+        "is-shared-array-buffer": "^1.0.4",
+        "is-string": "^1.1.1",
+        "is-typed-array": "^1.1.15",
+        "is-weakref": "^1.1.1",
+        "math-intrinsics": "^1.1.0",
+        "object-inspect": "^1.13.4",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.7",
+        "own-keys": "^1.0.1",
+        "regexp.prototype.flags": "^1.5.4",
+        "safe-array-concat": "^1.1.3",
+        "safe-push-apply": "^1.0.0",
+        "safe-regex-test": "^1.1.0",
+        "set-proto": "^1.0.0",
+        "stop-iteration-iterator": "^1.1.0",
+        "string.prototype.trim": "^1.2.10",
+        "string.prototype.trimend": "^1.0.9",
+        "string.prototype.trimstart": "^1.0.8",
+        "typed-array-buffer": "^1.0.3",
+        "typed-array-byte-length": "^1.0.3",
+        "typed-array-byte-offset": "^1.0.4",
+        "typed-array-length": "^1.0.7",
+        "unbox-primitive": "^1.1.0",
+        "which-typed-array": "^1.1.19"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-iterator-helpers": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.2.1.tgz",
+      "integrity": "sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.6",
+        "es-errors": "^1.3.0",
+        "es-set-tostringtag": "^2.0.3",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.6",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "iterator.prototype": "^1.1.4",
+        "safe-array-concat": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-shim-unscopables": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.1.0.tgz",
+      "integrity": "sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-to-primitive": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz",
+      "integrity": "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7",
+        "is-date-object": "^1.0.5",
+        "is-symbol": "^1.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.9.tgz",
+      "integrity": "sha512-CRbODhYyQx3qp7ZEwzxOk4JBqmD/seJrzPa/cGjY1VtIn5E09Oi9/dB4JwctnfZ8Q8iT7rioVv5k/FNT/uf54g==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.25.9",
+        "@esbuild/android-arm": "0.25.9",
+        "@esbuild/android-arm64": "0.25.9",
+        "@esbuild/android-x64": "0.25.9",
+        "@esbuild/darwin-arm64": "0.25.9",
+        "@esbuild/darwin-x64": "0.25.9",
+        "@esbuild/freebsd-arm64": "0.25.9",
+        "@esbuild/freebsd-x64": "0.25.9",
+        "@esbuild/linux-arm": "0.25.9",
+        "@esbuild/linux-arm64": "0.25.9",
+        "@esbuild/linux-ia32": "0.25.9",
+        "@esbuild/linux-loong64": "0.25.9",
+        "@esbuild/linux-mips64el": "0.25.9",
+        "@esbuild/linux-ppc64": "0.25.9",
+        "@esbuild/linux-riscv64": "0.25.9",
+        "@esbuild/linux-s390x": "0.25.9",
+        "@esbuild/linux-x64": "0.25.9",
+        "@esbuild/netbsd-arm64": "0.25.9",
+        "@esbuild/netbsd-x64": "0.25.9",
+        "@esbuild/openbsd-arm64": "0.25.9",
+        "@esbuild/openbsd-x64": "0.25.9",
+        "@esbuild/openharmony-arm64": "0.25.9",
+        "@esbuild/sunos-x64": "0.25.9",
+        "@esbuild/win32-arm64": "0.25.9",
+        "@esbuild/win32-ia32": "0.25.9",
+        "@esbuild/win32-x64": "0.25.9"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "license": "MIT"
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz",
+      "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
+      "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@eslint-community/regexpp": "^4.6.1",
+        "@eslint/eslintrc": "^2.1.4",
+        "@eslint/js": "8.57.1",
+        "@humanwhocodes/config-array": "^0.13.0",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@nodelib/fs.walk": "^1.2.8",
+        "@ungap/structured-clone": "^1.2.0",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.3.2",
+        "doctrine": "^3.0.0",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^7.2.2",
+        "eslint-visitor-keys": "^3.4.3",
+        "espree": "^9.6.1",
+        "esquery": "^1.4.2",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "globals": "^13.19.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "is-path-inside": "^3.0.3",
+        "js-yaml": "^4.1.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3",
+        "strip-ansi": "^6.0.1",
+        "text-table": "^0.2.0"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-plugin-react": {
+      "version": "7.37.5",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.5.tgz",
+      "integrity": "sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.8",
+        "array.prototype.findlast": "^1.2.5",
+        "array.prototype.flatmap": "^1.3.3",
+        "array.prototype.tosorted": "^1.1.4",
+        "doctrine": "^2.1.0",
+        "es-iterator-helpers": "^1.2.1",
+        "estraverse": "^5.3.0",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
+        "minimatch": "^3.1.2",
+        "object.entries": "^1.1.9",
+        "object.fromentries": "^2.0.8",
+        "object.values": "^1.2.1",
+        "prop-types": "^15.8.1",
+        "resolve": "^2.0.0-next.5",
+        "semver": "^6.3.1",
+        "string.prototype.matchall": "^4.0.12",
+        "string.prototype.repeat": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7"
+      }
+    },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz",
+      "integrity": "sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0"
+      }
+    },
+    "node_modules/eslint-plugin-react-refresh": {
+      "version": "0.4.20",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.20.tgz",
+      "integrity": "sha512-XpbHQ2q5gUF8BGOX4dHe+71qoirYMhApEPZ7sfhF/dNnOF1UXnCMGZf79SFTBO7Bz5YEIT4TMieSlJBWhP9WBA==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "eslint": ">=8.40"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
+      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint/node_modules/debug": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/eslint/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/espree": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
+      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.9.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^3.4.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
+      "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express": {
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
+      "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
+      "license": "MIT",
+      "dependencies": {
+        "accepts": "~1.3.8",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.20.3",
+        "content-disposition": "0.5.4",
+        "content-type": "~1.0.4",
+        "cookie": "0.7.1",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "1.3.1",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "merge-descriptors": "1.0.3",
+        "methods": "~1.1.2",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.12",
+        "proxy-addr": "~2.0.7",
+        "qs": "6.13.0",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.2.1",
+        "send": "0.19.0",
+        "serve-static": "1.16.2",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/express-rate-limit": {
+      "version": "7.5.1",
+      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-7.5.1.tgz",
+      "integrity": "sha512-7iN8iPMDzOMHPUYllBEsQdWVB6fPDMPqwjBaFrgr4Jgr/+okjvzAy+UHlYYL/Vs0OsOrMkwS6PJDkFlJwoxUnw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/express-rate-limit"
+      },
+      "peerDependencies": {
+        "express": ">= 4.11"
+      }
+    },
+    "node_modules/express-validator": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/express-validator/-/express-validator-7.2.1.tgz",
+      "integrity": "sha512-CjNE6aakfpuwGaHQZ3m8ltCG2Qvivd7RHtVMS/6nVxOM7xVGqr4bhflsm4+N5FP5zI7Zxp+Hae+9RE+o8e3ZOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash": "^4.17.21",
+        "validator": "~13.12.0"
+      },
+      "engines": {
+        "node": ">= 8.0.0"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fastq": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
+      "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fecha": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/fecha/-/fecha-4.2.3.tgz",
+      "integrity": "sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw==",
+      "license": "MIT"
+    },
+    "node_modules/file-entry-cache": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^3.0.4"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/finalhandler": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
+      "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "2.6.9",
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "statuses": "2.0.1",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
+      "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.3",
+        "rimraf": "^3.0.2"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
+      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/fn.name": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fn.name/-/fn.name-1.1.0.tgz",
+      "integrity": "sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw==",
+      "license": "MIT"
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/for-each": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
+      "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/foreground-child": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.6",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
+      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "node_modules/fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/function.prototype.name": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.8.tgz",
+      "integrity": "sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "functions-have-names": "^1.2.3",
+        "hasown": "^2.0.2",
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/get-symbol-description": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
+      "integrity": "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/globals": {
+      "version": "13.24.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globalthis": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
+      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/graphemer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/has-bigints": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
+      "integrity": "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
+      "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/helmet": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/helmet/-/helmet-7.2.0.tgz",
+      "integrity": "sha512-ZRiwvN089JfMXokizgqEPXsl2Guk094yExfoDXR0cBYWxtBbaSww/w+vT4WEJsBW2iTUi1GgZ6swmoug3Oy4Xw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/http-errors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "depd": "2.0.0",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "toidentifier": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/ignore-by-default": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
+      "integrity": "sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
+    "node_modules/internal-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
+      "integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "hasown": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/is-array-buffer": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
+      "integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+      "license": "MIT"
+    },
+    "node_modules/is-async-function": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
+      "integrity": "sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "async-function": "^1.0.0",
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bigint": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
+      "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-bigints": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-boolean-object": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
+      "integrity": "sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-data-view": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz",
+      "integrity": "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-date-object": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
+      "integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-finalizationregistry": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz",
+      "integrity": "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-generator-function": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz",
+      "integrity": "sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.0",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
+      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-negative-zero": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
+      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-number-object": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
+      "integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-path-inside": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-regex": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
+      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-set": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
+      "integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-string": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
+      "integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-symbol": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz",
+      "integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-typed-array": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
+      "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakmap": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
+      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.1.tgz",
+      "integrity": "sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakset": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz",
+      "integrity": "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/iterator.prototype": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz",
+      "integrity": "sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "get-proto": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/jsonwebtoken": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.2.tgz",
+      "integrity": "sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "jws": "^3.2.2",
+        "lodash.includes": "^4.3.0",
+        "lodash.isboolean": "^3.0.3",
+        "lodash.isinteger": "^4.0.4",
+        "lodash.isnumber": "^3.0.3",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.isstring": "^4.0.1",
+        "lodash.once": "^4.0.0",
+        "ms": "^2.1.1",
+        "semver": "^7.5.4"
+      },
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      }
+    },
+    "node_modules/jsonwebtoken/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/jsx-ast-utils": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
+      "integrity": "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.6",
+        "array.prototype.flat": "^1.3.1",
+        "object.assign": "^4.1.4",
+        "object.values": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/jwa": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.2.tgz",
+      "integrity": "sha512-eeH5JO+21J78qMvTIDdBXidBd6nG2kZjg5Ohz/1fpa28Z4CcsWUzJ1ZZyFq/3z3N17aZy+ZuBoHljASbL1WfOw==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer-equal-constant-time": "^1.0.1",
+        "ecdsa-sig-formatter": "1.0.11",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/jws": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz",
+      "integrity": "sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==",
+      "license": "MIT",
+      "dependencies": {
+        "jwa": "^1.4.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/kuler": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/kuler/-/kuler-2.0.0.tgz",
+      "integrity": "sha512-Xq9nH7KlWZmXAtodXDDRE7vs6DU1gTU8zYDHDiWLSip45Egwq3plLHzPn27NgvzL2r1LMPC1vdqh98sQxtqj4A==",
+      "license": "MIT"
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.includes": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
+      "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isboolean": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
+      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isinteger": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
+      "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isnumber": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
+      "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isstring": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
+      "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash.once": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
+      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
+      "license": "MIT"
+    },
+    "node_modules/logform": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/logform/-/logform-2.7.0.tgz",
+      "integrity": "sha512-TFYA4jnP7PVbmlBIfhlSe+WKxs9dklXMTEGcBCIvLhE/Tn3H6Gk1norupVW7m5Cnd4bLcr08AytbyV/xj7f/kQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@colors/colors": "1.6.0",
+        "@types/triple-beam": "^1.3.2",
+        "fecha": "^4.2.0",
+        "ms": "^2.1.1",
+        "safe-stable-stringify": "^2.3.1",
+        "triple-beam": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      }
+    },
+    "node_modules/logform/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/lucide-react": {
+      "version": "0.294.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.294.0.tgz",
+      "integrity": "sha512-V7o0/VECSGbLHn3/1O67FUgBwWB+hmzshrgDVRJQhMh8uj5D3HBuIvhuAmQTtlupILSplwIZg5FTc4tTKMA2SA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/merge-descriptors": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
+      "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "license": "MIT",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "license": "MIT"
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.19",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
+      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nodemon": {
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.10.tgz",
+      "integrity": "sha512-WDjw3pJ0/0jMFmyNDp3gvY2YizjLmmOUQo6DEBY+JgdvW/yQ9mEeSw6H5ythl5Ny2ytb7f9C2nIbjSxMNzbJXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^3.5.2",
+        "debug": "^4",
+        "ignore-by-default": "^1.0.1",
+        "minimatch": "^3.1.2",
+        "pstree.remy": "^1.1.8",
+        "semver": "^7.5.3",
+        "simple-update-notifier": "^2.0.0",
+        "supports-color": "^5.5.0",
+        "touch": "^3.1.0",
+        "undefsafe": "^2.0.5"
+      },
+      "bin": {
+        "nodemon": "bin/nodemon.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/nodemon"
+      }
+    },
+    "node_modules/nodemon/node_modules/debug": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/nodemon/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/nodemon/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nodemon/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz",
+      "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.entries": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.9.tgz",
+      "integrity": "sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.fromentries": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz",
+      "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.values": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.1.tgz",
+      "integrity": "sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "license": "MIT",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/one-time": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/one-time/-/one-time-1.0.0.tgz",
+      "integrity": "sha512-5DXOiRKwuSEcQ/l0kGCF6Q3jcADFv5tSmRaJck/OqkVFcOzutB134KRSfF0xDrL39MNnqxbHBbUUcjZIhTgb2g==",
+      "license": "MIT",
+      "dependencies": {
+        "fn.name": "1.x.x"
+      }
+    },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/own-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
+      "integrity": "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-intrinsic": "^1.2.6",
+        "object-keys": "^1.1.1",
+        "safe-push-apply": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0"
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/patchmon-backend": {
+      "resolved": "backend",
+      "link": true
+    },
+    "node_modules/patchmon-frontend": {
+      "resolved": "frontend",
+      "link": true
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/path-to-regexp": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
+      "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==",
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
+      "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-import/node_modules/resolve": {
+      "version": "1.22.10",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
+      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/prisma": {
+      "version": "5.22.0",
+      "resolved": "https://registry.npmjs.org/prisma/-/prisma-5.22.0.tgz",
+      "integrity": "sha512-vtpjW3XuYCSnMsNVBjLMNkTj6OZbudcPPTPYHqX0CJfpcdWciI1dM8uHETwmDxxiqEwCIE6WvXucWUetJgfu/A==",
+      "devOptional": true,
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@prisma/engines": "5.22.0"
+      },
+      "bin": {
+        "prisma": "build/index.js"
+      },
+      "engines": {
+        "node": ">=16.13"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.3"
+      }
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "license": "MIT",
+      "dependencies": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
+    "node_modules/pstree.remy": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
+      "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
+      "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.0.6"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/raw-body": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
+      "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "3.1.2",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-chartjs-2": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.3.0.tgz",
+      "integrity": "sha512-UfZZFnDsERI3c3CZGxzvNJd02SHjaSJ8kgW1djn65H1KK8rehwTjyrRKOG3VTMG8wtHZ5rgAO5oTHtHi9GCCmw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "chart.js": "^4.1.1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/react-refresh": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
+      "integrity": "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-router": {
+      "version": "6.30.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.1.tgz",
+      "integrity": "sha512-X1m21aEmxGXqENEPG3T6u0Th7g0aS4ZmoNynhbs+Cn+q+QGTLt+d5IQ2bHAXKzKcxGJjxACpVbnYQSCRcfxHlQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.23.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.30.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.1.tgz",
+      "integrity": "sha512-llKsgOkZdbPU1Eg3zK8lCn+sjD9wMRZZPuzmdWWX5SUs8OFkN5HnFVC0u5KMeMaC9aoancFI/KoLuKPqN+hxHw==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.23.0",
+        "react-router": "6.30.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/reflect.getprototypeof": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
+      "integrity": "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.7",
+        "get-proto": "^1.0.1",
+        "which-builtin-type": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
+      "integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "2.0.0-next.5",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
+      "integrity": "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.45.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.45.1.tgz",
+      "integrity": "sha512-4iya7Jb76fVpQyLoiVpzUrsjQ12r3dM7fIVz+4NwoYvZOShknRmiv+iu9CClZml5ZLGb0XMcYLutK6w9tgxHDw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.8"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.45.1",
+        "@rollup/rollup-android-arm64": "4.45.1",
+        "@rollup/rollup-darwin-arm64": "4.45.1",
+        "@rollup/rollup-darwin-x64": "4.45.1",
+        "@rollup/rollup-freebsd-arm64": "4.45.1",
+        "@rollup/rollup-freebsd-x64": "4.45.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.45.1",
+        "@rollup/rollup-linux-arm-musleabihf": "4.45.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.45.1",
+        "@rollup/rollup-linux-arm64-musl": "4.45.1",
+        "@rollup/rollup-linux-loongarch64-gnu": "4.45.1",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.45.1",
+        "@rollup/rollup-linux-riscv64-gnu": "4.45.1",
+        "@rollup/rollup-linux-riscv64-musl": "4.45.1",
+        "@rollup/rollup-linux-s390x-gnu": "4.45.1",
+        "@rollup/rollup-linux-x64-gnu": "4.45.1",
+        "@rollup/rollup-linux-x64-musl": "4.45.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.45.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.45.1",
+        "@rollup/rollup-win32-x64-msvc": "4.45.1",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/rxjs": {
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
+      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/safe-array-concat": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
+      "integrity": "sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "has-symbols": "^1.1.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">=0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/safe-push-apply": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
+      "integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-regex-test": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
+      "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-regex": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-stable-stringify": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/safe-stable-stringify/-/safe-stable-stringify-2.5.0.tgz",
+      "integrity": "sha512-b3rppTKm9T+PsVCBEOUR46GWI7fdOs00VKZ1+9c1EWDaDMvjQc6tUwuFyIprgGgTcWoVHSKrU8H31ZHA2e0RHA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/send": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
+      "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "mime": "1.6.0",
+        "ms": "2.1.3",
+        "on-finished": "2.4.1",
+        "range-parser": "~1.2.1",
+        "statuses": "2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/send/node_modules/encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/send/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/serve-static": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
+      "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
+      "license": "MIT",
+      "dependencies": {
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.19.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-function-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-proto": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz",
+      "integrity": "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+      "license": "ISC"
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shell-quote": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.3.tgz",
+      "integrity": "sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/simple-update-notifier": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",
+      "integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.5.3"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/spawn-command": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2.tgz",
+      "integrity": "sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==",
+      "dev": true
+    },
+    "node_modules/stack-trace": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/stack-trace/-/stack-trace-0.0.10.tgz",
+      "integrity": "sha512-KGzahc7puUKkzyMt+IqAep+TVNbKP+k2Lmwhub39m1AsTSkaDutx56aDCo+HLDzf/D26BIHTJWNiTG1KAJiQCg==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/statuses": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/stop-iteration-iterator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
+      "integrity": "sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "internal-slot": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string.prototype.matchall": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz",
+      "integrity": "sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.6",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "regexp.prototype.flags": "^1.5.3",
+        "set-function-name": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.repeat": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz",
+      "integrity": "sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      }
+    },
+    "node_modules/string.prototype.trim": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz",
+      "integrity": "sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-data-property": "^1.1.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-object-atoms": "^1.0.0",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz",
+      "integrity": "sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/sucrase": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "^10.3.10",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/sucrase/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/sucrase/node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/sucrase/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.17",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
+      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.6",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/resolve": {
+      "version": "1.22.10",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
+      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/text-hex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/text-hex/-/text-hex-1.0.0.tgz",
+      "integrity": "sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg==",
+      "license": "MIT"
+    },
+    "node_modules/text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/touch": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.1.tgz",
+      "integrity": "sha512-r0eojU4bI8MnHr8c5bNo7lJDdI2qXlWWJk6a9EAFG7vbhTjElYhBVS3/miuE0uOuoLdb8Mc/rVfsmm6eo5o9GA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "nodetouch": "bin/nodetouch.js"
+      }
+    },
+    "node_modules/tree-kill": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "tree-kill": "cli.js"
+      }
+    },
+    "node_modules/triple-beam": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/triple-beam/-/triple-beam-1.4.1.tgz",
+      "integrity": "sha512-aZbgViZrg1QNcG+LULa7nhZpJTZSLm/mXnHXnbAbjmN5aSa0y7V+wvv6+4WaBtpISJzThKy+PIPxc1Nq1EJ9mg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "license": "MIT",
+      "dependencies": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/typed-array-buffer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/typed-array-byte-length": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz",
+      "integrity": "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-byte-offset": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz",
+      "integrity": "sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.15",
+        "reflect.getprototypeof": "^1.0.9"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-length": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.7.tgz",
+      "integrity": "sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "is-typed-array": "^1.1.13",
+        "possible-typed-array-names": "^1.0.0",
+        "reflect.getprototypeof": "^1.0.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/unbox-primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
+      "integrity": "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "which-boxed-primitive": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/undefsafe": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
+      "integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
+      "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT"
+    },
+    "node_modules/utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/uuid": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
+    "node_modules/validator": {
+      "version": "13.12.0",
+      "resolved": "https://registry.npmjs.org/validator/-/validator-13.12.0.tgz",
+      "integrity": "sha512-c1Q0mCiPlgdTVVVIJIrBuxNicYE+t/7oKeI9MWLj3fh/uq2Pxh/3eeWbVZ4OcGW1TUf53At0njHw5SMdA3tmMg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/vite": {
+      "version": "7.1.5",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.5.tgz",
+      "integrity": "sha512-4cKBO9wR75r0BeIWWWId9XK9Lj6La5X846Zw9dFfzMRw38IlTk2iCcUt6hsyiDRcPidc55ZParFYDXi0nXOeLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.25.0",
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3",
+        "postcss": "^8.5.6",
+        "rollup": "^4.43.0",
+        "tinyglobby": "^0.2.15"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "lightningcss": "^1.21.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/which-boxed-primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz",
+      "integrity": "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-bigint": "^1.1.0",
+        "is-boolean-object": "^1.2.1",
+        "is-number-object": "^1.1.1",
+        "is-string": "^1.1.1",
+        "is-symbol": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-builtin-type": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.1.tgz",
+      "integrity": "sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "function.prototype.name": "^1.1.6",
+        "has-tostringtag": "^1.0.2",
+        "is-async-function": "^2.0.0",
+        "is-date-object": "^1.1.0",
+        "is-finalizationregistry": "^1.1.0",
+        "is-generator-function": "^1.0.10",
+        "is-regex": "^1.2.1",
+        "is-weakref": "^1.0.2",
+        "isarray": "^2.0.5",
+        "which-boxed-primitive": "^1.1.0",
+        "which-collection": "^1.0.2",
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-collection": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
+      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-map": "^2.0.3",
+        "is-set": "^2.0.3",
+        "is-weakmap": "^2.0.2",
+        "is-weakset": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-typed-array": {
+      "version": "1.1.19",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.19.tgz",
+      "integrity": "sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "for-each": "^0.3.5",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/winston": {
+      "version": "3.17.0",
+      "resolved": "https://registry.npmjs.org/winston/-/winston-3.17.0.tgz",
+      "integrity": "sha512-DLiFIXYC5fMPxaRg832S6F5mJYvePtmO5G9v9IgUFPhXm9/GkXarH/TUrBAVzhTCzAj9anE/+GjrgXp/54nOgw==",
+      "license": "MIT",
+      "dependencies": {
+        "@colors/colors": "^1.6.0",
+        "@dabh/diagnostics": "^2.0.2",
+        "async": "^3.2.3",
+        "is-stream": "^2.0.0",
+        "logform": "^2.7.0",
+        "one-time": "^1.0.0",
+        "readable-stream": "^3.4.0",
+        "safe-stable-stringify": "^2.3.1",
+        "stack-trace": "0.0.x",
+        "triple-beam": "^1.3.0",
+        "winston-transport": "^4.9.0"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      }
+    },
+    "node_modules/winston-transport": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/winston-transport/-/winston-transport-4.9.0.tgz",
+      "integrity": "sha512-8drMJ4rkgaPo1Me4zD/3WLfI/zPdA9o2IipKODunnGDcuqbHwjsbB79ylv04LCGGzU0xQ6vTznOMpQGaLhhm6A==",
+      "license": "MIT",
+      "dependencies": {
+        "logform": "^2.7.0",
+        "readable-stream": "^3.6.2",
+        "triple-beam": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/yaml": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.0.tgz",
+      "integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      }
+    },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..3b3029a
--- /dev/null
+++ b/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "patchmon",
+  "version": "1.0.0",
+  "description": "Linux Patch Monitoring System",
+  "private": true,
+  "workspaces": [
+    "backend",
+    "frontend"
+  ],
+  "scripts": {
+    "install:all": "npm install && npm run install:backend && npm run install:frontend",
+    "install:backend": "cd backend && npm install",
+    "install:frontend": "cd frontend && npm install",
+    "dev:backend": "cd backend && npm run dev",
+    "dev:frontend": "cd frontend && npm run dev",
+    "dev": "concurrently \"npm run dev:backend\" \"npm run dev:frontend\"",
+    "build:backend": "cd backend && npm run build",
+    "build:frontend": "cd frontend && npm run build",
+    "build": "npm run build:backend && npm run build:frontend"
+  },
+  "devDependencies": {
+    "concurrently": "^8.2.2"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+} 
\ No newline at end of file
diff --git a/setup-admin-user.js b/setup-admin-user.js
new file mode 100644
index 0000000..d4b73ff
--- /dev/null
+++ b/setup-admin-user.js
@@ -0,0 +1,108 @@
+const { PrismaClient } = require('@prisma/client');
+const bcrypt = require('bcryptjs');
+const readline = require('readline');
+
+const prisma = new PrismaClient();
+
+const rl = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout
+});
+
+const question = (query) => new Promise((resolve) => rl.question(query, resolve));
+
+async function setupAdminUser() {
+  try {
+    console.log('🔐 Setting up PatchMon Admin User');
+    console.log('=====================================\n');
+
+    // Check if any users exist
+    const existingUsers = await prisma.user.count();
+    if (existingUsers > 0) {
+      console.log('⚠️  Users already exist in the database.');
+      const overwrite = await question('Do you want to create another admin user? (y/N): ');
+      if (overwrite.toLowerCase() !== 'y' && overwrite.toLowerCase() !== 'yes') {
+        console.log('❌ Setup cancelled.');
+        return;
+      }
+    }
+
+    // Get user input
+    const username = await question('Enter admin username: ');
+    if (!username.trim()) {
+      console.log('❌ Username is required.');
+      return;
+    }
+
+    const email = await question('Enter admin email: ');
+    if (!email.trim()) {
+      console.log('❌ Email is required.');
+      return;
+    }
+
+    const password = await question('Enter admin password (min 6 characters): ');
+    if (password.length < 6) {
+      console.log('❌ Password must be at least 6 characters.');
+      return;
+    }
+
+    // Check if username or email already exists
+    const existingUser = await prisma.user.findFirst({
+      where: {
+        OR: [
+          { username: username.trim() },
+          { email: email.trim() }
+        ]
+      }
+    });
+
+    if (existingUser) {
+      console.log('❌ Username or email already exists.');
+      return;
+    }
+
+    // Hash password
+    console.log('\n🔄 Creating admin user...');
+    const passwordHash = await bcrypt.hash(password, 12);
+
+    // Create admin user
+    const user = await prisma.user.create({
+      data: {
+        username: username.trim(),
+        email: email.trim(),
+        passwordHash,
+        role: 'admin',
+        isActive: true
+      },
+      select: {
+        id: true,
+        username: true,
+        email: true,
+        role: true,
+        createdAt: true
+      }
+    });
+
+    console.log('✅ Admin user created successfully!');
+    console.log('\n📋 User Details:');
+    console.log(`   Username: ${user.username}`);
+    console.log(`   Email: ${user.email}`);
+    console.log(`   Role: ${user.role}`);
+    console.log(`   Created: ${user.createdAt.toISOString()}`);
+
+    console.log('\n🎉 Setup complete!');
+    console.log('\nNext steps:');
+    console.log('1. Start the backend server: cd backend && npm start');
+    console.log('2. Start the frontend: cd frontend && npm run dev');
+    console.log('3. Visit http://localhost:3000 and login with your credentials');
+
+  } catch (error) {
+    console.error('❌ Error setting up admin user:', error);
+  } finally {
+    rl.close();
+    await prisma.$disconnect();
+  }
+}
+
+// Run the setup
+setupAdminUser();