design a fully responsive web app frontend using nextjs, shadcn  and custom Django APIs for TownSquare by Nshama


 NSHAMA is a leading real estate developer based in Dubai, renowned for developing integrated residential communities such as Town Square on Al Qudra Road. NSHAMA aims to enhance the digital experience for its Property Owners, Tenants, Retail Occupants, and Prospective Customers by launching this mobile application that serves as a comprehensive self-service platform.

Here’s a comprehensive list of user-facing super portal app screens for the NSHAMA Town Square community app, aligned with the project scope, feature modules, and UX best practices:

⸻
 1. Landing & Authentication
•	Login Screen – Email/Phone number field, next screen asks for OTP sent to email or phone. Users can choose to login with UAE Pass as well. No option for registration
•	Biometric Authentication Prompt – Face ID / Fingerprint.
•	Forgot Password Screen
•	Option to switch language to arabic 

⸻

2. Dashboard/Home
•	Home Dashboard Screen – Overview with widgets/cards:
•	There should an undismissable message on top when there are actions a user must take immediately, for example - Pending payment, the price in AED will be displayed along with Payment button
•	Payments
•	Services
•	Resident Pass
•	Notifications
•	Documents
•	Notices & Events
•	Notification Center Screen – All alerts and push notifications.
⸻



3. Properties
•	My Properties Screen – List view of owned/rented units.
•	Unit Detail Screen – Property info, payments, facilities, current statius (occupied, unoccupied, rented), size, parking slots, property type, Ejari Certificated (if rented - with expiry date), List of occupants, bikes and pets, tab like navigations for documents, services and payments under each property listed 
•	Option to add new occupant, bikes or pets, start new service request, etc


⸻

4. Services
•	Service Request List Screen – All service requests.
•	Raise Service Request Screen – Form + image/video upload.
•	Service Request Detail Screen – Status, chat, history. - Service request response can have attachments such as PDFs of approval documents from CRM support, can have invoice generated based on some request and showed as a reply item with View Invoice button which will open detailed invoice screen with payment options which they can pay and come back to the screen, the payment status also will be updated duly in the same thread below the last update. User can respond to the messages any time with text and attachemnts. 
•	Community Notices and events listing 


5. Payments 
•	Show total overdue on top
•	Invoices & SOA Screen – Statement of account view/download, with tabs to filter all, pending and paid invoices
•	Invoice Detail Screen – Payment status, download, share.
•	Make a Payment Screen – Integrated with Noon & UAEPG.
•	Payment Success / Failure Screen
•	Payment History Screen – With timestamps & filters.
•	Payment Reminder Screen – Upcoming due alerts.

⸻

6. Profile
•	My Profile Screen – Name, phone, email, EID/passport.
•	Edit Profile Screen – With OTP verification flow.
•	Documents & Expiry Alerts Screen – Upload/replace EID/passport.

⸻

7. Communication & Support
•	In-App Chat Support Screen – WhatsApp or chatbot.
•	FAQs / Help Center Screen – Categorized help articles.
•	Submit Feedback Screen – Ratings, suggestions, complaints.

⸻

colour pallette #212721 #F1EFE5 #F6F7C3 #EAEACC