Please redesign the UI for the Meeting Room Booking System described in the attached PDF using a vibrant, modern color scheme instead of a plain black-and-white theme. The UI should follow the latest UI/UX trends with a smooth, intuitive user flow. Use a professional yet eye-catching color palette (e.g., teal, coral, or soft gradients), incorporate relevant high-quality illustrations or icons representing meetings, rooms, calendars, or bookings, and ensure all forms and buttons have proper validation and hover/active effects.

The interface should feel lively, clean, and welcoming—suitable for both desktop and mobile users. Make use of soft shadows, rounded corners, and micro-interactions to enhance user experience.

Avoid dull or overly minimal designs; aim for a modern SaaS-like feel with personality and polish."

Great job on the initial version! I’d like to request some important changes and enhancements for the next iteration:

1. User Roles & Access Control:

   Implement two user roles: Admin and User.

When a user registers/signs up, their request should be sent
to the Admin for approval.

Only after Admin approval should the user be allowed to log
in.

If login is attempted without approval, display a clear and
user-friendly validation message.

2. Separate Login for Admin and User:

Admin and User must have separate login portals.

Admin credentials should not be usable in the user login,
and vice versa.

Admin should have their own dashboard and access
controls separate from regular users.

3. Admin Dashboard Features:

After logging in, Admin should be able to view:

A full dashboard overview

Number of active users

Pending user approvals

Approved/confirmed users

Admin profile management

Access to analytics and reports

4. Role & Equipment Management:

While adding roles, include options to associate available
equipment.

Admin should have full CRUD (Create, Read, Update, Delete)
control over roles and equipment.

5. Screen & Access Optimization:

Clearly define access:

Admin: Dashboard, user management, approval system, role
& equipment management, full analytics

User: Booking interface, availability check, profile, status updates

6. Reporting & Analytics:

Provide detailed analytics and reports for Admin:

Metrics like total bookings, peak hours, active/inactive
users, equipment usage, etc.

Visual elements like charts and graphs

Intelligent insights based on the system data

7. Design & UX:

Maintain a modern, vibrant, and clean UI design.

Ensure smooth user experience with responsive design and
intuitive navigation.

Include form validation, loading states, success/error
messages, and interactive feedback.

Please use your intelligence and creativity to fill in any additional necessary components to make the platform feel complete, production-ready, and highly usable.

Now make change regarding the below prompt:
User Roles & Permissions

1. Admin
   Full control over rooms, users, and bookings.

Create, update, delete rooms.

Manage users (create, edit, activate/deactivate, reset passwords, assign roles).

View all bookings and reports.

Access analytics dashboards.

Full search, filter, and reporting capabilities.

2. Project Manager
   View room availability.

Book rooms (no approval required).

Modify or cancel their own bookings.

View personal booking history.

Search and filter rooms/bookings.

🔐 Role-based access: UI and backend routes strictly gated. No cross-access possible.

🏢 Modules & Features
🔧 1. Meeting Room Management (Admin Only)
Full CRUD with validations:

Room Name

Capacity

Location (floor, building, outdoor, etc.)

Equipment (projector, whiteboard, etc.)

Availability schedule

Special instructions

Calendar View (Admin):

Full interactive calendar (with drag-to-book, color-coded slots)

Filters: Today / Tomorrow / Date range

Bookings overlaid visually

📅 2. Booking Management (Both Roles)
Booking (PM Only):

Real-time availability check

Add special requests (catering, setup)

Add attendees (with email invites)

Reschedule or cancel within policy

Booking History (Both roles):

Show past/future bookings

Show status: Booked / Cancelled

⚠️ Note: No approval flow. Slot is locked instantly upon booking.

👥 3. User Management (Admin Only)
Create/edit/delete users

Lock/unlock accounts

Reset passwords

Assign or change roles (Admin, PM)

📊 4. Reporting & Analytics (Admin Only)
Room Usage Reports:

Most/least booked

Heatmaps for usage time slots

Booking Analytics:

By user, by department, by frequency

Weekly/monthly trends

Charts & Visuals:

Line graphs, pie charts, bar charts

Export options (PDF, CSV)

🔔 5. Notification System
Booking Confirmation:

In-app + Email

Reminder:

10-minute pre-meeting alert for PM

Cancellation Notification:

Sent to all invited users

❌ No conflict alerts or approval notices needed.

🔍 6. Search & Filter Functionality
Room Filters: By capacity, equipment, location, availability

Booking Filters: By user, date, room, status

Smart Search: Instant search with debounce & fuzzy match

💎 UI/UX Design Requirements
✅ General
Responsive UI (Desktop, Tablet, Mobile)

Hamburger menu on mobile screens

Role-based layouts (Admin vs PM)

Sticky headers, clean layout

✨ WOW-Level Animations
Page transitions using Framer Motion

Hover/Focus glow and scale effects

Smooth calendar scroll/zoom animations

Loading skeletons and spinners (Shimmer UI)

Modals, toasts, and confirmations with micro-interactions

♻️Reusability
Build shared components (e.g., RoomCard, BookingModal, UserTable)

Use hooks (useBookings, useRooms, useAuth) for logic reuse

Modular architecture (feature-based folders)

⚡ Performance
Lazy load heavy components (Calendar, Reports)

Debounced inputs for search
Optimize images (WebP, lazy loading)

🧹Clean Code Practices
Remove all unused variables and components
Centralize validation schemas (e.g., using Zod or Yup)

Consistent naming conventions and typing (TypeScript strongly recommended)