icaluwu/aplikasi-karyawan-internal

Public

wasmer run icaluwu/aplikasi-karyawan-internal

IcalUwU's Hobby Project's Internal Web

Aplikasi internal karyawan berbasis Laravel 13 yang dibuat sebagai hobby/portfolio engineering project untuk mendemonstrasikan kemampuan pengembangan aplikasi perusahaan menggunakan PHP dan Laravel.

Bukan sistem payroll produksi dan tidak digunakan oleh perusahaan nyata. Semua data demo wajib berupa data fiktif/sintetis. Kalkulasi pajak/BPJS harus divalidasi kembali terhadap regulasi resmi sebelum penggunaan di lingkungan bisnis nyata.

Target

Production target:
https://aplikasi-karyawan-internal.icaluwu.site/

Portfolio utama:
https://icaluwu.site/

Website utama tetap berjalan di Vercel. Aplikasi Laravel ini dideploy secara terpisah ke Wasmer Edge dan dihubungkan melalui subdomain.

Tujuan Proyek

Proyek ini dibuat untuk menunjukkan kompetensi pada:

PHP modern.
Laravel 13.
Perancangan domain aplikasi perusahaan.
Authentication dan role-based authorization.
Payroll calculation pipeline.
Integrasi PPh 21 dan BPJS secara configurable.
Database design.
Audit trail.
Server-side interactive UI dengan Livewire.
Dashboard analytics yang menggunakan data aktual.
Automated testing.
Security hardening.
SEO pada public landing surface.
Deployment Laravel pada Wasmer Edge.
DNS custom subdomain.

Fitur Utama

Payroll

Periode penggajian.
Payroll run.
Draft → calculated → awaiting approval → approved → paid → locked.
Snapshot payslip.
Gaji pokok.
Tunjangan tetap/variabel.
Potongan.
Adjustment.
Net pay.

PPh 21

Calculator service terpisah.
Rule versioning.
Effective dates.
Tax profile.
Baseline konsep TER PP 58/2023 dan PMK 168/2023.
Breakdown kalkulasi.
Source reference per rule version.

BPJS

BPJS Kesehatan.
JHT.
JP.
JKK.
JKM.
Employee contribution.
Employer contribution.
Rate/basis/ceiling configurable.

Tunjangan

Tunjangan Jabatan.
Transport.
Makan.
Bonus/insentif.
Komponen custom.

Lembur

Pengajuan.
Approval.
Perhitungan jam.
Rule/rate configurable.
Integrasi ke payroll.

Cuti

Jenis cuti.
Entitlement.
Saldo.
Pengajuan dan approval.
Riwayat penggunaan.

Dashboard

Grafik menggunakan data dari database, bukan hard-coded.

Contoh:

Payroll expense bulanan.
PPh 21 bulanan.
BPJS bulanan.
Overtime cost.
Overtime hours per department.
Leave utilization.
Headcount.
Payroll composition.

Tech Stack

Area	Teknologi
Backend	Laravel 13
Language	PHP 8.3+
Interactive UI	Livewire 4
Templates	Blade
CSS	Tailwind CSS 4
Charts	Chart.js
Database	MySQL
Build	Vite
Tests	Pest/PHPUnit
Deployment	Wasmer Edge
Main-site hosting	Vercel
DNS target	`aplikasi-karyawan-internal.icaluwu.site`

Mengapa Livewire?

Project ini sengaja tidak menggunakan SPA React/Vue sebagai default. Sasaran utamanya adalah menunjukkan kompetensi PHP/Laravel end-to-end sekaligus menjaga frontend tetap ringan.

UI Direction

Tema: simple, responsive, light, enterprise.

Karakter:

clean
information-dense tetapi tidak ramai
typography kuat
whitespace cukup
satu accent color
sidebar sederhana
responsive mobile/tablet/desktop
SVG icons semantik
chart yang dapat dibaca

Hindari:

AI-style gradient
robot/brain icon
sparkle
blob
excessive glassmorphism
card di setiap elemen
terlalu banyak rounded pill
animasi tidak penting
emoji sebagai icon navigasi

Rencana Landing Page

Public route / menjelaskan:

Nama dan status proyek.
Alasan proyek dibuat.
Fitur payroll.
Tech stack.
Arsitektur singkat.
Security principles.
Deployment ke Wasmer.
CTA menuju demo login.
Link kembali ke icaluwu.site.
Disclaimer data demo.

Contoh copy hero

IcalUwU's Hobby Project's Internal Web

Eksperimen aplikasi internal perusahaan berbasis Laravel untuk mendemonstrasikan implementasi payroll, PPh 21, BPJS, tunjangan, lembur, cuti, authorization, audit trail, dan dashboard operasional dalam satu sistem yang ringan dan terstruktur.

Supporting label:

Hobby Project · Laravel 13 · PHP · Livewire · MySQL · Wasmer Edge

Role

Role	Akses umum
Super Admin	Seluruh sistem dan konfigurasi
HR	Karyawan, cuti, lembur, sebagian payroll
Finance	Payroll, PPh, BPJS, pembayaran, laporan
Employee	Data milik sendiri, payslip, cuti, lembur

Authorization harus diterapkan server-side menggunakan Laravel Policies/Gates/middleware.

Payroll Flow

Master Karyawan
      │
      ├── Gaji Pokok
      ├── Tunjangan
      ├── Tax Profile
      └── BPJS Profile
      │
      ▼
Payroll Period
      │
      ├── Approved Overtime
      ├── Variable Allowance
      ├── Adjustment
      └── Deduction
      │
      ▼
Payroll Calculator
      │
      ├── PPh21Calculator
      ├── BpjsCalculator
      └── OvertimeCalculator
      │
      ▼
Payslip Snapshot
      │
      ▼
Review → Approve → Paid → Locked

Money Handling

Jangan gunakan float untuk nominal uang.

Simpan rupiah menggunakan integer atau decimal presisi yang konsisten.

Semua rounding dipusatkan pada satu utility/service dan dites.

Local Development

Prerequisites

PHP 8.3+
Composer
Node.js versi LTS yang kompatibel dengan frontend dependencies
MySQL
Git
Wasmer CLI untuk pengujian/deployment target

Bootstrap

Alur aktual repository:

git clone https://github.com/icaluwu/Aplikasi-Karyawan-Laravel-13.git
cd Aplikasi-Karyawan-Laravel-13

composer install
cp .env.example .env
php artisan key:generate

npm install

php artisan migrate:fresh --seed

npm run build
php artisan test

composer run dev

Di Windows PowerShell gunakan Copy-Item .env.example .env, npm.cmd install, dan npm.cmd run build bila execution policy memblokir shim npm.ps1.

Konfigurasi bawaan aplikasi menargetkan MySQL. Test suite menggunakan SQLite in-memory yang terisolasi melalui phpunit.xml, sehingga tidak mengubah database development.

Environment

Contoh variabel penting:

APP_NAME="IcalUwU's Hobby Project's Internal Web"
APP_ENV=local
APP_DEBUG=true
APP_URL=http://localhost:8000

APP_LOCALE=id
APP_FALLBACK_LOCALE=id
APP_TIMEZONE=Asia/Jakarta

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=icaluwu_internal
DB_USERNAME=root
DB_PASSWORD=

Jangan commit .env.

Akun demo dan autentikasi

Registrasi publik sengaja tidak disediakan. Untuk membuat satu akun fiktif bagi setiap role (super_admin, hr, finance, dan employee), isi password lokal yang unik dan minimal 12 karakter, lalu jalankan seeder:

DEMO_USER_PASSWORD=isi-password-lokal-yang-kuat

php artisan migrate:fresh --seed

Pilih preset melalui DEMO_SEED_SCENARIO: minimal membuat akun dan struktur karyawan, standard menambahkan seluruh master/rule/workflow, dan showcase menambahkan tiga payroll historis paid untuk dashboard. Default adalah standard; seluruh preset otomatis no-op di production melalui guard pada setiap seeder.

Email yang dibuat memakai domain aman .test, dengan pola <role>@demo.icaluwu.test. DemoUserSeeder dilewati otomatis pada production dan tidak membuat akun bila password tidak diisi. Jangan commit atau memakai ulang password demo sebagai credential production.

Login dibatasi lima kegagalan per kombinasi email dan alamat IP selama 60 detik. Logout hanya tersedia melalui request POST dengan CSRF. Session ID diregenerasi setelah login; logout dan penonaktifan akun menginvalidasi session aktif.

Reset password via email belum diaktifkan. Notifikasi workflow tersedia sebagai opt-in dan tetap nonaktif sampai transport email production dikonfigurasi. 2FA TOTP tersedia dengan recovery code, password confirmation, proteksi replay, dan rate limit pada challenge.

Production:

APP_DEBUG=false
secure cookies
HTTPS
secrets melalui Wasmer

Untuk production wajib gunakan SESSION_SECURE_COOKIE=true, pertahankan SESSION_HTTP_ONLY=true, SESSION_SAME_SITE=lax, dan SESSION_ENCRYPT=true.

Seed Demo

Seed harus menghasilkan dashboard yang langsung bermakna.

Preset showcase saat ini menyediakan:

20–40 karyawan fiktif.
4–6 departemen.
Empat role demo.
Tiga bulan payroll historis berstatus paid.
PPh/BPJS breakdown.
Overtime.
Leave.
Allowance.
Adjustment.

Gunakan .test untuk email demo dan data identitas yang jelas palsu.

Wasmer Edge

Runbook operasional backup dan restore tersedia di BACKUP_RESTORE.md. Dokumen tersebut mewajibkan dump terenkripsi, checksum, restore drill terisolasi, serta konfirmasi target sebelum operasi destruktif.

Dokumentasi Wasmer saat ini menyediakan panduan khusus Laravel.

File deployment dapat mencakup wasmer.toml:

[dependencies]
"php/php" = "=8.3.4"

[fs]
"/app/" = "."

[[command]]
name = "run"
module = "php/php:php"
runner = "wasi"

[command.annotations.wasi]
main-args = ["-t", "/app/public", "-S", "localhost:8080"]

Verifikasi versi PHP package Wasmer saat deploy. Laravel 13 membutuhkan PHP 8.3+.

Database Wasmer

Wasmer Edge app bersifat stateless/ephemeral. Jangan menyimpan database pada filesystem instance.

Gunakan MySQL persistent. Wasmer mendukung database capability MySQL pada region tertentu.

Pastikan app dan database ditempatkan dengan locality yang masuk akal.

Domain: Vercel + Wasmer

Arsitektur DNS:

icaluwu.site
└── Website utama
    └── Vercel

aplikasi-karyawan-internal.icaluwu.site
└── DNS record khusus subdomain
    └── Wasmer Edge Laravel App

Langkah umum:

Deploy Laravel ke Wasmer.
Pastikan URL *.wasmer.app sehat.
Di Wasmer App → Settings → Domains, tambahkan: aplikasi-karyawan-internal.icaluwu.site
Wasmer akan menunjukkan DNS record yang diperlukan.
Jika DNS domain dikelola Vercel, buka Vercel Domains/DNS.
Tambahkan record untuk host aplikasi-karyawan-internal menggunakan nilai persis dari Wasmer.
Jangan mengubah record apex icaluwu.site.
Tunggu verifikasi DNS.
Verifikasi TLS.
Ubah APP_URL production ke custom domain.
Verifikasi canonical dan OG URL.

Jangan menebak target CNAME sebelum Wasmer menampilkan value resmi.

Security

Baseline:

No public registration.
Rate limit login.
CSRF.
Server-side authorization.
Secure session cookies.
CSP/security headers.
Audit trail.
No secrets in frontend/repository.
Production debug OFF.
Input validation.
IDOR protection.
Locked payroll history.
Synthetic demo data only.

robots.txt bukan security boundary.

SEO & Indexing

Public landing page

Harus memiliki:

<html lang="id">
unique <title>
meta description
canonical
OG tags
og:image
H1
structured data
semantic alt text
favicon
sitemap
clean 404

Internal area

Harus:

noindex,nofollow,noarchive
tidak masuk sitemap
tetap membutuhkan auth/authorization

robots / AI crawling

Tambahkan:

robots.txt
block crawler AI yang dipilih
llms.txt
compatibility lms.txt

Tentang `view-source`

Target “viewsource empty” tidak digunakan sebagai security requirement karena secara teknis browser dapat melihat resource yang memang dikirim kepadanya.

Sebagai gantinya:

tidak ada secret di source,
tidak ada internal note sensitif,
tidak ada database credential,
tidak ada source map production publik,
data terotorisasi hanya dikirim setelah pemeriksaan server-side.

Performance

Zero console error.
Zero obvious broken asset.
No jQuery.
No second frontend framework.
Chart.js lazy/dynamic import.
Pagination.
Aggregate data on server.
Avoid N+1.
Production source maps disabled.
Audit bundle size.
Jangan load chart library di landing/login.

SEO Files

Expected:

public/
├── robots.txt
├── sitemap.xml
├── llms.txt
├── lms.txt
├── favicon.ico
└── og/
    └── internal-web-og.webp

Sitemap boleh digenerate secara route/controller bila lebih maintainable.

404

Gunakan custom 404 Bahasa Indonesia.

Copy singkat:

Halaman tidak ditemukan

Halaman yang Anda cari tidak tersedia atau alamatnya telah berubah.

CTA:

Kembali ke Beranda
Dashboard, jika user sudah login

Tidak ada stack trace.

Test Commands

Sebelum release:

php artisan test
php artisan route:list
npm run build

Untuk test database bersih:

php artisan migrate:fresh --seed
php artisan test

Cara Menggunakan Dengan Codex

Saat memulai sesi coding, gunakan instruksi seperti:

Baca SKILL.md, README.md, dan TARGET.md sepenuhnya.
Kerjakan milestone aktif paling awal yang belum selesai.
Jangan lompat milestone.
Sebelum coding, inspeksi repository saat ini.
Ikuti security, testing, performance, UI, dan deployment contract di SKILL.md.
Setelah perubahan, jalankan test/build relevan dan laporkan file yang berubah,
test yang dijalankan, serta acceptance criteria yang sudah terpenuhi.

Untuk task spesifik:

Baca SKILL.md dan TARGET.md.
Kerjakan hanya target P0-04 Payroll Engine.
Jangan hard-code PPh/BPJS di controller.
Tambahkan test untuk happy path, edge case, authorization, dan immutability.
Jangan tandai selesai jika test gagal.

Reference

Laravel 13: https://laravel.com/docs/13.x/releases
Laravel Starter Kits: https://laravel.com/docs/13.x/starter-kits
Wasmer Laravel: https://docs.wasmer.io/edge/guides/laravel/
Wasmer Custom Domains: https://docs.wasmer.io/edge/learn/custom-domains/
Wasmer App Configuration: https://docs.wasmer.io/edge/configuration/
DJP PP 58/2023: https://pajak.go.id/id/peraturan/tarif-pemotongan-pajak-penghasiian-pasal-21-atas-penghasilan-sehubungan-dengan-pekerjaan
DJP PMK 168/2023: https://www.pajak.go.id/index.php/id/peraturan/petunjuk-pelaksanaan-pemotongan-pajak-atas-penghasilan-sehubungan-dengan-pekerjaan-jasa-1

License / Portfolio Note

Tentukan lisensi repository secara terpisah.

Jika repository public:

jangan publish secrets,
jangan publish real employee data,
jangan publish real payroll records,
jangan publish credential demo yang dipakai di production,
jelaskan bahwa proyek adalah portfolio/hobby project.

Aplikasi internal karyawan berbasis Laravel 13.