Admin Panel Pages
Relevant source files
The following files were used as context for generating this wiki page:
The Admin Panel is a suite of web pages designed for the administration and management of the "Kafebasabasi" Smart Attendance system. It provides a centralized interface for administrators to oversee employee data, monitor attendance records, generate reports, and configure system settings. The panel is built on a base template that ensures a consistent layout and navigation experience across all administrative functions.
The architecture primarily uses a main dashboard page (admin_dashboard.html) that dynamically loads other management pages (like Employees, Attendance, Reports) into <iframe> elements, creating a single-page application (SPA) feel. Data for the dashboard is fetched asynchronously from a dedicated API endpoint (/admin/api/stats).
Sources: templates/admin_base.html, templates/admin_dashboard.html:920-943, templates/admin_dashboard.html:1102-1114
Core Architecture
The admin panel's structure is defined by a base template (admin_base.html) which provides a consistent two-column layout. This layout consists of a persistent sidebar for navigation and a main content area where the specific admin pages are rendered.
Sources: templates/admin_base.html:16-52
Page Layout and Navigation
The main layout is established in admin_base.html and consists of:
- Sidebar (
<div class="sidebar">): A vertical navigation bar on the left, providing links to all major sections of the admin panel. - Main Content (
<div class="main-content">): The primary area where content from other templates is injected using the{% block admin_content %}Jinja2 block.
The following diagram illustrates the template inheritance and content inclusion model.
This diagram shows how admin_base.html serves as the foundation for all admin pages, while admin_dashboard.html uses iframes to embed other pages.
Sources: templates/admin_base.html:16-52, templates/admin_dashboard.html:920-943
Sidebar Navigation
The sidebar menu provides quick access to all administrative functions. The active page is highlighted based on the active_page variable passed to the template.
| Menu Item | Icon | Link | active_page value |
|---|---|---|---|
| Dashboard | bi-speedometer2 | /admin/dashboard | dashboard |
| Kelola Karyawan | bi-people-fill | /admin/employees | employees |
| Data Absensi | bi-calendar-check | /admin/attendance | attendance |
| Laporan | bi-file-earmark-bar-graph | /admin/reports | reports |
| Pengaturan | bi-gear | /admin/settings | settings |
Sources: templates/admin_base.html:23-35
Admin Pages
1. Dashboard
The dashboard is the main landing page for administrators, providing a real-time overview of the attendance system. It is available in two versions: admin_dashboard.html (SPA-style with iframes) and admin_dashboard_new.html (standalone).
Key components include:
- Greeting Card: Welcomes the admin and shows the current system status.
- Quick Actions: Buttons for common tasks like adding an employee or viewing reports.
- Statistics Cards: Display key metrics such as total employees, today's attendance, absentees, and the overall attendance rate.
- Charts: Visual representations of attendance for the last 7 days and the status of employees for the current day.
- Recent Activity Table: A live-updating table showing the latest attendance records.
Sources: templates/admin_dashboard.html:817-918, templates/admin_dashboard_new.html:486-588
Data Loading Flow
The dashboard dynamically loads its data by making a fetch request to the /admin/api/stats endpoint every 5 seconds. The returned JSON data is then used to populate the stat cards and update the charts.
This sequence diagram illustrates the asynchronous data fetching and rendering process on the dashboard.
Sources: templates/admin_dashboard.html:1102-1114, templates/admin_dashboard.html:1203-1206, templates/admin_dashboard_new.html:682-694
2. Employee Management
This section allows administrators to perform CRUD (Create, Read, Update, Delete) operations on employee records. The primary interface for adding a new employee is add_employee_form.html.
The form collects the following information:
- Personal Data: Full Name, NIK, Gender, Date of Birth.
- Contact Information: Email, Phone Number, Address.
- Job Data: Position, Division, Hire Date, Status.
Upon successful submission to the /admin/add_employee_complete endpoint, the user is redirected to the face capture page.
Sources: templates/add_employee_form.html:500-646, templates/add_employee_form.html:734-758
3. Attendance Data
The admin_attendance.html page displays a comprehensive log of all attendance records. It features filtering options by date range and provides a detailed table view.
The table includes the following columns:
- No
- Nama (Name)
- Bagian (Department)
- Tanggal (Date)
- Jam Masuk (Time In)
- Jam Pulang (Time Out)
- Total Jam (Total Hours)
- Status (e.g.,
Lengkap,Masuk Saja)
The page also includes quick statistic cards for total attendance records, active employees, and today's attendance count.
Sources: templates/admin_attendance.html:268-339, templates/admin_attendance.html:229-258
4. Reports
The admin_reports.html page is a powerful tool for generating and visualizing attendance data. It allows admins to create various types of reports and export them.
Features:
- Pre-defined Reports: One-click generation for Daily, Weekly, and Monthly reports.
- Custom Report Generator: A form to generate reports for a specific date range, employee, and type (Attendance, Performance, etc.).
- Export Options: Reports can be exported in PDF, Excel, and CSV formats.
- Visual Analytics: A tabbed interface with charts for Attendance, Performance, Overtime, and Trends.
The following diagram shows the flow for generating a custom report.
5. Database Management
The admin_database.html page provides a high-level interface for database monitoring and maintenance. It is designed to give admins insight into the database's health and allow them to perform critical actions without direct database access.
Key Sections:
- Database Status: Shows real-time metrics like response time, storage used, and uptime.
- Database Statistics: Displays record counts for key tables (employees, attendance).
- Database Actions: Buttons to trigger backend processes.
- Tables Overview: A list of database tables with their record counts and sizes.
- Maintenance Actions: A "Danger Zone" for high-risk operations like resetting all data.
| Action | Icon | Description |
|---|---|---|
| Backup Database | bi-download | Create a manual backup of the database. |
| Restore Database | bi-upload | Restore the database from a backup file. |
| Optimize Database | bi-gear | Run optimization queries on tables. |
| View Logs | bi-file-text | View database activity logs. |
| Reset All Data | bi-database-x | DANGEROUS: Deletes all employee and attendance data. |
A confirmation modal (#resetModal) is used to prevent accidental data deletion, requiring the admin to type "RESET" to proceed.
Sources: templates/admin_database.html:432-463, templates/admin_database.html:359-399, templates/admin_database.html:640-698
6. Admin Profile
The admin_profile.html page displays information about the currently logged-in administrator. It shows the admin's username, role, and some system statistics like total registered employees and the active camera index.
Sources: templates/admin_profile.html:35-51
Admin API Endpoints
The admin panel relies on several API endpoints for its functionality, as documented in openapi.yaml.
| Method | Endpoint | Description |
|---|---|---|
POST | /admin/api/train_model | Re-trains the InsightFace model with the latest employee data. |
GET | /admin/api/stats | Retrieves dashboard statistics (total employees, attendance today, etc.). |
GET | /admin/employees | Renders the employee management page. |
GET | /admin/attendance | Renders the attendance reports page. |
POST | /admin/login | Authenticates an administrator. |
GET | /admin/dashboard | Renders the main admin dashboard. |
Sources: static/openapi.yaml:189-232, templates/admin_dashboard.html:1103