Real-time Admin Dashboard

Relevant source files

The following files were used as context for generating this wiki page:

• templates/admin_dashboard_new.html
• templates/admin_dashboard.html
• templates/admin_reports.html
• templates/admin_database.html
• README.md
• CONTRIBUTING.md

The Real-time Admin Dashboard is the central administrative interface for the Smart Absen Face Recognition system. It provides a comprehensive, at-a-glance overview of attendance metrics, employee statistics, and recent system activity. The dashboard is designed as a dynamic, single-page-like application that fetches data asynchronously to provide live updates without requiring page reloads.

The dashboard serves as the main entry point for administrators to access various management modules, including employee management, attendance history, reporting, and database management. It leverages Chart.js for data visualization and a polling mechanism to keep the displayed statistics current.

Sources: templates/admin_dashboard_new.html, templates/admin_dashboard.html, README.md

Architecture

The dashboard employs a client-server architecture where the frontend (HTML/JavaScript) acts as a dynamic client to a Flask backend. The core design philosophy is modularity and real-time feedback.

Frontend Architecture

The frontend is structured as a single-page application (SPA) shell. A persistent sidebar allows navigation between different "sections". The main dashboard content is loaded initially, and other management pages (like Employees, Reports, etc.) are loaded into <iframe> elements to maintain the main application state and avoid full page reloads.

This diagram illustrates the user flow for navigating the dashboard.

Real-time Data Flow

The dashboard achieves its real-time nature by periodically polling a backend API endpoint. The loadDashboardData JavaScript function is set to run every 5 seconds, fetching the latest statistics and updating the UI components accordingly.

The sequence diagram below shows the interaction for a single data refresh cycle.

Key Components

The dashboard is composed of several distinct visual and functional components.

Component	Description	Source Files
Sidebar	Provides primary navigation to all admin modules like Dashboard, Karyawan (Employees), Absensi (Attendance), and Laporan (Reports).	templates/admin_dashboard_new.html:402-436
Top Bar	Displays the current page title, a real-time clock, and a menu toggle for mobile view.	templates/admin_dashboard_new.html:439-449
Stats Cards	A set of four cards displaying key metrics: Total Employees, Present Today, Absent Today, and Attendance Rate.	templates/admin_dashboard_new.html:453-495
Charts	Two charts rendered using Chart.js: a line chart for weekly attendance and a doughnut chart for today's attendance status.	templates/admin_dashboard_new.html:498-511
Recent Activity Table	A table listing the most recent attendance events, including employee name, time, status, and method.	templates/admin_dashboard_new.html:514-533
Content Sections	div containers for each module. Only one is active at a time. Other sections often contain an <iframe> to load a separate page.	templates/admin_dashboard_new.html:451-573

Sources: templates/admin_dashboard_new.html, templates/admin_dashboard.html

Backend API

The dashboard's dynamic content is powered by a single primary API endpoint.

/admin/api/stats

This endpoint is the data source for the main dashboard view. It is called every 5 seconds to fetch the latest statistics.

• Method: GET
• Response: application/json

The expected JSON response structure, as inferred from the frontend JavaScript, is as follows:

Key	Type	Description
total_employees	integer	The total number of registered employees.
present_today	integer	The count of employees who are present today.
absent_today	integer	The count of employees who are absent today.
attendance_rate	float	The overall attendance percentage.
weekly_data	array[integer]	An array of 7 integers representing attendance counts for the last 7 days.
recent_activity	array[object]	An array of objects, each representing a recent attendance event.
recent_activity[].name	string	The name of the employee.
recent_activity[].time	string	The timestamp of the attendance.
recent_activity[].status	string	The status of the attendance (e.g., 'Hadir').
recent_activity[].method	string	The method used for attendance (e.g., 'QR Code').

Sources: templates/admin_dashboard_new.html:466-479, templates/admin_dashboard_new.html:540-567

Frontend Logic

The interactivity of the dashboard is managed by client-side JavaScript embedded within the HTML files.

Content Switching

The switchSection(sectionName) function is responsible for the SPA-like navigation. When a sidebar link is clicked, this function is invoked to:

1. Hide all elements with the class .content-section.
2. Display the target section (e.g., id="employees-section").
3. Update the page title in the top bar.
4. Update the active class on the sidebar navigation links.

Sources: templates/admin_dashboard_new.html:617-643

Data Fetching and UI Updates

The loadDashboardData() function orchestrates the real-time updates.

// templates/admin_dashboard_new.html:466-479
function loadDashboardData() {
    fetch('/admin/api/stats')
        .then(response => response.json())
        .then(data => {
            document.getElementById('totalEmployees').textContent = data.total_employees;
            document.getElementById('todayAttendance').textContent = data.present_today;
            document.getElementById('todayAbsent').textContent = data.absent_today;
            document.getElementById('attendanceRate').textContent = data.attendance_rate + '%';

            // Initialize charts
            initAttendanceChart(data.weekly_data);
            initStatusChart(data.present_today, data.absent_today);
            loadRecentActivity();
        })
        .catch(error => console.error('Error loading data:', error));
}

This function is called on page load and then every 5 seconds via setInterval(loadDashboardData, 5000);. It updates the stat cards and triggers the re-initialization of the charts and the recent activity table with the new data.

Sources: templates/admin_dashboard_new.html:466-479, templates/admin_dashboard_new.html:569-572

Data Visualization

The dashboard uses Chart.js to render two primary graphs:

1. Weekly Attendance Chart (attendanceChart): A line chart initialized by initAttendanceChart(), which displays attendance trends over the last 7 days. The data comes from the weekly_data array in the API response.
   Sources: templates/admin_dashboard_new.html:482-538

2. Today's Status Chart (statusChart): A doughnut chart initialized by initStatusChart(), showing the proportion of 'Hadir' (Present) vs. 'Absen' (Absent) employees for the current day.
   Sources: templates/admin_dashboard_new.html:541-567

Both chart functions include logic to destroy the previous chart instance before drawing a new one, ensuring smooth updates.

Modular Content with Iframes

A key architectural decision for the dashboard is the use of <iframe> elements to embed other admin pages. This creates a modular system where each admin function (e.g., managing employees, viewing reports) is a self-contained page but can be accessed from the main dashboard without losing the global navigation context.

This diagram shows how different modules are related to the main dashboard.

This approach is evident in the HTML structure for each content section. For example, the "Reports" section is simply an iframe pointing to /admin/reports.

<!-- templates/admin_dashboard_new.html:546-551 -->
<div class="content-section" id="reports-section">
    <div class="table-container">
        <h3><i class="bi bi-graph-up"></i> Laporan</h3>
        <iframe src="/admin/reports" style="width: 100%; height: 600px; border: none; border-radius: 8px;"></iframe>
    </div>
</div>

Sources: templates/admin_dashboard_new.html:535-573, templates/admin_reports.html, templates/admin_database.html