Hajj Admin Panel

Technology Stack

📸 Screenshots

Dashboard Overview

Real-time Hajj pilgrims summary

All Performers

Record of all Hajj Performers

Pending Qurbani Page

Record of performers whose qurbani is pending

Completed Qurbani Page

Record of performers whose qurbani is completed

Add Performer Page

Page to add a new performer

Both Arabic and English Support

Admin panel supports both Arabic and English language

Core Features

1. Secure, Role-Based Authentication

• Client-Side Auth: Utilizes Firebase Authentication (Email/Password) for initial user verification against a trusted identity provider.
• Backend Protection: All API endpoints and Server Actions are protected. A custom, short-lived JSON Web Token (JWT) is issued upon successful Firebase login. This token is sent with every subsequent request and verified by a Next.js Middleware, ensuring that no unauthorized requests reach the server logic. This prevents direct, unauthenticated access to sensitive operations.

2. Real-Time Pilgrim Data Management

• Full CRUD Operations:
  • Create: Add new pilgrims via a validated, user-friendly form.
  • Read: View all pilgrims in a paginated, sortable table.
  • Update: Edit pilgrim details seamlessly in a modal dialog.
  • Delete: Safely remove records with a confirmation step to prevent accidental data loss.
• Real-Time Synchronization: The dashboard is powered by a Cloud Firestore real-time listener (
  ). Any change in the database—whether made by the current admin, another admin, or a backend process—is instantly reflected across all active client dashboards without needing a page refresh.
• Advanced Table Features:
  • Global Search: Quickly filter the entire dataset by name or passport number.
  • Column-based Filtering: Filter pilgrims by specific criteria, such as Qurbani status.
  • Pagination: Efficiently handle thousands of records with client-side pagination.

3. Automated Qurbani Status & SMS Notifications

• Status Toggling: Admins can update the Qurbani (sacrifice) status for a pilgrim from 'Pending' to 'Done' with a single click on a switch within the data table.
• Automated Workflow: Updating the status to 'Done' triggers a Next.js Server Action.
• SMS Notification: The Server Action securely calls the Twilio API using server-side credentials to dispatch an SMS notification to the pilgrim's registered phone number. The message is sent in Urdu, confirming the completion of their Qurbani. This automation eliminates manual communication and provides instant peace of mind.

4. Full Internationalization (i18n)

• Language Toggling: Users can switch between languages with a single click. The chosen language is persisted in
  .
• Dynamic Content: All UI text, labels, and messages are sourced from JSON dictionary files (
  ,
  ).
• RTL Layout Support: When Arabic is selected, the entire application layout flips to a Right-to-Left (RTL) orientation. This is handled gracefully with Tailwind CSS's RTL variants (
  ,
  ) and dynamic adjustments in component styling.

Architectural Qualities

• Security: Sensitive operations are gated behind authenticated Server Actions and API routes. Environment variables containing secrets are stored server-side and are not exposed to the client.
• Scalability: By leveraging serverless technologies like Next.js and Firebase, the application can handle significant load without manual intervention. Firestore provides scalable, real-time data access.
• Maintainability: The codebase is organized by feature, using reusable React components (ShadCN UI) and a clear separation of concerns between UI, state management, and server-side logic. Using TypeScript ensures type safety and improves developer experience.
• User Experience (UX): The interface is designed to be intuitive and efficient. Real-time updates, optimistic UI patterns (where applicable), and clear feedback (toasts, loading states) provide a smooth and responsive experience for the administrator.
• Data Integrity: Zod is used for schema validation on all forms, ensuring that data sent to the backend is in the correct format before it ever reaches the database. This prevents data corruption and provides clear, immediate feedback to the user on input errors.