GetAbsen adalah sistem manajemen absensi dan logbook harian berbasis web modern yang dibuat khusus untuk anak magang (Intern) dan Mentor di Getcore.ID. Aplikasi ini mengusung tampilan Claymorphism UI yang interaktif dan menyenangkan (playful), dirancang khusus untuk mempermudah pelacakan masa magang, laporan tugas, hingga pemantauan progres.
- Absensi: Sistem clock-in/out yang mudah dengan pelacakan lokasi dan status.
- Logbook: Pencatatan aktivitas harian secara terstruktur (Kualitatif & Kuantitatif) beserta evidence foto.
- Planner: Kalender pribadi untuk menyusun jadwal dan agenda tugas.
- Export Data: Kemampuan men-download logbook aktivitas harian ke dalam format laporan PDF yang rapi.
- Dashboard: Tinjauan metrik tingkat tinggi mengenai jumlah intern, tingkat kehadiran, dan statistik kinerja.
- Progress Intern: Tampilan mendetail terhadap kinerja per individu, riwayat absen, logbook harian lengkap, dan fitur export laporan PDF.
- AI Chat (Mendatang): Asisten AI pintar yang berguna untuk membantu mentor dalam menganalisis kinerja intern.
Frontend (Client)
- React 18 + Vite
- Tailwind CSS v4 (Dengan styling kustom Claymorphism/3D)
- Lucide React (Ikon)
- jsPDF & jsPDF-AutoTable (Pembuatan PDF Laporan)
- Font: Plus Jakarta Sans
Backend (Server)
- Node.js & Express.js
- Prisma ORM (Database PostgreSQL via Neon Serverless)
- JSON Web Tokens (JWT) untuk Autentikasi keamanan
- Multer (Fitur Upload File)
- Node.js (Disarankan versi v18 ke atas)
- npm atau yarn
- Database PostgreSQL (Contoh: Neon.tech / Supabase / Lokal)
```bash git clone cd getabsen ```
```bash cd server
npm install express cors dotenv jsonwebtoken bcryptjs multer pg npm install @prisma/client
npm install -D nodemon prisma
cp .env.example .env
npx prisma migrate dev --name init
npm run dev ```
```bash
cd client
npm install react react-dom react-router-dom lucide-react jspdf jspdf-autotable axios
npm install -D vite tailwindcss @tailwindcss/vite eslint
npm run dev
```
Aplikasi web kini bisa diakses melalui browser di alamat http://localhost:5173.
Bagian ini merangkum panduan tentang bagaimana Model Bahasa (LLM) dan AI Agent bisa diintegrasikan dengan mulus ke dalam platform GetAbsen untuk memperkuat analisis kinerja.
- Database Prisma: Skema database sudah secara jelas memisahkan
User(RoleINTERN,MENTOR,ADMIN),Attendance(Kehadiran), danLogbookEntry(Laporan harian). - Struktur API: Struktur routing backend di
server/src/routesberbentuk modular. Endpoint khusus AI yang baru bisa kamu tambahkan misalnya diai.routes.jsatauanalytics.routes.js. - Frontend UI: Sudah disiapkan halaman kerangka dasar untuk fitur chat AI di direktori
client/src/pages/mentor/AiChat.jsx.
A. Analisis Sentimen & Kualitas Logbook (Otomatis)
- Tujuan: Mengevaluasi teks pada input
kualitatifdankuantitatifdi tabelLogbookEntry. - Cara: Pasang sebuah background worker / CRON job atau trigger Webhook setiap kali ada logbook baru yang disubmit (
POST /api/logbook). Gunakan model LLM untuk melakukan automasi pengecekan: seberapa produktif magang ini hari ini? Apakah bahasanya positif? Apakah ada blocker/masalah yang dilaporkan?. - Lokasi: Buat model baru di Prisma (Misal:
LogbookAnalysis) yang membawa relasi langsung ke IDLogbookEntry.
B. Kesimpulan (Summary) Evaluasi Mingguan Mentor
- Tujuan: Menghasilkan laporan mingguan kinerja intern menggunakan bahasa natural.
- Cara: Buat script di backend yang akan memanggil data
LogbookEntrydanAttendance7 hari ke belakang milik intern tertentu. Susun dan berikan ke Context Window LLM prompt, lalu minta ia membuatkan rangkuman profesional. - Lokasi: Tampilkan rangkuman AI ini dalam halaman Dashboard Progress Intern (
InternProgress.jsx) milik peran Mentor.
C. Asisten "AI Chat" untuk Mentor (AiChat.jsx)
- Tujuan: Memudahkan Mentor bertanya seputar laporan ke asisten bot, seperti: "Siapa intern yang akhir-akhir ini paling sering absen?" atau "Tolong rangkum dong tugas-tugas Budi selama 3 hari terakhir."
- Cara:
- Implementasikan arsitektur Retrieval-Augmented Generation (RAG).
- Buat struktur Embeddings untuk setiap deskripsi tugas/logbook intern dan simpan ke dalam Vector Database (Atau gunakan pgvector langsung via PostgreSQL Neon).
- Buat sebuah endpoint
/api/ai/chatdi Express.js yang secara reaktif menampung pertanyaan User Mentor, mengambil konteks database (Pencarian Vektor logbook/kehadiran), dan membangun jawaban menggunakan LLM.
- Definisi Schema Database: Tambahkan relasi/tabel baru pada file
schema.prismabila butuh wadah penyimpanan (contoh: tabel hasil summary AI, tabel cache vector embedding). Pastikan selalu menjalankan perintahnpx prisma db pushatauprisma migrate. - Logic API Node.js: Buat controller Express.js baru yang secara khusus menangani logika AI. Kamu bisa pakai library standar seperti
langchainatau SDK asli bawaan model (seperti SDK OpenAI, Anthropic, Gemini Node.js). - Sistem Keamanan: Pastikan API AI selalu dijaga middleware otentikasi JWT default (
authenticateToken). Cegah terjadinya kebocoran data dengan memastikan AI prompt limitasi akses sehingga seorang Mentor/Admin hanya bisa "menanyakan" data intern di bawah naungannya. - Integrasi Desain Frontend: Saat ingin merender "AI Box Reccomendation" atau "Pesan AI Chat" di antarmuka, tetap gunakan komponen CSS Claymorphism UI! Gunakan
var(--shadow-clay)yang sudah disiapkan di fileindex.cssagar secara estetika tidak merusak kesan playful tema aplikasinya.
Dibuat oleh Tim Intern Getcore.ID