Trabsen - Aplikasi Absensi Online

Trabsen adalah aplikasi absensi online modern yang dibangun untuk memudahkan proses pencatatan kehadiran staff dan guru. Aplikasi ini dirancang sebagai Progressive Web App (PWA) untuk memberikan pengalaman pengguna yang cepat dan responsif, baik online maupun offline.

✨ Fitur Utama

• Autentikasi Pengguna: Sistem login yang aman untuk staff dan guru.
• Absensi Masuk & Pulang: Ambil foto dan lokasi untuk absensi masuk dan pulang.
• Pengajuan Izin: Fitur untuk mengajukan izin tidak hadir (sakit, izin, cuti) beserta bukti foto.
• Riwayat Aktivitas: Lihat riwayat absensi dan aktivitas terkini.
• Geolocation: Mendeteksi lokasi pengguna saat melakukan absensi untuk validasi.
• PWA (Progressive Web App): Dapat diinstal di perangkat mobile dan desktop untuk akses yang lebih mudah dan pengalaman seperti aplikasi native.
• Mode Offline: Memberikan notifikasi status koneksi (Online/Offline).

🛠️ Teknologi yang Digunakan

• Framework: Nuxt.js 4
• UI Library: Tailwind CSS
• Bahasa: TypeScript
• Icons: Nuxt Icon & Lucide Icons
• PWA: @vite-pwa/nuxt

🚀 Memulai Proyek

Untuk menjalankan proyek ini secara lokal, ikuti langkah-langkah berikut:

Prasyarat

Pastikan Anda memiliki Node.js (versi 18+) dan pnpm terinstal di sistem Anda.

Instalasi

1. Clone repositori ini:

   git clone https://github.com/SynchronizesTeams/absensi-penus-client
   cd absensi-penus-client

2. Instal dependensi:

   pnpm install

Menjalankan Server Pengembangan

Untuk menjalankan server pengembangan dengan hot-reloading:

pnpm dev

Buka http://localhost:3000 di browser Anda.

Membangun untuk Produksi

Untuk membangun aplikasi untuk produksi:

pnpm build

Perintah ini akan membuat direktori .output dengan semua aset yang siap untuk di-deploy.

Untuk melihat hasil build secara lokal:

pnpm preview

📁 Struktur Proyek

Berikut adalah gambaran umum struktur direktori app/:

app/
├── assets/         # Aset statis seperti CSS
├── components/     # Komponen Vue.js
├── composables/    # Fungsi composable (reusable)
├── layouts/        # Layout untuk halaman
├── middleware/     # Middleware untuk routing
├── pages/          # Halaman dan routing
└── types/          # Definisi tipe TypeScript

📄 Lisensi

Proyek ini dilisensikan di bawah MIT License.