Smart Campus Resource Optimization Dashboard

I've designed a modern, clean dashboard UI for your Smart Campus Resource Optimization System using React and Tailwind CSS.

The dashboard I've designed includes all the requested modules for your Smart Campus Resource Optimization System:

1. Laboratory Booking Management System - Features a grid view of labs with availability status, filters, and booking functionality.
2. Weekly Automated Event Reports - Includes analytics, downloadable reports, and a list of recent events with attendance data.
3. Library Management System - Provides book inventory management and borrowing history tracking.
4. Event Recommendation System - Suggests venues based on requirements with detailed information and a map view.
5. Hostel Logging - Tracks room occupancy, check-in/out logs, and maintenance requests.
6. Counseling Services - Allows booking sessions with counselors and joining group sessions.

The UI follows your requested layout with:

• A top bar containing the university logo, search, notifications, and user profile
• A collapsible sidebar with icons and labels for navigation
• A main view with responsive card layouts and data visualizations

The design uses a clean, modern aesthetic with:

• Light mode with pastel colors (blue, green, lavender)
• Inter font (via Tailwind's default font stack)
• Subtle animations for hover states and transitions
• Rounded buttons with soft shadows

The dashboard is fully responsive and will adapt to different screen sizes, from mobile to desktop.

I'll fix the export issue in the event-recommendation.tsx file. The error occurs because there might be a mismatch between the component name in the file and what's being imported.

I've fixed the issue by:

1. Creating a new version of the event-recommendation.tsx file with the proper export statement:

   export function EventRecommendation() { // Component code }

2. Fixed the SelectItem values in the attendance dropdown to properly escape the less than and greater than symbols:

   <SelectItem value="small">Small (&lt; 50)</SelectItem> <SelectItem value="medium">Medium (50-200)</SelectItem> <SelectItem value="large">Large (200-500)</SelectItem> <SelectItem value="xlarge">Extra Large (&gt; 500)</SelectItem>

3. Verified that the import statement in dashboard-page.tsx correctly references the component:

   import { EventRecommendation } from "@/components/event-recommendation"

The error was likely caused by syntax issues in the SelectItem values or a problem with how the component was exported. The new file should resolve the error and allow the dashboard to render correctly.