Sistem Informasi Pendokumentasian Ahli Waris
Government administration web app for managing inheritance heir documentation at Kelurahan Pulo Gebang
Overview
A comprehensive front-end application designed to streamline the documentation process for inheritance heirs (Ahli Waris) at the Pulo Gebang Village office. The system helps administrators manage deceased person records, heir information, legal documents, and official letters through an intuitive dashboard interface.
My Role
Front End Developer
Team Size
Team (Frontend-Backend Split)
Tech Stack
Problem
Village administrative offices face challenges in managing and documenting inheritance heir records. Manual processes lead to inconsistent data entry, difficulty in tracking document status, and slow retrieval of information when needed. There was no centralized digital system for managing deceased person data, heir relationships, and supporting legal documents.
Solution
Built a modern, responsive web application with a clean dashboard interface that provides CRUD operations for all entities: Almarhum (deceased), Ahli Waris (heirs), Pengurus (administrators), Dokumen Pendukung (supporting documents), and Surat (official letters). The system features intuitive navigation with shortcuts, advanced filtering with date pickers, and a modular architecture ready for backend integration.
Key Features
- 1Dashboard with statistics and quick action shortcuts
- 2Multi-tab data management for 5 entity types (Almarhum, Ahli Waris, Pengurus, Dokumen, Surat)
- 3Advanced search and date-based filtering with MUI DatePicker
- 4Document upload interface with categorization (KTP, KK, Akta, etc.)
- 5Deep linking support via URL query parameters for direct navigation
- 6Responsive design optimized for both desktop and mobile
- 7Toast notifications for user feedback
- 8Pagination-ready tables for large datasets
Challenges & Learnings
Challenges: Designing a flexible architecture that could work with mock data during development while being easily adaptable for real API integration. Implementing complex form validations with React Hook Form and Zod while maintaining good UX. Styling MUI DatePicker components to match the existing Shadcn UI theme using CSS variables.
Learnings: Gained experience in building production-ready React applications with TypeScript and modern tooling. Learned to architect applications for future API integration using React Query patterns. Improved skills in component composition with Shadcn UI and Radix UI primitives, and implementing complex routing logic with React Router query parameters.
Result
Successfully delivered a complete front-end application ready for backend integration. The modular architecture allows the backend team to seamlessly connect their API endpoints. All UI components are fully functional with mock data, demonstrating the complete user flow for government administrative tasks.