Project: RR Shop 07Feb26
ZIP File: RelevantReflexShop.zip
Extracted on: 2026-02-07 08:18:54
Total Files: 42
================================================================================

FILE: affiliate_create.php
TYPE: PHP
SIZE: 16.42 KB
------------------------------------------------------------
<?php
require_once 'config.php';
requireLogin();

$page_title = 'Add New Affiliate';
$page_description = 'Create a new affiliate partner';

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

$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', 'Delhi', 'Chandigarh', 'Puducherry'
];

// Handle form submission
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_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'] ?? 50.00);
    
    // 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 = 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, status, created_at)
                VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, 'active', NOW())
            ");
            
            $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;
                $max_size = 5 * 1024 * 1024; // 5MB
                
                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];
                        $file_size = $_FILES['attachments']['size'][$i];
                        
                        if (in_array($file_type, $allowed_types) && $file_size <= $max_size) {
                            $file_name = $_FILES['attachments']['name'][$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, uploaded_at)
                                    VALUES (?, ?, ?, ?, ?, NOW())
                                ");
                                $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);
            
            header('Location: supply.php?success=created&code=' . $affiliate_code);
            exit;
        } catch (Exception $e) {
            $error = 'An error occurred. Please try again.';
            error_log("Create affiliate error: " . $e->getMessage());
        }
    }
}

include 'includes/header.php';
?>

<style>
.create-container {
    padding: 24px;
    max-width: 900px;
    margin: 0 auto;
}

.create-form {
    background: white;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
    font-family: inherit;
}

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

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

.file-upload-area:hover {
    border-color: #0066cc;
    background: #eff6ff;
}

.file-upload-area.dragover {
    border-color: #0066cc;
    background: #dbeafe;
}

.file-list {
    margin-top: 16px;
}

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

.file-item span {
    font-size: 14px;
    color: #374151;
    font-weight: 500;
}

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

.file-remove:hover {
    background: #dc2626;
    color: white;
}

.form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 2px solid #e5e7eb;
}

.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10000;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from { transform: translateX(400px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.notification-error {
    background: #fee2e2;
    color: #991b1b;
    border-left: 4px solid #dc2626;
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}
</style>

<div class="create-container">
    <?php if ($error): ?>
    <div class="notification notification-error">
        ⚠️ <?php echo htmlspecialchars($error); ?>
    </div>
    <?php endif; ?>

    <div class="page-header">
        <div>
            <h1>✨ Add New Affiliate Partner</h1>
            <p class="page-subtitle">Create a new affiliate account with document uploads</p>
        </div>
        <div class="header-actions">
            <a href="supply.php" class="btn btn-secondary">
                ← Back to List
            </a>
        </div>
    </div>

    <div class="create-form">
        <form method="POST" enctype="multipart/form-data" id="affiliateForm">
            <input type="hidden" name="action" value="create_affiliate">
            
            <div class="form-row">
                <div class="form-group">
                    <label for="type">Type of Affiliate <span style="color: #dc2626;">*</span></label>
                    <select id="type" name="type" required>
                        <option value="">Select Type</option>
                        <option value="individual">Individual</option>
                        <option value="company">Company</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="company_name">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">
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="incharge_name">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">
                </div>
                
                <div class="form-group">
                    <label for="mobile">Mobile Number <span style="color: #dc2626;">*</span></label>
                    <input type="tel" id="mobile" name="mobile" pattern="[0-9]{10}" maxlength="10" required placeholder="10-digit mobile number">
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="email">Email Address <span style="color: #dc2626;">*</span></label>
                    <input type="email" id="email" name="email" required placeholder="email@example.com">
                </div>
                
                <div class="form-group">
                    <label for="url">Website URL</label>
                    <input type="url" id="url" name="url" placeholder="https://example.com">
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="place_name">City/Place <span style="color: #dc2626;">*</span></label>
                    <input type="text" id="place_name" name="place_name" required placeholder="City name">
                </div>
                
                <div class="form-group">
                    <label for="state">State <span style="color: #dc2626;">*</span></label>
                    <select id="state" name="state" required>
                        <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">
                <div class="form-group">
                    <label for="postal_code">Postal Code <span style="color: #dc2626;">*</span></label>
                    <input type="text" id="postal_code" name="postal_code" pattern="[0-9]{6}" maxlength="6" required placeholder="6-digit PIN code">
                </div>
                
                <div class="form-group">
                    <label for="signup_reward">Signup Reward (₹)</label>
                    <input type="number" id="signup_reward" name="signup_reward" step="0.01" value="50.00" placeholder="50.00">
                </div>
            </div>
            
            <div style="margin: 24px 0;">
                <label style="font-weight: 600; color: #374151; margin-bottom: 12px; display: block;">
                    📎 Upload Documents (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; font-size: 16px;">
                        📁 Click to upload or drag and drop files here
                    </p>
                    <small style="color: #6b7280;">PDF, JPG, PNG, GIF (Max 10 files, 5MB each)</small>
                    <small style="display: block; margin-top: 8px; color: #9ca3af; font-size: 12px;">
                        Upload GST Certificate, PAN Card, Cancelled Cheque, Business Registration, etc.
                    </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">
                <a href="supply.php" class="btn btn-secondary">Cancel</a>
                <button type="submit" class="btn btn-primary">
                    ✨ Create Affiliate
                </button>
            </div>
        </form>
    </div>
</div>

<script>
// Auto-hide notification
setTimeout(() => {
    const notification = document.querySelector('.notification');
    if (notification) {
        notification.style.animation = 'slideIn 0.3s ease reverse';
        setTimeout(() => notification.remove(), 300);
    }
}, 5000);

// 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 maxSize = 5 * 1024 * 1024; // 5MB
    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}\nAllowed: PDF, JPG, PNG, GIF`);
            continue;
        }
        
        if (file.size > maxSize) {
            alert(`File too large: ${file.name}\nMax size: 5MB`);
            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: affiliate_edit.php
TYPE: PHP
SIZE: 9.8 KB
------------------------------------------------------------
<?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: affiliate_view.php
TYPE: PHP
SIZE: 13.22 KB
------------------------------------------------------------
<?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: client_create.php
TYPE: PHP
SIZE: 16.92 KB
------------------------------------------------------------
<?php
require_once 'config.php';
requireLogin();

$page_title = 'Add New Client';
$page_description = 'Register a new client account with documents';

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

$industries = [
    'Technology', 'Healthcare', 'Finance', 'Retail', 'Manufacturing',
    'Education', 'Real Estate', 'Hospitality', 'Consulting',
    'Marketing', 'Construction', 'Transportation', 'Other'
];

$countries = [
    'India', 'United States', 'United Kingdom', 'Canada', 'Australia',
    'Germany', 'France', 'Japan', 'China', 'Singapore',
    'United Arab Emirates', 'Saudi Arabia', 'Malaysia', 'Thailand', 'Indonesia',
    'Philippines', 'Vietnam', 'South Korea', 'Hong Kong', 'Taiwan',
    'Bangladesh', 'Pakistan', 'Sri Lanka', 'Nepal', 'Bhutan',
    'Afghanistan', 'Maldives', 'Myanmar', 'Cambodia', 'Laos',
    'Other'
];

$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', 'Delhi', 'Chandigarh', 'Puducherry'
];

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'create_client') {
    $company_name = trim($_POST['company_name'] ?? '');
    $industry = $_POST['industry'] ?? '';
    $contact_person = trim($_POST['contact_person'] ?? '');
    $email = trim($_POST['email'] ?? '');
    $phone = trim($_POST['phone'] ?? '');
    $address = trim($_POST['address'] ?? '');
    $city = trim($_POST['city'] ?? '');
    $country = $_POST['country'] ?? '';
    $postal_code = trim($_POST['postal_code'] ?? '');
    $website = trim($_POST['website'] ?? '');
    $notes = trim($_POST['notes'] ?? '');
    
    if (empty($company_name) || empty($contact_person) || empty($email) || empty($phone)) {
        $error = 'All required fields must be filled';
    } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $error = 'Invalid email address';
    } else {
        try {
            $pdo = getDBConnection();
            
            // Generate unique client code
            do {
                $client_code = strtoupper(substr(md5(uniqid(rand(), true)), 0, 8));
                $stmt = $pdo->prepare("SELECT COUNT(*) FROM clients WHERE client_code = ?");
                $stmt->execute([$client_code]);
            } while ($stmt->fetchColumn() > 0);
            
            $stmt = $pdo->prepare("
                INSERT INTO clients 
                (client_code, company_name, industry, contact_person, email, phone, 
                 address, city, country, postal_code, website, notes, created_by, created_at)
                VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, NOW())
            ");
            
            $stmt->execute([
                $client_code, $company_name, $industry, $contact_person, $email, $phone,
                $address, $city, $country, $postal_code, $website, $notes, $_SESSION['admin_id']
            ]);
            
            $client_id = $pdo->lastInsertId();
            
            // Handle file uploads
            if (!empty($_FILES['attachments']['name'][0])) {
                $upload_dir = 'uploads/clients/';
                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;
                $max_size = 5 * 1024 * 1024; // 5MB
                
                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];
                        $file_size = $_FILES['attachments']['size'][$i];
                        
                        if (in_array($file_type, $allowed_types) && $file_size <= $max_size) {
                            $file_name = $_FILES['attachments']['name'][$i];
                            $file_tmp = $_FILES['attachments']['tmp_name'][$i];
                            
                            $extension = pathinfo($file_name, PATHINFO_EXTENSION);
                            $unique_name = $client_code . '_' . time() . '_' . $i . '.' . $extension;
                            $file_path = $upload_dir . $unique_name;
                            
                            if (move_uploaded_file($file_tmp, $file_path)) {
                                $attachStmt = $pdo->prepare("
                                    INSERT INTO client_attachments 
                                    (client_id, file_name, file_path, file_type, file_size, uploaded_at)
                                    VALUES (?, ?, ?, ?, ?, NOW())
                                ");
                                $attachStmt->execute([
                                    $client_id, $file_name, $file_path, $file_type, $file_size
                                ]);
                            }
                        }
                    }
                }
            }
            
            logActivity($_SESSION['admin_id'], 'create_client', "Created client: $client_code", 'client', $client_id);
            
            header('Location: clients.php?success=created&code=' . $client_code);
            exit;
        } catch (Exception $e) {
            $error = 'An error occurred. Please try again.';
            error_log("Create client error: " . $e->getMessage());
        }
    }
}

include 'includes/header.php';
?>

<style>
.create-container {
    padding: 24px;
    max-width: 900px;
    margin: 0 auto;
}

.create-form {
    background: white;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
    font-family: inherit;
}

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

.form-group textarea {
    min-height: 100px;
    resize: vertical;
}

.file-upload-area {
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    background: #f9fafb;
    cursor: pointer;
    transition: all 0.2s;
}

.file-upload-area:hover {
    border-color: #0066cc;
    background: #eff6ff;
}

.file-upload-area.dragover {
    border-color: #0066cc;
    background: #dbeafe;
}

.file-list {
    margin-top: 16px;
}

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

.file-item span {
    font-size: 14px;
    color: #374151;
    font-weight: 500;
}

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

.file-remove:hover {
    background: #dc2626;
    color: white;
}

.form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 2px solid #e5e7eb;
}

.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10000;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from { transform: translateX(400px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.notification-error {
    background: #fee2e2;
    color: #991b1b;
    border-left: 4px solid #dc2626;
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}
</style>

<div class="create-container">
    <?php if ($error): ?>
    <div class="notification notification-error">
        ⚠️ <?php echo htmlspecialchars($error); ?>
    </div>
    <?php endif; ?>

    <div class="page-header">
        <div>
            <h1>✨ Add New Client</h1>
            <p class="page-subtitle">Register a new client with document uploads</p>
        </div>
        <div class="header-actions">
            <a href="clients.php" class="btn btn-secondary">
                ← Back to List
            </a>
        </div>
    </div>

    <div class="create-form">
        <form method="POST" enctype="multipart/form-data" id="clientForm">
            <input type="hidden" name="action" value="create_client">
            
            <div class="form-row">
                <div class="form-group">
                    <label for="company_name">Company Name <span style="color:#dc2626;">*</span></label>
                    <input type="text" id="company_name" name="company_name" required placeholder="ABC Corporation">
                </div>
                
                <div class="form-group">
                    <label for="industry">Industry <span style="color:#dc2626;">*</span></label>
                    <select id="industry" name="industry" required>
                        <option value="">Select Industry</option>
                        <?php foreach ($industries as $ind): ?>
                            <option value="<?php echo $ind; ?>"><?php echo $ind; ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="contact_person">Contact Person <span style="color:#dc2626;">*</span></label>
                    <input type="text" id="contact_person" name="contact_person" required placeholder="John Doe">
                </div>
                
                <div class="form-group">
                    <label for="email">Email Address <span style="color:#dc2626;">*</span></label>
                    <input type="email" id="email" name="email" required placeholder="contact@example.com">
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="phone">Phone Number (with country code) <span style="color:#dc2626;">*</span></label>
                    <input type="tel" id="phone" name="phone" required placeholder="+91 9876543210 or +1 2025551234">
                    <small style="color:#6b7280;font-size:12px;margin-top:4px;display:block;">Include country code (e.g., +91 for India, +1 for USA)</small>
                </div>
                
                <div class="form-group">
                    <label for="website">Website</label>
                    <input type="url" id="website" name="website" placeholder="https://example.com">
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group" style="grid-column: 1 / -1;">
                    <label for="address">Address</label>
                    <textarea id="address" name="address" placeholder="Full company address"></textarea>
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="city">City</label>
                    <input type="text" id="city" name="city" placeholder="Enter city name">
                </div>
                
                <div class="form-group">
                    <label for="country">Country</label>
                    <select id="country" name="country">
                        <option value="">Select Country</option>
                        <?php foreach ($countries as $ctry): ?>
                            <option value="<?php echo $ctry; ?>"><?php echo $ctry; ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="postal_code">Postal/ZIP Code</label>
                    <input type="text" id="postal_code" name="postal_code" placeholder="Postal or ZIP code">
                </div>
                
                <div class="form-group">
                    <!-- Empty for grid alignment -->
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group" style="grid-column: 1 / -1;">
                    <label for="notes">Notes</label>
                    <textarea id="notes" name="notes" placeholder="Additional client information"></textarea>
                </div>
            </div>
            
            <div style="margin: 24px 0;">
                <label style="font-weight: 600; color: #374151; margin-bottom: 12px; display: block;">
                    📎 Upload Documents (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; font-size: 16px;">
                        📁 Click to upload or drag and drop files here
                    </p>
                    <small style="color: #6b7280;">PDF, JPG, PNG, GIF (Max 10 files, 5MB each)</small>
                    <small style="display: block; margin-top: 8px; color: #9ca3af; font-size: 12px;">
                        Upload contracts, agreements, proposals, GST certificate, etc.
                    </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">
                <a href="clients.php" class="btn btn-secondary">Cancel</a>
                <button type="submit" class="btn btn-primary">✨ Create Client</button>
            </div>
        </form>
    </div>
</div>

<script>
setTimeout(() => {
    const notification = document.querySelector('.notification');
    if (notification) {
        notification.style.animation = 'slideIn 0.3s ease reverse';
        setTimeout(() => notification.remove(), 300);
    }
}, 5000);

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 maxSize = 5 * 1024 * 1024;
    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}\nAllowed: PDF, JPG, PNG, GIF`);
            continue;
        }
        
        if (file.size > maxSize) {
            alert(`File too large: ${file.name}\nMax size: 5MB`);
            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);
    });
    
    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: client_edit.php
TYPE: PHP
SIZE: 16.33 KB
------------------------------------------------------------
<?php
require_once 'config.php';
requireLogin();

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

$page_title = 'Edit Client';
$page_description = 'Edit client information';

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

// Handle form submission
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
    if ($_POST['action'] === 'update_client') {
        $company_name = trim($_POST['company_name'] ?? '');
        $industry = $_POST['industry'] ?? '';
        $contact_person = trim($_POST['contact_person'] ?? '');
        $email = trim($_POST['email'] ?? '');
        $phone = trim($_POST['phone'] ?? '');
        $address = trim($_POST['address'] ?? '');
        $city = trim($_POST['city'] ?? '');
        $country = $_POST['country'] ?? '';
        $postal_code = trim($_POST['postal_code'] ?? '');
        $website = trim($_POST['website'] ?? '');
        $notes = trim($_POST['notes'] ?? '');
        $status = $_POST['status'] ?? 'active';
        
        // Validation
        if (empty($company_name) || empty($contact_person) || empty($email) || empty($phone)) {
            $error = 'All required fields must be filled';
        } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
            $error = 'Invalid email address';
        } else {
            try {
                $pdo = getDBConnection();
                
                $stmt = $pdo->prepare("
                    UPDATE clients 
                    SET company_name = ?, industry = ?, contact_person = ?, email = ?, 
                        phone = ?, address = ?, city = ?, country = ?, postal_code = ?, 
                        website = ?, notes = ?, status = ?, updated_at = NOW()
                    WHERE id = ?
                ");
                
                $stmt->execute([
                    $company_name, $industry, $contact_person, $email, $phone,
                    $address, $city, $country, $postal_code, $website,
                    $notes, $status, $client_id
                ]);
                
                // Handle file uploads
                if (!empty($_FILES['attachments']['name'][0])) {
                    $upload_dir = 'uploads/clients/';
                    if (!file_exists($upload_dir)) {
                        mkdir($upload_dir, 0755, true);
                    }
                    
                    $allowed_types = ['application/pdf', 'image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
                    $max_size = 5 * 1024 * 1024;
                    
                    // Get client code
                    $clientStmt = $pdo->prepare("SELECT client_code FROM clients WHERE id = ?");
                    $clientStmt->execute([$client_id]);
                    $client_code = $clientStmt->fetchColumn();
                    
                    for ($i = 0; $i < count($_FILES['attachments']['name']); $i++) {
                        if ($_FILES['attachments']['error'][$i] === UPLOAD_ERR_OK) {
                            $file_type = $_FILES['attachments']['type'][$i];
                            $file_size = $_FILES['attachments']['size'][$i];
                            
                            if (in_array($file_type, $allowed_types) && $file_size <= $max_size) {
                                $file_name = $_FILES['attachments']['name'][$i];
                                $file_tmp = $_FILES['attachments']['tmp_name'][$i];
                                $extension = pathinfo($file_name, PATHINFO_EXTENSION);
                                $unique_name = $client_code . '_' . time() . '_' . $i . '.' . $extension;
                                $file_path = $upload_dir . $unique_name;
                                
                                if (move_uploaded_file($file_tmp, $file_path)) {
                                    $attachStmt = $pdo->prepare("
                                        INSERT INTO client_attachments 
                                        (client_id, file_name, file_path, file_type, file_size, uploaded_at)
                                        VALUES (?, ?, ?, ?, ?, NOW())
                                    ");
                                    $attachStmt->execute([$client_id, $file_name, $file_path, $file_type, $file_size]);
                                }
                            }
                        }
                    }
                }
                
                logActivity($_SESSION['admin_id'], 'update_client', "Updated client #$client_id", 'client', $client_id);
                
                $success = 'Client updated successfully!';
            } catch (Exception $e) {
                $error = 'An error occurred. Please try again.';
                error_log("Update client error: " . $e->getMessage());
            }
        }
    }
    
    // Handle attachment deletion - SEPARATE ACTION
    if ($_POST['action'] === 'delete_attachment') {
        $attach_id = intval($_POST['attachment_id'] ?? 0);
        if ($attach_id) {
            try {
                $pdo = getDBConnection();
                $stmt = $pdo->prepare("SELECT * FROM client_attachments WHERE id = ? AND client_id = ?");
                $stmt->execute([$attach_id, $client_id]);
                $attach = $stmt->fetch();
                
                if ($attach) {
                    if (file_exists($attach['file_path'])) {
                        unlink($attach['file_path']);
                    }
                    $stmt = $pdo->prepare("DELETE FROM client_attachments WHERE id = ?");
                    $stmt->execute([$attach_id]);
                    $success = 'Attachment deleted successfully!';
                }
            } catch (Exception $e) {
                $error = 'Error deleting attachment.';
            }
        }
    }
}

// Fetch client details
try {
    $pdo = getDBConnection();
    $stmt = $pdo->prepare("SELECT * FROM clients WHERE id = ?");
    $stmt->execute([$client_id]);
    $client = $stmt->fetch();
    
    if (!$client) {
        header('Location: clients.php');
        exit;
    }
    
    // Fetch attachments
    $attachStmt = $pdo->prepare("SELECT * FROM client_attachments WHERE client_id = ?");
    $attachStmt->execute([$client_id]);
    $attachments = $attachStmt->fetchAll();
    
} catch (Exception $e) {
    error_log("Fetch client error: " . $e->getMessage());
    header('Location: clients.php');
    exit;
}

$industries = [
    'Technology', 'Healthcare', 'Finance', 'Retail', 'Manufacturing',
    'Education', 'Real Estate', 'Hospitality', 'Consulting',
    'Marketing', 'Construction', 'Transportation', 'Other'
];

$countries = [
    'India', 'United States', 'United Kingdom', 'Canada', 'Australia',
    'Germany', 'France', 'Japan', 'China', 'Singapore',
    'United Arab Emirates', 'Saudi Arabia', 'Malaysia', 'Thailand', 'Indonesia',
    'Philippines', 'Vietnam', 'South Korea', 'Hong Kong', 'Taiwan',
    'Bangladesh', 'Pakistan', 'Sri Lanka', 'Nepal', 'Bhutan',
    'Afghanistan', 'Maldives', 'Myanmar', 'Cambodia', 'Laos',
    'Other'
];

include 'includes/header.php';
?>

<div class="page-container">
    <div class="page-header">
        <div>
            <h1>Edit Client</h1>
            <p class="page-subtitle">Update client information for <?php echo htmlspecialchars($client['client_code']); ?></p>
        </div>
        <div class="header-actions">
            <a href="client_view.php?id=<?php echo $client_id; ?>" class="btn btn-secondary">
                <span>👁️</span> View Details
            </a>
            <a href="clients.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; ?>

    <!-- EXISTING ATTACHMENTS - OUTSIDE MAIN FORM TO AVOID NESTING -->
    <?php if (!empty($attachments)): ?>
    <div style="background: white; padding: 24px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 24px;">
        <h3 style="margin: 0 0 16px 0; font-size: 18px; font-weight: 600;">📎 Existing Documents (<?php echo count($attachments); ?>)</h3>
        <?php foreach ($attachments as $attachment): ?>
        <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px; background: #f9fafb; border-radius: 6px; margin-bottom: 8px; border: 1px solid #e5e7eb;">
            <div>
                <strong><?php echo htmlspecialchars($attachment['file_name']); ?></strong>
                <small style="display:block;color:#6b7280;font-size:12px;">
                    <?php echo number_format($attachment['file_size'] / 1024, 2); ?> KB
                </small>
            </div>
            <!-- SEPARATE FORM - NOT NESTED -->
            <form method="POST" style="display:inline; margin:0;" onsubmit="return confirm('Delete this attachment?');">
                <input type="hidden" name="action" value="delete_attachment">
                <input type="hidden" name="attachment_id" value="<?php echo $attachment['id']; ?>">
                <button type="submit" class="btn btn-secondary" style="padding: 6px 12px; font-size: 12px; background: #fee2e2; color: #991b1b;">
                    🗑️ Delete
                </button>
            </form>
        </div>
        <?php endforeach; ?>
    </div>
    <?php endif; ?>

    <!-- MAIN UPDATE FORM - NO NESTED FORMS INSIDE -->
    <div style="background: white; padding: 32px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
        <form method="POST" enctype="multipart/form-data">
            <input type="hidden" name="action" value="update_client">
            
            <div class="form-row">
                <div class="form-group">
                    <label for="company_name">Company Name <span style="color:#dc2626;">*</span></label>
                    <input type="text" id="company_name" name="company_name" required 
                           value="<?php echo htmlspecialchars($client['company_name']); ?>">
                </div>
                
                <div class="form-group">
                    <label for="industry">Industry <span style="color:#dc2626;">*</span></label>
                    <select id="industry" name="industry" required>
                        <option value="">Select Industry</option>
                        <?php foreach ($industries as $ind): ?>
                            <option value="<?php echo $ind; ?>" <?php echo $client['industry'] === $ind ? 'selected' : ''; ?>>
                                <?php echo $ind; ?>
                            </option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="contact_person">Contact Person <span style="color:#dc2626;">*</span></label>
                    <input type="text" id="contact_person" name="contact_person" required 
                           value="<?php echo htmlspecialchars($client['contact_person']); ?>">
                </div>
                
                <div class="form-group">
                    <label for="email">Email Address <span style="color:#dc2626;">*</span></label>
                    <input type="email" id="email" name="email" required 
                           value="<?php echo htmlspecialchars($client['email']); ?>">
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="phone">Phone Number (with country code) <span style="color:#dc2626;">*</span></label>
                    <input type="tel" id="phone" name="phone" required 
                           value="<?php echo htmlspecialchars($client['phone']); ?>"
                           placeholder="+91 9876543210 or +1 2025551234">
                    <small style="color:#6b7280;font-size:12px;margin-top:4px;display:block;">Include country code (e.g., +91 for India, +1 for USA)</small>
                </div>
                
                <div class="form-group">
                    <label for="website">Website</label>
                    <input type="url" id="website" name="website" 
                           value="<?php echo htmlspecialchars($client['website'] ?? ''); ?>"
                           placeholder="https://example.com">
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group" style="grid-column: 1 / -1;">
                    <label for="address">Address</label>
                    <textarea id="address" name="address" placeholder="Full company address"><?php echo htmlspecialchars($client['address'] ?? ''); ?></textarea>
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="city">City</label>
                    <input type="text" id="city" name="city" 
                           value="<?php echo htmlspecialchars($client['city'] ?? ''); ?>"
                           placeholder="Enter city name">
                </div>
                
                <div class="form-group">
                    <label for="country">Country</label>
                    <select id="country" name="country">
                        <option value="">Select Country</option>
                        <?php foreach ($countries as $ctry): ?>
                            <option value="<?php echo $ctry; ?>" <?php echo $client['country'] === $ctry ? 'selected' : ''; ?>>
                                <?php echo $ctry; ?>
                            </option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="postal_code">Postal/ZIP Code</label>
                    <input type="text" id="postal_code" name="postal_code" 
                           value="<?php echo htmlspecialchars($client['postal_code'] ?? ''); ?>"
                           placeholder="Postal or ZIP code">
                </div>
                
                <div class="form-group">
                    <label for="status">Status</label>
                    <select id="status" name="status">
                        <option value="active" <?php echo $client['status'] === 'active' ? 'selected' : ''; ?>>Active</option>
                        <option value="inactive" <?php echo $client['status'] === 'inactive' ? 'selected' : ''; ?>>Inactive</option>
                        <option value="suspended" <?php echo $client['status'] === 'suspended' ? 'selected' : ''; ?>>Suspended</option>
                    </select>
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group" style="grid-column: 1 / -1;">
                    <label for="notes">Notes</label>
                    <textarea id="notes" name="notes" placeholder="Additional client information"><?php echo htmlspecialchars($client['notes'] ?? ''); ?></textarea>
                </div>
            </div>
            
            <!-- NEW FILE UPLOADS - INSIDE MAIN FORM -->
            <div style="margin: 24px 0;">
                <label style="font-weight: 600; color: #374151; margin-bottom: 12px; display: block;">
                    📎 Upload Additional Documents (Optional)
                </label>
                <input type="file" name="attachments[]" multiple accept=".pdf,.jpg,.jpeg,.png,.gif" 
                       style="padding: 12px; border: 2px solid #e5e7eb; border-radius: 8px; width: 100%;">
                <small style="color: #6b7280; display: block; margin-top: 8px;">
                    PDF, JPG, PNG, GIF (Max 5MB per file)
                </small>
            </div>
            
            <div class="form-actions" style="margin-top: 24px;">
                <button type="submit" class="btn btn-primary">
                    <span>💾</span> Update Client
                </button>
            </div>
        </form>
    </div>
</div>

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

FILE: client_view.php
TYPE: PHP
SIZE: 11.72 KB
------------------------------------------------------------
<?php
require_once 'config.php';
requireLogin();

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

$page_title = 'Client Details';
$page_description = 'View client information and projects';

$success = '';
if (isset($_GET['updated']) && $_GET['updated'] == '1') {
    $success = 'Client updated successfully!';
}

try {
    $pdo = getDBConnection();
    
    // Fetch client details
    $stmt = $pdo->prepare("SELECT * FROM clients WHERE id = ?");
    $stmt->execute([$client_id]);
    $client = $stmt->fetch();
    
    if (!$client) {
        header('Location: clients.php');
        exit;
    }
    
    // Fetch attachments
    $attachStmt = $pdo->prepare("SELECT * FROM client_attachments WHERE client_id = ?");
    $attachStmt->execute([$client_id]);
    $attachments = $attachStmt->fetchAll();
    
} catch (Exception $e) {
    error_log("View client error: " . $e->getMessage());
    header('Location: clients.php');
    exit;
}

include 'includes/header.php';
?>

<style>
.view-container {
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

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

.detail-card h2 {
    color: #111827;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e5e7eb;
    font-size: 20px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-top: 20px;
}

.info-item {
    display: flex;
    flex-direction: column;
}

.info-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.info-value {
    font-size: 16px;
    color: #111827;
    font-weight: 500;
}

.client-code-badge {
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
}

.status-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
}

.status-active {
    background: #d1fae5;
    color: #065f46;
}

.status-inactive {
    background: #fee2e2;
    color: #991b1b;
}

.status-suspended {
    background: #fef3c7;
    color: #92400e;
}

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

.attachment-item:hover {
    background: #f3f4f6;
    border-color: #0066cc;
}

.attachment-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.attachment-icon {
    font-size: 32px;
}

.attachment-details strong {
    display: block;
    color: #111827;
    margin-bottom: 4px;
}

.attachment-details small {
    color: #6b7280;
    font-size: 12px;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #9ca3af;
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10000;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from { transform: translateX(400px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.notification-success {
    background: #d1fae5;
    color: #065f46;
    border-left: 4px solid #059669;
}

@media (max-width: 768px) {
    .info-grid {
        grid-template-columns: 1fr;
    }
}
</style>

<div class="view-container">
    <?php if ($success): ?>
    <div class="notification notification-success">
        ✅ <?php echo htmlspecialchars($success); ?>
    </div>
    <?php endif; ?>

    <div class="page-header">
        <div>
            <h1>Client Details</h1>
            <p class="page-subtitle">View and manage client information</p>
        </div>
        <div class="header-actions">
            <a href="client_edit.php?id=<?php echo $client_id; ?>" class="btn btn-primary">
                ✏️ Edit Client
            </a>
            <a href="clients.php" class="btn btn-secondary">
                ← Back to List
            </a>
        </div>
    </div>

    <!-- Basic Information -->
    <div class="detail-card">
        <h2>Basic Information</h2>
        <div style="margin-bottom: 20px;">
            <span class="client-code-badge"><?php echo htmlspecialchars($client['client_code']); ?></span>
            <span class="status-badge status-<?php echo strtolower($client['status']); ?>" style="margin-left: 12px;">
                <?php echo ucfirst($client['status']); ?>
            </span>
        </div>
        
        <div class="info-grid">
            <div class="info-item">
                <span class="info-label">Company Name</span>
                <span class="info-value"><?php echo htmlspecialchars($client['company_name']); ?></span>
            </div>
            
            <div class="info-item">
                <span class="info-label">Industry</span>
                <span class="info-value"><?php echo htmlspecialchars($client['industry'] ?? 'N/A'); ?></span>
            </div>
            
            <div class="info-item">
                <span class="info-label">Contact Person</span>
                <span class="info-value"><?php echo htmlspecialchars($client['contact_person']); ?></span>
            </div>
        </div>
    </div>

    <!-- Contact Information -->
    <div class="detail-card">
        <h2>Contact Information</h2>
        <div class="info-grid">
            <div class="info-item">
                <span class="info-label">Email Address</span>
                <span class="info-value">
                    <a href="mailto:<?php echo htmlspecialchars($client['email']); ?>" style="color: #0066cc; text-decoration: none;">
                        <?php echo htmlspecialchars($client['email']); ?>
                    </a>
                </span>
            </div>
            
            <div class="info-item">
                <span class="info-label">Phone Number</span>
                <span class="info-value">
                    <a href="tel:<?php echo htmlspecialchars($client['phone']); ?>" style="color: #0066cc; text-decoration: none;">
                        <?php echo htmlspecialchars($client['phone']); ?>
                    </a>
                </span>
            </div>
            
            <?php if (!empty($client['website'])): ?>
            <div class="info-item">
                <span class="info-label">Website</span>
                <span class="info-value">
                    <a href="<?php echo htmlspecialchars($client['website']); ?>" target="_blank" style="color: #0066cc; text-decoration: none;">
                        <?php echo htmlspecialchars($client['website']); ?> ↗
                    </a>
                </span>
            </div>
            <?php endif; ?>
        </div>
    </div>

    <!-- Location Information -->
    <div class="detail-card">
        <h2>Location Information</h2>
        <div class="info-grid">
            <?php if (!empty($client['address'])): ?>
            <div class="info-item" style="grid-column: 1 / -1;">
                <span class="info-label">Address</span>
                <span class="info-value"><?php echo nl2br(htmlspecialchars($client['address'])); ?></span>
            </div>
            <?php endif; ?>
            
            <div class="info-item">
                <span class="info-label">City</span>
                <span class="info-value"><?php echo htmlspecialchars($client['city'] ?? 'N/A'); ?></span>
            </div>
            
            <div class="info-item">
                <span class="info-label">Country</span>
                <span class="info-value"><?php echo htmlspecialchars($client['country'] ?? 'N/A'); ?></span>
            </div>
            
            <div class="info-item">
                <span class="info-label">Postal Code</span>
                <span class="info-value"><?php echo htmlspecialchars($client['postal_code'] ?? 'N/A'); ?></span>
            </div>
        </div>
    </div>

    <!-- Business Information -->
    <div class="detail-card">
        <h2>Business Information</h2>
        <div class="info-grid">
            <div class="info-item">
                <span class="info-label">Total Projects</span>
                <span class="info-value" style="color: #0066cc; font-size: 24px; font-weight: 700;">
                    <?php echo number_format($client['total_projects']); ?>
                </span>
            </div>
            
            <div class="info-item">
                <span class="info-label">Total Revenue</span>
                <span class="info-value" style="color: #059669; font-size: 24px; font-weight: 700;">
                    ₹<?php echo number_format($client['total_revenue'], 2); ?>
                </span>
            </div>
            
            <div class="info-item">
                <span class="info-label">Account Created</span>
                <span class="info-value"><?php echo date('M j, Y', strtotime($client['created_at'])); ?></span>
            </div>
            
            <div class="info-item">
                <span class="info-label">Last Updated</span>
                <span class="info-value"><?php echo date('M j, Y', strtotime($client['updated_at'])); ?></span>
            </div>
        </div>
    </div>

    <!-- Notes -->
    <?php if (!empty($client['notes'])): ?>
    <div class="detail-card">
        <h2>Notes</h2>
        <div class="info-value" style="line-height: 1.6;">
            <?php echo nl2br(htmlspecialchars($client['notes'])); ?>
        </div>
    </div>
    <?php endif; ?>

    <!-- Attachments -->
    <div class="detail-card">
        <h2>Attachments <?php if (!empty($attachments)): ?>(<?php echo count($attachments); ?>)<?php endif; ?></h2>
        
        <?php if (empty($attachments)): ?>
            <div class="empty-state">
                <div class="empty-state-icon">📎</div>
                <p>No documents uploaded yet</p>
            </div>
        <?php else: ?>
            <?php foreach ($attachments as $attachment): ?>
            <div class="attachment-item">
                <div class="attachment-info">
                    <div class="attachment-icon">
                        <?php 
                        $ext = strtolower(pathinfo($attachment['file_name'], PATHINFO_EXTENSION));
                        echo $ext === 'pdf' ? '📄' : '🖼️';
                        ?>
                    </div>
                    <div class="attachment-details">
                        <strong><?php echo htmlspecialchars($attachment['file_name']); ?></strong>
                        <small>
                            <?php echo number_format($attachment['file_size'] / 1024, 2); ?> KB • 
                            Uploaded on <?php echo date('M j, Y', strtotime($attachment['uploaded_at'])); ?>
                        </small>
                    </div>
                </div>
                <a href="<?php echo htmlspecialchars($attachment['file_path']); ?>" 
                   class="btn btn-secondary" target="_blank" download>
                    📥 Download
                </a>
            </div>
            <?php endforeach; ?>
        <?php endif; ?>
    </div>
</div>

<script>
setTimeout(() => {
    const notification = document.querySelector('.notification');
    if (notification) {
        notification.style.animation = 'slideIn 0.3s ease reverse';
        setTimeout(() => notification.remove(), 300);
    }
}, 5000);
</script>

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

FILE: clients.php
TYPE: PHP
SIZE: 13.28 KB
------------------------------------------------------------
<?php
require_once 'config.php';
requireLogin();
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");

$page_title = 'Client Management';
$success = '';
$error = '';

// Handle delete
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'delete_client' && isAdmin()) {
    $delete_id = intval($_POST['client_id'] ?? 0);
    if ($delete_id) {
        try {
            $pdo = getDBConnection();
            $stmt = $pdo->prepare("SELECT client_code FROM clients WHERE id = ?");
            $stmt->execute([$delete_id]);
            $client_code = $stmt->fetchColumn();
            
            $stmt = $pdo->prepare("DELETE FROM clients WHERE id = ?");
            $stmt->execute([$delete_id]);
            
            logActivity($_SESSION['admin_id'], 'delete_client', "Deleted client: $client_code", 'client', $delete_id);
            $success = 'Client deleted successfully!';
        } catch (Exception $e) {
            $error = 'Error deleting client.';
        }
    }
}

// Fetch clients
try {
    $pdo = getDBConnection();
    $stmt = $pdo->query("SELECT * FROM clients ORDER BY created_at DESC");
    $clients = $stmt->fetchAll();
} catch (Exception $e) {
    $clients = [];
}

$total_clients = count($clients);
$active_clients = count(array_filter($clients, fn($c) => $c['status'] === 'active'));
$total_projects = array_sum(array_column($clients, 'total_projects'));
$total_revenue = array_sum(array_column($clients, 'total_revenue'));

include 'includes/header.php';
?>

<style>
.affiliates-container {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Statistics Cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 24px;
    color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.3s;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.stat-card:nth-child(2) {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.stat-card:nth-child(3) {
    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
}

.stat-card:nth-child(4) {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.stat-number {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.stat-label {
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    opacity: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Modern Table */
.modern-table-container {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow-x: auto;
}

.modern-table {
    width: 100%;
    border-collapse: collapse;
}

.modern-table thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.modern-table thead th {
    padding: 16px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
}

.modern-table thead th:first-child {
    border-top-left-radius: 8px;
}

.modern-table thead th:last-child {
    border-top-right-radius: 8px;
}

.modern-table tbody tr {
    border-bottom: 1px solid #e5e7eb;
    transition: all 0.2s;
}

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

.modern-table tbody td {
    padding: 16px 12px;
    font-size: 14px;
    color: #374151;
}

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

.status-active {
    background: #d1fae5;
    color: #065f46;
}

.status-inactive {
    background: #fee2e2;
    color: #991b1b;
}

.status-suspended {
    background: #fef3c7;
    color: #92400e;
}

/* Action Buttons */
.action-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.btn-action {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-action:hover {
    transform: scale(1.1);
}

.btn-view {
    background: #dbeafe;
    color: #1e40af;
}

.btn-view:hover {
    background: #bfdbfe;
}

.btn-edit {
    background: #fef3c7;
    color: #92400e;
}

.btn-edit:hover {
    background: #fde68a;
}

.btn-delete {
    background: #fee2e2;
    color: #991b1b;
}

.btn-delete:hover {
    background: #fecaca;
}

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

.modal.active {
    display: flex;
}

.modal-content {
    background: white;
    border-radius: 12px;
    padding: 24px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.modal-header h2 {
    font-size: 20px;
    color: #111827;
}

.modal-close {
    font-size: 28px;
    color: #6b7280;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    color: #111827;
}

/* Notification */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10000;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from { transform: translateX(400px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.notification-success {
    background: #d1fae5;
    color: #065f46;
    border-left: 4px solid #059669;
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .modern-table-container {
        padding: 16px;
    }
    
    .modern-table {
        font-size: 12px;
    }
    
    .modern-table thead th,
    .modern-table tbody td {
        padding: 12px 8px;
    }
}
</style>

<div class="affiliates-container">
    <?php if ($success): ?>
    <div class="notification notification-success">
        ✅ <?php echo htmlspecialchars($success); ?>
    </div>
    <?php endif; ?>

    <div class="page-header">
        <div>
            <h1>Client Management</h1>
            <p class="page-subtitle">Manage client accounts and projects</p>
        </div>
        <div class="header-actions">
            <a href="client_create.php" class="btn btn-primary">
                ➕ Add New Client
            </a>
        </div>
    </div>

    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-number"><?php echo number_format($total_clients); ?></div>
            <div class="stat-label">Total Clients</div>
        </div>
        <div class="stat-card">
            <div class="stat-number"><?php echo number_format($active_clients); ?></div>
            <div class="stat-label">Active Clients</div>
        </div>
        <div class="stat-card">
            <div class="stat-number"><?php echo number_format($total_projects); ?></div>
            <div class="stat-label">Total Projects</div>
        </div>
        <div class="stat-card">
            <div class="stat-number">₹<?php echo number_format($total_revenue, 2); ?></div>
            <div class="stat-label">Total Revenue</div>
        </div>
    </div>

    <div class="modern-table-container">
        <table class="modern-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Client Code</th>
                    <th>Company Name</th>
                    <th>Industry</th>
                    <th>Contact Person</th>
                    <th>Location</th>
                    <th>Email & Phone</th>
                    <th>Projects</th>
                    <th>Revenue</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <?php if (empty($clients)): ?>
                    <tr><td colspan="11" style="text-align:center;padding:40px;color:#9ca3af;">No clients found. Click "Add New Client" to create one.</td></tr>
                <?php else: ?>
                    <?php foreach ($clients as $client): ?>
                    <tr>
                        <td><strong>#<?php echo $client['id']; ?></strong></td>
                        <td><span style="font-family:monospace;background:#dbeafe;color:#1e40af;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:600;"><?php echo htmlspecialchars($client['client_code']); ?></span></td>
                        <td style="font-weight:600;color:#111827;"><?php echo htmlspecialchars($client['company_name']); ?></td>
                        <td><?php echo htmlspecialchars($client['industry'] ?? 'N/A'); ?></td>
                        <td><?php echo htmlspecialchars($client['contact_person']); ?></td>
                        <td>
                            <div style="font-size:12px;color:#1f2937;">
                                <?php 
                                $location_parts = array_filter([
                                    $client['city'] ?? null,
                                    $client['country'] ?? null
                                ]);
                                echo htmlspecialchars(implode(', ', $location_parts) ?: 'N/A'); 
                                ?>
                            </div>
                        </td>
                        <td>
                            <div style="font-size:12px;color:#1f2937;"><?php echo htmlspecialchars($client['email']); ?></div>
                            <div style="font-size:11px;color:#6b7280;"><?php echo htmlspecialchars($client['phone']); ?></div>
                        </td>
                        <td style="text-align:center;font-weight:700;color:#0066cc;"><?php echo number_format($client['total_projects']); ?></td>
                        <td style="font-weight:700;color:#059669;">₹<?php echo number_format($client['total_revenue'], 2); ?></td>
                        <td><span class="status-badge status-<?php echo strtolower($client['status']); ?>"><?php echo ucfirst($client['status']); ?></span></td>
                        <td>
                            <div class="action-buttons">
                                <a href="client_view.php?id=<?php echo $client['id']; ?>" class="btn-action btn-view" title="View">👁️</a>
                                <a href="client_edit.php?id=<?php echo $client['id']; ?>" class="btn-action btn-edit" title="Edit">✏️</a>
                                <?php if (isAdmin()): ?>
                                <button class="btn-action btn-delete" onclick="confirmDelete(<?php echo $client['id']; ?>, '<?php echo htmlspecialchars($client['client_code'], ENT_QUOTES); ?>')" title="Delete">🗑️</button>
                                <?php endif; ?>
                            </div>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<?php if (isAdmin()): ?>
<div id="deleteModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2><span style="color:#dc2626;">⚠️</span> Confirm Deletion</h2>
            <button class="modal-close" onclick="closeDeleteModal()">&times;</button>
        </div>
        <div style="margin-bottom:24px;">
            <p>Are you sure you want to delete client <strong id="deleteClientCode"></strong>?</p>
            <p style="color:#6b7280;font-size:14px;">This action cannot be undone.</p>
        </div>
        <div style="display:flex;gap:12px;justify-content:flex-end;">
            <button class="btn btn-secondary" onclick="closeDeleteModal()">Cancel</button>
            <form method="POST" style="display:inline;">
                <input type="hidden" name="action" value="delete_client">
                <input type="hidden" name="client_id" id="deleteClientId">
                <button type="submit" class="btn" style="background:#dc2626;color:white;">Delete Client</button>
            </form>
        </div>
    </div>
</div>
<?php endif; ?>

<script>
setTimeout(() => {
    const notification = document.querySelector('.notification');
    if (notification) {
        notification.style.animation = 'slideIn 0.3s ease reverse';
        setTimeout(() => notification.remove(), 300);
    }
}, 5000);

function confirmDelete(id, code) {
    document.getElementById('deleteClientId').value = id;
    document.getElementById('deleteClientCode').textContent = code;
    document.getElementById('deleteModal').classList.add('active');
}

function closeDeleteModal() {
    document.getElementById('deleteModal').classList.remove('active');
}

document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') closeDeleteModal();
});

document.getElementById('deleteModal')?.addEventListener('click', function(e) {
    if (e.target === this) closeDeleteModal();
});
</script>

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

FILE: config.php
TYPE: PHP
SIZE: 3.88 KB
------------------------------------------------------------
<?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: database_schema.sql
TYPE: SQL
SIZE: 21.6 KB
------------------------------------------------------------
-- 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: demand.php
TYPE: PHP
SIZE: 10.71 KB
------------------------------------------------------------
<?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: error-404.html
TYPE: HTML
SIZE: 6.89 KB
------------------------------------------------------------
<!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: error-500.html
TYPE: HTML
SIZE: 8.78 KB
------------------------------------------------------------
<!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: finance.php
TYPE: PHP
SIZE: 13.13 KB
------------------------------------------------------------
<?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: generate_hash.php
TYPE: PHP
SIZE: 183 B
------------------------------------------------------------
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: index.php
TYPE: PHP
SIZE: 23.3 KB
------------------------------------------------------------
<?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 Admin</title>
        <style>
            * { margin: 0; padding: 0; box-sizing: border-box; }
            body {
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 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 60px rgba(0,0,0,0.3);
                max-width: 420px;
                width: 100%;
                margin: 20px;
            }
            .login-header {
                text-align: center;
                margin-bottom: 30px;
            }
            .logo {
                width: 70px;
                height: 70px;
                margin: 0 auto 20px;
                background: linear-gradient(135deg, #667eea, #764ba2);
                color: white;
                border-radius: 16px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: bold;
                font-size: 28px;
                box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
            }
            .login-header h1 {
                margin: 0 0 10px;
                color: #1f2937;
                font-size: 26px;
            }
            .login-header p {
                color: #6b7280;
                margin: 0;
                font-size: 14px;
            }
            .error-message {
                background: #fee2e2;
                color: #991b1b;
                padding: 12px 16px;
                border-radius: 8px;
                margin-bottom: 20px;
                font-size: 14px;
                border-left: 4px solid #dc2626;
            }
            .form-group {
                margin-bottom: 20px;
            }
            .form-group label {
                display: block;
                margin-bottom: 8px;
                color: #374151;
                font-weight: 600;
                font-size: 14px;
            }
            .form-group input {
                width: 100%;
                padding: 12px 16px;
                border: 2px solid #e5e7eb;
                border-radius: 10px;
                font-size: 15px;
                transition: all 0.2s;
                font-family: inherit;
            }
            .form-group input:focus {
                outline: none;
                border-color: #667eea;
                box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
            }
            .login-button {
                width: 100%;
                padding: 14px;
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                color: white;
                border: none;
                border-radius: 10px;
                font-size: 16px;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.3s;
                margin-top: 10px;
            }
            .login-button:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
            }
            .login-button:active {
                transform: translateY(0);
            }
            .login-footer {
                text-align: center;
                margin-top: 30px;
                padding-top: 20px;
                border-top: 1px solid #e5e7eb;
                color: #6b7280;
                font-size: 13px;
            }
            @media (max-width: 480px) {
                .login-container {
                    padding: 30px 20px;
                }
            }
        </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" action="">
                <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="login-button">
                    Sign In
                </button>
            </form>
            
            <div class="login-footer">
                © <?php echo date('Y'); ?> Relevant Reflex. All rights reserved.
            </div>
        </div>
    </body>
    </html>
    <?php
    exit;
}

// ============ USER IS LOGGED IN - SHOW DASHBOARD ============
$page_title = 'Dashboard';
$page_description = 'Admin Dashboard Overview';

// Fetch dashboard statistics
try {
    $pdo = getDBConnection();
    $panelPdo = getPanelDBConnection();
    
    // Total members
    $memberStmt = $panelPdo->query("SELECT COUNT(*) as total FROM users");
    $total_members = $memberStmt->fetchColumn();
    
    // Active members
    $activeStmt = $panelPdo->query("SELECT COUNT(*) as total FROM users WHERE status = 'active'");
    $active_members = $activeStmt->fetchColumn();
    
    // Email verified members
    $verifiedStmt = $panelPdo->query("SELECT COUNT(*) as total FROM users WHERE email_verified = 1");
    $verified_members = $verifiedStmt->fetchColumn();
    
    // Total points in circulation
    $pointsStmt = $panelPdo->query("SELECT SUM(points) as total FROM user_points");
    $total_points = $pointsStmt->fetchColumn() ?? 0;
    
    // Total points earned (lifetime)
    $earnedStmt = $panelPdo->query("SELECT SUM(total_earned) as total FROM user_points");
    $total_earned = $earnedStmt->fetchColumn() ?? 0;
    
    // Total redemptions
    $redeemedStmt = $panelPdo->query("SELECT SUM(total_redeemed) as total FROM user_points");
    $total_redeemed = $redeemedStmt->fetchColumn() ?? 0;
    
    // Pending redemption requests
    $pendingRedemptionsStmt = $panelPdo->query("SELECT COUNT(*) as total FROM redemption_requests WHERE status = 'pending'");
    $pending_redemptions = $pendingRedemptionsStmt->fetchColumn();
    
    // Open support tickets
    $openTicketsStmt = $panelPdo->query("SELECT COUNT(*) as total FROM support_tickets WHERE status IN ('open', 'pending')");
    $open_tickets = $openTicketsStmt->fetchColumn();
    
    // Admin users
    $adminStmt = $pdo->query("SELECT COUNT(*) as total FROM admin_users WHERE status = 'active'");
    $admin_count = $adminStmt->fetchColumn();
    
    // Affiliates
    $affiliateStmt = $pdo->query("SELECT COUNT(*) as total FROM affiliates WHERE status = 'active'");
    $affiliate_count = $affiliateStmt->fetchColumn();
    
    // Recent members (last 7 days)
    $recentStmt = $panelPdo->query("SELECT COUNT(*) as total FROM users WHERE created_at >= DATE_SUB(NOW(), INTERVAL 7 DAY)");
    $recent_members = $recentStmt->fetchColumn();
    
    // Recent activities
    $activitiesStmt = $pdo->query("
        SELECT al.*, au.full_name, au.username
        FROM admin_activity_log al
        LEFT JOIN admin_users au ON al.admin_id = au.id
        ORDER BY al.created_at DESC
        LIMIT 10
    ");
    $recent_activities = $activitiesStmt->fetchAll();
    
} catch (Exception $e) {
    error_log("Dashboard error: " . $e->getMessage());
    $total_members = $active_members = $verified_members = 0;
    $total_points = $total_earned = $total_redeemed = 0;
    $pending_redemptions = $open_tickets = 0;
    $admin_count = $affiliate_count = $recent_members = 0;
    $recent_activities = [];
}

include 'includes/header.php';
?>

<style>
.dashboard-container {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.welcome-banner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 40px;
    color: white;
    margin-bottom: 32px;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
    position: relative;
    overflow: hidden;
}

.welcome-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.welcome-content {
    position: relative;
    z-index: 1;
}

.welcome-title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.welcome-subtitle {
    font-size: 18px;
    opacity: 0.95;
    font-weight: 400;
}

.welcome-meta {
    margin-top: 16px;
    font-size: 14px;
    opacity: 0.85;
    display: flex;
    gap: 24px;
    align-items: center;
}

.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.dashboard-stat-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.3s;
    border-left: 4px solid #667eea;
    position: relative;
    overflow: hidden;
}

.dashboard-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), transparent);
    border-radius: 0 0 0 100%;
}

.dashboard-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.dashboard-stat-card:nth-child(1) { border-left-color: #667eea; }
.dashboard-stat-card:nth-child(2) { border-left-color: #059669; }
.dashboard-stat-card:nth-child(3) { border-left-color: #0066cc; }
.dashboard-stat-card:nth-child(4) { border-left-color: #f59e0b; }
.dashboard-stat-card:nth-child(5) { border-left-color: #8b5cf6; }
.dashboard-stat-card:nth-child(6) { border-left-color: #06b6d4; }

.stat-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

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

.stat-card-body {
    position: relative;
    z-index: 1;
}

.stat-card-number {
    font-size: 40px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
    line-height: 1;
}

.stat-card-label {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
    margin-bottom: 12px;
}

.stat-card-change {
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
}

.stat-card-change.positive {
    background: #d1fae5;
    color: #065f46;
}

.stat-card-change.negative {
    background: #fee2e2;
    color: #991b1b;
}

.stat-card-change.neutral {
    background: #e5e7eb;
    color: #374151;
}

.dashboard-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 32px;
}

.dashboard-section {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e5e7eb;
}

.section-title {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-link {
    font-size: 14px;
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.section-link:hover {
    color: #764ba2;
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.quick-action-card {
    padding: 20px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quick-action-card:hover {
    border-color: #667eea;
    background: #f9fafb;
    transform: translateY(-2px);
}

.quick-action-icon {
    font-size: 32px;
}

.quick-action-title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.quick-action-description {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.activity-item {
    padding: 12px;
    background: #f9fafb;
    border-radius: 8px;
    border-left: 3px solid #667eea;
    transition: all 0.2s;
}

.activity-item:hover {
    background: #f3f4f6;
}

.activity-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
}

.activity-user {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.activity-time {
    font-size: 11px;
    color: #9ca3af;
}

.activity-description {
    font-size: 13px;
    color: #6b7280;
}

.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #9ca3af;
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.empty-state-text {
    font-size: 14px;
}

@media (max-width: 1024px) {
    .dashboard-sections {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .welcome-title {
        font-size: 28px;
    }
    
    .welcome-subtitle {
        font-size: 16px;
    }
    
    .dashboard-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .quick-actions-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .dashboard-stats-grid {
        grid-template-columns: 1fr;
    }
}
</style>

<div class="dashboard-container">
    <!-- Welcome Banner -->
    <div class="welcome-banner">
        <div class="welcome-content">
            <h1 class="welcome-title">
                👋 Welcome back, <?php echo htmlspecialchars($_SESSION['admin_name'] ?? 'Admin'); ?>!
            </h1>
            <p class="welcome-subtitle">Here's what's happening with your panel today</p>
            <div class="welcome-meta">
                <span>📅 <?php echo date('l, F j, Y'); ?></span>
                <span>⏰ <?php echo date('g:i A'); ?></span>
                <span>👤 <?php echo ucfirst($_SESSION['admin_role'] ?? 'User'); ?></span>
            </div>
        </div>
    </div>

    <!-- Statistics Grid -->
    <div class="dashboard-stats-grid">
        <div class="dashboard-stat-card">
            <div class="stat-card-header">
                <div class="stat-card-icon">👥</div>
            </div>
            <div class="stat-card-body">
                <div class="stat-card-number"><?php echo number_format($total_members); ?></div>
                <div class="stat-card-label">Total Members</div>
                <?php if ($recent_members > 0): ?>
                    <span class="stat-card-change positive">
                        ↑ +<?php echo $recent_members; ?> this week
                    </span>
                <?php else: ?>
                    <span class="stat-card-change neutral">No new members</span>
                <?php endif; ?>
            </div>
        </div>
        
        <div class="dashboard-stat-card">
            <div class="stat-card-header">
                <div class="stat-card-icon">✅</div>
            </div>
            <div class="stat-card-body">
                <div class="stat-card-number"><?php echo number_format($active_members); ?></div>
                <div class="stat-card-label">Active Members</div>
                <span class="stat-card-change positive">
                    <?php echo $total_members > 0 ? round(($active_members / $total_members) * 100) : 0; ?>% of total
                </span>
            </div>
        </div>
        
        <div class="dashboard-stat-card">
            <div class="stat-card-header">
                <div class="stat-card-icon">💎</div>
            </div>
            <div class="stat-card-body">
                <div class="stat-card-number"><?php echo number_format($total_points); ?></div>
                <div class="stat-card-label">Points in Circulation</div>
                <span class="stat-card-change neutral">Available balance</span>
            </div>
        </div>
        
        <div class="dashboard-stat-card">
            <div class="stat-card-header">
                <div class="stat-card-icon">🎁</div>
            </div>
            <div class="stat-card-body">
                <div class="stat-card-number"><?php echo number_format($pending_redemptions); ?></div>
                <div class="stat-card-label">Pending Redemptions</div>
                <?php if ($pending_redemptions > 0): ?>
                    <span class="stat-card-change negative">⚠️ Needs attention</span>
                <?php else: ?>
                    <span class="stat-card-change positive">✓ All processed</span>
                <?php endif; ?>
            </div>
        </div>
        
        <div class="dashboard-stat-card">
            <div class="stat-card-header">
                <div class="stat-card-icon">🎫</div>
            </div>
            <div class="stat-card-body">
                <div class="stat-card-number"><?php echo number_format($open_tickets); ?></div>
                <div class="stat-card-label">Open Support Tickets</div>
                <?php if ($open_tickets > 0): ?>
                    <span class="stat-card-change negative">⚠️ Requires response</span>
                <?php else: ?>
                    <span class="stat-card-change positive">✓ All resolved</span>
                <?php endif; ?>
            </div>
        </div>
        
        <div class="dashboard-stat-card">
            <div class="stat-card-header">
                <div class="stat-card-icon">📦</div>
            </div>
            <div class="stat-card-body">
                <div class="stat-card-number"><?php echo number_format($affiliate_count); ?></div>
                <div class="stat-card-label">Active Affiliates</div>
                <span class="stat-card-change neutral">Partner network</span>
            </div>
        </div>
    </div>

    <!-- Dashboard Sections -->
    <div class="dashboard-sections">
        <!-- Quick Actions -->
        <div class="dashboard-section">
            <div class="section-header">
                <h2 class="section-title">⚡ Quick Actions</h2>
            </div>
            <div class="quick-actions-grid">
                <a href="panel.php" class="quick-action-card">
                    <div class="quick-action-icon">👥</div>
                    <h3 class="quick-action-title">Panel Members</h3>
                    <p class="quick-action-description">Manage panel members</p>
                </a>
                
                <?php if (isAdmin()): ?>
                <a href="users.php" class="quick-action-card">
                    <div class="quick-action-icon">🔐</div>
                    <h3 class="quick-action-title">Admin Users</h3>
                    <p class="quick-action-description">Manage admin access</p>
                </a>
                <?php endif; ?>
                
                <a href="supply.php" class="quick-action-card">
                    <div class="quick-action-icon">📦</div>
                    <h3 class="quick-action-title">Affiliates</h3>
                    <p class="quick-action-description">Manage partners</p>
                </a>
                
                <a href="support.php" class="quick-action-card">
                    <div class="quick-action-icon">🛠️</div>
                    <h3 class="quick-action-title">Support</h3>
                    <p class="quick-action-description">Handle tickets</p>
                </a>
            </div>
        </div>

        <!-- Recent Activity -->
        <div class="dashboard-section">
            <div class="section-header">
                <h2 class="section-title">📜 Recent Activity</h2>
                <a href="#" class="section-link">View All →</a>
            </div>
            <div class="activity-list">
                <?php if (!empty($recent_activities)): ?>
                    <?php foreach (array_slice($recent_activities, 0, 5) as $activity): ?>
                    <div class="activity-item">
                        <div class="activity-header">
                            <span class="activity-user">
                                <?php echo htmlspecialchars($activity['full_name'] ?? $activity['username'] ?? 'Unknown'); ?>
                            </span>
                            <span class="activity-time">
                                <?php echo date('M j, g:i A', strtotime($activity['created_at'])); ?>
                            </span>
                        </div>
                        <div class="activity-description">
                            <?php echo htmlspecialchars($activity['description']); ?>
                        </div>
                    </div>
                    <?php endforeach; ?>
                <?php else: ?>
                    <div class="empty-state">
                        <div class="empty-state-icon">📜</div>
                        <div class="empty-state-text">No recent activity</div>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

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

FILE: login.php
TYPE: PHP
SIZE: 3.96 KB
------------------------------------------------------------
<?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: logout.php
TYPE: PHP
SIZE: 184 B
------------------------------------------------------------
<?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: maintenance.html
TYPE: HTML
SIZE: 0 B
------------------------------------------------------------

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

FILE: member_edit.php
TYPE: PHP
SIZE: 13.92 KB
------------------------------------------------------------
<?php
require_once 'config.php';
requireLogin();

// Fix navigation cache issue  
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

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

$page_title = 'Edit Member';
$page_description = 'Update 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';
?>

<link rel="stylesheet" href="assets/css/member-enhancements.css">

<style>
.edit-container {
    padding: 24px;
    max-width: 900px;
    margin: 0 auto;
}

.notification-message {
    padding: 16px 24px;
    border-radius: 8px;
    margin-bottom: 24px;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.notification-success {
    background: #d1fae5;
    color: #065f46;
    border-left: 4px solid #059669;
}

.notification-error {
    background: #fee2e2;
    color: #991b1b;
    border-left: 4px solid #dc2626;
}

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

.card-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid #e5e7eb;
}

.card-title {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.form-field {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.form-input,
.form-select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
    font-family: inherit;
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: #0066cc;
    box-shadow: 0 0 0 3px rgba(0,102,204,0.1);
}

.form-input:disabled {
    background: #f9fafb;
    color: #9ca3af;
    cursor: not-allowed;
}

.form-help {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-top: 6px;
}

.form-actions {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 2px solid #e5e7eb;
    display: flex;
    gap: 12px;
}

.info-section {
    background: #f9fafb;
    border-radius: 8px;
    padding: 20px;
    margin-top: 32px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.info-item {
    margin-bottom: 16px;
}

.info-item-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.info-item-value {
    font-size: 14px;
    color: #111827;
    font-weight: 500;
}

@media (max-width: 768px) {
    .form-row, .info-grid {
        grid-template-columns: 1fr;
    }
}
</style>

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

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

    <!-- Basic Information Form -->
    <div class="edit-card">
        <div class="card-header">
            <h2 class="card-title">Basic Information</h2>
        </div>
        
        <form method="POST" id="basicForm">
            <input type="hidden" name="action" value="update_basic">
            
            <div class="form-field">
                <label class="form-label">Email Address</label>
                <input type="email" class="form-input" value="<?php echo htmlspecialchars($member['email']); ?>" disabled>
                <span class="form-help">Email address cannot be changed</span>
            </div>
            
            <div class="form-row">
                <div class="form-field">
                    <label class="form-label" for="gender">Gender *</label>
                    <select id="gender" name="gender" class="form-select" required>
                        <option value="Male" <?php echo $member['gender'] === 'Male' ? 'selected' : ''; ?>>Male</option>
                        <option value="Female" <?php echo $member['gender'] === 'Female' ? 'selected' : ''; ?>>Female</option>
                        <option value="Other" <?php echo $member['gender'] === 'Other' ? 'selected' : ''; ?>>Other</option>
                    </select>
                </div>
                
                <div class="form-field">
                    <label class="form-label" for="date_of_birth">Date of Birth *</label>
                    <input type="date" id="date_of_birth" name="date_of_birth" class="form-input"
                           value="<?php echo htmlspecialchars($member['date_of_birth']); ?>" required>
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-field">
                    <label class="form-label" for="postcode">Postcode *</label>
                    <input type="text" id="postcode" name="postcode" class="form-input"
                           value="<?php echo htmlspecialchars($member['postcode']); ?>" required>
                </div>
                
                <div class="form-field">
                    <label class="form-label" for="status">Account Status *</label>
                    <select id="status" name="status" class="form-select" 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 Form -->
    <div class="edit-card">
        <div class="card-header">
            <h2 class="card-title">Mobile Number</h2>
        </div>
        
        <form method="POST" id="mobileForm">
            <input type="hidden" name="action" value="update_mobile">
            
            <div class="form-field">
                <label class="form-label" for="mobile_number">Mobile Number</label>
                <input type="tel" id="mobile_number" name="mobile_number" class="form-input"
                       value="<?php echo htmlspecialchars($member['mobile_number'] ?? ''); ?>" 
                       placeholder="+91 XXXXX XXXXX">
                <?php if ($member['mobile_verified']): ?>
                    <span class="form-help" style="color: #059669;">✓ Verified</span>
                <?php else: ?>
                    <span class="form-help" style="color: #f59e0b;">Not verified</span>
                <?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="edit-card">
        <div class="card-header">
            <h2 class="card-title">Account Information</h2>
        </div>
        
        <div class="info-grid">
            <div class="info-item">
                <div class="info-item-label">Email Verified</div>
                <div class="info-item-value">
                    <?php echo $member['email_verified'] ? '<span style="color: #059669;">✓ Yes</span>' : '<span style="color: #dc2626;">✗ No</span>'; ?>
                </div>
            </div>
            
            <div class="info-item">
                <div class="info-item-label">Onboarding Completed</div>
                <div class="info-item-value">
                    <?php echo $member['onboarding_completed'] ? '<span style="color: #059669;">✓ Yes</span>' : '<span style="color: #f59e0b;">⏳ No</span>'; ?>
                </div>
            </div>
            
            <div class="info-item">
                <div class="info-item-label">Member Since</div>
                <div class="info-item-value">
                    <?php echo date('F j, Y', strtotime($member['created_at'])); ?>
                </div>
            </div>
            
            <div class="info-item">
                <div class="info-item-label">Last Updated</div>
                <div class="info-item-value">
                    <?php echo date('F j, Y g:i A', strtotime($member['updated_at'])); ?>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Prevent cache issues
window.addEventListener('pageshow', function(event) {
    if (event.persisted) {
        window.location.reload();
    }
});

// Auto-hide notifications after 5 seconds
setTimeout(() => {
    const notifications = document.querySelectorAll('.notification-message');
    notifications.forEach(n => {
        n.style.animation = 'slideIn 0.3s ease reverse';
        setTimeout(() => n.remove(), 300);
    });
}, 5000);

// Warn before leaving with unsaved changes
let formChanged = false;

document.querySelectorAll('form input:not([type="hidden"]), form select').forEach(input => {
    input.addEventListener('change', () => formChanged = true);
});

window.addEventListener('beforeunload', (e) => {
    if (formChanged) {
        e.preventDefault();
        e.returnValue = '';
    }
});

// Reset flag on form submit
document.querySelectorAll('form').forEach(form => {
    form.addEventListener('submit', () => formChanged = false);
});
</script>

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

FILE: member_view.php
TYPE: PHP
SIZE: 30.04 KB
------------------------------------------------------------
<?php
require_once 'config.php';
requireLogin();

// Fix navigation cache issue
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

$member_id = intval($_GET['id'] ?? 0);
if (!$member_id) {
    header('Location: panel.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: panel.php');
        exit;
    }
    
    // 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: panel.php');
    exit;
}

include 'includes/header.php';
?>

<link rel="stylesheet" href="assets/css/member-enhancements.css">

<style>
.member-view-container {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.member-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 24px;
    color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.3s;
}

.stat-card-gradient:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.stat-card-gradient:nth-child(2) {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-card-gradient:nth-child(3) {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-card-gradient:nth-child(4) {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-card-icon {
    font-size: 32px;
    margin-bottom: 12px;
    opacity: 0.9;
}

.stat-card-value {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1;
}

.stat-card-label {
    font-size: 14px;
    opacity: 0.9;
    font-weight: 500;
}

.stat-card-meta {
    font-size: 12px;
    opacity: 0.8;
    margin-top: 8px;
}

.tabs-container {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    margin-top: 24px;
}

.tabs-nav {
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    height: fit-content;
    position: sticky;
    top: 24px;
}

.tab-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tab-nav-item {
    margin-bottom: 8px;
}

.tab-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #6b7280;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s;
    font-size: 14px;
    cursor: pointer;
}

.tab-nav-link:hover {
    background: #f3f4f6;
    color: #111827;
}

.tab-nav-link.active {
    background: linear-gradient(135deg, #0066cc, #0052a3);
    color: white;
}

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

.tabs-content {
    background: white;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    min-height: 400px;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.section-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid #e5e7eb;
}

.section-title {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

/* Enhanced Info Grid with Cards */
.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.info-card {
    background: linear-gradient(135deg, #f9fafb, #ffffff);
    border-radius: 12px;
    padding: 20px;
    border-left: 4px solid #0066cc;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.2s;
}

.info-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.info-label {
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.info-value {
    font-size: 16px;
    color: #111827;
    font-weight: 600;
    margin-bottom: 4px;
}

.info-meta {
    font-size: 13px;
    color: #9ca3af;
    margin-top: 4px;
}

.verification-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 8px;
}

.badge-verified {
    background: #d1fae5;
    color: #065f46;
}

.badge-pending {
    background: #fef3c7;
    color: #92400e;
}

.badge-not-verified {
    background: #fee2e2;
    color: #991b1b;
}

.completion-card {
    background: #f9fafb;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    border: 2px solid #e5e7eb;
    transition: all 0.2s;
}

.completion-card:hover {
    border-color: #0066cc;
    box-shadow: 0 4px 12px rgba(0,102,204,0.1);
}

.completion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.completion-section-name {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.progress-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.progress-bar-container {
    flex: 1;
    height: 10px;
    background: #e5e7eb;
    border-radius: 5px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(to right, #0066cc, #0052a3);
    transition: width 0.3s ease;
    border-radius: 5px;
}

.progress-percentage {
    font-size: 14px;
    font-weight: 700;
    color: #0066cc;
    min-width: 50px;
    text-align: right;
}

.progress-details {
    font-size: 13px;
    color: #6b7280;
}

.transaction-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #f9fafb;
    border-radius: 12px;
    margin-bottom: 12px;
    border-left: 4px solid #e5e7eb;
    transition: all 0.2s;
}

.transaction-card:hover {
    background: #f3f4f6;
}

.transaction-card.earned {
    border-left-color: #10b981;
    background: #ecfdf5;
}

.transaction-card.redeemed {
    border-left-color: #ef4444;
    background: #fef2f2;
}

.transaction-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.transaction-details {
    flex: 1;
}

.transaction-description {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
}

.transaction-meta {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #6b7280;
}

.transaction-amount {
    font-size: 20px;
    font-weight: 700;
}

.transaction-amount.positive {
    color: #10b981;
}

.transaction-amount.negative {
    color: #ef4444;
}

.redemption-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 16px;
}

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

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

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

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

.ticket-card {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    transition: all 0.2s;
}

.ticket-card:hover {
    border-color: #0066cc;
    box-shadow: 0 4px 12px rgba(0,102,204,0.1);
}

.ticket-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.ticket-number {
    font-family: monospace;
    font-weight: 700;
    color: #6b7280;
    font-size: 14px;
}

.ticket-subject {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 12px;
}

.ticket-meta-row {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.priority-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.priority-low { background: #dbeafe; color: #1e40af; }
.priority-medium { background: #fef3c7; color: #92400e; }
.priority-high { background: #fee2e2; color: #991b1b; }
.priority-urgent { background: #7c3aed; color: white; }

.ticket-date {
    font-size: 13px;
    color: #6b7280;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #9ca3af;
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state-text {
    font-size: 16px;
    font-weight: 500;
}

/* Status Badge */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-active {
    background: #d1fae5;
    color: #065f46;
}

.status-inactive {
    background: #fee2e2;
    color: #991b1b;
}

.status-suspended {
    background: #fef3c7;
    color: #92400e;
}

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

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

@media (max-width: 480px) {
    .member-stats-grid {
        grid-template-columns: 1fr;
    }
}
</style>

<div class="member-view-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">
                ✏️ Edit Member
            </a>
            <a href="panel.php" class="btn btn-secondary">
                ← Back to List
            </a>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="member-stats-grid">
        <div class="stat-card-gradient">
            <div class="stat-card-icon">💰</div>
            <div class="stat-card-value"><?php echo number_format($member['current_points'] ?? 0, 0); ?></div>
            <div class="stat-card-label">Current Points</div>
            <div class="stat-card-meta">Available Balance</div>
        </div>
        
        <div class="stat-card-gradient">
            <div class="stat-card-icon">📈</div>
            <div class="stat-card-value"><?php echo number_format($member['total_earned'] ?? 0, 0); ?></div>
            <div class="stat-card-label">Total Earned</div>
            <div class="stat-card-meta">Lifetime Earnings</div>
        </div>
        
        <div class="stat-card-gradient">
            <div class="stat-card-icon">💳</div>
            <div class="stat-card-value"><?php echo number_format($member['total_redeemed'] ?? 0, 0); ?></div>
            <div class="stat-card-label">Total Redeemed</div>
            <div class="stat-card-meta">Lifetime Redemptions</div>
        </div>
        
        <div class="stat-card-gradient">
            <div class="stat-card-icon">
                <?php echo $member['email_verified'] ? '✅' : '⏳'; ?>
            </div>
            <div class="stat-card-value">
                <?php echo $member['email_verified'] ? 'Verified' : 'Pending'; ?>
            </div>
            <div class="stat-card-label">Account Status</div>
            <div class="stat-card-meta">
                <?php echo ucfirst($member['status']); ?>
            </div>
        </div>
    </div>

    <!-- Tabs -->
    <div class="tabs-container">
        <div class="tabs-nav">
            <ul class="tab-nav-list">
                <li class="tab-nav-item">
                    <a href="#" class="tab-nav-link active" data-tab="basic">
                        <span class="tab-nav-icon">👤</span>
                        Basic Info
                    </a>
                </li>
                <li class="tab-nav-item">
                    <a href="#" class="tab-nav-link" data-tab="profiler">
                        <span class="tab-nav-icon">📋</span>
                        Profiler
                    </a>
                </li>
                <li class="tab-nav-item">
                    <a href="#" class="tab-nav-link" data-tab="points">
                        <span class="tab-nav-icon">💎</span>
                        Points History
                    </a>
                </li>
                <li class="tab-nav-item">
                    <a href="#" class="tab-nav-link" data-tab="redemptions">
                        <span class="tab-nav-icon">🎁</span>
                        Redemptions
                    </a>
                </li>
                <li class="tab-nav-item">
                    <a href="#" class="tab-nav-link" data-tab="tickets">
                        <span class="tab-nav-icon">🎫</span>
                        Support Tickets
                    </a>
                </li>
            </ul>
        </div>
        
        <div class="tabs-content">
            <!-- Basic Info Tab -->
            <div id="basic" class="tab-pane active">
                <div class="section-header">
                    <h2 class="section-title">Basic Information</h2>
                </div>
                
                <div class="info-grid">
                    <div class="info-card">
                        <div class="info-label">📧 Email Address</div>
                        <div class="info-value"><?php echo htmlspecialchars($member['email']); ?></div>
                        <?php if ($member['email_verified']): ?>
                            <span class="verification-badge badge-verified">✓ Verified</span>
                        <?php else: ?>
                            <span class="verification-badge badge-not-verified">✗ Not Verified</span>
                        <?php endif; ?>
                    </div>
                    
                    <div class="info-card">
                        <div class="info-label">👤 Gender</div>
                        <div class="info-value"><?php echo htmlspecialchars($member['gender']); ?></div>
                    </div>
                    
                    <div class="info-card">
                        <div class="info-label">🎂 Date of Birth</div>
                        <div class="info-value">
                            <?php 
                            $dob = new DateTime($member['date_of_birth']);
                            $now = new DateTime();
                            $age = $now->diff($dob)->y;
                            echo $dob->format('F j, Y'); 
                            ?>
                        </div>
                        <div class="info-meta"><?php echo $age; ?> years old</div>
                    </div>
                    
                    <div class="info-card">
                        <div class="info-label">📍 Postcode</div>
                        <div class="info-value"><?php echo htmlspecialchars($member['postcode']); ?></div>
                    </div>
                    
                    <div class="info-card">
                        <div class="info-label">📱 Mobile Number</div>
                        <div class="info-value">
                            <?php echo $member['mobile_number'] ? htmlspecialchars($member['mobile_number']) : 'Not provided'; ?>
                        </div>
                        <?php if ($member['mobile_verified']): ?>
                            <span class="verification-badge badge-verified">✓ Verified</span>
                        <?php endif; ?>
                    </div>
                    
                    <div class="info-card">
                        <div class="info-label">🔒 Account Status</div>
                        <div class="info-value">
                            <span class="status-badge status-<?php echo strtolower($member['status']); ?>">
                                <?php echo ucfirst($member['status']); ?>
                            </span>
                        </div>
                    </div>
                    
                    <div class="info-card">
                        <div class="info-label">✅ Email Verified</div>
                        <div class="info-value">
                            <?php echo $member['email_verified'] ? '<span style="color: #10b981;">✓ Yes</span>' : '<span style="color: #ef4444;">✗ No</span>'; ?>
                        </div>
                    </div>
                    
                    <div class="info-card">
                        <div class="info-label">🎯 Onboarding Status</div>
                        <div class="info-value">
                            <?php if ($member['onboarding_completed']): ?>
                                <span class="verification-badge badge-verified">✓ Completed</span>
                            <?php else: ?>
                                <span class="verification-badge badge-pending">⏳ Pending</span>
                            <?php endif; ?>
                        </div>
                    </div>
                    
                    <div class="info-card">
                        <div class="info-label">📅 Member Since</div>
                        <div class="info-value"><?php echo date('F j, Y', strtotime($member['created_at'])); ?></div>
                        <div class="info-meta"><?php echo date('g:i A', strtotime($member['created_at'])); ?></div>
                    </div>
                    
                    <div class="info-card">
                        <div class="info-label">🕐 Last Login</div>
                        <div class="info-value">
                            <?php echo $member['last_login'] ? date('F j, Y', strtotime($member['last_login'])) : 'Never'; ?>
                        </div>
                        <?php if ($member['last_login']): ?>
                            <div class="info-meta"><?php echo date('g:i A', strtotime($member['last_login'])); ?></div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
            
            <!-- Profiler Tab -->
            <div id="profiler" class="tab-pane">
                <div class="section-header">
                    <h2 class="section-title">Profiler Completion</h2>
                </div>
                
                <?php if (!empty($completionData)): ?>
                    <?php foreach ($completionData as $completion): ?>
                    <div class="completion-card">
                        <div class="completion-header">
                            <div class="completion-section-name">
                                <?php echo ucwords(str_replace('_', ' ', $completion['section'])); ?>
                            </div>
                            <span class="status-badge <?php echo $completion['is_completed'] ? 'status-active' : 'status-suspended'; ?>">
                                <?php echo $completion['is_completed'] ? 'Completed' : 'In Progress'; ?>
                            </span>
                        </div>
                        <div class="progress-wrapper">
                            <div class="progress-bar-container">
                                <div class="progress-bar-fill" style="width: <?php echo $completion['completion_percentage']; ?>%"></div>
                            </div>
                            <div class="progress-percentage"><?php echo number_format($completion['completion_percentage'], 0); ?>%</div>
                        </div>
                        <div class="progress-details">
                            <?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; ?>
                        </div>
                    </div>
                    <?php endforeach; ?>
                <?php else: ?>
                    <div class="empty-state">
                        <div class="empty-state-icon">📋</div>
                        <div class="empty-state-text">No profiler data available</div>
                    </div>
                <?php endif; ?>
            </div>
            
            <!-- Points History Tab -->
            <div id="points" class="tab-pane">
                <div class="section-header">
                    <h2 class="section-title">Points Transaction History</h2>
                </div>
                
                <?php if (!empty($transactions)): ?>
                    <?php foreach ($transactions as $transaction): ?>
                    <div class="transaction-card <?php echo strtolower($transaction['transaction_type']); ?>">
                        <div class="transaction-icon-wrapper">
                            <?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><?php echo date('M j, Y g:i A', strtotime($transaction['created_at'])); ?></span>
                                <span><?php echo ucwords(str_replace('_', ' ', $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'], 0); ?>
                        </div>
                    </div>
                    <?php endforeach; ?>
                <?php else: ?>
                    <div class="empty-state">
                        <div class="empty-state-icon">💎</div>
                        <div class="empty-state-text">No transaction history available</div>
                    </div>
                <?php endif; ?>
            </div>
            
            <!-- Redemptions Tab -->
            <div id="redemptions" class="tab-pane">
                <div class="section-header">
                    <h2 class="section-title">Redemption Requests</h2>
                </div>
                
                <?php if (!empty($redemptions)): ?>
                    <table class="redemption-table">
                        <thead>
                            <tr>
                                <th>Request ID</th>
                                <th>Points</th>
                                <th>Amount (₹)</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'], 0); ?></td>
                                <td style="font-weight: 600; color: #10b981;">
                                    ₹<?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 
                                    echo $redemption['processed_at'] 
                                        ? date('M j, Y', strtotime($redemption['processed_at'])) 
                                        : '<span style="color: #9ca3af;">Pending</span>';
                                    ?>
                                </td>
                            </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                <?php else: ?>
                    <div class="empty-state">
                        <div class="empty-state-icon">🎁</div>
                        <div class="empty-state-text">No redemption requests found</div>
                    </div>
                <?php endif; ?>
            </div>
            
            <!-- Support Tickets Tab -->
            <div id="tickets" class="tab-pane">
                <div class="section-header">
                    <h2 class="section-title">Support Tickets</h2>
                </div>
                
                <?php if (!empty($tickets)): ?>
                    <?php foreach ($tickets as $ticket): ?>
                    <div class="ticket-card">
                        <div class="ticket-header-row">
                            <div class="ticket-number">#<?php echo htmlspecialchars($ticket['ticket_number']); ?></div>
                            <span class="status-badge status-<?php echo strtolower($ticket['status']); ?>">
                                <?php echo ucfirst($ticket['status']); ?>
                            </span>
                        </div>
                        <div class="ticket-subject"><?php echo htmlspecialchars($ticket['subject']); ?></div>
                        <div class="ticket-meta-row">
                            <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 g:i A', strtotime($ticket['created_at'])); ?></span>
                        </div>
                    </div>
                    <?php endforeach; ?>
                <?php else: ?>
                    <div class="empty-state">
                        <div class="empty-state-icon">🎫</div>
                        <div class="empty-state-text">No support tickets found</div>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

<script>
// Prevent cache issues
window.addEventListener('pageshow', function(event) {
    if (event.persisted) {
        window.location.reload();
    }
});

// Tab switching
document.addEventListener('DOMContentLoaded', function() {
    const tabLinks = document.querySelectorAll('.tab-nav-link');
    const tabPanes = document.querySelectorAll('.tab-pane');
    
    tabLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const targetTab = this.getAttribute('data-tab');
            
            // Remove active class from all
            tabLinks.forEach(l => l.classList.remove('active'));
            tabPanes.forEach(p => p.classList.remove('active'));
            
            // Add active class to clicked tab
            this.classList.add('active');
            document.getElementById(targetTab).classList.add('active');
        });
    });
});
</script>

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

FILE: members.php
TYPE: PHP
SIZE: 22.14 KB
------------------------------------------------------------
<?php
require_once 'config.php';
requireLogin();

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

// Handle member deletion
if (isset($_POST['delete_member']) && isAdmin()) {
    $member_id = intval($_POST['member_id'] ?? 0);
    if ($member_id > 0) {
        try {
            $panelPdo = getPanelDBConnection();
            $panelPdo->beginTransaction();
            
            // Delete related records first
            $panelPdo->prepare("DELETE FROM point_transactions WHERE user_id = ?")->execute([$member_id]);
            $panelPdo->prepare("DELETE FROM user_points WHERE user_id = ?")->execute([$member_id]);
            $panelPdo->prepare("DELETE FROM redemption_requests WHERE user_id = ?")->execute([$member_id]);
            $panelPdo->prepare("DELETE FROM support_tickets WHERE user_id = ?")->execute([$member_id]);
            $panelPdo->prepare("DELETE FROM support_messages WHERE sender_type = 'user' AND sender_id = ?")->execute([$member_id]);
            $panelPdo->prepare("DELETE FROM user_profiler WHERE user_id = ?")->execute([$member_id]);
            $panelPdo->prepare("DELETE FROM profiler_completion WHERE user_id = ?")->execute([$member_id]);
            $panelPdo->prepare("DELETE FROM mobile_verifications WHERE user_id = ?")->execute([$member_id]);
            $panelPdo->prepare("DELETE FROM email_verifications WHERE user_id = ?")->execute([$member_id]);
            
            // Delete the user
            $panelPdo->prepare("DELETE FROM users WHERE id = ?")->execute([$member_id]);
            
            $panelPdo->commit();
            
            logActivity($_SESSION['admin_id'], 'delete_member', "Deleted member #$member_id", 'member', $member_id);
            
            $success_message = 'Member deleted successfully!';
        } catch (Exception $e) {
            $panelPdo->rollBack();
            error_log("Delete member error: " . $e->getMessage());
            $error_message = 'Error deleting member. Please try again.';
        }
    }
}

// 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';
?>

<style>
/* Enhanced Modern Styling for Members Table */
.members-page-container {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.members-stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stats-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 24px;
    color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.stats-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.stats-card:nth-child(2) {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.stats-card:nth-child(3) {
    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
}

.stats-card:nth-child(4) {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.stats-card-number {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 8px;
}

.stats-card-label {
    font-size: 14px;
    opacity: 0.9;
    font-weight: 500;
}

.table-header-section {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.table-controls {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

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

.search-box input {
    width: 100%;
    padding: 10px 16px 10px 40px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
}

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

.filter-group {
    display: flex;
    gap: 12px;
}

.filter-select {
    padding: 10px 36px 10px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.filter-select:focus {
    outline: none;
    border-color: #0066cc;
}

.members-table-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
}

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

.members-table thead {
    background: linear-gradient(to right, #f9fafb, #f3f4f6);
}

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

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

.members-table tbody tr {
    transition: background 0.2s;
}

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

.member-email-cell {
    max-width: 250px;
}

.member-email {
    font-weight: 600;
    color: #111827;
    display: block;
    margin-bottom: 4px;
}

.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #059669;
    font-weight: 600;
}

.member-dob-cell {
    min-width: 140px;
}

.dob-primary {
    font-weight: 500;
    color: #111827;
}

.dob-age {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

.points-badge {
    display: inline-block;
    padding: 6px 12px;
    background: linear-gradient(135deg, #0066cc, #0052a3);
    color: white;
    border-radius: 6px;
    font-weight: 700;
    font-size: 14px;
}

.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.status-active {
    background: #d1fae5;
    color: #065f46;
}

.status-badge.status-inactive {
    background: #fee2e2;
    color: #991b1b;
}

.status-badge.status-suspended {
    background: #fef3c7;
    color: #92400e;
}

.joined-cell {
    min-width: 120px;
}

.joined-date {
    font-weight: 500;
    color: #111827;
}

.joined-time {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

.action-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 16px;
    text-decoration: none;
}

.btn-view {
    background: #dbeafe;
    color: #1e40af;
}

.btn-view:hover {
    background: #3b82f6;
    color: white;
    transform: scale(1.1);
}

.btn-edit {
    background: #fef3c7;
    color: #92400e;
}

.btn-edit:hover {
    background: #f59e0b;
    color: white;
    transform: scale(1.1);
}

.btn-delete {
    background: #fee2e2;
    color: #991b1b;
}

.btn-delete:hover {
    background: #dc2626;
    color: white;
    transform: scale(1.1);
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #9ca3af;
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.empty-state-text {
    font-size: 16px;
    font-weight: 500;
}

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

.modal.active {
    display: flex;
}

.modal-content {
    background: white;
    border-radius: 12px;
    padding: 24px;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.modal-icon {
    width: 48px;
    height: 48px;
    background: #fee2e2;
    color: #dc2626;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.modal-title {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
}

.modal-body {
    margin-bottom: 24px;
    color: #6b7280;
    line-height: 1.6;
}

.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.btn-modal {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel {
    background: #f3f4f6;
    color: #374151;
}

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

.btn-confirm-delete {
    background: #dc2626;
    color: white;
}

.btn-confirm-delete:hover {
    background: #b91c1c;
}

/* Notification Messages */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10000;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.notification-success {
    background: #d1fae5;
    color: #065f46;
    border-left: 4px solid #059669;
}

.notification-error {
    background: #fee2e2;
    color: #991b1b;
    border-left: 4px solid #dc2626;
}

/* Responsive Design */
@media (max-width: 768px) {
    .members-stats-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .table-controls {
        flex-direction: column;
    }
    
    .search-box {
        width: 100%;
    }
    
    .members-table-container {
        overflow-x: auto;
    }
    
    .members-table {
        min-width: 1000px;
    }
}
</style>

<div class="members-page-container">
    <?php if (isset($success_message)): ?>
    <div class="notification notification-success">
        ✅ <?php echo htmlspecialchars($success_message); ?>
    </div>
    <?php endif; ?>
    
    <?php if (isset($error_message)): ?>
    <div class="notification notification-error">
        ⚠️ <?php echo htmlspecialchars($error_message); ?>
    </div>
    <?php endif; ?>

    <div class="page-header">
        <div>
            <h1>Panel Members</h1>
            <p class="page-subtitle">View and manage all registered survey panel members</p>
        </div>
    </div>

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

    <!-- Table Controls -->
    <div class="table-header-section">
        <div class="table-controls">
            <div class="search-box">
                <input type="text" id="memberSearch" placeholder="Search by email, postcode, or ID..." />
            </div>
            <div class="filter-group">
                <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>

    <!-- Members Table -->
    <div class="members-table-container">
        <table class="members-table" id="membersTable">
            <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 if (empty($members)): ?>
                <tr>
                    <td colspan="9">
                        <div class="empty-state">
                            <div class="empty-state-icon">👥</div>
                            <div class="empty-state-text">No panel members found</div>
                        </div>
                    </td>
                </tr>
                <?php else: ?>
                    <?php foreach ($members as $member): ?>
                    <tr data-member-id="<?php echo $member['id']; ?>"
                        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><strong>#<?php echo $member['id']; ?></strong></td>
                        <td class="member-email-cell">
                            <div class="member-email"><?php echo htmlspecialchars($member['email']); ?></div>
                            <?php if ($member['email_verified']): ?>
                                <div class="verified-badge">
                                    <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
                                        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>
                                    </svg>
                                    Verified
                                </div>
                            <?php endif; ?>
                        </td>
                        <td><?php echo htmlspecialchars($member['gender']); ?></td>
                        <td class="member-dob-cell">
                            <?php 
                            $dob = new DateTime($member['date_of_birth']);
                            $now = new DateTime();
                            $age = $now->diff($dob)->y;
                            ?>
                            <div class="dob-primary"><?php echo $dob->format('M j, Y'); ?></div>
                            <div class="dob-age"><?php echo $age; ?> years old</div>
                        </td>
                        <td><?php echo htmlspecialchars($member['postcode']); ?></td>
                        <td>
                            <span class="points-badge">
                                <?php echo number_format($member['current_points'] ?? 0, 0); ?>
                            </span>
                        </td>
                        <td>
                            <span class="status-badge status-<?php echo strtolower($member['status']); ?>">
                                <?php echo ucfirst($member['status']); ?>
                            </span>
                        </td>
                        <td class="joined-cell">
                            <div class="joined-date"><?php echo date('M j, Y', strtotime($member['created_at'])); ?></div>
                            <div class="joined-time"><?php echo date('g:i A', strtotime($member['created_at'])); ?></div>
                        </td>
                        <td>
                            <div class="action-buttons">
                                <a href="member_view.php?id=<?php echo $member['id']; ?>" class="btn-action btn-view" title="View Member">
                                    👁️
                                </a>
                                <a href="member_edit.php?id=<?php echo $member['id']; ?>" class="btn-action btn-edit" title="Edit Member">
                                    ✏️
                                </a>
                                <?php if (isAdmin()): ?>
                                <button class="btn-action btn-delete" onclick="confirmDelete(<?php echo $member['id']; ?>, '<?php echo htmlspecialchars($member['email'], ENT_QUOTES); ?>')" title="Delete Member">
                                    🗑️
                                </button>
                                <?php endif; ?>
                            </div>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div id="deleteModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <div class="modal-icon">⚠️</div>
            <h3 class="modal-title">Confirm Deletion</h3>
        </div>
        <div class="modal-body">
            <p>Are you sure you want to delete member <strong id="deleteMemberEmail"></strong>?</p>
            <p>This action cannot be undone and will permanently delete:</p>
            <ul style="margin: 12px 0; padding-left: 20px;">
                <li>Member profile and account data</li>
                <li>All points and transaction history</li>
                <li>Redemption requests</li>
                <li>Support tickets and messages</li>
                <li>Profiler data</li>
            </ul>
        </div>
        <div class="modal-actions">
            <button class="btn-modal btn-cancel" onclick="closeDeleteModal()">Cancel</button>
            <form method="POST" style="display: inline;">
                <input type="hidden" name="member_id" id="deleteMemberId" />
                <button type="submit" name="delete_member" class="btn-modal btn-confirm-delete">
                    Delete Member
                </button>
            </form>
        </div>
    </div>
</div>

<script>
// Auto-hide notifications
setTimeout(() => {
    const notifications = document.querySelectorAll('.notification');
    notifications.forEach(n => {
        n.style.animation = 'slideIn 0.3s ease reverse';
        setTimeout(() => n.remove(), 300);
    });
}, 5000);

// Search and Filter Functionality
const searchInput = document.getElementById('memberSearch');
const statusFilter = document.getElementById('statusFilter');
const verificationFilter = document.getElementById('verificationFilter');
const tableRows = document.querySelectorAll('#membersTable tbody tr[data-member-id]');

function filterTable() {
    const searchTerm = searchInput.value.toLowerCase();
    const statusValue = statusFilter.value;
    const verificationValue = verificationFilter.value;
    
    let visibleCount = 0;
    
    tableRows.forEach(row => {
        const memberId = row.dataset.memberId || '';
        const email = row.dataset.email || '';
        const postcode = row.dataset.postcode || '';
        const status = row.dataset.status || '';
        const verified = row.dataset.verified || '';
        
        const matchesSearch = !searchTerm || 
            memberId.includes(searchTerm) ||
            email.includes(searchTerm) || 
            postcode.includes(searchTerm);
        const matchesStatus = !statusValue || status === statusValue;
        const matchesVerification = !verificationValue || verified === verificationValue;
        
        if (matchesSearch && matchesStatus && matchesVerification) {
            row.style.display = '';
            visibleCount++;
        } else {
            row.style.display = 'none';
        }
    });
}

searchInput?.addEventListener('input', filterTable);
statusFilter?.addEventListener('change', filterTable);
verificationFilter?.addEventListener('change', filterTable);

// Delete Confirmation Modal
function confirmDelete(memberId, memberEmail) {
    document.getElementById('deleteMemberId').value = memberId;
    document.getElementById('deleteMemberEmail').textContent = memberEmail;
    document.getElementById('deleteModal').classList.add('active');
}

function closeDeleteModal() {
    document.getElementById('deleteModal').classList.remove('active');
}

// Close modal on background click
document.getElementById('deleteModal')?.addEventListener('click', function(e) {
    if (e.target === this) {
        closeDeleteModal();
    }
});

// Escape key to close modal
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeDeleteModal();
    }
});

// Prevent navigation issues - force reload on back button
window.addEventListener('pageshow', function(event) {
    if (event.persisted) {
        window.location.reload();
    }
});
</script>

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

FILE: panel.php
TYPE: PHP
SIZE: 22.22 KB
------------------------------------------------------------
<?php
require_once 'config.php';
requireLogin();

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

// Handle member deletion
if (isset($_POST['delete_member']) && isAdmin()) {
    $member_id = intval($_POST['member_id'] ?? 0);
    if ($member_id > 0) {
        try {
            $panelPdo = getPanelDBConnection();
            $panelPdo->beginTransaction();
            
            // Delete related records first
            $panelPdo->prepare("DELETE FROM point_transactions WHERE user_id = ?")->execute([$member_id]);
            $panelPdo->prepare("DELETE FROM user_points WHERE user_id = ?")->execute([$member_id]);
            $panelPdo->prepare("DELETE FROM redemption_requests WHERE user_id = ?")->execute([$member_id]);
            $panelPdo->prepare("DELETE FROM support_tickets WHERE user_id = ?")->execute([$member_id]);
            $panelPdo->prepare("DELETE FROM support_messages WHERE sender_type = 'user' AND sender_id = ?")->execute([$member_id]);
            $panelPdo->prepare("DELETE FROM user_profiler WHERE user_id = ?")->execute([$member_id]);
            $panelPdo->prepare("DELETE FROM profiler_completion WHERE user_id = ?")->execute([$member_id]);
            $panelPdo->prepare("DELETE FROM mobile_verifications WHERE user_id = ?")->execute([$member_id]);
            $panelPdo->prepare("DELETE FROM email_verifications WHERE user_id = ?")->execute([$member_id]);
            
            // Delete the user
            $panelPdo->prepare("DELETE FROM users WHERE id = ?")->execute([$member_id]);
            
            $panelPdo->commit();
            
            logActivity($_SESSION['admin_id'], 'delete_member', "Deleted member #$member_id", 'member', $member_id);
            
            $success_message = 'Member deleted successfully!';
        } catch (Exception $e) {
            $panelPdo->rollBack();
            error_log("Delete member error: " . $e->getMessage());
            $error_message = 'Error deleting member. Please try again.';
        }
    }
}

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>
/* Same enhanced styling as members.php */
.panel-page-container {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.panel-stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stats-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 24px;
    color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.stats-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.stats-card:nth-child(2) {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.stats-card:nth-child(3) {
    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
}

.stats-card:nth-child(4) {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.stats-card:nth-child(5) {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.stats-card:nth-child(6) {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.stats-card-number {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 8px;
}

.stats-card-label {
    font-size: 14px;
    opacity: 0.9;
    font-weight: 500;
}

.table-header-section {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.table-controls {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

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

.search-box input {
    width: 100%;
    padding: 10px 16px 10px 40px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
}

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

.filter-group {
    display: flex;
    gap: 12px;
}

.filter-select {
    padding: 10px 36px 10px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.filter-select:focus {
    outline: none;
    border-color: #0066cc;
}

.panel-table-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
}

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

.panel-table thead {
    background: linear-gradient(to right, #f9fafb, #f3f4f6);
}

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

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

.panel-table tbody tr {
    transition: background 0.2s;
}

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

.member-email-cell {
    max-width: 250px;
}

.member-email {
    font-weight: 600;
    color: #111827;
    display: block;
    margin-bottom: 4px;
}

.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #059669;
    font-weight: 600;
}

.member-dob-cell {
    min-width: 140px;
}

.dob-primary {
    font-weight: 500;
    color: #111827;
}

.dob-age {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

.points-badge {
    display: inline-block;
    padding: 6px 12px;
    background: linear-gradient(135deg, #0066cc, #0052a3);
    color: white;
    border-radius: 6px;
    font-weight: 700;
    font-size: 14px;
}

.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.status-active {
    background: #d1fae5;
    color: #065f46;
}

.status-badge.status-inactive {
    background: #fee2e2;
    color: #991b1b;
}

.status-badge.status-suspended {
    background: #fef3c7;
    color: #92400e;
}

.joined-cell {
    min-width: 120px;
}

.joined-date {
    font-weight: 500;
    color: #111827;
}

.joined-time {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

.action-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 16px;
    text-decoration: none;
}

.btn-view {
    background: #dbeafe;
    color: #1e40af;
}

.btn-view:hover {
    background: #3b82f6;
    color: white;
    transform: scale(1.1);
}

.btn-edit {
    background: #fef3c7;
    color: #92400e;
}

.btn-edit:hover {
    background: #f59e0b;
    color: white;
    transform: scale(1.1);
}

.btn-delete {
    background: #fee2e2;
    color: #991b1b;
}

.btn-delete:hover {
    background: #dc2626;
    color: white;
    transform: scale(1.1);
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #9ca3af;
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.empty-state-text {
    font-size: 16px;
    font-weight: 500;
}

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

.modal.active {
    display: flex;
}

.modal-content {
    background: white;
    border-radius: 12px;
    padding: 24px;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.modal-icon {
    width: 48px;
    height: 48px;
    background: #fee2e2;
    color: #dc2626;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.modal-title {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
}

.modal-body {
    margin-bottom: 24px;
    color: #6b7280;
    line-height: 1.6;
}

.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.btn-modal {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel {
    background: #f3f4f6;
    color: #374151;
}

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

.btn-confirm-delete {
    background: #dc2626;
    color: white;
}

.btn-confirm-delete:hover {
    background: #b91c1c;
}

/* Notification Messages */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10000;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.notification-success {
    background: #d1fae5;
    color: #065f46;
    border-left: 4px solid #059669;
}

.notification-error {
    background: #fee2e2;
    color: #991b1b;
    border-left: 4px solid #dc2626;
}

/* Responsive Design */
@media (max-width: 768px) {
    .panel-stats-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .table-controls {
        flex-direction: column;
    }
    
    .search-box {
        width: 100%;
    }
    
    .panel-table-container {
        overflow-x: auto;
    }
    
    .panel-table {
        min-width: 1000px;
    }
}
</style>

<div class="panel-page-container">
    <?php if (isset($success_message)): ?>
    <div class="notification notification-success">
        ✅ <?php echo htmlspecialchars($success_message); ?>
    </div>
    <?php endif; ?>
    
    <?php if (isset($error_message)): ?>
    <div class="notification notification-error">
        ⚠️ <?php echo htmlspecialchars($error_message); ?>
    </div>
    <?php endif; ?>

    <div class="page-header">
        <div>
            <h1>Panel Management</h1>
            <p class="page-subtitle">Manage all registered survey panel members</p>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="panel-stats-cards">
        <div class="stats-card">
            <div class="stats-card-number"><?php echo count($members); ?></div>
            <div class="stats-card-label">Total Members</div>
        </div>
        <div class="stats-card">
            <div class="stats-card-number"><?php echo count(array_filter($members, fn($m) => $m['status'] === 'active')); ?></div>
            <div class="stats-card-label">Active Members</div>
        </div>
        <div class="stats-card">
            <div class="stats-card-number"><?php echo count(array_filter($members, fn($m) => $m['email_verified'] == 1)); ?></div>
            <div class="stats-card-label">Email Verified</div>
        </div>
        <div class="stats-card">
            <div class="stats-card-number"><?php echo count(array_filter($members, fn($m) => $m['mobile_verified'] == 1)); ?></div>
            <div class="stats-card-label">Mobile Verified</div>
        </div>
        <div class="stats-card">
            <div class="stats-card-number"><?php echo count(array_filter($members, fn($m) => $m['onboarding_completed'] == 1)); ?></div>
            <div class="stats-card-label">Onboarded</div>
        </div>
        <div class="stats-card">
            <div class="stats-card-number"><?php echo number_format(array_sum(array_column($members, 'current_points')), 0); ?></div>
            <div class="stats-card-label">Total Points</div>
        </div>
    </div>

    <!-- Table Controls -->
    <div class="table-header-section">
        <div class="table-controls">
            <div class="search-box">
                <input type="text" id="memberSearch" placeholder="Search by email, postcode, or ID..." />
            </div>
            <div class="filter-group">
                <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>

    <!-- Members Table -->
    <div class="panel-table-container">
        <table class="panel-table" id="membersTable">
            <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 if (empty($members)): ?>
                <tr>
                    <td colspan="9">
                        <div class="empty-state">
                            <div class="empty-state-icon">👥</div>
                            <div class="empty-state-text">No panel members found</div>
                        </div>
                    </td>
                </tr>
                <?php else: ?>
                    <?php foreach ($members as $member): ?>
                    <tr data-member-id="<?php echo $member['id']; ?>"
                        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><strong>#<?php echo $member['id']; ?></strong></td>
                        <td class="member-email-cell">
                            <div class="member-email"><?php echo htmlspecialchars($member['email']); ?></div>
                            <?php if ($member['email_verified']): ?>
                                <div class="verified-badge">
                                    <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
                                        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>
                                    </svg>
                                    Verified
                                </div>
                            <?php endif; ?>
                        </td>
                        <td><?php echo htmlspecialchars($member['gender']); ?></td>
                        <td class="member-dob-cell">
                            <?php 
                            $dob = new DateTime($member['date_of_birth']);
                            $now = new DateTime();
                            $age = $now->diff($dob)->y;
                            ?>
                            <div class="dob-primary"><?php echo $dob->format('M j, Y'); ?></div>
                            <div class="dob-age"><?php echo $age; ?> years old</div>
                        </td>
                        <td><?php echo htmlspecialchars($member['postcode']); ?></td>
                        <td>
                            <span class="points-badge">
                                <?php echo number_format($member['current_points'] ?? 0, 0); ?>
                            </span>
                        </td>
                        <td>
                            <span class="status-badge status-<?php echo strtolower($member['status']); ?>">
                                <?php echo ucfirst($member['status']); ?>
                            </span>
                        </td>
                        <td class="joined-cell">
                            <div class="joined-date"><?php echo date('M j, Y', strtotime($member['created_at'])); ?></div>
                            <div class="joined-time"><?php echo date('g:i A', strtotime($member['created_at'])); ?></div>
                        </td>
                        <td>
                            <div class="action-buttons">
                                <a href="member_view.php?id=<?php echo $member['id']; ?>" class="btn-action btn-view" title="View Member">
                                    👁️
                                </a>
                                <a href="member_edit.php?id=<?php echo $member['id']; ?>" class="btn-action btn-edit" title="Edit Member">
                                    ✏️
                                </a>
                                <?php if (isAdmin()): ?>
                                <button class="btn-action btn-delete" onclick="confirmDelete(<?php echo $member['id']; ?>, '<?php echo htmlspecialchars($member['email'], ENT_QUOTES); ?>')" title="Delete Member">
                                    🗑️
                                </button>
                                <?php endif; ?>
                            </div>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div id="deleteModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <div class="modal-icon">⚠️</div>
            <h3 class="modal-title">Confirm Deletion</h3>
        </div>
        <div class="modal-body">
            <p>Are you sure you want to delete member <strong id="deleteMemberEmail"></strong>?</p>
            <p>This action cannot be undone and will permanently delete all member data.</p>
        </div>
        <div class="modal-actions">
            <button class="btn-modal btn-cancel" onclick="closeDeleteModal()">Cancel</button>
            <form method="POST" style="display: inline;">
                <input type="hidden" name="member_id" id="deleteMemberId" />
                <button type="submit" name="delete_member" class="btn-modal btn-confirm-delete">
                    Delete Member
                </button>
            </form>
        </div>
    </div>
</div>

<script>
// Auto-hide notifications
setTimeout(() => {
    const notifications = document.querySelectorAll('.notification');
    notifications.forEach(n => {
        n.style.animation = 'slideIn 0.3s ease reverse';
        setTimeout(() => n.remove(), 300);
    });
}, 5000);

// Search and Filter
const searchInput = document.getElementById('memberSearch');
const statusFilter = document.getElementById('statusFilter');
const verificationFilter = document.getElementById('verificationFilter');
const tableRows = document.querySelectorAll('#membersTable tbody tr[data-member-id]');

function filterTable() {
    const searchTerm = searchInput.value.toLowerCase();
    const statusValue = statusFilter.value;
    const verificationValue = verificationFilter.value;
    
    tableRows.forEach(row => {
        const memberId = row.dataset.memberId || '';
        const email = row.dataset.email || '';
        const postcode = row.dataset.postcode || '';
        const status = row.dataset.status || '';
        const verified = row.dataset.verified || '';
        
        const matchesSearch = !searchTerm || 
            memberId.includes(searchTerm) ||
            email.includes(searchTerm) || 
            postcode.includes(searchTerm);
        const matchesStatus = !statusValue || status === statusValue;
        const matchesVerification = !verificationValue || verified === verificationValue;
        
        if (matchesSearch && matchesStatus && matchesVerification) {
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    });
}

searchInput?.addEventListener('input', filterTable);
statusFilter?.addEventListener('change', filterTable);
verificationFilter?.addEventListener('change', filterTable);

// Delete Modal
function confirmDelete(memberId, memberEmail) {
    document.getElementById('deleteMemberId').value = memberId;
    document.getElementById('deleteMemberEmail').textContent = memberEmail;
    document.getElementById('deleteModal').classList.add('active');
}

function closeDeleteModal() {
    document.getElementById('deleteModal').classList.remove('active');
}

document.getElementById('deleteModal')?.addEventListener('click', function(e) {
    if (e.target === this) {
        closeDeleteModal();
    }
});

document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeDeleteModal();
    }
});

// Prevent navigation issues
window.addEventListener('pageshow', function(event) {
    if (event.persisted) {
        window.location.reload();
    }
});
</script>

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

FILE: README.md
TYPE: MD
SIZE: 8.86 KB
------------------------------------------------------------
# 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: robots.txt
TYPE: TXT
SIZE: 2.16 KB
------------------------------------------------------------
# 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: settings.php
TYPE: PHP
SIZE: 25.81 KB
------------------------------------------------------------
<?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: sitemap.xml
TYPE: XML
SIZE: 5.24 KB
------------------------------------------------------------
<?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: supply.php
TYPE: PHP
SIZE: 21.06 KB
------------------------------------------------------------
<?php
require_once 'config.php';
requireLogin();

// Fix navigation cache
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

$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'])) {
    
    // DELETE AFFILIATE
    if ($_POST['action'] === 'delete_affiliate' && isAdmin()) {
        $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());
}

// Calculate statistics
$total_affiliates = count($affiliates);
$active_affiliates = count(array_filter($affiliates, fn($a) => $a['status'] === 'active'));
$total_signups = array_sum(array_column($affiliates, 'total_signups'));
$verified_signups = array_sum(array_column($affiliates, 'total_verified_signups'));
$company_affiliates = count(array_filter($affiliates, fn($a) => $a['type'] === 'company'));
$individual_affiliates = count(array_filter($affiliates, fn($a) => $a['type'] === 'individual'));

include 'includes/header.php';
?>

<style>
.affiliates-container {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Statistics Cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 24px;
    color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.3s;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.stat-card:nth-child(2) {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.stat-card:nth-child(3) {
    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
}

.stat-card:nth-child(4) {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.stat-card:nth-child(5) {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.stat-card:nth-child(6) {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.stat-number {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.stat-label {
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    opacity: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Table Controls */
.table-controls {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

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

.search-box input {
    width: 100%;
    padding: 10px 16px 10px 40px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
}

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

.filter-group {
    display: flex;
    gap: 12px;
    align-items: center;
}

.filter-group select {
    padding: 10px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
    background: white;
}

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

/* Modern Table */
.modern-table-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
}

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

.modern-table thead {
    background: linear-gradient(to right, #f9fafb, #f3f4f6);
}

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

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

.modern-table tbody tr {
    transition: background 0.2s;
}

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

/* Affiliate Code */
.affiliate-code {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    color: #0066cc;
    font-size: 13px;
    background: #dbeafe;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* Status Badge */
.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-active {
    background: #d1fae5;
    color: #065f46;
}

.status-inactive {
    background: #fee2e2;
    color: #991b1b;
}

/* Type Badge */
.type-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.type-company {
    background: #dbeafe;
    color: #1e40af;
}

.type-individual {
    background: #fef3c7;
    color: #92400e;
}

/* Action Buttons */
.action-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 16px;
    text-decoration: none;
}

.btn-view {
    background: #dbeafe;
    color: #1e40af;
}

.btn-view:hover {
    background: #3b82f6;
    color: white;
    transform: scale(1.1);
}

.btn-edit {
    background: #fef3c7;
    color: #92400e;
}

.btn-edit:hover {
    background: #f59e0b;
    color: white;
    transform: scale(1.1);
}

.btn-delete {
    background: #fee2e2;
    color: #991b1b;
}

.btn-delete:hover {
    background: #dc2626;
    color: white;
    transform: scale(1.1);
}

/* Delete Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: white;
    border-radius: 12px;
    padding: 24px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid #e5e7eb;
}

.modal-header h2 {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-close {
    background: none;
    border: none;
    font-size: 28px;
    color: #9ca3af;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

.modal-close:hover {
    background: #f3f4f6;
    color: #374151;
}

/* Notification */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10000;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.notification-success {
    background: #d1fae5;
    color: #065f46;
    border-left: 4px solid #059669;
}

.notification-error {
    background: #fee2e2;
    color: #991b1b;
    border-left: 4px solid #dc2626;
}

/* Responsive */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .table-controls {
        flex-direction: column;
    }
    
    .search-box {
        width: 100%;
    }
    
    .modern-table-container {
        overflow-x: auto;
    }
    
    .modern-table {
        min-width: 1200px;
    }
}
</style>

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

    <div class="page-header">
        <div>
            <h1>Affiliate Management</h1>
            <p class="page-subtitle">Manage affiliate partners and track signups</p>
        </div>
        <div class="header-actions">
            <a href="affiliate_create.php" class="btn btn-primary">
                ➕ Add New Affiliate
            </a>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-number"><?php echo number_format($total_affiliates); ?></div>
            <div class="stat-label">Total Affiliates</div>
        </div>
        <div class="stat-card">
            <div class="stat-number"><?php echo number_format($active_affiliates); ?></div>
            <div class="stat-label">Active Affiliates</div>
        </div>
        <div class="stat-card">
            <div class="stat-number"><?php echo number_format($total_signups); ?></div>
            <div class="stat-label">Total Signups</div>
        </div>
        <div class="stat-card">
            <div class="stat-number"><?php echo number_format($verified_signups); ?></div>
            <div class="stat-label">Verified Signups</div>
        </div>
        <div class="stat-card">
            <div class="stat-number"><?php echo number_format($company_affiliates); ?></div>
            <div class="stat-label">Companies</div>
        </div>
        <div class="stat-card">
            <div class="stat-number"><?php echo number_format($individual_affiliates); ?></div>
            <div class="stat-label">Individuals</div>
        </div>
    </div>

    <!-- Table Controls -->
    <div class="table-controls">
        <div class="search-box">
            <input type="text" id="affiliateSearch" placeholder="Search by code, name, email, or location...">
        </div>
        <div class="filter-group">
            <select id="statusFilter">
                <option value="">All Status</option>
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
            </select>
            <select id="typeFilter">
                <option value="">All Types</option>
                <option value="company">Company</option>
                <option value="individual">Individual</option>
            </select>
        </div>
    </div>

    <!-- Affiliates Table -->
    <div class="modern-table-container">
        <table class="modern-table" id="affiliatesTable">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Affiliate Code</th>
                    <th>Company/Name</th>
                    <th>Type</th>
                    <th>In-charge</th>
                    <th>Location</th>
                    <th>Contact</th>
                    <th>Signups</th>
                    <th>Verified</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <?php if (empty($affiliates)): ?>
                    <tr>
                        <td colspan="11" 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 data-status="<?php echo strtolower($affiliate['status']); ?>"
                        data-type="<?php echo strtolower($affiliate['type']); ?>"
                        data-code="<?php echo strtolower($affiliate['affiliate_code']); ?>"
                        data-company="<?php echo strtolower($affiliate['company_name']); ?>"
                        data-email="<?php echo strtolower($affiliate['email']); ?>"
                        data-location="<?php echo strtolower($affiliate['place_name'] . ' ' . $affiliate['state']); ?>">
                        <td><strong>#<?php echo $affiliate['id']; ?></strong></td>
                        <td>
                            <span class="affiliate-code"><?php echo htmlspecialchars($affiliate['affiliate_code']); ?></span>
                        </td>
                        <td style="font-weight: 600; color: #111827;">
                            <?php echo htmlspecialchars($affiliate['company_name']); ?>
                        </td>
                        <td>
                            <span class="type-badge type-<?php echo strtolower($affiliate['type']); ?>">
                                <?php echo ucfirst($affiliate['type']); ?>
                            </span>
                        </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']); ?> - <?php echo htmlspecialchars($affiliate['postal_code']); ?></div>
                        </td>
                        <td>
                            <div style="font-size: 12px; color: #1f2937;"><?php echo htmlspecialchars($affiliate['mobile']); ?></div>
                            <div style="font-size: 11px; color: #6b7280;"><?php echo htmlspecialchars($affiliate['email']); ?></div>
                        </td>
                        <td style="text-align: center; font-weight: 700; color: #0066cc;">
                            <?php echo number_format($affiliate['total_signups'] ?? 0); ?>
                        </td>
                        <td style="text-align: center; font-weight: 700; color: #059669;">
                            <?php echo number_format($affiliate['total_verified_signups'] ?? 0); ?>
                        </td>
                        <td>
                            <span class="status-badge status-<?php echo strtolower($affiliate['status']); ?>">
                                <?php echo ucfirst($affiliate['status']); ?>
                            </span>
                        </td>
                        <td>
                            <div class="action-buttons">
                                <a href="affiliate_view.php?id=<?php echo $affiliate['id']; ?>" class="btn-action btn-view" title="View Details">👁️</a>
                                <a href="affiliate_edit.php?id=<?php echo $affiliate['id']; ?>" class="btn-action btn-edit" title="Edit">✏️</a>
                                <?php if (isAdmin()): ?>
                                <button class="btn-action btn-delete" onclick="confirmDelete(<?php echo $affiliate['id']; ?>, '<?php echo htmlspecialchars($affiliate['affiliate_code'], ENT_QUOTES); ?>')" title="Delete">🗑️</button>
                                <?php endif; ?>
                            </div>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<?php if (isAdmin()): ?>
<div id="deleteModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2>
                <span style="color: #dc2626;">⚠️</span>
                Confirm Deletion
            </h2>
            <button class="modal-close" onclick="closeDeleteModal()">&times;</button>
        </div>
        <div style="margin-bottom: 24px;">
            <p style="margin-bottom: 12px;">Are you sure you want to delete affiliate <strong id="deleteAffiliateCode"></strong>?</p>
            <p style="color: #6b7280; font-size: 14px;">This action cannot be undone and will delete all associated data including signups and attachments.</p>
        </div>
        <div style="display: flex; gap: 12px; justify-content: flex-end;">
            <button class="btn btn-secondary" onclick="closeDeleteModal()">Cancel</button>
            <form method="POST" style="display: inline;">
                <input type="hidden" name="action" value="delete_affiliate">
                <input type="hidden" name="affiliate_id" id="deleteAffiliateId">
                <button type="submit" class="btn" style="background: #dc2626; color: white;">
                    Delete Affiliate
                </button>
            </form>
        </div>
    </div>
</div>
<?php endif; ?>

<script>
// Auto-hide notifications
setTimeout(() => {
    const notifications = document.querySelectorAll('.notification');
    notifications.forEach(n => {
        n.style.animation = 'slideIn 0.3s ease reverse';
        setTimeout(() => n.remove(), 300);
    });
}, 5000);

// Search functionality
const searchInput = document.getElementById('affiliateSearch');
const statusFilter = document.getElementById('statusFilter');
const typeFilter = document.getElementById('typeFilter');
const tableRows = document.querySelectorAll('#affiliatesTable tbody tr[data-status]');

function filterTable() {
    const searchTerm = searchInput.value.toLowerCase();
    const statusValue = statusFilter.value.toLowerCase();
    const typeValue = typeFilter.value.toLowerCase();
    
    tableRows.forEach(row => {
        const status = row.dataset.status || '';
        const type = row.dataset.type || '';
        const code = row.dataset.code || '';
        const company = row.dataset.company || '';
        const email = row.dataset.email || '';
        const location = row.dataset.location || '';
        
        const matchesSearch = !searchTerm || 
                             code.includes(searchTerm) ||
                             company.includes(searchTerm) ||
                             email.includes(searchTerm) ||
                             location.includes(searchTerm);
        
        const matchesStatus = !statusValue || status === statusValue;
        const matchesType = !typeValue || type === typeValue;
        
        row.style.display = (matchesSearch && matchesStatus && matchesType) ? '' : 'none';
    });
}

searchInput?.addEventListener('input', filterTable);
statusFilter?.addEventListener('change', filterTable);
typeFilter?.addEventListener('change', filterTable);

// Delete Modal
function confirmDelete(affiliateId, affiliateCode) {
    document.getElementById('deleteAffiliateId').value = affiliateId;
    document.getElementById('deleteAffiliateCode').textContent = affiliateCode;
    document.getElementById('deleteModal').classList.add('active');
}

function closeDeleteModal() {
    document.getElementById('deleteModal').classList.remove('active');
}

// Close modal on escape key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeDeleteModal();
    }
});

// Close modal on background click
document.getElementById('deleteModal')?.addEventListener('click', function(e) {
    if (e.target === this) closeDeleteModal();
});

// Prevent cache issues
window.addEventListener('pageshow', function(event) {
    if (event.persisted) {
        window.location.reload();
    }
});
</script>

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

FILE: support.php
TYPE: PHP
SIZE: 12.32 KB
------------------------------------------------------------
<?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: users.php
TYPE: PHP
SIZE: 23.23 KB
------------------------------------------------------------
<?php
require_once 'config.php';
requireAdmin();

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

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

// Handle form submissions
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());
        }
    }
    
    if ($_POST['action'] === 'delete_user' && isAdmin()) {
        $user_id = intval($_POST['user_id'] ?? 0);
        
        if ($user_id > 0 && $user_id != $_SESSION['admin_id']) {
            try {
                $pdo = getDBConnection();
                
                // Get username for logging
                $stmt = $pdo->prepare("SELECT username FROM admin_users WHERE id = ?");
                $stmt->execute([$user_id]);
                $username = $stmt->fetchColumn();
                
                // Delete user
                $stmt = $pdo->prepare("DELETE FROM admin_users WHERE id = ?");
                $stmt->execute([$user_id]);
                
                logActivity($_SESSION['admin_id'], 'delete_admin_user', "Deleted admin user: $username", 'admin_user', $user_id);
                
                $success = 'Admin user deleted successfully!';
            } catch (Exception $e) {
                $error = 'An error occurred while deleting. Please try again.';
                error_log("Delete user error: " . $e->getMessage());
            }
        }
    }
}

// Fetch all users
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>
/* Modern Page Container */
.users-page-container {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Statistics Cards */
.users-stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stats-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 24px;
    color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.stats-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.stats-card:nth-child(2) {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.stats-card:nth-child(3) {
    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
}

.stats-card:nth-child(4) {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.stats-card-number {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 8px;
}

.stats-card-label {
    font-size: 14px;
    opacity: 0.9;
    font-weight: 500;
}

/* Table Controls */
.table-header-section {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.table-controls {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

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

.search-box input {
    width: 100%;
    padding: 10px 16px 10px 40px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
}

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

/* Modern Table */
.users-table-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
}

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

.users-table thead {
    background: linear-gradient(to right, #f9fafb, #f3f4f6);
}

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

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

.users-table tbody tr {
    transition: background 0.2s;
}

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

/* User Avatar Cell */
.user-avatar-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    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;
}

/* Status Badges */
.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-active {
    background: #d1fae5;
    color: #065f46;
}

.status-inactive {
    background: #fee2e2;
    color: #991b1b;
}

.role-admin {
    background: #dbeafe;
    color: #1e40af;
}

.role-manager {
    background: #fef3c7;
    color: #92400e;
}

/* Action Buttons */
.action-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 16px;
    text-decoration: none;
}

.btn-view {
    background: #dbeafe;
    color: #1e40af;
}

.btn-view:hover {
    background: #3b82f6;
    color: white;
    transform: scale(1.1);
}

.btn-edit {
    background: #fef3c7;
    color: #92400e;
}

.btn-edit:hover {
    background: #f59e0b;
    color: white;
    transform: scale(1.1);
}

.btn-delete {
    background: #fee2e2;
    color: #991b1b;
}

.btn-delete:hover {
    background: #dc2626;
    color: white;
    transform: scale(1.1);
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: white;
    border-radius: 12px;
    padding: 24px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid #e5e7eb;
}

.modal-header h2 {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    font-size: 28px;
    color: #9ca3af;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

.modal-close:hover {
    background: #f3f4f6;
    color: #374151;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
    font-family: inherit;
}

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

.form-help {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-top: 6px;
}

.form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 2px solid #e5e7eb;
}

/* Notification */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10000;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.notification-success {
    background: #d1fae5;
    color: #065f46;
    border-left: 4px solid #059669;
}

.notification-error {
    background: #fee2e2;
    color: #991b1b;
    border-left: 4px solid #dc2626;
}

/* Responsive */
@media (max-width: 768px) {
    .users-stats-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .table-controls {
        flex-direction: column;
    }
    
    .search-box {
        width: 100%;
    }
    
    .users-table-container {
        overflow-x: auto;
    }
    
    .users-table {
        min-width: 1000px;
    }
}
</style>

<div class="users-page-container">
    <?php if ($success): ?>
    <div class="notification notification-success">
        ✅ <?php echo htmlspecialchars($success); ?>
    </div>
    <?php endif; ?>
    
    <?php if ($error): ?>
    <div class="notification notification-error">
        ⚠️ <?php echo htmlspecialchars($error); ?>
    </div>
    <?php endif; ?>

    <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" onclick="openAddUserModal()">
                ➕ Add Admin User
            </button>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="users-stats-cards">
        <div class="stats-card">
            <div class="stats-card-number"><?php echo count($users); ?></div>
            <div class="stats-card-label">Total Users</div>
        </div>
        <div class="stats-card">
            <div class="stats-card-number"><?php echo count(array_filter($users, fn($u) => $u['status'] === 'active')); ?></div>
            <div class="stats-card-label">Active Users</div>
        </div>
        <div class="stats-card">
            <div class="stats-card-number"><?php echo count(array_filter($users, fn($u) => $u['role'] === 'admin')); ?></div>
            <div class="stats-card-label">Admins</div>
        </div>
        <div class="stats-card">
            <div class="stats-card-number"><?php echo count(array_filter($users, fn($u) => $u['role'] === 'manager')); ?></div>
            <div class="stats-card-label">Managers</div>
        </div>
    </div>

    <!-- Table Controls -->
    <div class="table-header-section">
        <div class="table-controls">
            <div class="search-box">
                <input type="text" id="userSearch" placeholder="Search by username, name, or email..." />
            </div>
        </div>
    </div>

    <!-- Users Table -->
    <div class="users-table-container">
        <table class="users-table" id="usersTable">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>User Details</th>
                    <th>Email</th>
                    <th>Role</th>
                    <th>Status</th>
                    <th>Last Login</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($users as $user): ?>
                <tr data-user-id="<?php echo $user['id']; ?>"
                    data-username="<?php echo strtolower($user['username']); ?>"
                    data-name="<?php echo strtolower($user['full_name']); ?>"
                    data-email="<?php echo strtolower($user['email']); ?>">
                    <td><strong>#<?php echo $user['id']; ?></strong></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="status-badge role-<?php echo strtolower($user['role']); ?>">
                            <?php echo ucfirst($user['role']); ?>
                        </span>
                    </td>
                    <td>
                        <span class="status-badge status-<?php echo strtolower($user['status']); ?>">
                            <?php echo ucfirst($user['status']); ?>
                        </span>
                    </td>
                    <td>
                        <?php if ($user['last_login']): ?>
                            <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>
                        <?php else: ?>
                            <span style="color: #9ca3af;">Never</span>
                        <?php endif; ?>
                    </td>
                    <td>
                        <?php if ($user['id'] != $_SESSION['admin_id']): ?>
                            <div class="action-buttons">
                                <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="btn-action btn-edit" title="<?php echo $user['status'] === 'active' ? 'Disable' : 'Enable'; ?>">
                                        <?php echo $user['status'] === 'active' ? '🔒' : '🔓'; ?>
                                    </button>
                                </form>
                                <?php if (isAdmin()): ?>
                                <button class="btn-action btn-delete" onclick="confirmDelete(<?php echo $user['id']; ?>, '<?php echo htmlspecialchars($user['username'], ENT_QUOTES); ?>')" title="Delete User">
                                    🗑️
                                </button>
                                <?php endif; ?>
                            </div>
                        <?php else: ?>
                            <span style="color: #9ca3af; font-size: 13px;">Current User</span>
                        <?php endif; ?>
                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>

<!-- Add User Modal -->
<div id="addUserModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2>Add Admin User</h2>
            <button class="modal-close" onclick="closeAddUserModal()">&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="closeAddUserModal()">Cancel</button>
                <button type="submit" class="btn btn-primary">Create User</button>
            </div>
        </form>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div id="deleteModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <div style="display: flex; align-items: center; gap: 12px;">
                <div style="width: 48px; height: 48px; background: #fee2e2; color: #dc2626; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px;">⚠️</div>
                <h2 style="margin: 0;">Confirm Deletion</h2>
            </div>
            <button class="modal-close" onclick="closeDeleteModal()">&times;</button>
        </div>
        <div style="margin-bottom: 24px;">
            <p>Are you sure you want to delete user <strong id="deleteUserName"></strong>?</p>
            <p style="color: #6b7280; font-size: 14px;">This action cannot be undone.</p>
        </div>
        <div style="display: flex; gap: 12px; justify-content: flex-end;">
            <button class="btn btn-secondary" onclick="closeDeleteModal()">Cancel</button>
            <form method="POST" style="display: inline;">
                <input type="hidden" name="action" value="delete_user">
                <input type="hidden" name="user_id" id="deleteUserId">
                <button type="submit" class="btn" style="background: #dc2626; color: white;">
                    Delete User
                </button>
            </form>
        </div>
    </div>
</div>

<script>
// Auto-hide notifications
setTimeout(() => {
    const notifications = document.querySelectorAll('.notification');
    notifications.forEach(n => {
        n.style.animation = 'slideIn 0.3s ease reverse';
        setTimeout(() => n.remove(), 300);
    });
}, 5000);

// Search functionality
const searchInput = document.getElementById('userSearch');
const tableRows = document.querySelectorAll('#usersTable tbody tr[data-user-id]');

searchInput?.addEventListener('input', function() {
    const searchTerm = this.value.toLowerCase();
    
    tableRows.forEach(row => {
        const username = row.dataset.username || '';
        const name = row.dataset.name || '';
        const email = row.dataset.email || '';
        const userId = row.dataset.userId || '';
        
        const matches = username.includes(searchTerm) ||
                       name.includes(searchTerm) ||
                       email.includes(searchTerm) ||
                       userId.includes(searchTerm);
        
        row.style.display = matches ? '' : 'none';
    });
});

// Add User Modal
function openAddUserModal() {
    document.getElementById('addUserModal').classList.add('active');
}

function closeAddUserModal() {
    document.getElementById('addUserModal').classList.remove('active');
}

// Delete Modal
function confirmDelete(userId, username) {
    document.getElementById('deleteUserId').value = userId;
    document.getElementById('deleteUserName').textContent = username;
    document.getElementById('deleteModal').classList.add('active');
}

function closeDeleteModal() {
    document.getElementById('deleteModal').classList.remove('active');
}

// Close modal on escape key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeAddUserModal();
        closeDeleteModal();
    }
});

// Close modal on background click
document.getElementById('addUserModal')?.addEventListener('click', function(e) {
    if (e.target === this) closeAddUserModal();
});

document.getElementById('deleteModal')?.addEventListener('click', function(e) {
    if (e.target === this) closeDeleteModal();
});

// Prevent cache issues
window.addEventListener('pageshow', function(event) {
    if (event.persisted) {
        window.location.reload();
    }
});
</script>

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

FILE: assets/css/dashboard.css
TYPE: CSS
SIZE: 28.46 KB
------------------------------------------------------------
/* 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: assets/css/main.css
TYPE: CSS
SIZE: 18.91 KB
------------------------------------------------------------
/* ===================================
   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: assets/css/member-enhancements.css
TYPE: CSS
SIZE: 9.12 KB
------------------------------------------------------------
/* MEMBER MANAGEMENT ENHANCEMENTS CSS
   Add this to your main.css or include separately
   Improves member_view.php and member_edit.php styling */

/* Navigation Fix - Add to all member pages */
.page-cache-control {
    /* Prevents caching issues with back button */
}

/* Enhanced Page Header */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 2px solid #e5e7eb;
}

.page-header h1 {
    font-size: 32px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px 0;
}

.page-subtitle {
    font-size: 16px;
    color: #6b7280;
    margin: 0;
}

.header-actions {
    display: flex;
    gap: 12px;
}

/* Enhanced Buttons */
.btn {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background: linear-gradient(135deg, #0066cc, #0052a3);
    color: white;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #0052a3, #004080);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,102,204,0.3);
}

.btn-secondary {
    background: #f3f4f6;
    color: #374151;
}

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

/* Statistics Cards - Member View */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.2s;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.stat-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 16px;
}

.stat-content h3 {
    font-size: 32px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px 0;
}

.stat-content p {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 8px 0;
}

.stat-meta {
    font-size: 12px;
    color: #9ca3af;
}

/* Enhanced Tab Navigation */
.settings-container {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    margin-top: 24px;
}

.settings-nav {
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    position: sticky;
    top: 24px;
    height: fit-content;
}

.settings-tabs {
    list-style: none;
    padding: 0;
    margin: 0;
}

.settings-tabs li {
    margin-bottom: 8px;
}

.tab-link {
    display: block;
    padding: 12px 16px;
    color: #6b7280;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s;
}

.tab-link:hover {
    background: #f3f4f6;
    color: #111827;
}

.tab-link.active {
    background: linear-gradient(135deg, #0066cc, #0052a3);
    color: white;
}

.settings-content {
    background: white;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.tab-content {
    display: none;
}

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

.settings-section {
    margin-bottom: 32px;
}

.settings-section h2 {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e5e7eb;
}

/* Enhanced Form Styling */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
    font-family: inherit;
}

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

.form-group input:disabled {
    background: #f9fafb;
    color: #9ca3af;
    cursor: not-allowed;
}

.form-help {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-top: 6px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.form-actions {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 2px solid #e5e7eb;
    display: flex;
    gap: 12px;
}

/* Info Display Styling */
.info-item {
    margin-bottom: 20px;
}

.info-item label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.info-item p {
    font-size: 16px;
    color: #111827;
    margin: 0;
}

/* Progress Bar */
.progress-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.progress-bar {
    flex: 1;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(to right, #0066cc, #0052a3);
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    min-width: 48px;
}

/* Transaction Item Styling */
.transactions-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.transaction-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    background: #f9fafb;
    border-left: 4px solid #e5e7eb;
}

.transaction-item.revenue {
    background: #ecfdf5;
    border-left-color: #059669;
}

.transaction-item.expense {
    background: #fef2f2;
    border-left-color: #dc2626;
}

.transaction-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border-radius: 50%;
    background: white;
}

.transaction-details {
    flex: 1;
}

.transaction-description {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
}

.transaction-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.transaction-date,
.transaction-category {
    font-size: 12px;
    color: #6b7280;
}

.transaction-amount {
    font-size: 18px;
    font-weight: 700;
}

.transaction-amount.positive {
    color: #059669;
}

.transaction-amount.negative {
    color: #dc2626;
}

/* Ticket Item Styling */
.tickets-container {
    display: grid;
    gap: 16px;
}

.ticket-item {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.2s;
}

.ticket-item:hover {
    border-color: #0066cc;
    box-shadow: 0 4px 12px rgba(0,102,204,0.1);
}

.ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.ticket-id {
    font-family: monospace;
    font-weight: 700;
    color: #6b7280;
    font-size: 14px;
}

.ticket-content h4 {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 12px 0;
}

.ticket-meta {
    display: flex;
    gap: 12px;
    align-items: center;
}

.priority-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.priority-low {
    background: #dbeafe;
    color: #1e40af;
}

.priority-medium {
    background: #fef3c7;
    color: #92400e;
}

.priority-high {
    background: #fee2e2;
    color: #991b1b;
}

.priority-critical {
    background: #7c3aed;
    color: white;
}

.ticket-date {
    font-size: 12px;
    color: #6b7280;
}

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

@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .transaction-item {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .header-actions {
        width: 100%;
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Back Button Prevention - Add this JavaScript */
/*
<script>
// Prevent cache on member pages
window.addEventListener('pageshow', function(event) {
    if (event.persisted) {
        window.location.reload();
    }
});

// Warn before leaving with unsaved changes
let formChanged = false;
document.querySelectorAll('form input, form select, form textarea').forEach(input => {
    input.addEventListener('change', () => formChanged = true);
});

window.addEventListener('beforeunload', (e) => {
    if (formChanged) {
        e.preventDefault();
        e.returnValue = '';
    }
});

// Reset flag on form submit
document.querySelectorAll('form').forEach(form => {
    form.addEventListener('submit', () => formChanged = false);
});
</script>
*/
-------------------- END OF FILE --------------------

FILE: assets/css/responsive.css
TYPE: CSS
SIZE: 18.5 KB
------------------------------------------------------------
/* 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: assets/images/logo.svg
TYPE: SVG
SIZE: 0 B
------------------------------------------------------------
[IMAGE FILE: SVG - Content not displayed]
-------------------- END OF FILE --------------------

FILE: assets/js/dashboard.js
TYPE: JS
SIZE: 26.43 KB
------------------------------------------------------------
// 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: assets/js/main.js
TYPE: JS
SIZE: 33.11 KB
------------------------------------------------------------
// 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: includes/footer.php
TYPE: PHP
SIZE: 3.91 KB
------------------------------------------------------------
</div>
    </div>
    
    <footer style="background: #1f2937; color: #9ca3af; padding: 40px 0; margin-top: 60px;">
        <div style="max-width: 1200px; margin: 0 auto; padding: 0 20px;">
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 30px;">
                <div>
                    <h4 style="color: #667eea; margin-bottom: 15px; font-size: 1.25rem;">Relevant Reflex</h4>
                    <p style="line-height: 1.6;">
                        Streamline your operations with our comprehensive platform designed for efficiency and growth.
                    </p>
                </div>
                
                <div>
                    <h4 style="color: white; margin-bottom: 15px;">Platform</h4>
                    <ul style="list-style: none; padding: 0;">
                        <li style="margin-bottom: 8px;"><a href="index.php" style="color: #9ca3af; text-decoration: none;">Dashboard Overview</a></li>
                        <li style="margin-bottom: 8px;"><a href="users.php" style="color: #9ca3af; text-decoration: none;">User Management</a></li>
                        <li style="margin-bottom: 8px;"><a href="panel.php" style="color: #9ca3af; text-decoration: none;">Panel Control</a></li>
                        <li style="margin-bottom: 8px;"><a href="supply.php" style="color: #9ca3af; text-decoration: none;">Supply Chain</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 style="color: white; margin-bottom: 15px;">Services</h4>
                    <ul style="list-style: none; padding: 0;">
                        <li style="margin-bottom: 8px;"><a href="demand.php" style="color: #9ca3af; text-decoration: none;">Demand Analytics</a></li>
                        <li style="margin-bottom: 8px;"><a href="finance.php" style="color: #9ca3af; text-decoration: none;">Financial Tools</a></li>
                        <li style="margin-bottom: 8px;"><a href="support.php" style="color: #9ca3af; text-decoration: none;">Support Center</a></li>
                        <li style="margin-bottom: 8px;"><a href="settings.php" style="color: #9ca3af; text-decoration: none;">System Settings</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 style="color: white; margin-bottom: 15px;">Connect</h4>
                    <div style="margin-bottom: 15px;">
                        <a href="#" style="color: #9ca3af; text-decoration: none; margin-right: 15px;">LinkedIn</a>
                        <a href="#" style="color: #9ca3af; text-decoration: none; margin-right: 15px;">Twitter</a>
                        <a href="#" style="color: #9ca3af; text-decoration: none; margin-right: 15px;">Contact</a>
                        <a href="#" style="color: #9ca3af; text-decoration: none;">Blog</a>
                    </div>
                    <div>
                        <p style="margin: 5px 0;"><strong style="color: white;">Email:</strong> info@relevantreflex.com</p>
                        <p style="margin: 5px 0;"><strong style="color: white;">Address:</strong> Business District, Global Office</p>
                    </div>
                </div>
            </div>
            
            <div style="border-top: 1px solid #374151; padding-top: 20px; text-align: center;">
                <p>&copy; <?php echo date('Y'); ?> Relevant Reflex. All rights reserved.</p>
                <p style="margin-top: 10px;">
                    <a href="#" style="color: #9ca3af; text-decoration: none; margin: 0 10px;">Privacy Policy</a> |
                    <a href="#" style="color: #9ca3af; text-decoration: none; margin: 0 10px;">Terms of Service</a> |
                    <a href="#" style="color: #9ca3af; text-decoration: none; margin: 0 10px;">Cookie Policy</a>
                </p>
            </div>
        </div>
    </footer>
</body>
</html>
-------------------- END OF FILE --------------------

FILE: includes/header.php
TYPE: PHP
SIZE: 8.57 KB
------------------------------------------------------------
<?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>
    
    <style>
    /* Enhanced Header Styling */
    .main-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        position: sticky;
        top: 0;
        z-index: 1000;
    }
    
    .navbar {
        padding: 0;
    }
    
    .nav-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 16px 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 24px;
    }
    
    .nav-brand {
        display: flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
        transition: transform 0.2s;
    }
    
    .nav-brand:hover {
        transform: scale(1.02);
    }
    
    .logo {
        width: 48px;
        height: 48px;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 700;
        font-size: 20px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    .brand-name {
        color: white;
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -0.5px;
        white-space: nowrap;
    }
    
    .nav-menu {
        display: flex;
        align-items: center;
        gap: 8px;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .nav-item {
        margin: 0;
    }
    
    .nav-link {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        color: rgba(255, 255, 255, 0.9);
        text-decoration: none;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.2s;
        white-space: nowrap;
    }
    
    .nav-link:hover {
        background: rgba(255, 255, 255, 0.15);
        color: white;
    }
    
    .nav-link.active {
        background: rgba(255, 255, 255, 0.25);
        color: white;
        font-weight: 600;
    }
    
    .nav-icon {
        font-size: 16px;
    }
    
    .user-menu {
        display: flex;
        align-items: center;
        gap: 16px;
    }
    
    .user-info {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 16px;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 8px;
        color: white;
    }
    
    .user-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: white;
        color: #667eea;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 14px;
    }
    
    .user-details {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    
    .user-name {
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
    }
    
    .user-role {
        font-size: 11px;
        opacity: 0.8;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .mobile-toggle {
        display: none;
        flex-direction: column;
        gap: 4px;
        background: rgba(255, 255, 255, 0.15);
        border: none;
        padding: 8px;
        border-radius: 6px;
        cursor: pointer;
    }
    
    .mobile-toggle span {
        width: 24px;
        height: 3px;
        background: white;
        border-radius: 2px;
        transition: all 0.2s;
    }
    
    .skip-link {
        position: absolute;
        top: -40px;
        left: 0;
        background: #000;
        color: #fff;
        padding: 8px;
        text-decoration: none;
        z-index: 100;
    }
    
    .skip-link:focus {
        top: 0;
    }
    
    /* Responsive */
    @media (max-width: 1024px) {
        .nav-menu {
            display: none;
            position: absolute;
            top: 80px;
            left: 0;
            right: 0;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            flex-direction: column;
            padding: 16px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }
        
        .nav-menu.active {
            display: flex;
        }
        
        .mobile-toggle {
            display: flex;
        }
        
        .user-details {
            display: none;
        }
    }
    
    @media (max-width: 768px) {
        .brand-name {
            font-size: 18px;
        }
        
        .logo {
            width: 40px;
            height: 40px;
            font-size: 16px;
        }
        
        .user-menu {
            gap: 8px;
        }
    }
    </style>
</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">
                <a href="index.php" class="nav-brand">
                    <div class="logo">RR</div>
                    <span class="brand-name">Relevant Reflex</span>
                </a>
                
                <button class="mobile-toggle" aria-label="Toggle navigation" aria-expanded="false" onclick="toggleMobileMenu()">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
                
                <?php include __DIR__ . '/navigation.php'; ?>
                
                <div class="user-menu">
                    <div class="user-info">
                        <div class="user-avatar">
                            <?php echo strtoupper(substr($_SESSION['admin_name'] ?? 'A', 0, 2)); ?>
                        </div>
                        <div class="user-details">
                            <span class="user-name"><?php echo htmlspecialchars($_SESSION['admin_name'] ?? 'Admin'); ?></span>
                            <span class="user-role"><?php echo htmlspecialchars($_SESSION['admin_role'] ?? 'User'); ?></span>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
    </header>
    <?php endif; ?>

    <main id="main-content" role="main">
    
    <script>
    function toggleMobileMenu() {
        const menu = document.querySelector('.nav-menu');
        const toggle = document.querySelector('.mobile-toggle');
        menu.classList.toggle('active');
        toggle.setAttribute('aria-expanded', menu.classList.contains('active'));
    }
    </script>
-------------------- END OF FILE --------------------

FILE: includes/navigation.php
TYPE: PHP
SIZE: 1.75 KB
------------------------------------------------------------
<?php
$current_page = basename($_SERVER['PHP_SELF'], '.php');
$nav_items = [
    'index' => ['label' => 'Dashboard', 'icon' => '📊', 'roles' => ['admin', 'manager']],
    'panel' => ['label' => 'Panel Members', 'icon' => '👥', 'roles' => ['admin', 'manager']],
    'users' => ['label' => 'Admin Users', 'icon' => '🔐', 'roles' => ['admin']],
    'supply' => ['label' => 'Affiliates', 'icon' => '📦', 'roles' => ['admin', 'manager']],
    'clients' => ['label' => 'Clients', 'icon' => '👤', 'roles' => ['admin', 'manager']],
    'finance' => ['label' => 'Finance', 'icon' => '💰', 'roles' => ['admin', 'manager']],
    'support' => ['label' => 'Support', 'icon' => '🛠️', 'roles' => ['admin', 'manager']],
    'settings' => ['label' => '', 'icon' => '⚙️', 'roles' => ['admin', 'manager'], 'icon_only' => true],
    'logout' => ['label' => 'Logout', 'icon' => '🚪', 'roles' => ['admin', 'manager']]
];

$userRole = $_SESSION['admin_role'] ?? 'guest';
?>

<ul class="nav-menu">
    <?php foreach ($nav_items as $page => $item): ?>
        <?php if (in_array($userRole, $item['roles'])): ?>
            <li class="nav-item">
                <a href="<?php echo $page; ?>.php" 
                   class="nav-link <?php echo $current_page === $page ? 'active' : ''; ?>"
                   <?php if (isset($item['icon_only']) && $item['icon_only']): ?>
                   title="<?php echo ucfirst($page); ?>"
                   <?php endif; ?>>
                    <span class="nav-icon"><?php echo $item['icon']; ?></span>
                    <?php if (!empty($item['label'])): ?>
                    <span><?php echo $item['label']; ?></span>
                    <?php endif; ?>
                </a>
            </li>
        <?php endif; ?>
    <?php endforeach; ?>
</ul>
-------------------- END OF FILE --------------------

FILE: uploads/clients/BD0B267D_1769743328_0.png
TYPE: PNG
SIZE: 151.42 KB
------------------------------------------------------------
[IMAGE FILE: PNG - Content not displayed]
-------------------- END OF FILE --------------------

FILE: uploads/clients/BD0B267D_1769770697_0.pdf
TYPE: PDF
SIZE: 358.78 KB
------------------------------------------------------------
[BINARY/UNKNOWN FILE: PDF - Content not displayed]
-------------------- END OF FILE --------------------

FILE: uploads/clients/EA89781D_1769740517_0.pdf
TYPE: PDF
SIZE: 358.78 KB
------------------------------------------------------------
[BINARY/UNKNOWN FILE: PDF - Content not displayed]
-------------------- END OF FILE --------------------