KMRL DocuFlow - Employee Portal

A comprehensive document management system for Kochi Metro Rail Limited (KMRL) that addresses document overload challenges through intelligent processing, multilingual support, and role-based access control.

🚀 Features

• Multilingual Support: Full English and Malayalam language support with real-time switching
• Role-Based Dashboard: Customized interfaces for different departments (Admin, Train Operations, Engineering, Safety, Operations, Compliance)
• Document Intelligence: AI-powered document processing with OCR capabilities
• Real-time Alerts: System-wide notification system with priority-based alerts
• 3D Interactive Background: Modern, animated background with floating elements
• Responsive Design: Mobile-first design that works across all devices
• Dark/Light Theme: User preference-based theme switching

🛠 Technology Stack

• Frontend: React 18, TypeScript, Next.js 14
• Styling: Tailwind CSS, shadcn/ui components
• Animations: Framer Motion
• State Management: React Context API
• Icons: Lucide React
• Build Tool: Vite

📋 Prerequisites

• Node.js 18+
• npm or yarn package manager
• Modern web browser with ES6+ support

🚀 Quick Start

Development Setup

1. Clone the repository ```bash git clone cd metrodoc ```

2. Install dependencies ```bash npm install

   or

   yarn install ```

3. Start development server ```bash npm run dev

   or

   yarn dev ```

4. Open your browser Navigate to http://localhost:3000

Production Deployment

1. Build the application ```bash npm run build

   or

   yarn build ```

2. Start production server ```bash npm run start

   or

   yarn start ```

🌐 Language Support

Adding New Languages

1. Update language configuration in src/components/language-toggle.tsx: ```typescript const languages = [ { code: 'en', name: 'English', flag: '🇬🇧' }, { code: 'ml', name: 'മലയാളം', flag: '🇮🇳' }, { code: 'hi', name: 'हिन्दी', flag: '🇮🇳' }, // New language ] ```

2. Add translations to the translations object: ```typescript const translations = { en: { /* English translations / }, ml: { / Malayalam translations / }, hi: { / Hindi translations */ }, // New translations } ```

3. Font Support: Ensure proper font support for new languages in tailwind.config.ts

Malayalam Font Requirements

For proper Malayalam text rendering, ensure the following fonts are available:

• System Fonts: Malayalam MN, Noto Sans Malayalam
• Web Fonts: Google Fonts Noto Sans Malayalam (automatically loaded)

🔧 Backend Integration

Local Backend Setup

1. API Configuration Create a .env.local file in the root directory: ```env NEXT_PUBLIC_API_URL=http://localhost:8000/api NEXT_PUBLIC_WS_URL=ws://localhost:8000/ws DATABASE_URL=postgresql://username:password@localhost:5432/kmrl_docuflow ```

2. Required Backend Endpoints ``` POST /api/auth/login GET /api/documents POST /api/documents/upload GET /api/alerts POST /api/alerts/mark-read GET /api/departments GET /api/analytics ```

3. WebSocket Events ```

   • document_processed
   • new_alert
   • system_status
   • user_activity ```

Database Schema

Required tables for full functionality: ```sql -- Users table CREATE TABLE users ( id SERIAL PRIMARY KEY, username VARCHAR(100) UNIQUE NOT NULL, email VARCHAR(255) UNIQUE NOT NULL, role VARCHAR(50) NOT NULL, department VARCHAR(100), created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP );

-- Documents table CREATE TABLE documents ( id SERIAL PRIMARY KEY, title VARCHAR(255) NOT NULL, content TEXT, file_path VARCHAR(500), department VARCHAR(100), processed_at TIMESTAMP, accuracy_score DECIMAL(5,2), status VARCHAR(50) DEFAULT 'pending' );

-- Alerts table CREATE TABLE alerts ( id SERIAL PRIMARY KEY, type VARCHAR(50) NOT NULL, title VARCHAR(255) NOT NULL, description TEXT, department VARCHAR(100), is_read BOOLEAN DEFAULT FALSE, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); ```

🎨 Customization

Theme Configuration

Modify theme colors in tailwind.config.ts: ```typescript module.exports = { theme: { extend: { colors: { primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, // Add custom colors }, }, }, } ```

Role Configuration

Add new roles in src/pages/Dashboard.tsx: ```typescript const roleConfig = { // Existing roles... "new-role": { name: "New Role", title: "New Role Dashboard", subtitle: "Custom dashboard for new role", }, } ```

📱 Mobile Optimization

The application is fully responsive with:

• Mobile-first design approach
• Touch-friendly interface elements
• Optimized navigation for small screens
• Progressive Web App (PWA) capabilities

🔒 Security Considerations

• Authentication: Implement JWT-based authentication
• Authorization: Role-based access control (RBAC)
• Data Validation: Server-side input validation
• HTTPS: Always use HTTPS in production
• CORS: Configure proper CORS policies

🚀 Performance Optimization

• Code Splitting: Automatic route-based code splitting
• Image Optimization: Next.js Image component for optimized loading
• Caching: Browser caching for static assets
• Bundle Analysis: Use npm run analyze to analyze bundle size

📊 Monitoring & Analytics

Recommended Tools

• Error Tracking: Sentry
• Performance: Web Vitals, Lighthouse
• User Analytics: Google Analytics 4
• Uptime Monitoring: Pingdom, UptimeRobot

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

For technical support or questions:

• Email: support@kmrl.co.in
• Documentation: [Internal Wiki]
• Issue Tracker: GitHub Issues

🔄 Version History

• v1.0.0 - Initial release with core functionality
• v1.1.0 - Added Malayalam language support
• v1.2.0 - Enhanced dashboard with analytics
• v1.3.0 - Improved mobile responsiveness

---

Built with ❤️ for KMRL by the Development Team ```