Back to selected workKembali ke karya terpilih

Web and mobile operationsOperasional web dan mobile

Surveyor Visit Monitoring SystemSistem Monitoring Kunjungan Surveyor

A production platform used by 10+ field surveyors and supervisors to assign, record, review, map, and report member visits across mobile and web.Platform production yang digunakan 10+ surveyor lapangan dan supervisor untuk penugasan, pencatatan, review, pemetaan, serta pelaporan kunjungan member melalui mobile dan web.

Project at a glanceRingkasan project

My rolePeran saya: Product workflow and full-stack developmentWorkflow produk dan pengembangan full-stack
UsersPengguna: 10+ users: field surveyors on mobile and supervisors on office computers10+ pengguna: surveyor lapangan melalui HP dan supervisor melalui komputer kantor
Project statusStatus project: In production and used in field operationsProduction dan digunakan di operasional lapangan
My contributionKontribusi pribadi: Product workflow design, full-stack web development, authentication, database, storage, mobile API integration, and production deployment.Perancangan workflow produk, pengembangan web full-stack, autentikasi, database, storage, integrasi API mobile, dan deployment production.

Surveyor member relation system banner showing supervisor dashboards and advisor mobile workflows

UsersPengguna: 10+ field and supervisory users10+ pengguna lapangan dan supervisor
Field accessAkses lapangan: Surveyors work from their own phonesSurveyor bekerja melalui HP masing-masing
Admin accessAkses admin: Supervisors administer from office computersSupervisor mengelola melalui komputer kantor
WorkflowWorkflow: Assignment, review, maps, and exports centralizedAssignment, review, peta, dan export terpusat

The initial problemMasalah awal

Member relation visits involve field activity and administrative control at the same time. Advisors need a practical way to receive assignments, locate members, document GET or RKM visits, capture evidence, and follow their own history from a phone.Kunjungan member relation melibatkan aktivitas lapangan dan kontrol administratif secara bersamaan. Advisor membutuhkan cara praktis untuk menerima assignment, menemukan lokasi member, mendokumentasikan kunjungan GET atau RKM, mengambil bukti, dan melihat riwayat sendiri melalui ponsel.

Administrators need a connected view for member data, review queues, assignments, advisor performance, maps, audit activity, and reporting. Without one shared flow, monitoring depends more heavily on fragmented updates and manual spreadsheet work.Administrator membutuhkan tampilan terhubung untuk data member, antrean review, assignment, performa advisor, peta, aktivitas audit, dan laporan. Tanpa satu alur bersama, monitoring lebih bergantung pada update yang terpisah dan pekerjaan spreadsheet manual.

Role and responsibilitiesPeran dan tanggung jawab

I shaped the product around the advisor and administrator workflows, then handled the full-stack web implementation across interface, authentication, authorization, database, photo storage, analytics, exports, mobile API integration, and production deployment.Saya membentuk produk berdasarkan workflow advisor dan administrator, kemudian menangani implementasi web full-stack yang mencakup antarmuka, autentikasi, otorisasi, database, storage foto, analytics, export, integrasi API mobile, dan deployment production.

I also supported operational adoption through user onboarding, review-flow design, assignment management, and reporting outputs that administrators can use without rebuilding the data in spreadsheets.Saya juga mendukung penerapan operasional melalui onboarding pengguna, perancangan alur review, pengelolaan assignment, dan output laporan yang dapat digunakan administrator tanpa menyusun ulang data di spreadsheet.

Project constraintsBatasan project

The system had to serve field users on mobile devices as well as administrators working through a wider web dashboard.Sistem harus melayani pengguna lapangan melalui perangkat mobile sekaligus administrator yang bekerja melalui dashboard web yang lebih luas.
Visit photos and GPS information required controlled access, dependable upload handling, and server-side authorization.Foto kunjungan dan informasi GPS membutuhkan akses terkontrol, proses upload yang andal, dan otorisasi di sisi server.
Maps, charts, image galleries, and export libraries needed to remain useful without slowing the main operational pages.Peta, chart, galeri foto, dan library export harus tetap berguna tanpa memperlambat halaman operasional utama.

How the system worksCara kerja sistem

A direct path from the first input to the operational result.Alur langsung dari input pertama hingga hasil operasional.

Assign the visitBerikan assignment

An administrator manages member data and assigns an RKM visit, while GET visits can be started by an advisor in the field.Administrator mengelola data member dan memberikan assignment kunjungan RKM, sedangkan kunjungan GET dapat dimulai advisor di lapangan.

Record field evidenceCatat bukti lapangan

The advisor completes the visit form, captures GPS, adds conclusions and follow-up, and uploads compressed photos.Advisor mengisi form kunjungan, mengambil GPS, menambahkan kesimpulan serta tindak lanjut, lalu mengunggah foto terkompresi.

Validate and storeValidasi dan simpan

Server-side rules validate the submission, compare location distance, store relational data, and secure photos behind signed URLs.Aturan di sisi server memvalidasi pengajuan, membandingkan jarak lokasi, menyimpan data relasional, dan melindungi foto melalui signed URL.

Review and reportReview dan laporkan

Administrators approve or reject visits, monitor trends and advisor performance, inspect maps, and export the required report.Administrator menyetujui atau menolak kunjungan, memantau tren dan performa advisor, meninjau peta, lalu mengekspor laporan yang dibutuhkan.

Technical decisionsKeputusan teknis

The stack was selected around the workflow, deployment environment, and maintenance needs.Tech stack dipilih berdasarkan workflow, lingkungan deployment, dan kebutuhan pemeliharaan.

Authorization enforced on the serverOtorisasi diterapkan di server

Role checks protect advisor and administrator routes at the server layer instead of relying on hidden interface controls.Pemeriksaan role melindungi route advisor dan administrator pada lapisan server, bukan hanya mengandalkan kontrol antarmuka yang disembunyikan.

One data flow for web and mobileSatu alur data untuk web dan mobile

The Flutter client authenticates through a route handler and uses the same Supabase-backed operational data as the web application.Klien Flutter melakukan autentikasi melalui route handler dan menggunakan data operasional berbasis Supabase yang sama dengan aplikasi web.

Field evidence optimized before transferBukti lapangan dioptimalkan sebelum dikirim

Photos are compressed on the client before upload, then retrieved in batches through signed URLs for controlled gallery access.Foto dikompresi pada client sebelum upload, kemudian diambil secara batch melalui signed URL untuk akses galeri yang terkontrol.

Location-aware visit validationValidasi kunjungan berbasis lokasi

GPS capture and distance flags help reviewers compare a visit with the registered member location.Capture GPS dan flag jarak membantu reviewer membandingkan kunjungan dengan lokasi member yang terdaftar.

Heavy features loaded when neededFitur berat dimuat saat dibutuhkan

Charts and export tools use dynamic imports, while database queries return only the fields required by each view.Chart dan tools export menggunakan dynamic import, sedangkan query database hanya mengambil field yang dibutuhkan setiap tampilan.

FrontendFrontend

React 19

Builds the component-based user interface.Membangun antarmuka pengguna berbasis komponen.

Next.js 16 (App Router)

Provides routing, Server Components, and Server Actions.Menangani routing, Server Components, dan Server Actions.

TypeScript

Maintains type safety across the application.Menjaga type safety di seluruh aplikasi.

Tailwind CSS 4

Supports a custom utility-first interface design.Mendukung desain antarmuka custom berbasis utility-first.

Framer Motion

Handles purposeful interface transitions and animation.Menangani transisi dan animasi antarmuka yang terarah.

Lucide React and Sonner

Provide interface icons and toast feedback.Menyediakan ikon antarmuka dan feedback melalui toast.

next-themes

Manages light and dark appearance modes.Mengelola mode tampilan terang dan gelap.

Recharts

Visualizes visit analytics and advisor performance.Memvisualisasikan analytics kunjungan dan performa advisor.

Leaflet and React Leaflet

Display member, assignment, and visit locations.Menampilkan lokasi member, assignment, dan kunjungan.

Backend and dataBackend dan data

Server Actions and Route Handlers

Run server logic within the Next.js application.Menjalankan logika server di dalam aplikasi Next.js.

Supabase Auth

Authenticates advisors and administrators.Mengautentikasi advisor dan administrator.

PostgreSQL and Row Level Security

Store operational data and enforce access rules close to the data layer.Menyimpan data operasional dan menerapkan aturan akses dekat dengan lapisan data.

Supabase Storage

Stores visit photos and serves them through signed URLs.Menyimpan foto kunjungan dan menyajikannya melalui signed URL.

Zod

Validates operational input before processing.Memvalidasi input operasional sebelum diproses.

Next.js Middleware and @supabase/ssr

Maintain session cookies and protect routes.Menjaga session cookie dan melindungi route.

Data and filesData dan file

browser-image-compression

Compresses field photos before upload.Mengompresi foto lapangan sebelum upload.

ExcelJS and SheetJS

Support member imports and Excel report exports.Mendukung impor member dan export laporan Excel.

jsPDF and AutoTable

Generate structured PDF reports.Menghasilkan laporan PDF yang terstruktur.

date-fns

Formats operational dates, including the WITA time zone.Memformat tanggal operasional, termasuk zona waktu WITA.

Infrastructure and mobileInfrastruktur dan mobile

Vercel

Hosts the web application with deployment from GitHub.Meng-host aplikasi web dengan deployment dari GitHub.

Git and GitHub

Provide version control and deployment workflow.Menyediakan version control dan workflow deployment.

ESLint and TypeScript

Support code quality and static checks.Mendukung kualitas kode dan pemeriksaan statis.

Flutter for Android

Provides the field client for advisors.Menyediakan klien lapangan untuk advisor.

Mobile login API

Exchanges advisor credentials for a Supabase session token through the shared API.Menukar kredensial advisor dengan token sesi Supabase melalui API yang sama.

Screens and evidenceScreenshot dan bukti

Each image documents a real part of the interface or delivery.Setiap gambar mendokumentasikan bagian nyata dari antarmuka atau proses delivery.

Open any image to inspect the full-size screen.Buka gambar untuk melihat tampilan dalam ukuran penuh.

Web AdminWeb Admin

Production screens for monitoring, review, assignments, master data, analytics, maps, users, and audit activity.Tampilan production untuk monitoring, review, assignment, master data, analytics, peta, pengguna, dan aktivitas audit.

Mobile AdvisorMobile Advisor

Field screens for secure login, GET and RKM workflows, assignments, maps, visit history, and GPS evidence.Tampilan lapangan untuk login aman, workflow GET dan RKM, assignment, peta, riwayat kunjungan, dan bukti GPS.

Back to case studyKembali ke studi kasus

Results and outcomesHasil dan dampak

Now in production for 10+ users, the system connects field visit execution with administrative monitoring. Surveyors submit visits from their own phones, while supervisors use office computers to assign work, review evidence, manage members, analyze activity, and export reports without rebuilding the workflow in spreadsheets.Kini telah production untuk 10+ pengguna, sistem menghubungkan pelaksanaan kunjungan lapangan dengan monitoring administratif. Surveyor mengirim data kunjungan melalui HP masing-masing, sedangkan supervisor menggunakan komputer kantor untuk memberikan assignment, meninjau bukti, mengelola member, menganalisis aktivitas, dan mengekspor laporan tanpa menyusun ulang workflow di spreadsheet.

UsersPengguna

10+ field and supervisory users10+ pengguna lapangan dan supervisor

Field accessAkses lapangan

Surveyors work from their own phonesSurveyor bekerja melalui HP masing-masing

Admin accessAkses admin

Supervisors administer from office computersSupervisor mengelola melalui komputer kantor

WorkflowWorkflow

Assignment, review, maps, and exports centralizedAssignment, review, peta, dan export terpusat

What I learnedHal yang dipelajari

A field system works best when mobile data entry and administrative review are designed as one continuous workflow.Sistem lapangan bekerja paling baik ketika input data mobile dan review administratif dirancang sebagai satu workflow berkelanjutan.

Authorization needs to be enforced close to both server logic and data access because interface visibility alone is not a security boundary.Otorisasi perlu diterapkan dekat dengan logika server dan akses data karena visibilitas antarmuka saja bukan batas keamanan.

Photo, map, chart, and export features require deliberate loading strategies to keep routine operational screens responsive.Fitur foto, peta, chart, dan export membutuhkan strategi loading yang terencana agar layar operasional rutin tetap responsif.

Need software that fits your business?Membutuhkan software yang sesuai dengan bisnis Anda?

Tell me about the workflow, inventory process, reporting task, web application, or customer-facing website you need to improve.Ceritakan workflow, proses inventaris, pekerjaan laporan, aplikasi web, atau website untuk pelanggan yang ingin Anda perbaiki.

Discuss your software projectDiskusikan project software Anda