society-management-dashboard

byZxyz4545 45

# MASTER PRO MAX PROMPT — SOCIETY MANAGEMENT APP FRONTEND Act as a senior frontend developer and UI/UX designer with over 10 years of experience building professional Society Management ERP applications. **Reference Website:** https://mygate.com/ ## 1. Project Objective Build a complete, professional, responsive Society Management Web Application inspired by MyGate's features, workflows, and user experience. I want an actual application dashboard, not just a landing page or static design. First inspect my existing workspace, account resources, project files, assets, and available society information. Reuse accessible resources wherever possible. **Important: Develop only the frontend. Do not create a new backend or database.** Do not copy MyGate's proprietary source code, logo, or branding. Create an original design with comparable functionality. ## 2. Technology Requirements Use strictly: - HTML5 - CSS3 - Vanilla JavaScript (ES6+) Do not use React, Vue, Angular, Next.js, TypeScript, Tailwind CSS, Bootstrap, or other frontend frameworks. Avoid build tools and unnecessary dependencies. The application must run in a modern browser. ## 3. UI/UX Design Create a premium SaaS dashboard with a clean, modern interface, professional typography, white and light-grey backgrounds, navy-blue and teal accents, consistent spacing, and clear visual hierarchy. Include a collapsible sidebar, top navigation, search, notifications, user profile, society selector, dashboard cards, tables, charts, filters, badges, dropdowns, and modal dialogs. Ensure the interface works smoothly on desktop, tablet, and mobile devices. ## 4. Dashboard Display total societies, buildings, flats, residents, pending visitor approvals, today's visitors, unresolved complaints, maintenance dues, upcoming events, recent notices, and recent activities. Include quick actions for adding residents, approving visitors, creating notices, registering complaints, and viewing reports. Use sample data only when actual accessible data is unavailable, and label it clearly. ## 5. Society Management Create pages for society directory, society profiles, adding and editing societies, buildings, towers, floors, flats, occupancy status, owners, tenants, society documents, contact details, and settings. Provide validated forms, search, filters, and view/edit actions. ## 6. Resident Management Create resident directories and profiles containing names, contact information, building and flat assignments, owner or tenant status, family members, vehicles, emergency contacts, verification status, and move-in/move-out details. Provide add, edit, view, search, and filtering functionality. Keep each society's records separate in the interface. ## 7. Visitors and Security Build visitor management screens for visitor requests, pre-approved visitors, approval and rejection, check-in/check-out, delivery personnel, vendors, cab drivers, domestic help, visitor history, and gate activity logs. Create a mobile-friendly security guard dashboard with large action buttons and clear status indicators. ## 8. Staff Management Provide domestic staff, security personnel, and employee directories. Include profiles, assigned flats, categories, verification status, entry logs, search, filters, and editing dialogs. ## 9. Complaints and Helpdesk Create complaint submission forms, complaint lists, categories, priorities, descriptions, staff assignments, comments, resolution notes, and history. Support Open, In Progress, On Hold, Resolved, and Closed statuses. ## 10. Maintenance and Payments Create interfaces for monthly maintenance bills, payment history, outstanding dues, receipts, late fees, billing periods, expenses, and collection reports. Display amounts in Indian Rupees (₹). Use clearly labelled sample financial data when necessary. Do not implement real payment processing or falsely claim a payment succeeded. ## 11. Notices and Community Include announcements, notice boards, events, community activities, polls, surveys, voting interfaces, and event calendars. Provide forms for creating and editing notices and events. ## 12. Amenities and Bookings Create modules for clubhouses, gyms, swimming pools, community halls, guest rooms, and sports facilities. Include availability calendars, booking requests, approval and cancellation interfaces, booking history, date/time selection, and facility rules. ## 13. Vehicles, Parking, and Documents Provide vehicle registration, parking slot assignments, visitor parking, and parking availability screens. Create document libraries for society rules, meeting minutes, notices, certificates, and other uploaded documents. Include emergency contacts and emergency announcements. Never claim a document has been uploaded unless it actually exists. ## 14. Reports and Analytics Create reports for society occupancy, resident statistics, visitor activity, complaints, maintenance collections, outstanding dues, bookings, and security activity. Include date filters, summary cards, charts, and table views. ## 15. User Roles Provide role-specific interfaces for Super Admin, Society Admin, Committee Member, Resident/Owner, Tenant, Security Guard, and Maintenance Staff. Display relevant navigation and actions for each role. Explain that frontend role selection is for demonstration only and does not provide secure backend authorization. ## 16. Multi-Society Support Support multiple societies through a society selector. Update the visible dashboard, residents, buildings, flats, visitors, complaints, notices, and reports when the selected society changes. Never mix data between societies. Reuse existing accessible records; otherwise, use clearly identified sample data. ## 17. Frontend Interactivity Implement functional navigation, active sidebar states, search, sorting, filtering, pagination, form validation, add/edit/view dialogs, confirmation messages, dropdowns, tabs, status updates, and toast notifications. When backend APIs are unavailable, use mock data or in-memory state for demonstrations. Clearly explain that changes are not permanently stored on a server. Keep API integration code separate so an existing backend can be connected later. ## 18. Project Structure Organize the application into HTML pages, CSS stylesheets, JavaScript modules, and assets. Include separate files for navigation, data handling, API integration, reusable components, and responsive layouts. Keep the source code clean, maintainable, and organized. Use only HTML, CSS, and JavaScript. ## 19. Protect Existing Resources Inspect the existing project before making changes. Preserve existing files, assets, configurations, APIs, backend code, and database connections. Do not delete or overwrite existing resources. Use only accessible information and report any access limitations. ## 20. Testing and Final Delivery Test all pages, navigation links, buttons, forms, search, filters, pagination, dialogs, responsive layouts, and JavaScript functionality. Deliver the complete frontend source code, a list of completed modules, implemented interactions, features requiring backend integration, local running instructions, known issues, and a downloadable ZIP if export is supported. **FINAL REQUIREMENT:** Deliver a polished, responsive, MyGate-inspired Society Management frontend using only HTML5, CSS3, and Vanilla JavaScript. Do not build a new backend or database. Inspect existing resources first, implement all possible frontend interactions, test thoroughly, and honestly report incomplete functionality.