E-Form Frontend

Frontend untuk sistem manajemen data karyawan E-Form. Aplikasi ini adalah single-page application berbasis React yang menggunakan Vite dan berkomunikasi dengan backend melalui REST API.

Fitur

• Login, registrasi, logout, lupa/reset password, dan refresh token.
• Dashboard admin dan user.
• Admin dapat melihat, mencari, membuat, mengubah, menghapus, mengaktifkan, dan menonaktifkan data karyawan.
• User dapat melihat dan mengubah profil serta mengganti password.
• Upload dan preview dokumen CV, KTP, dan NPWP.
• Theme light/dark dan notifikasi toast.

Teknologi

• React 19 + TypeScript
• Vite 8
• React Router 7
• TanStack React Query
• Axios
• Zustand
• Tailwind CSS 4
• React Hook Form + Yup

Prasyarat

• Node.js versi yang mendukung TypeScript 6 dan Vite 8
• Backend E-Form berjalan dan menyediakan API pada base URL yang dikonfigurasi

Menjalankan secara lokal

npm install
cp .env.example .env

Atur URL API pada .env:

VITE_API_URL=http://localhost:8080/api/v1

Kemudian jalankan development server:

npm run dev

Secara default, Vite menampilkan aplikasi pada http://localhost:5173.

Script

Perintah	Keterangan
npm run dev	Menjalankan development server
npm run build	Type-check dan membuat production build
npm run lint	Menjalankan Oxlint pada source code
npm run preview	Menjalankan preview hasil production build

Konfigurasi environment

Variable	Default	Keterangan
VITE_API_URL	http://localhost:8080/api/v1	Base URL REST API backend

Hanya variable dengan prefix VITE_ yang dapat digunakan oleh kode frontend. Jangan commit .env yang berisi konfigurasi sensitif.

Pada production, VITE_API_URL harus diset sebagai GitHub Actions repository variable karena nilainya ditanam ke bundle saat Docker image dibuild. Runtime container tidak mengubah nilai tersebut.

Route utama

Role	Route	Keterangan
Public	/login	Login
Public	/register	Registrasi karyawan
Public	/forgot-password	Meminta reset password
Public	/reset-password	Reset password
Admin	/admin/dashboard	Dashboard admin
Admin	/admin/employees	Daftar karyawan
Admin	/admin/employees/new	Tambah karyawan
Admin	/admin/employees/:id	Detail karyawan
Admin	/admin/employees/:id/edit	Edit karyawan
User	/user/dashboard	Dashboard dan profil user
User	/user/profile/edit	Edit profil
User	/user/change-password	Ganti password

Struktur source

src/
├── components/ Komponen UI dan layout
├── pages/ Halaman auth, admin, dan user
├── routes/ Konfigurasi route dan proteksi role
├── services/ Akses API backend
├── store/ State auth, theme, dan toast
├── types/ Model dan kontrak data API
└── utils/ Helper form, dokumen, tanggal, dan class name

API diakses melalui src/services, dengan base URL dan interceptor auth yang didefinisikan di src/services/http.ts.