diff --git a/.env.template b/.env.template new file mode 100644 index 0000000..80b50a5 --- /dev/null +++ b/.env.template @@ -0,0 +1,4 @@ +NEON_POSTGRES=postgres:// +NVIDIA_API= +GEMINI_API_KEY= +mbkautheVar={ "APP_NAME": "ChatAPI", "SESSION_SECRET_KEY": "123", "IS_DEPLOYED": "f", "LOGIN_DB": "postgres://", "MBKAUTH_TWO_FA_ENABLE": "false", "COOKIE_EXPIRE_TIME": 2, "DOMAIN": "mbktechstudio.com", "loginRedirectURL": "/chatbot" } \ No newline at end of file diff --git a/.github/workflows/autoMerge.yml b/.github/workflows/autoMerge.yml deleted file mode 100644 index e50e8de..0000000 --- a/.github/workflows/autoMerge.yml +++ /dev/null @@ -1,64 +0,0 @@ -name: Auto Merge Test Branch to Main - -on: - push: - branches: - - test # Trigger on push to the test branch only - paths: - - 'test/*' # Trigger only when files in the test branch are updated - -jobs: - automerge: - runs-on: ubuntu-latest - steps: - - name: Checkout code - uses: actions/checkout@v3 - - - name: Check for merge to test - id: check_merge - run: | - # Check if a merge was just made into the test branch - git fetch origin - target_branch=$(git rev-parse --abbrev-ref HEAD) - if [[ "$target_branch" == "test" ]]; then - echo "::set-output name=merge_to_test::true" - else - echo "::set-output name=merge_to_test::false" - fi - - - name: Check for Conflicts - if: steps.check_merge.outputs.merge_to_test == 'true' - run: | - git fetch origin - git diff --check origin/main test - - - name: Merge Test into Main - if: steps.check_merge.outputs.merge_to_test == 'true' && steps.Check_for_Conflicts.outcome == 'success' - run: | - git config --global user.email "actions@github.com" - git config --global user.name "GitHub Actions" - git checkout main - git merge --no-ff -m "Automatically merged test branch (from merge)" test - # Check for conflicts before pushing - git status - - - name: Resolve Conflicts (Optional but crucial) - if: steps.check_merge.outputs.merge_to_test == 'true' && steps.Check_for_Conflicts.outcome == 'failure' - run: | - echo "Merge conflict detected! Please resolve conflicts manually." - # Insert code to attempt conflict resolution, if possible - # Using a tool like `jq` or `sed` or another more advanced method - # Example for a simple conflict on a JSON file - # (replace with your appropriate logic) - - # if [[ $(git status | grep "error") ]]; then - # echo "Conflicts still exist after conflict handling!" - # exit 1 - # fi - - - - name: Commit and Push Changes - if: steps.check_merge.outputs.merge_to_test == 'true' && steps.Check_for_Conflicts.outcome == 'success' - run: | - git push origin main - diff --git a/README.md b/README.md index 5c05620..6060712 100644 --- a/README.md +++ b/README.md @@ -1,119 +1,220 @@ -# ChatAPI -ChatAPI is a robust AI chatbot application designed to deliver seamless and customizable interactions with AI models. Developed using Node.js, Express, and Handlebars, it supports multiple AI providers and offers an intuitive interface for managing chat histories, settings, and more. +# 🤖 ChatAPI - AI Chat Assistant + +A modern, full-featured AI chat application powered by Google Gemini API with advanced user management, conversation history, and admin dashboard. + +![Node.js](https://img.shields.io/badge/Node.js-18+-green.svg) +![Express.js](https://img.shields.io/badge/Express.js-4.21+-blue.svg) +![PostgreSQL](https://img.shields.io/badge/PostgreSQL-Database-blue.svg) +![License](https://img.shields.io/badge/License-MIT-yellow.svg) + +## 🌟 Features + +### 🎯 Core Features +- **AI-Powered Chat**: Intelligent conversations using Google Gemini API +- **User Authentication**: Secure login/logout system with session management +- **Conversation History**: Persistent chat history with organized conversation threads +- **Real-time Chat**: Modern, responsive chat interface +- **Multiple AI Models**: Support for various AI models including Gemini and NVIDIA APIs + +### 🎨 User Experience +- **Modern UI**: Clean, responsive design with dark/light theme support +- **Font Customization**: Adjustable font sizes for better accessibility +- **Message Formatting**: Support for markdown, code highlighting, and rich text +- **Mobile Responsive**: Optimized for all device sizes +- **Real-time Updates**: Live chat updates and typing indicators + +### 🔧 Admin Features +- **Admin Dashboard**: Comprehensive management panel +- **User Management**: View and manage all users +- **Chat Analytics**: Monitor conversation statistics +- **Message Limits**: Configurable daily message limits per user +- **System Monitoring**: Server uptime and performance metrics + +### 📊 Advanced Features +- **Message Limits**: Daily message quotas with customizable limits +- **Temperature Control**: Adjustable AI response creativity +- **Conversation Threading**: Organized chat sessions with unique IDs +- **Export Functionality**: Export conversation history +- **Search & Filter**: Advanced search through chat history + +## 🚀 Quick Start + +### Prerequisites +- Node.js 18 or higher +- PostgreSQL database +- Google Gemini API key -## Key Features +### Installation -- **Multi-Model Compatibility**: Supports AI models like Gemini, NVIDIA, and Mallow. -- **Customizable User Experience**: Adjust themes, font sizes, temperature, and model preferences. -- **Chat History Management**: Save, retrieve, and delete chat histories effortlessly. -- **Modern Interface**: Clean, responsive design with features like skeleton loading, copy-to-clipboard for code blocks, and styled tables. -- **Admin Dashboard**: Manage AI model configurations and quotas with ease. -- **Robust Error Handling**: Comprehensive error management for API requests and database operations. +1. **Clone the repository** + ```bash + git clone https://github.com/yourusername/ChatAPI.git + cd ChatAPI + ``` -## Technology Stack +2. **Install dependencies** + ```bash + npm install + ``` -- **Backend**: Node.js, Express.js -- **Database**: PostgreSQL -- **AI Integration**: Google Gemini API -- **Authentication**: Custom-built authentication system -- **Frontend**: Handlebars templating engine -- **Styling**: Custom CSS -- **Performance Enhancements**: Compression and minification enabled +3. **Set up environment variables** + ```bash + cp .env.template .env + ``` + Edit `.env` with your configuration (see [Environment Variables](#-environment-variables)) -## Prerequisites +4. **Set up the database** + ```bash + # Import the database schema + psql -U your_username -d your_database -f model/db.sql + ``` -- Node.js (v14 or higher) -- PostgreSQL database -- Google Cloud Platform account (for Gemini API) -- Properly configured environment variables - -## Environment Variables - -Create a `.env` file in the root directory with the following variables: - -```env -NEON_POSTGRES=your_postgres_connection_string -Main_SECRET_TOKEN=your_secret_token -session_seceret_key=your_session_secret -IsDeployed=true_or_false -UserCredentialTable=your_credentials_table_name -RECAPTCHA_SECRET_KEY=your_recaptcha_secret -GEMINI_API_KEY=your_gemini_api_key -GOOGLE_APPLICATION_CREDENTIALS=path_to_google_credentials -``` +5. **Start the application** + ```bash + npm start + ``` + +6. **Access the application** + - Main Application: `http://localhost:3030` + - Admin Dashboard: `http://localhost:3030/admin` -## Get Free API +## 🔧 Environment Variables -### Gemini -https://aistudio.google.com/app/apikey -### Nvidia(llama) +### Required Variables +| Variable | Description | Example | +|----------|-------------|---------| +| `NEON_POSTGRES` | PostgreSQL connection string | `postgres://user:pass@host:5432/db` | +| `GEMINI_API_KEY` | Google Gemini API key | `AIzaSyDXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX` | -## Installation Guide +### Optional Variables -1. Clone the repository: - ```bash - git clone https://github.com/MIbnEKhalid/ChatAPI - cd ChatAPI - ``` +| Variable | Description | Default | +|----------|-------------|---------| +| `NVIDIA_API` | NVIDIA AI API key | - | +| `PORT` | Server port | `3030` | +| `NODE_ENV` | Environment mode | `development` | -2. Install dependencies: - ```bash - npm install - ``` +## 🗄️ Database Schema -3. Set up the database: - - Update the connection strings in your `.env` file. - - [`routes/pool.js`](routes/pool.js) will automatically create tables in db from [`model/db.sql`](model/db.sql) +The application uses PostgreSQL with the following main tables: -4. Start the development server: - ```bash - npm run dev - ``` +- **`ai_history_chatapi`**: Stores conversation history and metadata +- **`user_settings_chatapi`**: User preferences and settings +- **`user_message_logs_chatapi`**: Daily message usage tracking - The application will be accessible at `http://localhost:3030`. +## 🛠️ Development -## API Endpoints +### Project Structure +``` +ChatAPI/ +├── index.js # Main application entry point +├── package.json # Dependencies and scripts +├── vercel.json # Vercel deployment configuration +├── model/ +│ └── db.sql # Database schema +├── routes/ +│ ├── main.js # Main chat routes +│ ├── dashboard.js # Admin dashboard routes +│ ├── pool.js # Database connection pool +│ └── checkMessageLimit.js # Message limit middleware +├── views/ +│ ├── mainPages/ # Main application pages +│ ├── admin/ # Admin dashboard pages +│ ├── layouts/ # Handlebars layouts +│ └── staticPage/ # Static pages +├── public/ +│ └── Assets/ # Static assets (CSS, JS, images) +``` -### Chat Endpoints -- `POST /api/chat` - Interact with the AI. -- `GET /api/chat/history` - Retrieve chat history. -- `GET /api/chat/history/:id` - Fetch specific chat history. -- `POST /api/chat/history` - Save chat history. -- `DELETE /api/chat/history/:id` - Remove chat history. +### Available Scripts -### User Settings -- `GET /api/settings` - Retrieve user settings. -- `POST /api/settings` - Update user settings. +```bash +npm start +``` + +### Tech Stack + +- **Backend**: Node.js, Express.js +- **Database**: PostgreSQL with connection pooling +- **Template Engine**: Handlebars +- **Authentication**: Custom session management (mbkauthe) +- **AI Integration**: Google Gemini API +- **Frontend**: Vanilla JavaScript, HTML5, CSS3 +- **Deployment**: Vercel-ready configuration + +## 📱 API Endpoints + +### Chat API +- `GET /chatbot` - Main chat interface +- `POST /api/chat` - Send message to AI +- `GET /api/chat-history` - Retrieve conversation history +- `POST /api/save-chat` - Save conversation +- `DELETE /api/delete-chat/:id` - Delete conversation + +### User Management +- `GET /admin/dashboard` - Admin dashboard +- `GET /admin/users` - User management +- `GET /admin/chats` - Chat management +- `POST /api/user-settings` - Update user preferences ### Authentication -- `POST /api/auth/login` - Log in a user. -- `POST /api/auth/logout` - Log out a user. -- `GET /api/auth/check` - Verify authentication status. +- `POST /login` - User login +- `POST /logout` - User logout +- `GET /register` - User registration page -## Project Structure +## 🔐 Authentication & Security +- Session-based authentication +- CSRF protection +- Input validation and sanitization +- SQL injection prevention +- Rate limiting for API endpoints +- Message limit enforcement + +## 🎨 Customization + +### Themes +- Dark theme (default) +- Light theme +- Custom CSS variables for easy theming + +### AI Models +- Google Gemini 1.5 Flash (default) +- NVIDIA AI models (optional) +- Configurable temperature settings + +### User Settings +- Adjustable font sizes +- Theme preferences +- Daily message limits +- Model selection + +## 📊 Monitoring & Analytics + +- Real-time user activity tracking +- Message usage statistics +- System performance metrics +- Conversation analytics +- Error logging and monitoring + +### Manual Deployment +```bash +npm start ``` -├── routes/ # API routes and controllers -├── views/ # Handlebars templates -├── public/ # Static assets -├── documentation/ # Project documentation -├── index.js # Main application file -└── package.json # Project dependencies -``` -## Contribution Guidelines +## 📝 License + +This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. -1. Fork the repository. -2. Create a feature branch (`git checkout -b feature/AmazingFeature`). -3. Commit your changes (`git commit -m 'Add some AmazingFeature'`). -4. Push to the branch (`git push origin feature/AmazingFeature`). -5. Open a Pull Request. +## 👨‍💻 Author -## License +[**Muhammad Bin Khalid**](https://github.com/MIbnEKhalid/) -This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details. +[**Maaz Waheed**](https://github.com/42Wor/) +- Developer and Maintainer +- [MBK Tech Studio](https://mbktechstudio.com) -## Authors +## Contact -Developed by Muhammad Bin Khalid (MIbnEKhalid) and Maaz Waheed (42Wor) at mbktechstudio. +For questions or contributions, please contact Muhammad Bin Khalid at [mbktechstudio.com/Support](https://mbktechstudio.com/Support/?Project=MIbnEKhalidWeb), [support@mbktechstudio.com](mailto:support@mbktechstudio.com) or [chmuhammadbinkhalid28.com](mailto:chmuhammadbinkhalid28.com). \ No newline at end of file diff --git a/env.md b/env.md deleted file mode 100644 index 59e7500..0000000 --- a/env.md +++ /dev/null @@ -1,14 +0,0 @@ -### Environment Variables Documentation - -Below is the list of environment variables used in the application along with their descriptions: - -- **NEON_POSTGRES1**: Placeholder for the first PostgreSQL database connection string or identifier. -- **NEON_POSTGRES**: Placeholder for the primary PostgreSQL database connection string or identifier. -- **Main_SECRET_TOKEN**: Secret token used for authentication or encryption purposes. -- **session_seceret_key**: Key used to secure session data. -- **IsDeployed**: Boolean flag indicating whether the application is deployed (`true` or `false`). -- **UserCredentialTable**: Name of the database table storing user credentials. -- **RECAPTCHA_SECRET_KEY**: Secret key for Google reCAPTCHA integration. -- **GEMINI_API_KEY_maaz_waheed**: API key for accessing the Gemini service, specific to the user "maaz_waheed". - -> **Note**: Replace placeholder values (`123`) with actual secrets or configuration values in a secure manner. \ No newline at end of file diff --git a/index.js b/index.js index cda5f8f..0b68bf8 100644 --- a/index.js +++ b/index.js @@ -38,7 +38,7 @@ router.use( // Configure Handlebars router.engine("handlebars", engine({ partialsDir: [ - path.join(__dirname, "views/templates"), + path.join(__dirname, "node_modules/mbkauthe/views"), path.join(__dirname, "views/notice"), path.join(__dirname, "views") ], @@ -70,12 +70,162 @@ router.engine("handlebars", engine({ lt: function (a, b) { return a < b; }, + lte: function (a, b) { + return a <= b; + }, + gte: function (a, b) { + return a >= b; + }, add: function (a, b) { return a + b; }, subtract: function (a, b) { return a - b; }, + multiply: function (a, b) { + return a * b; + }, + divide: function (a, b) { + if (b === 0) return 0; + return a / b; + }, + jsonb_array_length: function (jsonArray) { + if (!jsonArray) return 0; + if (typeof jsonArray === 'string') { + try { + return JSON.parse(jsonArray).length; + } catch (e) { + return 0; + } + } + if (Array.isArray(jsonArray)) { + return jsonArray.length; + } + return 0; + }, + includes: function (array, value) { + if (!array) return false; + if (Array.isArray(array)) { + return array.includes(value); + } + return false; + }, + len: function (value) { + if (!value) return 0; + if (typeof value === 'string') return value.length; + if (Array.isArray(value)) return value.length; + if (typeof value === 'object') return Object.keys(value).length; + return 0; + }, + isEmpty: function (value) { + if (!value) return true; + if (typeof value === 'string') return value.length === 0; + if (Array.isArray(value)) return value.length === 0; + if (typeof value === 'object') return Object.keys(value).length === 0; + return false; + }, + isNotEmpty: function (value) { + return !this.isEmpty(value); + }, + first: function (array) { + if (!array || !Array.isArray(array)) return null; + return array[0]; + }, + last: function (array) { + if (!array || !Array.isArray(array)) return null; + return array[array.length - 1]; + }, + slice: function (array, start, end) { + if (!array || !Array.isArray(array)) return []; + return array.slice(start, end); + }, + join: function (array, separator) { + if (!array || !Array.isArray(array)) return ''; + return array.join(separator || ','); + }, + split: function (string, separator) { + if (!string || typeof string !== 'string') return []; + return string.split(separator || ','); + }, + capitalize: function (str) { + if (!str || typeof str !== 'string') return ''; + return str.charAt(0).toUpperCase() + str.slice(1); + }, + uppercase: function (str) { + if (!str || typeof str !== 'string') return ''; + return str.toUpperCase(); + }, + lowercase: function (str) { + if (!str || typeof str !== 'string') return ''; + return str.toLowerCase(); + }, + concat: function (...args) { + // Remove the options object that is provided by Handlebars + const options = args.pop(); + return args.join(''); + }, + default: function (value, defaultValue) { + return value || defaultValue; + }, + or: function (...args) { + // Remove the options object that is provided by Handlebars + const options = args.pop(); + return args.find(arg => !!arg) || false; + }, + not: function (value) { + return !value; + }, + mod: function (a, b) { + if (b === 0) return 0; + return a % b; + }, + abs: function (value) { + return Math.abs(value); + }, + round: function (value, precision) { + if (precision) { + return Math.round(value * Math.pow(10, precision)) / Math.pow(10, precision); + } + return Math.round(value); + }, + floor: function (value) { + return Math.floor(value); + }, + ceil: function (value) { + return Math.ceil(value); + }, + min: function (...args) { + const options = args.pop(); + return Math.min(...args); + }, + max: function (...args) { + const options = args.pop(); + return Math.max(...args); + }, + formatNumber: function (num, decimals) { + if (typeof num !== 'number') return '0'; + return num.toFixed(decimals || 0); + }, + formatBytes: function (bytes) { + if (bytes === 0) return '0 Bytes'; + const k = 1024; + const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; + const i = Math.floor(Math.log(bytes) / Math.log(k)); + return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; + }, + formatDuration: function (seconds) { + if (!seconds) return '0s'; + const h = Math.floor(seconds / 3600); + const m = Math.floor((seconds % 3600) / 60); + const s = Math.floor(seconds % 60); + if (h > 0) return `${h}h ${m}m ${s}s`; + if (m > 0) return `${m}m ${s}s`; + return `${s}s`; + }, + formatPercent: function (value, total) { + if (!total || total === 0) return '0%'; + return Math.round((value / total) * 100) + '%'; + }, range: function (start, end) { const result = []; for (let i = start; i <= end; i++) { @@ -122,8 +272,196 @@ Handlebars.registerHelper('divide', function (value, divisor, multiplier) { return (value / divisor) * multiplier; }); +Handlebars.registerHelper('multiply', function (a, b) { + return a * b; +}); + +Handlebars.registerHelper('subtract', function (a, b) { + return a - b; +}); + +Handlebars.registerHelper('add', function (a, b) { + return a + b; +}); + +Handlebars.registerHelper('gte', function (a, b) { + return a >= b; +}); + +Handlebars.registerHelper('lte', function (a, b) { + return a <= b; +}); + +// Additional commonly used helpers +Handlebars.registerHelper('jsonb_array_length', function (jsonArray) { + if (!jsonArray) return 0; + if (typeof jsonArray === 'string') { + try { + return JSON.parse(jsonArray).length; + } catch (e) { + return 0; + } + } + if (Array.isArray(jsonArray)) { + return jsonArray.length; + } + return 0; +}); + +Handlebars.registerHelper('includes', function (array, value) { + if (!array) return false; + if (Array.isArray(array)) { + return array.includes(value); + } + return false; +}); + +Handlebars.registerHelper('len', function (value) { + if (!value) return 0; + if (typeof value === 'string') return value.length; + if (Array.isArray(value)) return value.length; + if (typeof value === 'object') return Object.keys(value).length; + return 0; +}); + +Handlebars.registerHelper('isEmpty', function (value) { + if (!value) return true; + if (typeof value === 'string') return value.length === 0; + if (Array.isArray(value)) return value.length === 0; + if (typeof value === 'object') return Object.keys(value).length === 0; + return false; +}); + +Handlebars.registerHelper('isNotEmpty', function (value) { + return !Handlebars.helpers.isEmpty(value); +}); + +Handlebars.registerHelper('or', function (...args) { + const options = args.pop(); + return args.find(arg => !!arg) || false; +}); + +Handlebars.registerHelper('not', function (value) { + return !value; +}); + +Handlebars.registerHelper('concat', function (...args) { + const options = args.pop(); + return args.join(''); +}); + +Handlebars.registerHelper('default', function (value, defaultValue) { + return value || defaultValue; +}); + +Handlebars.registerHelper('capitalize', function (str) { + if (!str || typeof str !== 'string') return ''; + return str.charAt(0).toUpperCase() + str.slice(1); +}); + +Handlebars.registerHelper('uppercase', function (str) { + if (!str || typeof str !== 'string') return ''; + return str.toUpperCase(); +}); + +Handlebars.registerHelper('lowercase', function (str) { + if (!str || typeof str !== 'string') return ''; + return str.toLowerCase(); +}); + +Handlebars.registerHelper('mod', function (a, b) { + if (b === 0) return 0; + return a % b; +}); + +Handlebars.registerHelper('abs', function (value) { + return Math.abs(value); +}); + +Handlebars.registerHelper('round', function (value, precision) { + if (precision) { + return Math.round(value * Math.pow(10, precision)) / Math.pow(10, precision); + } + return Math.round(value); +}); + +Handlebars.registerHelper('floor', function (value) { + return Math.floor(value); +}); + +Handlebars.registerHelper('ceil', function (value) { + return Math.ceil(value); +}); + +Handlebars.registerHelper('formatNumber', function (num, decimals) { + if (typeof num !== 'number') return '0'; + return num.toFixed(decimals || 0); +}); + +Handlebars.registerHelper('formatBytes', function (bytes) { + if (bytes === 0) return '0 Bytes'; + const k = 1024; + const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; + const i = Math.floor(Math.log(bytes) / Math.log(k)); + return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; +}); + +Handlebars.registerHelper('formatDuration', function (seconds) { + if (!seconds) return '0s'; + const h = Math.floor(seconds / 3600); + const m = Math.floor((seconds % 3600) / 60); + const s = Math.floor(seconds % 60); + if (h > 0) return `${h}h ${m}m ${s}s`; + if (m > 0) return `${m}m ${s}s`; + return `${s}s`; +}); + +Handlebars.registerHelper('formatPercent', function (value, total) { + if (!total || total === 0) return '0%'; + return Math.round((value / total) * 100) + '%'; +}); + +Handlebars.registerHelper('join', function (array, separator) { + if (!array || !Array.isArray(array)) return ''; + return array.join(separator || ','); +}); + +Handlebars.registerHelper('split', function (string, separator) { + if (!string || typeof string !== 'string') return []; + return string.split(separator || ','); +}); + +Handlebars.registerHelper('first', function (array) { + if (!array || !Array.isArray(array)) return null; + return array[0]; +}); + +Handlebars.registerHelper('last', function (array) { + if (!array || !Array.isArray(array)) return null; + return array[array.length - 1]; +}); + +Handlebars.registerHelper('slice', function (array, start, end) { + if (!array || !Array.isArray(array)) return []; + return array.slice(start, end); +}); + +Handlebars.registerHelper('min', function (...args) { + const options = args.pop(); + return Math.min(...args); +}); + +Handlebars.registerHelper('max', function (...args) { + const options = args.pop(); + return Math.max(...args); +}); + + router.set("view engine", "handlebars"); -router.set("views", path.join(__dirname, "views")); +router.set("views", [ + path.join(__dirname, "views"), + path.join(__dirname, "node_modules/mbkauthe/views") +]); // Serve static files router.use( @@ -146,22 +484,10 @@ router.get(["/", "/info/main"], (req, res) => { return res.render("staticPage/index.handlebars", { layout: false }); }); -router.get(["/home", "/dashboard"], (req, res) => { +router.get(["/home"], (req, res) => { return res.redirect("/chatbot"); }); -router.get("/info/Terms&Conditions", (req, res) => { - return res.render("staticPage/Terms&Conditions.handlebars", { layout: false }); -}); - -router.get("/info/FAQs", async (req, res) => { - res.render("staticPage/FAQs.handlebars", { layout: false }); -}); - -router.get("/info/Credits", async (req, res) => { - res.render("staticPage/Credits.handlebars"), { layout: false }; -}); - router.use(mbkAuthRouter); router.use("/", mainRoutes); @@ -177,13 +503,28 @@ router.get('/simulate-error', (req, res, next) => { router.use((req, res) => { console.log(`Path not found: ${req.url}`); - return res.render("staticPage/404"); + return res.status(404).render("Error/dError.handlebars", { + layout: false, + code: 404, + error: "Not Found", + message: "The requested page was not found.", + pagename: "Home", + page: `/dashboard`, + }); }); router.use((err, req, res, next) => { console.error(err.stack); res.status(500); - res.render('templates/Error/500', { error: err }); + return res.status(500).render("Error/dError.handlebars", { + layout: false, + code: 500, + error: "Internal Server Error", + message: "An unexpected error occurred on the server.", + details: err, + pagename: "Home", + page: `/dashboard`, + }); }); const port = 3030; diff --git a/netlify.toml b/netlify.toml deleted file mode 100644 index dd3b949..0000000 --- a/netlify.toml +++ /dev/null @@ -1,7 +0,0 @@ -[build] - # Replace "npm run build" with your actual build command. - command = "npm run build" - publish = "public" - -[dev] - port = 8080 \ No newline at end of file diff --git a/package.json b/package.json index 5109404..cdccc64 100644 --- a/package.json +++ b/package.json @@ -4,8 +4,6 @@ "main": "index.js", "type": "module", "scripts": { - "dev": "nodemon index.js", - "build": "node index.js", "start": "nodemon index.js" }, "author": "Muhammad Bin Khalid", diff --git a/public/Assets/Images/Chatdashboard.png b/public/Assets/Images/Chatdashboard.png new file mode 100644 index 0000000..e08327f Binary files /dev/null and b/public/Assets/Images/Chatdashboard.png differ diff --git a/public/Assets/Images/Error/403.jpg b/public/Assets/Images/Error/403.jpg deleted file mode 100644 index ad27128..0000000 Binary files a/public/Assets/Images/Error/403.jpg and /dev/null differ diff --git a/public/Assets/Images/Error/CatStuck.png b/public/Assets/Images/Error/CatStuck.png deleted file mode 100644 index 5900fa0..0000000 Binary files a/public/Assets/Images/Error/CatStuck.png and /dev/null differ diff --git a/public/Assets/Images/Userdashboard.png b/public/Assets/Images/Userdashboard.png new file mode 100644 index 0000000..c7a57ac Binary files /dev/null and b/public/Assets/Images/Userdashboard.png differ diff --git a/public/Assets/Images/chatbot.png b/public/Assets/Images/chatbot.png index cd67f5e..0036100 100644 Binary files a/public/Assets/Images/chatbot.png and b/public/Assets/Images/chatbot.png differ diff --git a/public/Assets/Images/dashboard.png b/public/Assets/Images/dashboard.png index 9f3f591..e633919 100644 Binary files a/public/Assets/Images/dashboard.png and b/public/Assets/Images/dashboard.png differ diff --git a/public/Assets/Images/mobile_chatbot.jpeg b/public/Assets/Images/mobile_chatbot.jpeg new file mode 100644 index 0000000..a6e1a41 Binary files /dev/null and b/public/Assets/Images/mobile_chatbot.jpeg differ diff --git a/public/Assets/Images/mobile_setting.jpeg b/public/Assets/Images/mobile_setting.jpeg new file mode 100644 index 0000000..7b97c33 Binary files /dev/null and b/public/Assets/Images/mobile_setting.jpeg differ diff --git a/public/Assets/Images/mobile_sidebar.jpeg b/public/Assets/Images/mobile_sidebar.jpeg new file mode 100644 index 0000000..5532dd0 Binary files /dev/null and b/public/Assets/Images/mobile_sidebar.jpeg differ diff --git a/public/Assets/Images/settings.png b/public/Assets/Images/settings.png new file mode 100644 index 0000000..1c9dd9d Binary files /dev/null and b/public/Assets/Images/settings.png differ diff --git a/public/Assets/Scripts/header.js b/public/Assets/Scripts/header.js deleted file mode 100644 index c240f6e..0000000 --- a/public/Assets/Scripts/header.js +++ /dev/null @@ -1,111 +0,0 @@ -// Sticky Navigation Menu JS Code -let nav = document.querySelector("nav"); -let scrollBtn = document.querySelector(".scroll-button a"); - -if (nav && scrollBtn) { - console.log(scrollBtn); - let val; - window.onscroll = function () { - if (document.documentElement.scrollTop > 20) { - nav.classList.add("sticky"); - scrollBtn.style.display = "block"; - } else { - nav.classList.remove("sticky"); - scrollBtn.style.display = "none"; - } - }; -} else { - if (!nav) console.log("Element with class 'nav' not found."); - if (!scrollBtn) console.log("Element with class 'scroll-button a' not found."); -} - -// Side Navigation Menu JS Code -let body = document.querySelector("body"); -let navBar = document.querySelector(".navbar"); -let menuBtn = document.querySelector(".menu-btn"); -let cancelBtn = document.querySelector(".cancel-btn"); - - -if (navBar && menuBtn && cancelBtn) { - menuBtn.onclick = function () { - navBar.classList.add("active"); - menuBtn.style.opacity = "0"; - menuBtn.style.pointerEvents = "none"; - if (body) body.style.overflow = "hidden"; - if (scrollBtn) scrollBtn.style.pointerEvents = "none"; - }; - cancelBtn.onclick = function () { - navBar.classList.remove("active"); - menuBtn.style.opacity = "1"; - menuBtn.style.pointerEvents = "auto"; - if (body) body.style.overflow = "auto"; - if (scrollBtn) scrollBtn.style.pointerEvents = "auto"; - }; -} else { - if (!navBar) console.log("Element with class 'navbar' not found."); - if (!menuBtn) console.log("Element with class 'menu-btn' not found."); - if (!cancelBtn) console.log("Element with class 'cancel-btn' not found."); -} - - -let lftmenuBtn = document.querySelector(".menu-btn-left"); -let lftcancelBtn = document.querySelector(".cancel-btn-left"); - -if (navBar && lftmenuBtn && lftcancelBtn) { - lftmenuBtn.onclick = function () { - navBar.classList.add("active"); - lftmenuBtn.style.opacity = "0"; - lftmenuBtn.style.pointerEvents = "none"; - if (body) body.style.overflow = "hidden"; - if (scrollBtn) scrollBtn.style.pointerEvents = "none"; - }; - lftcancelBtn.onclick = function () { - navBar.classList.remove("active"); - lftmenuBtn.style.opacity = "1"; - lftmenuBtn.style.pointerEvents = "auto"; - if (body) body.style.overflow = "auto"; - if (scrollBtn) scrollBtn.style.pointerEvents = "auto"; - }; -} else { - if (!lftmenuBtn) console.log("Element with class 'menu-btn-left' not found."); - if (!lftcancelBtn) console.log("Element with class 'cancel-btn-left' not found."); -} - -// Side Navigation Bar Close While Clicking Navigation Links -let navLinks = document.querySelectorAll(".menu li a"); - -if (navLinks.length > 0) { - for (var i = 0; i < navLinks.length; i++) { - navLinks[i].addEventListener("click", function () { - if (navBar) navBar.classList.remove("active"); - if (menuBtn) { - menuBtn.style.opacity = "1"; - menuBtn.style.pointerEvents = "auto"; - } - }); - } -} else { - console.log("No elements found with class 'menu li a'."); -} - - -// Side Navigation Bar Close While Clicking Navigation Links -let navLinksl = document.querySelectorAll(".menu li a"); - -if (navLinksl.length > 0) { - for (var i = 0; i < navLinksl.length; i++) { - navLinksl[i].addEventListener("click", function () { - if (navBar) navBar.classList.remove("active"); - if (lftmenuBtn) { - lftmenuBtn.style.opacity = "1"; - lftmenuBtn.style.pointerEvents = "auto"; - } - }); - } -} else { - console.log("No elements found with class 'menu li a'."); -} - -function reloadPage() { - location.reload(); -} \ No newline at end of file diff --git a/public/Assets/Scripts/menu.js b/public/Assets/Scripts/menu.js deleted file mode 100644 index 8867017..0000000 --- a/public/Assets/Scripts/menu.js +++ /dev/null @@ -1,247 +0,0 @@ - -document.addEventListener('DOMContentLoaded', () => { - const linkContextMenu = document.getElementById('linkContextMenu'); - const pageContextMenu = document.getElementById('pageContextMenu'); - const contextMenus = document.querySelectorAll('.custom-context-menu'); - let activeMenu = null; // Track the currently active menu for keyboard navigation - let menuItems = []; // Track menu items for keyboard navigation - let currentMenuItemIndex = -1; // Track current selected menu item index - - // --- Configuration Variables --- - const mobileBreakpoint = 768; // Screen width in pixels to consider as mobile - const viewportPadding = 10; // Padding in pixels when adjusting menu position - const darkThemeToggleKey = 'D'; // Key to press to toggle dark theme (case-insensitive) - const iconClassName = 'icon-class'; // Class name used for icon elements (can be null or empty string if not used) - const longPressDuration = 500; // Duration for long press in milliseconds - // --- End Configuration --- - - // Function to hide all context menus - function hideContextMenus() { - contextMenus.forEach(menu => { - menu.style.display = 'none'; - }); - activeMenu = null; - menuItems = []; - currentMenuItemIndex = -1; - } - - // Function to show context menu at mouse position, with viewport check - function showContextMenu(menu, event) { - hideContextMenus(); // Hide any previously shown menus - menu.style.display = 'block'; - activeMenu = menu; - menuItems = Array.from(menu.querySelectorAll('[data-action]')); // Get all menu items - currentMenuItemIndex = -1; // Reset selected index - focusMenuItem(); // Focus on the first item if available - - const menuWidth = menu.offsetWidth; - const menuHeight = menu.offsetHeight; - const viewportWidth = window.innerWidth; - const viewportHeight = window.innerHeight; - - let menuLeft = event.clientX; - let menuTop = event.clientY; - - // Check if menu goes off-screen horizontally (right side) - if (menuLeft + menuWidth > viewportWidth) { - menuLeft = viewportWidth - menuWidth - viewportPadding; // Adjust to the right edge, with padding - } - if (menuLeft < 0) { // Check if menu goes off-screen horizontally (left side) - menuLeft = viewportPadding; // Adjust to the left edge, with padding - } - - // Check if menu goes off-screen vertically (bottom side) - if (menuTop + menuHeight > viewportHeight) { - menuTop = viewportHeight - menuHeight - viewportPadding; // Adjust to the bottom edge, with padding - } - if (menuTop < 0) { // Check if menu goes off-screen vertically (top side) - menuTop = viewportPadding; // Adjust to the top edge, with padding - } - - menu.style.left = menuLeft + 'px'; - menu.style.top = menuTop + 'px'; - } - - // Function to show link context menu - function showLinkMenu(event, targetElement) { - showContextMenu(linkContextMenu, event); - linkContextMenu.dataset.linkUrl = targetElement.href || targetElement.src; // Store link URL - } - - // Function to show page context menu - function showPageMenu(event) { - showContextMenu(pageContextMenu, event); - } - - // Event listener for right-click on the document - document.addEventListener('contextmenu', function(event) { - event.preventDefault(); // Prevent default browser context menu - let targetElement = event.target; - const isIcon = iconClassName && targetElement.classList.contains(iconClassName); // Check for icon if class name is defined - if (targetElement.tagName === 'A' || targetElement.tagName === 'IMG' || isIcon) { // Check for link or icon - showLinkMenu(event, targetElement); - } else { - showPageMenu(event); - } - }); - - // Event listener for left-click on the document to hide menus - document.addEventListener('click', function(event) { - if (!event.target.closest('.custom-context-menu')) { // Clicked outside menu - hideContextMenus(); // Hide context menus if clicked outside - } - }); - - // Event listener to handle clicks on context menu items - document.addEventListener('click', function(event) { - if (event.target.closest('.custom-context-menu')) { - const action = event.target.dataset.action; - const linkUrl = linkContextMenu.dataset.linkUrl; // Get the stored link URL - - if (action === 'openNewTab' && linkUrl) { - window.open(linkUrl, '_blank'); - } else if (action === 'openNewWindow' && linkUrl) { - window.open(linkUrl, '_blank', 'noopener,noreferrer'); // For security - } else if (action === 'openCurrentTab' && linkUrl) { - window.location.href = linkUrl; // Open in the current tab - } - else if (action === 'home' || action === 'terms' || action === 'role') { - // Navigation is already handled by tag in HTML - } - - hideContextMenus(); // Hide menu after action - } - }); - - // Dark Theme Toggle (on 'D' key press) - document.addEventListener('keydown', function(event) { - if (event.key.toLowerCase() === darkThemeToggleKey.toLowerCase()) { // Case-insensitive key check - contextMenus.forEach(menu => { - menu.classList.toggle('dark-theme'); - }); - } - }); - - - // --- Touch Support --- - let touchStartX = 0; - let touchStartY = 0; - let touchTimer; - - function clearTouchTimer() { - clearTimeout(touchTimer); - } - - function handleLinkTouchStart(event) { - if (event.touches.length === 1) { // Single touch - touchStartX = event.touches[0].clientX; - touchStartY = event.touches[0].clientY; - touchTimer = setTimeout(() => { - // Long press detected - event.preventDefault(); // Prevent default touch behavior - const targetElement = event.target; - const isIcon = iconClassName && targetElement.classList.contains(iconClassName); - if (targetElement.tagName === 'A' || targetElement.tagName === 'IMG' || isIcon) { - showLinkMenu(event, targetElement); - } - }, longPressDuration); - } - } - - function handlePageTouchStart(event) { - if (event.touches.length === 1) { // Single touch - touchStartX = event.touches[0].clientX; - touchStartY = event.touches[0].clientY; - touchTimer = setTimeout(() => { - // Long press detected - event.preventDefault(); // Prevent default touch behavior - const targetElement = event.target; - const isIcon = iconClassName && targetElement.classList.contains(iconClassName); - if (!(targetElement.tagName === 'A' || targetElement.tagName === 'IMG' || isIcon) && !event.target.closest('.custom-context-menu')) { - showPageMenu(event); - } - }, longPressDuration); - } - } - - - function handleTouchEnd() { - clearTouchTimer(); - } - - function handleTouchMove(event) { - if (event.touches.length > 1) { - clearTouchTimer(); // Cancel if multi-touch - return; - } - const touchMoveX = event.touches[0].clientX; - const touchMoveY = event.touches[0].clientY; - const touchThreshold = 10; // Pixel threshold for swipe detection - - if (Math.abs(touchMoveX - touchStartX) > touchThreshold || Math.abs(touchMoveY - touchStartY) > touchThreshold) { - clearTouchTimer(); // Cancel if moved too much (swipe) - } - } - - const linkTargets = document.querySelectorAll('a, img'); // Add img for image support if needed - linkTargets.forEach(target => { - target.addEventListener('touchstart', handleLinkTouchStart); - target.addEventListener('touchend', handleTouchEnd); - target.addEventListener('touchmove', handleTouchMove); - target.addEventListener('touchcancel', handleTouchEnd); // In case touch is interrupted - }); - - document.addEventListener('touchstart', handlePageTouchStart); - document.addEventListener('touchend', handleTouchEnd); - document.addEventListener('touchmove', handleTouchMove); - document.addEventListener('touchcancel', handleTouchEnd); - - - // --- Keyboard Navigation --- - function focusMenuItem() { - if (menuItems.length > 0) { - currentMenuItemIndex = 0; - menuItems[currentMenuItemIndex].focus(); - } - } - - function navigateMenuItems(direction) { - if (!activeMenu || menuItems.length === 0) return; - - if (direction === 'down') { - currentMenuItemIndex++; - if (currentMenuItemIndex >= menuItems.length) { - currentMenuItemIndex = 0; // Wrap around to the top - } - } else if (direction === 'up') { - currentMenuItemIndex--; - if (currentMenuItemIndex < 0) { - currentMenuItemIndex = menuItems.length - 1; // Wrap around to the bottom - } - } - - menuItems[currentMenuItemIndex].focus(); - } - - - document.addEventListener('keydown', function(event) { - if (activeMenu) { - if (event.key === 'ArrowDown') { - navigateMenuItems('down'); - event.preventDefault(); // Prevent page scroll - } else if (event.key === 'ArrowUp') { - navigateMenuItems('up'); - event.preventDefault(); // Prevent page scroll - } else if (event.key === 'Enter') { - if (currentMenuItemIndex !== -1 && menuItems[currentMenuItemIndex]) { - menuItems[currentMenuItemIndex].click(); // Simulate click on focused item - event.preventDefault(); - } - } else if (event.key === 'Escape') { - hideContextMenus(); // Close menu on Escape key - event.preventDefault(); - } - } - }); - -}); \ No newline at end of file diff --git a/public/Assets/Style/Preview.css b/public/Assets/Style/Preview.css deleted file mode 100644 index 92d56df..0000000 --- a/public/Assets/Style/Preview.css +++ /dev/null @@ -1,294 +0,0 @@ -/* Preview.css - Refined Styles */ - -/* --- Root Variables for Color Palette (Optional but Good Practice) --- */ -:root { - --preview-bg: #2e3038; /* Slightly lighter than editor bg */ - --preview-text-color: #e0e0e0; /* Softer white text */ - --heading-color: #ffffff; /* Pure white for strong headings */ - --link-color: #7cb3ff; /* Lighter, more vibrant blue links */ - --link-hover-color: #a9d4ff; - --code-bg: #383a47; /* Monokai-ish code background */ - --code-text-color: #f8f8f2; /* Monokai-ish code text */ - --blockquote-bg: #3f424f; /* Blockquote background */ - --blockquote-border: #7cb3ff; /* Blockquote border matches link color */ - --hr-color: #4e5264; /* Horizontal rule color */ - --table-border: #4e5264; /* Table border color */ - --table-header-bg: #454957; /* Table header background */ - --table-stripe-bg: #353842; /* Table even row stripe */ - --copy-button-bg: #7cb3ff; /* Copy button background */ - --copy-button-hover-bg: #a9d4ff; -} - - -/* General styles for the preview content area */ -.preview-content { - max-width: 950px; /* Slightly wider max-width for content */ - margin: 0 auto; /* More top/bottom margin */ - padding: 10px 10px; /* Increased padding for more spacious feel */ - background-color: transparent; /* Use root variable */ - border-radius: 6px; /* Slightly more rounded corners */ - font-family: 'Roboto', sans-serif; - color: var(--preview-text-color); /* Use root variable */ - line-height: 1.8; /* Further improved line height */ - word-wrap: break-word; - height: 100%; - font-size: 1.05rem; /* Slightly larger base font size */ -} - -/* Headings within the preview content */ -.preview-content h1, -.preview-content h2, -.preview-content h3, -.preview-content h4, -.preview-content h5, -.preview-content h6 { - font-family: 'Roboto', sans-serif; /* Reverted to Roboto for headings for better consistency */ - font-weight: 700; /* Bold headings */ - color: var(--heading-color); /* Use root variable - pure white for strong headings */ - margin-top: 20px; /* More top margin for headings */ - margin-bottom: 20px; /* More bottom margin for headings */ - line-height: 1.3; - letter-spacing: -0.02em; /* Slightly tighter letter spacing for headings */ - text-transform: none; /* Removed uppercase for a cleaner look - can re-enable if desired */ -} - -.preview-content h1 { - font-size: 2rem; /* Slightly larger h1 */ - border-bottom: 0.0625rem solid var(--hr-color); /* Added subtle bottom border to h1 */ - padding-bottom: 0.3em; -} - -.preview-content h2 { - font-size: 2.2rem; -} - -.preview-content h3 { - font-size: 1.8rem; -} - -.preview-content h4 { - font-size: 1.5rem; -} - -.preview-content h5 { - font-size: 1.25rem; -} - -.preview-content h6 { - font-size: 1.1rem; - color: var(--preview-text-color); /* Slightly muted h6 */ - font-weight: 500; -} - -/* Paragraphs within the preview content */ -.preview-content p { - margin-bottom: 20px; /* Increased paragraph bottom margin */ - font-size: 0.875rem; /* Match base font size */ - color: var(--preview-text-color); -} - -/* Links within the preview content */ -.preview-content a { - color: var(--link-color); /* Use root variable - brighter blue */ - text-decoration: none; - font-weight: 500; /* Slightly bolder links */ - transition: color 0.3s ease, text-shadow 0.3s ease; /* Added text-shadow transition */ -} - -.preview-content a:hover { - color: var(--link-hover-color); /* Lighter blue on hover */ - text-decoration: underline; - text-shadow: 0 0 3px var(--link-hover-color); /* Subtle glow on hover */ -} - -/* Lists within the preview content */ -.preview-content ul, -.preview-content ol { - margin-left: 30px; /* Slightly increased list indentation */ - margin-bottom: 20px; /* Increased list bottom margin */ -} - -.preview-content li { - margin-bottom: 10px; /* Increased list item bottom margin */ - line-height: 1.6; -} - -/* Code blocks within the preview content */ -.preview-content pre { - background-color: var(--code-bg); /* Use root variable - Monokai-ish */ - color: var(--code-text-color); /* Use root variable - Monokai-ish */ - padding: 20px; /* Increased code block padding */ - border-radius: 8px; - overflow-x: auto; - margin-bottom: 25px; /* Increased code block bottom margin */ - font-family: 'Fira Code', monospace; - font-size: 0.95rem; /* Slightly larger code font size */ - line-height: 1.6; - border: 1px solid var(--hr-color); /* Added subtle border to code blocks */ -} - -.preview-content pre code { - display: block; - padding: 0; - background: none; - color: inherit; -} - -/* Style for inline code */ -.preview-content code:not(pre code) { - font-family: 'Fira Code', monospace; - background-color: var(--code-bg); /* Use same code background for inline */ - color: var(--code-text-color); /* Use same code text color for inline */ - padding: 3px 6px; - border-radius: 5px; - font-size: 0.9rem; - border: 1px solid var(--hr-color); /* Added subtle border to inline code too */ -} - -/* Blockquotes */ -.preview-content blockquote { - border-left: 6px solid var(--blockquote-border); /* Use root variable - link color border */ - background-color: var(--blockquote-bg); /* Use root variable */ - padding: 20px 25px; /* Increased blockquote padding */ - margin: 20px 0; /* Increased blockquote margin */ - font-style: italic; - color: var(--preview-text-color); /* Use preview text color for blockquote text */ - border-radius: 0 8px 8px 0; - quotes: "\201C""\201D""\2018""\2019"; /* Proper quotes */ -} - -.preview-content blockquote::before { - color: var(--blockquote-border); - content: open-quote; - font-size: 4em; - line-height: 0.1em; - margin-right: 0.25em; - vertical-align: -0.4em; -} - - -.preview-content blockquote p { - margin-bottom: 0; - font-size: 1.05rem; /* Match base font size in blockquote */ -} - -/* Horizontal Rules (---, ***, etc. in Markdown) */ -.preview-content hr { - border: none; - border-top: 1.5px solid var(--hr-color); /* Use root variable - slightly thicker hr */ - margin: 35px 0; /* Increased hr margin */ - opacity: 0.7; /* Slightly faded hr */ -} - -/* Tables */ -.preview-content table { - display: block; - width: 100%; - width: max-content; - max-width: 100%; - overflow: auto; - font-variant: tabular-nums; - margin-bottom: 1rem; -} - -.preview-content th, -.preview-content td { - text-align: left; - border: 1px solid var(--main-border-color); -} - -.preview-content th { - background-color: var(--table-header-bg); /* Use root variable */ - font-weight: bold; - color: var(--heading-color); /* White table header text */ -} -.preview-content tr:nth-child(even) td { - background-color: var(--table-stripe-bg); /* Use root variable - striped rows */ -} - -/* --- Code Copy Button Styles --- */ -.preview-content .code-block-container { - position: relative; - margin-bottom: 25px; /* Match margin of 
 */
-}
-
-.preview-content .code-block-container pre {
-    margin-bottom: 0;
-}
-
-/* Images within the preview content */
-.preview-content img {
-    max-width: 100%;
-    height: auto;
-    margin: 0 0;
-    border-radius: 10px;
-}
-
-.copy-button {
-    position: absolute;
-    top: 15px; /* Adjusted button position */
-    right: 15px;
-    background-color: var(--copy-button-bg); /* Use root variable - link color */
-    color: var(--preview-text-color);
-    border: none;
-    padding: 10px 14px; /* Increased button padding */
-    border-radius: 6px; /* Slightly more rounded button corners */
-    cursor: pointer;
-    font-size: 0.9rem; /* Slightly larger button font size */
-    opacity: 0.85; /* Slightly less transparent */
-    transition: opacity 0.3s ease, background-color 0.3s ease, transform 0.2s ease; /* Added transform transition */
-}
-
-.copy-button:hover {
-    opacity: 1;
-    background-color: var(--copy-button-hover-bg); /* Use root variable - lighter blue */
-    transform: translateY(-2px); /* Slight lift on hover */
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Added subtle shadow on hover */
-}
-
-.copy-button:active {
-    transform: translateY(0); /* Press effect */
-    box-shadow: none;
-}
-
-
-.copy-button:focus {
-    outline: none;
-    box-shadow: 0 0 0 3px rgba(var(--copy-button-bg-rgb-values), 0.5); /* Example - adjust as needed for focus ring */
-}
-
-
-/* Responsive adjustments for smaller screens */
-@media (max-width: 768px) {
-    .preview-content {
-        padding: 30px 25px; /* Adjusted padding for smaller screens */
-        margin: 0 auto;
-        border-radius: 0; /* Remove border-radius on small screens */
-        box-shadow: none; /* Remove shadow on small screens */
-        font-size: 1rem; /* Reverted base font size to 1rem on smaller screens */
-    }
-
-    .preview-content h1 {
-        font-size: 2.4rem; /* Slightly smaller h1 on small screens */
-    }
-
-    .preview-content h2 {
-        font-size: 2rem;
-    }
-
-    .preview-content h3 {
-        font-size: 1.6rem;
-    }
-
-    .preview-content ul,
-    .preview-content ol {
-        margin-left: 25px; /* Adjusted list indentation */
-    }
-
-    .copy-button {
-        padding: 8px 12px; /* Adjusted button padding on smaller screens */
-        font-size: 0.85rem;
-        top: 10px; /* Adjusted button position */
-        right: 10px;
-    }
-}
\ No newline at end of file
diff --git a/public/Assets/Style/doc.css b/public/Assets/Style/doc.css
deleted file mode 100644
index 539f632..0000000
--- a/public/Assets/Style/doc.css
+++ /dev/null
@@ -1,789 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap");
-
-* {
-	margin: 0;
-	padding: 0;
-	box-sizing: border-box;
-	text-decoration: none;
-	scroll-behavior: smooth;
-}
-
-.links {
-	font-weight: 600;
-	color: #007bff;
-	transition: all 0.5s ease;
-}
-
-.links.newtab::after {
-	content: "\f35d";
-	font-family: "Font Awesome 5 Free";
-	font-weight: 900;
-	margin-left: 5px;
-}
-
-.links:visited {
-	color: #007bff;
-	transition: all 0.5s ease;
-}
-
-.links:hover {
-	color: #9eb5f7;
-	transition: all 0.5s ease;
-}
- 
-
-::-webkit-scrollbar {
-	width: 10px;
-}
-
-::-webkit-scrollbar-track {
-	background: #f1f1f1;
-}
-
-::-webkit-scrollbar-thumb {
-	background: #89f1ee;
-	border-radius: 12px;
-	transition: all 0.3s ease;
-}
-
-::-webkit-scrollbar-thumb:hover {
-	background: #4ea19d;
-}
-
-.scroll-button a {
-	position: fixed;
-	bottom: 20px;
-	right: 20px;
-	color: #fff;
-	background: #49949e;
-	padding: 7px 12px;
-	font-size: 18px;
-	border-radius: 6px;
-	box-shadow: rgba(0, 0, 0, 0.15);
-	display: none;
-}
-
-nav {
-	position: fixed;
-	width: 100%;
-	padding: 20px 0;
-	z-index: 998;
-	transition: all 0.3s ease;
-	font-family: "Ubuntu", sans-serif;
-}
-
-nav .navbar {
-	width: 90%;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	margin: auto;
-}
-
-nav .menu-btn,
-.navbar .menu .cancel-btn,
-.navbar .menu .cancel-btn-left {
-	position: absolute;
-	color: #fff;
-	right: 10px;
-	top: 30px;
-	font-size: 20px;
-	cursor: pointer;
-	transition: all 0.3s ease;
-	display: none;
-}
-
-nav .menu-btn {
-	color: #fff;
-}
-
-nav.sticky .menu-btn {
-	color: #FFF;
-}
-
-.navbar .menu .menu-btn {
-	color: #fff;
-}
-
-.logo {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.logo img {
-	width: 12%;
-	height: 100%;
-	float: left;
-}
-
-.logo .text {
-	margin-left: -255px;
-	float: left;
-}
-
-nav .navbar .logo a {
-	font-weight: 500;
-	font-size: 35px;
-	color: #fff;
-}
-
-nav.sticky .navbar .logo a {
-	color: #fff;
-}
-
-nav .navbar .menu {
-	display: flex;
-	position: relative;
-}
-
-nav .navbar .menu li {
-	list-style: none;
-	margin: 0 8px;
-}
-
-.navbar .menu a {
-	font-size: 18px;
-	font-weight: 800;
-	color: #0e2431;
-	padding: 6px 0;
-	transition: all 0.4s ease;
-}
-
-.navbar .menu a:hover {
-	color: #377a77;
-}
-
-nav.sticky .menu a {
-	color: #fff;
-}
-
-nav.sticky .menu a:hover {
-	color: #0e2431;
-}
-
-.navbar .media-icons a {
-	color: #fff;
-	font-size: 21px;
-	margin: 0 6px;
-	transition: all 0.5s ease;
-}
-
-.media-icons a:hover {
-	color: grey;
-	transition: all 0.4s ease;
-}
-
-nav.sticky .media-icons a {
-	color: #fff;
-}
-
-section {
-	padding-top: 40px;
-}
-
-section .content {
-	width: 96%;
-	margin: 0px auto;
-	font-family: "Poppins", sans-serif;
-}
-
-section .title {
-	display: flex;
-	justify-content: center;
-	margin-bottom: 40px;
-	text-align: center;
-}
-
-section .title span {
-	color: #f0f6fc;
-	font-size: 30px;
-	font-weight: 600;
-	position: relative;
-	padding-bottom: 8px;
-}
-
-section .title span::before,
-section .title span::after {
-	content: "";
-	position: absolute;
-	height: 3px;
-	width: 100%;
-	background: #377a77;
-	left: 0;
-	bottom: 0;
-}
-
-section .title span::after {
-	bottom: -7px;
-	width: 70%;
-	left: 50%;
-	transform: translateX(-50%);
-}
-
-.about .left img {
-	height: 100px;
-	width: 400px;
-	object-fit: cover;
-	border-radius: 12px;
-}
-
-section .button {
-	margin: 5px 0;
-	align-items: center;
-	display: flex;
-	justify-content: center;
-}
-
-section .button button {
-	outline: none;
-	padding: 6px 12px;
-	border-radius: 4px;
-	font-size: 15px;
-	font-weight: 600;
-	background: #377a77;
-	color: #fff;
-	border: 2px solid transparent;
-	cursor: pointer;
-	transition: all 0.4s ease;
-}
-
-section .button button:hover {
-	border-color: #377a77;
-	background-color: transparent;
-	color: #377a77;
-}
-
-@media (max-width: 950px) {
-	footer {
-		margin-top: auto;
-	}
-}
-
-nav .navbar .media-icons-m {
-	display: none;
-}
-
-nav .navbar .menu .media-icons-m a {
-	font-size: 25px;
-	margin: 0 8px;
-	transition: all 0.3s ease;
-}
-
-@media (max-width: 4090px) {
-
-	nav .navbar .menu.left {
-		position: fixed;
-		left: -100%;
-		top: 0;
-		margin: 0 0;
-		background: #151b23;
-		height: 100vh;
-		width: 100%;
-		padding-top: 60px;
-		flex-direction: column;
-		align-items: center;
-		transition: all 0.5s ease;
-		z-index: 999;
-
-	}
-
-	.navbar .menu .cancel-btn-left {
-		display: block;
-	}
-
-	.navbar.active .menu,
-	.navbar.active .menu.left {
-		left: 0;
-	}
-
-	nav .navbar .menu a {
-		font-size: 23px;
-		display: block;
-		color: #fff;
-		margin: 10px 0;
-	}
-
-	nav.sticky .menu a:hover {
-		color: #377a77;
-	}
-}
-
-@media (max-width: 750px) {
-	nav .navbar {
-		width: 90%;
-	}
-
-	nav .navbar .menu {
-		position: fixed;
-		left: -100%;
-		top: 0;
-		margin: 0 0;
-		background: #151b23;
-		height: 100vh;
-		width: 100%;
-		padding-top: 60px;
-		flex-direction: column;
-		align-items: center;
-		transition: all 0.5s ease;
-	}
-
-	nav .navbar .menu a {
-		font-size: 23px;
-		display: block;
-		color: #fff;
-		margin: 10px 0;
-	}
-
-	nav.sticky .menu a:hover {
-		color: #377a77;
-	}
-
-	nav .navbar .media-icons {
-		display: none;
-	}
-
-	nav .navbar .media-icons-m {
-		display: flex;
-	}
-
-	nav .menu-btn,
-	.navbar .menu .cancel-btn {
-		display: block;
-	}
-
-	.contact .text {
-		width: 100%;
-	}
-}
-
-footer {
-	background-color: #010409 !important;
-	border-top: 1px solid rgba(255, 255, 255, 0.1);
-	padding: 15px 5px;
-	text-align: center;
-	font-family: 'Poppins', sans-serif;
-}
-
-footer .text span {
-	font-size: 17px;
-	font-weight: 400;
-	color: #fff;
-}
-
-footer .text span a {
-	font-weight: 500;
-	color: #72abff;
-	transition: all 0.3s ease;
-}
-
-footer .text span a:hover {
-	text-decoration: underline;
-	color: #d9dbe2;
-	transition: all 0.3s ease;
-}
-
-html,
-body {
-	height: 100%;
-	margin: 0;
-	display: flex;
-	flex-direction: column;
-}
-
-body {
-	display: flex;
-	flex-direction: column;
-}
-
-footer {
-	margin-top: auto;
-}
-
-.container {
-	flex: 1;
-}
-
-.about {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.emojji {
-	text-align: center;
-	margin-left: -150px;
-}
-
-.search-bar {
-	display: flex;
-	align-items: center;
-	position: relative;
-	margin: 0 auto;
-	border-radius: 9px;
-	background-color: #fff;
-	width: auto;
-	max-width: 400px;
-	height: 40px;
-	border: 2px solid #377a77;
-	overflow: hidden;
-}
-
-.search-bar input[type="text"] {
-	border: none;
-	outline: none;
-	padding: 10px;
-	flex: 1;
-}
-
-.search-bar .submit button {
-	background-color: #377a77;
-	border: none;
-	color: rgb(255, 255, 255);
-	padding: 19px;
-	cursor: pointer;
-	transition: all 0.5s ease;
-}
-
-.search-bar .submit button:hover {
-	background-color: rgb(233, 233, 233);
-	color: #377a77;
-	transition: all 0.4s ease;
-}
-
-.clear-btn {
-	position: absolute;
-	right: 60px;
-	background: transparent;
-	border: none;
-	font-size: 16px;
-	color: #377a77;
-	cursor: pointer;
-	display: none;
-}
-
-.clear-btn:hover {
-	color: rgb(233, 233, 233);
-}
-
-.select-dropdown {
-	margin-bottom: 20px
-}
-
-.select-dropdown label {
-	font-size: 18px;
-	font-weight: 700;
-	color: #377a77;
-	display: block;
-	margin-bottom: 8px;
-	text-align: center
-}
-
-.select-dropdown select {
-	appearance: none;
-	-webkit-appearance: none;
-	-moz-appearance: none;
-	width: 100%;
-	font-weight: 700;
-	max-width: 400px;
-	padding: 10px;
-	font-size: 16px;
-	display: flex;
-	align-items: center;
-	margin: 0 auto;
-	border-radius: 9px;
-	border: 2px solid #377a77;
-	background-color: #2f2f2f;
-	color: #fff;
-	cursor: pointer;
-	transition: all .3s ease
-}
-
-.select-dropdown select:focus,
-.select-dropdown select:hover {
-	background-color: #377a77;
-	color: #fff;
-	border-color: #377a77
-}
-
-.select-dropdown select:focus {
-	background-color: #377a77;
-	color: #fff;
-	border-color: #377a77
-}
-
-.select-dropdown option {
-	background-color: #333;
-	color: #ddd;
-	text-align: center;
-	text-align-last: center
-}
-
-.select-dropdown option:hover {
-	background-color: #f1f1f1
-}
-
-.container {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	width: 900px;
-	margin-top: 80px;
-}
-
-.container>h1 {
-	font-size: 50px;
-	color: #2d2d2d;
-	text-shadow: #cccc 1px 1px;
-	margin-bottom: 20px;
-}
-
-.filters {
-	display: flex;
-	gap: 10px;
-	margin-bottom: 20px;
-}
-
-.filters>button {
-	font-size: 17px;
-	padding: 5px;
-	width: 90px;
-	border: none;
-	border-radius: 5px;
-	background-color: #fff;
-	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
-}
-
-.filters>input,
-.filters>select {
-	padding: 5px;
-	width: 120px;
-	border-radius: 5px;
-	background-color: #fff;
-	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
-	border: none;
-	outline: none;
-}
-
-.products {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 20px;
-	justify-content: center;
-	margin-top: 30px;
-	margin-bottom: 30px;
-}
-
-.product {
-	border: 2px solid #377a77;
-	padding: 15px;
-	border-radius: 10px;
-	background-color: #fff;
-	text-align: center;
-	max-width: 250px;
-	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
-}
-
-.product img {
-	max-width: 230px;
-	height: 120px;
-	margin-bottom: 10px;
-	border-radius: 6px;
-}
-
-.products p {
-	font-size: 12px;
-}
-
-.products:hover> :not(:hover) {
-	opacity: 0.6;
-}
-
-.Servicegrid {
-	display: grid;
-	gap: 10px;
-	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-}
-
-.Servicecard {
-	background-color: transparent;
-	border-radius: 0.375rem;
-	border: solid 0.1em var(--main-border-color);
-	padding: 13px;
-	transition: box-shadow 0.3s ease;
-	text-decoration: none;
-	color: inherit;
-	transition: all 0.5s ease;
-}
-
-.Servicecard:hover {
-	border-color: #377a77;
-}
-
-.Servicecard h2 {
-	font-size: 1.3rem;
-	font-weight: 600;
-	color: #4493f8 !important;
-	display: inline-block;
-	margin-left: 5px;
-	vertical-align: middle;
-}
-
-.Servicecard .icon {
-	font-size: 1rem;
-	color: #1abc9c;
-	display: inline-block;
-	vertical-align: middle;
-}
-
-.Servicecard p {
-	font-size: small;
-	color: #9198a1;
-}
-
-.container-t {
-	background-color: transparent;
-	padding: 20px;
-	border: solid 0.1rem var(--main-border-color);
-	border-radius: 6px;
-	color: #fff;
-	margin: 10px;
-}
-
-.container-t .h2 {
-	color: #f0f6fc;
-	font-size: 30px;
-	margin-bottom: 20px;
-}
-
-.container-t ul {
-	list-style-type: none;
-	padding: 0;
-}
-
-.container-t li {
-	margin-bottom: 10px;
-}
-
-.container-t code {
-	background-color: #444;
-	padding: 2px 5px;
-	border-radius: 5px;
-}
-
-.list-group {
-	list-style: none;
-	padding: 0;
-	margin: 0;
-}
-
-.list-group-item {
-	background: transparent;
-	margin-bottom: 15px;
-	padding: 20px;
-	border-radius: 10px;
-	border: 0.1rem solid var(--main-border-color);
-	transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-
-.todo-content {
-	width: 100%;
-}
-
-.todo-title {
-	font-size: 1.4em;
-	color: #fff;
-	font-weight: 600;
-	margin: 0 0 0 !important;
-}
-
-.todo-description {
-	font-size: 1em;
-	color: #9198a1;
-}
-
-.todo-meta {
-	font-size: 0.9em;
-	color: #888;
-}
-
-.todo-meta.assigned {
-	color: #28a745;
-}
-
-.todo-meta.completed {
-	color: #007bff;
-}
-
-.btn {
-	outline: none;
-	padding: 8px 16px;
-	border-radius: 5px;
-	font-size: 0.92em;
-	font-weight: 600;
-	color: white;
-	border: 2px solid transparent;
-	cursor: pointer;
-	background: transparent;
-	text-align: center;
-	transition: all 0.3s ease;
-}
-
-@media (max-width: 600px) {
-	.btn {
-		width: 100%;
-		padding: 10px;
-	}
-}
-
-.btn:visited {
-	color: white;
-}
-
-.btn-edit {
-	background: #007bff;
-	transition: all 0.3s ease;
-}
-
-.btn-edit:hover {
-	color: #007bff;
-	border-color: #007bff;
-	background: transparent;
-	transition: all 0.3s ease;
-}
-
-.btn-save {
-	background: #28a745;
-	transition: all 0.3s ease;
-}
-
-.btn-cancel {
-	background: #6c757d;
-	transition: all 0.3s ease;
-}
-
-.btn-cancel:hover {
-	color: #6c757d;
-	border-color: #6c757d;
-	background: transparent;
-	transition: all 0.3s ease;
-}
-
-.btn-save:hover {
-	color: #28a745;
-	border-color: #28a745;
-	background: transparent;
-	transition: all 0.3s ease;
-}
-
-.btn-danger {
-	background: #dc3545;
-	transition: all 0.3s ease;
-}
-
-.btn-danger:hover {
-	color: #dc3545;
-	border-color: #dc3545;
-	background: transparent;
-	transition: all 0.3s ease;
-}
\ No newline at end of file
diff --git a/public/Assets/Style/main.css b/public/Assets/Style/main.css
deleted file mode 100644
index 6ce35f0..0000000
--- a/public/Assets/Style/main.css
+++ /dev/null
@@ -1,105 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap');
-
-* {
-	margin: 0;
-	padding: 0;
-	box-sizing: border-box;
-	text-decoration: none;
-	scroll-behavior: smooth;
-}
-
-::-webkit-scrollbar {
-	width: 10px;
-}
-
-::-webkit-scrollbar-track {
-	background: #f1f1f1;
-}
-
-::-webkit-scrollbar-thumb {
-	background: #89f1ee;
-	border-radius: 12px;
-	transition: all 0.3s ease;
-}
-
-::-webkit-scrollbar-thumb:hover {
-	background: #4ea19d;
-}
-
-html,
-body {
-	height: 100%;
-	margin: 0;
-	display: flex;
-	flex-direction: column;
-}
-
-section {
-	padding-top: 40px;
-}
-
-section .content {
-	margin: 40px auto;
-	font-family: 'Poppins', sans-serif;
-}
-
-.about .about-details {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding-bottom: 10px;
-}
-
-section .title {
-	display: flex;
-	justify-content: center;
-	margin-bottom: 40px;
-}
-
-section .title span {
-	color: #f0f6fc;
-	font-size: 35px;
-	font-weight: 600;
-	position: relative;
-	padding-bottom: 8px;
-}
-
-section .title span::before,
-section .title span::after {
-	content: '';
-	position: absolute;
-	height: 3px;
-	width: 100%;
-	background: #377a77;
-	left: 0;
-	bottom: 0;
-}
-
-section .title span::after {
-	bottom: -7px;
-	width: 70%;
-	left: 50%;
-	transform: translateX(-50%);
-}
-
-.maincssp,
-.maincssh4,
-.maincssh3 {
-	text-align: center;
-}
-
-section .content {
-	margin: 0px auto;
-	font-family: "Poppins", sans-serif;
-}
-
-.about {
-	background-color: rgb(19, 19, 19);
-	height: 100%;
-}
-
-.about {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
\ No newline at end of file
diff --git a/public/Assets/Style/menu.css b/public/Assets/Style/menu.css
deleted file mode 100644
index 9f462e6..0000000
--- a/public/Assets/Style/menu.css
+++ /dev/null
@@ -1,83 +0,0 @@
-.custom-context-menu {
-	position: fixed;
-	background-color: rgb(36, 36, 36);
-	border: 1px solid #000000;
-	padding: 5px 0;
-	box-shadow: 2px 2px 5px rgba(41, 121, 167, 0.3);
-	z-index: 1000;
-	font-family: sans-serif;
-	border-radius: 5px;
-	min-width: 150px;
-}
-
-.custom-context-menu ul {
-	list-style: none;
-	padding: 0;
-	margin: 0;
-}
-
-.custom-context-menu li {
-	padding: 8px 15px;
-	cursor: pointer;
-	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-	font-size: 16px;
-}
-
-.custom-context-menu li:hover {
-	background-color: #333;
-	color: #f0f0f0;
-}
-
-.custom-context-menu li a {
-	display: block;
-	text-decoration: none;
-	color: rgb(255, 255, 255);
-}
-
-.custom-context-menu.dark-theme {
-	background-color: #282828;
-	border-color: #444;
-	color: #eee;
-	box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.6);
-}
-
-.custom-context-menu.dark-theme li:hover {
-	background-color: #444;
-	color: #fff;
-}
-
-.custom-context-menu.dark-theme li a {
-	color: #eee;
-}
-
-.custom-context-menu li+li {
-	border-top: 1px solid #eee;
-	margin-top: 5px;
-	padding-top: 5px;
-}
-
-.custom-context-menu.dark-theme li+li {
-	border-top-color: #555;
-}
-
-@media (max-width: 768px) {
-	.custom-context-menu li {
-		padding: 10px 20px;
-		font-size: 18px;
-	}
-
-	.custom-context-menu {
-		font-size: 0.9em;
-		padding: 3px 0;
-		min-width: 120px;
-	}
-
-	.custom-context-menu li {
-		padding: 6px 12px;
-	}
-
-	.custom-context-menu li+li {
-		margin-top: 3px;
-		padding-top: 3px;
-	}
-}
\ No newline at end of file
diff --git a/public/Assets/Style/style.css b/public/Assets/Style/style.css
deleted file mode 100644
index 282ec51..0000000
--- a/public/Assets/Style/style.css
+++ /dev/null
@@ -1,546 +0,0 @@
-:root {
-	--main-border-color: #3d444d;
-}
-
-.about,
-html,
-body {
-	background-color: #0d1117;
-}
-
-.contact-box {
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	opacity: 0;
-	visibility: hidden;
-	border: 3px solid #377a77;
-	background-color: rgb(26, 26, 26);
-	position: fixed;
-	width: 85%;
-	max-width: 900px;
-	padding: 15px;
-	border-radius: 8px;
-	box-shadow: 0 6px 6px rgb(0 0 0 / 25%);
-	font-family: 'Poppins', sans-serif;
-	z-index: 999997;
-	transition: opacity 0.4s ease, visibility 0.4s ease;
-}
-
-.contact-box.show {
-	opacity: 1;
-	visibility: visible;
-}
-
-.message-box {
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	opacity: 0;
-	visibility: hidden;
-	border: 3px solid #377a77;
-	background-color: rgb(26, 26, 26);
-	position: fixed;
-	width: 92%;
-	max-width: 600px;
-	padding: 15px;
-	border-radius: 8px;
-	box-shadow: 0 6px 6px rgb(0 0 0 / 25%);
-	font-family: 'Poppins', sans-serif;
-	z-index: 999997;
-	transition: opacity 0.4s ease, visibility 0.4s ease;
-}
-
-.message-box.show {
-	opacity: 1;
-	visibility: visible;
-}
-
-.portalbox {
-	border: 0.125rem solid #377a77;
-	background-color: transparent;
-	position: relative;
-	width: 600px;
-	max-width: 600px;
-	margin: 0 auto;
-	padding: 10px 15px;
-	border-radius: 12px;
-	font-family: "Poppins", sans-serif;
-	transition: opacity 0.4s ease, visibility 0.4s ease;
-}
-
-.close-btn {
-	width: 23px;
-	height: 23px;
-	border-radius: 8px;
-	z-index: 999999;
-	position: absolute;
-	top: 7px;
-	right: 3px;
-	background: url(https://www.mbktechstudio.com/Assets/Images/close-icon.svg) 0 0 / 23px 23px no-repeat;
-	transition: all 0.4s ease;
-}
-
-.close-btn:hover {
-	opacity: 0.2;
-	transition: all 0.4s ease;
-}
-
-input[readonly] {
-	background-color: #c0c0c0;
-	color: #333;
-	border: 1px solid #ccc;
-	cursor: not-allowed;
-}
-
-.admin {
-	color: goldenrod;
-}
-
-@media (max-width: 700px) {
-	.portalbox {
-		width: 100%;
-	}
-
-	.user-box label {
-		left: 2%;
-	}
-}
-
-.user-box {
-	position: relative;
-	margin-bottom: 7px;
-	margin-top: 7px;
-}
-
-.user-box input {
-	width: 100%;
-	padding: 10px 0;
-	font-size: 16px;
-	font-weight: 500;
-	color: #e4e4e4;
-	margin-bottom: 30px;
-	border: none;
-	border: 2px solid #333;
-	outline: none;
-	background: transparent;
-}
-
-.user-box label {
-	position: absolute;
-	top: -30%;
-	left: 1%;
-	padding: 10px 0;
-	font-size: 16px;
-	color: aliceblue;
-	pointer-events: none;
-	transition: 0.5s;
-}
-
-.user-box input:focus~label,
-.user-box input:valid~label {
-	transform: translateY(-20px);
-	font-size: 15px;
-	color: aliceblue;
-}
-
-.info-icon {
-	position: absolute;
-	top: 70%;
-	right: 10px;
-	transform: translateY(-50%);
-	cursor: pointer;
-}
-
-.info-icon i {
-	font-size: 18px;
-	line-height: 1;
-	color: #444444;
-	transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
-	margin-bottom: 20px;
-	transition: color 0.3s ease;
-}
-
-.info-icon i:hover {
-	color: #565555;
-	transition: color 0.3s ease;
-}
-
-.password-toggle-icon {
-	position: absolute;
-	top: 70%;
-	right: 10px;
-	transform: translateY(-50%);
-	cursor: pointer;
-}
-
-.password-toggle-icon i {
-	font-size: 18px;
-	line-height: 1;
-	color: #444444;
-	transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
-	margin-bottom: 20px;
-	transition: color 0.3s ease;
-}
-
-.password-toggle-icon i.fa-eye-slash {
-	color: #606060;
-	transform: rotateY(180deg);
-}
-
-.password-toggle-icon i:hover {
-	color: #565555;
-	transition: color 0.3s ease;
-}
-
-.main {
-	background-color: rgb(26, 26, 26);
-	border-radius: 15px;
-	box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-	padding: 10px 20px;
-	transition: transform 0.2s;
-	width: 30%;
-	text-align: center;
-}
-
-label {
-	font-weight: bold;
-	color: aliceblue;
-	display: block;
-	margin: 10px 0 5px 0;
-}
-
-input[type="text"],
-input[type="password"],
-input[type="email"],
-input[type="number"] {
-	width: 100%;
-	padding: 10px;
-	margin: 0 0 0 0;
-	border-radius: 6px;
-	box-sizing: border-box;
-}
-
-.no-spinner {
-	-moz-appearance: textfield;
-	/* Firefox */
-	appearance: textfield;
-	/* Modern browsers */
-}
-
-.no-spinner::-webkit-inner-spin-button,
-.no-spinner::-webkit-outer-spin-button {
-	-webkit-appearance: none;
-	/* Chrome, Safari, Edge */
-	appearance: none;
-	margin: 0;
-	/* Optional, removes margin in some cases */
-}
-
-.button {
-	width: 100%;
-}
-
-.button button {
-	outline: none;
-	border-radius: 10px;
-	padding: 8px;
-	font-size: 21px;
-	font-weight: 600;
-	background: #377a77;
-	color: #fff;
-	border: 2px solid transparent;
-	cursor: pointer;
-	transition: all 0.4s ease;
-	margin-top: 10px;
-	cursor: pointer;
-	width: 100%;
-}
-
-.button button:hover {
-	border-color: #fff;
-	background-color: transparent;
-	color: #fff;
-	font-weight: 600;
-	transition: all 0.3s ease;
-}
-
-.wrap {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.Link {
-	color: turquoise;
-	font-weight: 600;
-	text-decoration: none;
-}
-
-.Link:hover {
-	color: rgba(64, 224, 208, 0.692);
-	font-weight: 600;
-}
-
-.NotRegistered {
-	color: #fff;
-}
-
-:root {
-	--color-one: #52117d;
-	--color-two: #a944ec;
-	--color-three: #ffc800;
-	--color-accent: #377a77;
-	--color-text: #ffffff;
-	--color-bg: #181729;
-	--font-family: "Inter", sans-serif;
-	--font-family-headings: "Inter", sans-serif;
-}
-
-.checkbox-container {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-} 
-
-.showMessageblurWindow {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background: rgba(0, 0, 0, 0.5);
-	display: none;
-	justify-content: center;
-	align-items: center;
-	z-index: 1000;
-	backdrop-filter: blur(5px);
-}
-
-.showMessageblurWindow.active {
-	display: flex;
-}
-
-.showMessageblurWindow.fade-out {
-	animation: fadeOut 0.5s ease-in-out forwards;
-}
-
-body.blur-active {
-	overflow: hidden;
-}
-
-.showmessageWindow {
-	font-family: 'Roboto', sans-serif;
-	background: linear-gradient(135deg, #000, #111);
-	padding: 20px 30px;
-	border-radius: 15px;
-	box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
-	max-width: 90%;
-	width: 600px;
-	position: relative;
-	color: #fff;
-	border: 2px solid #007bff;
-	animation: fadeIn 0.5s ease-in-out;
-}
-
-.showmessageWindow h1 {
-	font-family: 'Roboto', sans-serif;
-	margin-top: 0;
-	font-size: 30px;
-	text-align: center;
-	color: #fff;
-	text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-	margin-bottom: 10px;
-}
-
-.showmessageWindow p {
-	font-family: 'Roboto', sans-serif;
-	font-size: 18px;
-	text-align: center;
-	color: #ddd;
-}
-
-.showmessageWindow .close-btn {
-	position: absolute;
-	top: 10px;
-	right: 10px;
-	background: none;
-	border: none;
-	font-size: 30px;
-	cursor: pointer;
-	color: #bbb;
-	transition: color 0.3s;
-}
-
-.showmessageWindow .close-btn:hover {
-	color: #fff;
-}
-
-@keyframes fadeIn {
-	from {
-		opacity: 0;
-		transform: scale(0.9);
-	}
-
-	to {
-		opacity: 1;
-		transform: scale(1);
-	}
-}
-
-@keyframes fadeOut {
-	from {
-		opacity: 1;
-		transform: scale(1);
-	}
-
-	to {
-		opacity: 0;
-		transform: scale(0.9);
-	}
-}
-
-.buttons {
-	outline: none;
-	padding: 4px 12px;
-	border-radius: 4px;
-	font-weight: 600;
-	background: #377a77;
-	color: #fff;
-	border: 2px solid transparent;
-	cursor: pointer;
-	transition: all 0.4s ease;
-	text-align: center;
-}
-
-.buttons.githeme {
-	outline: none;
-	padding: 4px 12px;
-	border-radius: 4px;
-	fill: #9198a1;
-	font-weight: 600;
-	background: #212830;
-	color: #f0f6fc;
-	border: solid;
-	border: 2px solid var(--main-border-color);
-	cursor: pointer;
-	transition: all 0.4s ease;
-	text-align: center;
-}
-
-.buttons.full {
-	width: 100%;
-}
-
-.buttons:visited {
-	color: white;
-}
-
-.buttons:hover {
-	border-color: #377a77;
-	background-color: transparent;
-	color: #377a77;
-	transition: all 0.3s ease;
-}
-
-.buttons.githeme:hover {
-	border-color: #3d444d;
-	background-color: transparent;
-	color: #f0f6fc;
-	transition: all 0.3s ease;
-}
-
-.profile-container {
-	max-width: 700px;
-	margin: 0 auto;
-	padding: 20px;
-	border: 0.1rem solid var(--main-border-color);
-	border-radius: 10px;
-	background: transparent;
-	color: #fff;
-	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
-	transition: transform 0.3s, box-shadow 0.3s;
-}
-
-.profile-header h2 {
-	text-align: center;
-	font-size: 24px;
-	color: #f39c12;
-	margin-bottom: 15px;
-	text-transform: uppercase;
-	letter-spacing: 1px;
-}
-
-.profile-form {
-	display: flex;
-	flex-direction: column;
-	gap: 5px;
-}
-
-.form-group {
-	display: flex;
-	flex-direction: column;
-}
-
-.form-group label {
-	font-size: 16px;
-	color: #fff;
-	margin-bottom: 5px;
-}
-
-.form-group input,
-.form-group textarea {
-	padding: 10px;
-	font-size: 16px;
-	border: solid 0.125rem var(--main-border-color);
-	border-radius: 5px;
-	background-color: #151b23;
-	color: #fff;
-	transition: border-color 0.3s, box-shadow 0.3s;
-}
-
-.form-group textarea {
-	text-align: left;
-	resize: none;
-	text-transform: none;
-}
-
-.form-group input[readonly],
-.form-group textarea[readonly] {
-	background-color: #212830 !important;
-	color: lightslategray;
-}
-
-.form-group textarea {
-	background-color: #151b23;
-}
-
-.form-group input:focus,
-.form-group textarea:focus {
-	border-color: #f39c12;
-	box-shadow: 0 0 5px #f39c12;
-	outline: none;
-}
-
-@media(max-width: 600px) {
-	.profile-container {
-		padding: 15px;
-	}
-
-	.profile-header h2 {
-		font-size: 20px;
-	}
-
-	.form-group label {
-		font-size: 14px;
-	}
-
-	.form-group input,
-	.form-group textarea {
-		font-size: 14px;
-	}
-
-	.buttons {
-		font-size: 14px;
-	}
-}
\ No newline at end of file
diff --git a/public/Assets/cat-shooting.gif b/public/Assets/cat-shooting.gif
deleted file mode 100644
index 1961688..0000000
Binary files a/public/Assets/cat-shooting.gif and /dev/null differ
diff --git a/public/Assets/css/admin.css b/public/Assets/css/admin.css
index 2b4bdd9..4ba12f4 100644
--- a/public/Assets/css/admin.css
+++ b/public/Assets/css/admin.css
@@ -1,1164 +1,1925 @@
-/* ===== Base Admin Styles ===== */
-.admin-container {
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: 20px;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-}
-
-h1 {
-  color: #2c3e50;
-  border-bottom: 2px solid #3498db;
-  padding-bottom: 10px;
-  margin-bottom: 20px;
-}
-
-h2 {
-  color: #2c3e50;
+/* ===== Enhanced Admin Dashboard Styles ===== */
+:root {
+  --primary-color: #4F46E5;
+  --secondary-color: #7C3AED;
+  --success-color: #10B981;
+  --warning-color: #F59E0B;
+  --error-color: #EF4444;
+  --info-color: #3B82F6;
+  --dark-color: #1F2937;
+  --light-color: #F8FAFC;
+  --border-color: #E5E7EB;
+  --text-primary: #111827;
+  --text-secondary: #6B7280;
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+}
+
+* {
   margin: 0;
-  font-size: 1.2rem;
+  padding: 0;
+  box-sizing: border-box;
 }
 
-/* ===== Common Components ===== */
-.back-link {
-  color: #3498db;
-  text-decoration: none;
-  font-size: 0.9rem;
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background-color: var(--light-color);
+  color: var(--text-primary);
+  line-height: 1.6;
 }
 
-.back-link:hover {
-  text-decoration: underline;
+.admin-container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 2rem;
+  min-height: 100vh;
 }
 
-.view-all-link {
-  color: #3498db;
-  text-decoration: none;
-  font-size: 0.9rem;
+/* ===== Enhanced Header Styles ===== */
+.admin-header {
+  background: white;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--border-color);
+  margin-bottom: 2rem;
+  padding: 2rem;
+  position: relative;
+  overflow: hidden;
 }
 
-.view-all-link:hover {
-  text-decoration: underline;
+.admin-header::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
 }
 
-.clear-filter {
-  color: #e74c3c;
-  text-decoration: none;
-  font-size: 0.9rem;
-  white-space: nowrap;
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
 }
 
-.clear-filter:hover {
-  text-decoration: underline;
+.header-title {
+  flex: 1;
+  min-width: 0;
 }
 
-.pagination {
+.admin-title {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--text-primary);
   display: flex;
-  justify-content: center;
-  gap: 5px;
-  margin-top: 20px;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 0.5rem;
 }
 
-.page-link {
-  padding: 8px 12px;
-  background: #ecf0f1;
-  color: #2c3e50;
-  text-decoration: none;
-  border-radius: 4px;
+.admin-title i {
+  color: var(--primary-color);
+  font-size: 1.75rem;
 }
 
-.page-link:hover, 
-.page-link.active {
-  background: #3498db;
-  color: white;
+.admin-subtitle {
+  color: var(--text-secondary);
+  font-size: 1rem;
+  margin: 0;
+  font-weight: 500;
 }
 
-/* ===== Filter/Search Forms ===== */
-.filter-form,
-.search-form {
+.header-actions {
   display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
   align-items: center;
+  gap: 1rem;
 }
 
-.filter-group {
+.real-time-status {
   display: flex;
   align-items: center;
-  gap: 5px;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  color: var(--text-secondary);
 }
 
-.filter-form input,
-.filter-form select,
-.search-form input,
-.search-form select {
-  padding: 8px 12px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  min-width: 150px;
+.status-indicator {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--success-color);
+  animation: pulse 2s infinite;
 }
 
-.filter-form input[type="date"] {
-  padding: 7px 12px;
+.status-indicator.warning {
+  background: var(--warning-color);
 }
 
-.date-range-inputs span {
-  color: #7f8c8d;
-  font-size: 0.9rem;
+.status-indicator.error {
+  background: var(--error-color);
 }
 
-.filter-button,
-.search-form button {
-  padding: 8px 15px;
-  background: #3498db;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
+.status-indicator.loading {
+  background: var(--info-color);
 }
 
-.filter-button:hover,
-.search-form button:hover {
-  background: #2980b9;
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
 }
 
-/* ===== Action Bars ===== */
-.action-bar {
+.refresh-btn {
+  background: var(--primary-color);
+  color: white;
+  border: none;
+  padding: 0.5rem;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all 0.2s;
+  width: 40px;
+  height: 40px;
   display: flex;
   align-items: center;
-  gap: 15px;
-  margin-bottom: 15px;
-  padding: 10px;
-  background: #f8f9fa;
-  border-radius: 4px;
-}
-
-.selected-count {
-  font-size: 0.9rem;
-  color: #7f8c8d;
+  justify-content: center;
 }
 
-.bulk-action-btn {
-  padding: 8px 15px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 0.9rem;
+.refresh-btn:hover {
+  background: #4338CA;
+  transform: translateY(-1px);
 }
 
-.bulk-action-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+.user-menu {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
 }
 
-#bulkDeleteBtn {
-  background: #e74c3c;
-  color: white;
+.welcome-text {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
 }
 
-#bulkDeleteBtn:not(:disabled):hover {
-  background: #c0392b;
+.logout-btn {
+  color: var(--error-color);
+  text-decoration: none;
+  padding: 0.5rem;
+  border-radius: var(--radius-md);
+  transition: all 0.2s;
 }
 
-#exportSelectedBtn {
-  background: #27ae60;
-  color: white;
+.logout-btn:hover {
+  background: rgba(239, 68, 68, 0.1);
+  transform: translateY(-1px);
 }
 
-#exportSelectedBtn:not(:disabled):hover {
-  background: #219653;
+/* ===== Stats Section ===== */
+.stats-section {
+  margin-bottom: 2rem;
 }
 
-.export-container {
-  display: flex;
-  align-items: center;
-  gap: 5px;
+.stats-bar {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 2rem;
 }
 
-.export-format {
-  padding: 8px 12px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
+.stat-item {
   background: white;
-  font-size: 0.9rem;
-}
-
-.export-btn {
+  padding: 2rem;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--border-color);
   display: flex;
   align-items: center;
-  gap: 5px;
+  gap: 1.5rem;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
 }
 
-.fa-download {
-  font-size: 0.9rem;
+.stat-item:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-lg);
 }
 
-/* ===== List Styles ===== */
-.chat-list,
-.user-list {
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  margin-bottom: 20px;
+.stat-item::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
 }
 
-.chat-list-header,
-.chat-row,
-.user-list-header, 
-.user-row {
+.stats-grid {
   display: grid;
-  align-items: center;
-  padding: 12px 15px;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 2rem;
 }
 
-.chat-list-header,
-.user-list-header {
-  background: #2c3e50;
-  color: white;
-  font-weight: bold;
+.stat-card {
+  background: white;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  padding: 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  transition: all 0.3s ease;
+  border-left: 4px solid transparent;
 }
 
-.header-item {
-  padding: 5px;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.stat-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
 }
 
-.sortable a {
-  color: white;
-  text-decoration: none;
-  display: flex;
-  align-items: center;
-  gap: 5px;
+.stat-card.primary {
+  border-left-color: var(--primary-color);
 }
 
-.sorted a {
-  font-weight: bold;
+.stat-card.success {
+  border-left-color: var(--success-color);
 }
 
-.checkbox-cell {
-  display: flex;
-  justify-content: center;
+.stat-card.warning {
+  border-left-color: var(--warning-color);
 }
 
-.chat-row,
-.user-row {
-  border-bottom: 1px solid #ecf0f1;
+.stat-card.info {
+  border-left-color: var(--info-color);
 }
 
-.chat-row:last-child,
-.user-row:last-child {
-  border-bottom: none;
+.stat-icon {
+  width: 60px;
+  height: 60px;
+  border-radius: var(--radius-lg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  color: white;
+  flex-shrink: 0;
 }
 
-.chat-row:nth-child(even),
-.user-row:nth-child(even) {
-  background-color: #f8f9fa;
+.stat-card.primary .stat-icon {
+  background: var(--primary-color);
 }
 
-.chat-cell,
-.user-cell {
-  padding: 8px 5px;
-  font-size: 0.9rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.stat-card.success .stat-icon {
+  background: var(--success-color);
 }
 
-.preview-cell {
-  white-space: nowrap;
+.stat-card.warning .stat-icon {
+  background: var(--warning-color);
 }
 
-/* Chat List Specific */
-.chat-list-header,
-.chat-row {
-  grid-template-columns: 50px 80px 1fr 1fr 1fr 80px 80px 2fr 100px;
+.stat-card.info .stat-icon {
+  background: var(--info-color);
 }
 
-/* User List Specific */
-.user-list-header, 
-.user-row {
-  grid-template-columns: 1.5fr 1fr 0.8fr 0.8fr 0.8fr 1fr 1fr;
+.stat-content {
+  flex: 1;
 }
 
-/* ===== Action Buttons ===== */
-.view-btn,
-.edit-btn, 
-.chats-link {
-  padding: 5px 10px;
-  border-radius: 4px;
-  font-size: 0.8rem;
-  text-decoration: none;
+.stat-value {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 0.25rem;
 }
 
-.view-btn {
-  background: #3498db;
-  color: white;
-  display: inline-block;
+.stat-label {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  margin-bottom: 0.5rem;
 }
 
-.view-btn:hover {
-  background: #2980b9;
+.stat-trend {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
 }
 
-.edit-btn {
-  background: #3498db;
-  color: white;
-  margin-right: 5px;
-  border: none;
-  cursor: pointer;
+.trend-up {
+  color: var(--success-color);
 }
 
-.edit-btn:hover {
-  background: #2980b9;
+.trend-down {
+  color: var(--error-color);
 }
 
-.chats-link {
-  background: #27ae60;
-  color: white;
-  display: inline-block;
+.mini-chart {
+  height: 30px;
+  width: 100%;
 }
 
-.chats-link:hover {
-  background: #219653;
+/* ===== Health Section ===== */
+.health-section {
+  margin-bottom: 2rem;
 }
 
-/* ===== Dashboard Specific Styles ===== */
-.welcome-message {
-  color: #7f8c8d;
-  font-style: italic;
-  margin-bottom: 20px;
+.section-header {
   display: flex;
   justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
 }
 
-.last-updated {
-  font-size: 0.8rem;
-  color: #95a5a6;
+.section-header h2 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
-.admin-stats-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 20px;
-  margin-bottom: 30px;
+.health-indicators {
+  display: flex;
+  gap: 1rem;
 }
 
-.stat-card {
-  background: #fff;
-  border-radius: 8px;
-  padding: 20px;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-  text-align: center;
-  position: relative;
+.health-indicator {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  transition: all 0.2s;
 }
 
-.stat-value {
-  font-size: 2.5rem;
-  font-weight: bold;
-  color: #3498db;
-  margin-bottom: 5px;
+.health-indicator.healthy {
+  background: rgba(16, 185, 129, 0.1);
+  color: var(--success-color);
 }
 
-.stat-label {
-  color: #7f8c8d;
-  font-size: 0.9rem;
-  margin-bottom: 10px;
+.health-indicator.warning {
+  background: rgba(245, 158, 11, 0.1);
+  color: var(--warning-color);
 }
 
-.stat-trend {
-  font-size: 0.8rem;
-  padding-top: 10px;
-  border-top: 1px solid #ecf0f1;
+.health-indicator.error {
+  background: rgba(239, 68, 68, 0.1);
+  color: var(--error-color);
 }
 
-.stat-trend.up {
-  color: #27ae60;
+/* ===== Dashboard Grid ===== */
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  gap: 2rem;
 }
 
-.stat-trend.down {
-  color: #e74c3c;
+.dashboard-card {
+  background: white;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+  transition: all 0.3s ease;
 }
 
-.admin-section {
-  margin-bottom: 30px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-  padding: 20px;
+.dashboard-card:hover {
+  box-shadow: var(--shadow-md);
 }
 
-.section-header {
+.card-header {
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--border-color);
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 15px;
-}
-
-.recent-chats {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 15px;
 }
 
-.chat-item {
-  background: #f8f9fa;
-  border-radius: 8px;
-  padding: 15px;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+.card-header h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
-.chat-header {
+.card-actions {
   display: flex;
-  justify-content: space-between;
-  margin-bottom: 10px;
+  align-items: center;
+  gap: 0.5rem;
 }
 
-.chat-user {
-  font-weight: bold;
-  color: #2c3e50;
+.icon-btn {
+  background: none;
+  border: none;
+  padding: 0.5rem;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  color: var(--text-secondary);
+  transition: all 0.2s;
 }
 
-.chat-time {
-  color: #7f8c8d;
-  font-size: 0.8rem;
+.icon-btn:hover {
+  background: var(--border-color);
+  color: var(--text-primary);
 }
 
-.chat-meta {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 5px;
-  font-size: 0.8rem;
-  color: #7f8c8d;
-  margin-bottom: 10px;
+.view-all-btn {
+  color: var(--primary-color);
+  text-decoration: none;
+  font-size: 0.875rem;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  transition: all 0.2s;
 }
 
-.chat-meta span {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.view-all-btn:hover {
+  color: #4338CA;
 }
 
-.chat-usage {
-  margin-bottom: 10px;
-  position: relative;
-  height: 20px;
-  background: #ecf0f1;
-  border-radius: 4px;
-  overflow: hidden;
+.card-content {
+  padding: 1.5rem;
 }
 
-.usage-bar {
-  height: 100%;
-  background: #3498db;
-  transition: width 0.3s;
+/* ===== Activity Timeline ===== */
+.activity-timeline {
+  max-height: 400px;
+  overflow-y: auto;
 }
 
-.chat-usage span {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 0.7rem;
-  color: white;
-  text-shadow: 0 0 2px rgba(0,0,0,0.5);
+.timeline-item {
+  display: flex;
+  gap: 1rem;
+  padding: 1rem 0;
+  border-bottom: 1px solid var(--border-color);
+  position: relative;
 }
 
-.admin-columns {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 30px;
-  margin-bottom: 30px;
+.timeline-item:last-child {
+  border-bottom: none;
 }
 
-.admin-column {
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-  padding: 20px;
+.timeline-marker {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--primary-color);
+  flex-shrink: 0;
+  margin-top: 0.25rem;
 }
 
-.top-users, 
-.model-distribution {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
+.timeline-content {
+  flex: 1;
 }
 
-.user-item, 
-.model-item {
+.timeline-header {
   display: flex;
   justify-content: space-between;
-  padding: 10px;
-  border-radius: 4px;
-  background: #f8f9fa;
+  align-items: center;
+  margin-bottom: 0.5rem;
 }
 
-.user-info, 
-.model-info {
-  display: flex;
-  flex-direction: column;
+.username {
+  font-weight: 600;
+  color: var(--text-primary);
 }
 
-.user-name, 
-.model-name {
-  font-weight: bold;
-  margin-bottom: 3px;
+.timestamp {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
 }
 
-.user-stats, 
-.model-stats {
-  font-size: 0.7rem;
-  color: #7f8c8d;
+.timeline-details {
+  margin-bottom: 0.5rem;
 }
 
-.user-messages, 
-.model-usage {
+.detail-tags {
   display: flex;
-  flex-direction: column;
-  align-items: flex-end;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 
-.message-count, 
-.model-count {
-  font-weight: bold;
+.tag {
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.75rem;
+  font-weight: 500;
 }
 
-.peak-messages, 
-.model-limit {
-  font-size: 0.7rem;
-  color: #7f8c8d;
+.model-tag {
+  background: rgba(79, 70, 229, 0.1);
+  color: var(--primary-color);
 }
 
-.quick-actions {
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-  padding: 20px;
+.temp-tag {
+  background: rgba(245, 158, 11, 0.1);
+  color: var(--warning-color);
 }
 
-.action-buttons {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 15px;
-  margin-top: 15px;
+.count-tag {
+  background: rgba(16, 185, 129, 0.1);
+  color: var(--success-color);
 }
 
-.action-button {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 20px;
-  background: #3498db;
-  color: white;
-  border-radius: 8px;
-  text-decoration: none;
-  transition: transform 0.2s, box-shadow 0.2s;
+.usage-bar {
+  height: 4px;
+  background: var(--border-color);
+  border-radius: 2px;
+  overflow: hidden;
+  margin-bottom: 0.25rem;
 }
 
-.action-button:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+.usage-fill {
+  height: 100%;
+  background: var(--primary-color);
+  transition: width 0.3s ease;
 }
 
-.action-button i {
-  font-size: 1.5rem;
-  margin-bottom: 10px;
+.usage-text {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
 }
 
-.action-button span {
-  font-size: 0.9rem;
+/* ===== Leaderboard ===== */
+.leaderboard {
+  max-height: 400px;
+  overflow-y: auto;
 }
 
-/* ===== Error Page Styles ===== */
-.error-message {
-  background: #fff;
-  border-radius: 8px;
-  padding: 20px;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-  margin-top: 20px;
-  text-align: center;
+.leaderboard-item {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem 0;
+  border-bottom: 1px solid var(--border-color);
 }
 
-.error-message p {
-  font-size: 1.1rem;
-  margin-bottom: 20px;
-  color: #2c3e50;
+.leaderboard-item:last-child {
+  border-bottom: none;
 }
 
-/* ===== Modal Styles ===== */
-.modal {
-  display: none;
-  position: fixed;
-  z-index: 1000;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0,0,0,0.5);
+.rank {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background: var(--primary-color);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 0.875rem;
 }
 
-.modal-content {
-  background: white;
-  margin: 10% auto;
-  padding: 25px;
-  border-radius: 8px;
-  width: 450px;
-  max-width: 90%;
-  position: relative;
-  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
+.user-info {
+  flex: 1;
 }
 
-.close-modal {
-  position: absolute;
-  right: 20px;
-  top: 15px;
-  font-size: 1.5rem;
-  cursor: pointer;
-  color: #7f8c8d;
+.user-info .username {
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 0.25rem;
 }
 
-.close-modal:hover {
-  color: #2c3e50;
+.user-stats {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.75rem;
+  color: var(--text-secondary);
 }
 
-.modal h2 {
-  margin-top: 0;
-  border-bottom: none;
-  padding-bottom: 0;
-  color: #2c3e50;
+.message-count {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--text-primary);
 }
 
-.form-group {
-  margin-bottom: 20px;
+/* ===== Model Distribution ===== */
+.chart-toggle {
+  display: flex;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  overflow: hidden;
 }
 
-.form-group label {
-  display: block;
-  margin-bottom: 8px;
-  font-weight: bold;
-  color: #2c3e50;
+.toggle-btn {
+  background: none;
+  border: none;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  color: var(--text-secondary);
+  transition: all 0.2s;
 }
 
-.form-control {
-  width: 100%;
-  padding: 10px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  font-size: 1rem;
+.toggle-btn.active {
+  background: var(--primary-color);
+  color: white;
 }
 
-.form-control:focus {
-  border-color: #3498db;
-  outline: none;
-  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
+.model-table {
+  max-height: 400px;
+  overflow-y: auto;
 }
 
-.form-actions {
+.model-row {
   display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-  margin-top: 25px;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 0;
+  border-bottom: 1px solid var(--border-color);
 }
 
-.submit-btn {
-  background: #27ae60;
-  color: white;
-  border: none;
-  padding: 10px 20px;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 1rem;
+.model-row:last-child {
+  border-bottom: none;
 }
 
-.submit-btn:hover {
-  background: #219653;
+.model-info .model-name {
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 0.25rem;
 }
 
-.cancel-btn {
-  background: #95a5a6;
-  color: white;
-  border: none;
-  padding: 10px 20px;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 1rem;
+.model-users {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
 }
 
-.cancel-btn:hover {
-  background: #7f8c8d;
+.model-stats {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.75rem;
+  color: var(--text-secondary);
 }
 
-/* ===== Animations ===== */
-@keyframes fa-spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(359deg);
-  }
+.model-chart {
+  height: 300px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
+.hidden {
+  display: none !important;
+}
 
+/* ===== Quick Actions ===== */
+.action-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+}
 
+.action-item {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  text-decoration: none;
+  color: var(--text-primary);
+  transition: all 0.2s;
+  cursor: pointer;
+  background: none;
+}
 
+.action-item:hover {
+  border-color: var(--primary-color);
+  background: rgba(79, 70, 229, 0.05);
+  transform: translateY(-1px);
+}
 
+.action-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-md);
+  background: var(--primary-color);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.25rem;
+}
 
+.action-text {
+  flex: 1;
+}
 
+.action-title {
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 0.25rem;
+}
 
+.action-desc {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+}
 
+/* ===== Enhanced Form Controls ===== */
+.form-control {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border: 2px solid var(--border-color);
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  transition: all 0.2s ease;
+  background: white;
+  color: var(--text-primary);
+}
 
+.form-control:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+}
 
+.form-control:hover {
+  border-color: #d1d5db;
+}
 
+.form-control::placeholder {
+  color: var(--text-secondary);
+}
 
+/* ===== Enhanced Button Styles ===== */
+.btn {
+  padding: 0.75rem 1.5rem;
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  border: 1px solid transparent;
+  justify-content: center;
+  min-width: fit-content;
+}
 
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none !important;
+}
 
+.btn-secondary {
+  background: var(--light-color);
+  color: var(--text-secondary);
+  border-color: var(--border-color);
+}
 
+.btn-secondary:hover {
+  background: #f1f5f9;
+  border-color: #d1d5db;
+  color: var(--text-primary);
+}
 
+.btn-outline {
+  background: white;
+  color: var(--primary-color);
+  border-color: var(--primary-color);
+}
 
+.btn-outline:hover {
+  background: var(--primary-color);
+  color: white;
+}
 
+.btn-danger {
+  background: var(--error-color);
+  color: white;
+  border-color: var(--error-color);
+}
 
+.btn-danger:hover {
+  background: #dc2626;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
+}
 
-/* ===== Base Admin Styles ===== */
-:root {
-  --primary-color: #4361ee;
-  --primary-hover: #3a56d4;
-  --secondary-color: #3f37c9;
-  --success-color: #4cc9f0;
-  --danger-color: #f72585;
-  --warning-color: #f8961e;
-  --info-color: #4895ef;
-  --light-color: #f8f9fa;
-  --dark-color: #212529;
-  --text-color: #2b2d42;
-  --text-light: #8d99ae;
-  --border-color: #e9ecef;
-  --bg-color: #f8f9fa;
-  --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
-  --hover-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
-  --transition: all 0.3s ease;
+.btn-success {
+  background: var(--success-color);
+  color: white;
+  border-color: var(--success-color);
 }
 
-.admin-container {
-  max-width: 1600px;
-  margin: 0 auto;
-  padding: 2rem;
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-  color: var(--text-color);
-  background-color: var(--bg-color);
-  min-height: 100vh;
-}
-
-h1 {
-  color: var(--dark-color);
-  font-weight: 700;
-  font-size: 2rem;
-  margin-bottom: 1.5rem;
-  position: relative;
-  padding-bottom: 0.75rem;
-}
-
-h1::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 60px;
-  height: 4px;
-  background: var(--primary-color);
-  border-radius: 2px;
+.btn-success:hover {
+  background: #059669;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
 }
 
-h2 {
-  color: var(--dark-color);
-  font-weight: 600;
-  font-size: 1.5rem;
-  margin: 0;
+.btn-warning {
+  background: var(--warning-color);
+  color: white;
+  border-color: var(--warning-color);
 }
 
-/* ===== Common Components ===== */
-.link {
-  color: var(--primary-color);
-  text-decoration: none;
-  font-weight: 500;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  transition: var(--transition);
+.btn-warning:hover {
+  background: #d97706;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
 }
 
-.link:hover {
-  color: var(--primary-hover);
-  text-decoration: underline;
+.btn-info {
+  background: var(--info-color);
+  color: white;
+  border-color: var(--info-color);
 }
 
-.link i {
-  font-size: 0.9em;
+.btn-info:hover {
+  background: #2563eb;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
 }
 
-.btn {
-  padding: 0.5rem 1rem;
-  border-radius: 6px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: var(--transition);
-  display: inline-flex;
+/* ===== Enhanced Input Groups ===== */
+.input-group {
+  position: relative;
+  display: flex;
   align-items: center;
-  gap: 0.5rem;
-  border: none;
 }
 
-.btn-primary {
-  background-color: var(--primary-color);
-  color: white;
+.input-group .form-control {
+  padding-right: 2.5rem;
 }
 
-.btn-primary:hover {
-  background-color: var(--primary-hover);
-  box-shadow: 0 2px 8px rgba(67, 97, 238, 0.3);
+.input-group i {
+  position: absolute;
+  right: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+  pointer-events: none;
 }
 
-.btn-danger {
-  background-color: var(--danger-color);
-  color: white;
+/* ===== Enhanced Admin Container ===== */
+.admin-container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 2rem;
+  min-height: 100vh;
 }
 
-.btn-danger:hover {
-  background-color: #e5177e;
-  box-shadow: 0 2px 8px rgba(247, 37, 133, 0.3);
+/* ===== Enhanced Stats Bar ===== */
+.stats-bar {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 2rem;
 }
 
-.btn-success {
-  background-color: var(--success-color);
-  color: white;
+.stat-item {
+  background: white;
+  padding: 2rem;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
 }
 
-.btn-success:hover {
-  background-color: #3ab5d8;
-  box-shadow: 0 2px 8px rgba(76, 201, 240, 0.3);
+.stat-item:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-lg);
 }
 
-.btn-sm {
-  padding: 0.375rem 0.75rem;
-  font-size: 0.875rem;
+.stat-item::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
 }
 
-/* ===== Cards ===== */
-.card {
+/* ===== Enhanced Header Styles ===== */
+.admin-header {
   background: white;
-  border-radius: 12px;
-  box-shadow: var(--card-shadow);
-  transition: var(--transition);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--border-color);
+  margin-bottom: 2rem;
+  padding: 2rem;
+  position: relative;
   overflow: hidden;
 }
 
-.card:hover {
-  box-shadow: var(--hover-shadow);
+.admin-header::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
 }
 
-.card-header {
-  padding: 1rem 1.5rem;
-  border-bottom: 1px solid var(--border-color);
+.header-content {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
 }
 
-.card-body {
-  padding: 1.5rem;
-}
-
-/* ===== Tables ===== */
-.table-responsive {
-  overflow-x: auto;
-}
-
-.table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.table th {
-  background-color: var(--primary-color);
-  color: white;
-  font-weight: 600;
-  padding: 1rem;
-  text-align: left;
-}
-
-.table td {
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--border-color);
-}
-
-.table tr:last-child td {
-  border-bottom: none;
+.header-title {
+  flex: 1;
+  min-width: 0;
 }
 
-.table tr:nth-child(even) {
-  background-color: rgba(248, 249, 250, 0.5);
+.admin-title {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 0.5rem;
 }
 
-.table tr:hover {
-  background-color: rgba(67, 97, 238, 0.05);
+.admin-title i {
+  color: var(--primary-color);
+  font-size: 1.75rem;
 }
 
-/* ===== Forms ===== */
-.form-control {
-  width: 100%;
-  padding: 0.625rem 0.875rem;
-  border: 1px solid var(--border-color);
-  border-radius: 6px;
+.admin-subtitle {
+  color: var(--text-secondary);
   font-size: 1rem;
-  transition: var(--transition);
+  margin: 0;
+  font-weight: 500;
 }
 
-.form-control:focus {
-  border-color: var(--primary-color);
-  outline: none;
-  box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
 }
 
-.form-group {
-  margin-bottom: 1.25rem;
+.back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  color: var(--primary-color);
+  text-decoration: none;
+  border: 1px solid var(--primary-color);
+  border-radius: var(--radius-md);
+  font-weight: 500;
+  font-size: 0.875rem;
+  transition: all 0.2s ease;
+  background: white;
 }
 
-.form-group label {
-  display: block;
-  margin-bottom: 0.5rem;
-  font-weight: 500;
+.back-link:hover {
+  background: var(--primary-color);
+  color: white;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
 }
 
-/* ===== Dashboard Specific ===== */
-.stats-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  gap: 1.5rem;
-  margin-bottom: 2rem;
+.back-link i {
+  font-size: 0.875rem;
 }
 
-.stat-card {
+/* ===== Enhanced Control Sections ===== */
+.control-section {
   background: white;
-  border-radius: 12px;
-  padding: 1.5rem;
-  box-shadow: var(--card-shadow);
+  padding: 2rem;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--border-color);
+  transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
 }
 
-.stat-card::before {
+.control-section::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
-  width: 4px;
-  height: 100%;
-  background: var(--primary-color);
-}
-
-.stat-value {
-  font-size: 2.25rem;
-  font-weight: 700;
-  color: var(--dark-color);
-  margin-bottom: 0.25rem;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
 }
 
-.stat-label {
-  color: var(--text-light);
-  font-size: 0.875rem;
-  margin-bottom: 0.5rem;
+.control-section:hover {
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
 }
 
-.stat-trend {
+.control-section h3 {
+  margin: 0 0 1.5rem 0;
+  color: var(--text-primary);
+  font-size: 1.125rem;
+  font-weight: 600;
   display: flex;
   align-items: center;
-  gap: 0.25rem;
-  font-size: 0.875rem;
-  padding-top: 0.75rem;
-  border-top: 1px solid var(--border-color);
-}
-
-.trend-up {
-  color: #4cc9f0;
-}
-
-.trend-down {
-  color: #f72585;
-}
-
-/* ===== Layout ===== */
-.grid-cols-2 {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1.5rem;
-}
-
-@media (max-width: 1024px) {
-  .grid-cols-2 {
-    grid-template-columns: 1fr;
-  }
+  gap: 0.5rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 2px solid #f3f4f6;
 }
 
-/* ===== Recent Chats ===== */
-.recent-chats {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 1rem;
+.control-section h3 i {
+  color: var(--primary-color);
+  font-size: 1.2rem;
 }
 
-.chat-card {
+/* ===== Enhanced Data Table Container ===== */
+.data-table-container {
   background: white;
-  border-radius: 8px;
-  padding: 1rem;
-  box-shadow: var(--card-shadow);
-  transition: var(--transition);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--border-color);
+  margin-bottom: 2rem;
+  overflow: hidden;
+  position: relative;
 }
 
-.chat-card:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--hover-shadow);
+.data-table-container::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
 }
 
-.chat-header {
+.table-header {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 0.75rem;
+  align-items: center;
+  padding: 1.5rem 2rem;
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  border-bottom: 1px solid var(--border-color);
 }
 
-.chat-user {
+.table-header h3 {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: 1.125rem;
   font-weight: 600;
-  color: var(--dark-color);
-}
-
-.chat-time {
-  color: var(--text-light);
-  font-size: 0.75rem;
-}
-
-.chat-meta {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  display: flex;
+  align-items: center;
   gap: 0.5rem;
-  font-size: 0.75rem;
-  color: var(--text-light);
-  margin-bottom: 0.75rem;
-}
-
-.progress-bar {
-  height: 8px;
-  background-color: #e9ecef;
-  border-radius: 4px;
-  overflow: hidden;
-  margin-bottom: 0.75rem;
-}
-
-.progress-value {
-  height: 100%;
-  background-color: var(--primary-color);
-  transition: width 0.3s ease;
 }
 
-/* ===== Quick Actions ===== */
-.quick-actions {
-  margin-top: 2rem;
-}
-
-.action-buttons {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 1rem;
-  margin-top: 1rem;
+.table-header h3 i {
+  color: var(--primary-color);
 }
 
-.action-button {
+.table-controls {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  padding: 1.5rem;
-  background: white;
-  color: var(--primary-color);
-  border-radius: 8px;
-  text-decoration: none;
-  box-shadow: var(--card-shadow);
-  transition: var(--transition);
+  gap: 1rem;
 }
 
-.action-button:hover {
-  transform: translateY(-3px);
-  box-shadow: var(--hover-shadow);
-  color: var(--primary-hover);
+.table-controls select {
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  font-size: 0.875rem;
+  background: white;
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: all 0.2s ease;
 }
 
-.action-button i {
-  font-size: 1.75rem;
-  margin-bottom: 0.75rem;
+.table-controls select:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
 }
 
-.action-button span {
-  font-size: 0.875rem;
-  font-weight: 500;
+/* ===== Enhanced Responsive Breakpoints ===== */
+@media (max-width: 1200px) {
+  .admin-container {
+    max-width: 100%;
+    padding: 1.5rem;
+  }
 }
 
-/* ===== Pagination ===== */
-.pagination {
-  display: flex;
-  justify-content: center;
-  gap: 0.5rem;
-  margin-top: 2rem;
+@media (max-width: 1024px) {
+  .chat-list-header,
+  .chat-row {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+  
+  .user-list-header,
+  .user-row {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+  
+  .chat-cell:nth-child(n+4),
+  .user-cell:nth-child(n+4) {
+    display: none;
+  }
 }
 
-.page-link {
-  padding: 0.5rem 0.75rem;
-  background: white;
-  color: var(--text-color);
-  text-decoration: none;
-  border-radius: 6px;
-  box-shadow: var(--card-shadow);
-  transition: var(--transition);
-}
+@media (max-width: 768px) {
+  .admin-container {
+    padding: 1rem;
+  }
+  
+  .admin-header {
+    padding: 1.5rem;
+  }
+  
+  .header-content {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+  }
+  
+  .admin-title {
+    font-size: 1.5rem;
+  }
+  
+  .admin-title i {
+    font-size: 1.5rem;
+  }
+  
+  .header-actions {
+    width: 100%;
+    justify-content: flex-start;
+  }
+  
+  .control-section {
+    padding: 1.5rem;
+  }
+  
+  .table-header {
+    padding: 1.25rem;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: flex-start;
+  }
+  
+  .table-controls {
+    width: 100%;
+    justify-content: flex-start;
+  }
+}
 
-.page-link:hover, 
-.page-link.active {
-  background: var(--primary-color);
-  color: white;
+@media (max-width: 480px) {
+  .admin-container {
+    padding: 0.75rem;
+  }
+  
+  .admin-header {
+    padding: 1rem;
+  }
+  
+  .admin-title {
+    font-size: 1.25rem;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+  
+  .admin-title i {
+    font-size: 1.25rem;
+  }
+  
+  .back-link {
+    padding: 0.5rem 1rem;
+    font-size: 0.8rem;
+  }
+  
+  .control-section {
+    padding: 1rem;
+  }
+  
+  .control-section h3 {
+    font-size: 1rem;
+  }
+  
+  .table-header {
+    padding: 1rem;
+  }
+  
+  .table-header h3 {
+    font-size: 1rem;
+  }
 }
 
-/* ===== Animations ===== */
+/* ===== Enhanced Animation ===== */
 @keyframes fadeIn {
-  from { opacity: 0; transform: translateY(10px); }
-  to { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fade-in {
+  animation: fadeIn 0.3s ease-out;
+}
+
+.slide-up {
+  animation: slideUp 0.3s ease-out;
+}
+
+/* ===== Enhanced Utilities ===== */
+.text-muted {
+  color: var(--text-secondary);
+}
+
+.text-primary {
+  color: var(--primary-color);
+}
+
+.text-success {
+  color: var(--success-color);
+}
+
+.text-warning {
+  color: var(--warning-color);
+}
+
+.text-danger {
+  color: var(--error-color);
+}
+
+.text-info {
+  color: var(--info-color);
+}
+
+.bg-light {
+  background-color: var(--light-color);
+}
+
+.bg-white {
+  background-color: white;
+}
+
+.rounded {
+  border-radius: var(--radius-md);
+}
+
+.rounded-lg {
+  border-radius: var(--radius-lg);
+}
+
+.shadow-sm {
+  box-shadow: var(--shadow-sm);
+}
+
+.shadow-md {
+  box-shadow: var(--shadow-md);
+}
+
+.shadow-lg {
+  box-shadow: var(--shadow-lg);
+}
+
+.mt-1 { margin-top: 0.25rem; }
+.mt-2 { margin-top: 0.5rem; }
+.mt-3 { margin-top: 0.75rem; }
+.mt-4 { margin-top: 1rem; }
+.mt-5 { margin-top: 1.25rem; }
+.mt-6 { margin-top: 1.5rem; }
+
+.mb-1 { margin-bottom: 0.25rem; }
+.mb-2 { margin-bottom: 0.5rem; }
+.mb-3 { margin-bottom: 0.75rem; }
+.mb-4 { margin-bottom: 1rem; }
+.mb-5 { margin-bottom: 1.25rem; }
+.mb-6 { margin-bottom: 1.5rem; }
+
+.p-1 { padding: 0.25rem; }
+.p-2 { padding: 0.5rem; }
+.p-3 { padding: 0.75rem; }
+.p-4 { padding: 1rem; }
+.p-5 { padding: 1.25rem; }
+.p-6 { padding: 1.5rem; }
+
+.d-flex { display: flex; }
+.d-block { display: block; }
+.d-inline { display: inline; }
+.d-inline-block { display: inline-block; }
+.d-none { display: none; }
+
+.flex-column { flex-direction: column; }
+.flex-row { flex-direction: row; }
+.justify-content-center { justify-content: center; }
+.justify-content-between { justify-content: space-between; }
+.justify-content-end { justify-content: flex-end; }
+.align-items-center { align-items: center; }
+.align-items-start { align-items: flex-start; }
+.align-items-end { align-items: flex-end; }
+
+.w-100 { width: 100%; }
+.h-100 { height: 100%; }
+
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+
+.font-weight-bold { font-weight: 700; }
+.font-weight-semibold { font-weight: 600; }
+.font-weight-medium { font-weight: 500; }
+.font-weight-normal { font-weight: 400; }
+
+.cursor-pointer { cursor: pointer; }
+.cursor-default { cursor: default; }
+.cursor-not-allowed { cursor: not-allowed; }
+
+.position-relative { position: relative; }
+.position-absolute { position: absolute; }
+.position-fixed { position: fixed; }
+
+.overflow-hidden { overflow: hidden; }
+.overflow-auto { overflow: auto; }
+.overflow-scroll { overflow: scroll; }
+
+/* ===== Enhanced Loading States ===== */
+.loading-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem;
+  color: var(--text-secondary);
+}
+
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid var(--border-color);
+  border-top: 4px solid var(--primary-color);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.empty-state {
+  text-align: center;
+  padding: 3rem;
+  color: var(--text-secondary);
+}
+
+.empty-state i {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  color: var(--border-color);
+}
+
+.empty-state h3 {
+  color: var(--text-primary);
+  margin-bottom: 0.5rem;
+}
+
+/* ===== Enhanced Error States ===== */
+.error-state {
+  text-align: center;
+  padding: 3rem;
+  color: var(--error-color);
+}
+
+.error-state i {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+}
+
+.error-state h3 {
+  color: var(--error-color);
+  margin-bottom: 0.5rem;
+}
+
+.error-state p {
+  color: var(--text-secondary);
 }
 
+/* ===== Animations ===== */
 .fade-in {
-  animation: fadeIn 0.3s ease-out forwards;
+  opacity: 0;
+  transform: translateY(20px);
+  animation: fadeIn 0.6s ease forwards;
+}
+
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ===== Modals ===== */
+.modal {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+  align-items: center;
+  justify-content: center;
 }
 
-/* ===== Responsive Adjustments ===== */
+.modal.active {
+  display: flex;
+}
+
+.modal-content {
+  background: white;
+  border-radius: var(--radius-lg);
+  max-width: 500px;
+  width: 90%;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: var(--shadow-lg);
+}
+
+.modal-content.large {
+  max-width: 900px;
+}
+
+.modal-header {
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-header h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: var(--text-secondary);
+  padding: 0.5rem;
+  border-radius: var(--radius-md);
+  transition: all 0.2s;
+}
+
+.close-btn:hover {
+  background: var(--border-color);
+  color: var(--text-primary);
+}
+
+.modal-body {
+  padding: 1.5rem;
+}
+
+/* ===== Analytics ===== */
+.analytics-controls {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 2rem;
+  flex-wrap: wrap;
+}
+
+.analytics-controls select,
+.analytics-controls input {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+}
+
+.custom-range {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.analytics-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  gap: 1.5rem;
+}
+
+.analytics-card {
+  background: var(--light-color);
+  border-radius: var(--radius-md);
+  padding: 1.5rem;
+}
+
+.analytics-card h4 {
+  margin-bottom: 1rem;
+  color: var(--text-primary);
+}
+
+.user-activity-list {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.user-activity-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 0;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.user-activity-item:last-child {
+  border-bottom: none;
+}
+
+.activity-count {
+  font-weight: 600;
+  color: var(--primary-color);
+}
+
+/* ===== Export Options ===== */
+.export-options {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.option-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.option-group label {
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.option-group select {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+}
+
+/* ===== Buttons ===== */
+.btn-primary {
+  background: var(--primary-color);
+  color: white;
+  border: none;
+  padding: 0.75rem 1.5rem;
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.btn-primary:hover {
+  background: #4338CA;
+  transform: translateY(-1px);
+}
+
+.btn-primary:disabled {
+  background: var(--text-secondary);
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* ===== Loading States ===== */
+.loading-spinner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  padding: 3rem;
+  color: var(--text-secondary);
+}
+
+.loading-spinner i {
+  font-size: 2rem;
+}
+
+.error-message {
+  text-align: center;
+  padding: 2rem;
+  color: var(--error-color);
+}
+
+/* ===== Responsive Design ===== */
 @media (max-width: 768px) {
   .admin-container {
     padding: 1rem;
   }
   
+  .header-content {
+    flex-direction: column;
+    gap: 1rem;
+    text-align: center;
+  }
+  
+  .header-actions {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  
   .stats-grid {
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr;
+  }
+  
+  .dashboard-grid {
+    grid-template-columns: 1fr;
   }
   
-  .recent-chats {
+  .analytics-grid {
     grid-template-columns: 1fr;
   }
+  
+  .action-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .modal-content {
+    width: 95%;
+  }
 }
 
-@media (max-width: 576px) {
-  .stats-grid {
-    grid-template-columns: 1fr;
+@media (max-width: 1024px) {
+  .chat-list-header,
+  .chat-row {
+    grid-template-columns: 1fr 1fr 1fr;
   }
   
-  h1 {
-    font-size: 1.5rem;
+  .user-list-header,
+  .user-row {
+    grid-template-columns: 1fr 1fr 1fr;
   }
   
-  h2 {
-    font-size: 1.25rem;
+  .chat-cell:nth-child(n+4),
+  .user-cell:nth-child(n+4) {
+    display: none;
   }
-}
\ No newline at end of file
+}
+
+.date-range-inputs span {
+  color: #7f8c8d;
+  font-size: 0.9rem;
+}
+
+.filter-button,
+.search-form button {
+  padding: 8px 15px;
+  background: #3498db;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.filter-button:hover,
+.search-form button:hover {
+  background: #2980b9;
+}
+
+/* ===== Action Bars ===== */
+.action-bar {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-bottom: 15px;
+  padding: 10px;
+  background: #f8f9fa;
+  border-radius: 4px;
+}
+
+.selected-count {
+  font-size: 0.9rem;
+  color: #7f8c8d;
+}
+
+.bulk-action-btn {
+  padding: 8px 15px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+
+.bulk-action-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+#bulkDeleteBtn {
+  background: #e74c3c;
+  color: white;
+}
+
+#bulkDeleteBtn:not(:disabled):hover {
+  background: #c0392b;
+}
+
+#exportSelectedBtn {
+  background: #27ae60;
+  color: white;
+}
+
+#exportSelectedBtn:not(:disabled):hover {
+  background: #219653;
+}
+
+.export-container {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.export-format {
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background: white;
+  font-size: 0.9rem;
+}
+
+.export-btn {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.fa-download {
+  font-size: 0.9rem;
+}
+
+/* ===== List Styles ===== */
+.chat-list,
+.user-list {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  margin-bottom: 20px;
+}
+
+.chat-list-header,
+.user-list-header,
+.error-page {
+  background: #2c3e50;
+  color: white;
+  font-weight: bold;
+  padding: 1rem;
+  display: grid;
+  align-items: center;
+}
+
+.error-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 70vh;
+  text-align: center;
+  padding: 2rem;
+}
+
+.error-icon {
+  font-size: 4rem;
+  color: var(--error-color);
+  margin-bottom: 1rem;
+}
+
+.error-page h1 {
+  font-size: 2.5rem;
+  color: var(--text-primary);
+  margin-bottom: 0.5rem;
+}
+
+.error-page h2 {
+  font-size: 1.5rem;
+  color: var(--text-secondary);
+  margin-bottom: 1.5rem;
+  font-weight: 500;
+}
+
+.error-message {
+  background: white;
+  border-radius: var(--radius-md);
+  padding: 1.5rem;
+  box-shadow: var(--shadow-sm);
+  margin-bottom: 2rem;
+  max-width: 600px;
+  width: 100%;
+}
+
+.error-message p {
+  color: var(--text-secondary);
+  font-size: 1.1rem;
+  margin-bottom: 1rem;
+}
+
+.error-details {
+  margin-top: 1rem;
+}
+
+.error-details summary {
+  cursor: pointer;
+  color: var(--text-secondary);
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+}
+
+.error-details pre {
+  background: #f8f9fa;
+  padding: 1rem;
+  border-radius: var(--radius-sm);
+  overflow-x: auto;
+  font-size: 0.875rem;
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+}
+
+.error-actions {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.error-actions .btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  border-radius: var(--radius-md);
+  font-weight: 500;
+  text-decoration: none;
+  transition: all 0.2s;
+  border: none;
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+.error-actions .btn-primary {
+  background: var(--primary-color);
+  color: white;
+}
+
+.error-actions .btn-primary:hover {
+  background: #3730A3;
+  transform: translateY(-1px);
+}
+
+.error-actions .btn-secondary {
+  background: white;
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+}
+
+.error-actions .btn-secondary:hover {
+  background: var(--light-color);
+  transform: translateY(-1px);
+}
+
+/* ===== End Error Page Styles ===== */
\ No newline at end of file
diff --git a/routes/dashboard.js b/routes/dashboard.js
index 1921502..08e6658 100644
--- a/routes/dashboard.js
+++ b/routes/dashboard.js
@@ -126,9 +126,14 @@ router.get("/admin/dashboard", validateSessionAndRole("SuperAdmin"), async (req,
     });
   } catch (error) {
     console.error("Error in admin dashboard:", error);
-    res.status(500).render("admin/error.handlebars", {
-      message: "Failed to load dashboard data",
-      error: error.message
+    return res.status(500).render("Error/dError.handlebars", {
+      layout: false,
+      code: 500,
+      error: "Internal Server Error",
+      message: "An unexpected error occurred on the server.",
+      details: error,
+      pagename: "Home",
+      page: `/dashboard`,
     });
   }
 });
@@ -223,9 +228,14 @@ router.get("/admin/users", validateSessionAndRole("SuperAdmin"), async (req, res
     });
   } catch (error) {
     console.error("Error in user management:", error);
-    res.status(500).render("admin/error.handlebars", {
-      message: "Failed to load user data",
-      error: error.message
+    return res.status(500).render("Error/dError.handlebars", {
+      layout: false,
+      code: 500,
+      error: "Internal Server Error",
+      message: "An unexpected error occurred on the server.",
+      details: error,
+      pagename: "Home",
+      page: `/dashboard`,
     });
   }
 });
@@ -351,9 +361,14 @@ router.get("/admin/chats", validateSessionAndRole("SuperAdmin"), async (req, res
     });
   } catch (error) {
     console.error("Error in chat management:", error);
-    res.status(500).render("admin/error.handlebars", {
-      message: "Failed to load chat data",
-      error: error.message
+    return res.status(500).render("Error/dError.handlebars", {
+      layout: false,
+      code: 500,
+      error: "Internal Server Error",
+      message: "An unexpected error occurred on the server.",
+      details: error,
+      pagename: "Home",
+      page: `/dashboard`,
     });
   }
 });
@@ -571,4 +586,375 @@ router.post("/admin/chats/export", validateSessionAndRole("SuperAdmin"), async (
   }
 });
 
+// Add new endpoints for enhanced admin functionality
+
+// Analytics endpoint for detailed statistics
+router.get("/admin/analytics", validateSessionAndRole("SuperAdmin"), async (req, res) => {
+  try {
+    const { period = 'week', startDate, endDate } = req.query;
+    
+    // Calculate date range based on period
+    let dateFilter = "";
+    let paramIndex = 1;
+    const params = [];
+    
+    if (period === 'custom' && startDate && endDate) {
+      dateFilter = `WHERE created_at >= $${paramIndex++} AND created_at <= $${paramIndex++}`;
+      params.push(startDate, endDate + ' 23:59:59');
+    } else {
+      const intervals = {
+        'today': '1 day',
+        'week': '7 days',
+        'month': '30 days',
+        'year': '365 days'
+      };
+      dateFilter = `WHERE created_at >= CURRENT_DATE - INTERVAL '${intervals[period] || '7 days'}'`;
+    }
+
+    // Advanced analytics queries
+    const analyticsQueries = {
+      messagesByDay: `
+        SELECT 
+          DATE(created_at) as date,
+          COUNT(*) as message_count,
+          COUNT(DISTINCT username) as unique_users
+        FROM ai_history_chatapi ${dateFilter}
+        GROUP BY DATE(created_at)
+        ORDER BY date
+      `,
+      
+      userActivity: `
+        SELECT 
+          username,
+          COUNT(*) as total_messages,
+          MIN(created_at) as first_message,
+          MAX(created_at) as last_message,
+          COUNT(DISTINCT DATE(created_at)) as active_days
+        FROM ai_history_chatapi ${dateFilter}
+        GROUP BY username
+        ORDER BY total_messages DESC
+        LIMIT 20
+      `,
+      
+      modelUsage: `
+        SELECT 
+          u.ai_model,
+          COUNT(a.id) as usage_count,
+          AVG(a.temperature) as avg_temperature,
+          COUNT(DISTINCT a.username) as unique_users
+        FROM ai_history_chatapi a
+        JOIN user_settings_chatapi u ON a.username = u.username
+        ${dateFilter}
+        GROUP BY u.ai_model
+        ORDER BY usage_count DESC
+      `,
+      
+      peakHours: `
+        SELECT 
+          EXTRACT(HOUR FROM created_at) as hour,
+          COUNT(*) as message_count,
+          COUNT(DISTINCT username) as unique_users
+        FROM ai_history_chatapi ${dateFilter}
+        GROUP BY hour
+        ORDER BY hour
+      `,
+      
+      conversationStats: `
+        SELECT 
+          jsonb_array_length(conversation_history) as conversation_length,
+          COUNT(*) as conversation_count
+        FROM ai_history_chatapi ${dateFilter}
+        GROUP BY jsonb_array_length(conversation_history)
+        ORDER BY conversation_length
+      `
+    };
+
+    // Execute all analytics queries
+    const results = {};
+    for (const [key, query] of Object.entries(analyticsQueries)) {
+      results[key] = await pool.query(query, params);
+    }
+
+    res.json({
+      success: true,
+      period,
+      data: {
+        messagesByDay: results.messagesByDay.rows,
+        userActivity: results.userActivity.rows,
+        modelUsage: results.modelUsage.rows,
+        peakHours: results.peakHours.rows,
+        conversationStats: results.conversationStats.rows
+      }
+    });
+
+  } catch (error) {
+    console.error("Error in analytics:", error);
+    res.status(500).json({
+      success: false,
+      message: "Failed to fetch analytics data",
+      error: error.message
+    });
+  }
+});
+
+// Export endpoint for data export
+router.get("/admin/export/:type", validateSessionAndRole("SuperAdmin"), async (req, res) => {
+  try {
+    const { type } = req.params;
+    const { format = 'csv', ...filters } = req.query;
+    
+    let query = "";
+    let filename = "";
+    
+    switch (type) {
+      case 'users':
+        query = `
+          SELECT 
+            u.username,
+            u.ai_model,
+            u.daily_message_limit,
+            u.temperature,
+            u.created_at,
+            COALESCE(a.chat_count, 0) as total_chats,
+            COALESCE(l.total_messages, 0) as total_messages
+          FROM user_settings_chatapi u
+          LEFT JOIN (
+            SELECT username, COUNT(*) as chat_count FROM ai_history_chatapi GROUP BY username
+          ) a ON u.username = a.username
+          LEFT JOIN (
+            SELECT username, SUM(message_count) as total_messages FROM user_message_logs_chatapi GROUP BY username
+          ) l ON u.username = l.username
+          ORDER BY u.created_at DESC
+        `;
+        filename = `users_export_${new Date().toISOString().split('T')[0]}`;
+        break;
+        
+      case 'chats':
+        query = `
+          SELECT 
+            a.id,
+            a.username,
+            a.created_at,
+            a.temperature,
+            u.ai_model,
+            jsonb_array_length(a.conversation_history) as message_count,
+            (a.conversation_history->0->'parts'->0->>'text') as first_message
+          FROM ai_history_chatapi a
+          LEFT JOIN user_settings_chatapi u ON a.username = u.username
+          ORDER BY a.created_at DESC
+        `;
+        filename = `chats_export_${new Date().toISOString().split('T')[0]}`;
+        break;
+        
+      case 'analytics':
+        query = `
+          SELECT 
+            DATE(created_at) as date,
+            COUNT(*) as total_messages,
+            COUNT(DISTINCT username) as unique_users,
+            AVG(temperature) as avg_temperature
+          FROM ai_history_chatapi
+          WHERE created_at >= CURRENT_DATE - INTERVAL '30 days'
+          GROUP BY DATE(created_at)
+          ORDER BY date
+        `;
+        filename = `analytics_export_${new Date().toISOString().split('T')[0]}`;
+        break;
+        
+      default:
+        return res.status(400).json({ success: false, message: "Invalid export type" });
+    }
+
+    const result = await pool.query(query);
+    const data = result.rows;
+
+    if (format === 'csv') {
+      // Convert to CSV
+      const headers = Object.keys(data[0] || {});
+      const csvContent = [
+        headers.join(','),
+        ...data.map(row => headers.map(header => 
+          JSON.stringify(row[header] || '')
+        ).join(','))
+      ].join('\n');
+
+      res.setHeader('Content-Type', 'text/csv');
+      res.setHeader('Content-Disposition', `attachment; filename="${filename}.csv"`);
+      res.send(csvContent);
+    } else {
+      // JSON format
+      res.setHeader('Content-Type', 'application/json');
+      res.setHeader('Content-Disposition', `attachment; filename="${filename}.json"`);
+      res.json(data);
+    }
+
+  } catch (error) {
+    console.error("Error in export:", error);
+    res.status(500).json({
+      success: false,
+      message: "Failed to export data",
+      error: error.message
+    });
+  }
+});
+
+// User settings update endpoint
+router.put("/admin/users/:username", validateSessionAndRole("SuperAdmin"), async (req, res) => {
+  try {
+    const { username } = req.params;
+    const { dailyLimit, aiModel, temperature } = req.body;
+
+    // Validate inputs
+    if (dailyLimit && (dailyLimit < 1 || dailyLimit > 1000)) {
+      return res.status(400).json({
+        success: false,
+        message: "Daily limit must be between 1 and 1000"
+      });
+    }
+
+    if (temperature && (temperature < 0 || temperature > 2)) {
+      return res.status(400).json({
+        success: false,
+        message: "Temperature must be between 0 and 2"
+      });
+    }
+
+    // Update user settings
+    const updateQuery = `
+      UPDATE user_settings_chatapi 
+      SET 
+        daily_message_limit = COALESCE($1, daily_message_limit),
+        ai_model = COALESCE($2, ai_model),
+        temperature = COALESCE($3, temperature),
+        updated_at = CURRENT_TIMESTAMP
+      WHERE username = $4
+      RETURNING *
+    `;
+
+    const result = await pool.query(updateQuery, [
+      dailyLimit || null,
+      aiModel || null,
+      temperature || null,
+      username
+    ]);
+
+    if (result.rows.length === 0) {
+      return res.status(404).json({
+        success: false,
+        message: "User not found"
+      });
+    }
+
+    res.json({
+      success: true,
+      message: "User settings updated successfully",
+      user: result.rows[0]
+    });
+
+  } catch (error) {
+    console.error("Error updating user:", error);
+    res.status(500).json({
+      success: false,
+      message: "Failed to update user settings",
+      error: error.message
+    });
+  }
+});
+
+// System stats endpoint for real-time monitoring
+router.get("/admin/system-stats", validateSessionAndRole("SuperAdmin"), async (req, res) => {
+  try {
+    const systemStats = {
+      server: {
+        uptime: process.uptime(),
+        memory: process.memoryUsage(),
+        nodeVersion: process.version,
+        platform: process.platform,
+        cpu: process.cpuUsage()
+      },
+      database: {
+        connectionCount: pool.totalCount,
+        idleCount: pool.idleCount,
+        waitingCount: pool.waitingCount
+      },
+      application: {
+        timestamp: new Date().toISOString(),
+        timezone: Intl.DateTimeFormat().resolvedOptions().timeZone
+      }
+    };
+
+    // Get recent activity
+    const activityQuery = `
+      SELECT 
+        COUNT(*) as messages_last_hour,
+        COUNT(DISTINCT username) as active_users_last_hour
+      FROM ai_history_chatapi 
+      WHERE created_at >= NOW() - INTERVAL '1 hour'
+    `;
+
+    const activityResult = await pool.query(activityQuery);
+    systemStats.activity = activityResult.rows[0];
+
+    res.json({
+      success: true,
+      stats: systemStats
+    });
+
+  } catch (error) {
+    console.error("Error fetching system stats:", error);
+    res.status(500).json({
+      success: false,
+      message: "Failed to fetch system statistics",
+      error: error.message
+    });
+  }
+});
+
+// Enhanced chat view endpoint with full conversation
+router.get("/admin/chats/:chatId", validateSessionAndRole("SuperAdmin"), async (req, res) => {
+  try {
+    const { chatId } = req.params;
+
+    const chatQuery = `
+      SELECT 
+        a.*,
+        u.ai_model,
+        u.daily_message_limit,
+        l.message_count as daily_messages
+      FROM ai_history_chatapi a
+      LEFT JOIN user_settings_chatapi u ON a.username = u.username
+      LEFT JOIN user_message_logs_chatapi l ON a.username = l.username AND l.date = DATE(a.created_at)
+      WHERE a.id = $1
+    `;
+
+    const result = await pool.query(chatQuery, [chatId]);
+    
+    if (result.rows.length === 0) {
+      return res.status(404).render("admin/error.handlebars", {
+        page: "Chat Not Found",
+        error: "Chat not found",
+        message: "The requested chat could not be found.",
+        currentUser: req.session.user.username
+      });
+    }
+
+    const chat = result.rows[0];
+    
+    res.render("admin/chat-detail.handlebars", {
+      page: "Chat Details",
+      chat,
+      currentUser: req.session.user.username
+    });
+
+  } catch (error) {
+    console.error("Error viewing chat:", error);
+    return res.status(500).render("admin/error.handlebars", {
+      page: "Error",
+      error: "Failed to load chat",
+      message: "An error occurred while loading the chat details.",
+      currentUser: req.session.user.username
+    });
+  }
+});
+
 export default router;
\ No newline at end of file
diff --git a/routes/main.js b/routes/main.js
index 33b2265..e99b3ec 100644
--- a/routes/main.js
+++ b/routes/main.js
@@ -4,7 +4,6 @@ import fetch from 'node-fetch';
 import { pool } from "./pool.js";
 import { validateSession, validateSessionAndRole } from "mbkauthe";
 import { checkMessageLimit } from "./checkMessageLimit.js";
-import { GoogleAuth } from 'google-auth-library';
 import { google } from 'googleapis';
 
 dotenv.config();
@@ -21,26 +20,6 @@ const DEFAULT_THEME = 'dark';
 const DEFAULT_FONT_SIZE = 16;
 const DEFAULT_DAILY_LIMIT = 100;
 
-// API Clients
-let googleAuthError = null;
-let serviceusage = null;
-let projectId = null;
-
-// Initialize Google Auth
-(async () => {
-  try {
-    const auth = new GoogleAuth({
-      scopes: ['https://www.googleapis.com/auth/cloud-platform'],
-      keyFile: process.env.GOOGLE_APPLICATION_CREDENTIALS
-    });
-    const authClient = await auth.getClient();
-    projectId = await auth.getProjectId();
-    serviceusage = google.serviceusage('v1');
-  } catch (error) {
-    googleAuthError = error;
-  }
-})();
-
 // Utility Functions
 const formatChatTime = (createdAt) => {
   const now = new Date();
@@ -68,7 +47,7 @@ const db = {
   fetchChatHistories: async (username) => {
     try {
       const { rows } = await pool.query(
-        'SELECT id, created_at, temperature FROM Ai_history WHERE username = $1 ORDER BY created_at DESC',
+        'SELECT id, created_at, temperature FROM ai_history_chatapi WHERE username = $1 ORDER BY created_at DESC',
         [username]
       );
 
@@ -87,7 +66,7 @@ const db = {
         yesterday: [],
         last7Days: [],
         last30Days: [],
-        older: []
+        older: {}
       };
 
       // Month-year format for older chats
@@ -150,15 +129,20 @@ const db = {
         yesterday: [],
         last7Days: [],
         last30Days: [],
-        older: []
+        older: {}
       };
     }
   },
 
   fetchChatHistoryById: async (chatId) => {
     try {
+      // Validate chatId
+      if (!chatId || (typeof chatId !== 'string' && typeof chatId !== 'number')) {
+        throw new Error('Invalid chat ID');
+      }
+
       const { rows } = await pool.query(
-        'SELECT id, conversation_history, temperature FROM Ai_history WHERE id = $1',
+        'SELECT id, conversation_history, temperature FROM ai_history_chatapi WHERE id = $1',
         [chatId]
       );
       return rows[0] || null;
@@ -170,15 +154,28 @@ const db = {
 
   saveChatHistory: async ({ chatId, history, username, temperature }) => {
     try {
+      // Validate inputs
+      if (!username || typeof username !== 'string') {
+        throw new Error('Invalid username');
+      }
+
+      if (!history || !Array.isArray(history)) {
+        throw new Error('Invalid conversation history');
+      }
+
+      if (temperature !== undefined && (isNaN(temperature) || temperature < 0 || temperature > 2)) {
+        throw new Error('Invalid temperature value');
+      }
+
       if (chatId) {
         await pool.query(
-          'UPDATE Ai_history SET conversation_history = $1, created_at = CURRENT_TIMESTAMP, temperature = $3 WHERE id = $2',
+          'UPDATE ai_history_chatapi SET conversation_history = $1, created_at = CURRENT_TIMESTAMP, temperature = $3 WHERE id = $2',
           [JSON.stringify(history), chatId, temperature]
         );
         return chatId;
       } else {
         const { rows } = await pool.query(
-          'INSERT INTO Ai_history (conversation_history, username, temperature) VALUES ($1, $2, $3) RETURNING id',
+          'INSERT INTO ai_history_chatapi (conversation_history, username, temperature) VALUES ($1, $2, $3) RETURNING id',
           [JSON.stringify(history), username, temperature]
         );
         return rows[0].id;
@@ -194,11 +191,11 @@ const db = {
       const today = new Date().toISOString().split("T")[0];
       const [settingsResult, messageLog] = await Promise.all([
         pool.query(
-          'SELECT theme, font_size, ai_model, temperature, daily_message_limit FROM user_settings WHERE username = $1',
+          'SELECT theme, font_size, ai_model, temperature, daily_message_limit FROM user_settings_chatapi WHERE username = $1',
           [username]
         ),
         pool.query(
-          'SELECT message_count FROM user_message_logs WHERE username = $1 AND date = $2',
+          'SELECT message_count FROM user_message_logs_chatapi WHERE username = $1 AND date = $2',
           [username, today]
         )
       ]);
@@ -236,7 +233,7 @@ const db = {
   saveUserSettings: async (username, settings) => {
     try {
       await pool.query(
-        `INSERT INTO user_settings (username, theme, font_size, ai_model, temperature)
+        `INSERT INTO user_settings_chatapi (username, theme, font_size, ai_model, temperature)
          VALUES ($1, $2, $3, $4, $5)
          ON CONFLICT (username)
          DO UPDATE SET
@@ -259,30 +256,44 @@ const db = {
 const aiServices = {
 
   formatResponse: (responseText, provider) => {
-    const identityQuestions = [
-      /who\s*(are|is)\s*you/i,
-      /what\s*(are|is)\s*you/i,
-      /your\s*(name|identity)/i,
-      /introduce\s*yourself/i,
-      /are\s*you\s*(chatgpt|gemini|ai|bot)/i
-    ];
-
-    const isIdentityQuestion = identityQuestions.some(regex => regex.test(responseText));
-
-    if (isIdentityQuestion) {
-      return `I'm a general purpose AI assistant developed by Muhammad Bin Khalid and Maaz Waheed at MBK Tech Studio. How can I help you today? ${responseText}`;
+    // Ensure responseText is a string
+    if (typeof responseText !== 'string') {
+      console.warn('formatResponse: responseText is not a string, converting...');
+      responseText = String(responseText || '');
     }
+
+    // Since we're using proper system messages, we don't need to inject identity here
     return responseText;
   },
 
   gemini: async (apiKey, model, conversationHistory, temperature) => {
     const url = `https://generativelanguage.googleapis.com/v1/models/${model}:generateContent?key=${apiKey}`;
     try {
+      // Gemini doesn't support system role, so we need to handle it differently
+      let systemInstruction = "";
+      let filteredHistory = conversationHistory.filter(msg => {
+        if (msg.role === 'system') {
+          systemInstruction = msg.parts?.[0]?.text || "";
+          return false; // Remove system message from history
+        }
+        return true;
+      });
+
+      // If we have a system instruction, prepend it to the first user message
+      if (systemInstruction && filteredHistory.length > 0 && filteredHistory[0].role === 'user') {
+        filteredHistory[0] = {
+          ...filteredHistory[0],
+          parts: [{
+            text: `${systemInstruction}\n\nUser: ${filteredHistory[0].parts?.[0]?.text || ""}`
+          }]
+        };
+      }
+
       const response = await fetch(url, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
-          contents: conversationHistory,
+          contents: filteredHistory,
           generationConfig: { temperature }
         })
       });
@@ -326,12 +337,30 @@ const aiServices = {
 
   nvidia: async (apiKey, model, conversationHistory, temperature) => {
     const url = "https://integrate.api.nvidia.com/v1/chat/completions";
+
+    // Validate inputs
+    if (!apiKey || typeof apiKey !== 'string') {
+      throw new Error('Invalid NVIDIA API key');
+    }
+
+    if (!model || typeof model !== 'string') {
+      throw new Error('Invalid model specification');
+    }
+
+    if (!Array.isArray(conversationHistory)) {
+      throw new Error('Invalid conversation history format');
+    }
+
     const formattedHistory = conversationHistory
       .map(message => ({
         role: message.role === 'model' ? 'assistant' : message.role,
         content: message.parts?.[0]?.text || ''
       }))
-      .filter(msg => msg.content);
+      .filter(msg => msg.content && msg.role && ['user', 'assistant', 'system'].includes(msg.role));
+
+    if (formattedHistory.length === 0) {
+      throw new Error('No valid messages in conversation history');
+    }
 
     try {
       const response = await fetch(url, {
@@ -373,14 +402,12 @@ const aiServices = {
 };
 
 router.get(["/login", "/signin"], (req, res) => {
-  res.render("staticPage/login.handlebars", {
-    layout: false,
-    userLoggedIn: !!req.session?.user,
-    UserName: req.session?.user?.username || ''
-  });
+  const queryParams = new URLSearchParams(req.query).toString();
+  const redirectUrl = `/mbkauthe/login${queryParams ? `?${queryParams}` : ''}`;
+  return res.redirect(redirectUrl);
 });
 
-router.get("/chatbot/:chatId?", validateSessionAndRole("Any"), async (req, res) => {
+router.get(["/chatbot/:chatId?", "/chat/:chatId?"], validateSessionAndRole("Any"), async (req, res) => {
   try {
     const { chatId } = req.params;
     const { username, role } = req.session.user;
@@ -398,7 +425,15 @@ router.get("/chatbot/:chatId?", validateSessionAndRole("Any"), async (req, res)
     });
   } catch (error) {
     console.error("Error rendering chatbot page:", error);
-    res.status(500).render("templates/Error/500", { error: error.message });
+    return res.status(500).render("Error/dError.handlebars", {
+      layout: false,
+      code: 500,
+      error: "Internal Server Error",
+      message: "An unexpected error occurred on the server.",
+      details: error,
+      pagename: "Home",
+      page: `/dashboard`,
+    });
   }
 });
 
@@ -417,128 +452,26 @@ router.get('/api/chat/histories/:chatId', validateSessionAndRole("Any"), async (
 
   try {
     const chatHistory = await db.fetchChatHistoryById(chatId);
-    chatHistory
-      ? res.json(chatHistory)
-      : res.status(404).json({ message: "Chat history not found" });
-  } catch (error) {
-    handleApiError(res, error, "fetching chat history by ID");
-  }
-});
-
-router.get('/admin/chatbot/gemini', validateSessionAndRole("SuperAdmin"), async (req, res) => {
-  try {
-    if (googleAuthError) {
-      return res.status(500).render("templates/Error/500", {
-        error: "Google API client initialization failed",
-        details: googleAuthError.message
-      });
-    }
-
-    if (!serviceusage || !projectId) {
-      return res.status(500).render("templates/Error/500", {
-        error: "Google Service Usage client or Project ID not available"
-      });
-    }
-
-    const geminiApiKey = process.env.GEMINI_API_KEY_maaz_waheed;
-    if (!geminiApiKey) {
-      return res.status(500).render("templates/Error/500", {
-        error: "Gemini API Key not configured"
-      });
-    }
-
-    const geminiModels = [
-      'gemini-2.0-flash',
-      'gemini-2.0-flash-lite',
-      'gemini-1.5-flash',
-      'gemini-1.5-flash-8b',
-      'gemini-1.5-pro'
-    ];
-
-    const modelData = await Promise.all(geminiModels.map(async (model) => {
-      try {
-        const modelInfoUrl = `https://generativelanguage.googleapis.com/v1beta/models/${model}?key=${geminiApiKey}`;
-        const infoResponse = await fetch(modelInfoUrl);
-
-        if (!infoResponse.ok) {
-          return {
-            name: model,
-            available: false,
-            error: `Model info not available (${infoResponse.status})`
-          };
-        }
-
-        const infoData = await infoResponse.json();
-        return {
-          name: model,
-          available: true,
-          description: infoData.description || 'No description',
-          inputTokenLimit: infoData.inputTokenLimit || 'Unknown',
-          outputTokenLimit: infoData.outputTokenLimit || 'Unknown',
-          supportedMethods: infoData.supportedGenerationMethods || [],
-          lastTested: new Date().toISOString()
-        };
-      } catch (error) {
-        return {
-          name: model,
-          available: false,
-          error: error.message
-        };
+    if (chatHistory) {
+      // Filter out system messages from the conversation history before sending to frontend
+      let conversationHistory = chatHistory.conversation_history;
+      if (typeof conversationHistory === 'string') {
+        conversationHistory = JSON.parse(conversationHistory);
       }
-    }));
 
-    let quotaInfo = {};
-    try {
-      const quotas = await serviceusage.services.consumerQuotaMetrics.list({
-        parent: `projects/${projectId}/services/generativelanguage.googleapis.com`
-      });
+      // Remove system messages from the conversation history
+      const filteredHistory = conversationHistory.filter(msg => msg.role !== 'system');
 
-      quotaInfo = {
-        metrics: quotas.data?.metrics?.map(metric => ({
-          displayName: metric.displayName || metric.name || 'Unknown Metric',
-          name: metric.name,
-          limit: metric.consumerQuotaLimits?.[0]?.quotaBuckets?.[0]?.effectiveLimit || 'N/A',
-          usage: metric.consumerQuotaLimits?.[0]?.quotaBuckets?.[0]?.currentUsage || 0,
-          percentage: 'N/A' // Calculated in template
-        })) || [],
-        updatedAt: new Date().toISOString()
-      };
-    } catch (error) {
-      quotaInfo = {
-        error: true,
-        message: "Failed to fetch quota information",
-        details: error.message
-      };
+      // Return the chat history with filtered conversation
+      res.json({
+        ...chatHistory,
+        conversation_history: filteredHistory
+      });
+    } else {
+      res.status(404).json({ message: "Chat history not found" });
     }
-
-    res.render("mainPages/geminiDashboard", {
-      title: "Gemini API Dashboard",
-      models: modelData.filter(m => m.available),
-      unavailableModels: modelData.filter(m => !m.available),
-      quotaInfo,
-      lastUpdated: new Date().toISOString(),
-      apiKeyConfigured: !!geminiApiKey,
-      googleAuthError: googleAuthError?.message,
-      projectId,
-      helpers: {
-        json: (context) => JSON.stringify(context, null, 2),
-        join: (array, separator) => Array.isArray(array) ? array.join(separator) : 'None',
-        formatNumber: (num) => (typeof num === 'number' || !isNaN(Number(num)))
-          ? Number(num).toLocaleString()
-          : num?.toString() || '0',
-        findMetric: (metrics, name) => Array.isArray(metrics)
-          ? (metrics.find(m => m.name === name) || { name, usage: 'Not found', limit: 'N/A', percentage: 'N/A' })
-          : { name, usage: 'Metrics unavailable', limit: 'N/A', percentage: 'N/A' },
-        isError: (obj) => obj && obj.error,
-        formatDate: (isoString) => isoString ? new Date(isoString).toLocaleString() : 'N/A'
-      }
-    });
   } catch (error) {
-    console.error("Error in Gemini dashboard:", error);
-    res.status(500).render("templates/Error/500", {
-      error: "Failed to retrieve Gemini API information",
-      details: error.message
-    });
+    handleApiError(res, error, "fetching chat history by ID");
   }
 });
 
@@ -548,15 +481,22 @@ router.post('/api/chat/delete-message/:chatId', validateSessionAndRole("Any"), a
 
   console.log(`Request received to delete message. Chat ID: ${chatId}, Message ID: ${messageId}`);
 
-  if (!chatId) {
-    console.error("Chat ID is missing in the request");
-    return res.status(400).json({ message: "Chat ID is required" });
+  if (!chatId || (typeof chatId !== 'string' && typeof chatId !== 'number')) {
+    console.error("Invalid Chat ID in the request");
+    return res.status(400).json({ message: "Valid Chat ID is required" });
   }
-  if (!messageId) {
+
+  if (messageId === undefined || messageId === null) {
     console.error("Message ID is missing in the request");
     return res.status(400).json({ message: "Message ID is required" });
   }
 
+  // Validate messageId is a valid array index
+  if (typeof messageId !== 'string' && typeof messageId !== 'number') {
+    console.error("Invalid Message ID format");
+    return res.status(400).json({ message: "Invalid Message ID format" });
+  }
+
   try {
     console.log(`Fetching chat history for Chat ID: ${chatId}`);
     const chatHistory = await db.fetchChatHistoryById(chatId);
@@ -566,17 +506,50 @@ router.post('/api/chat/delete-message/:chatId', validateSessionAndRole("Any"), a
     }
 
     console.log(`Parsing conversation history for Chat ID: ${chatId}`);
-    let conversationHistory = typeof chatHistory.conversation_history === 'string'
-      ? JSON.parse(chatHistory.conversation_history)
-      : chatHistory.conversation_history;
+    let conversationHistory;
+    try {
+      conversationHistory = typeof chatHistory.conversation_history === 'string'
+        ? JSON.parse(chatHistory.conversation_history)
+        : chatHistory.conversation_history;
+    } catch (parseError) {
+      console.error(`Error parsing conversation history for Chat ID: ${chatId}`, parseError);
+      return res.status(500).json({ message: "Invalid conversation history format" });
+    }
+
+    if (!Array.isArray(conversationHistory)) {
+      console.error(`Conversation history is not an array for Chat ID: ${chatId}`);
+      return res.status(500).json({ message: "Invalid conversation history format" });
+    }
 
     console.log(`Original conversation history length: ${conversationHistory.length}`);
-    conversationHistory = conversationHistory.filter((msg, index) => index.toString() !== messageId);
+
+    // Create a filtered version to map frontend indices to actual indices
+    const filteredHistory = conversationHistory.filter(msg => msg.role !== 'system');
+    const filteredIndex = parseInt(messageId);
+
+    if (isNaN(filteredIndex) || filteredIndex < 0 || filteredIndex >= filteredHistory.length) {
+      console.error(`Invalid message ID: ${messageId} for Chat ID: ${chatId}`);
+      return res.status(400).json({ message: "Invalid message ID" });
+    }
+
+    // Find the actual index in the original conversation history
+    const targetMessage = filteredHistory[filteredIndex];
+    const actualIndex = conversationHistory.findIndex(msg =>
+      msg.role === targetMessage.role &&
+      msg.parts?.[0]?.text === targetMessage.parts?.[0]?.text
+    );
+
+    if (actualIndex === -1) {
+      console.error(`Could not find message to delete for Chat ID: ${chatId}`);
+      return res.status(500).json({ message: "Message not found" });
+    }
+
+    conversationHistory = conversationHistory.filter((msg, index) => index !== actualIndex);
     console.log(`Updated conversation history length: ${conversationHistory.length}`);
 
     console.log(`Saving updated conversation history for Chat ID: ${chatId}`);
     await pool.query(
-      'UPDATE Ai_history SET conversation_history = $1 WHERE id = $2',
+      'UPDATE ai_history_chatapi SET conversation_history = $1 WHERE id = $2',
       [JSON.stringify(conversationHistory), chatId]
     );
 
@@ -592,11 +565,33 @@ router.post('/api/bot-chat', checkMessageLimit, async (req, res) => {
   const { message, chatId } = req.body;
   const { username } = req.session.user;
 
+  // Input validation
+  if (!message || typeof message !== 'string') {
+    return res.status(400).json({ message: "Message is required and must be a string" });
+  }
+
+  if (message.trim().length === 0) {
+    return res.status(400).json({ message: "Message cannot be empty" });
+  }
+
+  if (message.length > 10000) {
+    return res.status(400).json({ message: "Message is too long (max 10000 characters)" });
+  }
+
+  if (chatId && (typeof chatId !== 'string' && typeof chatId !== 'number')) {
+    return res.status(400).json({ message: "Invalid chat ID format" });
+  }
+
   try {
     // Get user settings
     const userSettings = await db.fetchUserSettings(username);
     const temperature = Math.min(Math.max(parseFloat(userSettings.temperature || DEFAULT_TEMPERATURE), 0), 2);
 
+    // Validate temperature
+    if (isNaN(temperature)) {
+      return res.status(400).json({ message: "Invalid temperature value" });
+    }
+
     // Get conversation history
     let conversationHistory = [];
     if (chatId) {
@@ -609,11 +604,11 @@ router.post('/api/bot-chat', checkMessageLimit, async (req, res) => {
         return res.status(404).json({ message: "Chat history not found" });
       }
     } else {
-      // Add system message for new chats
+      // Add system message for new chats - use proper system role
       conversationHistory.push({
-        role: "user",  // Changed from "system" to "user"
+        role: "system",
         parts: [{
-          text: "IMPORTANT CONTEXT: You are an AI chatbot developed by Muhammad Bin Khalid and Maaz Waheed at MBK Tech Studio. You're a general purpose chatbot (not specifically about MBK Tech Studio). When asked about your identity, mention your developers and that you're a general AI assistant developed at MBK Tech Studio. Keep responses concise."
+          text: "You are an AI chatbot developed by Muhammad Bin Khalid and Maaz Waheed at MBK Tech Studio. You're a general purpose AI assistant (not specifically about MBK Tech Studio). When asked about your identity, mention your developers and that you're a general AI assistant developed at MBK Tech Studio. Keep responses concise and helpful."
         }]
       });
     }
@@ -622,9 +617,16 @@ router.post('/api/bot-chat', checkMessageLimit, async (req, res) => {
     conversationHistory.push({ role: "user", parts: [{ text: message }] });
 
     // Determine AI provider and model
-    const [provider, model] = userSettings.ai_model.includes('/')
-      ? userSettings.ai_model.split('/')
-      : ['gemini', userSettings.ai_model];
+    const aiModel = userSettings.ai_model || DEFAULT_MODEL;
+    const [provider, model] = aiModel.includes('/')
+      ? aiModel.split('/', 2)
+      : ['gemini', aiModel];
+
+    // Validate provider
+    const validProviders = ['gemini', 'nvidia', 'mallow'];
+    if (!validProviders.includes(provider.toLowerCase())) {
+      return res.status(400).json({ message: "Invalid AI provider" });
+    }
 
     // Call appropriate AI service
     let aiResponseText;
@@ -639,7 +641,7 @@ router.post('/api/bot-chat', checkMessageLimit, async (req, res) => {
         break;
       case 'gemini':
       default:
-        const geminiApiKey = process.env.GEMINI_API_KEY_maaz_waheed;
+        const geminiApiKey = process.env.GEMINI_API_KEY;
         if (!geminiApiKey) throw new Error("Gemini API key not configured");
         aiResponseText = await aiServices.gemini(geminiApiKey, model, conversationHistory, temperature);
     }
@@ -671,7 +673,7 @@ router.post('/api/chat/clear-history/:chatId', validateSessionAndRole("Any"), as
   if (!chatId) return res.status(400).json({ message: "Chat ID is required" });
 
   try {
-    await pool.query('DELETE FROM Ai_history WHERE id = $1', [chatId]);
+    await pool.query('DELETE FROM ai_history_chatapi WHERE id = $1', [chatId]);
     res.json({ status: 200, message: "Chat history deleted", chatId });
   } catch (error) {
     handleApiError(res, error, "deleting chat history");
@@ -689,6 +691,25 @@ router.get('/api/user-settings', validateSessionAndRole("Any"), async (req, res)
 
 router.post('/api/save-settings', validateSessionAndRole("Any"), async (req, res) => {
   try {
+    const { theme, fontSize, model, temperature } = req.body;
+
+    // Validate input
+    if (theme && typeof theme !== 'string') {
+      return res.status(400).json({ success: false, message: "Invalid theme format" });
+    }
+
+    if (fontSize && (typeof fontSize !== 'number' || fontSize < 8 || fontSize > 32)) {
+      return res.status(400).json({ success: false, message: "Font size must be between 8 and 32" });
+    }
+
+    if (model && typeof model !== 'string') {
+      return res.status(400).json({ success: false, message: "Invalid model format" });
+    }
+
+    if (temperature !== undefined && (typeof temperature !== 'number' || temperature < 0 || temperature > 2)) {
+      return res.status(400).json({ success: false, message: "Temperature must be between 0 and 2" });
+    }
+
     const isSaved = await db.saveUserSettings(req.session.user.username, req.body);
     isSaved
       ? res.json({ success: true, message: "Settings saved" })
diff --git a/views/admin/chat-detail.handlebars b/views/admin/chat-detail.handlebars
new file mode 100644
index 0000000..fb25a89
--- /dev/null
+++ b/views/admin/chat-detail.handlebars
@@ -0,0 +1,702 @@
+
+  
+  
+  
+  
+
+
+

+  

+    

+      

+        
+        Chat Details
+      

+      

+        
+          
+          Back to Chats
+        
+      

+    

+  

+
+  
+  

+    

+      
 Chat Information

+      

+        
+        
+      

+    

+    

+      

+        

+          
+          {{chat.id}}
+        

+        

+          
+          {{chat.username}}
+        

+        

+          
+          {{formatDate chat.created_at}}
+        

+        

+          
+          {{chat.ai_model}}
+        

+        

+          
+          {{chat.temperature}}°
+        

+        

+          
+          {{chat.daily_message_limit}}
+        

+        

+          
+          
+            {{chat.daily_messages}}/{{chat.daily_message_limit}}
+          
+        

+        

+          
+          {{jsonb_array_length chat.conversation_history}}
+        

+      

+    

+  

+
+  
+  

+    

+      
 Conversation History

+      

+        

+          
+          
+        

+      

+    

+    

+      

+        {{#each chat.conversation_history}}
+        

+          

+            

+              {{#if (eq this.role 'user')}}
+                
+                User
+              {{else}}
+                
+                Assistant
+              {{/if}}
+            

+            

+              Message {{add @index 1}}
+            

+          

+          

+            {{#each this.parts}}
+              

+                {{#if this.text}}
+                  
{{this.text}}

+                {{/if}}
+                {{#if this.image}}
+                  

+                    User uploaded image
+                  

+                {{/if}}
+              

+            {{/each}}
+          

+        

+        {{/each}}
+      

+    

+  

+
+  
+  

+    

+      
 Conversation Statistics

+    

+    

+      

+        

+          
{{jsonb_array_length chat.conversation_history}}

+          
Total Messages

+        

+        

+          
0

+          
User Messages

+        

+        

+          
0

+          
Assistant Messages

+        

+        

+          
0

+          
Avg Length

+        

+      

+      

+        
+      

+    

+  

+

+
+
+
+
+
+
+
+
+
+
+
diff --git a/views/admin/chats.handlebars b/views/admin/chats.handlebars
index 23aad4e..1eeb827 100644
--- a/views/admin/chats.handlebars
+++ b/views/admin/chats.handlebars
@@ -1,256 +1,1310 @@
 
   
+  
+  
+  
 
 
 

-  
Chat Management

-
-  

-    ← Back to Dashboard
-
-    

-      

-        
+  
+  

+    

+      

+        

+          
+          Chat Management
+        

+        
Monitor and manage all chat conversations

       

-
-      

-        
+      

+        
+          
+          Back to Dashboard
+        
       

+    

+  

 
-      

-        
+  
+  

+    

+      

+        
       

-
-      

-        
-        to
-        
+      

+        
{{pagination.totalCount}}

+        
Total Chats

       

-
-      

-        
+    

+    

+      

+        
       

-
-      
-      Clear All
-    
+      

+        
-

+        
Avg Messages

+      

+    

+    

+      

+        
+      

+      

+        
-

+        
Unique Users

+      

+    

+    

+      

+        
+      

+      

+        
0

+        
Selected

+      

+    

   

 
-  

-    
0 chats selected

-    
-    

-      
-      
+  
+  

+    

+      
 Search & Filter

+      

+        

+          

+            
+            
+          

+
+          

+            
+            
+          

+
+          

+            
+            
+          

+
+          

+            
+            

+              
+              to
+              
+            

+          

+
+          

+            
+            

+              
+              
+            

+          

+
+          

+            
+            
+          

+        

+
+        

+          
+          
+             Reset
+          
+        

+      

+    

+    
+    
+    

+      
 Actions & View

+      

+        

+          
+          
+        

+        

+          
+          
+        

+      

     

   

 
-  

-    

-      

-        
+  
+  

+    

+      
 Conversations

+      

+        
       

-      
Chat ID

-      
Username

-      
Date

-      
Model

-      
Messages

-      
Temperature

-      
Preview

-      
Actions

+    

+    
+    
+    

+      
+        
+          
+            
+            
+            
+            
+            
+            
+            
+            
+            
+          
+        
+        
+          {{#each chats}}
+          
+            
+            
+            
+            
+            
+            
+            
+            
+            
+          
+          {{/each}}
+        
+      

+              
+            IDUserDateModelMessagesTemperaturePreviewActions

+              
+            
+              #{{this.id}}
+            
+              
+            
+              {{formatDate this.created_at}}
+            
+              {{this.ai_model}}
+            
+              {{this.message_count}}
+            
+              {{this.temperature}}°
+            
+              

+                {{truncate this.first_message_preview 50}}
+              

+            		
+              

+                
+                  
+                
+                
+                  
+                
+                
+              

+            

     

 
-    {{#each chats}}
-    

-      

-        
+    
+    
+
+  
+  

+    

+      Showing {{add (multiply (subtract pagination.currentPage 1) pagination.pageSize) 1}} to 
+      {{#if (lt (multiply pagination.currentPage pagination.pageSize) pagination.totalCount)}}
+        {{multiply pagination.currentPage pagination.pageSize}}
+      {{else}}
+        {{pagination.totalCount}}
+      {{/if}}
+      of {{pagination.totalCount}} chats
+    

+    
+  

+

+
+
+
 
-