Home
Alif Bima Pradana
SPMB Dashboard - New Student Admission System

SPMB Dashboard - New Student Admission System

modern, luxurious, and elegant admin website dashboard

This tailwind example is contributed by Alif Bima Pradana, on 09-Mar-2026. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Admin Dashboard, User dashboard

Dashboard

Author Alif Bima Pradana

Fork Fullscreen

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SPMB Dashboard - Sistem Penerimaan Murid Baru</title>
    
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
    
    
    <script src="https://cdn.tailwindcss.com"></script>
    
    
    <script src="https://code.iconify.design/iconify-icon/1.0.8/iconify-icon.min.js"></script>
    
    
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<style>
        :root {
            /* Primary Colors - STRICTLY SOLID, NO GRADIENTS */
            --primary: #190182;
            --primary-dark: #12015c;
            --primary-light: rgba(25, 1, 130, 0.08);
            
            /* Base Colors */
            --bg: #F8F9FA;
            --surface: #FFFFFF;
            
            /* Text Colors */
            --text-main: #212529;
            --text-secondary: #495057;
            --text-tertiary: #6C757D;
            
            /* Border */
            --border: #E9ECEF;
            --border-light: #F1F3F5;
            
            /* Status Colors */
            --success: #28A745;
            --success-light: rgba(40, 167, 69, 0.12);
            --danger: #DC3545;
            --danger-light: rgba(220, 53, 69, 0.12);
            --warning: #FFC107;
            --warning-dark: #D39E00; /* For better text readability */
            --warning-light: rgba(255, 193, 7, 0.15);
            --info: #17A2B8;
            --info-light: rgba(23, 162, 184, 0.12);
            --purple: #6F42C1;
            --purple-light: rgba(111, 66, 193, 0.12);
            
            /* Modern Soft Shadows */
            --shadow-sm: 0 2px 4px rgba(25, 1, 130, 0.02), 0 4px 12px rgba(25, 1, 130, 0.04);
            --shadow-md: 0 4px 12px rgba(25, 1, 130, 0.05), 0 12px 24px rgba(25, 1, 130, 0.08);
        }

/* Dark Mode Variables */
        .dark {
            --primary: #634bea; /* Lighter vivid blue for dark mode contrast */
            --primary-dark: #190182;
            --primary-light: rgba(99, 75, 234, 0.15);
            
            --bg: #121212;
            --surface: #1E1E1E;
            
            --text-main: #F8FAFC;
            --text-secondary: #CBD5E1;
            --text-tertiary: #94A3B8;
            
            --border: #334155;
            --border-light: #2A3645;

--warning-dark: #FFC107;
            
            --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
            --shadow-md: 0 10px 20px -5px rgba(0, 0, 0, 0.5);
        }

body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: var(--bg);
            color: var(--text-secondary);
            transition: background-color 0.3s, color 0.3s;
        }

.font-mono { font-family: 'JetBrains Mono', monospace; }

/* Typography Hierarchy */
        h1 { font-size: 1.875rem; font-weight: 700; color: var(--text-main); letter-spacing: -0.02em; }
        h2 { font-size: 1.5rem; font-weight: 700; color: var(--primary); letter-spacing: -0.01em; }
        h3 { font-size: 1.25rem; font-weight: 700; color: var(--text-main); }
        h4 { font-size: 1.125rem; font-weight: 600; color: var(--text-main); }
        .text-body { font-size: 0.9375rem; font-weight: 400; color: var(--text-secondary); line-height: 1.6; }
        .text-small { font-size: 0.8125rem; font-weight: 500; color: var(--text-tertiary); }
        .text-caption { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); }
        .text-data { font-size: 1.5rem; font-weight: 700; color: var(--text-main); font-family: 'JetBrains Mono', monospace; line-height: 1.2; }

/* Cards & Panels */
        .card-panel {
            background-color: var(--surface);
            border-radius: 16px;
            box-shadow: var(--shadow-sm);
            border: 1px solid var(--border-light);
            transition: box-shadow 0.3s ease, transform 0.3s ease;
        }
        .card-panel:hover {
            box-shadow: var(--shadow-md);
        }
        
        .stat-card {
            background-color: var(--surface);
            border-left: 4px solid var(--primary);
            border-radius: 12px;
            padding: 16px 20px;
            box-shadow: var(--shadow-sm);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 110px;
            border-right: 1px solid var(--border-light);
            border-top: 1px solid var(--border-light);
            border-bottom: 1px solid var(--border-light);
            transition: transform 0.2s;
        }
        .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
        
        /* Buttons - SOLID ONLY */
        .btn-primary {
            background-color: var(--primary);
            color: #FFFFFF;
            padding: 8px 18px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 0.875rem;
            transition: all 0.2s;
            border: none;
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
        }
        .btn-primary:hover { background-color: var(--primary-dark); transform: translateY(-1px); }
        
        .btn-outline {
            border: 1px solid var(--border);
            color: var(--text-main);
            background: var(--surface);
            padding: 8px 18px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 0.875rem;
            transition: all 0.2s;
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
        }
        .btn-outline:hover { background-color: var(--bg); border-color: var(--text-tertiary); }

.btn-icon {
            width: 36px; height: 36px;
            border-radius: 8px;
            display: inline-flex; justify-content: center; align-items: center;
            transition: all 0.2s;
            color: var(--text-tertiary);
            background: transparent;
        }
        .btn-icon:hover {
            background-color: var(--primary-light);
            color: var(--primary);
        }

/* Badges */
        .badge {
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 600;
            display: inline-flex; align-items: center; gap: 6px;
            letter-spacing: 0.02em;
        }
        .badge-success { background-color: var(--success-light); color: var(--success); }
        .badge-warning { background-color: var(--warning-light); color: var(--warning-dark); }
        .badge-danger { background-color: var(--danger-light); color: var(--danger); }
        .badge-info { background-color: var(--info-light); color: var(--info); }
        .badge-purple { background-color: var(--purple-light); color: var(--purple); }

/* Forms */
        .input-solid {
            background-color: var(--bg);
            border: 1px solid var(--border);
            color: var(--text-main);
            border-radius: 8px;
            padding: 10px 16px;
            width: 100%;
            font-size: 0.875rem;
            font-weight: 500;
            transition: all 0.2s;
        }
        .input-solid:focus {
            outline: none;
            border-color: var(--primary);
            background-color: var(--surface);
            box-shadow: 0 0 0 3px var(--primary-light);
        }

/* Tables (Elegant) */
        .table-custom { width: 100%; border-collapse: separate; border-spacing: 0; }
        .table-custom th {
            background-color: var(--bg);
            color: var(--text-tertiary);
            font-weight: 600;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding: 14px 20px;
            text-align: left;
            border-bottom: 1px solid var(--border);
        }
        .table-custom td {
            padding: 16px 20px;
            border-bottom: 1px solid var(--border-light);
            color: var(--text-secondary);
            font-size: 0.875rem;
            vertical-align: middle;
            transition: background-color 0.2s;
        }
        .table-custom tbody tr:hover td { background-color: var(--primary-light); }
        .table-custom tbody tr:last-child td { border-bottom: none; }

/* Sidebar Nav Item */
        .nav-item {
            display: flex; align-items: center; gap: 14px;
            padding: 12px 18px;
            color: var(--text-secondary);
            border-radius: 10px;
            margin-bottom: 4px;
            font-weight: 600;
            font-size: 0.9375rem;
            transition: all 0.2s;
            cursor: pointer;
        }
        .nav-item:hover { background-color: var(--primary-light); color: var(--primary); }
        .nav-item.active {
            background-color: var(--primary);
            color: #FFFFFF;
            box-shadow: 0 4px 12px var(--primary-light);
        }
        .nav-item.active iconify-icon { color: #FFFFFF; }
        .nav-item iconify-icon { font-size: 22px; transition: color 0.2s; }

/* Timeline */
        .timeline-item { position: relative; padding-left: 28px; padding-bottom: 20px; }
        .timeline-item::before {
            content: ''; position: absolute; left: 7px; top: 4px; bottom: 0;
            width: 2px; background-color: var(--border);
        }
        .timeline-item:last-child::before { display: none; }
        .timeline-dot {
            position: absolute; left: 0; top: 4px;
            width: 16px; height: 16px;
            border-radius: 50%;
            background-color: var(--primary);
            border: 3px solid var(--surface);
            z-index: 1;
        }

/* Utilities */
        .bg-surface { background-color: var(--surface); }
        .text-primary-custom { color: var(--primary); }
        .border-custom { border-color: var(--border); }
        
        /* Layout Transitions */
        #sidebar { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        .content-area { display: none; animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
        .content-area.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Custom Scrollbar */
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: var(--text-tertiary); border-radius: 10px; opacity: 0.5; }
        ::-webkit-scrollbar-thumb:hover { background: var(--primary); }
    </style>
</head>
<body class="overflow-hidden flex h-screen text-body">

<aside id="sidebar" class="w-[280px] bg-surface border-r border-custom flex flex-col h-full absolute z-30 md:relative transform -translate-x-full md:translate-x-0 shadow-lg md:shadow-none">
        
        <div class="h-[80px] flex items-center px-6 border-b border-custom shrink-0">
            <div class="flex items-center gap-3 text-primary-custom">
                <div class="w-10 h-10 rounded-xl bg-[var(--primary)] text-white flex items-center justify-center shadow-md">
                    <iconify-icon icon="solar:graduation-hat-bold-duotone" width="24"></iconify-icon>
                </div>
                <div>
                    <h2 class="text-[1.25rem] leading-tight m-0 tracking-tight text-main">SPMB</h2>
                    <span class="text-[0.65rem] font-bold text-[var(--text-tertiary)] uppercase tracking-widest block">Admin Portal</span>
                </div>
            </div>
            
            <button class="md:hidden ml-auto btn-icon text-main" onclick="toggleSidebar()">
                <iconify-icon icon="solar:close-circle-bold-duotone" width="24"></iconify-icon>
            </button>
        </div>

<div class="flex-1 overflow-y-auto py-6 px-4 flex flex-col gap-1">
            <div class="text-caption px-4 mb-3">Menu Utama</div>
            
            <a onclick="switchTab('dashboard')" class="nav-item active" id="nav-dashboard">
                <iconify-icon icon="solar:home-2-bold-duotone"></iconify-icon>
                <span>Dashboard Utama</span>
            </a>
            <a onclick="switchTab('pendaftar')" class="nav-item" id="nav-pendaftar">
                <iconify-icon icon="solar:users-group-bold-duotone"></iconify-icon>
                <span>Manajemen Pendaftar</span>
            </a>
            <a onclick="switchTab('verifikasi')" class="nav-item" id="nav-verifikasi">
                <iconify-icon icon="solar:file-check-bold-duotone"></iconify-icon>
                <span>Verifikasi Berkas</span>
            </a>
            <a class="nav-item opacity-70 hover:opacity-100">
                <iconify-icon icon="solar:calendar-bold-duotone"></iconify-icon>
                <span>Jadwal Ujian</span>
            </a>
            <a class="nav-item opacity-70 hover:opacity-100">
                <iconify-icon icon="solar:megaphone-bold-duotone"></iconify-icon>
                <span>Pengumuman</span>
            </a>
            <a class="nav-item opacity-70 hover:opacity-100">
                <iconify-icon icon="solar:building-bold-duotone"></iconify-icon>
                <span>Data Sekolah Asal</span>
            </a>

<div class="text-caption px-4 mb-3 mt-6">Sistem & Laporan</div>
            <a class="nav-item opacity-70 hover:opacity-100">
                <iconify-icon icon="solar:chart-2-bold-duotone"></iconify-icon>
                <span>Laporan & Statistik</span>
            </a>
            <a class="nav-item opacity-70 hover:opacity-100">
                <iconify-icon icon="solar:settings-bold-duotone"></iconify-icon>
                <span>Pengaturan</span>
            </a>
        </div>

<div class="p-5 border-t border-custom shrink-0 bg-[var(--bg)] m-4 rounded-xl">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-full flex items-center justify-center font-bold text-primary-custom border-2 border-surface shadow-sm" style="background-color: var(--primary-light);">
                    AD
                </div>
                <div class="flex-1 overflow-hidden">
                    <div class="text-sm font-bold truncate text-[var(--text-main)]">Admin Pusat</div>
                    <div class="text-xs font-medium text-[var(--text-tertiary)] truncate">Super Admin</div>
                </div>
                <button class="btn-icon text-danger hover:bg-danger-light w-8 h-8">
                    <iconify-icon icon="solar:logout-bold-duotone" width="20"></iconify-icon>
                </button>
            </div>
        </div>
    </aside>

<div id="mobile-overlay" class="fixed inset-0 bg-black bg-opacity-40 backdrop-blur-sm z-20 hidden md:hidden" onclick="toggleSidebar()"></div>

<main class="flex-1 flex flex-col min-w-0 bg-[var(--bg)]">
        
        
        <header class="h-[80px] bg-surface border-b border-custom flex items-center justify-between px-6 shrink-0 z-10 sticky top-0">
            <div class="flex items-center gap-4">
                <button class="btn-icon md:hidden text-[var(--text-main)]" onclick="toggleSidebar()">
                    <iconify-icon icon="solar:hamburger-menu-bold-duotone" width="26"></iconify-icon>
                </button>
                <div>
                    <h3 class="m-0 leading-tight hidden sm:block tracking-tight text-[var(--text-main)]" id="header-title">Dashboard Utama</h3>
                    <div class="text-xs font-semibold text-[var(--text-tertiary)] hidden sm:block mt-0.5 uppercase tracking-wide">Tahun Ajaran 2026/2027 • Gelombang 1</div>
                </div>
            </div>

<button class="btn-icon bg-[var(--bg)] rounded-full hover:bg-[var(--border)]" onclick="toggleTheme()" id="theme-toggle">
                    <iconify-icon icon="solar:moon-bold-duotone" width="22"></iconify-icon>
                </button>

<button class="btn-icon relative bg-[var(--bg)] rounded-full hover:bg-[var(--border)]">
                    <iconify-icon icon="solar:bell-bold-duotone" width="22" class="text-[var(--text-main)]"></iconify-icon>
                    <span class="absolute top-1 right-1 w-2.5 h-2.5 bg-[#DC3545] rounded-full border-2 border-surface"></span>
                </button>
            </div>
        </header>

<div class="flex-1 overflow-y-auto p-5 sm:p-8" id="main-scroll-area">
            
            
            
            
            <div id="view-dashboard" class="content-area active max-w-[1400px] mx-auto">
                
                
                <div class="mb-8 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                    <div>
                        <h1 class="m-0 flex items-center gap-2">Selamat Datang, Admin <iconify-icon icon="solar:hand-stars-bold-duotone" class="text-[#FFC107]"></iconify-icon></h1>
                        <p class="text-body mt-1 font-medium text-[var(--text-tertiary)]">Ringkasan pendaftaran siswa baru secara real-time.</p>
                    </div>
                    <button class="btn-primary shadow-sm">
                        <iconify-icon icon="solar:printer-bold-duotone" width="20"></iconify-icon> Cetak Ringkasan
                    </button>
                </div>

<div class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4 sm:gap-5 mb-8">
                    
                    
                    <div class="stat-card">
                        <div class="flex justify-between items-start mb-3">
                            <span class="text-caption">Total Pendaftar</span>
                            <div class="w-8 h-8 rounded-lg flex items-center justify-center bg-[var(--primary-light)] text-[var(--primary)]">
                                <iconify-icon icon="solar:users-group-bold-duotone" width="18"></iconify-icon>
                            </div>
                        </div>
                        <div>
                            <div class="text-data">1.245</div>
                            <div class="text-xs mt-1.5 flex items-center gap-1 text-[var(--success)] font-semibold">
                                <iconify-icon icon="solar:arrow-up-bold-duotone"></iconify-icon> +15% <span class="text-[var(--text-tertiary)] font-medium">vs thn lalu</span>
                            </div>
                        </div>
                    </div>

<div class="stat-card" style="border-left-color: var(--warning-dark);">
                        <div class="flex justify-between items-start mb-3">
                            <span class="text-caption">Verifikasi</span>
                            <div class="w-8 h-8 rounded-lg flex items-center justify-center bg-[var(--warning-light)] text-[var(--warning-dark)]">
                                <iconify-icon icon="solar:file-check-bold-duotone" width="18"></iconify-icon>
                            </div>
                        </div>
                        <div>
                            <div class="text-data text-[var(--warning-dark)]">890</div>
                            <div class="text-xs mt-1.5 flex items-center gap-1 text-[var(--text-tertiary)] font-medium">
                                <span class="text-[var(--text-main)] font-semibold">71%</span> selesai
                            </div>
                        </div>
                    </div>

<div class="stat-card" style="border-left-color: var(--info);">
                        <div class="flex justify-between items-start mb-3">
                            <span class="text-caption">Lolos Admin</span>
                            <div class="w-8 h-8 rounded-lg flex items-center justify-center bg-[var(--info-light)] text-[var(--info)]">
                                <iconify-icon icon="solar:clipboard-check-bold-duotone" width="18"></iconify-icon>
                            </div>
                        </div>
                        <div>
                            <div class="text-data text-[var(--info)]">780</div>
                            <div class="text-xs mt-1.5 flex items-center gap-1 text-[var(--text-tertiary)] font-medium">
                                Siap ujian
                            </div>
                        </div>
                    </div>
                    
                    
                    <div class="stat-card" style="border-left-color: var(--text-secondary);">
                        <div class="flex justify-between items-start mb-3">
                            <span class="text-caption">Terjadwal</span>
                            <div class="w-8 h-8 rounded-lg flex items-center justify-center bg-[var(--bg)] text-[var(--text-secondary)]">
                                <iconify-icon icon="solar:calendar-bold-duotone" width="18"></iconify-icon>
                            </div>
                        </div>
                        <div>
                            <div class="text-data text-[var(--text-main)]">520</div>
                            <div class="text-xs mt-1.5 flex items-center gap-1 text-[var(--text-tertiary)] font-medium">
                                Menunggu ujian
                            </div>
                        </div>
                    </div>

<div class="stat-card" style="border-left-color: var(--success);">
                        <div class="flex justify-between items-start mb-3">
                            <span class="text-caption">Diterima</span>
                            <div class="w-8 h-8 rounded-lg flex items-center justify-center bg-[var(--success-light)] text-[var(--success)]">
                                <iconify-icon icon="solar:check-circle-bold-duotone" width="18"></iconify-icon>
                            </div>
                        </div>
                        <div>
                            <div class="text-data text-[var(--success)]">320</div>
                            <div class="text-xs mt-1.5 flex items-center gap-1 text-[var(--text-tertiary)] font-medium">
                                <span class="text-[var(--success)] font-semibold">41%</span> kelulusan
                            </div>
                        </div>
                    </div>

<div class="stat-card" style="border-left-color: var(--purple);">
                        <div class="flex justify-between items-start mb-3">
                            <span class="text-caption">Daftar Ulang</span>
                            <div class="w-8 h-8 rounded-lg flex items-center justify-center bg-[var(--purple-light)] text-[var(--purple)]">
                                <iconify-icon icon="solar:user-check-bold-duotone" width="18"></iconify-icon>
                            </div>
                        </div>
                        <div>
                            <div class="text-data text-[var(--purple)]">280</div>
                            <div class="mt-2 w-full bg-[var(--border)] h-1.5 rounded-full overflow-hidden">
                                <div class="bg-[var(--purple)] h-full rounded-full" style="width: 87%"></div>
                            </div>
                        </div>
                    </div>

</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
                    
                    <div class="card-panel p-6 lg:col-span-2 flex flex-col">
                        <div class="flex justify-between items-center mb-6">
                            <div>
                                <h4 class="m-0 text-[1.125rem]">Tren Pendaftaran</h4>
                                <span class="text-sm text-[var(--text-tertiary)]">30 Hari Terakhir</span>
                            </div>
                            <select class="input-solid w-auto py-1.5 px-3 text-sm font-semibold cursor-pointer rounded-lg bg-[var(--surface)] border-[var(--border)]">
                                <option>Gelombang 1</option>
                                <option>Gelombang 2</option>
                            </select>
                        </div>
                        <div class="flex-1 relative min-h-[260px] w-full">
                            <canvas id="chartTren"></canvas>
                        </div>
                    </div>
                    
                    
                    <div class="card-panel p-6 flex flex-col">
                        <div class="mb-4">
                            <h4 class="m-0 text-[1.125rem]">Distribusi Kelulusan</h4>
                            <span class="text-sm text-[var(--text-tertiary)]">Berdasarkan hasil seleksi</span>
                        </div>
                        <div class="flex-1 relative flex justify-center items-center min-h-[220px]">
                            <canvas id="chartStatus"></canvas>
                        </div>
                        <div class="mt-6 flex justify-center gap-5 text-sm font-semibold text-[var(--text-main)]">
                            <div class="flex items-center gap-2"><span class="w-3 h-3 rounded-md bg-[var(--success)]"></span> Diterima</div>
                            <div class="flex items-center gap-2"><span class="w-3 h-3 rounded-md bg-[var(--purple)]"></span> Cadangan</div>
                            <div class="flex items-center gap-2"><span class="w-3 h-3 rounded-md bg-[var(--danger)]"></span> Ditolak</div>
                        </div>
                    </div>
                </div>

<div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
                    
                    <div class="card-panel overflow-hidden xl:col-span-2">
                        <div class="p-5 border-b border-[var(--border-light)] flex justify-between items-center bg-[var(--surface)]">
                            <h4 class="m-0 text-[1.125rem]">Pendaftar Terbaru</h4>
                            <a href="#" onclick="switchTab('pendaftar')" class="text-sm text-[var(--primary)] font-bold hover:underline">Lihat Semua</a>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="table-custom text-sm w-full">
                                <thead>
                                    <tr>
                                        <th>Pendaftar</th>
                                        <th>Jalur</th>
                                        <th>Status Verifikasi</th>
                                        <th class="text-right">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <div class="flex items-center gap-4">
                                                <div class="w-10 h-10 rounded-full bg-[var(--primary-light)] text-[var(--primary)] flex items-center justify-center font-bold text-sm border border-[var(--primary-light)]">AB</div>
                                                <div>
                                                    <div class="font-bold text-[var(--text-main)]">Ananda Budi Santoso</div>
                                                    <div class="text-xs text-[var(--text-tertiary)] font-mono mt-0.5">REG-26001</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="font-medium">Reguler</td>
                                        <td><span class="badge badge-warning"><iconify-icon icon="solar:clock-circle-bold-duotone"></iconify-icon> Menunggu</span></td>
                                        <td class="text-right">
                                            <button class="btn-icon border border-[var(--border)] hover:border-[var(--primary)]" title="Lihat Detail"><iconify-icon icon="solar:eye-bold-duotone" width="18"></iconify-icon></button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="flex items-center gap-4">
                                                <div class="w-10 h-10 rounded-full bg-[var(--success-light)] text-[var(--success)] flex items-center justify-center font-bold text-sm border border-[var(--success-light)]">SA</div>
                                                <div>
                                                    <div class="font-bold text-[var(--text-main)]">Siti Aminah</div>
                                                    <div class="text-xs text-[var(--text-tertiary)] font-mono mt-0.5">PRS-26002</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="font-medium">Prestasi</td>
                                        <td><span class="badge badge-success"><iconify-icon icon="solar:check-circle-bold-duotone"></iconify-icon> Lolos</span></td>
                                        <td class="text-right">
                                            <button class="btn-icon border border-[var(--border)] hover:border-[var(--primary)]" title="Lihat Detail"><iconify-icon icon="solar:eye-bold-duotone" width="18"></iconify-icon></button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="flex items-center gap-4">
                                                <div class="w-10 h-10 rounded-full bg-[var(--info-light)] text-[var(--info)] flex items-center justify-center font-bold text-sm border border-[var(--info-light)]">RA</div>
                                                <div>
                                                    <div class="font-bold text-[var(--text-main)]">Rizky Aditya</div>
                                                    <div class="text-xs text-[var(--text-tertiary)] font-mono mt-0.5">AFR-26003</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="font-medium">Afirmasi</td>
                                        <td><span class="badge badge-success"><iconify-icon icon="solar:check-circle-bold-duotone"></iconify-icon> Lolos</span></td>
                                        <td class="text-right">
                                            <button class="btn-icon border border-[var(--border)] hover:border-[var(--primary)]" title="Lihat Detail"><iconify-icon icon="solar:eye-bold-duotone" width="18"></iconify-icon></button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="flex items-center gap-4">
                                                <div class="w-10 h-10 rounded-full bg-[var(--danger-light)] text-[var(--danger)] flex items-center justify-center font-bold text-sm border border-[var(--danger-light)]">NK</div>
                                                <div>
                                                    <div class="font-bold text-[var(--text-main)]">Nadia Kusuma</div>
                                                    <div class="text-xs text-[var(--text-tertiary)] font-mono mt-0.5">REG-26004</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="font-medium">Reguler</td>
                                        <td><span class="badge badge-danger"><iconify-icon icon="solar:close-circle-bold-duotone"></iconify-icon> Tidak Lolos</span></td>
                                        <td class="text-right">
                                            <button class="btn-icon border border-[var(--border)] hover:border-[var(--primary)]" title="Lihat Detail"><iconify-icon icon="solar:eye-bold-duotone" width="18"></iconify-icon></button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

<div class="card-panel p-6">
                        <h4 class="m-0 text-[1.125rem] mb-6">Aktivitas Terkini</h4>
                        <div class="mt-2 ml-1">
                            <div class="timeline-item">
                                <div class="timeline-dot shadow-sm"></div>
                                <div class="text-sm font-bold text-[var(--text-main)]">Pendaftaran Baru</div>
                                <div class="text-[0.8125rem] text-[var(--text-tertiary)] mt-1">Ananda Budi Santoso melakukan pendaftaran via online.</div>
                                <div class="text-xs text-[var(--text-tertiary)] mt-2 font-mono font-medium opacity-80"><iconify-icon icon="solar:clock-circle-bold-duotone" class="align-text-bottom"></iconify-icon> 5 mnt lalu</div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-dot bg-[var(--success)] shadow-sm"></div>
                                <div class="text-sm font-bold text-[var(--text-main)]">Verifikasi Selesai</div>
                                <div class="text-[0.8125rem] text-[var(--text-tertiary)] mt-1">Berkas Siti Aminah diverifikasi oleh Admin.</div>
                                <div class="text-xs text-[var(--text-tertiary)] mt-2 font-mono font-medium opacity-80"><iconify-icon icon="solar:clock-circle-bold-duotone" class="align-text-bottom"></iconify-icon> 15 mnt lalu</div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-dot bg-[var(--warning-dark)] shadow-sm"></div>
                                <div class="text-sm font-bold text-[var(--text-main)]">Jadwal Diubah</div>
                                <div class="text-[0.8125rem] text-[var(--text-tertiary)] mt-1">Jadwal ujian Ani Lestari dipindah ke Ruang 2.</div>
                                <div class="text-xs text-[var(--text-tertiary)] mt-2 font-mono font-medium opacity-80"><iconify-icon icon="solar:clock-circle-bold-duotone" class="align-text-bottom"></iconify-icon> 1 jam lalu</div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-dot bg-[var(--purple)] shadow-sm"></div>
                                <div class="text-sm font-bold text-[var(--text-main)]">Pengumuman</div>
                                <div class="text-[0.8125rem] text-[var(--text-tertiary)] mt-1">Hasil seleksi gelombang 1 diterbitkan.</div>
                                <div class="text-xs text-[var(--text-tertiary)] mt-2 font-mono font-medium opacity-80"><iconify-icon icon="solar:clock-circle-bold-duotone" class="align-text-bottom"></iconify-icon> 3 jam lalu</div>
                            </div>
                        </div>
                    </div>
                </div>

</div>

<div id="view-pendaftar" class="content-area max-w-[1400px] mx-auto">
                <div class="mb-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                    <div>
                        <h1 class="m-0 text-[1.5rem]">Data Pendaftar</h1>
                        <p class="text-body mt-1 font-medium text-[var(--text-tertiary)]">Kelola seluruh data calon siswa dan statusnya.</p>
                    </div>
                    <button class="btn-primary flex items-center gap-2 shadow-sm">
                        <iconify-icon icon="solar:user-plus-bold-duotone" width="20"></iconify-icon> Tambah Manual
                    </button>
                </div>

<div class="card-panel overflow-hidden flex flex-col shadow-sm" style="min-height: 600px;">
                    
                    <div class="p-5 border-b border-[var(--border-light)] bg-[var(--bg)] flex flex-wrap gap-4 items-center">
                        <div class="relative flex-1 min-w-[250px]">
                            <iconify-icon icon="solar:magnifier-linear" class="absolute left-4 top-1/2 transform -translate-y-1/2 text-[var(--text-tertiary)]" width="20"></iconify-icon>
                            <input type="text" placeholder="Cari nama, No. Daftar, NISN..." class="input-solid pl-12 bg-[var(--surface)] border-[var(--border)] rounded-xl py-2.5">
                        </div>
                        <select class="input-solid w-auto min-w-[150px] bg-[var(--surface)] rounded-xl py-2.5">
                            <option value="">Semua Jalur</option>
                            <option value="reguler">Reguler</option>
                            <option value="prestasi">Prestasi</option>
                            <option value="afirmasi">Afirmasi</option>
                        </select>
                        <select class="input-solid w-auto min-w-[160px] bg-[var(--surface)] rounded-xl py-2.5">
                            <option value="">Status Berkas</option>
                            <option value="menunggu">Menunggu</option>
                            <option value="lolos">Lolos Verifikasi</option>
                            <option value="tolak">Tidak Lolos</option>
                        </select>
                        <button class="btn-outline flex items-center gap-2 rounded-xl py-2.5 border-[var(--border)] hover:bg-[var(--primary-light)] hover:border-[var(--primary)] hover:text-[var(--primary)]">
                            <iconify-icon icon="solar:filter-bold-duotone" width="20"></iconify-icon> Filter
                        </button>
                    </div>

<div class="flex-1 overflow-x-auto">
                        <table class="table-custom whitespace-nowrap min-w-[1000px]">
                            <thead>
                                <tr>
                                    <th class="w-12 text-center pl-6"><input type="checkbox" class="accent-[var(--primary)] w-4 h-4 rounded cursor-pointer"></th>
                                    <th>Pendaftar</th>
                                    <th>Jalur & Sekolah Asal</th>
                                    <th>Status Berkas</th>
                                    <th>Kelulusan</th>
                                    <th class="text-center pr-6">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                
                                <tr>
                                    <td class="text-center pl-6"><input type="checkbox" class="accent-[var(--primary)] w-4 h-4 rounded cursor-pointer"></td>
                                    <td>
                                        <div class="flex items-center gap-4">
                                            <div class="w-10 h-10 rounded-full bg-[var(--primary-light)] text-[var(--primary)] flex items-center justify-center font-bold text-sm">AB</div>
                                            <div>
                                                <div class="font-bold text-[var(--text-main)]">Ananda Budi Santoso</div>
                                                <div class="text-xs text-[var(--text-tertiary)] font-mono mt-0.5 tracking-wide">REG-26001</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="font-semibold text-[var(--text-main)]">Reguler</div>
                                        <div class="text-xs text-[var(--text-tertiary)] mt-0.5">SMP Negeri 1 Jakarta</div>
                                    </td>
                                    <td><span class="badge badge-warning"><iconify-icon icon="solar:clock-circle-bold-duotone"></iconify-icon> Menunggu</span></td>
                                    <td><span class="badge" style="background:var(--border-light); color:var(--text-tertiary);"><iconify-icon icon="solar:info-circle-bold-duotone"></iconify-icon> Belum Ujian</span></td>
                                    <td class="text-center pr-6">
                                        <div class="flex items-center justify-center gap-2">
                                            <button class="btn-icon bg-[var(--primary-light)] text-[var(--primary)] hover:bg-[var(--primary)] hover:text-white" title="Lihat/Edit"><iconify-icon icon="solar:pen-bold-duotone" width="18"></iconify-icon></button>
                                            <button class="btn-icon bg-[var(--info-light)] text-[var(--info)] hover:bg-[var(--info)] hover:text-white" title="Cetak Kartu"><iconify-icon icon="solar:printer-bold-duotone" width="18"></iconify-icon></button>
                                        </div>
                                    </td>
                                </tr>
                                
                                <tr>
                                    <td class="text-center pl-6"><input type="checkbox" class="accent-[var(--primary)] w-4 h-4 rounded cursor-pointer"></td>
                                    <td>
                                        <div class="flex items-center gap-4">
                                            <div class="w-10 h-10 rounded-full bg-[var(--success-light)] text-[var(--success)] flex items-center justify-center font-bold text-sm">SA</div>
                                            <div>
                                                <div class="font-bold text-[var(--text-main)]">Siti Aminah</div>
                                                <div class="text-xs text-[var(--text-tertiary)] font-mono mt-0.5 tracking-wide">PRS-26002</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="font-semibold text-[var(--text-main)]">Prestasi</div>
                                        <div class="text-xs text-[var(--text-tertiary)] mt-0.5">SMP IT Al-Hikmah</div>
                                    </td>
                                    <td><span class="badge badge-success"><iconify-icon icon="solar:check-circle-bold-duotone"></iconify-icon> Lolos</span></td>
                                    <td><span class="badge badge-success"><iconify-icon icon="solar:star-circle-bold-duotone"></iconify-icon> Diterima</span></td>
                                    <td class="text-center pr-6">
                                        <div class="flex items-center justify-center gap-2">
                                            <button class="btn-icon bg-[var(--primary-light)] text-[var(--primary)] hover:bg-[var(--primary)] hover:text-white" title="Lihat/Edit"><iconify-icon icon="solar:pen-bold-duotone" width="18"></iconify-icon></button>
                                            <button class="btn-icon bg-[var(--success-light)] text-[var(--success)] hover:bg-[var(--success)] hover:text-white" title="Cetak Surat"><iconify-icon icon="solar:document-bold-duotone" width="18"></iconify-icon></button>
                                        </div>
                                    </td>
                                </tr>
                                
                                <tr>
                                    <td class="text-center pl-6"><input type="checkbox" class="accent-[var(--primary)] w-4 h-4 rounded cursor-pointer"></td>
                                    <td>
                                        <div class="flex items-center gap-4">
                                            <div class="w-10 h-10 rounded-full bg-[var(--info-light)] text-[var(--info)] flex items-center justify-center font-bold text-sm">RA</div>
                                            <div>
                                                <div class="font-bold text-[var(--text-main)]">Rizky Aditya</div>
                                                <div class="text-xs text-[var(--text-tertiary)] font-mono mt-0.5 tracking-wide">AFR-26003</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="font-semibold text-[var(--text-main)]">Afirmasi</div>
                                        <div class="text-xs text-[var(--text-tertiary)] mt-0.5">SMP PGRI 5</div>
                                    </td>
                                    <td><span class="badge badge-success"><iconify-icon icon="solar:check-circle-bold-duotone"></iconify-icon> Lolos</span></td>
                                    <td><span class="badge badge-purple"><iconify-icon icon="solar:info-circle-bold-duotone"></iconify-icon> Cadangan</span></td>
                                    <td class="text-center pr-6">
                                        <div class="flex items-center justify-center gap-2">
                                            <button class="btn-icon bg-[var(--primary-light)] text-[var(--primary)] hover:bg-[var(--primary)] hover:text-white" title="Lihat/Edit"><iconify-icon icon="solar:pen-bold-duotone" width="18"></iconify-icon></button>
                                        </div>
                                    </td>
                                </tr>
                                
                                <tr>
                                    <td class="text-center pl-6"><input type="checkbox" class="accent-[var(--primary)] w-4 h-4 rounded cursor-pointer"></td>
                                    <td>
                                        <div class="flex items-center gap-4">
                                            <div class="w-10 h-10 rounded-full bg-[var(--danger-light)] text-[var(--danger)] flex items-center justify-center font-bold text-sm">NK</div>
                                            <div>
                                                <div class="font-bold text-[var(--text-main)]">Nadia Kusuma</div>
                                                <div class="text-xs text-[var(--text-tertiary)] font-mono mt-0.5 tracking-wide">REG-26004</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="font-semibold text-[var(--text-main)]">Reguler</div>
                                        <div class="text-xs text-[var(--text-tertiary)] mt-0.5">SMP Tunas Bangsa</div>
                                    </td>
                                    <td><span class="badge badge-danger"><iconify-icon icon="solar:close-circle-bold-duotone"></iconify-icon> Tidak Lolos</span></td>
                                    <td><span class="badge badge-danger"><iconify-icon icon="solar:close-circle-bold-duotone"></iconify-icon> Tidak Lulus</span></td>
                                    <td class="text-center pr-6">
                                        <div class="flex items-center justify-center gap-2">
                                            <button class="btn-icon bg-[var(--primary-light)] text-[var(--primary)] hover:bg-[var(--primary)] hover:text-white" title="Lihat/Edit"><iconify-icon icon="solar:pen-bold-duotone" width="18"></iconify-icon></button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

<div class="p-5 border-t border-[var(--border-light)] flex justify-between items-center bg-[var(--surface)]">
                        <div class="text-sm font-medium text-[var(--text-tertiary)]">Menampilkan 1-10 dari 1.245 data</div>
                        <div class="flex gap-2">
                            <button class="btn-outline px-3 py-1.5 text-sm border-transparent hover:bg-[var(--border-light)]" disabled>&laquo; Prev</button>
                            <button class="btn-primary px-3.5 py-1.5 text-sm shadow-md">1</button>
                            <button class="btn-outline px-3.5 py-1.5 text-sm border-transparent hover:bg-[var(--border-light)] font-medium">2</button>
                            <button class="btn-outline px-3.5 py-1.5 text-sm border-transparent hover:bg-[var(--border-light)] font-medium">3</button>
                            <button class="btn-outline px-3 py-1.5 text-sm border-transparent hover:bg-[var(--border-light)] font-medium">Next &raquo;</button>
                        </div>
                    </div>
                </div>
            </div>

<div id="view-verifikasi" class="content-area max-w-[1400px] mx-auto">
                <div class="mb-6">
                    <h1 class="m-0 text-[1.5rem]">Verifikasi Berkas</h1>
                    <p class="text-body mt-1 font-medium text-[var(--text-tertiary)]">Antarmuka khusus untuk memeriksa validitas dokumen.</p>
                </div>
                <div class="card-panel p-10 text-center flex flex-col items-center justify-center min-h-[500px]">
                    <div class="w-20 h-20 rounded-full bg-[var(--primary-light)] text-[var(--primary)] flex items-center justify-center mb-5">
                        <iconify-icon icon="solar:file-check-bold-duotone" width="40"></iconify-icon>
                    </div>
                    <h3 class="mb-2 text-[var(--text-main)]">Modul Siap Digunakan</h3>
                    <p class="text-sm text-[var(--text-tertiary)] max-w-md mx-auto leading-relaxed">Pilih menu Manajemen Pendaftar untuk melihat fungsi tabel, atau kembali ke Dashboard untuk melihat statistik.</p>
                    <button class="btn-primary mt-6 px-6" onclick="switchTab('dashboard')">Kembali ke Dashboard</button>
                </div>
            </div>

</div> 
    </main>

<script>
        // --- 1. Theming (Dark/Light Mode) ---
        const themeToggleBtn = document.getElementById('theme-toggle');
        const rootHtml = document.documentElement;
        
        // Auto-detect preference or local storage
        if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            rootHtml.classList.add('dark');
            updateThemeIcon(true);
        } else {
            updateThemeIcon(false);
        }

function toggleTheme() {
            rootHtml.classList.toggle('dark');
            const isDark = rootHtml.classList.contains('dark');
            localStorage.setItem('theme', isDark ? 'dark' : 'light');
            updateThemeIcon(isDark);
            updateChartsTheme(); 
        }

function updateThemeIcon(isDark) {
            themeToggleBtn.innerHTML = isDark 
                ? '<iconify-icon icon="solar:sun-bold-duotone" width="22" class="text-[#FFC107]"></iconify-icon>' 
                : '<iconify-icon icon="solar:moon-bold-duotone" width="22" class="text-[var(--text-main)]"></iconify-icon>';
        }

// --- 2. Sidebar Toggle (Mobile) ---
        const sidebar = document.getElementById('sidebar');
        const overlay = document.getElementById('mobile-overlay');

// --- 3. Simple SPA Navigation ---
        const views = ['dashboard', 'pendaftar', 'verifikasi'];
        const headerTitle = document.getElementById('header-title');
        
        const titles = {
            'dashboard': 'Dashboard Utama',
            'pendaftar': 'Manajemen Pendaftar',
            'verifikasi': 'Verifikasi Berkas'
        };

function switchTab(tabId) {
            views.forEach(view => {
                document.getElementById('view-' + view).classList.remove('active');
                const navItem = document.getElementById('nav-' + view);
                if(navItem) navItem.classList.remove('active');
            });

document.getElementById('view-' + tabId).classList.add('active');
            
            const activeNav = document.getElementById('nav-' + tabId);
            if(activeNav) activeNav.classList.add('active');

headerTitle.textContent = titles[tabId];

if (window.innerWidth < 768) {
                toggleSidebar();
            }

document.getElementById('main-scroll-area').scrollTop = 0;
            
            // Re-render charts slightly after display block is applied
            if(tabId === 'dashboard') {
                setTimeout(() => {
                    if(chart1) chart1.resize();
                    if(chart2) chart2.resize();
                }, 10);
            }
        }

// --- 4. Chart.js Initialization ---
        let chart1, chart2;

function getCssVar(name) {
            return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
        }

function initCharts() {
            const isDark = document.documentElement.classList.contains('dark');
            const primaryColor = isDark ? '#634bea' : '#190182'; 
            const gridColor = isDark ? '#2A3645' : '#E9ECEF';
            const textColor = isDark ? '#94A3B8' : '#6C757D';
            
            // Area Chart opacity format
            const areaBgColor = isDark ? 'rgba(99, 75, 234, 0.1)' : 'rgba(25, 1, 130, 0.08)';

// Chart 1: Area Chart (Tren Pendaftaran)
            const canvasTren = document.getElementById('chartTren');
            if(!canvasTren) return;
            const ctxTren = canvasTren.getContext('2d');
            
            chart1 = new Chart(ctxTren, {
                type: 'line',
                data: {
                    labels: ['1 Mar', '5 Mar', '10 Mar', '15 Mar', '20 Mar', '25 Mar', '30 Mar'],
                    datasets: [{
                        label: 'Pendaftar Harian',
                        data: [120, 190, 250, 210, 380, 420, 560],
                        borderColor: primaryColor,
                        backgroundColor: areaBgColor,
                        borderWidth: 3,
                        fill: true,
                        tension: 0.4, // Smooth elegant curve
                        pointBackgroundColor: isDark ? '#1E1E1E' : '#FFFFFF',
                        pointBorderColor: primaryColor,
                        pointBorderWidth: 2,
                        pointRadius: 4,
                        pointHoverRadius: 6
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    layout: { padding: { top: 10 } },
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            backgroundColor: isDark ? '#2A3645' : '#212529',
                            titleColor: '#FFFFFF',
                            bodyColor: '#FFFFFF',
                            padding: 12,
                            cornerRadius: 8,
                            displayColors: false,
                            callbacks: {
                                label: function(context) { return context.parsed.y + ' Pendaftar Baru'; }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: { color: gridColor, drawBorder: false, borderDash: [5, 5] },
                            ticks: { color: textColor, font: { family: "'Plus Jakarta Sans', sans-serif", size: 11 }, padding: 10 }
                        },
                        x: {
                            grid: { display: false },
                            ticks: { color: textColor, font: { family: "'Plus Jakarta Sans', sans-serif", size: 11 }, padding: 10 }
                        }
                    }
                }
            });

// Chart 2: Donut Chart (Status)
            const canvasStatus = document.getElementById('chartStatus');
            if(!canvasStatus) return;
            const ctxStatus = canvasStatus.getContext('2d');
            
            chart2 = new Chart(ctxStatus, {
                type: 'doughnut',
                data: {
                    labels: ['Diterima', 'Cadangan', 'Ditolak'],
                    datasets: [{
                        data: [320, 80, 120],
                        backgroundColor: [
                            '#28A745', // Success
                            '#6F42C1', // Purple
                            '#DC3545'  // Danger
                        ],
                        borderWidth: 0, 
                        hoverOffset: 6
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutout: '75%', // Modern thin donut
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            backgroundColor: isDark ? '#2A3645' : '#212529',
                            bodyFont: { family: "'Plus Jakarta Sans', sans-serif", size: 13 },
                            padding: 12,
                            cornerRadius: 8
                        }
                    }
                }
            });
        }

function updateChartsTheme() {
            if(chart1) chart1.destroy();
            if(chart2) chart2.destroy();
            initCharts();
        }

// Initialize on load
        window.onload = () => {
            initCharts();
        };

</script>
</body>
</html>

Related Examples

User dashboard

Author:
Anonymous

2 years ago

13.5k
sidebar dash
sidebar dash

Author:
Omer fils ELENGA

2 months ago

323
Admin Panel
Source https://gist.github.com/visualval/8aaaad794256313fa2310b997e8a9b8f

Author:
Mr Robot

3 years ago

25.1k
admin panel UI
Premium Admin Panel Pack including sidebar navigation, top navbar, dashboard cards, user tables, quick actions, profile section, and footer. Fully responsive with modern clean design using Tailwind CSS.

Author:
Lekhraj Ghimire

8 months ago

1.9k
Acode Master - FB & WhatsApp UI Combo
Description (meta description) ni tag ikoreshwa mu mutwe (head) wa HTML igaragaza mu ncamake icyo urubuga cyangwa urupapuro rwawe ruvuga. Iyi description ikoreshwa cyane na search engines (nka Google) mu kwerekana summary y’urubuga mu bisubizo by’ubushakashatsi.

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

621
sidebar

Author:
Abhishek Kumar

6 months ago

664
Responsive Dashboard
1. Background Colors: 1. Main background: `bg-indigo-50` 2. Welcome card: `bg-indigo-100` with `border-indigo-200` 3. Inbox card: `bg-blue-100` with `border-blue-200` 4. Overlay: `bg-indigo-900/50` 2. Text Colors: 1. Header text: `text-indigo-800` 2. Logo: `text-blue-900` and `text-indigo-800` 3. Menu items hover: `hover:text-indigo-800` 4. Card headings: `text-blue-900` 3. Button/Badge Colors: 1. Welcome badge: `bg-indigo-800` 2. Inbox button: `bg-blue-800` with `hover:bg-blue-900` 3. Stats card titles: `text-indigo-800` 4. Maintained all functionality: 1. Responsive design 2. Animations and transitions 3. Mobile menu 4. Hover effects 5. Notification animation The color scheme now uses a mix of Indigo-800 and Blue-900 while maintaining visual hierarchy and accessibility. The colors create a professional and cohesive look across all components.

Author:
nejaa badr

1 year ago

4.5k
background
A background is the area behind the content of an element (like a page, section, or div). It helps define the look and feel by adding colors, images, gradients, or patterns.

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

1.1k
E-Voting Dashboard
For You

Author:
Alif Bima Pradana

1 week ago

111
pange
pejdz

Author:
Anonymous

2 years ago

11.9k
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Author:
Ameth Galarcio

1 year ago

4k
IT Lab Loan Information System - UNG

Author:
Alif Bima Pradana

19 hours ago

1

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components