Admin Dashboard - Copy this React, Tailwind Component to your project
Create a modern and professional admin dashboard tailored for an online puja booking application. The dashboard should cater to admin users managing bookings, puja services, pandit profiles, payments, and user interactions. The design should be intuitive, user friendly, and facilitate efficient management of the platform. Ensure the dashboard is responsive, working seamlessly on desktop, tablet, and mobile devices. Below are the detailed requirements: Overall Style and Aesthetic: A clean, spiritual themed design with a serene color palette (soft blues, whites, and subtle gold accents) to reflect the cultural and spiritual nature of the app. Flat design elements with soft shadows to add depth and a professional look. Typography should be elegant yet readable, with a clear hierarchy: headers should be bold, while body text remains simple and readable. Incorporate spiritual symbols subtly (like a lotus, diya, or temple outline) to enhance the theme without being overwhelming. Header Section: Display the app logo on the left, reflecting the spiritual branding of the platform. A search bar with advanced filters to quickly find bookings, users, or pandits. Notifications icon showing alerts for new bookings, payment issues, or user queries. User profile dropdown with options for profile management, settings, and logout. Quick access icons for frequently used actions like "Add New Service" or "Manage Pandits." Sidebar Navigation: A collapsible sidebar with intuitive icons and labels for each section: Dashboard, Bookings, Services, Pandits, Users, Payments, Reports, Settings, and Support. Highlight the active section with a distinct color or indicator to guide the user. Sub menus for specific tasks, such as within Services (e.g., All Services, Add Service, Categories). Main Content Area: Dashboard Overview: Display key metrics like total bookings, upcoming pujas, available pandits, and revenue. Interactive charts (line, bar, pie charts) to show trends such as booking volume, most popular services, and revenue growth. Booking Management Table: Detailed table showing booking ID, user details, service booked, date, status, and action buttons (view, edit, cancel). Pandit Management: List of pandits with profile photos, ratings, availability status, and actions to edit or contact. Service Management: Cards or tables displaying services with quick actions to update availability, pricing, and descriptions. Detailed Pages: Booking Details Page: Show booking information, user contact, special requests, payment status, and option to communicate with the user or pandit. Pandit Profiles: Detailed profiles including experience, expertise areas, ratings, availability calendar, and contact information. Analytics Page: Insights into the most booked services, user demographics, peak booking times, and success rate of promotional campaigns. Payments Management: View payment statuses, process refunds, and manage transactions. Footer Section: Include essential links such as terms of service, privacy policy, and contact support. Display version number and copyright information subtly. Notifications & Alerts: Implement a notification system with real time alerts for new bookings, cancellations, or critical errors (e.g., failed payments). Confirmation modals for significant actions like service deletions or booking cancellations. User Experience Enhancements: Smooth loading animations and transitions between pages. Tooltips for guidance on icons and key actions. Accessibility features like adjustable font sizes and color contrast modes. Dark mode toggle for a user friendly viewing option. Responsive Design: Ensure all elements are optimized for mobile, with collapsible menus and scrollable content. Key actions like viewing bookings or managing pandit profiles should remain intuitive on smaller screens. Security and Permissions: Implement role based access controls, allowing admins to restrict access to sensitive sections based on user roles (e.g., only certain users can manage payments). Display clear permissions indicators for restricted sections.
