RSK World - News Summary Bot - Project Files Browser | RSK World - Free Programming Resources & Source Code

templates/admin/users.html

<!DOCTYPE html>
<html lang="en">
<!--
    Admin Users - News Summary Bot
    Developer: Molla Samser
    Design & Testing: Rima Khatun
    Company: RSK World
    Year: 2026
    Website: https://rskworld.in
-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Users - News Summary Bot</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <style>
        .users-container {
            background: var(--glass);
            backdrop-filter: blur(10px);
            border: 1px solid var(--glass-border);
            border-radius: 15px;
            padding: 2rem;
            margin-bottom: 2rem;
        }
        
        .users-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
        }
        
        .search-bar {
            display: flex;
            gap: 1rem;
            align-items: center;
        }
        
        .search-bar input {
            background: var(--glass);
            color: white;
            border: 1px solid var(--glass-border);
            padding: 0.5rem 1rem;
            border-radius: 8px;
            width: 300px;
        }
        
        .users-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 1rem;
        }
        
        .users-table th,
        .users-table td {
            padding: 1rem;
            text-align: left;
            border-bottom: 1px solid var(--glass-border);
        }
        
        .users-table th {
            background: rgba(255, 255, 255, 0.1);
            font-weight: 600;
        }
        
        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
        }
        
        .user-info {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .status-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
        }
        
        .status-active {
            background: rgba(40, 167, 69, 0.2);
            color: #28a745;
        }
        
        .status-inactive {
            background: rgba(220, 53, 69, 0.2);
            color: #dc3545;
        }
        
        .action-buttons {
            display: flex;
            gap: 0.5rem;
        }
        
        .btn-sm {
            padding: 0.25rem 0.5rem;
            font-size: 0.8rem;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .stat-card {
            background: var(--glass);
            backdrop-filter: blur(10px);
            border: 1px solid var(--glass-border);
            border-radius: 15px;
            padding: 1.5rem;
            text-align: center;
        }
        
        .stat-value {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }
        
        .stat-label {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <div class="admin-container">
        <aside class="sidebar">
            <div class="sidebar-header">
                <i class="fas fa-newspaper"></i>
                <h2>Admin Panel</h2>
            </div>
            
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="{{ url_for('admin.dashboard') }}" class="nav-link">
                        <i class="fas fa-tachometer-alt"></i>
                        Dashboard
                    </a>
                </li>
                <li class="nav-item">
                    <a href="{{ url_for('admin.analytics_page') }}" class="nav-link">
                        <i class="fas fa-chart-line"></i>
                        Analytics
                    </a>
                </li>
                <li class="nav-item">
                    <a href="{{ url_for('admin.users') }}" class="nav-link active">
                        <i class="fas fa-users"></i>
                        Users
                    </a>
                </li>
                <li class="nav-item">
                    <a href="{{ url_for('admin.content') }}" class="nav-link">
                        <i class="fas fa-newspaper"></i>
                        Content
                    </a>
                </li>
                <li class="nav-item">
                    <a href="{{ url_for('admin.settings') }}" class="nav-link">
                        <i class="fas fa-cog"></i>
                        Settings
                    </a>
                </li>
                <li class="nav-item">
                    <a href="{{ url_for('admin.logout') }}" class="nav-link">
                        <i class="fas fa-sign-out-alt"></i>
                        Logout
                    </a>
                </li>
            </ul>
        </aside>

        <main class="main-content">
            <div class="users-header">
                <h1>User Management</h1>
                <div class="search-bar">
                    <input type="text" placeholder="Search users..." id="userSearch">
                    <button class="btn btn-secondary">
                        <i class="fas fa-search"></i> Search
                    </button>
                    <button class="btn btn-primary">
                        <i class="fas fa-plus"></i> Add User
                    </button>
                </div>
            </div>

            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-value">{{ users|length }}</div>
                    <div class="stat-label">Total Users</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">{{ users|selectattr('last_active')|list|length }}</div>
                    <div class="stat-label">Active Users</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">{{ user_activity.values()|sum }}</div>
                    <div class="stat-label">Total Actions</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">{{ "%.1f"|format((user_activity.values()|sum) / users|length) }}</div>
                    <div class="stat-label">Avg Actions/User</div>
                </div>
            </div>

            <div class="users-container">
                <h3>User List</h3>
                <table class="users-table">
                    <thead>
                        <tr>
                            <th>User</th>
                            <th>Email</th>
                            <th>Joined</th>
                            <th>Last Active</th>
                            <th>Actions</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for user in users %}
                        <tr>
                            <td>
                                <div class="user-info">
                                    <div class="user-avatar">{{ user.name[0]|upper }}</div>
                                    <div>
                                        <div style="font-weight: 600;">{{ user.name }}</div>
                                        <div style="font-size: 0.8rem; opacity: 0.7;">ID: {{ user.id }}</div>
                                    </div>
                                </div>
                            </td>
                            <td>{{ user.email }}</td>
                            <td>{{ user.created_at }}</td>
                            <td>{{ user.last_active }}</td>
                            <td>{{ user.actions }}</td>
                            <td>
                                <span class="status-badge status-active">Active</span>
                            </td>
                            <td>
                                <div class="action-buttons">
                                    <button class="btn btn-secondary btn-sm">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="btn btn-secondary btn-sm">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="btn btn-secondary btn-sm">
                                        <i class="fas fa-ban"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <div class="users-container">
                <h3>User Activity Summary</h3>
                <table class="users-table">
                    <thead>
                        <tr>
                            <th>Action Type</th>
                            <th>Count</th>
                            <th>Percentage</th>
                            <th>Trend</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for action, count in user_activity.items() %}
                        <tr>
                            <td>{{ action.replace('_', ' ').title() }}</td>
                            <td>{{ count }}</td>
                            <td>{{ "%.1f"|format((count / user_activity.values() | sum) * 100) }}%</td>
                            <td>
                                <i class="fas fa-arrow-up" style="color: #28a745;"></i>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </main>
    </div>

    <script>
        // User search functionality
        document.getElementById('userSearch').addEventListener('input', function(e) {
            const searchTerm = e.target.value.toLowerCase();
            const rows = document.querySelectorAll('.users-table tbody tr');
            
            rows.forEach(row => {
                const text = row.textContent.toLowerCase();
                row.style.display = text.includes(searchTerm) ? '' : 'none';
            });
        });

        // Add user functionality
        document.querySelector('.btn-primary').addEventListener('click', function() {
            alert('Add user functionality would be implemented here');
        });

        // Action buttons functionality
        document.querySelectorAll('.action-buttons button').forEach(button => {
            button.addEventListener('click', function(e) {
                const icon = this.querySelector('i');
                if (icon.classList.contains('fa-eye')) {
                    alert('View user details');
                } else if (icon.classList.contains('fa-edit')) {
                    alert('Edit user');
                } else if (icon.classList.contains('fa-ban')) {
                    if (confirm('Are you sure you want to ban this user?')) {
                        alert('User banned');
                    }
                }
            });
        });
    </script>
</body>
</html>

337 lines•12.1 KB

markup

Theme Settings

Color Scheme

Display Options

Font Size

Theme Settings

Color Scheme

Display Options

Font Size

🚀 Support RSK World