📱 Aplikasi Manajemen Presensi Karyawan

Aplikasi presensi karyawan modern dengan teknologi Face Recognition menggunakan Flask, Tailwind CSS, dan Face Recognition API.

✨ Fitur Utama

🎯 Face Recognition - Presensi otomatis menggunakan pengenalan wajah
📊 Dashboard Real-time - Monitoring presensi karyawan secara langsung
👥 Manajemen Karyawan - CRUD data karyawan lengkap
📸 Camera Integration - Check in/out langsung dari browser
📈 Laporan Presensi - Rekap dan analisis kehadiran
🌙 Dark Theme - Tampilan modern dengan dark mode
📱 Mobile Responsive - Optimized untuk semua device
🔒 Secure - Autentikasi dan authorization

🎨 Teknologi

Backend: Python Flask
Database: SQLite (SQLAlchemy ORM)
Frontend: HTML, Tailwind CSS
Icons: Font Awesome 6
Face API: Custom Face Recognition API

📋 Prerequisites

Python 3.8+
Face Recognition API running di http://localhost:8192
Browser dengan dukungan WebRTC (untuk kamera)

🚀 Instalasi

Clone repository

git clone <repository-url>
cd attendance-app

Install dependencies

pip install -r requirements.txt

Konfigurasi API

Edit app.py dan sesuaikan:

FACE_API_URL = 'http://localhost:8192/api/v1'
FACE_API_KEY = 'your-api-key-here'

Jalankan aplikasi

python app.py

Akses aplikasi

http://localhost:5000

🔑 Login Default

Username: admin
Password: admin123

📁 Struktur Folder

attendance-app/
├── app.py                 # Main application
├── requirements.txt       # Dependencies
├── templates/            # HTML templates
│   ├── base.html
│   ├── login.html
│   ├── dashboard.html
│   ├── check_in.html
│   ├── check_out.html
│   ├── employees.html
│   ├── add_employee.html
│   └── attendance_report.html
├── uploads/              # Uploaded photos
└── instance/
    └── attendance.db     # SQLite database

💡 Cara Penggunaan

1. Tambah Karyawan Baru

Login ke aplikasi
Klik menu "Karyawan"
Klik tombol "Tambah Karyawan"
Isi form data karyawan
Upload foto wajah (opsional)
Klik "Simpan Karyawan"

2. Registrasi Wajah

Jika belum upload foto saat menambah karyawan:

Buka halaman "Karyawan"
Cari karyawan yang belum registrasi
Klik "Register Face"
Upload foto wajah yang jelas

3. Check In (Presensi Masuk)

Klik menu "Check In"
Izinkan akses kamera
Posisikan wajah di tengah frame
Klik "Ambil Foto & Check In"
Sistem akan mengenali wajah dan mencatat presensi

4. Check Out (Presensi Keluar)

Klik menu "Check Out"
Izinkan akses kamera
Posisikan wajah di tengah frame
Klik "Ambil Foto & Check Out"
Sistem akan mencatat waktu keluar

5. Lihat Laporan

Klik menu "Laporan"
Pilih rentang tanggal
Filter berdasarkan status (opsional)
Klik "Filter"
Export ke Excel (jika diperlukan)

🔧 Konfigurasi Face Recognition API

Aplikasi ini terintegrasi dengan Face Recognition API. Pastikan API berjalan dengan endpoint:

Health Check: GET /api/v1/health
Process Image: POST /api/v1/process
Add Face: POST /api/v1/faces/add
Get Faces: GET /api/v1/faces

Header Required:

X-API-Key: your-api-key

Format Info Karyawan:

{
  "employee_id": "EMP001",
  "department": "IT",
  "position": "Software Engineer"
}

🎯 Status Presensi

Present (Hijau): Hadir tepat waktu (< 09:00)
Late (Kuning): Terlambat (≥ 09:00)
Absent (Merah): Tidak hadir

📊 Database Schema

Employee

id (Primary Key)
employee_id (Unique)
name
department
position
join_date
phone
email
face_registered (Boolean)
created_at

Attendance

id (Primary Key)
employee_id (Foreign Key)
check_in (DateTime)
check_out (DateTime)
photo_in
photo_out
status (Present/Late/Absent)
confidence (Float)
notes
created_at

User

id (Primary Key)
username (Unique)
password
role (admin/hr/employee)

🔐 Security Notes

⚠️ PENTING untuk Production:

Ganti SECRET_KEY dengan key yang aman
Gunakan password hashing (bcrypt/argon2)
Implementasi HTTPS
Rate limiting untuk API
Input validation & sanitization
CSRF protection
Session management yang aman

🎨 Kustomisasi

Warna Theme

Edit di templates/base.html:

tailwind.config = {
    theme: {
        extend: {
            colors: {
                dark: {
                    bg: '#0f172a',    // Background
                    card: '#1e293b',   // Card background
                    border: '#334155', // Border color
                }
            }
        }
    }
}

Logo & Branding

Ganti icon di navigation:

<i class="fas fa-fingerprint text-blue-500"></i>
<span>Presensi Pro</span>

📝 Development

Menambah Fitur Baru

Buat route di app.py
Tambah template HTML di templates/
Update navigation di base.html
Test functionality

Database Migration

Jika ada perubahan model:

with app.app_context():
    db.drop_all()  # Hati-hati! Hapus data
    db.create_all()

🐛 Troubleshooting

Camera tidak berfungsi

Pastikan browser memiliki permission untuk kamera
Gunakan HTTPS atau localhost
Check browser compatibility

Face API tidak terhubung

Pastikan API berjalan di port 8192
Cek API key sudah benar
Verify endpoint URL

Database error

Hapus file attendance.db dan restart
Check file permissions

📞 Support

Untuk bantuan dan pertanyaan:

Email: [email protected]
Documentation: https://docs.presensi.com

📄 License

MIT License - Free to use and modify

🙏 Credits

Flask Framework
Tailwind CSS
Font Awesome
Face Recognition API

Dibuat dengan ❤️ untuk sistem presensi modern

Aplikasi Absensi Wajah: Presensi Karyawan Lebih Mudah & Akurat