Overview
The School Funding Management Platform is a web-based application designed to manage and facilitate the distribution of operational assistance to schools under the Ministry of Religious Affairs of Indonesia. This comprehensive system handles various aspects of the assistance program, including user management, fund allocation, verification processes, and reporting.
Features
- Multi-level User Management: The application supports different user roles including central, province, district, executive, and school levels, each with specific permissions and access.
- Fund Allocation and Distribution: Manages the allocation and distribution of funds to eligible schools based on various criteria.
- Verification Process: Implements a robust verification system for submitted documents and fund requests.
- Reporting and Analytics: Provides comprehensive reporting features for different administrative levels, including fund utilization, verification status, and overall program progress.
- Document Management: Allows users to upload, manage, and verify various documents required for the assistance program.
- Dashboard and Visualizations: Offers intuitive dashboards with data visualizations for quick insights into program status and progress.
- Announcement System: Includes a system for publishing and managing announcements for users.
- Configurable Settings: Provides administrative controls to configure various system settings and parameters.
Tech Stack
- React: The frontend is built using React, providing a dynamic and responsive user interface.
- Next.js: Utilizes Next.js for server-side rendering, routing, and overall application structure.
- TypeScript: Employs TypeScript for enhanced code quality and developer experience.
- Chakra UI: Uses Chakra UI for consistent and customizable UI components.
- React Query: Implements React Query for efficient server state management and data fetching.
- Axios: Utilizes Axios for making HTTP requests to the backend API.
- React Table: Employs React Table for creating dynamic and feature-rich tables.
- React Hook Form: Uses React Hook Form for efficient form handling and validation.
- File-Saver: Implements File-Saver for handling file downloads.
- Date-fns: Utilizes date-fns for date manipulation and formatting.
- React Icons: Incorporates React Icons for a wide range of icon options.
Key Components
- User Authentication: Implements a robust authentication system with JWT tokens.
- Role-based Access Control: Enforces access control based on user roles and permissions.
- Dynamic Form Generation: Creates dynamic forms for various data input scenarios.
- File Upload and Management: Handles file uploads for documents and reports.
- Data Visualization: Implements charts and graphs for data representation.
- Pagination: Utilizes custom pagination for handling large datasets.
- Modular Component Structure: Organizes components in a modular fashion for better maintainability.
Lessons Learned
This project highlights the importance of:
- Scalability: Designing a system that can handle data for numerous schools across different administrative levels.
- User Experience: Creating an intuitive interface for users with varying levels of technical expertise.
- Data Integrity: Ensuring accurate fund allocation and distribution through robust verification processes.
- Performance Optimization: Implementing efficient data fetching and state management strategies for handling large datasets.
- Security: Maintaining strict access controls and data protection measures for sensitive financial information.
- Flexibility: Developing a system that can adapt to changing regulations and requirements in government assistance programs.
Screenshots
