# RR SHOP 01 NOV 2025 - REPOSITORY
================================================================================

Project Name: RR shop 01 Nov 2025
Created: 2025-11-01 02:11:04
Last Updated: 2025-11-01 02:11:14
Source ZIP: public_html_shop.zip
Total Files: 33
Total Folders: 5

================================================================================
## FILE STRUCTURE
================================================================================

RR shop 01 Nov 2025/
├── README.md
├── affiliate_edit.php
├── affiliate_view.php
├── assets/
│   ├── css/
│   │   ├── dashboard.css
│   │   ├── main.css
│   │   └── responsive.css
│   ├── images/
│   │   └── logo.svg
│   └── js/
│       ├── dashboard.js
│       └── main.js
├── config.php
├── database_schema.sql
├── demand.php
├── error-404.html
├── error-500.html
├── finance.php
├── generate_hash.php
├── includes/
│   ├── footer.php
│   ├── header.php
│   └── navigation.php
├── index.php
├── login.php
├── logout.php
├── maintenance.html
├── member_edit.php
├── member_view.php
├── members.php
├── panel.php
├── robots.txt
├── settings.php
├── sitemap.xml
├── supply.php
├── support.php
└── users.php

================================================================================
## FILE CONTENTS
================================================================================

### FILE 1: affiliate_edit.php
- Type: PHP
- Size: 9.8 KB
- Path: .
- Name: affiliate_edit.php
------------------------------------------------------------
<?php
require_once 'config.php';
requireLogin();

$affiliate_id = intval($_GET['id'] ?? 0);
if (!$affiliate_id) {
    header('Location: supply.php');
    exit;
}

$page_title = 'Edit Affiliate';
$page_description = 'Edit affiliate information';

$success = '';
$error = '';

// Handle form submission
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
    if ($_POST['action'] === 'update_affiliate') {
        $type = $_POST['type'] ?? '';
        $company_name = trim($_POST['company_name'] ?? '');
        $incharge_name = trim($_POST['incharge_name'] ?? '');
        $state = $_POST['state'] ?? '';
        $postal_code = trim($_POST['postal_code'] ?? '');
        $place_name = trim($_POST['place_name'] ?? '');
        $mobile = trim($_POST['mobile'] ?? '');
        $email = trim($_POST['email'] ?? '');
        $url = trim($_POST['url'] ?? '');
        $signup_reward = floatval($_POST['signup_reward'] ?? 0);
        $status = $_POST['status'] ?? 'active';
        
        // Validation
        if (empty($type) || empty($company_name) || empty($incharge_name) || empty($state) || 
            empty($postal_code) || empty($place_name) || empty($mobile) || empty($email)) {
            $error = 'All required fields must be filled';
        } elseif (!preg_match('/^\d{6}$/', $postal_code)) {
            $error = 'Postal code must be exactly 6 digits';
        } elseif (!preg_match('/^\d{10}$/', $mobile)) {
            $error = 'Mobile number must be exactly 10 digits';
        } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
            $error = 'Invalid email address';
        } else {
            try {
                $pdo = getDBConnection();
                
                $stmt = $pdo->prepare("
                    UPDATE affiliates 
                    SET type = ?, company_name = ?, incharge_name = ?, state = ?, 
                        postal_code = ?, place_name = ?, mobile = ?, email = ?, 
                        url = ?, signup_reward = ?, status = ?, updated_at = NOW()
                    WHERE id = ?
                ");
                
                $stmt->execute([
                    $type, $company_name, $incharge_name, $state, $postal_code,
                    $place_name, $mobile, $email, $url, $signup_reward, $status, $affiliate_id
                ]);
                
                logActivity($_SESSION['admin_id'], 'update_affiliate', "Updated affiliate #$affiliate_id", 'affiliate', $affiliate_id);
                
                $success = 'Affiliate updated successfully!';
            } catch (Exception $e) {
                $error = 'An error occurred. Please try again.';
                error_log("Update affiliate error: " . $e->getMessage());
            }
        }
    }
}

// Fetch affiliate details
try {
    $pdo = getDBConnection();
    $stmt = $pdo->prepare("SELECT * FROM affiliates WHERE id = ?");
    $stmt->execute([$affiliate_id]);
    $affiliate = $stmt->fetch();
    
    if (!$affiliate) {
        header('Location: supply.php');
        exit;
    }
} catch (Exception $e) {
    error_log("Fetch affiliate error: " . $e->getMessage());
    header('Location: supply.php');
    exit;
}

$indian_states = [
    'Andhra Pradesh', 'Arunachal Pradesh', 'Assam', 'Bihar', 'Chhattisgarh', 'Goa', 'Gujarat',
    'Haryana', 'Himachal Pradesh', 'Jharkhand', 'Karnataka', 'Kerala', 'Madhya Pradesh',
    'Maharashtra', 'Manipur', 'Meghalaya', 'Mizoram', 'Nagaland', 'Odisha', 'Punjab',
    'Rajasthan', 'Sikkim', 'Tamil Nadu', 'Telangana', 'Tripura', 'Uttar Pradesh',
    'Uttarakhand', 'West Bengal', 'Andaman and Nicobar Islands', 'Chandigarh',
    'Dadra and Nagar Haveli and Daman and Diu', 'Delhi', 'Jammu and Kashmir', 'Ladakh',
    'Lakshadweep', 'Puducherry'
];

include 'includes/header.php';
?>

<div class="page-container">
    <div class="page-header">
        <div>
            <h1>Edit Affiliate</h1>
            <p class="page-subtitle">Update affiliate information for <?php echo htmlspecialchars($affiliate['affiliate_code']); ?></p>
        </div>
        <div class="header-actions">
            <a href="affiliate_view.php?id=<?php echo $affiliate_id; ?>" class="btn btn-secondary">
                <span>👁️</span> View Details
            </a>
            <a href="supply.php" class="btn btn-secondary">
                <span>←</span> Back to List
            </a>
        </div>
    </div>

    <?php if ($success): ?>
        <div class="success-message">
            <span class="message-icon">✅</span>
            <?php echo htmlspecialchars($success); ?>
        </div>
    <?php endif; ?>
    
    <?php if ($error): ?>
        <div class="error-message">
            <span class="message-icon">⚠️</span>
            <?php echo htmlspecialchars($error); ?>
        </div>
    <?php endif; ?>

    <div style="background: white; padding: 32px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
        <form method="POST">
            <input type="hidden" name="action" value="update_affiliate">
            
            <div class="form-row">
                <div class="form-group">
                    <label for="type">Type of Affiliate *</label>
                    <select id="type" name="type" required>
                        <option value="individual" <?php echo $affiliate['type'] === 'individual' ? 'selected' : ''; ?>>Individual</option>
                        <option value="company" <?php echo $affiliate['type'] === 'company' ? 'selected' : ''; ?>>Company</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="company_name">Name of Affiliate *</label>
                    <input type="text" id="company_name" name="company_name" required 
                           value="<?php echo htmlspecialchars($affiliate['company_name']); ?>">
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="incharge_name">Name of In-charge *</label>
                    <input type="text" id="incharge_name" name="incharge_name" required 
                           value="<?php echo htmlspecialchars($affiliate['incharge_name']); ?>">
                </div>
                
                <div class="form-group">
                    <label for="state">State *</label>
                    <select id="state" name="state" required>
                        <?php foreach ($indian_states as $state): ?>
                            <option value="<?php echo $state; ?>" <?php echo $affiliate['state'] === $state ? 'selected' : ''; ?>>
                                <?php echo $state; ?>
                            </option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="postal_code">Postal Code *</label>
                    <input type="text" id="postal_code" name="postal_code" required 
                           pattern="\d{6}" maxlength="6" 
                           value="<?php echo htmlspecialchars($affiliate['postal_code']); ?>">
                </div>
                
                <div class="form-group">
                    <label for="place_name">Place Name *</label>
                    <input type="text" id="place_name" name="place_name" required 
                           value="<?php echo htmlspecialchars($affiliate['place_name']); ?>">
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="mobile">Mobile Number *</label>
                    <input type="text" id="mobile" name="mobile" required 
                           pattern="\d{10}" maxlength="10" 
                           value="<?php echo htmlspecialchars($affiliate['mobile']); ?>">
                </div>
                
                <div class="form-group">
                    <label for="email">Email Address *</label>
                    <input type="email" id="email" name="email" required 
                           value="<?php echo htmlspecialchars($affiliate['email']); ?>">
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="url">Website/Channel URL</label>
                    <input type="text" id="url" name="url" 
                           value="<?php echo htmlspecialchars($affiliate['url']); ?>">
                </div>
                
                <div class="form-group">
                    <label for="signup_reward">Signup Reward (₹) *</label>
                    <input type="number" id="signup_reward" name="signup_reward" required 
                           min="0" step="0.01" 
                           value="<?php echo htmlspecialchars($affiliate['signup_reward']); ?>">
                </div>
            </div>
            
            <div class="form-group">
                <label for="status">Status *</label>
                <select id="status" name="status" required>
                    <option value="active" <?php echo $affiliate['status'] === 'active' ? 'selected' : ''; ?>>Active</option>
                    <option value="inactive" <?php echo $affiliate['status'] === 'inactive' ? 'selected' : ''; ?>>Inactive</option>
                    <option value="suspended" <?php echo $affiliate['status'] === 'suspended' ? 'selected' : ''; ?>>Suspended</option>
                </select>
            </div>
            
            <div class="form-actions" style="margin-top: 24px;">
                <button type="submit" class="btn btn-primary">
                    <span>💾</span> Update Affiliate
                </button>
            </div>
        </form>
    </div>
</div>

<?php include 'includes/footer.php'; ?>
-------------------- END OF FILE --------------------

### FILE 2: affiliate_view.php
- Type: PHP
- Size: 13.22 KB
- Path: .
- Name: affiliate_view.php
------------------------------------------------------------
<?php
require_once 'config.php';
requireLogin();

$affiliate_id = intval($_GET['id'] ?? 0);
if (!$affiliate_id) {
    header('Location: supply.php');
    exit;
}

$page_title = 'Affiliate Details';
$page_description = 'View affiliate information and signup tracking';

try {
    $pdo = getDBConnection();
    
    // Fetch affiliate details
    $stmt = $pdo->prepare("SELECT * FROM affiliates WHERE id = ?");
    $stmt->execute([$affiliate_id]);
    $affiliate = $stmt->fetch();
    
    if (!$affiliate) {
        header('Location: supply.php');
        exit;
    }
    
    // Fetch attachments
    $attachStmt = $pdo->prepare("SELECT * FROM affiliate_attachments WHERE affiliate_id = ?");
    $attachStmt->execute([$affiliate_id]);
    $attachments = $attachStmt->fetchAll();
    
    // Fetch signups
    $signupsStmt = $pdo->prepare("
        SELECT * FROM affiliate_signups 
        WHERE affiliate_id = ? 
        ORDER BY clicked_at DESC
        LIMIT 100
    ");
    $signupsStmt->execute([$affiliate_id]);
    $signups = $signupsStmt->fetchAll();
    
} catch (Exception $e) {
    error_log("View affiliate error: " . $e->getMessage());
    header('Location: supply.php');
    exit;
}

$signup_url = 'https://relevantreflex.com/signup.php?ref=' . $affiliate['affiliate_code'];

include 'includes/header.php';
?>

<style>
.detail-card {
    background: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin-bottom: 24px;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
}

.detail-item {
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
}

.detail-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.detail-value {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.signup-link-box {
    background: #f0f9ff;
    border: 2px solid #0066cc;
    padding: 16px;
    border-radius: 8px;
    margin: 16px 0;
}

.signup-link-box input {
    width: 100%;
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-family: monospace;
    font-size: 14px;
    margin-top: 8px;
}

.attachment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 8px;
}

.signups-table {
    width: 100%;
    background: white;
    border-radius: 12px;
    overflow-x: auto;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.signups-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.signups-table thead {
    background: #f9fafb;
}

.signups-table th {
    padding: 12px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    border-bottom: 2px solid #e5e7eb;
}

.signups-table td {
    padding: 12px;
    font-size: 14px;
    border-bottom: 1px solid #f3f4f6;
}

.signups-table tbody tr:hover {
    background: #f9fafb;
}
</style>

<div class="page-container">
    <div class="page-header">
        <div>
            <h1>Affiliate Details</h1>
            <p class="page-subtitle">Complete information for <?php echo htmlspecialchars($affiliate['company_name']); ?></p>
        </div>
        <div class="header-actions">
            <a href="affiliate_edit.php?id=<?php echo $affiliate_id; ?>" class="btn btn-primary">
                <span>✏️</span> Edit Affiliate
            </a>
            <a href="supply.php" class="btn btn-secondary">
                <span>←</span> Back to List
            </a>
        </div>
    </div>

    <!-- Affiliate Code & Link -->
    <div class="detail-card">
        <h2 style="margin-bottom: 16px;">Affiliate Code & Signup Link</h2>
        <div style="font-family: monospace; font-size: 24px; font-weight: 700; color: #0066cc; margin-bottom: 16px;">
            <?php echo htmlspecialchars($affiliate['affiliate_code']); ?>
        </div>
        
        <div class="signup-link-box">
            <strong>Signup URL:</strong>
            <input type="text" value="<?php echo htmlspecialchars($signup_url); ?>" readonly onclick="this.select()">
            <button class="btn btn-secondary" style="margin-top: 12px;" onclick="copyToClipboard('<?php echo $signup_url; ?>')">
                📋 Copy Link
            </button>
        </div>
    </div>

    <!-- Basic Information -->
    <div class="detail-card">
        <h2 style="margin-bottom: 20px;">Basic Information</h2>
        <div class="detail-grid">
            <div class="detail-item">
                <div class="detail-label">Type</div>
                <div class="detail-value"><?php echo ucfirst($affiliate['type']); ?></div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Company Name</div>
                <div class="detail-value"><?php echo htmlspecialchars($affiliate['company_name']); ?></div>
            </div>
            <div class="detail-item">
                <div class="detail-label">In-charge Name</div>
                <div class="detail-value"><?php echo htmlspecialchars($affiliate['incharge_name']); ?></div>
            </div>
            <div class="detail-item">
                <div class="detail-label">State</div>
                <div class="detail-value"><?php echo htmlspecialchars($affiliate['state']); ?></div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Location</div>
                <div class="detail-value">
                    <?php echo htmlspecialchars($affiliate['place_name']); ?><br>
                    <small style="color: #6b7280;">PIN: <?php echo $affiliate['postal_code']; ?></small>
                </div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Mobile</div>
                <div class="detail-value"><?php echo htmlspecialchars($affiliate['mobile']); ?></div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Email</div>
                <div class="detail-value" style="word-break: break-all;">
                    <?php echo htmlspecialchars($affiliate['email']); ?>
                </div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Website/URL</div>
                <div class="detail-value" style="word-break: break-all;">
                    <?php echo $affiliate['url'] ? htmlspecialchars($affiliate['url']) : 'N/A'; ?>
                </div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Signup Reward</div>
                <div class="detail-value" style="color: #059669;">
                    ₹<?php echo number_format($affiliate['signup_reward'], 2); ?>
                </div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Status</div>
                <div class="detail-value">
                    <span class="badge badge-<?php echo strtolower($affiliate['status']); ?>">
                        <?php echo ucfirst($affiliate['status']); ?>
                    </span>
                </div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Created</div>
                <div class="detail-value"><?php echo date('M j, Y', strtotime($affiliate['created_at'])); ?></div>
            </div>
        </div>
    </div>

    <!-- Statistics -->
    <div class="detail-card">
        <h2 style="margin-bottom: 20px;">Performance Statistics</h2>
        <div style="display: flex; gap: 32px; flex-wrap: wrap;">
            <div>
                <div class="detail-label">Total Signups</div>
                <div style="font-size: 32px; font-weight: 700; color: #0066cc;">
                    <?php echo $affiliate['total_signups']; ?>
                </div>
            </div>
            <div>
                <div class="detail-label">Verified Signups</div>
                <div style="font-size: 32px; font-weight: 700; color: #059669;">
                    <?php echo $affiliate['total_verified_signups']; ?>
                </div>
            </div>
            <div>
                <div class="detail-label">Total Rewards Paid</div>
                <div style="font-size: 32px; font-weight: 700; color: #ea580c;">
                    ₹<?php echo number_format($affiliate['total_rewards_paid'], 2); ?>
                </div>
            </div>
            <div>
                <div class="detail-label">Conversion Rate</div>
                <div style="font-size: 32px; font-weight: 700; color: #7c3aed;">
                    <?php 
                    $conversion = $affiliate['total_signups'] > 0 
                        ? ($affiliate['total_verified_signups'] / $affiliate['total_signups'] * 100) 
                        : 0;
                    echo number_format($conversion, 1); 
                    ?>%
                </div>
            </div>
        </div>
    </div>

    <!-- Attachments -->
    <?php if (!empty($attachments)): ?>
    <div class="detail-card">
        <h2 style="margin-bottom: 16px;">Attachments (<?php echo count($attachments); ?>)</h2>
        <?php foreach ($attachments as $attachment): ?>
        <div class="attachment-item">
            <div>
                <strong><?php echo htmlspecialchars($attachment['file_name']); ?></strong>
                <br>
                <small style="color: #6b7280;">
                    <?php echo number_format($attachment['file_size'] / 1024, 2); ?> KB • 
                    Uploaded on <?php echo date('M j, Y', strtotime($attachment['uploaded_at'])); ?>
                </small>
            </div>
            <a href="<?php echo htmlspecialchars($attachment['file_path']); ?>" 
               class="btn btn-secondary" target="_blank" download>
                📥 Download
            </a>
        </div>
        <?php endforeach; ?>
    </div>
    <?php endif; ?>

    <!-- Recent Signups -->
    <div class="detail-card">
        <h2 style="margin-bottom: 16px;">Recent Signups (Last 100)</h2>
        <?php if (empty($signups)): ?>
            <p style="text-align: center; color: #9ca3af; padding: 40px;">No signups yet</p>
        <?php else: ?>
        <div class="signups-table">
            <table>
                <thead>
                    <tr>
                        <th>Email</th>
                        <th>Clicked At</th>
                        <th>Signed Up</th>
                        <th>Verified</th>
                        <th>Reward</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($signups as $signup): ?>
                    <tr>
                        <td><?php echo $signup['email'] ? htmlspecialchars($signup['email']) : '<em>Not completed</em>'; ?></td>
                        <td><?php echo date('M j, Y g:i A', strtotime($signup['clicked_at'])); ?></td>
                        <td>
                            <?php if ($signup['signup_completed']): ?>
                                ✅ <?php echo date('M j, Y', strtotime($signup['signed_up_at'])); ?>
                            <?php else: ?>
                                <span style="color: #9ca3af;">Pending</span>
                            <?php endif; ?>
                        </td>
                        <td>
                            <?php if ($signup['email_verified']): ?>
                                ✅ <?php echo date('M j, Y', strtotime($signup['verified_at'])); ?>
                            <?php else: ?>
                                <span style="color: #9ca3af;">Not verified</span>
                            <?php endif; ?>
                        </td>
                        <td>
                            <?php if ($signup['reward_paid']): ?>
                                <span style="color: #059669; font-weight: 600;">
                                    ₹<?php echo number_format($signup['reward_amount'], 2); ?>
                                </span>
                            <?php else: ?>
                                <span style="color: #9ca3af;">Pending</span>
                            <?php endif; ?>
                        </td>
                        <td>
                            <?php if ($signup['email_verified']): ?>
                                <span class="badge badge-active">Complete</span>
                            <?php elseif ($signup['signup_completed']): ?>
                                <span class="badge" style="background: #fff3cd; color: #856404;">Awaiting Verification</span>
                            <?php else: ?>
                                <span class="badge badge-inactive">Clicked Only</span>
                            <?php endif; ?>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
        <?php endif; ?>
    </div>
</div>

<script>
function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(function() {
        alert('Affiliate link copied to clipboard!');
    }).catch(function(err) {
        console.error('Could not copy text: ', err);
    });
}
</script>

<?php include 'includes/footer.php'; ?>
-------------------- END OF FILE --------------------

### FILE 3: config.php
- Type: PHP
- Size: 3.88 KB
- Path: .
- Name: config.php
------------------------------------------------------------
<?php
// Database configuration for Admin Panel (rrshop)
define('DB_HOST', 'localhost');
define('DB_USER', 'u752449863_rradmin');
define('DB_PASS', 'S@n@h2016');
define('DB_NAME', 'u752449863_rrshop');

// Database configuration for Customer Portal (rrpanel)
define('PANEL_DB_USER', 'u752449863_rrpaneladmin');  // DIFFERENT USER!
define('PANEL_DB_NAME', 'u752449863_rrpanel');

// Site configuration
define('SITE_NAME', 'Relevant Reflex');
define('SITE_URL', 'https://relevantreflex.shop');
define('SITE_DESCRIPTION', 'Professional Panel Management System');

// Start session if not already started
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

// Timezone setting
date_default_timezone_set('Asia/Kolkata');

// Error reporting (disable in production)
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

// Create connection for Admin Database
function getDBConnection() {
    try {
        $pdo = new PDO(
            "mysql:host=" . DB_HOST . ";dbname=" . DB_NAME . ";charset=utf8mb4",
            DB_USER,
            DB_PASS,
            [
                PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
                PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
                PDO::ATTR_EMULATE_PREPARES => false,
            ]
        );
        return $pdo;
    } catch (PDOException $e) {
        error_log("Connection failed: " . $e->getMessage());
        die("Database connection failed. Please try again later.");
    }
}

// Create connection for Panel Database (Customer Portal)
function getPanelDBConnection() {
    try {
        $pdo = new PDO(
            "mysql:host=" . DB_HOST . ";dbname=" . PANEL_DB_NAME . ";charset=utf8mb4",
            PANEL_DB_USER,  // Use the panel-specific user
            DB_PASS,         // Assuming same password
            [
                PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
                PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
                PDO::ATTR_EMULATE_PREPARES => false,
            ]
        );
        return $pdo;
    } catch (PDOException $e) {
        error_log("Panel DB Connection failed: " . $e->getMessage());
        die("Panel database connection failed. Please try again later.");
    }
}

// Helper function to check if user is logged in
function isLoggedIn() {
    return isset($_SESSION['admin_id']) && isset($_SESSION['admin_role']);
}

// Helper function to check if user is admin
function isAdmin() {
    return isset($_SESSION['admin_role']) && $_SESSION['admin_role'] === 'admin';
}

// Helper function to check if user can access page
function canAccessPage($page) {
    if (!isLoggedIn()) {
        return false;
    }
    
    // Admin can access everything
    if (isAdmin()) {
        return true;
    }
    
    // Manager cannot access users page
    if ($page === 'users' && $_SESSION['admin_role'] === 'manager') {
        return false;
    }
    
    return true;
}

// Helper function to redirect if not authorized
function requireLogin() {
    if (!isLoggedIn()) {
        header('Location: index.php');
        exit;
    }
}

// Helper function to require admin role
function requireAdmin() {
    requireLogin();
    if (!isAdmin()) {
        header('Location: index.php');
        exit;
    }
}

// Helper function to log admin activity
function logActivity($admin_id, $action, $description, $resource_type = null, $resource_id = null) {
    try {
        $pdo = getDBConnection();
        $stmt = $pdo->prepare("
            INSERT INTO admin_activity_log (admin_id, action, resource_type, resource_id, description, ip_address)
            VALUES (?, ?, ?, ?, ?, ?)
        ");
        $stmt->execute([
            $admin_id,
            $action,
            $resource_type,
            $resource_id,
            $description,
            $_SERVER['REMOTE_ADDR'] ?? null
        ]);
    } catch (Exception $e) {
        error_log("Activity log error: " . $e->getMessage());
    }
}
?>
-------------------- END OF FILE --------------------

### FILE 4: database_schema.sql
- Type: SQL
- Size: 21.6 KB
- Path: .
- Name: database_schema.sql
------------------------------------------------------------
-- Relevant Reflex Panel Management System Database Schema
-- Create this database structure in phpMyAdmin
-- Make sure to update the database credentials in config.php

-- Create database (run this first if database doesn't exist)
-- CREATE DATABASE relevant_reflex_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
-- USE relevant_reflex_db;

-- --------------------------------------------------------
-- Table structure for table `users`
-- --------------------------------------------------------

CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(50) NOT NULL,
  `email` varchar(255) NOT NULL,
  `password_hash` varchar(255) NOT NULL,
  `first_name` varchar(100) NOT NULL,
  `last_name` varchar(100) NOT NULL,
  `role` enum('admin','manager','user') NOT NULL DEFAULT 'user',
  `status` enum('active','inactive','suspended') NOT NULL DEFAULT 'active',
  `phone` varchar(20) DEFAULT NULL,
  `avatar` varchar(255) DEFAULT NULL,
  `last_login` timestamp NULL DEFAULT NULL,
  `login_count` int(11) DEFAULT 0,
  `email_verified` tinyint(1) DEFAULT 0,
  `two_factor_enabled` tinyint(1) DEFAULT 0,
  `created_at` timestamp DEFAULT CURRENT_TIMESTAMP,
  `updated_at` timestamp DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  UNIQUE KEY `username` (`username`),
  UNIQUE KEY `email` (`email`),
  KEY `idx_role` (`role`),
  KEY `idx_status` (`status`),
  KEY `idx_created_at` (`created_at`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------
-- Table structure for table `panels`
-- --------------------------------------------------------

CREATE TABLE `panels` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `description` text,
  `type` enum('survey','feedback','research','evaluation') DEFAULT 'survey',
  `status` enum('draft','active','paused','completed','archived') DEFAULT 'draft',
  `created_by` int(11) NOT NULL,
  `target_responses` int(11) DEFAULT 100,
  `current_responses` int(11) DEFAULT 0,
  `completion_rate` decimal(5,2) DEFAULT 0.00,
  `start_date` date DEFAULT NULL,
  `end_date` date DEFAULT NULL,
  `settings` json DEFAULT NULL,
  `created_at` timestamp DEFAULT CURRENT_TIMESTAMP,
  `updated_at` timestamp DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  KEY `idx_created_by` (`created_by`),
  KEY `idx_status` (`status`),
  KEY `idx_type` (`type`),
  KEY `idx_end_date` (`end_date`),
  FOREIGN KEY (`created_by`) REFERENCES `users` (`id`) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------
-- Table structure for table `panel_responses`
-- --------------------------------------------------------

CREATE TABLE `panel_responses` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `panel_id` int(11) NOT NULL,
  `respondent_email` varchar(255) NOT NULL,
  `respondent_name` varchar(255) DEFAULT NULL,
  `response_data` json NOT NULL,
  `completion_time` int(11) DEFAULT NULL COMMENT 'Time in seconds',
  `ip_address` varchar(45) DEFAULT NULL,
  `user_agent` text DEFAULT NULL,
  `submitted_at` timestamp DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  KEY `idx_panel_id` (`panel_id`),
  KEY `idx_submitted_at` (`submitted_at`),
  KEY `idx_respondent_email` (`respondent_email`),
  FOREIGN KEY (`panel_id`) REFERENCES `panels` (`id`) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------
-- Table structure for table `supplies`
-- --------------------------------------------------------

CREATE TABLE `supplies` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `item_name` varchar(255) NOT NULL,
  `description` text DEFAULT NULL,
  `category` varchar(100) DEFAULT NULL,
  `quantity` int(11) NOT NULL DEFAULT 1,
  `unit_cost` decimal(10,2) NOT NULL DEFAULT 0.00,
  `total_cost` decimal(12,2) GENERATED ALWAYS AS (`quantity` * `unit_cost`) STORED,
  `supplier` varchar(255) DEFAULT NULL,
  `supplier_contact` varchar(255) DEFAULT NULL,
  `status` enum('ordered','pending','received','cancelled','returned') DEFAULT 'pending',
  `order_date` date DEFAULT NULL,
  `expected_delivery` date DEFAULT NULL,
  `actual_delivery` date DEFAULT NULL,
  `notes` text DEFAULT NULL,
  `created_by` int(11) DEFAULT NULL,
  `created_at` timestamp DEFAULT CURRENT_TIMESTAMP,
  `updated_at` timestamp DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  KEY `idx_status` (`status`),
  KEY `idx_category` (`category`),
  KEY `idx_order_date` (`order_date`),
  KEY `idx_created_by` (`created_by`),
  FOREIGN KEY (`created_by`) REFERENCES `users` (`id`) ON DELETE SET NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------
-- Table structure for table `finances`
-- --------------------------------------------------------

CREATE TABLE `finances` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `transaction_type` enum('revenue','expense','refund','adjustment') NOT NULL,
  `amount` decimal(12,2) NOT NULL,
  `description` varchar(500) NOT NULL,
  `category` varchar(100) DEFAULT NULL,
  `reference_id` varchar(100) DEFAULT NULL COMMENT 'External reference (invoice, order, etc.)',
  `related_panel_id` int(11) DEFAULT NULL,
  `related_supply_id` int(11) DEFAULT NULL,
  `payment_method` varchar(50) DEFAULT NULL,
  `transaction_date` date NOT NULL,
  `due_date` date DEFAULT NULL,
  `paid_date` date DEFAULT NULL,
  `status` enum('pending','completed','cancelled','failed') DEFAULT 'completed',
  `notes` text DEFAULT NULL,
  `created_by` int(11) DEFAULT NULL,
  `created_at` timestamp DEFAULT CURRENT_TIMESTAMP,
  `updated_at` timestamp DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  KEY `idx_transaction_type` (`transaction_type`),
  KEY `idx_category` (`category`),
  KEY `idx_transaction_date` (`transaction_date`),
  KEY `idx_status` (`status`),
  KEY `idx_related_panel` (`related_panel_id`),
  KEY `idx_related_supply` (`related_supply_id`),
  KEY `idx_created_by` (`created_by`),
  FOREIGN KEY (`related_panel_id`) REFERENCES `panels` (`id`) ON DELETE SET NULL,
  FOREIGN KEY (`related_supply_id`) REFERENCES `supplies` (`id`) ON DELETE SET NULL,
  FOREIGN KEY (`created_by`) REFERENCES `users` (`id`) ON DELETE SET NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------
-- Table structure for table `support_tickets`
-- --------------------------------------------------------

CREATE TABLE `support_tickets` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `ticket_number` varchar(20) NOT NULL,
  `user_id` int(11) DEFAULT NULL,
  `name` varchar(255) NOT NULL,
  `email` varchar(255) NOT NULL,
  `subject` varchar(500) NOT NULL,
  `message` text NOT NULL,
  `priority` enum('low','medium','high','critical') DEFAULT 'medium',
  `status` enum('open','in_progress','resolved','closed','reopened') DEFAULT 'open',
  `category` varchar(100) DEFAULT NULL,
  `assigned_to` int(11) DEFAULT NULL,
  `resolution` text DEFAULT NULL,
  `resolved_at` timestamp NULL DEFAULT NULL,
  `created_at` timestamp DEFAULT CURRENT_TIMESTAMP,
  `updated_at` timestamp DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  UNIQUE KEY `ticket_number` (`ticket_number`),
  KEY `idx_status` (`status`),
  KEY `idx_priority` (`priority`),
  KEY `idx_user_id` (`user_id`),
  KEY `idx_assigned_to` (`assigned_to`),
  KEY `idx_created_at` (`created_at`),
  FOREIGN KEY (`user_id`) REFERENCES `users` (`id`) ON DELETE SET NULL,
  FOREIGN KEY (`assigned_to`) REFERENCES `users` (`id`) ON DELETE SET NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------
-- Table structure for table `system_settings`
-- --------------------------------------------------------

CREATE TABLE `system_settings` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `setting_key` varchar(100) NOT NULL,
  `setting_value` text DEFAULT NULL,
  `setting_type` enum('string','integer','boolean','json','date') DEFAULT 'string',
  `description` varchar(500) DEFAULT NULL,
  `is_public` tinyint(1) DEFAULT 0,
  `created_at` timestamp DEFAULT CURRENT_TIMESTAMP,
  `updated_at` timestamp DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  UNIQUE KEY `setting_key` (`setting_key`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------
-- Table structure for table `activity_logs`
-- --------------------------------------------------------

CREATE TABLE `activity_logs` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `user_id` int(11) DEFAULT NULL,
  `action` varchar(100) NOT NULL,
  `resource_type` varchar(50) DEFAULT NULL COMMENT 'panel, user, supply, etc.',
  `resource_id` int(11) DEFAULT NULL,
  `description` varchar(500) NOT NULL,
  `metadata` json DEFAULT NULL,
  `ip_address` varchar(45) DEFAULT NULL,
  `user_agent` text DEFAULT NULL,
  `created_at` timestamp DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  KEY `idx_user_id` (`user_id`),
  KEY `idx_action` (`action`),
  KEY `idx_resource` (`resource_type`, `resource_id`),
  KEY `idx_created_at` (`created_at`),
  FOREIGN KEY (`user_id`) REFERENCES `users` (`id`) ON DELETE SET NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------
-- Table structure for table `demand_analytics`
-- --------------------------------------------------------

CREATE TABLE `demand_analytics` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `category` varchar(100) NOT NULL,
  `demand_level` enum('low','medium','high') NOT NULL,
  `growth_rate` decimal(5,2) DEFAULT NULL COMMENT 'Percentage growth',
  `market_score` int(11) DEFAULT NULL COMMENT '0-100 score',
  `forecast_accuracy` decimal(5,2) DEFAULT NULL,
  `recorded_date` date NOT NULL,
  `data_source` varchar(100) DEFAULT NULL,
  `metadata` json DEFAULT NULL,
  `created_at` timestamp DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  KEY `idx_category` (`category`),
  KEY `idx_recorded_date` (`recorded_date`),
  KEY `idx_demand_level` (`demand_level`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------
-- Table structure for table `notifications`
-- --------------------------------------------------------

CREATE TABLE `notifications` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `user_id` int(11) NOT NULL,
  `title` varchar(255) NOT NULL,
  `message` text NOT NULL,
  `type` enum('info','success','warning','error') DEFAULT 'info',
  `is_read` tinyint(1) DEFAULT 0,
  `action_url` varchar(500) DEFAULT NULL,
  `expires_at` timestamp NULL DEFAULT NULL,
  `created_at` timestamp DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  KEY `idx_user_id` (`user_id`),
  KEY `idx_is_read` (`is_read`),
  KEY `idx_created_at` (`created_at`),
  FOREIGN KEY (`user_id`) REFERENCES `users` (`id`) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------
-- Insert default system settings
-- --------------------------------------------------------

INSERT INTO `system_settings` (`setting_key`, `setting_value`, `setting_type`, `description`, `is_public`) VALUES
('site_name', 'Relevant Reflex', 'string', 'Site name displayed throughout the application', 1),
('timezone', 'America/New_York', 'string', 'Default system timezone', 0),
('currency', 'USD', 'string', 'Default currency for financial transactions', 0),
('date_format', 'M j, Y', 'string', 'Default date format', 0),
('pagination_limit', '20', 'integer', 'Default number of items per page', 0),
('email_notifications', '1', 'boolean', 'Enable email notifications system-wide', 0),
('sms_notifications', '0', 'boolean', 'Enable SMS notifications system-wide', 0),
('session_timeout', '1800', 'integer', 'Session timeout in seconds (30 minutes)', 0),
('max_file_upload', '5242880', 'integer', 'Maximum file upload size in bytes (5MB)', 0),
('maintenance_mode', '0', 'boolean', 'Enable maintenance mode', 0);

-- --------------------------------------------------------
-- Insert sample admin user (password: admin123)
-- --------------------------------------------------------

INSERT INTO `users` (`username`, `email`, `password_hash`, `first_name`, `last_name`, `role`, `status`, `email_verified`) VALUES
('admin', 'admin@relevantreflex.com', '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', 'System', 'Administrator', 'admin', 'active', 1);

-- --------------------------------------------------------
-- Insert sample data for demonstration
-- --------------------------------------------------------

-- Sample panels
INSERT INTO `panels` (`name`, `description`, `type`, `status`, `created_by`, `target_responses`, `current_responses`, `completion_rate`, `start_date`, `end_date`) VALUES
('Customer Satisfaction Q3 2025', 'Quarterly customer satisfaction survey to measure service quality and identify improvement areas.', 'survey', 'active', 1, 500, 245, 49.00, '2025-08-15', '2025-09-30'),
('Product Feedback Survey', 'Collecting feedback on our latest product features and user experience.', 'feedback', 'draft', 1, 300, 0, 0.00, NULL, '2025-10-15'),
('Market Research Panel Q2', 'Comprehensive market analysis for Q2 strategic planning and competitive positioning.', 'research', 'completed', 1, 1000, 1024, 102.40, '2025-07-20', '2025-08-31'),
('Employee Engagement Survey', 'Internal survey to measure employee satisfaction and engagement levels.', 'survey', 'active', 1, 150, 67, 44.67, '2025-08-28', '2025-09-15');

-- Sample supplies
INSERT INTO `supplies` (`item_name`, `description`, `category`, `quantity`, `unit_cost`, `supplier`, `status`, `order_date`, `expected_delivery`) VALUES
('Survey Tablets', 'iPad Air for field data collection', 'Equipment', 25, 299.99, 'TechCorp Solutions', 'received', '2025-08-15', '2025-08-25'),
('Data Collection Software License', 'Annual license for survey platform', 'Software', 50, 49.99, 'DataSoft Inc', 'received', '2025-08-20', '2025-08-22'),
('Mobile Hotspots', 'Portable internet connectivity devices', 'Equipment', 15, 89.99, 'ConnectTech Ltd', 'pending', '2025-09-01', '2025-09-10'),
('Office Supplies', 'General office supplies for Q3', 'Office', 100, 12.50, 'OfficeMax Pro', 'ordered', '2025-09-02', '2025-09-08'),
('Cloud Storage Subscription', 'Enterprise cloud storage solution', 'Software', 1, 199.99, 'CloudProvider Inc', 'received', '2025-07-01', '2025-07-01');

-- Sample financial transactions
INSERT INTO `finances` (`transaction_type`, `amount`, `description`, `category`, `transaction_date`, `status`) VALUES
('revenue', 2500.00, 'Panel completion payment - Technology Survey', 'Panel Revenue', '2025-09-03', 'completed'),
('expense', -450.00, 'Cloud hosting monthly subscription', 'Infrastructure', '2025-09-02', 'completed'),
('revenue', 1800.00, 'Market research project payment', 'Research Revenue', '2025-09-01', 'completed'),
('expense', -320.00, 'Software licenses renewal', 'Software', '2025-08-31', 'completed'),
('revenue', 3200.00, 'Enterprise client onboarding fee', 'New Business', '2025-08-30', 'completed'),
('expense', -125.00, 'Office supplies purchase', 'Office', '2025-08-29', 'completed'),
('revenue', 1500.00, 'Consultation services', 'Services', '2025-08-28', 'completed');

-- Sample support tickets
INSERT INTO `support_tickets` (`ticket_number`, `user_id`, `name`, `email`, `subject`, `message`, `priority`, `status`) VALUES
('TK-2025-001', 1, 'John Smith', 'john@example.com', 'Dashboard loading slowly', 'The dashboard takes too long to load, especially the charts section. This has been happening for the past few days.', 'medium', 'in_progress'),
('TK-2025-002', NULL, 'Sarah Johnson', 'sarah@external.com', 'Export function not working', 'When I try to export panel data to CSV, I get an error message. Please help resolve this issue.', 'high', 'resolved'),
('TK-2025-003', 1, 'Mike Davis', 'mike@contractor.com', 'User permissions question', 'I need clarification on user permission levels and how to assign different access rights to team members.', 'low', 'open');

-- Sample activity logs
INSERT INTO `activity_logs` (`user_id`, `action`, `resource_type`, `resource_id`, `description`, `ip_address`) VALUES
(1, 'login', NULL, NULL, 'User logged in successfully', '192.168.1.100'),
(1, 'create', 'panel', 1, 'Created new panel: Customer Satisfaction Q3 2025', '192.168.1.100'),
(1, 'update', 'user', 1, 'Updated user profile information', '192.168.1.100'),
(1, 'create', 'supply', 1, 'Added new supply item: Survey Tablets', '192.168.1.100');

-- Sample demand analytics
INSERT INTO `demand_analytics` (`category`, `demand_level`, `growth_rate`, `market_score`, `forecast_accuracy`, `recorded_date`) VALUES
('Technology Panels', 'high', 23.50, 92, 87.50, '2025-09-01'),
('Healthcare Surveys', 'medium', 12.30, 76, 82.10, '2025-09-01'),
('Financial Services', 'high', 18.70, 88, 85.30, '2025-09-01'),
('Retail Analytics', 'low', -5.20, 54, 78.90, '2025-09-01'),
('Education Research', 'medium', 8.40, 69, 80.20, '2025-09-01');

-- --------------------------------------------------------
-- Create indexes for better performance
-- --------------------------------------------------------

-- Additional composite indexes for common queries
ALTER TABLE `panel_responses` ADD INDEX `idx_panel_date` (`panel_id`, `submitted_at`);
ALTER TABLE `finances` ADD INDEX `idx_type_date` (`transaction_type`, `transaction_date`);
ALTER TABLE `activity_logs` ADD INDEX `idx_user_date` (`user_id`, `created_at`);
ALTER TABLE `supplies` ADD INDEX `idx_status_date` (`status`, `order_date`);

-- --------------------------------------------------------
-- Create views for common queries
-- --------------------------------------------------------

-- View for panel statistics
CREATE VIEW `panel_stats` AS
SELECT 
    p.id,
    p.name,
    p.status,
    p.target_responses,
    p.current_responses,
    p.completion_rate,
    COUNT(pr.id) as actual_responses,
    p.created_at,
    CONCAT(u.first_name, ' ', u.last_name) as created_by_name
FROM panels p
LEFT JOIN panel_responses pr ON p.id = pr.panel_id
LEFT JOIN users u ON p.created_by = u.id
GROUP BY p.id;

-- View for financial summary
CREATE VIEW `financial_summary` AS
SELECT 
    DATE_FORMAT(transaction_date, '%Y-%m') as month,
    SUM(CASE WHEN transaction_type = 'revenue' THEN amount ELSE 0 END) as total_revenue,
    SUM(CASE WHEN transaction_type = 'expense' THEN ABS(amount) ELSE 0 END) as total_expenses,
    SUM(CASE WHEN transaction_type = 'revenue' THEN amount ELSE -ABS(amount) END) as net_profit,
    COUNT(*) as total_transactions
FROM finances 
WHERE status = 'completed'
GROUP BY DATE_FORMAT(transaction_date, '%Y-%m')
ORDER BY month DESC;

-- View for user activity summary
CREATE VIEW `user_activity_summary` AS
SELECT 
    u.id,
    u.username,
    u.email,
    u.last_login,
    COUNT(al.id) as total_activities,
    MAX(al.created_at) as last_activity
FROM users u
LEFT JOIN activity_logs al ON u.id = al.user_id
GROUP BY u.id;

-- --------------------------------------------------------
-- Create stored procedures for common operations
-- --------------------------------------------------------

DELIMITER //

-- Procedure to update panel completion rate
CREATE PROCEDURE UpdatePanelStats(IN panel_id INT)
BEGIN
    UPDATE panels 
    SET 
        current_responses = (SELECT COUNT(*) FROM panel_responses WHERE panel_id = panel_id),
        completion_rate = (
            (SELECT COUNT(*) FROM panel_responses WHERE panel_id = panel_id) / target_responses * 100
        )
    WHERE id = panel_id;
END//

-- Procedure to log user activity
CREATE PROCEDURE LogActivity(
    IN user_id INT,
    IN action VARCHAR(100),
    IN resource_type VARCHAR(50),
    IN resource_id INT,
    IN description VARCHAR(500),
    IN ip_address VARCHAR(45)
)
BEGIN
    INSERT INTO activity_logs (user_id, action, resource_type, resource_id, description, ip_address)
    VALUES (user_id, action, resource_type, resource_id, description, ip_address);
END//

DELIMITER ;

-- --------------------------------------------------------
-- Create triggers for automatic updates
-- --------------------------------------------------------

DELIMITER //

-- Trigger to update panel stats when response is added
CREATE TRIGGER update_panel_stats_after_response
AFTER INSERT ON panel_responses
FOR EACH ROW
BEGIN
    CALL UpdatePanelStats(NEW.panel_id);
END//

-- Trigger to log user login
CREATE TRIGGER log_user_login
AFTER UPDATE ON users
FOR EACH ROW
BEGIN
    IF NEW.last_login != OLD.last_login THEN
        INSERT INTO activity_logs (user_id, action, description)
        VALUES (NEW.id, 'login', 'User logged in');
    END IF;
END//

DELIMITER ;

-- --------------------------------------------------------
-- Grant appropriate permissions (run as database administrator)
-- --------------------------------------------------------

-- Create application user with limited permissions
-- CREATE USER 'rr_app_user'@'localhost' IDENTIFIED BY 'secure_password_here';
-- GRANT SELECT, INSERT, UPDATE, DELETE ON relevant_reflex_db.* TO 'rr_app_user'@'localhost';
-- GRANT EXECUTE ON relevant_reflex_db.* TO 'rr_app_user'@'localhost';
-- FLUSH PRIVILEGES;

-- --------------------------------------------------------
-- Performance optimization queries
-- --------------------------------------------------------

-- Analyze table performance (run periodically)
-- ANALYZE TABLE users, panels, panel_responses, supplies, finances, support_tickets;

-- Optimize tables (run during maintenance)
-- OPTIMIZE TABLE users, panels, panel_responses, supplies, finances, support_tickets;

-- --------------------------------------------------------
-- End of schema
-- --------------------------------------------------------
-------------------- END OF FILE --------------------

### FILE 5: demand.php
- Type: PHP
- Size: 10.71 KB
- Path: .
- Name: demand.php
------------------------------------------------------------
<?php
require_once 'config.php';

$page_title = 'Demand Analysis';
$page_description = 'Analyze market demand patterns, trends and forecasting for strategic planning';

// Sample demand data - replace with database queries
$demand_metrics = [
    'current_demand' => 8.7,
    'growth_rate' => 15.3,
    'market_score' => 92,
    'forecast_accuracy' => 87.5
];

$demand_trends = [
    ['category' => 'Technology Panels', 'demand_level' => 'High', 'growth' => '+23%', 'priority' => 'High'],
    ['category' => 'Healthcare Surveys', 'demand_level' => 'Medium', 'growth' => '+12%', 'priority' => 'Medium'],
    ['category' => 'Financial Services', 'demand_level' => 'High', 'growth' => '+18%', 'priority' => 'High'],
    ['category' => 'Retail Analytics', 'demand_level' => 'Low', 'growth' => '-5%', 'priority' => 'Low'],
    ['category' => 'Education Research', 'demand_level' => 'Medium', 'growth' => '+8%', 'priority' => 'Medium']
];

$market_insights = [
    ['insight' => 'Technology sector showing strongest demand growth', 'impact' => 'High', 'action' => 'Expand tech panel offerings'],
    ['insight' => 'Q3 demand exceeded forecasts by 15%', 'impact' => 'Medium', 'action' => 'Adjust Q4 capacity planning'],
    ['insight' => 'Mobile panel participation up 34%', 'impact' => 'High', 'action' => 'Optimize mobile experience'],
    ['insight' => 'Weekend response rates declining', 'impact' => 'Low', 'action' => 'Review scheduling strategy']
];

include 'includes/header.php';
?>

<div class="page-container">
    <div class="page-header">
        <div>
            <h1>Demand Analysis</h1>
            <p class="page-subtitle">Market insights and demand forecasting for strategic decisions</p>
        </div>
        <div class="header-actions">
            <button class="btn btn-primary" id="generateReportBtn">
                <span>📊</span> Generate Report
            </button>
            <button class="btn btn-secondary" id="exportDataBtn">
                <span>📥</span> Export Data
            </button>
        </div>
    </div>

    <!-- Demand Metrics -->
    <div class="demand-metrics">
        <div class="metrics-grid">
            <div class="metric-card">
                <div class="metric-icon">📈</div>
                <div class="metric-content">
                    <div class="metric-value"><?php echo $demand_metrics['current_demand']; ?></div>
                    <div class="metric-label">Demand Index</div>
                    <div class="metric-change positive">+0.8 vs last month</div>
                </div>
            </div>
            
            <div class="metric-card">
                <div class="metric-icon">🚀</div>
                <div class="metric-content">
                    <div class="metric-value"><?php echo $demand_metrics['growth_rate']; ?>%</div>
                    <div class="metric-label">Growth Rate</div>
                    <div class="metric-change positive">+2.3% vs Q2</div>
                </div>
            </div>
            
            <div class="metric-card">
                <div class="metric-icon">🎯</div>
                <div class="metric-content">
                    <div class="metric-value"><?php echo $demand_metrics['market_score']; ?></div>
                    <div class="metric-label">Market Score</div>
                    <div class="metric-change positive">Excellent rating</div>
                </div>
            </div>
            
            <div class="metric-card">
                <div class="metric-icon">🔮</div>
                <div class="metric-content">
                    <div class="metric-value"><?php echo $demand_metrics['forecast_accuracy']; ?>%</div>
                    <div class="metric-label">Forecast Accuracy</div>
                    <div class="metric-change positive">+5.2% improvement</div>
                </div>
            </div>
        </div>
    </div>

    <div class="dashboard-content">
        <div class="content-grid">
            <!-- Demand Trends Chart -->
            <div class="chart-section">
                <div class="section-header">
                    <h2>Demand Trends</h2>
                    <div class="chart-controls">
                        <select id="trendPeriod" aria-label="Select time period">
                            <option value="7d">Last 7 days</option>
                            <option value="30d" selected>Last 30 days</option>
                            <option value="90d">Last 90 days</option>
                            <option value="1y">Last year</option>
                        </select>
                    </div>
                </div>
                <div class="chart-container">
                    <canvas id="demandChart" width="600" height="300"></canvas>
                </div>
                <div class="chart-legend">
                    <div class="legend-item">
                        <div class="legend-color" style="background: #0066cc;"></div>
                        <span>Current Demand</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color" style="background: #28a745;"></div>
                        <span>Forecast</span>
                    </div>
                </div>
            </div>
            
            <!-- Category Performance -->
            <div class="category-performance">
                <h2>Category Performance</h2>
                <div class="category-list">
                    <?php foreach ($demand_trends as $trend): ?>
                    <div class="category-item">
                        <div class="category-header">
                            <h4><?php echo htmlspecialchars($trend['category']); ?></h4>
                            <span class="priority-badge priority-<?php echo strtolower($trend['priority']); ?>">
                                <?php echo $trend['priority']; ?>
                            </span>
                        </div>
                        <div class="category-metrics">
                            <div class="category-demand">
                                <span class="demand-level demand-<?php echo strtolower($trend['demand_level']); ?>">
                                    <?php echo $trend['demand_level']; ?>
                                </span>
                            </div>
                            <div class="category-growth <?php echo substr($trend['growth'], 0, 1) === '+' ? 'positive' : 'negative'; ?>">
                                <?php echo $trend['growth']; ?>
                            </div>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
        
        <!-- Market Insights -->
        <div class="insights-section">
            <h2>Key Market Insights</h2>
            <div class="insights-container">
                <?php foreach ($market_insights as $index => $insight): ?>
                <div class="insight-card">
                    <div class="insight-header">
                        <div class="insight-number"><?php echo $index + 1; ?></div>
                        <div class="insight-impact impact-<?php echo strtolower($insight['impact']); ?>">
                            <?php echo $insight['impact']; ?> Impact
                        </div>
                    </div>
                    <div class="insight-content">
                        <h4><?php echo htmlspecialchars($insight['insight']); ?></h4>
                        <p class="recommended-action">
                            <strong>Recommended Action:</strong> <?php echo htmlspecialchars($insight['action']); ?>
                        </p>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize demand chart
    initializeDemandChart();
    
    // Generate report functionality
    document.getElementById('generateReportBtn')?.addEventListener('click', function() {
        this.classList.add('loading');
        this.innerHTML = '<span>⏳</span> Generating...';
        
        setTimeout(() => {
            this.classList.remove('loading');
            this.innerHTML = '<span>📊</span> Generate Report';
            window.showToast && window.showToast('Demand analysis report generated successfully!', 'success');
        }, 2000);
    });
    
    // Chart period change
    document.getElementById('trendPeriod')?.addEventListener('change', function() {
        initializeDemandChart();
    });
});

function initializeDemandChart() {
    const canvas = document.getElementById('demandChart');
    if (!canvas) return;
    
    const ctx = canvas.getContext('2d');
    
    // Sample demand data points
    const demandData = [6.2, 6.8, 7.1, 7.5, 8.2, 8.0, 8.5, 8.7, 9.1, 8.9, 8.7, 9.2];
    const forecastData = [8.9, 9.1, 9.4, 9.6, 9.8, 10.1];
    
    drawDemandChart(ctx, canvas.width, canvas.height, demandData, forecastData);
}

function drawDemandChart(ctx, width, height, demandData, forecastData) {
    ctx.clearRect(0, 0, width, height);
    
    const padding = 40;
    const chartWidth = width - 2 * padding;
    const chartHeight = height - 2 * padding;
    
    const allData = [...demandData, ...forecastData];
    const maxValue = Math.max(...allData);
    const minValue = Math.min(...allData);
    const range = maxValue - minValue;
    
    // Draw axes
    ctx.strokeStyle = '#e9ecef';
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(padding, padding);
    ctx.lineTo(padding, height - padding);
    ctx.lineTo(width - padding, height - padding);
    ctx.stroke();
    
    // Draw demand line
    ctx.strokeStyle = '#0066cc';
    ctx.lineWidth = 3;
    ctx.beginPath();
    
    demandData.forEach((value, index) => {
        const x = padding + (index / (demandData.length - 1)) * (chartWidth * 0.7);
        const y = height - padding - ((value - minValue) / range) * chartHeight;
        
        if (index === 0) {
            ctx.moveTo(x, y);
        } else {
            ctx.lineTo(x, y);
        }
    });
    ctx.stroke();
    
    // Draw forecast line (dashed)
    ctx.strokeStyle = '#28a745';
    ctx.setLineDash([5, 5]);
    ctx.beginPath();
    
    const startX = padding + ((demandData.length - 1) / (demandData.length - 1)) * (chartWidth * 0.7);
    const startY = height - padding - ((demandData[demandData.length - 1] - minValue) / range) * chartHeight;
    ctx.moveTo(startX, startY);
    
    forecastData.forEach((value, index) => {
        const x = startX + ((index + 1) / forecastData.length) * (chartWidth * 0.3);
        const y = height - padding - ((value - minValue) / range) * chartHeight;
        ctx.lineTo(x, y);
    });
    ctx.stroke();
    ctx.setLineDash([]);
}
</script>

<?php include 'includes/footer.php'; ?>
-------------------- END OF FILE --------------------

### FILE 6: error-404.html
- Type: HTML
- Size: 6.89 KB
- Path: .
- Name: error-404.html
------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Not Found - Relevant Reflex</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #333;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .error-container {
            background: white;
            border-radius: 20px;
            padding: 60px 40px;
            text-align: center;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            max-width: 500px;
            width: 100%;
        }

        .error-code {
            font-size: 120px;
            font-weight: bold;
            color: #0066cc;
            line-height: 1;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
        }

        .error-title {
            font-size: 28px;
            font-weight: 600;
            color: #333;
            margin-bottom: 15px;
        }

        .error-message {
            font-size: 16px;
            color: #666;
            line-height: 1.6;
            margin-bottom: 30px;
        }

        .error-actions {
            display: flex;
            gap: 15px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 24px;
            text-decoration: none;
            border-radius: 8px;
            font-weight: 500;
            transition: all 0.3s ease;
            font-size: 14px;
        }

        .btn-primary {
            background: #0066cc;
            color: white;
        }

        .btn-primary:hover {
            background: #0052a3;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,102,204,0.3);
        }

        .btn-secondary {
            background: #f8f9fa;
            color: #333;
            border: 1px solid #dee2e6;
        }

        .btn-secondary:hover {
            background: #e9ecef;
            transform: translateY(-1px);
        }

        .logo {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #0066cc, #004080);
            color: white;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 24px;
            margin: 0 auto 30px;
            box-shadow: 0 4px 15px rgba(0,102,204,0.3);
        }

        .help-links {
            margin-top: 40px;
            padding-top: 30px;
            border-top: 1px solid #eee;
        }

        .help-links h3 {
            font-size: 18px;
            color: #333;
            margin-bottom: 15px;
        }

        .help-links a {
            display: inline-block;
            color: #0066cc;
            text-decoration: none;
            margin: 0 15px;
            font-size: 14px;
            transition: color 0.3s ease;
        }

        .help-links a:hover {
            color: #0052a3;
            text-decoration: underline;
        }

        /* Mobile responsiveness */
        @media (max-width: 600px) {
            .error-container {
                padding: 40px 20px;
                margin: 20px;
            }

            .error-code {
                font-size: 80px;
            }

            .error-title {
                font-size: 24px;
            }

            .error-actions {
                flex-direction: column;
            }

            .btn {
                width: 100%;
                justify-content: center;
            }

            .help-links a {
                display: block;
                margin: 5px 0;
            }
        }

        /* Animation */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .error-container {
            animation: fadeIn 0.6s ease-out;
        }

        /* Floating background elements */
        .bg-shape {
            position: absolute;
            border-radius: 50%;
            background: rgba(255,255,255,0.1);
            animation: float 6s ease-in-out infinite;
        }

        .bg-shape:nth-child(1) {
            width: 80px;
            height: 80px;
            top: 10%;
            left: 10%;
            animation-delay: 0s;
        }

        .bg-shape:nth-child(2) {
            width: 60px;
            height: 60px;
            top: 20%;
            right: 10%;
            animation-delay: 2s;
        }

        .bg-shape:nth-child(3) {
            width: 100px;
            height: 100px;
            bottom: 10%;
            left: 15%;
            animation-delay: 4s;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
    </style>
</head>
<body>
    <!-- Background shapes -->
    <div class="bg-shape"></div>
    <div class="bg-shape"></div>
    <div class="bg-shape"></div>

    <div class="error-container">
        <div class="logo">RR</div>
        
        <div class="error-code">404</div>
        
        <h1 class="error-title">Page Not Found</h1>
        
        <p class="error-message">
            Sorry, the page you are looking for doesn't exist or has been moved. 
            Let's get you back on track with our panel management system.
        </p>
        
        <div class="error-actions">
            <a href="/" class="btn btn-primary">
                <span>🏠</span>
                Back to Dashboard
            </a>
            <a href="javascript:history.back()" class="btn btn-secondary">
                <span>⬅️</span>
                Go Back
            </a>
        </div>
        
        <div class="help-links">
            <h3>Need Help?</h3>
            <a href="/support.php">Contact Support</a>
            <a href="/users.php">User Management</a>
            <a href="/panel.php">Panel Management</a>
            <a href="/settings.php">System Settings</a>
        </div>
    </div>

    <script>
        // Auto redirect after 10 seconds (optional)
        // setTimeout(() => {
        //     window.location.href = '/';
        // }, 10000);

        // Log 404 error for analytics
        if (typeof gtag !== 'undefined') {
            gtag('event', 'page_not_found', {
                'page_title': '404 Error',
                'page_location': window.location.href
            });
        }
    </script>
</body>
</html>
-------------------- END OF FILE --------------------

### FILE 7: error-500.html
- Type: HTML
- Size: 8.78 KB
- Path: .
- Name: error-500.html
------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Server Error - Relevant Reflex</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
            color: #333;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .error-container {
            background: white;
            border-radius: 20px;
            padding: 60px 40px;
            text-align: center;
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
            max-width: 600px;
            width: 100%;
        }

        .error-code {
            font-size: 120px;
            font-weight: bold;
            color: #dc3545;
            line-height: 1;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
        }

        .error-title {
            font-size: 28px;
            font-weight: 600;
            color: #333;
            margin-bottom: 15px;
        }

        .error-message {
            font-size: 16px;
            color: #666;
            line-height: 1.6;
            margin-bottom: 30px;
        }

        .error-details {
            background: #f8f9fa;
            border-left: 4px solid #dc3545;
            padding: 20px;
            text-align: left;
            margin: 20px 0;
            border-radius: 8px;
        }

        .error-details h4 {
            color: #dc3545;
            margin-bottom: 10px;
            font-size: 16px;
        }

        .error-details ul {
            margin-left: 20px;
            color: #666;
        }

        .error-details li {
            margin-bottom: 8px;
        }

        .error-actions {
            display: flex;
            gap: 15px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 24px;
            text-decoration: none;
            border-radius: 8px;
            font-weight: 500;
            transition: all 0.3s ease;
            font-size: 14px;
        }

        .btn-primary {
            background: #0066cc;
            color: white;
        }

        .btn-primary:hover {
            background: #0052a3;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,102,204,0.3);
        }

        .btn-secondary {
            background: #f8f9fa;
            color: #333;
            border: 1px solid #dee2e6;
        }

        .btn-secondary:hover {
            background: #e9ecef;
            transform: translateY(-1px);
        }

        .btn-danger {
            background: #dc3545;
            color: white;
        }

        .btn-danger:hover {
            background: #c82333;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(220,53,69,0.3);
        }

        .logo {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #dc3545, #c82333);
            color: white;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 24px;
            margin: 0 auto 30px;
            box-shadow: 0 4px 15px rgba(220,53,69,0.3);
        }

        .support-info {
            margin-top: 40px;
            padding-top: 30px;
            border-top: 1px solid #eee;
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
        }

        .support-info h3 {
            font-size: 18px;
            color: #333;
            margin-bottom: 15px;
        }

        .support-info p {
            color: #666;
            margin-bottom: 15px;
            font-size: 14px;
        }

        .support-contact {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }

        .support-contact a {
            color: #0066cc;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .support-contact a:hover {
            color: #0052a3;
            text-decoration: underline;
        }

        /* Mobile responsiveness */
        @media (max-width: 600px) {
            .error-container {
                padding: 40px 20px;
                margin: 20px;
            }

            .error-code {
                font-size: 80px;
            }

            .error-title {
                font-size: 24px;
            }

            .error-actions {
                flex-direction: column;
            }

            .btn {
                width: 100%;
                justify-content: center;
            }

            .support-contact {
                flex-direction: column;
                gap: 10px;
            }

            .error-details {
                text-align: center;
            }
        }

        /* Animation */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .error-container {
            animation: fadeIn 0.6s ease-out;
        }

        /* Status indicator */
        .status-indicator {
            display: inline-block;
            width: 12px;
            height: 12px;
            background: #dc3545;
            border-radius: 50%;
            margin-right: 8px;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }
    </style>
</head>
<body>
    <div class="error-container">
        <div class="logo">RR</div>
        
        <div class="error-code">500</div>
        
        <h1 class="error-title">
            <span class="status-indicator"></span>
            Internal Server Error
        </h1>
        
        <p class="error-message">
            We're experiencing technical difficulties with our panel management system. 
            Our team has been notified and is working to resolve this issue.
        </p>

        <div class="error-details">
            <h4>What you can try:</h4>
            <ul>
                <li>Refresh this page in a few minutes</li>
                <li>Clear your browser cache and cookies</li>
                <li>Try accessing a different page</li>
                <li>Contact our support team if the problem persists</li>
            </ul>
        </div>
        
        <div class="error-actions">
            <button onclick="location.reload()" class="btn btn-danger">
                <span>🔄</span>
                Retry Now
            </button>
            <a href="/" class="btn btn-primary">
                <span>🏠</span>
                Back to Dashboard
            </a>
            <a href="/support.php" class="btn btn-secondary">
                <span>📞</span>
                Contact Support
            </a>
        </div>
        
        <div class="support-info">
            <h3>Need Immediate Assistance?</h3>
            <p>Our technical team is available 24/7 to help resolve system issues.</p>
            <div class="support-contact">
                <a href="mailto:support@relevantreflex.com">📧 Email Support</a>
                <a href="tel:+1-800-REFLEX">📞 Call: 1-800-REFLEX</a>
                <a href="/support.php">💬 Live Chat</a>
            </div>
        </div>
    </div>

    <script>
        // Auto refresh every 30 seconds (optional)
        // setTimeout(() => {
        //     location.reload();
        // }, 30000);

        // Log server error for analytics
        if (typeof gtag !== 'undefined') {
            gtag('event', 'server_error', {
                'error_type': '500',
                'page_location': window.location.href,
                'timestamp': new Date().toISOString()
            });
        }

        // Show current time for reference
        document.addEventListener('DOMContentLoaded', function() {
            const now = new Date().toLocaleString();
            const timeElement = document.createElement('p');
            timeElement.style.fontSize = '12px';
            timeElement.style.color = '#999';
            timeElement.style.marginTop = '20px';
            timeElement.textContent = `Error occurred at: ${now}`;
            document.querySelector('.error-container').appendChild(timeElement);
        });
    </script>
</body>
</html>
-------------------- END OF FILE --------------------

### FILE 8: finance.php
- Type: PHP
- Size: 13.13 KB
- Path: .
- Name: finance.php
------------------------------------------------------------
<?php
require_once 'config.php';

$page_title = 'Financial Management';
$page_description = 'Track revenue, expenses, profitability and financial performance analytics';

// Sample financial data - replace with database queries
$financial_summary = [
    'total_revenue' => 125450,
    'monthly_revenue' => 45230,
    'total_expenses' => 32100,
    'net_profit' => 93350,
    'revenue_growth' => 12.5,
    'expense_reduction' => -3.1,
    'profit_margin' => 74.4
];

$recent_transactions = [
    ['id' => 1, 'type' => 'Revenue', 'amount' => 2500.00, 'description' => 'Panel completion payment - Tech Survey', 'date' => '2025-09-03', 'category' => 'Panel Revenue'],
    ['id' => 2, 'type' => 'Expense', 'amount' => -450.00, 'description' => 'Cloud hosting monthly fee', 'date' => '2025-09-02', 'category' => 'Infrastructure'],
    ['id' => 3, 'type' => 'Revenue', 'amount' => 1800.00, 'description' => 'Market research project payment', 'date' => '2025-09-01', 'category' => 'Research Revenue'],
    ['id' => 4, 'type' => 'Expense', 'amount' => -320.00, 'description' => 'Software licenses renewal', 'date' => '2025-08-31', 'category' => 'Software'],
    ['id' => 5, 'type' => 'Revenue', 'amount' => 3200.00, 'description' => 'Enterprise client onboarding', 'date' => '2025-08-30', 'category' => 'New Business']
];

include 'includes/header.php';
?>

<div class="page-container">
    <div class="page-header">
        <div>
            <h1>Financial Management</h1>
            <p class="page-subtitle">Revenue tracking, expense management and financial insights</p>
        </div>
        <div class="header-actions">
            <button class="btn btn-primary" id="addTransactionBtn">
                <span>➕</span> Add Transaction
            </button>
            <button class="btn btn-secondary" id="exportFinanceBtn">
                <span>📊</span> Export Report
            </button>
        </div>
    </div>

    <!-- Financial Overview -->
    <div class="finance-overview">
        <div class="stats-grid">
            <div class="stat-card finance-card revenue-card">
                <div class="stat-icon">💰</div>
                <div class="stat-content">
                    <h3>$<?php echo number_format($financial_summary['total_revenue']); ?></h3>
                    <p>Total Revenue</p>
                    <div class="trend trend-up">+<?php echo $financial_summary['revenue_growth']; ?>%</div>
                </div>
                <div class="stat-footer">YTD Performance</div>
            </div>
            
            <div class="stat-card finance-card revenue-card">
                <div class="stat-icon">📊</div>
                <div class="stat-content">
                    <h3>$<?php echo number_format($financial_summary['monthly_revenue']); ?></h3>
                    <p>Monthly Revenue</p>
                    <div class="trend trend-up">+8.2% vs last month</div>
                </div>
                <div class="stat-footer">September 2025</div>
            </div>
            
            <div class="stat-card finance-card expense-card">
                <div class="stat-icon">💸</div>
                <div class="stat-content">
                    <h3>$<?php echo number_format($financial_summary['total_expenses']); ?></h3>
                    <p>Total Expenses</p>
                    <div class="trend trend-down"><?php echo $financial_summary['expense_reduction']; ?>%</div>
                </div>
                <div class="stat-footer">Cost Optimization</div>
            </div>
            
            <div class="stat-card finance-card profit-card">
                <div class="stat-icon">📈</div>
                <div class="stat-content">
                    <h3>$<?php echo number_format($financial_summary['net_profit']); ?></h3>
                    <p>Net Profit</p>
                    <div class="trend trend-up">+18.7% growth</div>
                </div>
                <div class="stat-footer"><?php echo $financial_summary['profit_margin']; ?>% margin</div>
            </div>
        </div>
    </div>

    <div class="finance-content">
        <div class="content-grid">
            <!-- Revenue Chart -->
            <div class="chart-section">
                <div class="section-header">
                    <h2>Revenue Trends</h2>
                    <div class="chart-controls">
                        <select id="revenuePeriod" aria-label="Select period">
                            <option value="30d">Last 30 days</option>
                            <option value="90d" selected>Last 90 days</option>
                            <option value="1y">Last year</option>
                        </select>
                    </div>
                </div>
                <div class="chart-container">
                    <canvas id="revenueChart" width="600" height="300"></canvas>
                </div>
            </div>
            
            <!-- Recent Transactions -->
            <div class="transactions-section">
                <div class="section-header">
                    <h2>Recent Transactions</h2>
                    <a href="#" class="view-all">View All</a>
                </div>
                <div class="transactions-list">
                    <?php foreach ($recent_transactions as $transaction): ?>
                    <div class="transaction-item <?php echo $transaction['type'] === 'Revenue' ? 'revenue' : 'expense'; ?>">
                        <div class="transaction-icon">
                            <?php echo $transaction['type'] === 'Revenue' ? '💰' : '💸'; ?>
                        </div>
                        <div class="transaction-details">
                            <div class="transaction-description">
                                <?php echo htmlspecialchars($transaction['description']); ?>
                            </div>
                            <div class="transaction-meta">
                                <span class="transaction-date"><?php echo date('M j, Y', strtotime($transaction['date'])); ?></span>
                                <span class="transaction-category"><?php echo htmlspecialchars($transaction['category']); ?></span>
                            </div>
                        </div>
                        <div class="transaction-amount <?php echo $transaction['type'] === 'Revenue' ? 'positive' : 'negative'; ?>">
                            <?php echo $transaction['amount'] > 0 ? '+' : ''; ?>$<?php echo number_format(abs($transaction['amount']), 2); ?>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
        
        <!-- Financial Insights -->
        <div class="insights-section">
            <h2>Financial Insights & Recommendations</h2>
            <div class="insights-grid">
                <div class="insight-card financial-insight">
                    <div class="insight-icon">📈</div>
                    <div class="insight-content">
                        <h4>Revenue Growth Acceleration</h4>
                        <p>Revenue growth has increased 23% over the past quarter, primarily driven by enterprise client acquisitions.</p>
                        <div class="insight-action">
                            <strong>Action:</strong> Scale enterprise sales team
                        </div>
                    </div>
                </div>
                
                <div class="insight-card financial-insight">
                    <div class="insight-icon">💡</div>
                    <div class="insight-content">
                        <h4>Cost Optimization Opportunity</h4>
                        <p>Infrastructure costs can be reduced by 20% through annual cloud service commitments.</p>
                        <div class="insight-action">
                            <strong>Potential Savings:</strong> $8,400/year
                        </div>
                    </div>
                </div>
                
                <div class="insight-card financial-insight">
                    <div class="insight-icon">🎯</div>
                    <div class="insight-content">
                        <h4>Profitability Milestone</h4>
                        <p>On track to exceed annual profit target by 15% if current trends continue.</p>
                        <div class="insight-action">
                            <strong>Forecast:</strong> $180K+ annual profit
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Transaction Modal -->
<div id="addTransactionModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2>Add Transaction</h2>
            <button class="modal-close">&times;</button>
        </div>
        
        <form class="transaction-form" method="POST">
            <input type="hidden" name="action" value="create_transaction">
            
            <div class="form-row">
                <div class="form-group">
                    <label for="trans_type">Type *</label>
                    <select id="trans_type" name="type" required>
                        <option value="">Select type</option>
                        <option value="Revenue">Revenue</option>
                        <option value="Expense">Expense</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="trans_amount">Amount ($) *</label>
                    <input type="number" id="trans_amount" name="amount" step="0.01" min="0" required>
                </div>
            </div>
            
            <div class="form-group">
                <label for="trans_description">Description *</label>
                <input type="text" id="trans_description" name="description" required placeholder="Enter transaction description">
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="trans_category">Category</label>
                    <select id="trans_category" name="category">
                        <option value="">Select category</option>
                        <option value="Panel Revenue">Panel Revenue</option>
                        <option value="Research Revenue">Research Revenue</option>
                        <option value="Infrastructure">Infrastructure</option>
                        <option value="Software">Software</option>
                        <option value="Marketing">Marketing</option>
                        <option value="Operations">Operations</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="trans_date">Date *</label>
                    <input type="date" id="trans_date" name="date" value="<?php echo date('Y-m-d'); ?>" required>
                </div>
            </div>
            
            <div class="form-actions">
                <button type="button" class="btn btn-secondary" onclick="closeTransactionModal()">Cancel</button>
                <button type="submit" class="btn btn-primary">Add Transaction</button>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const addTransactionBtn = document.getElementById('addTransactionBtn');
    const modal = document.getElementById('addTransactionModal');
    
    addTransactionBtn?.addEventListener('click', function() {
        modal.style.display = 'flex';
    });
    
    window.closeTransactionModal = function() {
        modal.style.display = 'none';
    };
    
    // Initialize revenue chart
    const canvas = document.getElementById('revenueChart');
    if (canvas) {
        const ctx = canvas.getContext('2d');
        drawRevenueChart(ctx, canvas.width, canvas.height);
    }
});

function drawRevenueChart(ctx, width, height) {
    // Sample revenue data for last 12 months
    const revenueData = [28500, 31200, 29800, 33500, 35200, 38900, 42100, 39800, 43500, 45230, 41800, 44600];
    const months = ['Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'];
    
    const padding = 50;
    const chartWidth = width - 2 * padding;
    const chartHeight = height - 2 * padding;
    const maxValue = Math.max(...revenueData);
    const barWidth = chartWidth / revenueData.length;
    
    ctx.clearRect(0, 0, width, height);
    
    // Draw bars
    ctx.fillStyle = '#0066cc';
    revenueData.forEach((value, index) => {
        const barHeight = (value / maxValue) * chartHeight;
        const x = padding + index * barWidth + barWidth * 0.1;
        const y = height - padding - barHeight;
        const actualBarWidth = barWidth * 0.8;
        
        ctx.fillRect(x, y, actualBarWidth, barHeight);
        
        // Draw month labels
        ctx.fillStyle = '#666';
        ctx.font = '12px Arial';
        ctx.textAlign = 'center';
        ctx.fillText(months[index], x + actualBarWidth / 2, height - padding + 15);
        
        // Draw value labels
        ctx.fillText('$' + (value / 1000).toFixed(0) + 'k', x + actualBarWidth / 2, y - 5);
        ctx.fillStyle = '#0066cc';
    });
}
</script>

<?php include 'includes/footer.php'; ?>
-------------------- END OF FILE --------------------

### FILE 9: generate_hash.php
- Type: PHP
- Size: 183 B
- Path: .
- Name: generate_hash.php
------------------------------------------------------------
php<?php
// Run this once to get the password hash, then delete this file
echo password_hash('Admin@123', PASSWORD_DEFAULT);
// Copy the output and use it in the INSERT query above
?>
-------------------- END OF FILE --------------------

### FILE 10: index.php
- Type: PHP
- Size: 12.27 KB
- Path: .
- Name: index.php
------------------------------------------------------------
<?php
require_once 'config.php';

// ============ LOGIN LOGIC ============
if (!isLoggedIn()) {
    $error = '';
    
    if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['login_submit'])) {
        $username = trim($_POST['username'] ?? '');
        $password = $_POST['password'] ?? '';
        
        if (empty($username) || empty($password)) {
            $error = 'Please enter both username and password';
        } else {
            try {
                $pdo = getDBConnection();
                $stmt = $pdo->prepare("SELECT * FROM admin_users WHERE username = ? AND status = 'active'");
                $stmt->execute([$username]);
                $user = $stmt->fetch();
                
                if ($user && password_verify($password, $user['password'])) {
                    $_SESSION['admin_id'] = $user['id'];
                    $_SESSION['admin_username'] = $user['username'];
                    $_SESSION['admin_email'] = $user['email'];
                    $_SESSION['admin_role'] = $user['role'];
                    $_SESSION['admin_name'] = $user['full_name'];
                    
                    $updateStmt = $pdo->prepare("UPDATE admin_users SET last_login = NOW() WHERE id = ?");
                    $updateStmt->execute([$user['id']]);
                    
                    logActivity($user['id'], 'login', 'User logged in successfully');
                    
                    header('Location: index.php');
                    exit;
                } else {
                    $error = 'Invalid username or password';
                }
            } catch (Exception $e) {
                error_log("Login error: " . $e->getMessage());
                $error = 'An error occurred. Please try again.';
            }
        }
    }
    
    // ============ SHOW LOGIN FORM ============
    ?>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Login - Relevant Reflex</title>
        <link rel="stylesheet" href="assets/css/main.css">
        <style>
            * { margin: 0; padding: 0; box-sizing: border-box; }
            body {
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
                display: flex;
                align-items: center;
                justify-content: center;
                min-height: 100vh;
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            }
            .login-container {
                background: white;
                border-radius: 20px;
                padding: 40px;
                box-shadow: 0 20px 40px rgba(0,0,0,0.1);
                max-width: 400px;
                width: 100%;
                margin: 20px;
            }
            .login-header {
                text-align: center;
                margin-bottom: 30px;
            }
            .logo {
                width: 60px;
                height: 60px;
                margin: 0 auto 20px;
                background: linear-gradient(135deg, #0066cc, #004080);
                color: white;
                border-radius: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: bold;
                font-size: 24px;
            }
            .login-header h1 {
                margin: 0 0 10px;
                color: #212529;
                font-size: 24px;
            }
            .login-header p {
                color: #6c757d;
                margin: 0;
                font-size: 14px;
            }
            .error-message {
                background: #f8d7da;
                color: #721c24;
                padding: 12px 16px;
                border-radius: 8px;
                margin-bottom: 20px;
                border: 1px solid #f5c6cb;
                font-size: 14px;
            }
            .form-group {
                margin-bottom: 20px;
            }
            .form-group label {
                display: block;
                margin-bottom: 8px;
                color: #212529;
                font-weight: 500;
                font-size: 14px;
            }
            .form-group input {
                width: 100%;
                padding: 12px 16px;
                border: 1px solid #ced4da;
                border-radius: 8px;
                font-size: 14px;
                transition: border-color 0.2s;
            }
            .form-group input:focus {
                outline: none;
                border-color: #0066cc;
                box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
            }
            .btn-primary {
                width: 100%;
                padding: 12px;
                background: linear-gradient(135deg, #0066cc, #004080);
                color: white;
                border: none;
                border-radius: 8px;
                font-size: 16px;
                font-weight: 600;
                cursor: pointer;
                transition: transform 0.2s, box-shadow 0.2s;
            }
            .btn-primary:hover {
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
            }
            .btn-primary:active {
                transform: translateY(0);
            }
        </style>
    </head>
    <body>
        <div class="login-container">
            <div class="login-header">
                <div class="logo">RR</div>
                <h1>Welcome Back</h1>
                <p>Sign in to your admin account</p>
            </div>
            
            <?php if ($error): ?>
                <div class="error-message">
                    <?php echo htmlspecialchars($error); ?>
                </div>
            <?php endif; ?>
            
            <form method="POST">
                <div class="form-group">
                    <label for="username">Username</label>
                    <input type="text" id="username" name="username" required autofocus>
                </div>
                
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" id="password" name="password" required>
                </div>
                
                <button type="submit" name="login_submit" class="btn-primary">
                    Sign In
                </button>
            </form>
        </div>
    </body>
    </html>
    <?php
    exit; // Stop here if showing login form
}

// ============ DASHBOARD LOGIC (After Login) ============
$page_title = 'Dashboard';
$page_description = 'Relevant Reflex Dashboard - Comprehensive panel management overview with real-time analytics';

// Get dashboard data
try {
    $pdo = getDBConnection();
    $panelPdo = getPanelDBConnection();
    
    // Get panel member stats
    $memberStmt = $panelPdo->query("SELECT COUNT(*) as total, 
        SUM(CASE WHEN status = 'active' THEN 1 ELSE 0 END) as active,
        SUM(CASE WHEN email_verified = 1 THEN 1 ELSE 0 END) as verified
        FROM users");
    $memberStats = $memberStmt->fetch();
    
    // Get points stats
    $pointsStmt = $panelPdo->query("SELECT 
        SUM(points) as total_points,
        SUM(total_earned) as total_earned,
        SUM(total_redeemed) as total_redeemed
        FROM user_points");
    $pointsStats = $pointsStmt->fetch();
    
    // Get pending redemptions
    $redemptionStmt = $panelPdo->query("SELECT COUNT(*) as pending FROM redemption_requests WHERE status = 'pending'");
    $redemptionStats = $redemptionStmt->fetch();
    
    // Get open tickets
    $ticketsStmt = $panelPdo->query("SELECT COUNT(*) as open FROM support_tickets WHERE status IN ('open', 'pending')");
    $ticketStats = $ticketsStmt->fetch();
    
    $dashboard_stats = [
        'total_members' => $memberStats['total'] ?? 0,
        'active_members' => $memberStats['active'] ?? 0,
        'verified_members' => $memberStats['verified'] ?? 0,
        'total_points' => $pointsStats['total_points'] ?? 0,
        'pending_redemptions' => $redemptionStats['pending'] ?? 0,
        'open_tickets' => $ticketStats['open'] ?? 0
    ];
    
} catch (Exception $e) {
    error_log("Dashboard data error: " . $e->getMessage());
    $dashboard_stats = ['error' => true];
}

include 'includes/header.php';
?>

<div class="dashboard-container">
    <div class="page-header">
        <div>
            <h1>Welcome Back, <?php echo htmlspecialchars($_SESSION['admin_name'] ?? $_SESSION['admin_username']); ?>!</h1>
            <p class="page-subtitle">Real-time overview of your panel management system</p>
        </div>
    </div>

    <?php if (isset($dashboard_stats['error'])): ?>
        <div class="error-message">
            <p>Unable to load dashboard data. Please check your database connection.</p>
        </div>
    <?php else: ?>
    
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon">👥</div>
            <div class="stat-content">
                <h3><?php echo number_format($dashboard_stats['total_members']); ?></h3>
                <p>Total Panel Members</p>
                <small class="stat-change positive"><?php echo number_format($dashboard_stats['active_members']); ?> active</small>
            </div>
        </div>
        
        <div class="stat-card">
            <div class="stat-icon">✓</div>
            <div class="stat-content">
                <h3><?php echo number_format($dashboard_stats['verified_members']); ?></h3>
                <p>Verified Members</p>
                <small class="stat-change neutral">Email verified</small>
            </div>
        </div>
        
        <div class="stat-card">
            <div class="stat-icon">💰</div>
            <div class="stat-content">
                <h3><?php echo number_format($dashboard_stats['total_points'], 2); ?></h3>
                <p>Total Points Balance</p>
                <small class="stat-change neutral">Current circulation</small>
            </div>
        </div>
        
        <div class="stat-card">
            <div class="stat-icon">⏳</div>
            <div class="stat-content">
                <h3><?php echo number_format($dashboard_stats['pending_redemptions']); ?></h3>
                <p>Pending Redemptions</p>
                <small class="stat-change <?php echo $dashboard_stats['pending_redemptions'] > 0 ? 'negative' : 'neutral'; ?>">
                    Requires attention
                </small>
            </div>
        </div>
        
        <div class="stat-card">
            <div class="stat-icon">🎫</div>
            <div class="stat-content">
                <h3><?php echo number_format($dashboard_stats['open_tickets']); ?></h3>
                <p>Open Support Tickets</p>
                <small class="stat-change <?php echo $dashboard_stats['open_tickets'] > 0 ? 'negative' : 'positive'; ?>">
                    Active cases
                </small>
            </div>
        </div>
    </div>

    <div class="quick-actions-section" style="margin-top: 40px;">
        <h2>Quick Actions</h2>
        <div class="quick-actions-grid">
            <a href="members.php" class="quick-action-card" style="text-decoration: none; color: inherit;">
                <div class="action-icon">👥</div>
                <h3>View Members</h3>
                <p>Manage panel member accounts</p>
            </a>
            
            <?php if (isAdmin()): ?>
            <a href="users.php" class="quick-action-card" style="text-decoration: none; color: inherit;">
                <div class="action-icon">🔐</div>
                <h3>Admin Users</h3>
                <p>Manage admin access</p>
            </a>
            <?php endif; ?>
            
            <a href="support.php" class="quick-action-card" style="text-decoration: none; color: inherit;">
                <div class="action-icon">🛠️</div>
                <h3>Support Tickets</h3>
                <p>Handle member inquiries</p>
            </a>
            
            <a href="settings.php" class="quick-action-card" style="text-decoration: none; color: inherit;">
                <div class="action-icon">⚙️</div>
                <h3>Settings</h3>
                <p>Configure system</p>
            </a>
        </div>
    </div>
    
    <?php endif; ?>
</div>

<?php include 'includes/footer.php'; ?>
-------------------- END OF FILE --------------------

### FILE 11: login.php
- Type: PHP
- Size: 3.96 KB
- Path: .
- Name: login.php
------------------------------------------------------------
<?php
require_once 'config.php';

// Redirect if already logged in
if (isLoggedIn()) {
    header('Location: index.php');
    exit;
}

$error = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $username = trim($_POST['username'] ?? '');
    $password = $_POST['password'] ?? '';
    
    if (empty($username) || empty($password)) {
        $error = 'Please enter both username and password';
    } else {
        try {
            $pdo = getDBConnection();
            $stmt = $pdo->prepare("SELECT * FROM admin_users WHERE username = ? AND status = 'active'");
            $stmt->execute([$username]);
            $user = $stmt->fetch();
            
            if ($user && password_verify($password, $user['password'])) {
                // Set session
                $_SESSION['admin_id'] = $user['id'];
                $_SESSION['admin_username'] = $user['username'];
                $_SESSION['admin_email'] = $user['email'];
                $_SESSION['admin_role'] = $user['role'];
                $_SESSION['admin_name'] = $user['full_name'];
                
                // Update last login
                $updateStmt = $pdo->prepare("UPDATE admin_users SET last_login = NOW() WHERE id = ?");
                $updateStmt->execute([$user['id']]);
                
                // Log activity
                logActivity($user['id'], 'login', 'User logged in successfully');
                
                header('Location: index.php');
                exit;
            } else {
                $error = 'Invalid username or password';
            }
        } catch (Exception $e) {
            error_log("Login error: " . $e->getMessage());
            $error = 'An error occurred. Please try again.';
        }
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - Relevant Reflex</title>
    <link rel="stylesheet" href="assets/css/main.css">
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .login-container {
            background: white;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            max-width: 400px;
            width: 100%;
        }
        .login-header {
            text-align: center;
            margin-bottom: 30px;
        }
        .logo {
            width: 60px;
            height: 60px;
            margin: 0 auto 20px;
        }
        .login-header h1 {
            margin: 0 0 10px;
            color: var(--dark-color);
        }
        .login-header p {
            color: var(--gray-600);
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-header">
            <div class="logo">RR</div>
            <h1>Welcome Back</h1>
            <p>Sign in to your admin account</p>
        </div>
        
        <?php if ($error): ?>
            <div class="error-message">
                <span class="message-icon">⚠️</span>
                <?php echo htmlspecialchars($error); ?>
            </div>
        <?php endif; ?>
        
        <form method="POST">
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" id="username" name="username" required autofocus>
            </div>
            
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required>
            </div>
            
            <div class="form-actions">
                <button type="submit" class="btn btn-primary" style="width: 100%;">
                    <span>🔐</span> Sign In
                </button>
            </div>
        </form>
    </div>
</body>
</html>
-------------------- END OF FILE --------------------

### FILE 12: logout.php
- Type: PHP
- Size: 184 B
- Path: .
- Name: logout.php
------------------------------------------------------------
<?php
require_once 'config.php';

if (isLoggedIn()) {
    logActivity($_SESSION['admin_id'], 'logout', 'User logged out');
}

session_destroy();
header('Location: index.php');
exit;
?>
-------------------- END OF FILE --------------------

### FILE 13: maintenance.html
- Type: HTML
- Size: 0 B
- Path: .
- Name: maintenance.html
------------------------------------------------------------

-------------------- END OF FILE --------------------

### FILE 14: member_edit.php
- Type: PHP
- Size: 11.18 KB
- Path: .
- Name: member_edit.php
------------------------------------------------------------
<?php
require_once 'config.php';
requireLogin();

$member_id = intval($_GET['id'] ?? 0);
if (!$member_id) {
    header('Location: members.php');
    exit;
}

$page_title = 'Edit Member';
$page_description = 'Edit member information';

$success = '';
$error = '';

// Handle form submission
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
    if ($_POST['action'] === 'update_basic') {
        $gender = $_POST['gender'] ?? '';
        $dob = $_POST['date_of_birth'] ?? '';
        $postcode = trim($_POST['postcode'] ?? '');
        $status = $_POST['status'] ?? 'active';
        
        if (empty($gender) || empty($dob) || empty($postcode)) {
            $error = 'All fields are required';
        } else {
            try {
                $panelPdo = getPanelDBConnection();
                $stmt = $panelPdo->prepare("
                    UPDATE users 
                    SET gender = ?, date_of_birth = ?, postcode = ?, status = ?, updated_at = NOW()
                    WHERE id = ?
                ");
                $stmt->execute([$gender, $dob, $postcode, $status, $member_id]);
                
                logActivity($_SESSION['admin_id'], 'update_member', "Updated member #$member_id basic info", 'member', $member_id);
                
                $success = 'Member information updated successfully!';
            } catch (Exception $e) {
                $error = 'An error occurred. Please try again.';
                error_log("Update member error: " . $e->getMessage());
            }
        }
    }
    
    if ($_POST['action'] === 'update_mobile') {
        $mobile = trim($_POST['mobile_number'] ?? '');
        
        if (empty($mobile)) {
            $error = 'Mobile number is required';
        } else {
            try {
                $panelPdo = getPanelDBConnection();
                
                // Check if mobile verification record exists
                $checkStmt = $panelPdo->prepare("SELECT id FROM mobile_verifications WHERE user_id = ?");
                $checkStmt->execute([$member_id]);
                $exists = $checkStmt->fetch();
                
                if ($exists) {
                    $stmt = $panelPdo->prepare("
                        UPDATE mobile_verifications 
                        SET mobile_number = ?, updated_at = NOW()
                        WHERE user_id = ?
                    ");
                    $stmt->execute([$mobile, $member_id]);
                } else {
                    $stmt = $panelPdo->prepare("
                        INSERT INTO mobile_verifications (user_id, mobile_number)
                        VALUES (?, ?)
                    ");
                    $stmt->execute([$member_id, $mobile]);
                }
                
                logActivity($_SESSION['admin_id'], 'update_member', "Updated member #$member_id mobile number", 'member', $member_id);
                
                $success = 'Mobile number updated successfully!';
            } catch (Exception $e) {
                $error = 'An error occurred. Please try again.';
                error_log("Update mobile error: " . $e->getMessage());
            }
        }
    }
}

// Fetch member details
try {
    $panelPdo = getPanelDBConnection();
    
    $stmt = $panelPdo->prepare("
        SELECT 
            u.*,
            mv.mobile_number,
            mv.is_verified as mobile_verified
        FROM users u
        LEFT JOIN mobile_verifications mv ON u.id = mv.user_id
        WHERE u.id = ?
    ");
    $stmt->execute([$member_id]);
    $member = $stmt->fetch();
    
    if (!$member) {
        header('Location: members.php');
        exit;
    }
} catch (Exception $e) {
    error_log("Fetch member error: " . $e->getMessage());
    header('Location: members.php');
    exit;
}

include 'includes/header.php';
?>

<div class="page-container">
    <div class="page-header">
        <div>
            <h1>Edit Member</h1>
            <p class="page-subtitle">Update member information for #<?php echo $member_id; ?></p>
        </div>
        <div class="header-actions">
            <a href="member_view.php?id=<?php echo $member_id; ?>" class="btn btn-secondary">
                <span>👁️</span> View Details
            </a>
            <a href="members.php" class="btn btn-secondary">
                <span>←</span> Back to List
            </a>
        </div>
    </div>

    <?php if ($success): ?>
        <div class="success-message">
            <span class="message-icon">✅</span>
            <?php echo htmlspecialchars($success); ?>
        </div>
    <?php endif; ?>
    
    <?php if ($error): ?>
        <div class="error-message">
            <span class="message-icon">⚠️</span>
            <?php echo htmlspecialchars($error); ?>
        </div>
    <?php endif; ?>

    <div class="settings-container" style="grid-template-columns: 1fr;">
        <div class="settings-content">
            <!-- Basic Information -->
            <div class="settings-section">
                <h2>Basic Information</h2>
                <form method="POST">
                    <input type="hidden" name="action" value="update_basic">
                    
                    <div class="form-group">
                        <label>Email Address</label>
                        <input type="email" value="<?php echo htmlspecialchars($member['email']); ?>" disabled>
                        <small class="form-help">Email cannot be changed</small>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="gender">Gender *</label>
                            <select id="gender" name="gender" required>
                                <option value="Male" <?php echo $member['gender'] === 'Male' ? 'selected' : ''; ?>>Male</option>
                                <option value="Female" <?php echo $member['gender'] === 'Female' ? 'selected' : ''; ?>>Female</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="date_of_birth">Date of Birth *</label>
                            <input type="date" id="date_of_birth" name="date_of_birth" 
                                   value="<?php echo htmlspecialchars($member['date_of_birth']); ?>" required>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="postcode">Postcode *</label>
                            <input type="text" id="postcode" name="postcode" 
                                   value="<?php echo htmlspecialchars($member['postcode']); ?>" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="status">Account Status *</label>
                            <select id="status" name="status" required>
                                <option value="active" <?php echo $member['status'] === 'active' ? 'selected' : ''; ?>>Active</option>
                                <option value="inactive" <?php echo $member['status'] === 'inactive' ? 'selected' : ''; ?>>Inactive</option>
                                <option value="suspended" <?php echo $member['status'] === 'suspended' ? 'selected' : ''; ?>>Suspended</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">Update Basic Info</button>
                    </div>
                </form>
            </div>
            
            <!-- Mobile Number -->
            <div class="settings-section" style="margin-top: var(--spacing-2xl);">
                <h2>Mobile Number</h2>
                <form method="POST">
                    <input type="hidden" name="action" value="update_mobile">
                    
                    <div class="form-group">
                        <label for="mobile_number">Mobile Number</label>
                        <input type="tel" id="mobile_number" name="mobile_number" 
                               value="<?php echo htmlspecialchars($member['mobile_number'] ?? ''); ?>" 
                               placeholder="+91 XXXXX XXXXX">
                        <?php if ($member['mobile_verified']): ?>
                            <small class="form-help" style="color: var(--success-color);">✓ Verified</small>
                        <?php else: ?>
                            <small class="form-help" style="color: var(--warning-color);">Not verified</small>
                        <?php endif; ?>
                    </div>
                    
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">Update Mobile Number</button>
                    </div>
                </form>
            </div>
            
            <!-- Account Information (Read-only) -->
            <div class="settings-section" style="margin-top: var(--spacing-2xl);">
                <h2>Account Information</h2>
                <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg);">
                    <div class="info-item">
                        <label style="font-weight: 600; color: var(--gray-700); display: block; margin-bottom: 8px;">Email Verified</label>
                        <p style="margin: 0;">
                            <?php echo $member['email_verified'] ? '<span style="color: var(--success-color);">✓ Yes</span>' : '<span style="color: var(--danger-color);">✗ No</span>'; ?>
                        </p>
                    </div>
                    
                    <div class="info-item">
                        <label style="font-weight: 600; color: var(--gray-700); display: block; margin-bottom: 8px;">Onboarding Completed</label>
                        <p style="margin: 0;">
                            <?php echo $member['onboarding_completed'] ? '<span style="color: var(--success-color);">✓ Yes</span>' : '<span style="color: var(--warning-color);">⏳ No</span>'; ?>
                        </p>
                    </div>
                    
                    <div class="info-item">
                        <label style="font-weight: 600; color: var(--gray-700); display: block; margin-bottom: 8px;">Member Since</label>
                        <p style="margin: 0; color: var(--dark-color);">
                            <?php echo date('F j, Y', strtotime($member['created_at'])); ?>
                        </p>
                    </div>
                    
                    <div class="info-item">
                        <label style="font-weight: 600; color: var(--gray-700); display: block; margin-bottom: 8px;">Last Updated</label>
                        <p style="margin: 0; color: var(--dark-color);">
                            <?php echo date('F j, Y g:i A', strtotime($member['updated_at'])); ?>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<?php include 'includes/footer.php'; ?>
-------------------- END OF FILE --------------------

### FILE 15: member_view.php
- Type: PHP
- Size: 24.14 KB
- Path: .
- Name: member_view.php
------------------------------------------------------------
<?php
require_once 'config.php';
requireLogin();

$member_id = intval($_GET['id'] ?? 0);
if (!$member_id) {
    header('Location: members.php');
    exit;
}

$page_title = 'Member Details';
$page_description = 'View complete member information and activity';

try {
    $panelPdo = getPanelDBConnection();
    
    // Fetch member details
    $stmt = $panelPdo->prepare("
        SELECT 
            u.*,
            up.points as current_points,
            up.total_earned,
            up.total_redeemed,
            mv.mobile_number,
            mv.is_verified as mobile_verified,
            mv.verified_at as mobile_verified_at
        FROM users u
        LEFT JOIN user_points up ON u.id = up.user_id
        LEFT JOIN mobile_verifications mv ON u.id = mv.user_id
        WHERE u.id = ?
    ");
    $stmt->execute([$member_id]);
    $member = $stmt->fetch();
    
    if (!$member) {
        header('Location: members.php');
        exit;
    }
    
    // Fetch profiler data
    $profilerStmt = $panelPdo->prepare("
        SELECT section, question_id, response, created_at
        FROM user_profiler
        WHERE user_id = ?
        ORDER BY section, created_at
    ");
    $profilerStmt->execute([$member_id]);
    $profilerData = $profilerStmt->fetchAll();
    
    // Group profiler by section
    $profilerBySection = [];
    foreach ($profilerData as $data) {
        $profilerBySection[$data['section']][] = $data;
    }
    
    // Fetch profiler completion
    $completionStmt = $panelPdo->prepare("
        SELECT * FROM profiler_completion WHERE user_id = ?
    ");
    $completionStmt->execute([$member_id]);
    $completionData = $completionStmt->fetchAll();
    
    // Fetch point transactions
    $transactionsStmt = $panelPdo->prepare("
        SELECT * FROM point_transactions
        WHERE user_id = ?
        ORDER BY created_at DESC
        LIMIT 50
    ");
    $transactionsStmt->execute([$member_id]);
    $transactions = $transactionsStmt->fetchAll();
    
    // Fetch redemption requests
    $redemptionsStmt = $panelPdo->prepare("
        SELECT * FROM redemption_requests
        WHERE user_id = ?
        ORDER BY created_at DESC
    ");
    $redemptionsStmt->execute([$member_id]);
    $redemptions = $redemptionsStmt->fetchAll();
    
    // Fetch support tickets
    $ticketsStmt = $panelPdo->prepare("
        SELECT * FROM support_tickets
        WHERE user_id = ?
        ORDER BY created_at DESC
        LIMIT 10
    ");
    $ticketsStmt->execute([$member_id]);
    $tickets = $ticketsStmt->fetchAll();
    
} catch (Exception $e) {
    error_log("Member view error: " . $e->getMessage());
    header('Location: members.php');
    exit;
}

include 'includes/header.php';
?>

<div class="page-container">
    <div class="page-header">
        <div>
            <h1>Member Details</h1>
            <p class="page-subtitle">Complete information for member #<?php echo $member_id; ?></p>
        </div>
        <div class="header-actions">
            <a href="member_edit.php?id=<?php echo $member_id; ?>" class="btn btn-primary">
                <span>✏️</span> Edit Member
            </a>
            <a href="members.php" class="btn btn-secondary">
                <span>←</span> Back to List
            </a>
        </div>
    </div>

    <!-- Member Overview Cards -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon">👤</div>
            <div class="stat-content">
                <h3><?php echo htmlspecialchars($member['email']); ?></h3>
                <p>Member Email</p>
                <small class="stat-meta">
                    <?php echo $member['email_verified'] ? '<span style="color: var(--success-color);">✓ Verified</span>' : '<span style="color: var(--danger-color);">✗ Not Verified</span>'; ?>
                </small>
            </div>
        </div>
        
        <div class="stat-card">
            <div class="stat-icon">💰</div>
            <div class="stat-content">
                <h3><?php echo number_format($member['current_points'] ?? 0, 2); ?></h3>
                <p>Current Points</p>
                <small class="stat-meta">Available Balance</small>
            </div>
        </div>
        
        <div class="stat-card">
            <div class="stat-icon">📈</div>
            <div class="stat-content">
                <h3><?php echo number_format($member['total_earned'] ?? 0, 2); ?></h3>
                <p>Total Earned</p>
                <small class="stat-meta">Lifetime Earnings</small>
            </div>
        </div>
        
        <div class="stat-card">
            <div class="stat-icon">💳</div>
            <div class="stat-content">
                <h3><?php echo number_format($member['total_redeemed'] ?? 0, 2); ?></h3>
                <p>Total Redeemed</p>
                <small class="stat-meta">Lifetime Redemptions</small>
            </div>
        </div>
    </div>

    <!-- Member Information Tabs -->
    <div class="settings-container" style="grid-template-columns: 200px 1fr;">
        <div class="settings-nav">
            <ul class="settings-tabs">
                <li><a href="#basic-info" class="tab-link active" data-tab="basic-info">Basic Info</a></li>
                <li><a href="#profiler" class="tab-link" data-tab="profiler">Profiler Data</a></li>
                <li><a href="#points" class="tab-link" data-tab="points">Points History</a></li>
                <li><a href="#redemptions" class="tab-link" data-tab="redemptions">Redemptions</a></li>
                <li><a href="#tickets" class="tab-link" data-tab="tickets">Support Tickets</a></li>
            </ul>
        </div>
        
        <div class="settings-content">
            <!-- Basic Info Tab -->
            <div id="basic-info" class="tab-content active">
                <div class="settings-section">
                    <h2>Basic Information</h2>
                    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg);">
                        <div class="info-item">
                            <label style="font-weight: 600; color: var(--gray-700); display: block; margin-bottom: 8px;">Email Address</label>
                            <p style="margin: 0; color: var(--dark-color);"><?php echo htmlspecialchars($member['email']); ?></p>
                        </div>
                        
                        <div class="info-item">
                            <label style="font-weight: 600; color: var(--gray-700); display: block; margin-bottom: 8px;">Gender</label>
                            <p style="margin: 0; color: var(--dark-color);"><?php echo htmlspecialchars($member['gender']); ?></p>
                        </div>
                        
                        <div class="info-item">
                            <label style="font-weight: 600; color: var(--gray-700); display: block; margin-bottom: 8px;">Date of Birth</label>
                            <p style="margin: 0; color: var(--dark-color);">
                                <?php 
                                $dob = new DateTime($member['date_of_birth']);
                                $now = new DateTime();
                                $age = $now->diff($dob)->y;
                                echo $dob->format('F j, Y') . " (Age: $age)"; 
                                ?>
                            </p>
                        </div>
                        
                        <div class="info-item">
                            <label style="font-weight: 600; color: var(--gray-700); display: block; margin-bottom: 8px;">Postcode</label>
                            <p style="margin: 0; color: var(--dark-color);"><?php echo htmlspecialchars($member['postcode']); ?></p>
                        </div>
                        
                        <div class="info-item">
                            <label style="font-weight: 600; color: var(--gray-700); display: block; margin-bottom: 8px;">Mobile Number</label>
                            <p style="margin: 0; color: var(--dark-color);">
                                <?php 
                                echo $member['mobile_number'] ? htmlspecialchars($member['mobile_number']) : 'Not provided';
                                if ($member['mobile_verified']) {
                                    echo ' <span style="color: var(--success-color);">✓ Verified</span>';
                                }
                                ?>
                            </p>
                        </div>
                        
                        <div class="info-item">
                            <label style="font-weight: 600; color: var(--gray-700); display: block; margin-bottom: 8px;">Account Status</label>
                            <p style="margin: 0;">
                                <span class="status-badge status-<?php echo strtolower($member['status']); ?>">
                                    <?php echo ucfirst($member['status']); ?>
                                </span>
                            </p>
                        </div>
                        
                        <div class="info-item">
                            <label style="font-weight: 600; color: var(--gray-700); display: block; margin-bottom: 8px;">Onboarding Status</label>
                            <p style="margin: 0;">
                                <?php echo $member['onboarding_completed'] ? '<span style="color: var(--success-color);">✓ Completed</span>' : '<span style="color: var(--warning-color);">⏳ Pending</span>'; ?>
                            </p>
                        </div>
                        
                        <div class="info-item">
                            <label style="font-weight: 600; color: var(--gray-700); display: block; margin-bottom: 8px;">Member Since</label>
                            <p style="margin: 0; color: var(--dark-color);">
                                <?php echo date('F j, Y', strtotime($member['created_at'])); ?>
                            </p>
                        </div>
                        
                        <div class="info-item">
                            <label style="font-weight: 600; color: var(--gray-700); display: block; margin-bottom: 8px;">Last Login</label>
                            <p style="margin: 0; color: var(--dark-color);">
                                <?php echo $member['last_login'] ? date('F j, Y g:i A', strtotime($member['last_login'])) : 'Never logged in'; ?>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Profiler Data Tab -->
            <div id="profiler" class="tab-content">
                <div class="settings-section">
                    <h2>Profiler Information</h2>
                    
                    <?php if (!empty($completionData)): ?>
                        <h3 style="margin-top: var(--spacing-xl); margin-bottom: var(--spacing-lg);">Completion Status</h3>
                        <div style="display: grid; gap: var(--spacing-md);">
                            <?php foreach ($completionData as $completion): ?>
                                <div style="border: 1px solid var(--gray-200); border-radius: var(--border-radius-lg); padding: var(--spacing-lg);">
                                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-md);">
                                        <h4 style="margin: 0; color: var(--primary-color);"><?php echo htmlspecialchars($completion['section']); ?></h4>
                                        <span class="status-badge <?php echo $completion['is_completed'] ? 'status-completed' : 'status-pending'; ?>">
                                            <?php echo $completion['is_completed'] ? 'Completed' : 'In Progress'; ?>
                                        </span>
                                    </div>
                                    <div class="progress-container">
                                        <div class="progress-bar">
                                            <div class="progress-fill" style="width: <?php echo $completion['completion_percentage']; ?>%"></div>
                                        </div>
                                        <span class="progress-text"><?php echo number_format($completion['completion_percentage'], 1); ?>%</span>
                                    </div>
                                    <p style="margin: var(--spacing-sm) 0 0; font-size: var(--font-size-sm); color: var(--gray-600);">
                                        <?php echo $completion['answered_questions']; ?> of <?php echo $completion['total_questions']; ?> questions answered
                                        <?php if ($completion['is_completed'] && $completion['completed_at']): ?>
                                            • Completed on <?php echo date('M j, Y', strtotime($completion['completed_at'])); ?>
                                        <?php endif; ?>
                                    </p>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    <?php endif; ?>
                    
                    <?php if (!empty($profilerBySection)): ?>
                        <h3 style="margin-top: var(--spacing-2xl); margin-bottom: var(--spacing-lg);">Profiler Responses</h3>
                        <?php foreach ($profilerBySection as $section => $responses): ?>
                            <div style="margin-bottom: var(--spacing-xl);">
                                <h4 style="color: var(--primary-color); margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-sm); border-bottom: 2px solid var(--primary-color);">
                                    <?php echo htmlspecialchars($section); ?>
                                </h4>
                                <div style="display: grid; gap: var(--spacing-md);">
                                    <?php foreach ($responses as $response): ?>
                                        <div style="background: var(--gray-50); padding: var(--spacing-md); border-radius: var(--border-radius-lg);">
                                            <p style="margin: 0 0 var(--spacing-xs); font-weight: 600; color: var(--gray-700); font-size: var(--font-size-sm);">
                                                <?php echo htmlspecialchars($response['question_id']); ?>
                                            </p>
                                            <p style="margin: 0; color: var(--dark-color);">
                                                <?php echo htmlspecialchars($response['response']); ?>
                                            </p>
                                        </div>
                                    <?php endforeach; ?>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <p style="text-align: center; color: var(--gray-500); padding: var(--spacing-2xl);">
                            No profiler data available for this member.
                        </p>
                    <?php endif; ?>
                </div>
            </div>
            
            <!-- Points History Tab -->
            <div id="points" class="tab-content">
                <div class="settings-section">
                    <h2>Points Transaction History</h2>
                    
                    <?php if (!empty($transactions)): ?>
                        <div class="transactions-list">
                            <?php foreach ($transactions as $transaction): ?>
                                <div class="transaction-item <?php echo $transaction['transaction_type'] === 'earned' ? 'revenue' : 'expense'; ?>">
                                    <div class="transaction-icon">
                                        <?php echo $transaction['transaction_type'] === 'earned' ? '💰' : '💸'; ?>
                                    </div>
                                    <div class="transaction-details">
                                        <div class="transaction-description">
                                            <?php echo htmlspecialchars($transaction['description'] ?? $transaction['source']); ?>
                                        </div>
                                        <div class="transaction-meta">
                                            <span class="transaction-date"><?php echo date('M j, Y g:i A', strtotime($transaction['created_at'])); ?></span>
                                            <span class="transaction-category"><?php echo htmlspecialchars($transaction['source']); ?></span>
                                            <span class="status-badge status-<?php echo strtolower($transaction['status']); ?>">
                                                <?php echo ucfirst($transaction['status']); ?>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="transaction-amount <?php echo $transaction['transaction_type'] === 'earned' ? 'positive' : 'negative'; ?>">
                                        <?php echo $transaction['transaction_type'] === 'earned' ? '+' : '-'; ?><?php echo number_format($transaction['points'], 2); ?>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    <?php else: ?>
                        <p style="text-align: center; color: var(--gray-500); padding: var(--spacing-2xl);">
                            No transaction history available.
                        </p>
                    <?php endif; ?>
                </div>
            </div>
            
            <!-- Redemptions Tab -->
            <div id="redemptions" class="tab-content">
                <div class="settings-section">
                    <h2>Redemption Requests</h2>
                    
                    <?php if (!empty($redemptions)): ?>
                        <div class="table-container">
                            <table class="data-table">
                                <thead>
                                    <tr>
                                        <th>Request ID</th>
                                        <th>Points</th>
                                        <th>Amount (INR)</th>
                                        <th>UPI ID</th>
                                        <th>Status</th>
                                        <th>Requested</th>
                                        <th>Processed</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php foreach ($redemptions as $redemption): ?>
                                        <tr>
                                            <td style="font-family: monospace; font-weight: 600;">
                                                <?php echo htmlspecialchars($redemption['request_id']); ?>
                                            </td>
                                            <td><?php echo number_format($redemption['points_redeemed'], 2); ?></td>
                                            <td style="font-weight: 600; color: var(--success-color);">
                                                ₹<?php echo number_format($redemption['amount_inr'], 2); ?>
                                            </td>
                                            <td><?php echo htmlspecialchars($redemption['upi_id']); ?></td>
                                            <td>
                                                <span class="status-badge status-<?php echo strtolower($redemption['status']); ?>">
                                                    <?php echo ucfirst($redemption['status']); ?>
                                                </span>
                                            </td>
                                            <td><?php echo date('M j, Y', strtotime($redemption['created_at'])); ?></td>
                                            <td>
                                                <?php 
                                                if ($redemption['processed_at']) {
                                                    echo date('M j, Y', strtotime($redemption['processed_at']));
                                                } else {
                                                    echo '<span style="color: var(--gray-400);">Pending</span>';
                                                }
                                                ?>
                                            </td>
                                        </tr>
                                    <?php endforeach; ?>
                                </tbody>
                            </table>
                        </div>
                    <?php else: ?>
                        <p style="text-align: center; color: var(--gray-500); padding: var(--spacing-2xl);">
                            No redemption requests found.
                        </p>
                    <?php endif; ?>
                </div>
            </div>
            
            <!-- Support Tickets Tab -->
            <div id="tickets" class="tab-content">
                <div class="settings-section">
                    <h2>Support Tickets</h2>
                    
                    <?php if (!empty($tickets)): ?>
                        <div class="tickets-container">
                            <?php foreach ($tickets as $ticket): ?>
                                <div class="ticket-item">
                                    <div class="ticket-header">
                                        <div class="ticket-id">#<?php echo htmlspecialchars($ticket['ticket_number']); ?></div>
                                        <div class="ticket-status">
                                            <span class="status-badge status-<?php echo strtolower($ticket['status']); ?>">
                                                <?php echo ucfirst($ticket['status']); ?>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="ticket-content">
                                        <h4><?php echo htmlspecialchars($ticket['subject']); ?></h4>
                                        <div class="ticket-meta">
                                            <span class="priority-badge priority-<?php echo strtolower($ticket['priority']); ?>">
                                                <?php echo ucfirst($ticket['priority']); ?>
                                            </span>
                                            <span class="ticket-date">Created: <?php echo date('M j, Y', strtotime($ticket['created_at'])); ?></span>
                                        </div>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    <?php else: ?>
                        <p style="text-align: center; color: var(--gray-500); padding: var(--spacing-2xl);">
                            No support tickets found.
                        </p>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Tab functionality
    const tabLinks = document.querySelectorAll('.tab-link');
    const tabContents = document.querySelectorAll('.tab-content');
    
    tabLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const targetTab = this.getAttribute('data-tab');
            
            tabLinks.forEach(l => l.classList.remove('active'));
            tabContents.forEach(c => c.classList.remove('active'));
            
            this.classList.add('active');
            document.getElementById(targetTab).classList.add('active');
        });
    });
});
</script>

<?php include 'includes/footer.php'; ?>
-------------------- END OF FILE --------------------

### FILE 16: members.php
- Type: PHP
- Size: 6.23 KB
- Path: .
- Name: members.php
------------------------------------------------------------
<?php
require_once 'config.php';
requireLogin();

$page_title = 'Panel Members';
$page_description = 'Manage registered panel members from customer portal';

// Fetch all panel members with their points
try {
    $panelPdo = getPanelDBConnection();
    
    $stmt = $panelPdo->query("
        SELECT 
            u.*,
            up.points as current_points,
            up.total_earned,
            up.total_redeemed,
            mv.mobile_number,
            mv.is_verified as mobile_verified
        FROM users u
        LEFT JOIN user_points up ON u.id = up.user_id
        LEFT JOIN mobile_verifications mv ON u.id = mv.user_id
        ORDER BY u.created_at DESC
    ");
    $members = $stmt->fetchAll();
} catch (Exception $e) {
    $members = [];
    error_log("Fetch members error: " . $e->getMessage());
}

include 'includes/header.php';
?>

<div class="page-container">
    <div class="page-header">
        <div>
            <h1>Panel Members</h1>
            <p class="page-subtitle">View and manage registered panel members</p>
        </div>
        <div class="header-actions">
            <button class="btn btn-secondary" id="exportMembersBtn">
                <span>📥</span> Export
            </button>
        </div>
    </div>

    <!-- Member Statistics -->
    <div class="user-stats">
        <div class="stats-row">
            <div class="stat-item">
                <div class="stat-number"><?php echo count($members); ?></div>
                <div class="stat-label">Total Members</div>
            </div>
            <div class="stat-item">
                <div class="stat-number"><?php echo count(array_filter($members, fn($m) => $m['status'] === 'active')); ?></div>
                <div class="stat-label">Active Members</div>
            </div>
            <div class="stat-item">
                <div class="stat-number"><?php echo count(array_filter($members, fn($m) => $m['email_verified'] == 1)); ?></div>
                <div class="stat-label">Email Verified</div>
            </div>
            <div class="stat-item">
                <div class="stat-number"><?php echo count(array_filter($members, fn($m) => $m['mobile_verified'] == 1)); ?></div>
                <div class="stat-label">Mobile Verified</div>
            </div>
        </div>
    </div>

    <!-- Search and Filters -->
    <div class="table-controls">
        <div class="search-container">
            <input type="text" class="search-input" placeholder="Search members by email or postcode..." aria-label="Search members">
        </div>
        <div class="filter-container">
            <select class="filter-select" id="statusFilter" aria-label="Filter by status">
                <option value="">All Status</option>
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
                <option value="suspended">Suspended</option>
            </select>
            <select class="filter-select" id="verificationFilter" aria-label="Filter by verification">
                <option value="">All Verification</option>
                <option value="verified">Email Verified</option>
                <option value="not_verified">Not Verified</option>
            </select>
        </div>
    </div>

    <div class="table-container">
        <table class="data-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Email</th>
                    <th>Gender</th>
                    <th>Date of Birth</th>
                    <th>Postcode</th>
                    <th>Points</th>
                    <th>Status</th>
                    <th>Joined</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($members as $member): ?>
                <tr data-member-id="<?php echo $member['id']; ?>">
                    <td><?php echo htmlspecialchars($member['id']); ?></td>
                    <td>
                        <div class="item-info">
                            <div class="item-name"><?php echo htmlspecialchars($member['email']); ?></div>
                            <?php if ($member['email_verified']): ?>
                                <span style="color: var(--success-color); font-size: 12px;">✓ Verified</span>
                            <?php endif; ?>
                        </div>
                    </td>
                    <td><?php echo htmlspecialchars($member['gender']); ?></td>
                    <td><?php echo date('M j, Y', strtotime($member['date_of_birth'])); ?></td>
                    <td><?php echo htmlspecialchars($member['postcode']); ?></td>
                    <td>
                        <strong style="color: var(--primary-color);">
                            <?php echo number_format($member['current_points'] ?? 0, 2); ?>
                        </strong>
                    </td>
                    <td>
                        <span class="status-badge status-<?php echo strtolower($member['status']); ?>">
                            <?php echo ucfirst($member['status']); ?>
                        </span>
                    </td>
                    <td>
                        <div class="date-info">
                            <div class="end-date"><?php echo date('M j, Y', strtotime($member['created_at'])); ?></div>
                            <small style="font-size: 11px; color: var(--gray-500);">
                                <?php echo date('g:i A', strtotime($member['created_at'])); ?>
                            </small>
                        </div>
                    </td>
                    <td>
                        <div class="action-buttons">
                            <a href="member_view.php?id=<?php echo $member['id']; ?>" class="btn-view" title="View details">
                                <span>👁️</span>
                            </a>
                            <a href="member_edit.php?id=<?php echo $member['id']; ?>" class="btn-edit" title="Edit member">
                                <span>✏️</span>
                            </a>
                        </div>
                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>

<?php include 'includes/footer.php'; ?>
-------------------- END OF FILE --------------------

### FILE 17: panel.php
- Type: PHP
- Size: 11.37 KB
- Path: .
- Name: panel.php
------------------------------------------------------------
<?php
require_once 'config.php';
requireLogin();

$page_title = 'Panel Management';
$page_description = 'Manage registered panel members';

try {
    $panelPdo = getPanelDBConnection();
    
    $stmt = $panelPdo->query("
        SELECT 
            u.*,
            up.points as current_points,
            up.total_earned,
            up.total_redeemed,
            mv.mobile_number,
            mv.is_verified as mobile_verified
        FROM users u
        LEFT JOIN user_points up ON u.id = up.user_id
        LEFT JOIN mobile_verifications mv ON u.id = mv.user_id
        ORDER BY u.created_at DESC
    ");
    $members = $stmt->fetchAll();
} catch (Exception $e) {
    $members = [];
    error_log("Fetch members error: " . $e->getMessage());
}

include 'includes/header.php';
?>

<style>
.panel-members-table {
    width: 100%;
    background: white;
    border-radius: 12px;
    overflow-x: auto;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin-top: 30px;
}

.panel-members-table table {
    width: 100%;
    min-width: 1100px;
    border-collapse: separate;
    border-spacing: 0;
}

.panel-members-table thead {
    background: #f9fafb;
}

.panel-members-table th {
    padding: 16px 12px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e5e7eb;
    white-space: nowrap;
}

.panel-members-table td {
    padding: 16px 12px;
    font-size: 14px;
    color: #1f2937;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.panel-members-table tbody tr:hover {
    background: #f9fafb;
}

.panel-members-table tbody tr:last-child td {
    border-bottom: none;
}

.member-email {
    font-weight: 500;
    color: #111827;
}

.verified-badge {
    display: inline-block;
    color: #059669;
    font-size: 11px;
    margin-top: 2px;
}

.member-points {
    font-weight: 700;
    color: #0066cc;
    font-size: 15px;
}

.member-actions {
    display: flex;
    gap: 6px;
}

.action-link {
    padding: 6px 12px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    transition: all 0.2s;
}

.action-view {
    background: #0066cc;
    color: white;
}

.action-view:hover {
    background: #0052a3;
}

.action-edit {
    background: #ffa500;
    color: white;
}

.action-edit:hover {
    background: #ff8c00;
}
</style>

<div class="page-container">
    <div class="page-header">
        <div>
            <h1>Panel Members</h1>
            <p class="page-subtitle">View and manage registered panel members</p>
        </div>
        <div class="header-actions">
            <button class="btn btn-secondary" onclick="alert('Export feature coming soon!')">
                <span>📥</span> Export
            </button>
        </div>
    </div>

    <div style="background: white; padding: 20px 24px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 24px;">
        <div style="display: flex; gap: 32px; align-items: center; flex-wrap: wrap;">
            <div style="display: flex; align-items: center; gap: 10px;">
                <span style="font-size: 14px; color: #6b7280; font-weight: 500;">Total:</span>
                <span style="font-size: 20px; font-weight: 700; color: #0066cc;"><?php echo count($members); ?></span>
            </div>
            <div style="height: 24px; width: 1px; background: #e5e7eb;"></div>
            <div style="display: flex; align-items: center; gap: 10px;">
                <span style="font-size: 14px; color: #6b7280; font-weight: 500;">Active:</span>
                <span style="font-size: 20px; font-weight: 700; color: #059669;"><?php echo count(array_filter($members, fn($m) => $m['status'] === 'active')); ?></span>
            </div>
            <div style="height: 24px; width: 1px; background: #e5e7eb;"></div>
            <div style="display: flex; align-items: center; gap: 10px;">
                <span style="font-size: 14px; color: #6b7280; font-weight: 500;">Email Verified:</span>
                <span style="font-size: 20px; font-weight: 700; color: #7c3aed;"><?php echo count(array_filter($members, fn($m) => $m['email_verified'] == 1)); ?></span>
            </div>
            <div style="height: 24px; width: 1px; background: #e5e7eb;"></div>
            <div style="display: flex; align-items: center; gap: 10px;">
                <span style="font-size: 14px; color: #6b7280; font-weight: 500;">Mobile Verified:</span>
                <span style="font-size: 20px; font-weight: 700; color: #ea580c;"><?php echo count(array_filter($members, fn($m) => $m['mobile_verified'] == 1)); ?></span>
            </div>
            <div style="height: 24px; width: 1px; background: #e5e7eb;"></div>
            <div style="display: flex; align-items: center; gap: 10px;">
                <span style="font-size: 14px; color: #6b7280; font-weight: 500;">Onboarded:</span>
                <span style="font-size: 20px; font-weight: 700; color: #0891b2;"><?php echo count(array_filter($members, fn($m) => $m['onboarding_completed'] == 1)); ?></span>
            </div>
        </div>
    </div>

    <div class="table-controls">
        <div class="search-container">
            <input type="text" class="search-input" id="memberSearch" placeholder="Search by email or postcode...">
        </div>
        <div class="filter-container">
            <select class="filter-select" id="statusFilter">
                <option value="">All Status</option>
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
                <option value="suspended">Suspended</option>
            </select>
            <select class="filter-select" id="verificationFilter">
                <option value="">All Verification</option>
                <option value="verified">Email Verified</option>
                <option value="not_verified">Not Verified</option>
            </select>
        </div>
    </div>

    <div class="panel-members-table">
        <table id="membersTable">
            <thead>
                <tr>
                    <th style="width: 60px;">ID</th>
                    <th style="width: 280px;">Email</th>
                    <th style="width: 90px;">Gender</th>
                    <th style="width: 160px;">Date of Birth</th>
                    <th style="width: 100px;">Postcode</th>
                    <th style="width: 100px;">Points</th>
                    <th style="width: 110px;">Status</th>
                    <th style="width: 140px;">Joined</th>
                    <th style="width: 160px;">Actions</th>
                </tr>
            </thead>
            <tbody>
                <?php if (empty($members)): ?>
                    <tr>
                        <td colspan="9" style="text-align: center; padding: 40px; color: #9ca3af;">
                            No panel members found
                        </td>
                    </tr>
                <?php else: ?>
                    <?php foreach ($members as $member): ?>
                    <tr data-email="<?php echo strtolower($member['email']); ?>"
                        data-postcode="<?php echo strtolower($member['postcode']); ?>"
                        data-status="<?php echo $member['status']; ?>"
                        data-verified="<?php echo $member['email_verified'] ? 'verified' : 'not_verified'; ?>">
                        <td><?php echo $member['id']; ?></td>
                        <td>
                            <div class="member-email"><?php echo htmlspecialchars($member['email']); ?></div>
                            <?php if ($member['email_verified']): ?>
                                <div class="verified-badge">✓ Verified</div>
                            <?php endif; ?>
                        </td>
                        <td><?php echo htmlspecialchars($member['gender']); ?></td>
                        <td>
                            <?php 
                            $dob = new DateTime($member['date_of_birth']);
                            $now = new DateTime();
                            $age = $now->diff($dob)->y;
                            ?>
                            <div style="font-weight: 500;"><?php echo $dob->format('M j, Y'); ?></div>
                            <div style="font-size: 12px; color: #6b7280;">(<?php echo $age; ?> years)</div>
                        </td>
                        <td><?php echo htmlspecialchars($member['postcode']); ?></td>
                        <td>
                            <span class="member-points">
                                <?php echo number_format($member['current_points'] ?? 0, 2); ?>
                            </span>
                        </td>
                        <td>
                            <span class="badge badge-<?php echo strtolower($member['status']); ?>">
                                <?php echo ucfirst($member['status']); ?>
                            </span>
                        </td>
                        <td>
                            <div style="font-weight: 500;"><?php echo date('M j, Y', strtotime($member['created_at'])); ?></div>
                            <div style="font-size: 12px; color: #6b7280;"><?php echo date('g:i A', strtotime($member['created_at'])); ?></div>
                        </td>
                        <td>
                            <div class="member-actions">
                                <a href="member_view.php?id=<?php echo $member['id']; ?>" class="action-link action-view">
                                    👁️ View
                                </a>
                                <a href="member_edit.php?id=<?php echo $member['id']; ?>" class="action-link action-edit">
                                    ✏️ Edit
                                </a>
                            </div>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('memberSearch');
    const statusFilter = document.getElementById('statusFilter');
    const verificationFilter = document.getElementById('verificationFilter');
    const tableRows = document.querySelectorAll('#membersTable tbody tr[data-email]');
    
    function filterTable() {
        const searchTerm = searchInput.value.toLowerCase();
        const statusValue = statusFilter.value;
        const verificationValue = verificationFilter.value;
        
        tableRows.forEach(row => {
            const email = row.dataset.email || '';
            const postcode = row.dataset.postcode || '';
            const status = row.dataset.status || '';
            const verified = row.dataset.verified || '';
            
            const matchesSearch = email.includes(searchTerm) || postcode.includes(searchTerm);
            const matchesStatus = !statusValue || status === statusValue;
            const matchesVerification = !verificationValue || verified === verificationValue;
            
            row.style.display = (matchesSearch && matchesStatus && matchesVerification) ? '' : 'none';
        });
    }
    
    searchInput?.addEventListener('input', filterTable);
    statusFilter?.addEventListener('change', filterTable);
    verificationFilter?.addEventListener('change', filterTable);
});
</script>

<?php include 'includes/footer.php'; ?>
-------------------- END OF FILE --------------------

### FILE 18: README.md
- Type: MD
- Size: 8.86 KB
- Path: .
- Name: README.md
------------------------------------------------------------
# Relevant Reflex Panel Management System

A comprehensive, mobile-responsive panel management system built with PHP, MySQL, and modern web technologies. Designed for fast loading on shared hosting environments like Hostinger.

## 🚀 Features

- **Complete Panel Management**: Create, manage, and analyze survey panels
- **User Management**: Role-based access control with admin, manager, and user roles
- **Supply Chain Management**: Track inventory, suppliers, and procurement
- **Demand Analytics**: Market analysis and forecasting tools
- **Financial Management**: Revenue tracking and expense management
- **Support System**: Built-in ticketing and help center
- **Real-time Dashboard**: Live statistics and performance metrics
- **Mobile Responsive**: 100% mobile-friendly design
- **SEO Optimized**: Search engine friendly structure
- **Fast Loading**: Optimized for shared hosting environments

## 📁 File Structure

```
relevant-reflex/
├── index.php                 # Dashboard home page
├── users.php                 # User management
├── panel.php                 # Panel management
├── supply.php                # Supply management
├── demand.php                # Demand analysis
├── finance.php               # Financial management
├── support.php               # Support center
├── settings.php              # System settings
├── config.php                # Database configuration
├── .htaccess                 # Apache configuration
├── database_schema.sql       # Database structure
├── robots.txt                # Search engine directives
├── sitemap.xml               # Site structure for SEO
├── includes/
│   ├── header.php            # Site header
│   ├── footer.php            # SEO footer
│   └── navigation.php        # Navigation menu
├── assets/
│   ├── css/
│   │   ├── main.css          # Main stylesheet
│   │   ├── responsive.css    # Mobile responsiveness
│   │   └── dashboard.css     # Dashboard styles
│   ├── js/
│   │   ├── main.js           # Core JavaScript
│   │   └── dashboard.js      # Dashboard functionality
│   └── images/
│       └── (your images here)
└── error-pages/
    ├── 404.html              # Page not found
    ├── 500.html              # Server error
    └── maintenance.html      # Maintenance mode
```

## 🛠️ Installation Instructions

### Prerequisites

- **Web Hosting**: Shared hosting account (Hostinger, cPanel, etc.)
- **PHP**: Version 7.4 or higher
- **MySQL**: Version 5.7 or higher
- **Apache**: With mod_rewrite enabled

### Step 1: Download and Extract

1. Download all the files provided in the artifacts
2. Create a new folder named `relevant-reflex` on your computer
3. Copy all files into this folder maintaining the directory structure

### Step 2: Database Setup

1. **Login to phpMyAdmin** via your hosting control panel
2. **Create a new database**:
   - Database name: `relevant_reflex_db` (or your preferred name)
   - Collation: `utf8mb4_unicode_ci`
3. **Import the schema**:
   - Click on your database
   - Go to "Import" tab
   - Choose the `database_schema.sql` file
   - Click "Go" to execute

### Step 3: Configuration

1. **Edit config.php**:
   ```php
   define('DB_HOST', 'localhost');
   define('DB_USER', 'your_db_username');    // From your hosting panel
   define('DB_PASS', 'your_db_password');    // From your hosting panel
   define('DB_NAME', 'relevant_reflex_db');  // Your database name
   define('SITE_URL', 'https://yourdomain.com'); // Your actual domain
   ```

2. **Update site settings** in other files if needed

### Step 4: File Upload

1. **Connect via FTP/File Manager**:
   - Use your hosting panel's file manager or FTP client
   - Navigate to `public_html` directory (or your domain's root)

2. **Upload files**:
   - Upload all files maintaining the folder structure
   - Ensure permissions are set correctly:
     - Files: 644
     - Directories: 755
     - config.php: 600 (more secure)

### Step 5: Testing

1. **Visit your website**: `https://yourdomain.com`
2. **Default admin login**:
   - Username: `admin`
   - Email: `admin@relevantreflex.com`
   - Password: `admin123`
   - **⚠️ Change this immediately after first login!**

3. **Test all features**:
   - Dashboard loading
   - User management
   - Panel creation
   - Mobile responsiveness

### Step 6: Security Hardening

1. **Change default admin password**
2. **Update config.php** with strong database credentials
3. **Enable SSL certificate** (usually free with hosting)
4. **Uncomment HTTPS redirect** in .htaccess:
   ```apache
   RewriteCond %{HTTPS} off
   RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
   ```

## 🎨 Customization

### Changing Colors and Theme

All colors are centralized in `assets/css/main.css` at the top:

```css
:root {
    --primary-color: #0066cc;        /* Change main brand color */
    --primary-hover: #0052a3;        /* Hover state */
    --success-color: #28a745;        /* Success messages */
    --warning-color: #ffc107;        /* Warnings */
    --danger-color: #dc3545;         /* Errors */
    /* ... more color variables */
}
```

Simply update these values to match your brand colors.

### Adding Your Logo

1. **Replace the RR logo**:
   - Update the `.logo` content in `includes/navigation.php`
   - Or replace with an image: `<img src="assets/images/logo.png" alt="Your Logo">`

2. **Update favicon**:
   - Add your `favicon.ico` to the root directory
   - Update the reference in `includes/header.php`

### Custom Styling

- **Main styles**: `assets/css/main.css`
- **Mobile styles**: `assets/css/responsive.css`  
- **Dashboard styles**: `assets/css/dashboard.css`

## 📱 Mobile Optimization

The system is built mobile-first with:

- **Responsive Grid System**: Adapts to all screen sizes
- **Touch-Friendly Interface**: 44px minimum touch targets
- **Optimized Navigation**: Hamburger menu on mobile
- **Fast Loading**: Optimized assets and caching
- **Progressive Enhancement**: Works without JavaScript

## 🔧 Maintenance

### Regular Tasks

1. **Database Backups**: Weekly automated backups recommended
2. **Update Dependencies**: Keep PHP and MySQL updated
3. **Monitor Performance**: Check load times and optimize
4. **Security Updates**: Regular security audits
5. **Content Updates**: Keep information current

### Performance Optimization

1. **Enable Gzip Compression** (included in .htaccess)
2. **Optimize Images**: Use WebP format when possible
3. **Monitor Database**: Run `OPTIMIZE TABLE` monthly
4. **Cache Headers**: Properly configured in .htaccess
5. **CDN Integration**: Consider using a CDN for static assets

## 🔐 Security Features

- **SQL Injection Protection**: PDO prepared statements
- **XSS Prevention**: Input sanitization and CSP headers
- **CSRF Protection**: Session-based token validation
- **Secure Headers**: Comprehensive security headers
- **File Upload Security**: Restricted file types and locations
- **Access Control**: Role-based permissions

## 🆘 Troubleshooting

### Common Issues

**1. Database Connection Error**
```
Solution: Check config.php credentials and database server status
```

**2. Page Not Found (404)**
```
Solution: Verify .htaccess file is uploaded and mod_rewrite is enabled
```

**3. Slow Loading**
```
Solution: Enable compression, check hosting performance, optimize images
```

**4. Mobile Display Issues**
```
Solution: Clear browser cache, check responsive.css is loaded
```

**5. JavaScript Not Working**
```
Solution: Check browser console for errors, verify JS files are accessible
```

### Getting Help

1. **Check Error Logs**: In your hosting control panel
2. **Browser Console**: F12 to check for JavaScript errors
3. **PHP Error Display**: Temporarily enable in config.php for debugging
4. **Hosting Support**: Contact your hosting provider for server issues

## 📞 Support

For technical support and customization services:

- **Email**: support@relevantreflex.com
- **Documentation**: Check inline comments in code files
- **Updates**: Monitor for system updates and security patches

## 📝 License

This system is proprietary software developed for Relevant Reflex. All rights reserved.

## 🚀 Quick Start Checklist

- [ ] Create database in phpMyAdmin
- [ ] Import database_schema.sql
- [ ] Update config.php with database credentials
- [ ] Upload all files to web server
- [ ] Set correct file permissions
- [ ] Test login with admin/admin123
- [ ] Change default admin password
- [ ] Customize colors and branding
- [ ] Enable SSL and HTTPS redirect
- [ ] Test all functionality
- [ ] Setup regular backups

## Version Information

- **Version**: 1.0.0
- **Release Date**: September 2025
- **PHP Compatibility**: 7.4+
- **MySQL Compatibility**: 5.7+
- **Browser Support**: All modern browsers, IE11+

---

**Important**: Always backup your database and files before making changes or updates.
-------------------- END OF FILE --------------------

### FILE 19: robots.txt
- Type: TXT
- Size: 2.16 KB
- Path: .
- Name: robots.txt
------------------------------------------------------------
# Relevant Reflex Panel Management System
# Robots.txt file for search engine optimization

User-agent: *

# Allow access to main pages
Allow: /
Allow: /index.php
Allow: /users.php
Allow: /panel.php
Allow: /supply.php
Allow: /demand.php
Allow: /finance.php
Allow: /support.php
Allow: /settings.php

# Allow access to static assets
Allow: /assets/css/
Allow: /assets/js/
Allow: /assets/images/

# Disallow sensitive files and directories
Disallow: /config.php
Disallow: /database_schema.sql
Disallow: /.htaccess
Disallow: /includes/
Disallow: /logs/
Disallow: /backups/
Disallow: /temp/
Disallow: /cache/
Disallow: /admin/
Disallow: /api/
Disallow: /private/

# Disallow URL parameters that might create duplicate content
Disallow: /*?*
Disallow: /*&*
Disallow: /*/search?*
Disallow: /*/filter?*

# Disallow error pages
Disallow: /error-*
Disallow: /404.html
Disallow: /500.html
Disallow: /maintenance.html

# Block access to development and testing files
Disallow: /test/
Disallow: /dev/
Disallow: /staging/
Disallow: /*.bak
Disallow: /*.tmp
Disallow: /*.log

# Block common exploits and security probes
Disallow: /wp-admin/
Disallow: /wordpress/
Disallow: /wp-content/
Disallow: /admin.php
Disallow: /administrator/
Disallow: /phpmyadmin/
Disallow: /phpMyAdmin/

# Block unwanted file types
Disallow: /*.sql$
Disallow: /*.zip$
Disallow: /*.tar.gz$
Disallow: /*.bak$
Disallow: /*.conf$
Disallow: /*.ini$

# Sitemap location
Sitemap: https://yourdomain.com/sitemap.xml

# Crawl delay for respectful crawling (optional)
# Crawl-delay: 1

# Specific rules for different bots (optional)

# Google Bot - allow everything we want indexed
User-agent: Googlebot
Allow: /
Disallow: /config.php
Disallow: /includes/
Disallow: /*?*

# Bing Bot
User-agent: Bingbot
Allow: /
Disallow: /config.php
Disallow: /includes/

# Block aggressive bots that might overload the server
User-agent: AhrefsBot
Disallow: /

User-agent: MJ12bot
Disallow: /

User-agent: SemrushBot
Disallow: /

User-agent: DotBot
Disallow: /

# Allow social media bots for link previews
User-agent: facebookexternalhit
Allow: /

User-agent: Twitterbot
Allow: /

User-agent: LinkedInBot
Allow: /

# Note: Update "yourdomain.com" with your actual domain name
-------------------- END OF FILE --------------------

### FILE 20: settings.php
- Type: PHP
- Size: 25.81 KB
- Path: .
- Name: settings.php
------------------------------------------------------------
<?php
require_once 'config.php';

$page_title = 'System Settings';
$page_description = 'Configure your panel management system preferences and account settings';

// Handle settings updates
if ($_POST) {
    $action = $_POST['action'] ?? '';
    
    switch ($action) {
        case 'update_general':
            // Update general settings
            // Add database update logic here
            $general_success = "General settings updated successfully!";
            break;
        case 'update_security':
            // Update security settings
            $security_success = "Security settings updated successfully!";
            break;
        case 'update_notifications':
            // Update notification preferences
            $notification_success = "Notification preferences updated successfully!";
            break;
    }
}

// Current settings - replace with database queries
$current_settings = [
    'company_name' => 'Relevant Reflex',
    'timezone' => 'America/New_York',
    'date_format' => 'M j, Y',
    'currency' => 'USD',
    'two_factor' => true,
    'session_timeout' => 30,
    'email_notifications' => true,
    'sms_notifications' => false,
    'weekly_reports' => true
];

include 'includes/header.php';
?>

<div class="page-container">
    <div class="page-header">
        <div>
            <h1>System Settings</h1>
            <p class="page-subtitle">Configure your platform preferences and account settings</p>
        </div>
    </div>

    <?php if (isset($general_success)): ?>
        <div class="success-message">✅ <?php echo htmlspecialchars($general_success); ?></div>
    <?php endif; ?>
    
    <?php if (isset($security_success)): ?>
        <div class="success-message">✅ <?php echo htmlspecialchars($security_success); ?></div>
    <?php endif; ?>
    
    <?php if (isset($notification_success)): ?>
        <div class="success-message">✅ <?php echo htmlspecialchars($notification_success); ?></div>
    <?php endif; ?>

    <div class="settings-container">
        <!-- Settings Navigation -->
        <div class="settings-nav">
            <ul class="settings-tabs">
                <li><a href="#general" class="tab-link active" data-tab="general">General</a></li>
                <li><a href="#security" class="tab-link" data-tab="security">Security</a></li>
                <li><a href="#notifications" class="tab-link" data-tab="notifications">Notifications</a></li>
                <li><a href="#integrations" class="tab-link" data-tab="integrations">Integrations</a></li>
                <li><a href="#appearance" class="tab-link" data-tab="appearance">Appearance</a></li>
            </ul>
        </div>
        
        <div class="settings-content">
            <!-- General Settings Tab -->
            <div id="general" class="tab-content active">
                <div class="settings-section">
                    <h2>General Settings</h2>
                    <form class="settings-form" method="POST">
                        <input type="hidden" name="action" value="update_general">
                        
                        <div class="form-group">
                            <label for="company_name">Company Name</label>
                            <input type="text" id="company_name" name="company_name" value="<?php echo htmlspecialchars($current_settings['company_name']); ?>" required>
                            <small class="form-help">This appears in reports and communications</small>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label for="timezone">Timezone</label>
                                <select id="timezone" name="timezone">
                                    <option value="UTC" <?php echo $current_settings['timezone'] === 'UTC' ? 'selected' : ''; ?>>UTC</option>
                                    <option value="America/New_York" <?php echo $current_settings['timezone'] === 'America/New_York' ? 'selected' : ''; ?>>Eastern Time</option>
                                    <option value="America/Chicago" <?php echo $current_settings['timezone'] === 'America/Chicago' ? 'selected' : ''; ?>>Central Time</option>
                                    <option value="America/Denver" <?php echo $current_settings['timezone'] === 'America/Denver' ? 'selected' : ''; ?>>Mountain Time</option>
                                    <option value="America/Los_Angeles" <?php echo $current_settings['timezone'] === 'America/Los_Angeles' ? 'selected' : ''; ?>>Pacific Time</option>
                                    <option value="Europe/London" <?php echo $current_settings['timezone'] === 'Europe/London' ? 'selected' : ''; ?>>London</option>
                                    <option value="Asia/Tokyo" <?php echo $current_settings['timezone'] === 'Asia/Tokyo' ? 'selected' : ''; ?>>Tokyo</option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label for="currency">Default Currency</label>
                                <select id="currency" name="currency">
                                    <option value="USD" <?php echo $current_settings['currency'] === 'USD' ? 'selected' : ''; ?>>USD ($)</option>
                                    <option value="EUR" <?php echo $current_settings['currency'] === 'EUR' ? 'selected' : ''; ?>>EUR (€)</option>
                                    <option value="GBP" <?php echo $current_settings['currency'] === 'GBP' ? 'selected' : ''; ?>>GBP (£)</option>
                                    <option value="CAD" <?php echo $current_settings['currency'] === 'CAD' ? 'selected' : ''; ?>>CAD (C$)</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="date_format">Date Format</label>
                            <select id="date_format" name="date_format">
                                <option value="M j, Y" <?php echo $current_settings['date_format'] === 'M j, Y' ? 'selected' : ''; ?>>Sep 3, 2025</option>
                                <option value="j M Y" <?php echo $current_settings['date_format'] === 'j M Y' ? 'selected' : ''; ?>>3 Sep 2025</option>
                                <option value="Y-m-d" <?php echo $current_settings['date_format'] === 'Y-m-d' ? 'selected' : ''; ?>>2025-09-03</option>
                                <option value="m/d/Y" <?php echo $current_settings['date_format'] === 'm/d/Y' ? 'selected' : ''; ?>>09/03/2025</option>
                            </select>
                        </div>
                        
                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary">Save Changes</button>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- Security Settings Tab -->
            <div id="security" class="tab-content">
                <div class="settings-section">
                    <h2>Security Settings</h2>
                    <form class="settings-form" method="POST">
                        <input type="hidden" name="action" value="update_security">
                        
                        <div class="form-group">
                            <label class="checkbox-label">
                                <input type="checkbox" name="two_factor" <?php echo $current_settings['two_factor'] ? 'checked' : ''; ?>>
                                <span class="checkmark"></span>
                                Enable Two-Factor Authentication
                            </label>
                            <small class="form-help">Add an extra layer of security to your account</small>
                        </div>
                        
                        <div class="form-group">
                            <label for="session_timeout">Session Timeout (minutes)</label>
                            <input type="number" id="session_timeout" name="session_timeout" 
                                   value="<?php echo $current_settings['session_timeout']; ?>" 
                                   min="5" max="480">
                            <small class="form-help">Automatically log out after period of inactivity</small>
                        </div>
                        
                        <div class="form-group">
                            <label class="checkbox-label">
                                <input type="checkbox" name="login_alerts" checked>
                                <span class="checkmark"></span>
                                Email alerts for new login locations
                            </label>
                        </div>
                        
                        <div class="form-group">
                            <label class="checkbox-label">
                                <input type="checkbox" name="api_access" checked>
                                <span class="checkmark"></span>
                                Enable API access
                            </label>
                            <small class="form-help">Allow third-party integrations via API</small>
                        </div>
                        
                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary">Update Security</button>
                            <button type="button" class="btn btn-secondary" id="changePasswordBtn">Change Password</button>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- Notifications Settings Tab -->
            <div id="notifications" class="tab-content">
                <div class="settings-section">
                    <h2>Notification Preferences</h2>
                    <form class="settings-form" method="POST">
                        <input type="hidden" name="action" value="update_notifications">
                        
                        <h3>Email Notifications</h3>
                        <div class="notification-group">
                            <label class="checkbox-label">
                                <input type="checkbox" name="email_notifications" <?php echo $current_settings['email_notifications'] ? 'checked' : ''; ?>>
                                <span class="checkmark"></span>
                                Enable email notifications
                            </label>
                            
                            <label class="checkbox-label">
                                <input type="checkbox" name="weekly_reports" <?php echo $current_settings['weekly_reports'] ? 'checked' : ''; ?>>
                                <span class="checkmark"></span>
                                Weekly performance reports
                            </label>
                            
                            <label class="checkbox-label">
                                <input type="checkbox" name="panel_alerts" checked>
                                <span class="checkmark"></span>
                                Panel completion alerts
                            </label>
                            
                            <label class="checkbox-label">
                                <input type="checkbox" name="system_updates" checked>
                                <span class="checkmark"></span>
                                System update notifications
                            </label>
                        </div>
                        
                        <h3>SMS Notifications</h3>
                        <div class="notification-group">
                            <label class="checkbox-label">
                                <input type="checkbox" name="sms_notifications" <?php echo $current_settings['sms_notifications'] ? 'checked' : ''; ?>>
                                <span class="checkmark"></span>
                                Enable SMS notifications
                            </label>
                            
                            <label class="checkbox-label">
                                <input type="checkbox" name="critical_alerts">
                                <span class="checkmark"></span>
                                Critical system alerts only
                            </label>
                        </div>
                        
                        <div class="form-group">
                            <label for="phone_number">Mobile Number</label>
                            <input type="tel" id="phone_number" name="phone_number" placeholder="+1 (555) 123-4567">
                            <small class="form-help">Required for SMS notifications</small>
                        </div>
                        
                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary">Save Preferences</button>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- Integrations Settings Tab -->
            <div id="integrations" class="tab-content">
                <div class="settings-section">
                    <h2>Third-Party Integrations</h2>
                    
                    <div class="integrations-grid">
                        <div class="integration-card">
                            <div class="integration-header">
                                <div class="integration-icon">📊</div>
                                <h4>Google Analytics</h4>
                                <span class="status-badge status-active">Connected</span>
                            </div>
                            <p>Track user behavior and panel performance</p>
                            <button class="btn btn-secondary">Configure</button>
                        </div>
                        
                        <div class="integration-card">
                            <div class="integration-header">
                                <div class="integration-icon">📧</div>
                                <h4>Mailchimp</h4>
                                <span class="status-badge status-inactive">Disconnected</span>
                            </div>
                            <p>Sync panel participants with email campaigns</p>
                            <button class="btn btn-primary">Connect</button>
                        </div>
                        
                        <div class="integration-card">
                            <div class="integration-header">
                                <div class="integration-icon">💼</div>
                                <h4>Salesforce</h4>
                                <span class="status-badge status-inactive">Disconnected</span>
                            </div>
                            <p>Sync customer data and panel insights</p>
                            <button class="btn btn-primary">Connect</button>
                        </div>
                        
                        <div class="integration-card">
                            <div class="integration-header">
                                <div class="integration-icon">💳</div>
                                <h4>Stripe</h4>
                                <span class="status-badge status-active">Connected</span>
                            </div>
                            <p>Process payments and manage subscriptions</p>
                            <button class="btn btn-secondary">Configure</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Appearance Settings Tab -->
            <div id="appearance" class="tab-content">
                <div class="settings-section">
                    <h2>Appearance Settings</h2>
                    <form class="settings-form" method="POST">
                        <input type="hidden" name="action" value="update_appearance">
                        
                        <div class="form-group">
                            <label for="theme">Theme</label>
                            <select id="theme" name="theme">
                                <option value="light" selected>Light</option>
                                <option value="dark">Dark</option>
                                <option value="auto">Auto (System Preference)</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="primary_color">Primary Color</label>
                            <div class="color-picker-group">
                                <input type="color" id="primary_color" name="primary_color" value="#0066cc">
                                <input type="text" class="color-hex" value="#0066cc" readonly>
                            </div>
                            <small class="form-help">This color will be used for buttons, links and highlights</small>
                        </div>
                        
                        <div class="form-group">
                            <label for="sidebar_position">Navigation Position</label>
                            <select id="sidebar_position" name="sidebar_position">
                                <option value="top" selected>Top (Horizontal)</option>
                                <option value="left">Left Sidebar</option>
                                <option value="right">Right Sidebar</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label class="checkbox-label">
                                <input type="checkbox" name="compact_mode">
                                <span class="checkmark"></span>
                                Compact interface mode
                            </label>
                            <small class="form-help">Show more content in less space</small>
                        </div>
                        
                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary">Apply Changes</button>
                            <button type="button" class="btn btn-secondary" id="resetThemeBtn">Reset to Default</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Account Management Section -->
    <div class="account-section">
        <h2>Account Management</h2>
        <div class="account-grid">
            <div class="account-card">
                <div class="account-icon">👤</div>
                <div class="account-content">
                    <h4>Profile Information</h4>
                    <p>Update your personal details and contact information</p>
                    <button class="btn btn-secondary">Edit Profile</button>
                </div>
            </div>
            
            <div class="account-card">
                <div class="account-icon">📊</div>
                <div class="account-content">
                    <h4>Usage Statistics</h4>
                    <p>View your platform usage and activity history</p>
                    <button class="btn btn-secondary">View Stats</button>
                </div>
            </div>
            
            <div class="account-card">
                <div class="account-icon">💾</div>
                <div class="account-content">
                    <h4>Data Export</h4>
                    <p>Download your complete data and settings backup</p>
                    <button class="btn btn-secondary">Export Data</button>
                </div>
            </div>
            
            <div class="account-card danger-card">
                <div class="account-icon">⚠️</div>
                <div class="account-content">
                    <h4>Delete Account</h4>
                    <p>Permanently delete your account and all data</p>
                    <button class="btn btn-danger">Delete Account</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Change Password Modal -->
<div id="changePasswordModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2>Change Password</h2>
            <button class="modal-close">&times;</button>
        </div>
        
        <form class="password-form" method="POST">
            <input type="hidden" name="action" value="change_password">
            
            <div class="form-group">
                <label for="current_password">Current Password *</label>
                <input type="password" id="current_password" name="current_password" required>
            </div>
            
            <div class="form-group">
                <label for="new_password">New Password *</label>
                <input type="password" id="new_password" name="new_password" required minlength="8">
                <div class="password-strength">
                    <div class="strength-bar">
                        <div class="strength-fill"></div>
                    </div>
                    <small class="strength-text">Password strength: <span id="strengthLevel">Weak</span></small>
                </div>
            </div>
            
            <div class="form-group">
                <label for="confirm_password">Confirm New Password *</label>
                <input type="password" id="confirm_password" name="confirm_password" required>
            </div>
            
            <div class="form-actions">
                <button type="button" class="btn btn-secondary" onclick="closePasswordModal()">Cancel</button>
                <button type="submit" class="btn btn-primary">Change Password</button>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Settings tab functionality
    const tabLinks = document.querySelectorAll('.tab-link');
    const tabContents = document.querySelectorAll('.tab-content');
    
    tabLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const targetTab = this.getAttribute('data-tab');
            
            // Remove active class from all tabs
            tabLinks.forEach(l => l.classList.remove('active'));
            tabContents.forEach(c => c.classList.remove('active'));
            
            // Add active class to clicked tab
            this.classList.add('active');
            document.getElementById(targetTab).classList.add('active');
        });
    });
    
    // Change password modal
    const changePasswordBtn = document.getElementById('changePasswordBtn');
    const passwordModal = document.getElementById('changePasswordModal');
    
    changePasswordBtn?.addEventListener('click', function() {
        passwordModal.style.display = 'flex';
    });
    
    window.closePasswordModal = function() {
        passwordModal.style.display = 'none';
    };
    
    // Password strength indicator
    const newPasswordInput = document.getElementById('new_password');
    const strengthFill = document.querySelector('.strength-fill');
    const strengthLevel = document.getElementById('strengthLevel');
    
    newPasswordInput?.addEventListener('input', function() {
        const password = this.value;
        const strength = calculatePasswordStrength(password);
        
        strengthFill.style.width = strength.percentage + '%';
        strengthFill.className = 'strength-fill strength-' + strength.level;
        strengthLevel.textContent = strength.text;
    });
    
    function calculatePasswordStrength(password) {
        let score = 0;
        
        if (password.length >= 8) score += 25;
        if (password.match(/[a-z]/)) score += 25;
        if (password.match(/[A-Z]/)) score += 25;
        if (password.match(/[0-9]/)) score += 25;
        if (password.match(/[^a-zA-Z0-9]/)) score += 25;
        
        if (score <= 25) return { percentage: score, level: 'weak', text: 'Weak' };
        if (score <= 50) return { percentage: score, level: 'fair', text: 'Fair' };
        if (score <= 75) return { percentage: score, level: 'good', text: 'Good' };
        return { percentage: score, level: 'strong', text: 'Strong' };
    }
    
    // Color picker functionality
    const colorPicker = document.getElementById('primary_color');
    const colorHex = document.querySelector('.color-hex');
    
    colorPicker?.addEventListener('input', function() {
        colorHex.value = this.value;
        // Preview color change
        document.documentElement.style.setProperty('--primary-color', this.value);
    });
    
    // Reset theme
    document.getElementById('resetThemeBtn')?.addEventListener('click', function() {
        if (confirm('Reset all appearance settings to default?')) {
            document.documentElement.style.setProperty('--primary-color', '#0066cc');
            colorPicker.value = '#0066cc';
            colorHex.value = '#0066cc';
            window.showToast && window.showToast('Theme reset to default', 'success');
        }
    });
    
    // Integration buttons
    document.querySelectorAll('.integration-card .btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const integration = this.closest('.integration-card').querySelector('h4').textContent;
            
            if (this.textContent.includes('Connect')) {
                window.showToast && window.showToast('Connecting to ' + integration + '...', 'info');
            } else {
                window.showToast && window.showToast('Opening ' + integration + ' configuration...', 'info');
            }
        });
    });
});
</script>

<?php include 'includes/footer.php'; ?>
-------------------- END OF FILE --------------------

### FILE 21: sitemap.xml
- Type: XML
- Size: 5.24 KB
- Path: .
- Name: sitemap.xml
------------------------------------------------------------
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
        http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">

    <!-- Homepage / Dashboard -->
    <url>
        <loc>https://yourdomain.com/</loc>
        <lastmod>2025-09-03</lastmod>
        <changefreq>daily</changefreq>
        <priority>1.0</priority>
    </url>

    <!-- Main Application Pages -->
    
    <!-- User Management -->
    <url>
        <loc>https://yourdomain.com/users.php</loc>
        <lastmod>2025-09-03</lastmod>
        <changefreq>weekly</changefreq>
        <priority>0.8</priority>
    </url>

    <!-- Panel Management -->
    <url>
        <loc>https://yourdomain.com/panel.php</loc>
        <lastmod>2025-09-03</lastmod>
        <changefreq>weekly</changefreq>
        <priority>0.9</priority>
    </url>

    <!-- Supply Management -->
    <url>
        <loc>https://yourdomain.com/supply.php</loc>
        <lastmod>2025-09-03</lastmod>
        <changefreq>weekly</changefreq>
        <priority>0.7</priority>
    </url>

    <!-- Demand Analysis -->
    <url>
        <loc>https://yourdomain.com/demand.php</loc>
        <lastmod>2025-09-03</lastmod>
        <changefreq>monthly</changefreq>
        <priority>0.7</priority>
    </url>

    <!-- Finance Management -->
    <url>
        <loc>https://yourdomain.com/finance.php</loc>
        <lastmod>2025-09-03</lastmod>
        <changefreq>weekly</changefreq>
        <priority>0.8</priority>
    </url>

    <!-- Support Center -->
    <url>
        <loc>https://yourdomain.com/support.php</loc>
        <lastmod>2025-09-03</lastmod>
        <changefreq>monthly</changefreq>
        <priority>0.6</priority>
    </url>

    <!-- System Settings -->
    <url>
        <loc>https://yourdomain.com/settings.php</loc>
        <lastmod>2025-09-03</lastmod>
        <changefreq>monthly</changefreq>
        <priority>0.5</priority>
    </url>

    <!-- Static Pages (if you add them) -->
    
    <!-- About Page (if created) -->
    <!--
    <url>
        <loc>https://yourdomain.com/about.php</loc>
        <lastmod>2025-09-03</lastmod>
        <changefreq>yearly</changefreq>
        <priority>0.5</priority>
    </url>
    -->

    <!-- Privacy Policy (if created) -->
    <!--
    <url>
        <loc>https://yourdomain.com/privacy-policy.php</loc>
        <lastmod>2025-09-03</lastmod>
        <changefreq>yearly</changefreq>
        <priority>0.3</priority>
    </url>
    -->

    <!-- Terms of Service (if created) -->
    <!--
    <url>
        <loc>https://yourdomain.com/terms-of-service.php</loc>
        <lastmod>2025-09-03</lastmod>
        <changefreq>yearly</changefreq>
        <priority>0.3</priority>
    </url>
    -->

    <!-- Contact Page (if created) -->
    <!--
    <url>
        <loc>https://yourdomain.com/contact.php</loc>
        <lastmod>2025-09-03</lastmod>
        <changefreq>monthly</changefreq>
        <priority>0.4</priority>
    </url>
    -->

    <!-- Blog/News Section (if added) -->
    <!--
    <url>
        <loc>https://yourdomain.com/news.php</loc>
        <lastmod>2025-09-03</lastmod>
        <changefreq>weekly</changefreq>
        <priority>0.6</priority>
    </url>
    -->

    <!-- API Documentation (if public) -->
    <!--
    <url>
        <loc>https://yourdomain.com/api-docs.php</loc>
        <lastmod>2025-09-03</lastmod>
        <changefreq>monthly</changefreq>
        <priority>0.4</priority>
    </url>
    -->

    <!-- Help/Documentation Pages (if created) -->
    <!--
    <url>
        <loc>https://yourdomain.com/help.php</loc>
        <lastmod>2025-09-03</lastmod>
        <changefreq>monthly</changefreq>
        <priority>0.5</priority>
    </url>

    <url>
        <loc>https://yourdomain.com/user-guide.php</loc>
        <lastmod>2025-09-03</lastmod>
        <changefreq>monthly</changefreq>
        <priority>0.5</priority>
    </url>
    -->

</urlset>

<!-- 
Notes for maintaining this sitemap:

1. Update the domain "yourdomain.com" with your actual domain
2. Update lastmod dates when pages are significantly changed
3. Adjust changefreq based on how often you update each page:
   - daily: For pages that change daily (like dashboard)
   - weekly: For regularly updated pages (like user/panel management)
   - monthly: For occasionally updated pages (like settings)
   - yearly: For rarely changing pages (like privacy policy)

4. Priority values (0.1 to 1.0):
   - 1.0: Homepage (most important)
   - 0.8-0.9: Main application pages
   - 0.5-0.7: Secondary pages
   - 0.1-0.4: Legal/static pages

5. Submit this sitemap to search engines:
   - Google Search Console: https://search.google.com/search-console
   - Bing Webmaster Tools: https://www.bing.com/webmasters
   - Add reference in robots.txt (already included)

6. Consider creating separate sitemaps for:
   - Dynamic content (if you have many panels, users, etc.)
   - Images (if you have many images to index)
   - News (if you add a news/blog section)

7. Automatically update this sitemap when:
   - New pages are added
   - Existing pages are significantly modified
   - Pages are removed or redirected

8. Monitor in search console for:
   - Crawl errors
   - Index status
   - Coverage issues
-->
-------------------- END OF FILE --------------------

### FILE 22: supply.php
- Type: PHP
- Size: 33.23 KB
- Path: .
- Name: supply.php
------------------------------------------------------------
<?php
require_once 'config.php';
requireLogin();

$page_title = 'Affiliate Management';
$page_description = 'Manage affiliate partners and track signups';

$success = '';
$error = '';

// Handle form submission
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
    
    // CREATE AFFILIATE
    if ($_POST['action'] === 'create_affiliate') {
        $type = $_POST['type'] ?? '';
        $company_name = trim($_POST['company_name'] ?? '');
        $incharge_name = trim($_POST['incharge_name'] ?? '');
        $state = $_POST['state'] ?? '';
        $postal_code = trim($_POST['postal_code'] ?? '');
        $place_name = trim($_POST['place_name'] ?? '');
        $mobile = trim($_POST['mobile'] ?? '');
        $email = trim($_POST['email'] ?? '');
        $url = trim($_POST['url'] ?? '');
        $signup_reward = floatval($_POST['signup_reward'] ?? 0);
        
        // Validation
        if (empty($type) || empty($company_name) || empty($incharge_name) || empty($state) || 
            empty($postal_code) || empty($place_name) || empty($mobile) || empty($email)) {
            $error = 'All required fields must be filled';
        } elseif (!preg_match('/^\d{6}$/', $postal_code)) {
            $error = 'Postal code must be exactly 6 digits';
        } elseif (!preg_match('/^\d{10}$/', $mobile)) {
            $error = 'Mobile number must be exactly 10 digits';
        } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
            $error = 'Invalid email address';
        } else {
            try {
                $pdo = getDBConnection();
                
                // Generate unique affiliate code
                do {
                    $affiliate_code = 'AFF' . strtoupper(substr(md5(uniqid(rand(), true)), 0, 8));
                    $checkStmt = $pdo->prepare("SELECT id FROM affiliates WHERE affiliate_code = ?");
                    $checkStmt->execute([$affiliate_code]);
                } while ($checkStmt->fetch());
                
                // Insert affiliate
                $stmt = $pdo->prepare("
                    INSERT INTO affiliates 
                    (affiliate_code, type, company_name, incharge_name, state, postal_code, 
                     place_name, mobile, email, url, signup_reward, created_by)
                    VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
                ");
                
                $stmt->execute([
                    $affiliate_code, $type, $company_name, $incharge_name, $state, $postal_code,
                    $place_name, $mobile, $email, $url, $signup_reward, $_SESSION['admin_id']
                ]);
                
                $affiliate_id = $pdo->lastInsertId();
                
                // Handle file uploads
                if (!empty($_FILES['attachments']['name'][0])) {
                    $upload_dir = 'uploads/affiliates/';
                    if (!file_exists($upload_dir)) {
                        mkdir($upload_dir, 0755, true);
                    }
                    
                    $allowed_types = ['application/pdf', 'image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
                    $max_files = 10;
                    
                    for ($i = 0; $i < min(count($_FILES['attachments']['name']), $max_files); $i++) {
                        if ($_FILES['attachments']['error'][$i] === UPLOAD_ERR_OK) {
                            $file_type = $_FILES['attachments']['type'][$i];
                            
                            if (in_array($file_type, $allowed_types)) {
                                $file_name = $_FILES['attachments']['name'][$i];
                                $file_size = $_FILES['attachments']['size'][$i];
                                $file_tmp = $_FILES['attachments']['tmp_name'][$i];
                                
                                // Generate unique filename
                                $extension = pathinfo($file_name, PATHINFO_EXTENSION);
                                $unique_name = $affiliate_code . '_' . time() . '_' . $i . '.' . $extension;
                                $file_path = $upload_dir . $unique_name;
                                
                                if (move_uploaded_file($file_tmp, $file_path)) {
                                    $attachStmt = $pdo->prepare("
                                        INSERT INTO affiliate_attachments 
                                        (affiliate_id, file_name, file_path, file_type, file_size)
                                        VALUES (?, ?, ?, ?, ?)
                                    ");
                                    $attachStmt->execute([
                                        $affiliate_id, $file_name, $file_path, $file_type, $file_size
                                    ]);
                                }
                            }
                        }
                    }
                }
                
                logActivity($_SESSION['admin_id'], 'create_affiliate', "Created affiliate: $affiliate_code", 'affiliate', $affiliate_id);
                
                $success = "Affiliate created successfully! Affiliate Code: <strong>$affiliate_code</strong>";
            } catch (Exception $e) {
                $error = 'An error occurred. Please try again.';
                error_log("Create affiliate error: " . $e->getMessage());
            }
        }
    }
    
    // DELETE AFFILIATE
    if ($_POST['action'] === 'delete_affiliate') {
        $delete_id = intval($_POST['affiliate_id'] ?? 0);
        
        if ($delete_id) {
            try {
                $pdo = getDBConnection();
                
                // Get affiliate code for logging
                $stmt = $pdo->prepare("SELECT affiliate_code FROM affiliates WHERE id = ?");
                $stmt->execute([$delete_id]);
                $affiliate_code = $stmt->fetchColumn();
                
                // Delete affiliate (cascade will delete attachments and signups)
                $stmt = $pdo->prepare("DELETE FROM affiliates WHERE id = ?");
                $stmt->execute([$delete_id]);
                
                logActivity($_SESSION['admin_id'], 'delete_affiliate', "Deleted affiliate: $affiliate_code", 'affiliate', $delete_id);
                
                $success = 'Affiliate deleted successfully!';
            } catch (Exception $e) {
                $error = 'An error occurred while deleting. Please try again.';
                error_log("Delete affiliate error: " . $e->getMessage());
            }
        }
    }
}

// Fetch all affiliates
try {
    $pdo = getDBConnection();
    $stmt = $pdo->query("SELECT * FROM affiliates ORDER BY created_at DESC");
    $affiliates = $stmt->fetchAll();
} catch (Exception $e) {
    $affiliates = [];
    error_log("Fetch affiliates error: " . $e->getMessage());
}

// Indian states list
$indian_states = [
    'Andhra Pradesh', 'Arunachal Pradesh', 'Assam', 'Bihar', 'Chhattisgarh', 'Goa', 'Gujarat',
    'Haryana', 'Himachal Pradesh', 'Jharkhand', 'Karnataka', 'Kerala', 'Madhya Pradesh',
    'Maharashtra', 'Manipur', 'Meghalaya', 'Mizoram', 'Nagaland', 'Odisha', 'Punjab',
    'Rajasthan', 'Sikkim', 'Tamil Nadu', 'Telangana', 'Tripura', 'Uttar Pradesh',
    'Uttarakhand', 'West Bengal', 'Andaman and Nicobar Islands', 'Chandigarh',
    'Dadra and Nagar Haveli and Daman and Diu', 'Delhi', 'Jammu and Kashmir', 'Ladakh',
    'Lakshadweep', 'Puducherry'
];

include 'includes/header.php';
?>

<style>
.affiliate-stats {
    background: white;
    padding: 20px 24px;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin-bottom: 24px;
}

.affiliate-stats-row {
    display: flex;
    gap: 32px;
    align-items: center;
    flex-wrap: wrap;
}

.affiliate-table {
    width: 100%;
    background: white;
    border-radius: 12px;
    overflow-x: auto;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin-top: 30px;
}

.affiliate-table table {
    width: 100%;
    min-width: 1200px;
    border-collapse: separate;
    border-spacing: 0;
}

.affiliate-table thead {
    background: #f9fafb;
}

.affiliate-table th {
    padding: 16px 12px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e5e7eb;
    white-space: nowrap;
}

.affiliate-table td {
    padding: 16px 12px;
    font-size: 14px;
    color: #1f2937;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.affiliate-table tbody tr:hover {
    background: #f9fafb;
}

.affiliate-code {
    font-family: monospace;
    font-weight: 700;
    color: #0066cc;
    font-size: 15px;
}

.affiliate-link {
    font-size: 12px;
    color: #6b7280;
    word-break: break-all;
}

.copy-btn {
    background: #f3f4f6;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    margin-left: 8px;
    transition: background 0.2s;
}

.copy-btn:hover {
    background: #e5e7eb;
}

/* ===== IMPROVED MODAL STYLES ===== */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.modal-content {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    margin: 20px auto;
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header {
    padding: 24px 32px;
    border-bottom: 2px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 16px 16px 0 0;
}

.modal-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
}

.modal-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    font-size: 28px;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.modal-content form {
    padding: 32px;
}

/* File Upload Styling */
.file-upload-area {
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    background: #f9fafb;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 8px;
}

.file-upload-area:hover {
    border-color: #667eea;
    background: #f0f4ff;
}

.file-upload-area.dragover {
    border-color: #667eea;
    background: #e0e7ff;
    border-width: 3px;
}

.file-upload-area p {
    margin: 0;
    color: #6b7280;
    font-size: 15px;
}

.file-upload-area small {
    color: #9ca3af;
    font-size: 13px;
}

.file-list {
    margin-top: 16px;
    max-height: 200px;
    overflow-y: auto;
}

.file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 14px;
    transition: all 0.2s;
}

.file-item:hover {
    border-color: #667eea;
    background: #f9fafb;
}

.file-remove {
    background: #fee2e2;
    color: #dc2626;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

.file-remove:hover {
    background: #fecaca;
}

/* Scrollbar styling for modal */
.modal-content::-webkit-scrollbar {
    width: 8px;
}

.modal-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.modal-content::-webkit-scrollbar-thumb {
    background: #667eea;
    border-radius: 10px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: #5568d3;
}

/* Action Buttons */
.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.action-btn-view {
    background: #0066cc;
    color: white;
}

.action-btn-view:hover {
    background: #0052a3;
    color: white;
    text-decoration: none;
}

.action-btn-edit {
    background: #ffa500;
    color: white;
}

.action-btn-edit:hover {
    background: #e69500;
    color: white;
    text-decoration: none;
}

.action-btn-delete {
    background: #dc3545;
    color: white;
}

.action-btn-delete:hover {
    background: #bb2d3b;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .modal-content {
        max-width: 100%;
        margin: 10px;
    }
    
    .modal-header {
        padding: 20px 24px;
    }
    
    .modal-content form {
        padding: 24px 20px;
    }
}
</style>

<div class="page-container">
    <div class="page-header">
        <div>
            <h1>Affiliate Management</h1>
            <p class="page-subtitle">Manage affiliate partners and track panel member signups</p>
        </div>
        <div class="header-actions">
            <button class="btn btn-primary" id="addAffiliateBtn">
                <span>➕</span> Add New Affiliate
            </button>
        </div>
    </div>

    <?php if ($success): ?>
        <div class="success-message">
            <span class="message-icon">✅</span>
            <?php echo $success; ?>
        </div>
    <?php endif; ?>
    
    <?php if ($error): ?>
        <div class="error-message">
            <span class="message-icon">⚠️</span>
            <?php echo htmlspecialchars($error); ?>
        </div>
    <?php endif; ?>

    <!-- Affiliate Statistics -->
    <div class="affiliate-stats">
        <div class="affiliate-stats-row">
            <div style="display: flex; align-items: center; gap: 10px;">
                <span style="font-size: 14px; color: #6b7280; font-weight: 500;">Total Affiliates:</span>
                <span style="font-size: 20px; font-weight: 700; color: #0066cc;"><?php echo count($affiliates); ?></span>
            </div>
            <div style="height: 24px; width: 1px; background: #e5e7eb;"></div>
            <div style="display: flex; align-items: center; gap: 10px;">
                <span style="font-size: 14px; color: #6b7280; font-weight: 500;">Active:</span>
                <span style="font-size: 20px; font-weight: 700; color: #059669;">
                    <?php echo count(array_filter($affiliates, fn($a) => $a['status'] === 'active')); ?>
                </span>
            </div>
            <div style="height: 24px; width: 1px; background: #e5e7eb;"></div>
            <div style="display: flex; align-items: center; gap: 10px;">
                <span style="font-size: 14px; color: #6b7280; font-weight: 500;">Total Signups:</span>
                <span style="font-size: 20px; font-weight: 700; color: #7c3aed;">
                    <?php echo array_sum(array_column($affiliates, 'total_signups')); ?>
                </span>
            </div>
            <div style="height: 24px; width: 1px; background: #e5e7eb;"></div>
            <div style="display: flex; align-items: center; gap: 10px;">
                <span style="font-size: 14px; color: #6b7280; font-weight: 500;">Verified Signups:</span>
                <span style="font-size: 20px; font-weight: 700; color: #ea580c;">
                    <?php echo array_sum(array_column($affiliates, 'total_verified_signups')); ?>
                </span>
            </div>
        </div>
    </div>

    <!-- Affiliates Table -->
    <div class="affiliate-table">
        <table>
            <thead>
                <tr>
                    <th style="width: 120px;">Code</th>
                    <th style="width: 200px;">Company/Name</th>
                    <th style="width: 150px;">In-charge</th>
                    <th style="width: 120px;">Location</th>
                    <th style="width: 130px;">Contact</th>
                    <th style="width: 100px;">Reward</th>
                    <th style="width: 100px;">Signups</th>
                    <th style="width: 100px;">Status</th>
                    <th style="width: 200px;">Actions</th>
                </tr>
            </thead>
            <tbody>
                <?php if (empty($affiliates)): ?>
                    <tr>
                        <td colspan="9" style="text-align: center; padding: 40px; color: #9ca3af;">
                            No affiliates found. Click "Add New Affiliate" to create one.
                        </td>
                    </tr>
                <?php else: ?>
                    <?php foreach ($affiliates as $affiliate): ?>
                    <tr>
                        <td>
                            <div class="affiliate-code"><?php echo htmlspecialchars($affiliate['affiliate_code']); ?></div>
                            <div class="affiliate-link">
                                <?php 
                                $signup_url = 'https://relevantreflex.com/signup.php?ref=' . $affiliate['affiliate_code'];
                                echo substr($signup_url, 0, 30) . '...';
                                ?>
                                <button class="copy-btn" onclick="copyToClipboard('<?php echo $signup_url; ?>')">📋 Copy</button>
                            </div>
                        </td>
                        <td>
                            <div style="font-weight: 600;"><?php echo htmlspecialchars($affiliate['company_name']); ?></div>
                            <div style="font-size: 12px; color: #6b7280;">
                                <?php echo ucfirst($affiliate['type']); ?>
                            </div>
                        </td>
                        <td><?php echo htmlspecialchars($affiliate['incharge_name']); ?></td>
                        <td>
                            <div style="font-weight: 500;"><?php echo htmlspecialchars($affiliate['place_name']); ?></div>
                            <div style="font-size: 12px; color: #6b7280;"><?php echo htmlspecialchars($affiliate['state']); ?></div>
                        </td>
                        <td>
                            <div style="font-size: 13px;"><?php echo htmlspecialchars($affiliate['mobile']); ?></div>
                            <div style="font-size: 12px; color: #6b7280; word-break: break-all;">
                                <?php echo htmlspecialchars($affiliate['email']); ?>
                            </div>
                        </td>
                        <td>
                            <span style="font-weight: 700; color: #059669;">
                                ₹<?php echo number_format($affiliate['signup_reward'], 2); ?>
                            </span>
                        </td>
                        <td>
                            <div style="font-weight: 600; color: #0066cc;">
                                <?php echo $affiliate['total_signups']; ?>
                            </div>
                            <div style="font-size: 11px; color: #059669;">
                                <?php echo $affiliate['total_verified_signups']; ?> verified
                            </div>
                        </td>
                        <td>
                            <span class="badge badge-<?php echo strtolower($affiliate['status']); ?>">
                                <?php echo ucfirst($affiliate['status']); ?>
                            </span>
                        </td>
                        <td>
                            <div style="display: flex; gap: 6px; flex-wrap: wrap;">
                                <a href="affiliate_view.php?id=<?php echo $affiliate['id']; ?>" 
                                   class="action-btn action-btn-view">
                                    👁️ View
                                </a>
                                <a href="affiliate_edit.php?id=<?php echo $affiliate['id']; ?>" 
                                   class="action-btn action-btn-edit">
                                    ✏️ Edit
                                </a>
                                <form method="POST" style="display: inline; margin: 0;" 
                                      onsubmit="return confirm('Are you sure you want to delete this affiliate?\n\nAffiliate: <?php echo htmlspecialchars($affiliate['company_name']); ?>\nCode: <?php echo htmlspecialchars($affiliate['affiliate_code']); ?>\n\nThis will also delete all associated signups and attachments. This action cannot be undone!');">
                                    <input type="hidden" name="action" value="delete_affiliate">
                                    <input type="hidden" name="affiliate_id" value="<?php echo $affiliate['id']; ?>">
                                    <button type="submit" class="action-btn action-btn-delete">
                                        🗑️ Delete
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<!-- Add Affiliate Modal -->
<div id="addAffiliateModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2>✨ Add New Affiliate Partner</h2>
            <button class="modal-close" type="button">&times;</button>
        </div>
        
        <form method="POST" enctype="multipart/form-data" id="affiliateForm">
            <input type="hidden" name="action" value="create_affiliate">
            
            <div class="form-row" style="margin-bottom: 24px;">
                <div class="form-group" style="flex: 1;">
                    <label for="type" style="font-weight: 600; color: #374151; margin-bottom: 8px; display: block;">
                        Type of Affiliate <span style="color: #dc2626;">*</span>
                    </label>
                    <select id="type" name="type" required 
                            style="width: 100%; padding: 12px 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px;">
                        <option value="">Select Type</option>
                        <option value="individual">Individual</option>
                        <option value="company">Company</option>
                    </select>
                </div>
                
                <div class="form-group" style="flex: 1;">
                    <label for="company_name" style="font-weight: 600; color: #374151; margin-bottom: 8px; display: block;">
                        Name of Affiliate (as per documents) <span style="color: #dc2626;">*</span>
                    </label>
                    <input type="text" id="company_name" name="company_name" required 
                           placeholder="Company/Individual Name"
                           style="width: 100%; padding: 12px 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px;">
                </div>
            </div>
            
            <div class="form-row" style="margin-bottom: 24px;">
                <div class="form-group" style="flex: 1;">
                    <label for="incharge_name" style="font-weight: 600; color: #374151; margin-bottom: 8px; display: block;">
                        Name of In-charge (as per PAN) <span style="color: #dc2626;">*</span>
                    </label>
                    <input type="text" id="incharge_name" name="incharge_name" required 
                           placeholder="Director/Partner/Proprietor Name"
                           style="width: 100%; padding: 12px 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px;">
                </div>
                
                <div class="form-group" style="flex: 1;">
                    <label for="state" style="font-weight: 600; color: #374151; margin-bottom: 8px; display: block;">
                        State <span style="color: #dc2626;">*</span>
                    </label>
                    <select id="state" name="state" required
                            style="width: 100%; padding: 12px 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px;">
                        <option value="">Select State</option>
                        <?php foreach ($indian_states as $state): ?>
                            <option value="<?php echo $state; ?>"><?php echo $state; ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
            
            <div class="form-row" style="margin-bottom: 24px;">
                <div class="form-group" style="flex: 1;">
                    <label for="postal_code" style="font-weight: 600; color: #374151; margin-bottom: 8px; display: block;">
                        Postal Code <span style="color: #dc2626;">*</span>
                    </label>
                    <input type="text" id="postal_code" name="postal_code" required 
                           pattern="\d{6}" maxlength="6" placeholder="123456"
                           style="width: 100%; padding: 12px 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px;">
                    <small style="color: #6b7280; font-size: 12px; margin-top: 4px; display: block;">6 digits required</small>
                </div>
                
                <div class="form-group" style="flex: 1;">
                    <label for="place_name" style="font-weight: 600; color: #374151; margin-bottom: 8px; display: block;">
                        Place Name <span style="color: #dc2626;">*</span>
                    </label>
                    <input type="text" id="place_name" name="place_name" required 
                           placeholder="City/Town/Village"
                           style="width: 100%; padding: 12px 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px;">
                </div>
            </div>
            
            <div class="form-row" style="margin-bottom: 24px;">
                <div class="form-group" style="flex: 1;">
                    <label for="mobile" style="font-weight: 600; color: #374151; margin-bottom: 8px; display: block;">
                        Mobile Number <span style="color: #dc2626;">*</span>
                    </label>
                    <input type="text" id="mobile" name="mobile" required 
                           pattern="\d{10}" maxlength="10" placeholder="9876543210"
                           style="width: 100%; padding: 12px 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px;">
                    <small style="color: #6b7280; font-size: 12px; margin-top: 4px; display: block;">10 digits required</small>
                </div>
                
                <div class="form-group" style="flex: 1;">
                    <label for="email" style="font-weight: 600; color: #374151; margin-bottom: 8px; display: block;">
                        Email Address <span style="color: #dc2626;">*</span>
                    </label>
                    <input type="email" id="email" name="email" required 
                           placeholder="affiliate@example.com"
                           style="width: 100%; padding: 12px 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px;">
                </div>
            </div>
            
            <div class="form-row" style="margin-bottom: 24px;">
                <div class="form-group" style="flex: 1;">
                    <label for="url" style="font-weight: 600; color: #374151; margin-bottom: 8px; display: block;">
                        Website/Channel URL
                    </label>
                    <input type="text" id="url" name="url" 
                           placeholder="https://example.com or YouTube channel"
                           style="width: 100%; padding: 12px 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px;">
                </div>
                
                <div class="form-group" style="flex: 1;">
                    <label for="signup_reward" style="font-weight: 600; color: #374151; margin-bottom: 8px; display: block;">
                        Signup Reward (₹) <span style="color: #dc2626;">*</span>
                    </label>
                    <input type="number" id="signup_reward" name="signup_reward" required 
                           min="0" step="0.01" placeholder="50.00"
                           style="width: 100%; padding: 12px 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px;">
                    <small style="color: #6b7280; font-size: 12px; margin-top: 4px; display: block;">Amount per verified signup</small>
                </div>
            </div>
            
            <div class="form-group" style="margin-bottom: 32px;">
                <label style="font-weight: 600; color: #374151; margin-bottom: 8px; display: block;">
                    📎 Attachments (Max 10 files - PDF or Images)
                </label>
                <div class="file-upload-area" id="fileUploadArea">
                    <p style="margin: 0 0 8px 0; color: #374151; font-weight: 500;">
                        Click to upload or drag and drop files here
                    </p>
                    <small style="color: #6b7280;">PDF, JPG, PNG, GIF (Max 10 files, 5MB each)</small>
                    <input type="file" id="attachments" name="attachments[]" 
                           multiple accept=".pdf,.jpg,.jpeg,.png,.gif" 
                           style="display: none;">
                </div>
                <div class="file-list" id="fileList"></div>
            </div>
            
            <div class="form-actions" style="display: flex; gap: 12px; justify-content: flex-end; padding-top: 24px; border-top: 2px solid #e5e7eb;">
                <button type="button" class="btn btn-secondary" onclick="closeModal()"
                        style="padding: 12px 24px; border-radius: 8px; font-weight: 600;">
                    Cancel
                </button>
                <button type="submit" class="btn btn-primary"
                        style="padding: 12px 32px; border-radius: 8px; font-weight: 600;">
                    <span>✨</span> Create Affiliate
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function closeModal() {
    document.getElementById('addAffiliateModal').style.display = 'none';
    document.getElementById('affiliateForm').reset();
    selectedFiles = [];
    updateFileList();
}

document.getElementById('addAffiliateBtn')?.addEventListener('click', function() {
    document.getElementById('addAffiliateModal').style.display = 'flex';
});

document.querySelector('.modal-close')?.addEventListener('click', closeModal);

window.addEventListener('click', function(event) {
    if (event.target === document.getElementById('addAffiliateModal')) {
        closeModal();
    }
});

function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(function() {
        alert('Affiliate link copied to clipboard!');
    }).catch(function(err) {
        console.error('Could not copy text: ', err);
    });
}

// File upload handling
const fileUploadArea = document.getElementById('fileUploadArea');
const fileInput = document.getElementById('attachments');
const fileList = document.getElementById('fileList');
let selectedFiles = [];

fileUploadArea.addEventListener('click', () => fileInput.click());

fileUploadArea.addEventListener('dragover', (e) => {
    e.preventDefault();
    fileUploadArea.classList.add('dragover');
});

fileUploadArea.addEventListener('dragleave', () => {
    fileUploadArea.classList.remove('dragover');
});

fileUploadArea.addEventListener('drop', (e) => {
    e.preventDefault();
    fileUploadArea.classList.remove('dragover');
    handleFiles(e.dataTransfer.files);
});

fileInput.addEventListener('change', (e) => {
    handleFiles(e.target.files);
});

function handleFiles(files) {
    const maxFiles = 10;
    const allowedTypes = ['application/pdf', 'image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
    
    for (let file of files) {
        if (selectedFiles.length >= maxFiles) {
            alert(`Maximum ${maxFiles} files allowed`);
            break;
        }
        
        if (!allowedTypes.includes(file.type)) {
            alert(`File type not allowed: ${file.name}`);
            continue;
        }
        
        selectedFiles.push(file);
    }
    
    updateFileList();
}

function updateFileList() {
    fileList.innerHTML = '';
    
    selectedFiles.forEach((file, index) => {
        const fileItem = document.createElement('div');
        fileItem.className = 'file-item';
        fileItem.innerHTML = `
            <span>${file.name} (${(file.size / 1024).toFixed(2)} KB)</span>
            <button type="button" class="file-remove" onclick="removeFile(${index})">Remove</button>
        `;
        fileList.appendChild(fileItem);
    });
    
    // Update the file input
    const dataTransfer = new DataTransfer();
    selectedFiles.forEach(file => dataTransfer.items.add(file));
    fileInput.files = dataTransfer.files;
}

function removeFile(index) {
    selectedFiles.splice(index, 1);
    updateFileList();
}
</script>

<?php include 'includes/footer.php'; ?>
-------------------- END OF FILE --------------------

### FILE 23: support.php
- Type: PHP
- Size: 12.32 KB
- Path: .
- Name: support.php
------------------------------------------------------------
<?php
require_once 'config.php';

$page_title = 'Support Center';
$page_description = 'Get help, submit tickets and access resources for your panel management system';

// Handle support form submission
if ($_POST && isset($_POST['action']) && $_POST['action'] === 'submit_ticket') {
    // Process support ticket
    $name = $_POST['name'] ?? '';
    $email = $_POST['email'] ?? '';
    $subject = $_POST['subject'] ?? '';
    $message = $_POST['message'] ?? '';
    $priority = $_POST['priority'] ?? 'Medium';
    
    // Add database insertion logic here
    // $pdo = getDBConnection();
    // Insert support ticket into database
    
    $success_message = "Support ticket submitted successfully! We'll get back to you within 24 hours.";
}

// Sample support data
$support_stats = [
    'open_tickets' => 3,
    'avg_response_time' => '2.4 hours',
    'satisfaction_rate' => '98.5%',
    'resolved_today' => 12
];

$recent_tickets = [
    ['id' => 1001, 'subject' => 'Dashboard loading slowly', 'status' => 'In Progress', 'priority' => 'Medium', 'created' => '2025-09-02'],
    ['id' => 1002, 'subject' => 'Export function not working', 'status' => 'Resolved', 'priority' => 'High', 'created' => '2025-09-01'],
    ['id' => 1003, 'subject' => 'User permissions question', 'status' => 'Open', 'priority' => 'Low', 'created' => '2025-08-31']
];

$faq_items = [
    ['question' => 'How do I reset my password?', 'category' => 'Account'],
    ['question' => 'How to create a new panel?', 'category' => 'Panels'],
    ['question' => 'Where can I view response analytics?', 'category' => 'Analytics'],
    ['question' => 'How to export data to Excel?', 'category' => 'Data Export'],
    ['question' => 'What are the system requirements?', 'category' => 'Technical'],
    ['question' => 'How to manage user permissions?', 'category' => 'Administration']
];

include 'includes/header.php';
?>

<div class="page-container">
    <div class="page-header">
        <div>
            <h1>Support Center</h1>
            <p class="page-subtitle">We're here to help you succeed with your panel management</p>
        </div>
    </div>

    <?php if (isset($success_message)): ?>
        <div class="success-message">
            <span class="message-icon">✅</span>
            <?php echo htmlspecialchars($success_message); ?>
        </div>
    <?php endif; ?>

    <!-- Support Stats -->
    <div class="support-overview">
        <div class="stats-grid">
            <div class="stat-card support-card">
                <div class="stat-icon">🎫</div>
                <div class="stat-content">
                    <h3><?php echo $support_stats['open_tickets']; ?></h3>
                    <p>Your Open Tickets</p>
                </div>
            </div>
            
            <div class="stat-card support-card">
                <div class="stat-icon">⚡</div>
                <div class="stat-content">
                    <h3><?php echo $support_stats['avg_response_time']; ?></h3>
                    <p>Avg Response Time</p>
                </div>
            </div>
            
            <div class="stat-card support-card">
                <div class="stat-icon">😊</div>
                <div class="stat-content">
                    <h3><?php echo $support_stats['satisfaction_rate']; ?></h3>
                    <p>Satisfaction Rate</p>
                </div>
            </div>
            
            <div class="stat-card support-card">
                <div class="stat-icon">🔧</div>
                <div class="stat-content">
                    <h3><?php echo $support_stats['resolved_today']; ?></h3>
                    <p>Resolved Today</p>
                </div>
            </div>
        </div>
    </div>

    <div class="support-content">
        <div class="support-grid">
            <!-- Contact Support -->
            <div class="support-section">
                <h2>Submit Support Ticket</h2>
                <form class="support-form" method="POST" action="">
                    <input type="hidden" name="action" value="submit_ticket">
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="name">Your Name *</label>
                            <input type="text" id="name" name="name" required placeholder="Enter your full name">
                        </div>
                        
                        <div class="form-group">
                            <label for="email">Email Address *</label>
                            <input type="email" id="email" name="email" required placeholder="your@email.com">
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="subject">Subject *</label>
                            <input type="text" id="subject" name="subject" required placeholder="Brief description of your issue">
                        </div>
                        
                        <div class="form-group">
                            <label for="priority">Priority</label>
                            <select id="priority" name="priority">
                                <option value="Low">Low</option>
                                <option value="Medium" selected>Medium</option>
                                <option value="High">High</option>
                                <option value="Critical">Critical</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="message">Detailed Message *</label>
                        <textarea id="message" name="message" rows="6" required placeholder="Please describe your issue in detail. Include any error messages or steps that led to the problem."></textarea>
                    </div>
                    
                    <div class="form-group">
                        <label for="attachment">Attachment (optional)</label>
                        <input type="file" id="attachment" name="attachment" accept=".jpg,.jpeg,.png,.pdf,.doc,.docx">
                        <small class="form-help">Max file size: 5MB. Accepted formats: JPG, PNG, PDF, DOC</small>
                    </div>
                    
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">
                            <span>📧</span> Submit Ticket
                        </button>
                    </div>
                </form>
            </div>
            
            <!-- Quick Help Resources -->
            <div class="support-section">
                <h2>Quick Help</h2>
                <div class="help-resources">
                    <a href="#" class="help-item">
                        <div class="help-icon">📚</div>
                        <div class="help-content">
                            <h4>User Documentation</h4>
                            <p>Complete guides and tutorials</p>
                        </div>
                    </a>
                    
                    <a href="#" class="help-item">
                        <div class="help-icon">🎥</div>
                        <div class="help-content">
                            <h4>Video Tutorials</h4>
                            <p>Step-by-step video guides</p>
                        </div>
                    </a>
                    
                    <a href="#" class="help-item">
                        <div class="help-icon">💬</div>
                        <div class="help-content">
                            <h4>Live Chat Support</h4>
                            <p>Chat with our support team</p>
                        </div>
                    </a>
                    
                    <a href="#" class="help-item">
                        <div class="help-icon">📞</div>
                        <div class="help-content">
                            <h4>Phone Support</h4>
                            <p>Call us at +1-800-REFLEX</p>
                        </div>
                    </a>
                    
                    <a href="#" class="help-item">
                        <div class="help-icon">🌐</div>
                        <div class="help-content">
                            <h4>Knowledge Base</h4>
                            <p>Search our help articles</p>
                        </div>
                    </a>
                    
                    <a href="#" class="help-item">
                        <div class="help-icon">🛠️</div>
                        <div class="help-content">
                            <h4>System Status</h4>
                            <p>Check platform status</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        
        <!-- Your Recent Tickets -->
        <div class="tickets-section">
            <h2>Your Recent Tickets</h2>
            <div class="tickets-container">
                <?php foreach ($recent_tickets as $ticket): ?>
                <div class="ticket-item">
                    <div class="ticket-header">
                        <div class="ticket-id">#<?php echo $ticket['id']; ?></div>
                        <div class="ticket-status">
                            <span class="status-badge status-<?php echo strtolower(str_replace(' ', '-', $ticket['status'])); ?>">
                                <?php echo htmlspecialchars($ticket['status']); ?>
                            </span>
                        </div>
                    </div>
                    <div class="ticket-content">
                        <h4><?php echo htmlspecialchars($ticket['subject']); ?></h4>
                        <div class="ticket-meta">
                            <span class="priority-badge priority-<?php echo strtolower($ticket['priority']); ?>">
                                <?php echo $ticket['priority']; ?>
                            </span>
                            <span class="ticket-date">Created: <?php echo date('M j, Y', strtotime($ticket['created'])); ?></span>
                        </div>
                    </div>
                    <div class="ticket-actions">
                        <button class="btn btn-secondary btn-small">View Details</button>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
        
        <!-- FAQ Section -->
        <div class="faq-section">
            <h2>Frequently Asked Questions</h2>
            <div class="faq-container">
                <?php foreach ($faq_items as $faq): ?>
                <div class="faq-item">
                    <div class="faq-question">
                        <h4><?php echo htmlspecialchars($faq['question']); ?></h4>
                        <span class="faq-category"><?php echo htmlspecialchars($faq['category']); ?></span>
                    </div>
                    <button class="faq-toggle">
                        <span>👁️</span> View Answer
                    </button>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // FAQ toggle functionality
    document.querySelectorAll('.faq-toggle').forEach(btn => {
        btn.addEventListener('click', function() {
            const question = this.previousElementSibling.querySelector('h4').textContent;
            window.showToast && window.showToast('Opening help article: ' + question, 'info');
        });
    });
    
    // Live chat simulation
    document.querySelectorAll('.help-item').forEach(item => {
        item.addEventListener('click', function(e) {
            e.preventDefault();
            const helpType = this.querySelector('h4').textContent;
            
            if (helpType.includes('Live Chat')) {
                window.showToast && window.showToast('Starting live chat session...', 'info');
            } else if (helpType.includes('Phone')) {
                window.showToast && window.showToast('Phone support available 9 AM - 6 PM EST', 'info');
            } else {
                window.showToast && window.showToast('Opening ' + helpType + '...', 'info');
            }
        });
    });
});
</script>

<?php include 'includes/footer.php'; ?>
-------------------- END OF FILE --------------------

### FILE 24: users.php
- Type: PHP
- Size: 13.49 KB
- Path: .
- Name: users.php
------------------------------------------------------------
<?php
require_once 'config.php';
requireAdmin();

$page_title = 'Admin Users';
$page_description = 'Manage admin users and their roles';

$success = '';
$error = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
    if ($_POST['action'] === 'create_user') {
        $username = trim($_POST['username'] ?? '');
        $email = trim($_POST['email'] ?? '');
        $password = $_POST['password'] ?? '';
        $full_name = trim($_POST['full_name'] ?? '');
        $role = $_POST['role'] ?? 'manager';
        
        if (empty($username) || empty($email) || empty($password) || empty($full_name)) {
            $error = 'All fields are required';
        } elseif (strlen($password) < 8) {
            $error = 'Password must be at least 8 characters';
        } else {
            try {
                $pdo = getDBConnection();
                $hashedPassword = password_hash($password, PASSWORD_DEFAULT);
                
                $stmt = $pdo->prepare("INSERT INTO admin_users (username, email, password, full_name, role, created_by) VALUES (?, ?, ?, ?, ?, ?)");
                $stmt->execute([$username, $email, $hashedPassword, $full_name, $role, $_SESSION['admin_id']]);
                
                logActivity($_SESSION['admin_id'], 'create_admin_user', "Created admin user: $username", 'admin_user', $pdo->lastInsertId());
                
                $success = 'Admin user created successfully!';
            } catch (PDOException $e) {
                if ($e->getCode() == 23000) {
                    $error = 'Username or email already exists';
                } else {
                    $error = 'An error occurred. Please try again.';
                    error_log("Create user error: " . $e->getMessage());
                }
            }
        }
    }
    
    if ($_POST['action'] === 'toggle_status') {
        $user_id = intval($_POST['user_id'] ?? 0);
        $new_status = $_POST['new_status'] ?? 'active';
        
        try {
            $pdo = getDBConnection();
            $stmt = $pdo->prepare("UPDATE admin_users SET status = ? WHERE id = ?");
            $stmt->execute([$new_status, $user_id]);
            
            logActivity($_SESSION['admin_id'], 'update_admin_user', "Changed user status to: $new_status", 'admin_user', $user_id);
            
            $success = 'User status updated successfully!';
        } catch (Exception $e) {
            $error = 'An error occurred. Please try again.';
            error_log("Status update error: " . $e->getMessage());
        }
    }
}

try {
    $pdo = getDBConnection();
    $stmt = $pdo->query("SELECT * FROM admin_users ORDER BY created_at DESC");
    $users = $stmt->fetchAll();
} catch (Exception $e) {
    $users = [];
    error_log("Fetch users error: " . $e->getMessage());
}

include 'includes/header.php';
?>

<style>
.admin-users-table {
    width: 100%;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin-top: 30px;
}

.admin-users-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.admin-users-table thead {
    background: #f9fafb;
}

.admin-users-table th {
    padding: 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e5e7eb;
}

.admin-users-table td {
    padding: 16px;
    font-size: 14px;
    color: #1f2937;
    border-bottom: 1px solid #f3f4f6;
}

.admin-users-table tbody tr:hover {
    background: #f9fafb;
}

.admin-users-table tbody tr:last-child td {
    border-bottom: none;
}

.user-avatar-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.user-info-text {
    min-width: 0;
}

.user-name {
    font-weight: 600;
    color: #111827;
    margin-bottom: 2px;
}

.user-username {
    font-size: 12px;
    color: #6b7280;
}

.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-admin {
    background: #e3f2fd;
    color: #1976d2;
}

.badge-manager {
    background: #f3e5f5;
    color: #7b1fa2;
}

.badge-active {
    background: #d4edda;
    color: #155724;
}

.badge-inactive {
    background: #f8d7da;
    color: #721c24;
}

.action-btn {
    padding: 6px 16px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-disable {
    background: #dc3545;
    color: white;
}

.btn-disable:hover {
    background: #c82333;
}

.btn-enable {
    background: #28a745;
    color: white;
}

.btn-enable:hover {
    background: #218838;
}
</style>

<div class="page-container">
    <div class="page-header">
        <div>
            <h1>Admin User Management</h1>
            <p class="page-subtitle">Manage admin users and their access roles</p>
        </div>
        <div class="header-actions">
            <button class="btn btn-primary" id="addUserBtn">
                <span>➕</span> Add Admin User
            </button>
        </div>
    </div>

    <?php if ($success): ?>
        <div class="success-message">
            <span class="message-icon">✅</span>
            <?php echo htmlspecialchars($success); ?>
        </div>
    <?php endif; ?>
    
    <?php if ($error): ?>
        <div class="error-message">
            <span class="message-icon">⚠️</span>
            <?php echo htmlspecialchars($error); ?>
        </div>
    <?php endif; ?>

    <div style="background: white; padding: 20px 24px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 24px;">
        <div style="display: flex; gap: 32px; align-items: center; flex-wrap: wrap;">
            <div style="display: flex; align-items: center; gap: 10px;">
                <span style="font-size: 14px; color: #6b7280; font-weight: 500;">Total:</span>
                <span style="font-size: 20px; font-weight: 700; color: #0066cc;"><?php echo count($users); ?></span>
            </div>
            <div style="height: 24px; width: 1px; background: #e5e7eb;"></div>
            <div style="display: flex; align-items: center; gap: 10px;">
                <span style="font-size: 14px; color: #6b7280; font-weight: 500;">Active:</span>
                <span style="font-size: 20px; font-weight: 700; color: #059669;"><?php echo count(array_filter($users, fn($u) => $u['status'] === 'active')); ?></span>
            </div>
            <div style="height: 24px; width: 1px; background: #e5e7eb;"></div>
            <div style="display: flex; align-items: center; gap: 10px;">
                <span style="font-size: 14px; color: #6b7280; font-weight: 500;">Admins:</span>
                <span style="font-size: 20px; font-weight: 700; color: #7c3aed;"><?php echo count(array_filter($users, fn($u) => $u['role'] === 'admin')); ?></span>
            </div>
            <div style="height: 24px; width: 1px; background: #e5e7eb;"></div>
            <div style="display: flex; align-items: center; gap: 10px;">
                <span style="font-size: 14px; color: #6b7280; font-weight: 500;">Managers:</span>
                <span style="font-size: 20px; font-weight: 700; color: #ea580c;"><?php echo count(array_filter($users, fn($u) => $u['role'] === 'manager')); ?></span>
            </div>
        </div>
    </div>

    <div class="admin-users-table">
        <table>
            <thead>
                <tr>
                    <th style="width: 60px;">ID</th>
                    <th style="width: 300px;">User Details</th>
                    <th style="width: 250px;">Email</th>
                    <th style="width: 120px;">Role</th>
                    <th style="width: 120px;">Status</th>
                    <th style="width: 180px;">Last Login</th>
                    <th style="width: 150px;">Actions</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($users as $user): ?>
                <tr>
                    <td><?php echo $user['id']; ?></td>
                    <td>
                        <div class="user-avatar-cell">
                            <div class="user-avatar">
                                <?php echo strtoupper(substr($user['username'], 0, 2)); ?>
                            </div>
                            <div class="user-info-text">
                                <div class="user-name"><?php echo htmlspecialchars($user['full_name']); ?></div>
                                <div class="user-username">@<?php echo htmlspecialchars($user['username']); ?></div>
                            </div>
                        </div>
                    </td>
                    <td><?php echo htmlspecialchars($user['email']); ?></td>
                    <td>
                        <span class="badge badge-<?php echo strtolower($user['role']); ?>">
                            <?php echo ucfirst($user['role']); ?>
                        </span>
                    </td>
                    <td>
                        <span class="badge badge-<?php echo strtolower($user['status']); ?>">
                            <?php echo ucfirst($user['status']); ?>
                        </span>
                    </td>
                    <td>
                        <?php if ($user['last_login']): ?>
                            <div>
                                <div style="font-weight: 500;"><?php echo date('M j, Y', strtotime($user['last_login'])); ?></div>
                                <div style="font-size: 12px; color: #6b7280;"><?php echo date('g:i A', strtotime($user['last_login'])); ?></div>
                            </div>
                        <?php else: ?>
                            <span style="color: #9ca3af;">Never</span>
                        <?php endif; ?>
                    </td>
                    <td>
                        <?php if ($user['id'] != $_SESSION['admin_id']): ?>
                            <form method="POST" style="display: inline;">
                                <input type="hidden" name="action" value="toggle_status">
                                <input type="hidden" name="user_id" value="<?php echo $user['id']; ?>">
                                <input type="hidden" name="new_status" value="<?php echo $user['status'] === 'active' ? 'inactive' : 'active'; ?>">
                                <button type="submit" class="action-btn <?php echo $user['status'] === 'active' ? 'btn-disable' : 'btn-enable'; ?>">
                                    <?php echo $user['status'] === 'active' ? 'Disable' : 'Enable'; ?>
                                </button>
                            </form>
                        <?php else: ?>
                            <span style="color: #9ca3af; font-size: 13px;">Current User</span>
                        <?php endif; ?>
                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>

<div id="addUserModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2>Add Admin User</h2>
            <button class="modal-close">&times;</button>
        </div>
        
        <form method="POST">
            <input type="hidden" name="action" value="create_user">
            
            <div class="form-group">
                <label for="username">Username *</label>
                <input type="text" id="username" name="username" required>
            </div>
            
            <div class="form-group">
                <label for="email">Email Address *</label>
                <input type="email" id="email" name="email" required>
            </div>
            
            <div class="form-group">
                <label for="full_name">Full Name *</label>
                <input type="text" id="full_name" name="full_name" required>
            </div>
            
            <div class="form-group">
                <label for="role">Role *</label>
                <select id="role" name="role" required>
                    <option value="manager">Manager (No access to Users page)</option>
                    <option value="admin">Admin (Full access)</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="password">Password *</label>
                <input type="password" id="password" name="password" required minlength="8">
                <small class="form-help">Minimum 8 characters required</small>
            </div>
            
            <div class="form-actions">
                <button type="button" class="btn btn-secondary" onclick="closeModal()">Cancel</button>
                <button type="submit" class="btn btn-primary">Create User</button>
            </div>
        </form>
    </div>
</div>

<script>
function closeModal() {
    document.getElementById('addUserModal').style.display = 'none';
}

document.getElementById('addUserBtn')?.addEventListener('click', function() {
    document.getElementById('addUserModal').style.display = 'flex';
});

document.querySelector('.modal-close')?.addEventListener('click', closeModal);

window.addEventListener('click', function(event) {
    if (event.target === document.getElementById('addUserModal')) {
        closeModal();
    }
});
</script>

<?php include 'includes/footer.php'; ?>
-------------------- END OF FILE --------------------

### FILE 25: assets/css/dashboard.css
- Type: CSS
- Size: 28.46 KB
- Path: assets/css
- Name: dashboard.css
------------------------------------------------------------
/* Dashboard Specific Styles for Relevant Reflex */

/* Dashboard Container */
.dashboard-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* Enhanced Stats Cards for Dashboard */
.dashboard-content .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
}

.dashboard-content .stat-card {
    background: linear-gradient(135deg, var(--white) 0%, #f8fafc 100%);
    border: 1px solid var(--gray-100);
    border-radius: var(--border-radius-2xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.dashboard-content .stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
}

.dashboard-content .stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}

.dashboard-content .stat-icon {
    font-size: 3rem;
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary-light), rgba(0, 102, 204, 0.1));
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.dashboard-content .stat-icon::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.1));
    border-radius: calc(var(--border-radius-2xl) - 2px);
    pointer-events: none;
}

.dashboard-content .stat-content h3 {
    font-size: var(--font-size-4xl);
    margin: 0;
    color: var(--primary-color);
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

.dashboard-content .stat-content p {
    margin: var(--spacing-sm) 0 0;
    color: var(--gray-600);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
}

.stat-change {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-top: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-xl);
}

.stat-change.positive {
    background: var(--success-light);
    color: var(--success-color);
}

.stat-change.negative {
    background: var(--danger-light);
    color: var(--danger-color);
}

.stat-change.neutral {
    background: var(--gray-100);
    color: var(--gray-600);
}

.stat-change::before {
    content: '↗';
    font-size: var(--font-size-sm);
}

.stat-change.negative::before {
    content: '↘';
}

.stat-change.neutral::before {
    content: '→';
}

/* Dashboard Content Grid */
.dashboard-content {
    margin-top: var(--spacing-2xl);
}

.content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
}

/* Chart Section */
.chart-section {
    background: var(--white);
    border-radius: var(--border-radius-2xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--gray-200);
}

.section-header h2 {
    margin: 0;
    color: var(--dark-color);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
}

.chart-controls select {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius-lg);
    background: var(--white);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.chart-container {
    position: relative;
    height: 300px;
    background: var(--gray-50);
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--gray-300);
}

.chart-placeholder {
    color: var(--gray-500);
    font-style: italic;
    text-align: center;
}

.chart-legend {
    display: flex;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
    justify-content: center;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: var(--border-radius-sm);
}

/* Recent Activity */
.recent-activity {
    background: var(--white);
    border-radius: var(--border-radius-2xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
}

.view-all {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    transition: color var(--transition-normal);
}

.view-all:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.activity-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, var(--gray-50), #f1f5f9);
    border-radius: var(--border-radius-lg);
    border-left: 4px solid var(--primary-color);
    transition: all var(--transition-normal);
    position: relative;
}

.activity-item:hover {
    background: linear-gradient(135deg, var(--primary-light), rgba(0, 102, 204, 0.05));
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
}

.activity-time {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.activity-text {
    color: var(--dark-color);
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
}

.activity-footer {
    margin-top: var(--spacing-lg);
    text-align: center;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--gray-200);
}

/* Quick Actions Section */
.quick-actions-section {
    margin-top: var(--spacing-2xl);
    background: var(--white);
    border-radius: var(--border-radius-2xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
}

.quick-actions-section h2 {
    margin-bottom: var(--spacing-xl);
    color: var(--dark-color);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    text-align: center;
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.quick-action-card {
    background: linear-gradient(135deg, var(--white) 0%, var(--gray-50) 100%);
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-xl);
    padding: var(--spacing-xl);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    text-decoration: none;
    color: inherit;
}

.quick-action-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
    background: linear-gradient(135deg, var(--primary-light) 0%, rgba(0, 102, 204, 0.05) 100%);
}

.action-icon {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-lg);
    display: block;
}

.quick-action-card h3 {
    margin: 0 0 var(--spacing-md);
    color: var(--dark-color);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.quick-action-card p {
    margin: 0;
    color: var(--gray-600);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

/* Overview Cards for Other Pages */
.overview-grid,
.user-stats .stats-row,
.supply-overview .stats-grid,
.panel-overview .overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

.overview-card,
.stat-item {
    background: var(--white);
    border-radius: var(--border-radius-xl);
    padding: var(--spacing-lg);
    text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    transition: all var(--transition-normal);
}

.overview-card:hover,
.stat-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.overview-icon {
    font-size: 2rem;
    margin-bottom: var(--spacing-md);
    display: block;
}

.overview-content h3,
.stat-number {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    margin: 0 0 var(--spacing-sm);
}

.overview-content p,
.stat-label {
    color: var(--gray-600);
    font-weight: var(--font-weight-medium);
    margin: 0;
}

/* Login Information Styling */
.login-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.login-date {
    font-weight: var(--font-weight-medium);
    color: var(--dark-color);
    font-size: var(--font-size-sm);
}

.login-time {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
}

.never-logged {
    font-style: italic;
    color: var(--gray-400);
    font-size: var(--font-size-sm);
}

/* Response Information */
.response-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.response-info strong {
    color: var(--primary-color);
    font-size: var(--font-size-lg);
}

.response-info small {
    color: var(--gray-500);
    font-size: var(--font-size-xs);
}

/* Date Information */
.date-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.end-date {
    font-weight: var(--font-weight-medium);
    color: var(--dark-color);
}

.days-left {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
}

/* Quantity Badge */
.quantity-badge {
    background: var(--primary-light);
    color: var(--primary-color);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--border-radius-xl);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
}

/* Financial Cards */
.finance-card {
    position: relative;
    overflow: hidden;
}

.finance-card.revenue-card::before {
    background: linear-gradient(90deg, var(--success-color), #20c997);
}

.finance-card.expense-card::before {
    background: linear-gradient(90deg, var(--danger-color), #e74c3c);
}

.finance-card.profit-card::before {
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
}

.stat-footer {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
    margin-top: var(--spacing-sm);
    text-align: center;
    font-weight: var(--font-weight-medium);
}

/* Trend Indicators */
.trend {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-xl);
    margin-top: var(--spacing-sm);
}

.trend-up {
    background: var(--success-light);
    color: var(--success-color);
}

.trend-down {
    background: var(--danger-light);
    color: var(--danger-color);
}

.trend-up::before {
    content: '↗';
}

.trend-down::before {
    content: '↘';
}

/* Demand Metrics */
.demand-metrics {
    margin-bottom: var(--spacing-2xl);
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-lg);
}

.metric-card {
    background: var(--white);
    border-radius: var(--border-radius-xl);
    padding: var(--spacing-xl);
    text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    transition: all var(--transition-normal);
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.metric-icon {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-lg);
    display: block;
}

.metric-value {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    line-height: 1;
    margin-bottom: var(--spacing-sm);
}

.metric-label {
    color: var(--gray-600);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-sm);
}

.metric-change {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-xl);
}

/* Category Performance */
.category-performance {
    background: var(--white);
    border-radius: var(--border-radius-2xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
}

.category-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.category-item {
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    transition: all var(--transition-normal);
}

.category-item:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.category-header h4 {
    margin: 0;
    color: var(--dark-color);
    font-weight: var(--font-weight-semibold);
}

.category-metrics {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.demand-level {
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--border-radius-xl);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.demand-high {
    background: var(--success-light);
    color: var(--success-color);
}

.demand-medium {
    background: var(--warning-light);
    color: #856404;
}

.demand-low {
    background: var(--gray-200);
    color: var(--gray-600);
}

.category-growth {
    font-weight: var(--font-weight-bold);
}

.category-growth.positive {
    color: var(--success-color);
}

.category-growth.negative {
    color: var(--danger-color);
}

/* Insights Sections */
.insights-section {
    background: var(--white);
    border-radius: var(--border-radius-2xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    margin-top: var(--spacing-2xl);
}

.insights-section h2 {
    margin-bottom: var(--spacing-xl);
    color: var(--dark-color);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    text-align: center;
}

.insights-grid,
.insights-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.insight-card {
    background: linear-gradient(135deg, var(--gray-50) 0%, #f8fafc 100%);
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-xl);
    padding: var(--spacing-xl);
    transition: all var(--transition-normal);
}

.insight-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.insight-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.insight-number {
    width: 30px;
    height: 30px;
    background: var(--primary-color);
    color: var(--white);
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
}

.insight-impact {
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--border-radius-xl);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.impact-high {
    background: var(--danger-light);
    color: var(--danger-color);
}

.impact-medium {
    background: var(--warning-light);
    color: #856404;
}

.impact-low {
    background: var(--info-light);
    color: var(--info-color);
}

.insight-content h4 {
    margin: 0 0 var(--spacing-md);
    color: var(--dark-color);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
}

.insight-content p {
    margin: 0 0 var(--spacing-md);
    color: var(--gray-600);
    line-height: 1.6;
}

.recommended-action {
    margin: 0 !important;
    padding: var(--spacing-md);
    background: var(--primary-light);
    border-radius: var(--border-radius-lg);
    border-left: 4px solid var(--primary-color);
    font-size: var(--font-size-sm);
}

.recommended-action strong {
    color: var(--primary-color);
}

/* Transaction Items */
.transactions-section {
    background: var(--white);
    border-radius: var(--border-radius-2xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
}

.transactions-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.transaction-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--gray-200);
    transition: all var(--transition-normal);
}

.transaction-item:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.transaction-item.revenue {
    border-left: 4px solid var(--success-color);
}

.transaction-item.expense {
    border-left: 4px solid var(--danger-color);
}

.transaction-icon {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.transaction-item.revenue .transaction-icon {
    background: var(--success-light);
}

.transaction-item.expense .transaction-icon {
    background: var(--danger-light);
}

.transaction-details {
    flex: 1;
}

.transaction-description {
    font-weight: var(--font-weight-medium);
    color: var(--dark-color);
    margin-bottom: var(--spacing-xs);
}

.transaction-meta {
    display: flex;
    gap: var(--spacing-lg);
    font-size: var(--font-size-sm);
    color: var(--gray-500);
}

.transaction-amount {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.transaction-amount.positive {
    color: var(--success-color);
}

.transaction-amount.negative {
    color: var(--danger-color);
}

/* Support Specific Styles */
.support-overview {
    margin-bottom: var(--spacing-2xl);
}

.support-card .stat-icon {
    background: linear-gradient(135deg, var(--info-light), rgba(23, 162, 184, 0.1));
    border: 2px solid var(--info-color);
}

.help-resources {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.help-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl);
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-xl);
    text-decoration: none;
    color: inherit;
    transition: all var(--transition-normal);
}

.help-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.help-icon {
    font-size: 2rem;
    width: 50px;
    height: 50px;
    background: var(--primary-light);
    border-radius: var(--border-radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.help-content h4 {
    margin: 0 0 var(--spacing-xs);
    color: var(--dark-color);
    font-weight: var(--font-weight-semibold);
}

.help-content p {
    margin: 0;
    color: var(--gray-600);
    font-size: var(--font-size-sm);
}

/* Tickets Section */
.tickets-section {
    background: var(--white);
    border-radius: var(--border-radius-2xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    margin-top: var(--spacing-2xl);
}

.tickets-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.ticket-item {
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    transition: all var(--transition-normal);
}

.ticket-item:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.ticket-id {
    font-family: var(--font-family-mono);
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    background: var(--primary-light);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--border-radius-lg);
}

.ticket-content h4 {
    margin: 0 0 var(--spacing-md);
    color: var(--dark-color);
    font-weight: var(--font-weight-medium);
}

.ticket-meta {
    display: flex;
    gap: var(--spacing-lg);
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.ticket-date {
    font-size: var(--font-size-sm);
    color: var(--gray-500);
}

/* FAQ Section */
.faq-section {
    background: var(--white);
    border-radius: var(--border-radius-2xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    margin-top: var(--spacing-2xl);
}

.faq-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.faq-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-lg);
    transition: all var(--transition-normal);
}

.faq-item:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.faq-question h4 {
    margin: 0 0 var(--spacing-xs);
    color: var(--dark-color);
    font-weight: var(--font-weight-medium);
}

.faq-category {
    font-size: var(--font-size-xs);
    color: var(--primary-color);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.faq-toggle {
    background: var(--primary-color);
    color: var(--white);
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-normal);
    flex-shrink: 0;
}

.faq-toggle:hover {
    background: var(--primary-hover);
    transform: scale(1.05);
}

/* Settings Specific Styles */
.settings-section {
    background: var(--white);
}

.settings-section h2 {
    margin-bottom: var(--spacing-xl);
    color: var(--dark-color);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    padding-bottom: var(--spacing-lg);
    border-bottom: 2px solid var(--primary-color);
}

.settings-section h3 {
    margin: var(--spacing-xl) 0 var(--spacing-lg);
    color: var(--gray-700);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.notification-group {
    background: var(--gray-50);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

/* Color Picker */
.color-picker-group {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.color-picker-group input[type="color"] {
    width: 60px;
    height: 40px;
    border-radius: var(--border-radius);
    border: 1px solid var(--gray-300);
    cursor: pointer;
}

.color-hex {
    flex: 1;
    background: var(--gray-100);
    font-family: var(--font-family-mono);
}

/* Integration Cards */
.integrations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

.integration-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-xl);
    padding: var(--spacing-xl);
    transition: all var(--transition-normal);
}

.integration-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.integration-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-lg);
}

.integration-header h4 {
    margin: 0;
    color: var(--dark-color);
    font-weight: var(--font-weight-semibold);
}

.integration-icon {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    background: var(--primary-light);
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);
}

/* Account Management */
.account-section {
    background: var(--white);
    border-radius: var(--border-radius-2xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    margin-top: var(--spacing-2xl);
}

.account-section h2 {
    margin-bottom: var(--spacing-xl);
    color: var(--dark-color);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
}

.account-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

.account-card {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-xl);
    padding: var(--spacing-xl);
    transition: all var(--transition-normal);
    text-align: center;
}

.account-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.account-card.danger-card {
    border-color: var(--danger-color);
    background: var(--danger-light);
}

.account-card.danger-card:hover {
    background: #f8d7da;
}

.account-icon {
    font-size: 2rem;
    margin-bottom: var(--spacing-lg);
    display: block;
}

.account-content h4 {
    margin: 0 0 var(--spacing-md);
    color: var(--dark-color);
    font-weight: var(--font-weight-semibold);
}

.account-content p {
    margin: 0 0 var(--spacing-lg);
    color: var(--gray-600);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

/* Password Strength Indicator */
.password-strength {
    margin-top: var(--spacing-md);
}

.strength-bar {
    height: 4px;
    background: var(--gray-200);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    margin-bottom: var(--spacing-sm);
}

.strength-fill {
    height: 100%;
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-normal);
}

.strength-fill.strength-weak {
    background: var(--danger-color);
    width: 25%;
}

.strength-fill.strength-fair {
    background: var(--warning-color);
    width: 50%;
}

.strength-fill.strength-good {
    background: var(--info-color);
    width: 75%;
}

.strength-fill.strength-strong {
    background: var(--success-color);
    width: 100%;
}

.strength-text {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
}

/* Summary Stats */
.summary-section {
    background: var(--white);
    border-radius: var(--border-radius-2xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
}

.summary-stats {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.summary-item {
    text-align: center;
    padding: var(--spacing-lg);
    background: var(--gray-50);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--gray-200);
}

.summary-item h3 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    margin: 0 0 var(--spacing-sm);
}

.summary-item p {
    margin: 0;
    color: var(--gray-600);
    font-weight: var(--font-weight-medium);
}

/* Responsive Adjustments for Dashboard Components */
@media (max-width: 992px) {
    .content-grid {
        grid-template-columns: 1fr;
    }
    
    .quick-actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .insights-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .quick-actions-grid {
        grid-template-columns: 1fr;
    }
    
    .metrics-grid {
        grid-template-columns: 1fr;
    }
    
    .overview-grid,
    .account-grid,
    .integrations-grid {
        grid-template-columns: 1fr;
    }
    
    .transaction-item {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-md);
    }
    
    .transaction-meta {
        justify-content: center;
    }
    
    .help-resources {
        grid-template-columns: 1fr;
    }
    
    .help-item {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-md);
    }
}
-------------------- END OF FILE --------------------

### FILE 26: assets/css/main.css
- Type: CSS
- Size: 18.91 KB
- Path: assets/css
- Name: main.css
------------------------------------------------------------
/* ===================================
   CSS Variables
   =================================== */
:root {
    /* Colors */
    --primary-color: #0066cc;
    --primary-hover: #0052a3;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --light-color: #f8f9fa;
    --dark-color: #212529;
    
    /* Gray Scale */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    
    /* Font Sizes */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 30px;
    
    /* Border Radius */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    
    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;
}

/* ===================================
   Reset & Base Styles
   =================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: var(--font-size-base);
    line-height: 1.5;
    color: var(--dark-color);
    background: var(--gray-50);
    min-height: 100vh;
}

/* ===================================
   Header & Navigation
   =================================== */
.main-header {
    background: white;
    border-bottom: 1px solid var(--gray-200);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
}

.navbar {
    padding: 0;
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-weight: 700;
    font-size: var(--font-size-lg);
    color: var(--dark-color);
}

.logo {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-color), #004080);
    color: white;
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
    justify-content: flex-end;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--gray-700);
    text-decoration: none;
    border-radius: var(--border-radius-md);
    transition: all var(--transition-fast);
    font-size: var(--font-size-sm);
    font-weight: 500;
    white-space: nowrap;
}

.nav-link:hover {
    background: var(--gray-100);
    color: var(--primary-color);
}

.nav-link.active {
    background: var(--primary-color);
    color: white;
}

.nav-icon {
    font-size: 18px;
}

.mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    padding: var(--spacing-sm);
    cursor: pointer;
}

.mobile-toggle span {
    width: 24px;
    height: 2px;
    background: var(--dark-color);
    transition: var(--transition-fast);
}

/* ===================================
   Page Container & Layout
   =================================== */
.page-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-2xl) var(--spacing-lg);
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-2xl);
    gap: var(--spacing-lg);
}

.page-header h1 {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--dark-color);
    margin-bottom: var(--spacing-xs);
}

.page-subtitle {
    font-size: var(--font-size-base);
    color: var(--gray-600);
    margin: 0;
}

.header-actions {
    display: flex;
    gap: var(--spacing-md);
}

/* ===================================
   Buttons
   =================================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 10px 20px;
    border: none;
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background: var(--gray-200);
    color: var(--gray-700);
}

.btn-secondary:hover {
    background: var(--gray-300);
}

/* ===================================
   Statistics Cards
   =================================== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

.stat-card {
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    transition: var(--transition-base);
}

.stat-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.stat-icon {
    font-size: 48px;
    opacity: 0.9;
}

.stat-content h3 {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--dark-color);
    margin-bottom: var(--spacing-xs);
}

.stat-content p {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    margin: 0 0 var(--spacing-xs) 0;
}

.stat-change {
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--border-radius-sm);
}

.stat-change.positive {
    background: #d4edda;
    color: #155724;
}

.stat-change.negative {
    background: #f8d7da;
    color: #721c24;
}

.stat-change.neutral {
    background: var(--gray-100);
    color: var(--gray-600);
}

/* ===================================
   User Stats (Alternative Layout)
   =================================== */
.user-stats {
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-2xl);
}

.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-xl);
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-xs);
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

/* ===================================
   Table Controls (Search & Filters)
   =================================== */
.table-controls {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
}

.search-container {
    flex: 1;
    min-width: 250px;
}

.search-input {
    width: 100%;
    padding: 10px 16px;
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    transition: var(--transition-fast);
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.filter-container {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.filter-select {
    padding: 10px 16px;
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    background: white;
    cursor: pointer;
    transition: var(--transition-fast);
}

.filter-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

/* ===================================
   Tables - FIXED LAYOUT
   =================================== */
.table-container {
    background: white;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
    overflow-y: visible;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    table-layout: fixed;
    min-width: 100%;
}

.data-table thead {
    background: var(--gray-50);
    border-bottom: 2px solid var(--gray-200);
}

.data-table th {
    padding: 16px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--gray-700);
    text-transform: uppercase;
    font-size: var(--font-size-xs);
    letter-spacing: 0.5px;
    white-space: nowrap;
    position: sticky;
    top: 0;
    background: var(--gray-50);
    z-index: 10;
}

.data-table td {
    padding: 16px 12px;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
}

.data-table tbody tr {
    transition: var(--transition-fast);
}

.data-table tbody tr:hover {
    background: var(--gray-50);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* ===================================
   Badges
   =================================== */
.role-badge,
.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Role Badges */
.role-badge.role-admin {
    background: #e3f2fd;
    color: #1976d2;
}

.role-badge.role-manager {
    background: #f3e5f5;
    color: #7b1fa2;
}

/* Status Badges */
.status-badge.status-active {
    background: #d4edda;
    color: #155724;
}

.status-badge.status-inactive {
    background: #f8d7da;
    color: #721c24;
}

.status-badge.status-suspended {
    background: #fff3cd;
    color: #856404;
}

.status-badge.status-open {
    background: #d1ecf1;
    color: #0c5460;
}

.status-badge.status-pending {
    background: #fff3cd;
    color: #856404;
}

.status-badge.status-resolved,
.status-badge.status-completed {
    background: #d4edda;
    color: #155724;
}

.status-badge.status-closed {
    background: var(--gray-200);
    color: var(--gray-700);
}

/* ===================================
   Messages
   =================================== */
.success-message,
.error-message {
    padding: 16px 20px;
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: var(--font-size-sm);
}

.success-message {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.error-message {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.message-icon {
    font-size: 20px;
}

/* ===================================
   Forms
   =================================== */
.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-sm);
    color: var(--gray-700);
    font-weight: 600;
    font-size: var(--font-size-sm);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 16px;
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    transition: var(--transition-fast);
    font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.form-group input:disabled,
.form-group select:disabled {
    background: var(--gray-100);
    cursor: not-allowed;
}

.form-help {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--gray-600);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
}

.form-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
    justify-content: flex-end;
}

/* ===================================
   Modal
   =================================== */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
}

.modal-content {
    background: white;
    border-radius: var(--border-radius-xl);
    padding: var(--spacing-2xl);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
}

.modal-header h2 {
    font-size: var(--font-size-2xl);
    color: var(--dark-color);
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--gray-500);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-md);
    transition: var(--transition-fast);
}

.modal-close:hover {
    background: var(--gray-100);
    color: var(--gray-700);
}

/* ===================================
   Dashboard Specific
   =================================== */
.dashboard-container {
    /* Dashboard specific styles */
}

.quick-actions-section h2 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--dark-color);
    margin-bottom: var(--spacing-lg);
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.quick-action-card {
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
    text-align: center;
}

.quick-action-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.action-icon {
    font-size: 48px;
    margin-bottom: var(--spacing-md);
}

.quick-action-card h3 {
    font-size: var(--font-size-lg);
    color: var(--dark-color);
    margin-bottom: var(--spacing-sm);
}

.quick-action-card p {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    margin: 0;
}

/* ===================================
   Settings & Tabs
   =================================== */
.settings-container {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: var(--spacing-2xl);
}

.settings-nav {
    background: white;
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    height: fit-content;
    position: sticky;
    top: 80px;
}

.settings-tabs {
    list-style: none;
}

.settings-tabs li {
    margin-bottom: var(--spacing-xs);
}

.tab-link {
    display: block;
    padding: var(--spacing-md);
    color: var(--gray-700);
    text-decoration: none;
    border-radius: var(--border-radius-md);
    transition: var(--transition-fast);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.tab-link:hover {
    background: var(--gray-100);
    color: var(--primary-color);
}

.tab-link.active {
    background: var(--primary-color);
    color: white;
}

.settings-content {
    background: white;
    padding: var(--spacing-2xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
}

.settings-section {
    margin-bottom: var(--spacing-2xl);
}

.settings-section:last-child {
    margin-bottom: 0;
}

.settings-section h2 {
    font-size: var(--font-size-2xl);
    color: var(--dark-color);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--gray-200);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ===================================
   Responsive Design
   =================================== */
@media (max-width: 1024px) {
    .settings-container {
        grid-template-columns: 1fr;
    }
    
    .settings-nav {
        position: static;
    }
}

@media (max-width: 768px) {
    .page-container {
        padding: var(--spacing-lg);
    }
    
    .page-header {
        flex-direction: column;
    }
    
    .header-actions {
        width: 100%;
    }
    
    .stats-grid,
    .quick-actions-grid {
        grid-template-columns: 1fr;
    }
    
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mobile-toggle {
        display: flex;
    }
    
    .nav-menu {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background: white;
        flex-direction: column;
        padding: var(--spacing-lg);
        border-top: 1px solid var(--gray-200);
        box-shadow: var(--shadow-lg);
    }
    
    .nav-menu.active {
        display: flex;
    }
    
    .nav-link {
        width: 100%;
        justify-content: flex-start;
    }
    
    .table-container {
        overflow-x: scroll;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .stats-row {
        grid-template-columns: 1fr;
    }
    
    .table-controls {
        flex-direction: column;
    }
    
    .search-container,
    .filter-container {
        width: 100%;
    }
    
    .filter-container {
        flex-direction: column;
    }
    
    .filter-select {
        width: 100%;
    }
}

/* ===================================
   Utility Classes
   =================================== */
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }
.mt-5 { margin-top: var(--spacing-xl); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }
.mb-5 { margin-bottom: var(--spacing-xl); }

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-color);
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 100;
}

.skip-link:focus {
    top: 0;
}
-------------------- END OF FILE --------------------

### FILE 27: assets/css/responsive.css
- Type: CSS
- Size: 18.5 KB
- Path: assets/css
- Name: responsive.css
------------------------------------------------------------
/* Mobile First Responsive Design for Relevant Reflex */

/* Base Mobile Styles (up to 576px) */
@media (max-width: 576px) {
    :root {
        --font-size-base: 14px;
        --font-size-lg: 16px;
        --font-size-xl: 18px;
        --font-size-2xl: 20px;
        --font-size-3xl: 24px;
        --spacing-md: 0.75rem;
        --spacing-lg: 1rem;
        --spacing-xl: 1.5rem;
    }
    
    .nav-container {
        padding: 0 var(--spacing-md);
        height: 60px;
    }
    
    .brand-name {
        display: none;
    }
    
    .logo {
        width: 35px;
        height: 35px;
        font-size: var(--font-size-base);
    }
    
    .nav-menu {
        position: fixed;
        top: 60px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 60px);
        background: var(--white);
        flex-direction: column;
        padding: var(--spacing-xl);
        gap: var(--spacing-md);
        transition: left var(--transition-normal);
        box-shadow: var(--shadow-xl);
        z-index: var(--z-modal);
        overflow-y: auto;
    }
    
    .nav-menu.active {
        left: 0;
    }
    
    .mobile-toggle {
        display: flex !important;
    }
    
    .nav-link {
        justify-content: flex-start;
        padding: var(--spacing-lg);
        border-radius: var(--border-radius-xl);
        font-size: var(--font-size-base);
        width: 100%;
    }
    
    .nav-link::before {
        display: none;
    }
    
    .nav-icon {
        font-size: var(--font-size-lg);
    }
    
    .page-container {
        padding: 0 var(--spacing-md);
    }
    
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-xl);
    }
    
    .page-header h1 {
        font-size: var(--font-size-3xl);
    }
    
    .header-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    
    .btn {
        font-size: var(--font-size-sm);
        padding: var(--spacing-md);
        min-height: 40px;
    }
    
    .btn-small {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-xs);
        min-height: 32px;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .stat-card {
        padding: var(--spacing-lg);
        flex-direction: row;
        gap: var(--spacing-md);
    }
    
    .stat-icon {
        width: 50px;
        height: 50px;
        font-size: 2rem;
    }
    
    .stat-content h3 {
        font-size: var(--font-size-xl);
    }
    
    .table-container {
        overflow-x: auto;
        border-radius: var(--border-radius-lg);
    }
    
    .data-table {
        min-width: 700px;
    }
    
    .data-table th,
    .data-table td {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-xs);
    }
    
    .user-info, .item-info, .panel-info {
        gap: var(--spacing-sm);
    }
    
    .user-avatar {
        width: 32px;
        height: 32px;
        font-size: var(--font-size-xs);
    }
    
    .action-buttons {
        flex-direction: column;
        gap: 2px;
    }
    
    .btn-edit,
    .btn-delete,
    .btn-view,
    .btn-analytics,
    .btn-track,
    .btn-launch {
        min-width: 28px;
        height: 28px;
        padding: 2px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .table-controls {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
    }
    
    .filter-container {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .search-container {
        max-width: none;
    }
    
    .modal {
        padding: var(--spacing-md);
    }
    
    .modal-content {
        max-height: 95vh;
    }
    
    .modal-form,
    .settings-form,
    .support-form {
        padding: var(--spacing-lg);
    }
}

/* Mobile Landscape and Small Tablets (577px - 768px) */
@media (min-width: 577px) and (max-width: 768px) {
    .nav-menu {
        position: fixed;
        top: 70px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 70px);
        background: var(--white);
        flex-direction: column;
        padding: var(--spacing-xl);
        gap: var(--spacing-md);
        transition: left var(--transition-normal);
        box-shadow: var(--shadow-xl);
        z-index: var(--z-modal);
    }
    
    .nav-menu.active {
        left: 0;
    }
    
    .mobile-toggle {
        display: flex;
    }
    
    .nav-link {
        justify-content: flex-start;
        padding: var(--spacing-lg);
        border-radius: var(--border-radius-xl);
        width: 100%;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }
    
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .table-controls {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .filter-container {
        flex-direction: row;
        gap: var(--spacing-md);
    }
}

/* Tablets (769px - 992px) */
@media (min-width: 769px) and (max-width: 992px) {
    .nav-container {
        padding: 0 var(--spacing-lg);
    }
    
    .page-container {
        padding: 0 var(--spacing-lg);
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }
    
    .content-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    
    .dashboard-content .content-grid {
        grid-template-columns: 2fr 1fr;
    }
    
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xl);
    }
    
    .nav-link {
        padding: var(--spacing-md);
        font-size: var(--font-size-sm);
    }
    
    .nav-icon {
        font-size: var(--font-size-sm);
    }
    
    .nav-label {
        font-size: var(--font-size-sm);
    }
}

/* Desktop (993px - 1199px) */
@media (min-width: 993px) and (max-width: 1199px) {
    .nav-container,
    .page-container,
    .footer-container {
        max-width: 960px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .content-grid {
        grid-template-columns: 2fr 1fr;
    }
    
    .footer-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Large Desktop (1200px and up) */
@media (min-width: 1200px) {
    .nav-container,
    .page-container,
    .footer-container {
        max-width: 1200px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .content-grid {
        grid-template-columns: 2fr 1fr;
        gap: var(--spacing-2xl);
    }
}

/* Extra Large Screens (1400px and up) */
@media (min-width: 1400px) {
    .nav-container,
    .page-container,
    .footer-container {
        max-width: 1400px;
    }
    
    :root {
        --spacing-md: 1.25rem;
        --spacing-lg: 2rem;
        --spacing-xl: 2.5rem;
        --spacing-2xl: 3.5rem;
    }
}

/* Settings Page Responsive */
.settings-container {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: var(--spacing-2xl);
    margin-top: var(--spacing-xl);
}

.settings-nav {
    background: var(--white);
    border-radius: var(--border-radius-xl);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    height: fit-content;
    position: sticky;
    top: calc(70px + var(--spacing-lg));
}

.settings-tabs {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.tab-link {
    display: block;
    padding: var(--spacing-md);
    text-decoration: none;
    color: var(--gray-600);
    border-radius: var(--border-radius-lg);
    transition: all var(--transition-normal);
    font-weight: var(--font-weight-medium);
}

.tab-link:hover {
    background: var(--primary-light);
    color: var(--primary-color);
}

.tab-link.active {
    background: var(--primary-color);
    color: var(--white);
}

.settings-content {
    background: var(--white);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-sm);
}

.tab-content {
    display: none;
    padding: var(--spacing-2xl);
}

.tab-content.active {
    display: block;
}

@media (max-width: 768px) {
    .settings-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .settings-nav {
        position: static;
        order: -1;
    }
    
    .settings-tabs {
        flex-direction: row;
        overflow-x: auto;
        gap: var(--spacing-xs);
        padding-bottom: var(--spacing-sm);
    }
    
    .tab-link {
        white-space: nowrap;
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-sm);
    }
}

/* Dashboard Responsive Specific */
.dashboard-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

@media (max-width: 768px) {
    .dashboard-container {
        padding: 0 var(--spacing-md);
    }
    
    .content-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .quick-actions-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
}

@media (max-width: 480px) {
    .quick-actions-grid {
        grid-template-columns: 1fr;
    }
}

/* Table Responsive Behavior */
@media (max-width: 768px) {
    .table-container {
        border-radius: var(--border-radius-lg);
    }
    
    .data-table th:first-child,
    .data-table td:first-child {
        position: sticky;
        left: 0;
        background: var(--white);
        z-index: 10;
    }
    
    .data-table th {
        background: var(--gray-50);
    }
    
    .data-table tbody tr:hover th:first-child,
    .data-table tbody tr:hover td:first-child {
        background: var(--gray-50);
    }
}

/* Modal Responsive */
@media (max-width: 768px) {
    .modal {
        padding: var(--spacing-md);
        align-items: flex-start;
        padding-top: 10vh;
    }
    
    .modal-content {
        max-height: 85vh;
        width: 100%;
        margin: 0;
    }
    
    .modal-header {
        padding: var(--spacing-lg);
    }
    
    .modal-form,
    .settings-form,
    .support-form {
        padding: var(--spacing-lg);
    }
    
    .modal-large {
        max-width: none;
    }
}

/* Form Responsive */
@media (max-width: 576px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .form-actions {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .form-actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    .table-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-container {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .search-input,
    .filter-select {
        width: 100%;
    }
}

/* Stats Grid Responsive */
@media (max-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* Footer Responsive */
@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xl);
    }
}

@media (max-width: 576px) {
    .footer-container {
        padding: var(--spacing-xl) var(--spacing-md) var(--spacing-md);
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-md);
    }
    
    .legal-links {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-sm);
    }
    
    .social-links {
        justify-content: center;
    }
}

/* Chart Responsive */
@media (max-width: 768px) {
    .chart-container canvas {
        max-width: 100%;
        height: auto;
    }
    
    .chart-section {
        padding: var(--spacing-md);
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    .btn {
        min-height: 44px; /* Apple's recommended minimum */
        padding: var(--spacing-md) var(--spacing-lg);
    }
    
    .btn-edit,
    .btn-delete,
    .btn-view,
    .btn-analytics {
        min-width: 44px;
        min-height: 44px;
        padding: var(--spacing-md);
    }
    
    .nav-link {
        min-height: 44px;
        padding: var(--spacing-md) var(--spacing-lg);
    }
    
    .mobile-toggle {
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Remove hover effects on touch devices */
    .stat-card:hover {
        transform: none;
        box-shadow: var(--shadow-sm);
    }
    
    .btn-primary:hover {
        transform: none;
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Landscape Phone Orientation */
@media (max-height: 500px) and (orientation: landscape) {
    .nav-menu {
        height: calc(100vh - 70px);
        padding: var(--spacing-lg);
    }
    
    .modal {
        padding-top: 2vh;
    }
    
    .page-header {
        margin-bottom: var(--spacing-lg);
    }
    
    main {
        padding: var(--spacing-lg) 0;
    }
}

/* Print Optimizations */
@media print {
    .main-header,
    .main-footer,
    .btn,
    .mobile-toggle,
    .action-buttons,
    .search-input,
    .filter-select,
    .modal {
        display: none !important;
    }
    
    .page-container {
        max-width: none;
        padding: 0;
        margin: 0;
    }
    
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-md);
        break-inside: avoid;
    }
    
    .stat-card {
        border: 1px solid var(--gray-300);
        box-shadow: none;
        break-inside: avoid;
    }
    
    .table-container {
        border: 1px solid var(--gray-300);
        box-shadow: none;
    }
    
    .data-table th {
        background: var(--gray-100) !important;
        color: var(--dark-color) !important;
    }
    
    body {
        font-size: 11pt;
        line-height: 1.4;
        color: black !important;
        background: white !important;
    }
    
    h1, h2, h3, h4 {
        color: black !important;
    }
    
    .page-header h1 {
        font-size: 18pt;
        margin-bottom: 12pt;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    :root {
        --primary-color: #0052a3;
        --secondary-color: #495057;
        --gray-300: #999999;
        --gray-600: #333333;
    }
    
    .nav-link {
        border: 1px solid transparent;
    }
    
    .nav-link.active {
        border-color: var(--white);
    }
    
    .btn {
        border: 2px solid currentColor;
    }
    
    .stat-card {
        border: 1px solid var(--gray-300);
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .modal-content {
        animation: none;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    :root {
        --white: #1a1d20;
        --light-color: #212529;
        --gray-50: #2d3436;
        --gray-100: #495057;
        --gray-200: #6c757d;
        --gray-300: #adb5bd;
        --gray-400: #ced4da;
        --gray-500: #dee2e6;
        --gray-600: #e9ecef;
        --gray-700: #f1f3f4;
        --gray-800: #f8f9fa;
        --dark-color: #ffffff;
        --primary-light: rgba(0, 102, 204, 0.1);
    }
    
    body {
        background-color: #0d1117;
        color: var(--dark-color);
    }
    
    .main-header {
        background: #161b22;
        border-bottom: 1px solid var(--gray-700);
    }
    
    .nav-link:hover {
        background: rgba(0, 102, 204, 0.1);
    }
    
    .table-container,
    .stat-card,
    .modal-content,
    .settings-content {
        background: #161b22;
        border: 1px solid var(--gray-700);
    }
    
    .data-table th {
        background: var(--gray-800);
    }
    
    .search-input,
    .filter-select,
    input,
    textarea,
    select {
        background: #0d1117;
        border-color: var(--gray-700);
        color: var(--dark-color);
    }
    
    .search-input:focus,
    input:focus,
    textarea:focus,
    select:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
    }
}

/* Pagination Responsive */
.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: var(--white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
}

.pagination-controls {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.page-number {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    background: var(--gray-100);
    color: var(--gray-700);
    font-weight: var(--font-weight-medium);
}

.page-number.active {
    background: var(--primary-color);
    color: var(--white);
}

@media (max-width: 576px) {
    .pagination-container {
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
    }
    
    .pagination-info {
        order: 2;
        font-size: var(--font-size-sm);
    }
    
    .pagination-controls {
        order: 1;
    }
}

/* Loading States Responsive */
@media (max-width: 576px) {
    .loading::after {
        animation-duration: 2s;
    }
}

/* Support Page Responsive */
.support-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
}

@media (max-width: 992px) {
    .support-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
}

.help-resources {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

@media (max-width: 576px) {
    .help-resources {
        grid-template-columns: 1fr;
    }
}

/* Finance Page Responsive */
.finance-overview {
    margin-bottom: var(--spacing-2xl);
}

.finance-content .content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-2xl);
}

@media (max-width: 992px) {
    .finance-content .content-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
}
-------------------- END OF FILE --------------------

### FILE 28: assets/images/logo.svg
- Type: SVG
- Size: 0 B
- Path: assets/images
- Name: logo.svg
------------------------------------------------------------
[IMAGE FILE: SVG - Content not displayed]
-------------------- END OF FILE --------------------

### FILE 29: assets/js/dashboard.js
- Type: JS
- Size: 26.43 KB
- Path: assets/js
- Name: dashboard.js
------------------------------------------------------------
// Dashboard specific functionality for Relevant Reflex
(function() {
    'use strict';

    // Dashboard module
    window.RR = window.RR || {};
    
    RR.dashboard = {
        charts: {},
        updateInterval: null,
        refreshRate: 30000, // 30 seconds

        init: function() {
            this.initializeCharts();
            this.setupQuickActions();
            this.setupRealTimeUpdates();
            this.setupInteractions();
            this.loadDashboardData();
        },

        initializeCharts: function() {
            // Performance Chart
            const performanceCanvas = document.getElementById('performanceChart');
            if (performanceCanvas) {
                this.charts.performance = this.createPerformanceChart(performanceCanvas);
            }

            // Revenue Chart (for finance page)
            const revenueCanvas = document.getElementById('revenueChart');
            if (revenueCanvas) {
                this.charts.revenue = this.createRevenueChart(revenueCanvas);
            }

            // Demand Chart (for demand page)
            const demandCanvas = document.getElementById('demandChart');
            if (demandCanvas) {
                this.charts.demand = this.createDemandChart(demandCanvas);
            }

            // Setup chart period controls
            this.setupChartControls();
        },

        createPerformanceChart: function(canvas) {
            const ctx = canvas.getContext('2d');
            
            // Sample performance data - replace with real API data
            const data = {
                labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6'],
                datasets: [{
                    label: 'Panel Responses',
                    data: [320, 450, 380, 520, 430, 580],
                    borderColor: getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim(),
                    backgroundColor: getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim() + '20',
                    borderWidth: 3,
                    tension: 0.4,
                    fill: true
                }, {
                    label: 'Active Users',
                    data: [280, 390, 420, 480, 510, 540],
                    borderColor: getComputedStyle(document.documentElement).getPropertyValue('--success-color').trim(),
                    backgroundColor: getComputedStyle(document.documentElement).getPropertyValue('--success-color').trim() + '20',
                    borderWidth: 3,
                    tension: 0.4,
                    fill: true
                }]
            };

            return this.drawChart(ctx, canvas, data, 'line');
        },

        createRevenueChart: function(canvas) {
            const ctx = canvas.getContext('2d');
            
            // Sample revenue data for last 12 months
            const data = {
                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                datasets: [{
                    label: 'Revenue',
                    data: [28500, 31200, 29800, 33500, 35200, 38900, 42100, 39800, 43500, 45230, 41800, 44600],
                    backgroundColor: getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim(),
                    borderColor: getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim(),
                    borderWidth: 1
                }]
            };

            return this.drawChart(ctx, canvas, data, 'bar');
        },

        createDemandChart: function(canvas) {
            const ctx = canvas.getContext('2d');
            
            // Sample demand trend data
            const currentData = [6.2, 6.8, 7.1, 7.5, 8.2, 8.0, 8.5, 8.7, 9.1, 8.9, 8.7, 9.2];
            const forecastData = [9.0, 9.2, 9.5, 9.7, 9.9, 10.2];
            
            const data = {
                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan+', 'Feb+', 'Mar+', 'Apr+', 'May+', 'Jun+'],
                datasets: [{
                    label: 'Current Demand',
                    data: [...currentData, ...Array(6).fill(null)],
                    borderColor: getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim(),
                    backgroundColor: getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim() + '30',
                    borderWidth: 3,
                    tension: 0.4,
                    fill: false
                }, {
                    label: 'Forecast',
                    data: [...Array(11).fill(null), currentData[11], ...forecastData],
                    borderColor: getComputedStyle(document.documentElement).getPropertyValue('--success-color').trim(),
                    backgroundColor: getComputedStyle(document.documentElement).getPropertyValue('--success-color').trim() + '30',
                    borderWidth: 2,
                    borderDash: [5, 5],
                    tension: 0.4,
                    fill: false
                }]
            };

            return this.drawChart(ctx, canvas, data, 'line');
        },

        drawChart: function(ctx, canvas, data, type) {
            // Simple chart implementation (replace with Chart.js for production)
            const chart = {
                data: data,
                type: type,
                canvas: canvas,
                ctx: ctx
            };

            this.renderChart(chart);
            return chart;
        },

        renderChart: function(chart) {
            const { ctx, canvas, data, type } = chart;
            const padding = 40;
            const chartWidth = canvas.width - 2 * padding;
            const chartHeight = canvas.height - 2 * padding;

            // Clear canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            if (type === 'line') {
                this.renderLineChart(ctx, canvas, data, padding, chartWidth, chartHeight);
            } else if (type === 'bar') {
                this.renderBarChart(ctx, canvas, data, padding, chartWidth, chartHeight);
            }
        },

        renderLineChart: function(ctx, canvas, data, padding, chartWidth, chartHeight) {
            const datasets = data.datasets;
            const labels = data.labels;
            
            // Find max and min values
            const allValues = datasets.flatMap(d => d.data.filter(v => v !== null));
            const maxValue = Math.max(...allValues);
            const minValue = Math.min(...allValues);
            const range = maxValue - minValue || 1;

            // Draw axes
            ctx.strokeStyle = '#e9ecef';
            ctx.lineWidth = 1;
            ctx.beginPath();
            ctx.moveTo(padding, padding);
            ctx.lineTo(padding, canvas.height - padding);
            ctx.lineTo(canvas.width - padding, canvas.height - padding);
            ctx.stroke();

            // Draw grid lines
            ctx.strokeStyle = '#f1f3f4';
            ctx.lineWidth = 1;
            for (let i = 1; i < 5; i++) {
                const y = padding + (i / 5) * chartHeight;
                ctx.beginPath();
                ctx.moveTo(padding, y);
                ctx.lineTo(canvas.width - padding, y);
                ctx.stroke();
            }

            // Draw labels
            ctx.fillStyle = '#666';
            ctx.font = '12px Arial';
            ctx.textAlign = 'center';
            labels.forEach((label, index) => {
                const x = padding + (index / (labels.length - 1)) * chartWidth;
                ctx.fillText(label, x, canvas.height - padding + 20);
            });

            // Draw datasets
            datasets.forEach(dataset => {
                ctx.strokeStyle = dataset.borderColor;
                ctx.lineWidth = dataset.borderWidth || 2;
                
                if (dataset.borderDash) {
                    ctx.setLineDash(dataset.borderDash);
                } else {
                    ctx.setLineDash([]);
                }

                ctx.beginPath();
                let firstPoint = true;

                dataset.data.forEach((value, index) => {
                    if (value !== null) {
                        const x = padding + (index / (labels.length - 1)) * chartWidth;
                        const y = canvas.height - padding - ((value - minValue) / range) * chartHeight;

                        if (firstPoint) {
                            ctx.moveTo(x, y);
                            firstPoint = false;
                        } else {
                            ctx.lineTo(x, y);
                        }

                        // Draw data points
                        ctx.save();
                        ctx.fillStyle = dataset.borderColor;
                        ctx.beginPath();
                        ctx.arc(x, y, 3, 0, 2 * Math.PI);
                        ctx.fill();
                        ctx.restore();
                    }
                });

                ctx.stroke();
            });
        },

        renderBarChart: function(ctx, canvas, data, padding, chartWidth, chartHeight) {
            const dataset = data.datasets[0];
            const labels = data.labels;
            const values = dataset.data;
            const maxValue = Math.max(...values);
            const barWidth = chartWidth / values.length * 0.8;

            // Draw axes
            ctx.strokeStyle = '#e9ecef';
            ctx.lineWidth = 1;
            ctx.beginPath();
            ctx.moveTo(padding, padding);
            ctx.lineTo(padding, canvas.height - padding);
            ctx.lineTo(canvas.width - padding, canvas.height - padding);
            ctx.stroke();

            // Draw bars
            ctx.fillStyle = dataset.backgroundColor;
            values.forEach((value, index) => {
                const barHeight = (value / maxValue) * chartHeight;
                const x = padding + (index / values.length) * chartWidth + (chartWidth / values.length - barWidth) / 2;
                const y = canvas.height - padding - barHeight;

                ctx.fillRect(x, y, barWidth, barHeight);

                // Draw value labels
                ctx.fillStyle = '#666';
                ctx.font = '12px Arial';
                ctx.textAlign = 'center';
                ctx.fillText('$' + (value / 1000).toFixed(0) + 'k', x + barWidth / 2, y - 5);
                
                // Draw month labels
                ctx.fillText(labels[index], x + barWidth / 2, canvas.height - padding + 15);
                
                ctx.fillStyle = dataset.backgroundColor;
            });
        },

        setupChartControls: function() {
            // Chart period selectors
            const periodSelects = document.querySelectorAll('#chartPeriod, #trendPeriod, #revenuePeriod');
            
            periodSelects.forEach(select => {
                select.addEventListener('change', function() {
                    const chartId = this.id.replace('Period', 'Chart');
                    RR.dashboard.updateChartPeriod(chartId, this.value);
                });
            });
        },

        updateChartPeriod: function(chartId, period) {
            const chart = this.charts[chartId.replace('Chart', '')];
            if (!chart) return;

            // Update chart data based on period
            // This would typically fetch new data from API
            console.log(`Updating ${chartId} for period: ${period}`);
            
            // Show loading state
            const canvas = chart.canvas;
            const ctx = chart.ctx;
            
            ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            ctx.fillStyle = '#666';
            ctx.font = '16px Arial';
            ctx.textAlign = 'center';
            ctx.fillText('Loading...', canvas.width / 2, canvas.height / 2);
            
            // Simulate API call
            setTimeout(() => {
                this.renderChart(chart);
                RR.toast.show('Chart updated successfully', 'success');
            }, 800);
        },

        setupQuickActions: function() {
            // Quick action buttons
            const quickActions = {
                createPanel: () => {
                    window.location.href = 'panel.php?action=create';
                },
                manageUsers: () => {
                    window.location.href = 'users.php';
                },
                viewReports: () => {
                    window.location.href = 'finance.php?tab=reports';
                },
                systemSettings: () => {
                    window.location.href = 'settings.php';
                }
            };

            // Expose to global scope
            window.quickActions = quickActions;

            // Setup quick action cards
            document.querySelectorAll('.quick-action-card').forEach(card => {
                card.addEventListener('click', function() {
                    const action = this.getAttribute('data-action');
                    if (action && quickActions[action]) {
                        quickActions[action]();
                    }
                });
            });

            // Setup header action buttons
            document.getElementById('addUserBtn')?.addEventListener('click', function() {
                RR.modals.open('addUserModal');
            });

            document.getElementById('createPanelBtn')?.addEventListener('click', function() {
                RR.modals.open('createPanelModal');
            });

            document.getElementById('addSupplyBtn')?.addEventListener('click', function() {
                RR.modals.open('addSupplyModal');
            });

            document.getElementById('addTransactionBtn')?.addEventListener('click', function() {
                RR.modals.open('addTransactionModal');
            });
        },

        setupRealTimeUpdates: function() {
            // Auto-refresh dashboard data
            this.updateInterval = setInterval(() => {
                this.updateRealTimeData();
            }, this.refreshRate);

            // Pause updates when page is not visible
            document.addEventListener('visibilitychange', () => {
                if (document.hidden) {
                    clearInterval(this.updateInterval);
                } else {
                    this.updateInterval = setInterval(() => {
                        this.updateRealTimeData();
                    }, this.refreshRate);
                }
            });
        },

        updateRealTimeData: function() {
            // Update stat cards with simulated real-time data
            const statCards = document.querySelectorAll('.stat-card');
            
            statCards.forEach(card => {
                const valueElement = card.querySelector('h3');
                if (!valueElement) return;

                const currentText = valueElement.textContent;
                
                // Update revenue values
                if (currentText.includes('$')) {
                    const currentValue = parseInt(currentText.replace(/[^0-9]/g, ''));
                    const variation = Math.floor(Math.random() * 200) - 100; // -100 to +100
                    const newValue = Math.max(0, currentValue + variation);
                    
                    valueElement.textContent = '$' + RR.utils.formatNumber(newValue);
                    
                    // Add pulse animation
                    card.style.transform = 'scale(1.02)';
                    setTimeout(() => {
                        card.style.transform = '';
                    }, 200);
                }
                
                // Update numeric values
                else if (/^\d+$/.test(currentText)) {
                    const currentValue = parseInt(currentText);
                    const variation = Math.floor(Math.random() * 6) - 3; // -3 to +3
                    const newValue = Math.max(0, currentValue + variation);
                    
                    valueElement.textContent = newValue.toString();
                    
                    // Add subtle highlight
                    card.classList.add('updated');
                    setTimeout(() => {
                        card.classList.remove('updated');
                    }, 1000);
                }
            });

            // Update charts
            Object.keys(this.charts).forEach(chartKey => {
                if (Math.random() > 0.7) { // 30% chance to update each chart
                    this.updateChartData(this.charts[chartKey]);
                }
            });
        },

        updateChartData: function(chart) {
            if (!chart || !chart.data) return;

            // Add new data point and remove oldest
            chart.data.datasets.forEach(dataset => {
                if (dataset.data.length > 0) {
                    // Generate new data point based on last value
                    const lastValue = dataset.data[dataset.data.length - 1];
                    const variation = (Math.random() - 0.5) * (lastValue * 0.1);
                    const newValue = Math.max(0, lastValue + variation);
                    
                    dataset.data.push(Math.round(newValue));
                    
                    // Remove oldest point if we have too many
                    if (dataset.data.length > 12) {
                        dataset.data.shift();
                    }
                }
            });

            this.renderChart(chart);
        },

        setupInteractions: function() {
            // Activity item interactions
            document.querySelectorAll('.activity-item').forEach(item => {
                item.addEventListener('click', function() {
                    this.classList.toggle('expanded');
                });
            });

            // Stat card interactions
            document.querySelectorAll('.stat-card').forEach(card => {
                card.addEventListener('click', function() {
                    const cardType = this.querySelector('p').textContent.toLowerCase();
                    RR.dashboard.navigateToDetails(cardType);
                });
            });

            // Export functionality
            document.querySelectorAll('[id$="ExportBtn"], [id$="exportBtn"]').forEach(btn => {
                btn.addEventListener('click', function() {
                    RR.dashboard.exportData(this.id);
                });
            });

            // Generate report functionality
            document.getElementById('generateReportBtn')?.addEventListener('click', function() {
                RR.dashboard.generateReport();
            });
        },

        navigateToDetails: function(cardType) {
            const navigationMap = {
                'total users': 'users.php',
                'active panels': 'panel.php',
                'pending supplies': 'supply.php',
                'monthly revenue': 'finance.php',
                'total revenue': 'finance.php',
                'net profit': 'finance.php'
            };

            const url = navigationMap[cardType];
            if (url) {
                window.location.href = url;
            }
        },

        exportData: function(buttonId) {
            const button = document.getElementById(buttonId);
            if (!button) return;

            // Show loading state
            const originalText = button.textContent;
            button.textContent = 'Exporting...';
            button.disabled = true;

            // Simulate export process
            setTimeout(() => {
                // Reset button
                button.textContent = originalText;
                button.disabled = false;

                // Show success message
                RR.toast.show('Data exported successfully!', 'success');

                // Simulate file download
                const link = document.createElement('a');
                link.href = 'data:text/csv;charset=utf-8,Sample Export Data\nColumn1,Column2,Column3\nValue1,Value2,Value3';
                link.download = `export-${new Date().toISOString().split('T')[0]}.csv`;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }, 2000);
        },

        generateReport: function() {
            const button = document.getElementById('generateReportBtn');
            if (!button) return;

            // Show loading state
            button.innerHTML = '<span>⏳</span> Generating...';
            button.disabled = true;

            // Simulate report generation
            setTimeout(() => {
                // Reset button
                button.innerHTML = '<span>📊</span> Generate Report';
                button.disabled = false;

                // Show success and open modal with report preview
                RR.toast.show('Report generated successfully!', 'success');
                
                // Create and show report preview modal
                RR.dashboard.showReportPreview();
            }, 3000);
        },

        showReportPreview: function() {
            const modal = document.createElement('div');
            modal.className = 'modal';
            modal.id = 'reportPreviewModal';
            modal.innerHTML = `
                <div class="modal-content modal-large">
                    <div class="modal-header">
                        <h2>Generated Report Preview</h2>
                        <button class="modal-close">&times;</button>
                    </div>
                    <div class="report-preview" style="padding: var(--spacing-xl);">
                        <h3>Performance Summary Report</h3>
                        <p><strong>Generated:</strong> ${new Date().toLocaleString()}</p>
                        <div style="margin: var(--spacing-lg) 0;">
                            <h4>Key Metrics</h4>
                            <ul>
                                <li>Total Users: 1,248 (+12% from last month)</li>
                                <li>Active Panels: 23 (+3 new this month)</li>
                                <li>Revenue Growth: 15.3% year-over-year</li>
                                <li>Customer Satisfaction: 98.5%</li>
                            </ul>
                        </div>
                        <div style="text-align: center; margin-top: var(--spacing-xl);">
                            <button class="btn btn-primary" onclick="window.print()">Print Report</button>
                            <button class="btn btn-secondary" onclick="RR.modals.close('reportPreviewModal')">Close</button>
                        </div>
                    </div>
                </div>
            `;
            
            document.body.appendChild(modal);
            RR.modals.open('reportPreviewModal');
        },

        loadDashboardData: function() {
            // Load initial dashboard data
            console.log('Loading dashboard data...');

            // This would typically make API calls to load real data
            // For now, we'll simulate data loading with a timeout
            setTimeout(() => {
                console.log('Dashboard data loaded successfully');
            }, 1000);
        },

        // Keyboard shortcuts
        setupKeyboardShortcuts: function() {
            document.addEventListener('keydown', function(e) {
                // Only trigger shortcuts if not typing in input fields
                if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
                    return;
                }

                if (e.ctrlKey || e.metaKey) {
                    switch(e.key) {
                        case '1':
                            e.preventDefault();
                            window.location.href = 'users.php';
                            break;
                        case '2':
                            e.preventDefault();
                            window.location.href = 'panel.php';
                            break;
                        case '3':
                            e.preventDefault();
                            window.location.href = 'supply.php';
                            break;
                        case '4':
                            e.preventDefault();
                            window.location.href = 'demand.php';
                            break;
                        case '5':
                            e.preventDefault();
                            window.location.href = 'finance.php';
                            break;
                        case 'h':
                            e.preventDefault();
                            window.location.href = 'index.php';
                            break;
                    }
                }
            });
        },

        // Cleanup function
        destroy: function() {
            if (this.updateInterval) {
                clearInterval(this.updateInterval);
            }
        }
    };

    // Initialize dashboard when DOM is ready
    document.addEventListener('DOMContentLoaded', function() {
        // Only initialize on dashboard-related pages
        const isDashboardPage = document.querySelector('.dashboard-container, .stats-grid, .chart-section');
        
        if (isDashboardPage) {
            RR.dashboard.init();
            RR.dashboard.setupKeyboardShortcuts();
        }
    });

    // Initialize dashboard function for other pages to call
    window.initDashboard = function() {
        if (RR.dashboard) {
            RR.dashboard.init();
        }
    };

    // Cleanup on page unload
    window.addEventListener('beforeunload', function() {
        if (RR.dashboard) {
            RR.dashboard.destroy();
        }
    });

    // Add CSS for updated state
    const style = document.createElement('style');
    style.textContent = `
        .stat-card.updated {
            background: linear-gradient(135deg, var(--primary-light) 0%, rgba(0, 102, 204, 0.05) 100%);
            border-color: var(--primary-color);
            transform: translateY(-1px);
        }
        
        .report-preview h3 {
            color: var(--primary-color);
            margin-bottom: var(--spacing-lg);
        }
        
        .report-preview h4 {
            color: var(--gray-700);
            margin: var(--spacing-lg) 0 var(--spacing-md);
        }
        
        .report-preview ul {
            list-style: none;
            padding-left: 0;
        }
        
        .report-preview li {
            padding: var(--spacing-sm) 0;
            border-bottom: 1px solid var(--gray-200);
        }
        
        .report-preview li:last-child {
            border-bottom: none;
        }
    `;
    document.head.appendChild(style);

})();
-------------------- END OF FILE --------------------

### FILE 30: assets/js/main.js
- Type: JS
- Size: 33.11 KB
- Path: assets/js
- Name: main.js
------------------------------------------------------------
// Relevant Reflex - Main JavaScript
(function() {
    'use strict';

    // Global app object
    window.RR = window.RR || {};

    // App configuration
    RR.config = {
        version: '1.0.0',
        apiUrl: '/api/',
        debounceDelay: 300,
        toastDuration: 3000,
        animationDuration: 300
    };

    // Initialize app when DOM is ready
    document.addEventListener('DOMContentLoaded', function() {
        RR.init();
    });

    // Main initialization
    RR.init = function() {
        console.log(`Relevant Reflex Panel Management System v${RR.config.version} initialized`);
        
        // Initialize core modules
        RR.navigation.init();
        RR.forms.init();
        RR.tables.init();
        RR.modals.init();
        RR.tooltips.init();
        RR.lazyLoad.init();
        RR.performance.init();
        
        // Initialize page-specific modules
        if (typeof window.initDashboard === 'function') {
            window.initDashboard();
        }
    };

    // Navigation Module
    RR.navigation = {
        init: function() {
            this.setupMobileToggle();
            this.setupSmoothScrolling();
            this.setupActiveLinks();
        },

        setupMobileToggle: function() {
            const mobileToggle = document.querySelector('.mobile-toggle');
            const navMenu = document.querySelector('.nav-menu');
            
            if (!mobileToggle || !navMenu) return;

            // Toggle mobile menu
            mobileToggle.addEventListener('click', function(e) {
                e.preventDefault();
                
                const isActive = mobileToggle.classList.contains('active');
                
                if (isActive) {
                    RR.navigation.closeMobileMenu();
                } else {
                    RR.navigation.openMobileMenu();
                }
            });

            // Close menu when clicking nav links
            navMenu.querySelectorAll('.nav-link').forEach(link => {
                link.addEventListener('click', function() {
                    RR.navigation.closeMobileMenu();
                });
            });

            // Close menu when clicking outside
            document.addEventListener('click', function(e) {
                const isClickInsideNav = navMenu.contains(e.target) || mobileToggle.contains(e.target);
                
                if (!isClickInsideNav && mobileToggle.classList.contains('active')) {
                    RR.navigation.closeMobileMenu();
                }
            });

            // Close menu on escape key
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape' && mobileToggle.classList.contains('active')) {
                    RR.navigation.closeMobileMenu();
                }
            });
        },

        openMobileMenu: function() {
            const mobileToggle = document.querySelector('.mobile-toggle');
            const navMenu = document.querySelector('.nav-menu');
            
            mobileToggle.classList.add('active');
            navMenu.classList.add('active');
            mobileToggle.setAttribute('aria-expanded', 'true');
            
            // Prevent body scroll
            document.body.style.overflow = 'hidden';
        },

        closeMobileMenu: function() {
            const mobileToggle = document.querySelector('.mobile-toggle');
            const navMenu = document.querySelector('.nav-menu');
            
            mobileToggle.classList.remove('active');
            navMenu.classList.remove('active');
            mobileToggle.setAttribute('aria-expanded', 'false');
            
            // Restore body scroll
            document.body.style.overflow = '';
        },

        setupSmoothScrolling: function() {
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function(e) {
                    const href = this.getAttribute('href');
                    
                    if (href === '#') {
                        e.preventDefault();
                        return;
                    }

                    const target = document.querySelector(href);
                    if (target) {
                        e.preventDefault();
                        
                        const headerHeight = document.querySelector('.main-header')?.offsetHeight || 0;
                        const targetPosition = target.offsetTop - headerHeight - 20;
                        
                        window.scrollTo({
                            top: targetPosition,
                            behavior: 'smooth'
                        });
                    }
                });
            });
        },

        setupActiveLinks: function() {
            const currentPage = window.location.pathname;
            const navLinks = document.querySelectorAll('.nav-link');
            
            navLinks.forEach(link => {
                const linkPath = new URL(link.href).pathname;
                
                if (linkPath === currentPage) {
                    link.classList.add('active');
                } else {
                    link.classList.remove('active');
                }
            });
        }
    };

    // Forms Module
    RR.forms = {
        init: function() {
            this.setupValidation();
            this.setupFileUploads();
            this.setupFormSubmissions();
            this.setupRealTimeValidation();
        },

        setupValidation: function() {
            const forms = document.querySelectorAll('form[data-validate]');
            
            forms.forEach(form => {
                form.addEventListener('submit', function(e) {
                    if (!RR.forms.validateForm(this)) {
                        e.preventDefault();
                    }
                });
            });
        },

        validateForm: function(form) {
            const requiredFields = form.querySelectorAll('[required]');
            let isValid = true;
            
            // Clear previous errors
            form.querySelectorAll('.error').forEach(el => el.classList.remove('error'));
            form.querySelectorAll('.error-message').forEach(el => el.remove());

            requiredFields.forEach(field => {
                if (!this.validateField(field)) {
                    isValid = false;
                }
            });

            // Email validation
            const emailFields = form.querySelectorAll('input[type="email"]');
            emailFields.forEach(field => {
                if (field.value && !this.isValidEmail(field.value)) {
                    this.showFieldError(field, 'Please enter a valid email address');
                    isValid = false;
                }
            });

            // Password confirmation
            const passwordField = form.querySelector('input[name="password"]');
            const confirmField = form.querySelector('input[name="confirm_password"]');
            
            if (passwordField && confirmField && passwordField.value !== confirmField.value) {
                this.showFieldError(confirmField, 'Passwords do not match');
                isValid = false;
            }

            return isValid;
        },

        validateField: function(field) {
            const value = field.value.trim();
            
            if (!value) {
                this.showFieldError(field, 'This field is required');
                return false;
            }

            // Minimum length validation
            const minLength = field.getAttribute('minlength');
            if (minLength && value.length < parseInt(minLength)) {
                this.showFieldError(field, `Minimum ${minLength} characters required`);
                return false;
            }

            field.classList.remove('error');
            return true;
        },

        showFieldError: function(field, message) {
            field.classList.add('error');
            
            // Remove existing error message
            const existingError = field.parentNode.querySelector('.error-message');
            if (existingError) {
                existingError.remove();
            }

            // Add new error message
            const errorEl = document.createElement('small');
            errorEl.className = 'error-message';
            errorEl.textContent = message;
            errorEl.style.color = 'var(--danger-color)';
            errorEl.style.display = 'block';
            errorEl.style.marginTop = 'var(--spacing-xs)';
            
            field.parentNode.insertBefore(errorEl, field.nextSibling);
        },

        isValidEmail: function(email) {
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return emailRegex.test(email);
        },

        setupFileUploads: function() {
            const fileInputs = document.querySelectorAll('input[type="file"]');
            
            fileInputs.forEach(input => {
                input.addEventListener('change', function() {
                    const file = this.files[0];
                    if (file) {
                        // Validate file size (5MB limit)
                        if (file.size > 5 * 1024 * 1024) {
                            RR.toast.show('File size must be less than 5MB', 'error');
                            this.value = '';
                            return;
                        }

                        // Show file name
                        const label = this.nextElementSibling;
                        if (label) {
                            label.textContent = file.name;
                        }
                    }
                });
            });
        },

        setupFormSubmissions: function() {
            const submitButtons = document.querySelectorAll('.btn[type="submit"], .btn-primary');
            
            submitButtons.forEach(btn => {
                btn.addEventListener('click', function(e) {
                    const form = this.closest('form');
                    
                    if (form && this.type === 'submit') {
                        RR.forms.addLoadingState(this);
                        
                        // Remove loading state after form submission
                        setTimeout(() => {
                            RR.forms.removeLoadingState(this);
                        }, 2000);
                    }
                });
            });
        },

        setupRealTimeValidation: function() {
            const inputs = document.querySelectorAll('input[required], textarea[required]');
            
            inputs.forEach(input => {
                input.addEventListener('blur', function() {
                    if (this.value.trim()) {
                        RR.forms.validateField(this);
                    }
                });

                input.addEventListener('input', function() {
                    if (this.classList.contains('error') && this.value.trim()) {
                        RR.forms.validateField(this);
                    }
                });
            });
        },

        addLoadingState: function(button) {
            if (button.classList.contains('loading')) return;

            const originalText = button.textContent;
            button.setAttribute('data-original-text', originalText);
            button.textContent = 'Loading...';
            button.disabled = true;
            button.classList.add('loading');
        },

        removeLoadingState: function(button) {
            const originalText = button.getAttribute('data-original-text');
            if (originalText) {
                button.textContent = originalText;
                button.removeAttribute('data-original-text');
            }
            button.disabled = false;
            button.classList.remove('loading');
        }
    };

    // Tables Module
    RR.tables = {
        init: function() {
            this.setupSearch();
            this.setupSorting();
            this.setupActions();
            this.setupFilters();
        },

        setupSearch: function() {
            const searchInputs = document.querySelectorAll('.search-input');
            
            searchInputs.forEach(input => {
                let timeout;
                
                input.addEventListener('input', function() {
                    clearTimeout(timeout);
                    
                    timeout = setTimeout(() => {
                        const query = this.value.toLowerCase().trim();
                        RR.tables.filterTable(query);
                    }, RR.config.debounceDelay);
                });
            });
        },

        filterTable: function(query) {
            const table = document.querySelector('.data-table');
            if (!table) return;

            const rows = table.querySelectorAll('tbody tr');
            let visibleCount = 0;

            rows.forEach(row => {
                const text = row.textContent.toLowerCase();
                const shouldShow = !query || text.includes(query);
                
                row.style.display = shouldShow ? '' : 'none';
                if (shouldShow) visibleCount++;
            });

            // Update pagination info if exists
            const paginationInfo = document.querySelector('.pagination-info');
            if (paginationInfo && query) {
                paginationInfo.textContent = `Showing ${visibleCount} of ${rows.length} results`;
            }
        },

        setupSorting: function() {
            const headers = document.querySelectorAll('.data-table th[data-sort]');
            
            headers.forEach(header => {
                header.style.cursor = 'pointer';
                header.addEventListener('click', function() {
                    const sortKey = this.getAttribute('data-sort');
                    const isAscending = !this.classList.contains('sort-asc');
                    
                    // Remove sort classes from all headers
                    headers.forEach(h => h.classList.remove('sort-asc', 'sort-desc'));
                    
                    // Add sort class to current header
                    this.classList.add(isAscending ? 'sort-asc' : 'sort-desc');
                    
                    RR.tables.sortTable(sortKey, isAscending);
                });
            });
        },

        sortTable: function(sortKey, ascending) {
            const table = document.querySelector('.data-table tbody');
            if (!table) return;

            const rows = Array.from(table.querySelectorAll('tr'));
            const sortIndex = Array.from(table.parentNode.querySelectorAll('th')).findIndex(th => 
                th.getAttribute('data-sort') === sortKey
            );

            if (sortIndex === -1) return;

            rows.sort((a, b) => {
                const aText = a.cells[sortIndex]?.textContent.trim() || '';
                const bText = b.cells[sortIndex]?.textContent.trim() || '';
                
                // Try numeric sort first
                const aNum = parseFloat(aText.replace(/[^0-9.-]/g, ''));
                const bNum = parseFloat(bText.replace(/[^0-9.-]/g, ''));
                
                if (!isNaN(aNum) && !isNaN(bNum)) {
                    return ascending ? aNum - bNum : bNum - aNum;
                }
                
                // Fall back to string sort
                return ascending 
                    ? aText.localeCompare(bText)
                    : bText.localeCompare(aText);
            });

            // Re-append sorted rows
            rows.forEach(row => table.appendChild(row));
        },

        setupActions: function() {
            // Edit buttons
            document.addEventListener('click', function(e) {
                if (e.target.closest('.btn-edit')) {
                    e.preventDefault();
                    const id = e.target.closest('.btn-edit').getAttribute('data-id');
                    RR.tables.handleEdit(id);
                }
                
                if (e.target.closest('.btn-delete')) {
                    e.preventDefault();
                    const id = e.target.closest('.btn-delete').getAttribute('data-id');
                    RR.tables.handleDelete(id);
                }
                
                if (e.target.closest('.btn-view')) {
                    e.preventDefault();
                    const id = e.target.closest('.btn-view').getAttribute('data-id');
                    RR.tables.handleView(id);
                }
            });
        },

        handleEdit: function(id) {
            RR.toast.show(`Edit functionality for ID: ${id}`, 'info');
            // Implement edit modal or redirect
        },

        handleDelete: function(id) {
            if (confirm('Are you sure you want to delete this item? This action cannot be undone.')) {
                // Show loading state
                const button = document.querySelector(`[data-id="${id}"].btn-delete`);
                if (button) {
                    button.disabled = true;
                    button.innerHTML = '<span>⏳</span>';
                }

                // Simulate API call
                setTimeout(() => {
                    const row = button?.closest('tr');
                    if (row) {
                        row.style.transition = 'all 0.3s ease';
                        row.style.opacity = '0';
                        row.style.transform = 'translateX(-20px)';
                        
                        setTimeout(() => {
                            row.remove();
                            RR.toast.show('Item deleted successfully', 'success');
                        }, 300);
                    }
                }, 1000);
            }
        },

        handleView: function(id) {
            RR.toast.show(`View details for ID: ${id}`, 'info');
            // Implement view modal or redirect
        },

        setupFilters: function() {
            const filterSelects = document.querySelectorAll('.filter-select');
            
            filterSelects.forEach(select => {
                select.addEventListener('change', function() {
                    RR.tables.applyFilters();
                });
            });
        },

        applyFilters: function() {
            const table = document.querySelector('.data-table');
            if (!table) return;

            const rows = table.querySelectorAll('tbody tr');
            const filters = {};

            // Get all filter values
            document.querySelectorAll('.filter-select').forEach(select => {
                if (select.value) {
                    filters[select.id] = select.value.toLowerCase();
                }
            });

            // Apply filters
            rows.forEach(row => {
                let shouldShow = true;

                Object.keys(filters).forEach(filterId => {
                    const filterValue = filters[filterId];
                    let cellText = '';

                    // Get cell text based on filter type
                    if (filterId.includes('role')) {
                        const roleElement = row.querySelector('.role-badge');
                        cellText = roleElement ? roleElement.textContent.toLowerCase() : '';
                    } else if (filterId.includes('status')) {
                        const statusElement = row.querySelector('.status-badge');
                        cellText = statusElement ? statusElement.textContent.toLowerCase() : '';
                    }

                    if (cellText && !cellText.includes(filterValue)) {
                        shouldShow = false;
                    }
                });

                row.style.display = shouldShow ? '' : 'none';
            });
        }
    };

    // Modals Module
    RR.modals = {
        init: function() {
            this.setupModalTriggers();
            this.setupModalClosing();
            this.setupKeyboardNavigation();
        },

        setupModalTriggers: function() {
            // Generic modal triggers
            document.addEventListener('click', function(e) {
                const trigger = e.target.closest('[data-modal]');
                if (trigger) {
                    e.preventDefault();
                    const modalId = trigger.getAttribute('data-modal');
                    RR.modals.open(modalId);
                }
            });
        },

        setupModalClosing: function() {
            document.addEventListener('click', function(e) {
                // Close button
                if (e.target.closest('.modal-close')) {
                    const modal = e.target.closest('.modal');
                    if (modal) RR.modals.close(modal.id);
                }
                
                // Backdrop click
                if (e.target.classList.contains('modal')) {
                    RR.modals.close(e.target.id);
                }
            });
        },

        setupKeyboardNavigation: function() {
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape') {
                    const openModal = document.querySelector('.modal[style*="flex"]');
                    if (openModal) {
                        RR.modals.close(openModal.id);
                    }
                }
            });
        },

        open: function(modalId) {
            const modal = document.getElementById(modalId);
            if (!modal) return;

            modal.style.display = 'flex';
            document.body.style.overflow = 'hidden';
            
            // Focus first input
            const firstInput = modal.querySelector('input, textarea, select');
            if (firstInput) {
                setTimeout(() => firstInput.focus(), 100);
            }

            // Add animation class if needed
            const modalContent = modal.querySelector('.modal-content');
            if (modalContent) {
                modalContent.style.animation = 'modalAppear 0.3s ease-out';
            }
        },

        close: function(modalId) {
            const modal = document.getElementById(modalId);
            if (!modal) return;

            modal.style.display = 'none';
            document.body.style.overflow = '';
            
            // Reset form if exists
            const form = modal.querySelector('form');
            if (form) {
                form.reset();
                form.querySelectorAll('.error').forEach(el => el.classList.remove('error'));
                form.querySelectorAll('.error-message').forEach(el => el.remove());
            }
        }
    };

    // Toast Notifications
    RR.toast = {
        show: function(message, type = 'info') {
            // Remove existing toasts
            document.querySelectorAll('.toast').forEach(toast => toast.remove());

            const toast = document.createElement('div');
            toast.className = `toast toast-${type}`;
            toast.textContent = message;
            toast.setAttribute('role', 'alert');
            toast.setAttribute('aria-live', 'assertive');
            
            document.body.appendChild(toast);
            
            // Show with animation
            setTimeout(() => toast.classList.add('show'), 100);
            
            // Auto hide
            setTimeout(() => {
                toast.classList.remove('show');
                setTimeout(() => {
                    if (toast.parentNode) {
                        toast.parentNode.removeChild(toast);
                    }
                }, RR.config.animationDuration);
            }, RR.config.toastDuration);
        }
    };

    // Tooltips Module
    RR.tooltips = {
        init: function() {
            this.createTooltips();
        },

        createTooltips: function() {
            const elements = document.querySelectorAll('[title]');
            
            elements.forEach(el => {
                const title = el.getAttribute('title');
                el.removeAttribute('title'); // Prevent default tooltip
                
                el.addEventListener('mouseenter', () => {
                    RR.tooltips.show(el, title);
                });
                
                el.addEventListener('mouseleave', () => {
                    RR.tooltips.hide();
                });
            });
        },

        show: function(element, text) {
            const tooltip = document.createElement('div');
            tooltip.className = 'tooltip';
            tooltip.textContent = text;
            tooltip.style.cssText = `
                position: absolute;
                background: var(--dark-color);
                color: var(--white);
                padding: var(--spacing-sm) var(--spacing-md);
                border-radius: var(--border-radius);
                font-size: var(--font-size-sm);
                z-index: var(--z-tooltip);
                pointer-events: none;
                opacity: 0;
                transition: opacity 0.2s ease;
                white-space: nowrap;
            `;
            
            document.body.appendChild(tooltip);
            
            const rect = element.getBoundingClientRect();
            const tooltipRect = tooltip.getBoundingClientRect();
            
            tooltip.style.left = rect.left + (rect.width - tooltipRect.width) / 2 + 'px';
            tooltip.style.top = rect.top - tooltipRect.height - 8 + 'px';
            
            setTimeout(() => tooltip.style.opacity = '1', 10);
        },

        hide: function() {
            const tooltips = document.querySelectorAll('.tooltip');
            tooltips.forEach(tooltip => {
                tooltip.style.opacity = '0';
                setTimeout(() => {
                    if (tooltip.parentNode) {
                        tooltip.parentNode.removeChild(tooltip);
                    }
                }, 200);
            });
        }
    };

    // Lazy Loading Module
    RR.lazyLoad = {
        init: function() {
            if ('IntersectionObserver' in window) {
                this.setupImageLazyLoading();
                this.setupContentLazyLoading();
            }
        },

        setupImageLazyLoading: function() {
            const images = document.querySelectorAll('img[data-src]');
            
            if (images.length === 0) return;

            const imageObserver = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const img = entry.target;
                        img.src = img.dataset.src;
                        img.classList.remove('lazy');
                        imageObserver.unobserve(img);
                    }
                });
            });

            images.forEach(img => imageObserver.observe(img));
        },

        setupContentLazyLoading: function() {
            const lazyElements = document.querySelectorAll('.lazy-load');
            
            if (lazyElements.length === 0) return;

            const contentObserver = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('loaded');
                        contentObserver.unobserve(entry.target);
                    }
                });
            });

            lazyElements.forEach(el => contentObserver.observe(el));
        }
    };

    // Performance Module
    RR.performance = {
        init: function() {
            this.monitorPageLoad();
            this.setupLinkPrefetching();
        },

        monitorPageLoad: function() {
            window.addEventListener('load', function() {
                if ('performance' in window) {
                    const loadTime = Math.round(performance.now());
                    
                    console.log(`Page loaded in ${loadTime}ms`);
                    
                    // Warn if load time is slow
                    if (loadTime > 3000) {
                        console.warn('Page load time is above 3 seconds. Consider optimization.');
                    }
                    
                    // Send to analytics if available
                    if (typeof gtag !== 'undefined') {
                        gtag('event', 'timing_complete', {
                            name: 'load',
                            value: loadTime
                        });
                    }
                }
            });
        },

        setupLinkPrefetching: function() {
            // Prefetch important pages on hover
            const importantLinks = document.querySelectorAll('.nav-link, .btn-primary');
            
            importantLinks.forEach(link => {
                link.addEventListener('mouseenter', function() {
                    const url = this.href;
                    if (url && url.startsWith(window.location.origin)) {
                        RR.performance.prefetchPage(url);
                    }
                });
            });
        },

        prefetchPage: function(url) {
            // Check if already prefetched
            if (document.querySelector(`link[href="${url}"]`)) return;

            const link = document.createElement('link');
            link.rel = 'prefetch';
            link.href = url;
            document.head.appendChild(link);
        }
    };

    // Utility Functions
    RR.utils = {
        // Debounce function
        debounce: function(func, wait) {
            let timeout;
            return function executedFunction(...args) {
                const later = () => {
                    clearTimeout(timeout);
                    func(...args);
                };
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
            };
        },

        // Throttle function
        throttle: function(func, limit) {
            let inThrottle;
            return function() {
                const args = arguments;
                const context = this;
                if (!inThrottle) {
                    func.apply(context, args);
                    inThrottle = true;
                    setTimeout(() => inThrottle = false, limit);
                }
            };
        },

        // Format numbers with commas
        formatNumber: function(num) {
            return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        },

        // Format currency
        formatCurrency: function(amount, currency = 'USD') {
            return new Intl.NumberFormat('en-US', {
                style: 'currency',
                currency: currency
            }).format(amount);
        },

        // Format date
        formatDate: function(date, options = {}) {
            const defaultOptions = {
                year: 'numeric',
                month: 'short',
                day: 'numeric'
            };
            
            return new Date(date).toLocaleDateString('en-US', {
                ...defaultOptions,
                ...options
            });
        },

        // Get relative time
        getRelativeTime: function(date) {
            const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
            const now = new Date();
            const targetDate = new Date(date);
            const diffInMs = targetDate - now;
            const diffInDays = Math.floor(diffInMs / (1000 * 60 * 60 * 24));
            
            if (Math.abs(diffInDays) < 1) {
                const diffInHours = Math.floor(diffInMs / (1000 * 60 * 60));
                return rtf.format(diffInHours, 'hour');
            } else {
                return rtf.format(diffInDays, 'day');
            }
        },

        // API helper
        api: async function(url, options = {}) {
            const defaultOptions = {
                headers: {
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            };

            try {
                const response = await fetch(RR.config.apiUrl + url, {
                    ...defaultOptions,
                    ...options,
                    headers: { ...defaultOptions.headers, ...options.headers }
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const data = await response.json();
                return data;
            } catch (error) {
                console.error('API call failed:', error);
                RR.toast.show('An error occurred. Please try again.', 'error');
                throw error;
            }
        },

        // Local storage helpers (with fallbacks)
        storage: {
            get: function(key) {
                try {
                    return JSON.parse(localStorage.getItem(key));
                } catch {
                    return null;
                }
            },
            
            set: function(key, value) {
                try {
                    localStorage.setItem(key, JSON.stringify(value));
                    return true;
                } catch {
                    return false;
                }
            },
            
            remove: function(key) {
                try {
                    localStorage.removeItem(key);
                    return true;
                } catch {
                    return false;
                }
            }
        }
    };

    // Expose utilities globally
    window.utils = RR.utils;
    window.showToast = RR.toast.show;

})();
-------------------- END OF FILE --------------------

### FILE 31: includes/footer.php
- Type: PHP
- Size: 5.95 KB
- Path: includes
- Name: footer.php
------------------------------------------------------------
</main>

    <footer class="main-footer" role="contentinfo">
        <div class="footer-container">
            <div class="footer-grid">
                <div class="footer-section">
                    <div class="footer-brand">
                        <div class="logo">RR</div>
                        <h3>Relevant Reflex</h3>
                        <p>Professional panel management solutions for modern businesses. Streamline your operations with our comprehensive platform designed for efficiency and growth.</p>
                    </div>
                </div>
                
                <div class="footer-section">
                    <h4>Platform</h4>
                    <ul class="footer-links">
                        <li><a href="index.php">Dashboard Overview</a></li>
                        <li><a href="users.php">User Management</a></li>
                        <li><a href="panel.php">Panel Control</a></li>
                        <li><a href="supply.php">Supply Chain</a></li>
                    </ul>
                </div>
                
                <div class="footer-section">
                    <h4>Services</h4>
                    <ul class="footer-links">
                        <li><a href="demand.php">Demand Analytics</a></li>
                        <li><a href="finance.php">Financial Tools</a></li>
                        <li><a href="support.php">Support Center</a></li>
                        <li><a href="settings.php">System Settings</a></li>
                    </ul>
                </div>
                
                <div class="footer-section">
                    <h4>Connect</h4>
                    <div class="social-links">
                        <a href="#" aria-label="LinkedIn" rel="noopener">LinkedIn</a>
                        <a href="#" aria-label="Twitter" rel="noopener">Twitter</a>
                        <a href="#" aria-label="Contact Us">Contact</a>
                        <a href="#" aria-label="Blog">Blog</a>
                    </div>
                    <div class="contact-info">
                        <p><strong>Email:</strong> info@relevantreflex.com</p>
                        <p><strong>Phone:</strong> +1-800-REFLEX</p>
                        <p><strong>Address:</strong> Business District, Global Office</p>
                    </div>
                </div>
            </div>
            
            <div class="footer-bottom">
                <div class="footer-legal">
                    <p>&copy; <?php echo date('Y'); ?> Relevant Reflex. All rights reserved. Empowering businesses with intelligent panel management.</p>
                    <div class="legal-links">
                        <a href="/privacy-policy">Privacy Policy</a>
                        <a href="/terms-of-service">Terms of Service</a>
                        <a href="/cookie-policy">Cookie Policy</a>
                        <a href="/sitemap.xml">Sitemap</a>
                        <a href="/accessibility">Accessibility</a>
                    </div>
                </div>
                
                <!-- Schema.org structured data for SEO -->
                <script type="application/ld+json">
                {
                    "@context": "https://schema.org",
                    "@type": "Organization",
                    "name": "Relevant Reflex",
                    "url": "<?php echo SITE_URL; ?>",
                    "logo": "<?php echo SITE_URL; ?>/assets/images/logo.svg",
                    "description": "Professional panel management solutions and business intelligence platform for modern enterprises",
                    "foundingDate": "2025",
                    "address": {
                        "@type": "PostalAddress",
                        "addressCountry": "US"
                    },
                    "contactPoint": {
                        "@type": "ContactPoint",
                        "telephone": "+1-800-REFLEX",
                        "contactType": "customer service",
                        "email": "info@relevantreflex.com"
                    },
                    "sameAs": [
                        "https://linkedin.com/company/relevant-reflex",
                        "https://twitter.com/relevantreflex"
                    ],
                    "service": {
                        "@type": "Service",
                        "name": "Panel Management System",
                        "description": "Comprehensive business intelligence and panel management platform"
                    }
                }
                </script>
                
                <!-- Additional SEO structured data for WebSite -->
                <script type="application/ld+json">
                {
                    "@context": "https://schema.org",
                    "@type": "WebSite",
                    "name": "Relevant Reflex",
                    "url": "<?php echo SITE_URL; ?>",
                    "description": "Professional Panel Management System",
                    "potentialAction": {
                        "@type": "SearchAction",
                        "target": "<?php echo SITE_URL; ?>/search?q={search_term_string}",
                        "query-input": "required name=search_term_string"
                    }
                }
                </script>
            </div>
        </div>
    </footer>

    <!-- Load JavaScript files -->
    <script src="assets/js/main.js" async></script>
    <?php if (isset($page_js)): ?>
        <script src="assets/js/<?php echo htmlspecialchars($page_js); ?>" async></script>
    <?php endif; ?>
    
    <!-- Performance monitoring -->
    <script>
        // Simple performance monitoring
        window.addEventListener('load', function() {
            if ('performance' in window) {
                const loadTime = Math.round(performance.now());
                if (loadTime > 3000) {
                    console.warn('Page load time:', loadTime + 'ms - Consider optimization');
                }
            }
        });
    </script>
</body>
</html>
-------------------- END OF FILE --------------------

### FILE 32: includes/header.php
- Type: PHP
- Size: 3.06 KB
- Path: includes
- Name: header.php
------------------------------------------------------------
<?php
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

// Check if user is logged in (except for index page which has login form)
$current_page = basename($_SERVER['PHP_SELF']);

// Pages that don't require login
$public_pages = ['index.php']; // index.php now handles login

if (!in_array($current_page, $public_pages) && !isLoggedIn()) {
    header('Location: index.php');
    exit;
}

// Check page access permissions
if (isLoggedIn() && $current_page !== 'index.php') {
    $page_name = basename($_SERVER['PHP_SELF'], '.php');
    if (!canAccessPage($page_name)) {
        header('Location: index.php');
        exit;
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="<?php echo isset($page_description) ? htmlspecialchars($page_description) : 'Professional Panel Management System by Relevant Reflex'; ?>">
    <meta name="keywords" content="panel management, survey platform, data collection, market research, business intelligence">
    <meta name="author" content="Relevant Reflex">
    <meta name="robots" content="index, follow">
    
    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="<?php echo isset($page_title) ? htmlspecialchars($page_title) . ' - ' . SITE_NAME : SITE_NAME; ?>">
    <meta property="og:description" content="<?php echo isset($page_description) ? htmlspecialchars($page_description) : SITE_DESCRIPTION; ?>">
    <meta property="og:type" content="website">
    <meta property="og:url" content="<?php echo SITE_URL . $_SERVER['REQUEST_URI']; ?>">
    
    <!-- Critical CSS -->
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="assets/css/responsive.css">
    <?php if (isset($page_css)): ?>
        <link rel="stylesheet" href="assets/css/<?php echo htmlspecialchars($page_css); ?>">
    <?php endif; ?>
    
    <title><?php echo isset($page_title) ? htmlspecialchars($page_title) . ' - ' . SITE_NAME : SITE_NAME . ' - Professional Panel Management System'; ?></title>
</head>
<body>
    <a href="#main-content" class="skip-link">Skip to main content</a>
    
    <?php if (isLoggedIn()): ?>
    <header class="main-header">
        <nav class="navbar" role="navigation" aria-label="Main navigation">
            <div class="nav-container">
                <div class="nav-brand">
                    <div class="logo">RR</div>
                    <span class="brand-name">Relevant Reflex</span>
                </div>
                
                <div style="display: flex; align-items: center; gap: var(--spacing-lg);">
                    <button class="mobile-toggle" aria-label="Toggle navigation" aria-expanded="false">
                        <span></span>
                        <span></span>
                        <span></span>
                    </button>
                </div>
                
                <?php include __DIR__ . '/navigation.php'; ?>
            </div>
        </nav>
    </header>
    <?php endif; ?>

    <main id="main-content" role="main">
-------------------- END OF FILE --------------------

### FILE 33: includes/navigation.php
- Type: PHP
- Size: 1.7 KB
- Path: includes
- Name: navigation.php
------------------------------------------------------------
<?php
$current_page = basename($_SERVER['PHP_SELF'], '.php');
$nav_items = [
    'index' => ['label' => 'Dashboard', 'icon' => '📊', 'roles' => ['admin', 'manager']],
    'panel' => ['label' => 'Panel', 'icon' => '👥', 'roles' => ['admin', 'manager']],
    'users' => ['label' => 'Users', 'icon' => '🔐', 'roles' => ['admin']],
    'supply' => ['label' => 'Supply', 'icon' => '📦', 'roles' => ['admin', 'manager']],
    'demand' => ['label' => 'Demand', 'icon' => '📈', 'roles' => ['admin', 'manager']],
    'finance' => ['label' => 'Finance', 'icon' => '💰', 'roles' => ['admin', 'manager']],
    'support' => ['label' => 'Support', 'icon' => '🛠️', 'roles' => ['admin', 'manager']],
    'settings' => ['label' => 'Settings', 'icon' => '⚙️', 'roles' => ['admin', 'manager']]
];

$userRole = $_SESSION['admin_role'] ?? 'guest';
?>

<div class="nav-menu" role="menu">
    <?php foreach ($nav_items as $page => $item): ?>
        <?php if (in_array($userRole, $item['roles'])): ?>
            <a href="<?php echo $page === 'index' ? 'index.php' : $page . '.php'; ?>" 
               class="nav-link <?php echo $current_page === $page ? 'active' : ''; ?>"
               role="menuitem"
               aria-label="<?php echo htmlspecialchars($item['label']); ?>">
                <span class="nav-icon" aria-hidden="true"><?php echo $item['icon']; ?></span>
                <span class="nav-label"><?php echo htmlspecialchars($item['label']); ?></span>
            </a>
        <?php endif; ?>
    <?php endforeach; ?>
    
    <a href="logout.php" class="nav-link" role="menuitem" aria-label="Logout">
        <span class="nav-icon" aria-hidden="true">🚪</span>
        <span class="nav-label">Logout</span>
    </a>
</div>
-------------------- END OF FILE --------------------


================================================================================
## SUMMARY
================================================================================

Repository contains 33 files total.
All file contents have been extracted and are shown above.
This repository snapshot was generated on: 2026-02-04 22:11:32

================================================================================
## END OF REPOSITORY
================================================================================