Masjid Finance: School Mosque Financial Management System

Overview

Masjid Finance is a web-based financial management platform designed for the mosque at SMKN 2 Kota Bekasi. It streamlines daily infaq recording, expense tracking, and financial transparency by providing clear separation between admin and user functionalities.

The project was developed with a role-based access system, ensuring that only admins can modify records, while regular users can view transaction history and summaries.

What Users Can Do

• View Transaction History: Browse all infaq and expense records
• Filter & Search: Find transactions by date range or type
• View Financial Summary: Access aggregated income and expense data
• Interactive Charts: Visual representation of financial trends over time

Admin Features

• Add New Transactions: Record both income and expenses
• Edit & Delete Transactions: Maintain accurate financial records
• Bulk Delete: Remove multiple transactions at once
• Role Management: Admin roles assigned manually via Clerk dashboard
• Analytics Dashboard: View financial insights through charts and tables

Why I Built This

The mosque in our school conducts daily infaq collections, but records were previously stored manually in notebooks. This caused difficulties in tracking balances, filtering by date, and providing transparency to the school community. Masjid Finance solves this by providing a centralized, accessible, and easy-to-use digital system.

Tech Stack

Frontend

• Next.js – Full-stack React framework with server-side rendering
• TypeScript – Type safety for better maintainability
• TailwindCSS – Utility-first CSS framework for rapid styling
• Shadcn/UI – Modern, accessible UI components
• Recharts – Data visualization for financial analytics

Backend

• Supabase (PostgreSQL) – Cloud-hosted database for transaction storage
• Prisma ORM – Type-safe database queries and schema management
• Clerk – Authentication and role-based authorization
• Arcjet – Security and request protection
• Vercel – Deployment with global edge network

Development Highlights

• Implemented default balance of 0 for new accounts, removing the initial balance input.
• Used Clerk metadata for role assignment, synced with the users table in Supabase.
• Built real-time charts for income/expense trends using Recharts.
• Added advanced transaction filtering (by type, date range, keyword).

Impact & Results

• Improved Transparency: All users can view financial records in real-time.
• Faster Data Entry: Admins can input transactions directly from any device.
• Better Financial Insights: Graphical data makes it easier to present reports.
• Secure Role Management: Prevents unauthorized data modifications.

Future Enhancements

• Export to Excel/PDF: For financial reporting and archiving
• Multi-User Admin: Support for multiple administrators
• Offline Mode: Record transactions without internet and sync later
• Mobile-Optimized Dashboard: Enhanced experience for small screens

Key Learnings

• Role-based Access: Integrated Clerk authentication with database role syncing
• Data Visualization: Learned to transform raw transaction data into insightful charts
• Database Optimization: Applied indexes and query filters for performance
• Security Practices: Implemented access control to protect sensitive financial records