Pencatatan cuti karyawan yang dilakukan secara manual berpotensi menyebabkan data sulit ditelusuri dan jadwal cuti terlupakan, khususnya ketika permohonan cuti disampaikan langsung kepada Kepala Shift. Penelitian ini bertujuan mendeskripsikan perancangan aplikasi pencatatan cuti karyawan yang membantu Kepala Shift mencatat pengajuan, memantau jadwal berdasarkan shift, serta melihat rekapitulasi cuti bulanan. Aplikasi yang dikaji dikembangkan menggunakan teknologi web dan memiliki manifest Progressive Web App (PWA), sehingga dapat dipasang pada perangkat yang mendukung melalui hosting HTTPS. Berdasarkan pemeriksaan source code, fitur yang tersedia meliputi login, pengelolaan data karyawan, pencatatan cuti, pembagian tiga shift, riwayat, rekap bulanan, cetak melalui dialog browser, dan pengingat menggunakan Notifications API. Data aplikasi disimpan pada localStorage browser, sehingga belum tersinkronisasi secara daring antarperangkat. Penelitian ini menggunakan pendekatan deskriptif dengan analisis kebutuhan, peninjauan implementasi, dan rancangan pengujian black-box. Pengujian fungsional belum dilakukan dalam penyusunan draf ini; oleh karena itu, keberhasilan fitur perlu dikonfirmasi melalui pengujian langsung. Hasil yang diharapkan adalah proses pencatatan yang lebih terstruktur dan membantu Kepala Shift mengurangi kelalaian dalam memantau jadwal cuti.
Kata kunci: pencatatan cuti, karyawan, Kepala Shift, Progressive Web App, notifikasi browser.
ABSTRACT
Manual employee-leave recording can make records difficult to trace and scheduled leave easy to overlook, especially when requests are submitted directly to a shift supervisor. This paper describes the design of a leave-recording application intended to help a shift supervisor record leave, monitor entries by shift, and review monthly summaries. Source-code inspection indicates that the application is built with web technologies and includes a Progressive Web App manifest, employee records, leave entry, three-shift categorization, history, monthly summaries, browser-based printing, and browser notification functionality. Records are stored in browser localStorage and are not synchronized online across devices. The paper adopts a descriptive approach based on requirements analysis, implementation review, and a proposed black-box testing plan. Functional tests have not yet been executed for this draft; actual test results must be added after hands-on verification. The intended outcome is a more structured recording process that supports shift supervisors in monitoring scheduled leave.
Keywords: employee leave, shift supervisor, Progressive Web App, browser notification, leave records.
1. PENDAHULUAN
Pengelolaan cuti merupakan salah satu aktivitas administrasi yang perlu dilakukan secara tertib agar informasi ketidakhadiran karyawan dapat diketahui sesuai tanggal dan pembagian kerja. Pada konteks yang dikaji, karyawan menyampaikan permohonan cuti kepada Kepala Shift, kemudian Kepala Shift perlu mencatat siapa yang cuti, kapan cuti berlangsung, jenis cuti, serta shift yang terkait. Jika pencatatan tersebar pada catatan manual atau ingatan, riwayat dan rekapitulasi dapat membutuhkan waktu lebih lama untuk disusun.
Aplikasi pencatatan cuti dirancang sebagai alat bantu sederhana bagi Kepala Shift, bukan sebagai sistem administrasi SDM yang memiliki banyak peran pengguna. Kebutuhan utamanya adalah pencatatan yang mudah, pencarian riwayat, rekap bulanan, dan pengingat jadwal. Pengingat dimaksudkan untuk membantu pengguna mengingat data cuti yang telah dicatat, bukan untuk menggantikan keputusan atasan atau prosedur persetujuan cuti.
Teknologi Progressive Web App (PWA) memungkinkan aplikasi web yang memenuhi persyaratan tertentu dipasang dan dibuka seperti aplikasi pada perangkat pengguna. Namun, kemampuan memasang aplikasi tidak otomatis berarti semua fitur berjalan di latar belakang. Notifikasi browser yang dibuat langsung dari halaman memiliki keterbatasan ketika halaman ditutup; notifikasi persisten dan push biasanya memerlukan service worker serta mekanisme pendukung. Karena itu, penelitian ini membedakan kemampuan yang ditemukan dalam source code dari kemampuan yang masih memerlukan pengujian atau pengembangan.
1.1 Rumusan Masalah
Rumusan masalah dalam kajian ini adalah bagaimana merancang aplikasi sederhana untuk membantu Kepala Shift mencatat cuti karyawan, mengelompokkan catatan berdasarkan shift, menampilkan rekap bulanan, dan menyediakan pengingat melalui browser.
1.2 Tujuan Penelitian
Tujuan penelitian adalah menjelaskan rancangan dan implementasi aplikasi pencatatan cuti berbasis PWA, mendokumentasikan alur penggunaan, serta menyusun skenario pengujian agar fungsi aplikasi dapat diverifikasi secara sistematis.
2. TINJAUAN PUSTAKA
2.1 Pencatatan Cuti Karyawan
Pencatatan cuti merupakan proses dokumentasi tanggal ketidakhadiran dan informasi karyawan. Catatan yang konsisten membantu penelusuran riwayat dan penyusunan rekapitulasi. Pada aplikasi ini, informasi yang dicatat mencakup tanggal, identitas karyawan, jenis cuti, dan shift.
2.2 Progressive Web App
PWA merupakan aplikasi yang dibangun dengan teknologi web tetapi dapat memberikan pengalaman penggunaan yang menyerupai aplikasi platform tertentu. Manifest web membantu mendefinisikan nama dan perilaku tampilan aplikasi ketika dipasang. Ketersediaan instalasi bergantung pada dukungan browser serta persyaratan penyajian, termasuk HTTPS untuk penggunaan web umum. Pada source code yang diperiksa terdapat manifest.json dengan nama aplikasi, start_url, dan display standalone, tetapi daftar ikon masih kosong; karena itu kelayakan instalasi perlu diuji dan dapat memerlukan penyempurnaan.
2.3 Penyimpanan Lokal dan Notifikasi Browser
localStorage menyediakan penyimpanan data pada browser di perangkat pengguna. Cara ini sederhana untuk prototipe satu perangkat, tetapi data tidak otomatis dibagikan ke perangkat lain dan dapat hilang jika penyimpanan browser dibersihkan. Notifications API memungkinkan browser menampilkan pemberitahuan sistem setelah pengguna memberikan izin. Dokumentasi web membedakan notifikasi nonpersisten yang bergantung pada halaman aktif dan notifikasi persisten yang dipicu melalui service worker [3]. Pada aplikasi yang dikaji, pemeriksaan waktu dilakukan melalui interval JavaScript pada halaman; karena itu, pengingat tidak boleh diklaim pasti muncul ketika aplikasi ditutup sepenuhnya.
3. METODE PENELITIAN
Penelitian menggunakan pendekatan deskriptif dan analisis artefak perangkat lunak. Objek analisis adalah paket source code “Aplikasi Pencatatan Cuti Karyawan - Aris” yang terdiri atas index.html, manifest.json, sw.js, dan README.txt. Analisis difokuskan pada kebutuhan pengguna, struktur antarmuka, alur data, teknologi yang digunakan, serta batasan implementasi. Draf ini tidak menyatakan bahwa uji pengguna atau uji fungsional telah dilaksanakan.
3.1 Tahapan Penelitian
1. Identifikasi kebutuhan: mencatat kebutuhan Kepala Shift dalam mengelola permohonan cuti.
2. Analisis source code: memeriksa menu, struktur data, penyimpanan, pengingat, dan keluaran laporan.
3. Dokumentasi rancangan: menyusun ilustrasi tampilan dan flowchart penggunaan aplikasi.
4. Penyusunan skenario uji: merumuskan pengujian black-box untuk diverifikasi secara langsung.
5. Evaluasi keterbatasan: mengidentifikasi risiko penyimpanan lokal, notifikasi, dan instalasi PWA.
3.2 Kebutuhan Fungsional
Kode Kebutuhan Keterangan berdasarkan source code :
3.3 Perangkat dan Teknologi
Berdasarkan source code, antarmuka dibangun dengan HTML, CSS, dan JavaScript dalam satu halaman utama. Data cuti, karyawan, dan pengaturan disimpan di localStorage. Manifest PWA disediakan pada manifest.json. Fitur cetak menggunakan dialog cetak browser, yang dapat digunakan untuk mencetak atau menyimpan hasil sebagai PDF. Tidak ditemukan integrasi backend, basis data daring, Firebase/Supabase, atau pengiriman WhatsApp dalam paket yang diperiksa.
4. HASIL DAN PEMBAHASAN
Pemeriksaan source code menunjukkan bahwa aplikasi telah memiliki kerangka fungsi yang sesuai dengan kebutuhan pencatatan dasar. Menu utama meliputi Beranda, Catat Cuti, Data Karyawan, Rekap Bulanan, Jadwal & Shift, dan Notifikasi. Ilustrasi berikut dibuat sebagai visualisasi dokumentasi dari struktur menu dan fungsi yang ditemukan pada source code; ilustrasi ini bukan bukti bahwa seluruh skenario telah diuji pada perangkat pengguna.
4.1 Tampilan Login
Halaman login menjadi pintu masuk pengguna. Untuk penggunaan nyata, kredensial bawaan harus diganti dan pengelolaan kata sandi perlu diperkuat. Karena versi ini merupakan prototipe sisi-klien, login pada browser tidak setara dengan autentikasi server yang aman.
4.2 Tampilan Beranda
Beranda dimaksudkan sebagai ringkasan cepat untuk membantu Kepala Shift melihat jumlah cuti dan distribusinya berdasarkan shift. Angka pada ilustrasi adalah contoh visual, bukan data hasil operasional atau pengujian.
4.3 Tampilan Pencatatan Cuti
Formulir mencatat tanggal cuti, karyawan, jenis cuti, dan shift. Data yang disimpan ke localStorage tetap berada pada browser yang digunakan. Pengguna perlu menjaga perangkat dan tidak menghapus data browser sebelum melakukan pencadangan manual.
4.4 Rekap Bulanan
Rekap bulanan membantu penelusuran jumlah cuti berdasarkan NIK dan nama karyawan. Fungsi cetak bergantung pada dialog browser; hasil PDF perlu diperiksa sebelum digunakan sebagai laporan resmi.
4.5 Tampilan Notifikasi
Source code memeriksa waktu pengingat secara berkala ketika JavaScript halaman berjalan dan izin notifikasi telah diberikan. Mekanisme ini berbeda dari push notification yang dikirim oleh server ketika aplikasi tidak aktif. Oleh sebab itu, fitur pengingat perlu diuji pada browser dan perangkat yang akan digunakan; bila dibutuhkan notifikasi saat aplikasi tertutup, sistem perlu dikembangkan dengan backend, HTTPS, service worker, dan layanan push.
4.6 Flowchart Penggunaan Aplikasi
Alur utama dimulai dari Kepala Shift membuka aplikasi dan login. Pengguna kemudian memilih menu pencatatan cuti, mengisi data, dan menyimpan catatan. Data dapat ditinjau melalui riwayat atau rekap bulanan. Menu lain menyediakan pengelolaan data karyawan, jadwal shift, pengingat, dan pencetakan laporan.
4.7 Rencana Pengujian Black-Box
Tabel berikut adalah skenario pengujian yang telah di lakukan.
4.8 Keterbatasan Sistem
4.8.1 Penyimpanan menggunakan localStorage; data tidak otomatis tersinkronisasi ke perangkat lain dan tidak memiliki pencadangan server.
4.8.2 Notifikasi menggunakan konteks halaman browser; pengingat saat aplikasi tertutup sepenuhnya belum dapat dijamin.
4.8.3 Paket manifest masih memiliki ikon kosong, sehingga kelayakan instalasi sebagai PWA perlu diperiksa dan disempurnakan.
4.8.4 Belum tersedia integrasi WhatsApp, kalender nasional otomatis, atau layanan backend.
4.8.5 ogin berbasis sisi-klien belum cocok untuk melindungi data sensitif dalam lingkungan produksi.
5. KESIMPULAN DAN SARAN
Berdasarkan analisis source code, aplikasi Pencatatan Cuti Karyawan - Aris menyediakan fungsi dasar yang relevan untuk membantu Kepala Shift mencatat cuti, mengelola data karyawan, mengelompokkan cuti berdasarkan tiga shift, meninjau riwayat dan rekap bulanan, serta mencetak laporan melalui browser. Aplikasi dibangun menggunakan teknologi web dengan manifest PWA dan menyimpan data pada localStorage. Pengingat menggunakan Notifications API dan perlu dipahami sebagai pengingat browser yang bergantung pada izin serta halaman yang berjalan, bukan sebagai push notification server yang terjamin ketika aplikasi tertutup. Sebelum digunakan secara operasional, seluruh skenario black-box pada Tabel pengujian perlu dijalankan dan hasil aktual dicatat. Pengembangan berikutnya disarankan mencakup pencadangan/penyimpanan server, autentikasi yang lebih aman, penyempurnaan ikon dan persyaratan PWA, serta mekanisme push notification bila pengingat latar belakang menjadi kebutuhan utama. Kesimpulan ini dibatasi pada analisis source code; efektivitas penggunaan belum dapat dinyatakan tanpa pengujian dan evaluasi pengguna.
DAFTAR PUSTAKA
[1] MDN Web Docs. “What is a progressive web app?” https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/What_is_a_progressive_web_app (diakses 9 Oktober 2026).
[2] MDN Web Docs. “Making PWAs installable.” https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable (diakses 9 Oktober 2026).
[3] MDN Web Docs. “Notifications API.” https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API (diakses 9 Oktober 2026
