Wifaq

A network of marriage offices ran on separate Excel sheets per branch, so nobody had one view of members, contracts, collections or how each branch and employee was doing.

1. 01Reports on registrations, branches, employees, matching, collections and monthly activity, filtered by date and branch and exported.
2. 02The existing Excel sheets are imported with column mapping, error and duplicate checks and a file of the rows that failed; exports pick their columns by permission.
3. 03Each member has a contract paid in instalments, every payment proven by a transfer receipt, with the remaining balance tracked.
4. 04A dashboard for all branches and one per branch, with key figures, charts and the latest activity.
5. 05General managers, branch managers and employees each see only what their role allows; viewing ID cards and photos is restricted and logged.
6. 06Matching suggests candidates with a compatibility score and its reasons, and follow-ups are scheduled per member.

• Built the whole frontend in Next.js 16 with TypeScript, Tailwind CSS 4 and shadcn/ui, right-to-left throughout.
• Wrote a service layer with a mock and an HTTP adapter per resource, so the app runs on in-browser demo data and switches to Django REST Framework through one environment variable.
• Built the role-based permissions and data scope for super admins, branch managers and employees.
• Built Excel import with validation and export with chosen columns, loading SheetJS only when needed.
• Kept filters, tabs and pagination in the URL, so every view is a shareable link.