Ecoforpest
Full-stack pest control management platform consisting of a Laravel web backend (Admin + API) and a React Native mobile app for field technicians.
Platform manajemen jasa pest control berbasis full-stack yang terdiri dari backend web Laravel (Admin + API) dan aplikasi mobile React Native untuk teknisi lapangan.
Tech Stack
Teknologi yang Digunakan
System Architecture
Arsitektur Sistem
Ecoforpest follows a client-server architecture where the Laravel backend serves two roles: an admin web panel (Filament) for internal staff, and a RESTful API for the mobile app used by field technicians.
Ecoforpest menggunakan arsitektur client-server di mana backend Laravel berperan ganda: sebagai panel admin web (Filament) untuk staf internal, dan sebagai RESTful API untuk aplikasi mobile yang digunakan teknisi lapangan.
Authentication API
API Autentikasi
Base URL: https://docs.ecopestcontrol.co.id/api
# Public endpoints — no token required
POST /api/auth/login
# Protected endpoints — include header:
Authorization: Bearer {token}
Accept: application/json
Content-Type: application/json
| Field | Type | Required | Description |
|---|---|---|---|
| string | required | Employee email | |
| password | string | required | Employee password |
| device_name | string | optional | Device identifier |
{
"user": {
"id": 1,
"name": "John Doe",
"email": "john@example.com",
"position": {
"id": 2,
"title": "Technician"
}
},
"token": "1|abc123..."
}
Fetch detail of the logged-in technician with their current active profile and today's work order count.
Mengambil detail profil teknisi yang login beserta jumlah tugas absensi/work order miliknya hari ini.
{
"user": {
"id": 1,
"name": "John Doe"
},
"today_work_orders_count": 3
}
Destroy token and logs out user.
Menghapus token yang sedang digunakan.
{
"message": "Successfully logged out"
}
Attendance API
API Absensi
All endpoints require Bearer token. Prefix: /api/attendance
Semua endpoint membutuhkan Bearer token. Prefix: /api/attendance
Returns today's clock-in/out status, work hours, and shift info for the authenticated employee.
Mengembalikan status absensi masuk/keluar, jam kerja, dan info shift karyawan yang login.
{
"status": "present",
"clock_in": "08:00:12",
"clock_out": null
}
| Query | Description |
|---|---|
| month | Filter by month (1-12) |
| year | Filter by year |
{
"current_page": 1,
"data": [
{ "date": "2026-05-20", "status": "present" }
]
}
Returns total present days, late days, absent days, and total work hours for the month.
Mengembalikan total hari hadir, telat, absen, dan total jam kerja dalam sebulan.
{
"total_present": 20,
"total_late": 2,
"total_hours": 160.5
}
| Field | Type | Req | Description |
|---|---|---|---|
| type | string | yes | clock_in / clock_out |
| photo | file | yes | Selfie photo |
| latitude | float | yes | GPS latitude |
| longitude | float | yes | GPS longitude |
{
"message": "Clock-in successful",
"time": "08:00:15"
}
Used when employee is outside the registered attendance zone and needs to request manual override.
Digunakan saat karyawan berada di luar zona absensi terdaftar dan perlu minta pengecualian manual.
{
"status": "pending_approval"
}
Work Orders API
API Work Order
Core module for pest control job management. Prefix: /api/work-orders
Modul inti untuk manajemen pekerjaan pest control. Prefix: /api/work-orders
| Query | Options |
|---|---|
| status | Open, Pending, Hold Confirm, Confirm, Assigned, On Progress, Closed, Cancelled |
{
"data": [
{
"id": 12,
"task_code": "WO-2026-0001",
"status": "Assigned"
}
]
}
Returns work orders for the current employee grouped by month, useful for the monthly calendar view in the mobile app.
Mengembalikan work order karyawan yang login, dikelompokkan per bulan.
{
"May 2026": [
{ "id": 12, "scheduled_date": "2026-05-21" }
]
}
Full detail including relations: service, assigned employee, progress, work order package, helpers, customer info.
Detail lengkap termasuk relasi: service, karyawan yang ditugaskan, progress, paket work order, helper, info pelanggan.
{
"id": 12,
"customer": { "name": "ACME Corp" },
"service": { "name": "General Pest Control" },
"helpers": []
}
| Field | Type | Req | Description |
|---|---|---|---|
| status | string | required | On Progress, Closed, etc. |
{ "status": "On Progress" }
| Field | Type | Req | Description |
|---|---|---|---|
| progress_status | string | req | Take Order / Ketemu Client / Survey / Mulai Kerja / Tindakan / Selesai Kerja / Collect Money |
| notes | string | opt | Progress notes |
| photos[] | file[] | opt | Photo files (max 5MB each) |
| location | object | opt | {"latitude":..., "longitude":...} |
{
"message": "Progress updated successfully"
}
Submit the final service report for a completed work order. Includes treatment details, chemicals used, and technician signature.
Submit laporan servis akhir untuk work order yang selesai. Mencakup detail treatment, bahan kimia yang digunakan, dan tanda tangan teknisi.
{
"message": "Service report submitted"
}
Survey Endpoints
type options: identification, initial_check, final_check
Pilihan type: identification, initial_check, final_check
{
"form_id": 1,
"fields": [
{ "id": "f_1", "type": "text", "label": "Pest Found" }
]
}
{
"survey_form_id": 1,
"answers": {
"field_id_1": "Rat infestation found"
}
}
{
"message": "Survey answers saved"
}
Leave & Permit API
API Cuti & Izin
Standard CRUD for employee leave and permit requests. Prefix: /api/leaves and /api/permits
CRUD standar untuk pengajuan cuti dan izin karyawan. Prefix: /api/leaves dan /api/permits
List requests
{"data":[]}| Field | Description |
|---|---|
| start_date | Start of leave period |
| end_date | End of leave period |
| reason | Leave reason |
| attachment | Supporting document (optional) |
{"message":"Submitted"}Overtime API
API Lembur
CRUD for overtime requests. Prefix: /api/overtimes
CRUD untuk pengajuan lembur. Prefix: /api/overtimes
View list
[]| Field | Description |
|---|---|
| date | Overtime date |
| duration_hour | Duration in hours (float) |
| reason | Reason for overtime |
{"message":"Overtime logged"}Cash Advance API
API Kasbon
Employee cash advance requests. Prefix: /api/cash-advance
Pengajuan kasbon karyawan. Prefix: /api/cash-advance
View all cash advance history
[]| Field | Description |
|---|---|
| amount | Amount requested |
| reason | Purpose of advance |
| repayment_date | Expected repayment date |
{"message":"Advance request created"}Leader Report API
API Laporan Leader
For team leaders to submit field reports with management approval flow. Prefix: /api/leader-reports
Untuk team leader submit laporan lapangan dengan alur persetujuan manajemen. Prefix: /api/leader-reports
All submitted leader reports
[]{"status":"approved"}Schedule Planning API
API Jadwal Planning
Weekly treatment schedule management. Prefix: /api/schedule-plannings
Manajemen jadwal treatment mingguan. Prefix: /api/schedule-plannings
Fetch weekly scheduling planners.
[]Location API
API Lokasi
Called automatically by the mobile app's background location service for real-time tracking of field technicians.
Dipanggil otomatis oleh layanan lokasi latar belakang di aplikasi mobile untuk tracking real-time teknisi di lapangan.
| Field | Description |
|---|---|
| latitude | Current latitude |
| longitude | Current longitude |
{"status":"updated"}Mobile App Structure
Struktur Aplikasi Mobile
The mobile app is built with Expo (React Native) and uses file-based routing via expo-router. It communicates with the Laravel API using Bearer token authentication stored in MMKV local storage.
Aplikasi mobile dibangun dengan Expo (React Native) dan menggunakan routing berbasis file via expo-router. Berkomunikasi dengan API Laravel menggunakan autentikasi Bearer token yang disimpan di MMKV local storage.
ecoforpest-mobile/
├── app/ # Screen files (file-based routing)
├── components/ # Reusable UI components
│ ├── attendance/ # Attendance-related components
│ ├── form/ # Dynamic form system
│ └── schedulePlanning/
├── hooks/ # Custom React hooks (data fetching)
├── service/ # API client layer
│ ├── api.ts # Core fetch utilities + types
│ └── locationTracking.ts
├── types/ # TypeScript type definitions
├── utils/ # Utility functions
└── constants/ # App constants
Mobile Screens
Halaman Mobile
| Screen File | Description | Deskripsi |
|---|---|---|
| signin.tsx | Employee login screen | Halaman login karyawan |
| home.tsx | Dashboard — tasks & actions | Dasbor — tugas & aksi |
| attendance.tsx | Attendance calendar view | Ringkasan absensi dengan kalender |
| attendance-clock-in.tsx | Clock-in screen with selfie + GPS | Absensi masuk/keluar dengan selfie + GPS |
| create-leave.tsx | Leave request form | Form pengajuan cuti |
| task-maps.tsx | Work order locations on Leaflet map | Lokasi work order di peta (Leaflet) |
| form-signature.tsx | Customer signature pad | Pad tanda tangan pelanggan |
Custom Hooks
Custom Hooks
| Hook | Purpose | Fungsi |
|---|---|---|
| useAuth | Authentication state + login/logout | State autentikasi + login/logout |
| useAttendanceToday | Today's attendance data | Data absensi hari ini |
| useWorkOrderProgress | Work order progress tracking | Tracking progress work order |
| useOptimizedForm | Offline queue-based support | Form dengan dukungan offline berbasis antrian |
| useBatteryOptimization | Android battery optimization check | Cek optimasi baterai Android |
Key Components
Komponen Utama
The app includes a flexible dynamic form system under components/form/ that renders survey fields based on backend-defined schemas.
Aplikasi menyertakan sistem form dinamis fleksibel di components/form/ yang merender field survei berdasarkan skema yang didefinisikan dari backend.
Dynamic Form Components
| Component | Description |
|---|---|
| FormFieldRenderer | Renders the correct field type based on schema |
| FormFieldTextInput | Single-line text input |
| FormFieldSignature | Signature canvas field |
Web Setup Guide
Panduan Setup Web
# 1. Clone & install
git clone <repo> && cd ecoforpest-web
composer install
npm install
# 2. Environment
cp .env.example .env
php artisan key:generate
# 3. Database
# Edit .env: DB_DATABASE, DB_USERNAME, DB_PASSWORD
php artisan migrate
php artisan db:seed
# 4. Storage
php artisan storage:link
# 5. Build frontend
npm run build
# 6. Start server
php artisan serve
Mobile Setup Guide
Panduan Setup Mobile
# 1. Install dependencies
cd ecoforpest-mobile
npm install
# 2. Configure API URL
# Edit constants/ or .env to point to your Laravel backend URL
# 3. Start development
npx expo start
# 4. Run on device
npx expo run:android # Android
npx expo run:ios # iOS (requires macOS)