User Interface Overview

Relevant source files

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

• templates/admin_dashboard.html
• templates/add_employee_form.html
• templates/admin_base.html
• templates/admin_reports.html
• templates/admin_attendance.html
• templates/admin_database.html
• README.md

The user interface of the Smart Absen Face Recognition system is a web-based application built with Flask, providing distinct experiences for end-users (employees performing attendance) and administrators. The frontend leverages Bootstrap 5 for a responsive layout, enhanced with custom CSS to create a unique "Kafebasabasi" coffee-shop theme. Interactivity is powered by vanilla JavaScript and Chart.js for data visualization.

The UI is divided into several key areas: the public-facing attendance pages and a comprehensive admin panel. The admin panel is a single-page application (SPA)-like interface that dynamically loads content sections for managing employees, viewing attendance, generating reports, and configuring the system. This design prioritizes a clean separation of concerns and a modular, maintainable structure.

Sources: README.md:14-17, templates/admin_dashboard.html:5-13

Core Technologies & Styling

The frontend is built on a foundation of standard web technologies, augmented with libraries for rapid development and rich data visualization.

Sources: templates/admin_dashboard.html:5-13, templates/add_employee_form.html:5-11

Technology Stack

Technology	Purpose	Source
HTML5	Core document structure.	templates/admin_dashboard.html
Bootstrap 5.3	Responsive layout, grid system, and base components.	templates/admin_dashboard.html:6
Bootstrap Icons 1.10	Iconography used throughout the application.	templates/admin_dashboard.html:7
Google Fonts (Poppins)	Primary font for the application.	templates/admin_dashboard.html:8
Vanilla JavaScript	Client-side logic, interactivity, and API communication.	templates/admin_dashboard.html:1003-1240
Chart.js 3.9.1	Data visualization for dashboards and reports.	templates/admin_dashboard.html:10

Theming and Color Palette

A consistent visual theme, named "Kafebasabasi," is applied across the application. The theme uses a warm, coffee-inspired color palette defined as CSS custom properties (variables) in the <style> block of templates.

The core color palette is defined as follows:

:root {
    --primary: #3C2415;
    --secondary: #8B4513;
    --accent: #DAA520;
    --light-bg: #FDF6E3;
    --card-bg: #FFFFFF;
    --text-dark: #2C2C2C;
    --text-muted: #6C757D;
    --border-color: #E9ECEF;
    --shadow: 0 2px 10px rgba(60, 36, 21, 0.1);
}

Sources: templates/admin_dashboard.html:15-25

This palette is used to style all major components, including sidebars, cards, buttons, and charts, ensuring a cohesive look and feel.

Template Architecture

The application uses the Jinja2 templating engine with a hierarchical structure to promote code reuse and maintainability. The core of this architecture is base.html, which is extended by more specific templates like admin_base.html.

This diagram illustrates the template inheritance flow:

This structure allows common elements like the main navigation and footer to be defined once in base.html, while the admin-specific layout (e.g., sidebar) is defined in admin_base.html.

Sources: templates/admin_base.html:1

Admin Dashboard

The admin dashboard is the central hub for system management. It functions as a pseudo-Single Page Application (SPA) where different management sections are dynamically shown or hidden using JavaScript, and some content is loaded into <iframe> elements.

Sources: templates/admin_dashboard.html

Layout and Structure

The dashboard features a responsive two-column layout:

1. Fixed Sidebar: A vertical navigation bar on the left provides access to all major admin sections. It remains visible on larger screens and becomes a toggleable overlay on mobile devices.
2. Main Content Wrapper: The primary area where content sections are displayed. It includes a top bar with the page title and a real-time clock.

The main content area is composed of several key components:

• Greeting Card: A personalized welcome message that changes based on the time of day.
• Quick Actions: A set of buttons for common tasks like adding an employee or viewing reports.
• Stats Cards: A grid of cards displaying key metrics like total employees, daily attendance, and attendance rate.
• Charts: Visualizations for weekly attendance and daily status (present vs. absent).
• Recent Activity Table: A list of the latest attendance records.

Sources: templates/admin_dashboard.html:64-100, templates/admin_dashboard.html:778-900

Dynamic Content and Interactivity

The dashboard is highly interactive, with client-side JavaScript managing its state and data.

Section Switching

The switchSection(sectionName) function is responsible for the SPA-like behavior. When a user clicks a navigation link, this function hides all .content-section elements and displays only the target section. For most sections, it loads content from other pages (e.g., /admin/employees, /admin/reports) into an <iframe>.

// A simplified view of the section switching logic
function switchSection(sectionName) {
    // Hide all sections
    document.querySelectorAll('.content-section').forEach(el => {
        el.classList.remove('active');
    });

    // Show the target section
    const targetSection = document.getElementById(sectionName + '-section');
    targetSection.classList.add('active');

    // Update the page title
    document.getElementById('pageTitle').textContent = titles[sectionName];
}

Sources: templates/admin_dashboard.html:1044-1087

Asynchronous Data Loading

The dashboard statistics and charts are populated with data fetched asynchronously from the /admin/api/stats endpoint. This process occurs on page load and repeats every 5 seconds to keep the data fresh.

The following sequence diagram shows the data loading flow:

This asynchronous pattern ensures the UI remains responsive while fetching the latest information from the backend.

Sources: templates/admin_dashboard.html:1125-1139, templates/admin_dashboard.html:1235-1238

Data Entry Forms

The system provides structured forms for data entry, such as adding a new employee. These forms are designed for clarity and include client-side validation to ensure data integrity before submission.

Sources: templates/add_employee_form.html

Form Structure

The "Add Employee" form is a good example, organized into logical sections:

• Data Pribadi (Personal Data)
• Informasi Kontak (Contact Information)
• Data Pekerjaan (Job Data)
• Catatan Tambahan (Additional Notes)

Each section contains relevant input fields, such as text inputs, select dropdowns, and date pickers. Required fields are clearly marked.

Sources: templates/add_employee_form.html:565-728

Validation and Submission Flow

The form employs a multi-layered validation approach:

1. HTML5 Validation: Uses standard attributes like required, type="email", and maxlength.
2. Custom JavaScript Validation: Adds specific checks, such as ensuring the NIK (National ID Number) is exactly 16 digits and the phone number starts with '0' and has a minimum length.
3. Visual Feedback: Invalid fields are styled with the .is-invalid class, and error messages are displayed.

The form submission is handled asynchronously via the fetch API, providing a smooth user experience without a full page reload.

This flowchart outlines the submission process:

This flow ensures the user is always informed of the submission status.

Sources: templates/add_employee_form.html:793-855

Reporting and Data Visualization

The UI includes powerful reporting and visualization tools to help administrators analyze attendance data.

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

Report Generation

The admin_reports.html page provides a user interface for generating various reports:

• Pre-defined Reports: Buttons for Daily, Weekly, and Monthly reports.
• Custom Report Generator: A form allowing users to select a report type, date range, specific employees, and export format (PDF, Excel, CSV).

Sources: templates/admin_reports.html:248-335

Data Visualization with Chart.js

Charts are used extensively in the dashboard and reports to provide a quick visual understanding of complex data.

Key charts include:

• Attendance Line Chart: Shows attendance trends over the last 7 days.
• Status Doughnut Chart: Displays the proportion of present vs. absent employees for the current day.
• Performance and Overtime Charts: Available in the reports section for deeper analysis.

These charts are rendered on <canvas> elements and are configured and populated by JavaScript functions like initAttendanceChart and initStatusChart.

Sources: templates/admin_dashboard.html:881-896, templates/admin_dashboard.html:1143-1221