feat(chatbot): integrate OpenRouter API for AI assistance in dashboard

- Added a Chatbot component to the dashboard for user interaction and support.
- Created a README for the Chatbot detailing setup, features, and usage instructions.
- Introduced environment variables for secure API key management.
- Updated app.js to include the Chatbot component.
- Implemented a configuration server to serve API keys securely.
- Enhanced styles for the Chatbot interface to improve user experience.

dashboard/README.md

@@ -0,0 +1,131 @@
+# FixMate Dashboard
+
+A modern, responsive dashboard for managing civic issue reports with an interactive map interface.
+
+## Features
+
+- **Interactive Map**: View reported issues on an interactive Leaflet map with clustering
+- **Advanced Filtering**: Filter by category, severity, status, and date range
+- **Real-time Updates**: Live status updates and filtering
+- **Responsive Design**: Works seamlessly on desktop, tablet, and mobile devices
+- **Modern UI**: Clean, professional interface with smooth animations
+- **Accessibility**: Keyboard navigation and screen reader friendly
+- **Multi-language**: Support for English and Bahasa Malaysia
+
+## UI Improvements Made
+
+### 🎨 Modern Design System
+- **Color Palette**: Updated with modern semantic colors and CSS custom properties
+- **Typography**: Inter font family for better readability
+- **Spacing**: Consistent spacing system using CSS custom properties
+- **Shadows**: Subtle shadows and depth for better visual hierarchy
+
+### 🔧 Enhanced Components
+- **Header**: Modern sticky header with improved branding and language selector
+- **Filter Panel**: Organized filter groups with hover states and better visual feedback
+- **Ticket Cards**: Modern card design with hover effects and improved typography
+- **Map Container**: Better map styling with loading states and empty state handling
+- **Detail Drawer**: Slide-out drawer with improved layout and actions
+
+### 📱 Responsive Design
+- **Mobile-first**: Optimized layouts for mobile, tablet, and desktop
+- **Flexible Grid**: CSS Grid layout that adapts to screen size
+- **Touch-friendly**: Larger touch targets for mobile interactions
+
+### ⚡ Performance & UX
+- **Loading States**: Skeleton screens and loading indicators
+- **Smooth Animations**: CSS transitions for better user experience
+- **Error Handling**: Better error states and retry mechanisms
+- **Offline Support**: Graceful handling when backend is unavailable
+
+## Technology Stack
+
+- **Frontend**: React 18, JavaScript ES6+
+- **Styling**: Modern CSS with custom properties (CSS variables)
+- **Maps**: Leaflet with marker clustering
+- **Build**: No build process - runs directly in browser
+- **Fonts**: Google Fonts (Inter)
+
+## Getting Started
+
+1. **Start the Backend**:
+   ```bash
+   cd backend
+   python main.py
+   ```
+
+2. **Open the Dashboard**:
+   Open `index.html` in your web browser, or serve it with a local server:
+   ```bash
+   # Using Python
+   python -m http.server 8000
+
+   # Using Node.js
+   npx serve .
+   ```
+
+3. **Access**: Navigate to `http://localhost:8000/dashboard/`
+
+## Project Structure
+
+```
+dashboard/
+├── index.html          # Main HTML file
+├── styles.css          # Modern CSS styles
+├── app.js              # React application
+├── i18n/               # Internationalization files
+│   ├── en.json
+│   └── ms.json
+└── data/
+    └── demo-reports.json # Sample data for testing
+```
+
+## Key Features
+
+### Map View
+- Interactive Leaflet map with OpenStreetMap tiles
+- Clustered markers for better performance
+- Click markers to view details
+- Heatmap overlay option
+
+### Filtering System
+- Category filtering (pothole, streetlight, signage, etc.)
+- Severity levels (high, medium, low)
+- Status tracking (submitted, in progress, fixed)
+- Date range filtering
+
+### Ticket Management
+- View all reported issues in a scrollable list
+- Click to navigate to location on map
+- Update status directly from the list
+- Detailed view in slide-out drawer
+
+### Responsive Breakpoints
+- Desktop: 1200px+
+- Tablet: 900px - 1200px
+- Mobile: 600px - 900px
+- Small Mobile: < 600px
+
+## Customization
+
+The design system is built with CSS custom properties, making it easy to customize:
+
+```css
+:root {
+  --primary-500: #0ea5a4;    /* Main brand color */
+  --severity-high: #dc2626;  /* High priority color */
+  --spacing-4: 1rem;         /* Base spacing unit */
+  --radius: 0.5rem;          /* Border radius */
+}
+```
+
+## Browser Support
+
+- Chrome 90+
+- Firefox 88+
+- Safari 14+
+- Edge 90+
+
+## License
+
+This project is part of the FixMate civic engagement platform.