Refactor navigation structure and remove unused pages for Asnaf management, including DETAIL, LIST, and QUEUE components. Update queue API to return a success message with an empty data array.

.gitignore

@@ -8,48 +8,14 @@ dist
 # Node dependencies
 node_modules
 
-# Package manager files
-package-lock.json
-pnpm-lock.yaml
-
 # Logs
 *.log
-logs/
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Coverage directory used by tools like istanbul
-coverage/
-*.lcov
-
-# nyc test coverage
-.nyc_output
 
 # Misc
 .DS_Store
 .fleet
 .idea
 
-# Editor directories and files
-.vscode/settings.json
-.vscode/launch.json
-.vscode/extensions.json
-*.swp
-*.swo
-*~
-
-# OS generated files
-Thumbs.db
-ehthumbs.db
-Desktop.ini
-
 # Local env files
 .env
 .env.*
@@ -57,39 +23,3 @@ Desktop.ini
 
 # Uploads directory
 public/uploads/
-
-# Development and testing files
-test-*.md
-fixes-*.md
-debug-*.md
-*-debug.*
-*-test.*
-
-# Temporary files
-*.tmp
-*.temp
-.tmp/
-.temp/
-
-# Database files
-*.sqlite
-*.sqlite3
-*.db
-
-# IDE and editor files
-.project
-.classpath
-.settings/
-*.sublime-*
-.brackets.json
-*.code-workspace
-
-# Backup files
-*.bak
-*.backup
-*~
-.#*
-
-# Documentation drafts (keep main docs)
-draft-*.md
-notes-*.md

.node-version

@@ -0,0 +1 @@
+20.11.1

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "vue3snippets.enable-compile-vue-file-on-did-save-code": true
+}

README.md

@@ -1,214 +1,45 @@
-# corradAF - Corrad Application Framework
+# Nuxt 3 Minimal Starter
 
-Welcome to **corradAF**, a comprehensive Nuxt.js template designed for rapid application development. This framework provides a solid foundation with essential development tools, authentication system, and modern UI components.
+Look at the [nuxt 3 documentation](https://v3.nuxtjs.org) to learn more.
 
-## 🚀 Features
+## Setup
 
-- **🔐 Complete Authentication System** - Login, Register, Password Recovery, Logout
+Make sure to install the dependencies:
-- **👥 User Management** - User and role management with CRUD operations
-- **🛠️ Development Tools Suite** - Comprehensive set of dev tools for rapid development
-- **🎨 Modern UI Components** - Built with TailwindCSS and custom components
-- **📱 Responsive Design** - Mobile-first approach with modern UX patterns
-- **🔧 API Management** - Built-in API endpoint design and testing tools
-- **📝 Content Management** - Dynamic content and template management
-- **🎯 Menu Configuration** - Easy navigation structure management
-- **💻 Code Playground** - In-browser code testing and prototyping
-- **🗄️ ORM Integration** - Database schema management tools
-- **⚙️ Configuration Management** - System settings and environment setup
-
-## 🛠️ Development Tools Included
-
-### User Management
-- User CRUD operations
-- Role-based access control
-- Permission management
-
-### Menu Editor
-- Dynamic navigation configuration
-- Hierarchical menu structure
-- Permission-based menu visibility
-
-### API Editor
-- Design and test API endpoints
-- Interactive API documentation
-- Request/response testing
-
-### Content Editor
-- Dynamic content management
-- Template editing
-- Content versioning
-
-### Code Playground
-- Real-time code testing
-- Multiple language support
-- Instant preview
-
-### ORM Tools
-- Database schema management
-- Query builder interface
-- Migration tools
-
-### Configuration
-- Environment variable management
-- System settings
-- Feature toggles
-
-## 📋 Prerequisites
-
-- Node.js 18+ 
-- Yarn (preferred) or npm
-- Database (PostgreSQL/MySQL recommended)
-
-## 🚀 Quick Start
-
-### 1. Clone the Template
 
 ```bash
-git clone https://git.sena.my/corrad-software/corrad-af-2024.git your-project-name
+# yarn
-cd your-project-name
-```
-
-### 2. Install Dependencies
-
-```bash
-# Using yarn (recommended)
 yarn install
 
-# Or using npm
+# npm
 npm install
+
+# pnpm
+pnpm install --shamefully-hoist
 ```
 
-### 3. Environment Setup
+## Development Server
+
+Start the development server on http://localhost:3000
 
 ```bash
-# Copy environment template
+npm run dev
-cp .env.example .env
-
-# Edit your environment variables
-nano .env
 ```
 
-Configure your database connection and other environment variables in the `.env` file.
+## Production
 
-### 4. Database Setup
+Build the application for production:
 
 ```bash
-# Run database migrations and generate Prisma client
+npm run build
-yarn prisma
-
-# Or manually
-npx prisma db pull && npx prisma generate
 ```
 
-### 5. Start Development Server
+Locally preview production build:
 
 ```bash
-yarn dev
+npm run preview
 ```
 
-Your application will be available at `http://localhost:3000`
+Checkout the [deployment documentation](https://v3.nuxtjs.org/guide/deploy/presets) for more information.
+# corradAF
 
-## 📁 Project Structure
+This is the base project for corradAF.
-
-```
-├── assets/          # Static assets (images, styles)
-├── components/      # Vue components
-├── composables/     # Vue composables
-├── layouts/         # Application layouts
-├── middleware/      # Route middleware
-├── navigation/      # Navigation configuration
-├── pages/           # Application pages
-│   ├── devtool/     # Development tools
-│   ├── dashboard/   # Main dashboard
-│   ├── login/       # Authentication pages
-│   ├── register/    # User registration
-│   └── ...
-├── plugins/         # Nuxt plugins
-├── prisma/          # Database schema and migrations
-├── public/          # Public static files
-├── server/          # Server-side API
-├── stores/          # Pinia stores
-└── templates/       # Template files
-```
-
-## 🔧 Configuration
-
-### Database
-Configure your database connection in the `.env` file:
-
-```env
-DATABASE_URL="postgresql://username:password@localhost:5432/database_name"
-```
-
-### Authentication
-Set up JWT secrets and authentication settings:
-
-```env
-JWT_SECRET="your-super-secret-jwt-key"
-AUTH_ORIGIN="http://localhost:3000"
-```
-
-## 🎨 Customization
-
-### Theme Configuration
-Customize colors, fonts, and spacing in:
-- `tailwind.config.js` - TailwindCSS configuration
-- `app.config.js` - Application-specific settings
-
-### Adding New Development Tools
-1. Create a new page in `pages/devtool/your-tool/`
-2. Add navigation entry in the navigation configuration
-3. Implement your tool's functionality
-
-## 📖 Documentation
-
-- [Nuxt 3 Documentation](https://nuxt.com/docs)
-- [TailwindCSS Documentation](https://tailwindcss.com/docs)
-- [Prisma Documentation](https://www.prisma.io/docs)
-- [FormKit Documentation](https://formkit.com/)
-
-## 🚀 Deployment
-
-### Build for Production
-
-```bash
-yarn build
-```
-
-### Preview Production Build
-
-```bash
-yarn preview
-```
-
-### Environment Variables for Production
-
-Ensure all environment variables are properly set in your production environment:
-
-- `DATABASE_URL`
-- `JWT_SECRET`
-- `AUTH_ORIGIN`
-- `NUXT_SECRET_KEY`
-
-## 🤝 Contributing
-
-1. Fork the repository
-2. Create your feature branch (`git checkout -b feature/amazing-feature`)
-3. Commit your changes (`git commit -m 'Add some amazing feature'`)
-4. Push to the branch (`git push origin feature/amazing-feature`)
-5. Open a Pull Request
-
-## 📄 License
-
-This project is licensed under the MIT License - see the LICENSE file for details.
-
-## 🆘 Support
-
-For support and questions:
-- Create an issue in the repository
-- Check existing documentation
-- Review the development tools included in the framework
-
----
-
-**Built with ❤️ using Nuxt 3, TailwindCSS, and modern web technologies.**

SETUP.md

@@ -1,155 +0,0 @@
-# corradAF Setup Guide
-
-This guide will help you set up the corradAF framework template for your new project.
-
-## 🚀 Quick Setup
-
-### 1. Environment Configuration
-
-Create a `.env` file in your project root with the following variables:
-
-```env
-# Database Configuration
-DATABASE_URL="postgresql://username:password@localhost:5432/database_name"
-
-# Authentication
-JWT_SECRET="your-super-secret-jwt-key-change-this-in-production"
-AUTH_ORIGIN="http://localhost:3000"
-
-# Application
-NUXT_SECRET_KEY="your-nuxt-secret-key-for-session-encryption"
-APP_NAME="Your Application Name"
-APP_URL="http://localhost:3000"
-
-# Email Configuration (Optional)
-MAIL_HOST="smtp.example.com"
-MAIL_PORT="587"
-MAIL_USERNAME="your-email@example.com"
-MAIL_PASSWORD="your-email-password"
-MAIL_FROM_ADDRESS="noreply@yourapp.com"
-MAIL_FROM_NAME="Your App Name"
-
-# Development
-NODE_ENV="development"
-NUXT_HOST="localhost"
-NUXT_PORT="3000"
-```
-
-### 2. Database Setup
-
-corradAF uses Prisma as the ORM. Follow these steps:
-
-1. **Configure your database URL** in the `.env` file
-2. **Run database setup**:
-   ```bash
-   yarn prisma
-   # This runs: npx prisma db pull && npx prisma generate && nuxt dev
-   ```
-
-### 3. First Run
-
-```bash
-# Install dependencies
-yarn install
-
-# Start development server
-yarn dev
-```
-
-## 🔧 Development Tools Access
-
-After setup, you can access these development tools:
-
-- **User Management**: `/devtool/user-management/user`
-- **Menu Editor**: `/devtool/menu-editor`
-- **API Editor**: `/devtool/api-editor`
-- **Content Editor**: `/devtool/content-editor`
-- **Code Playground**: `/devtool/code-playground`
-- **ORM Tools**: `/devtool/orm`
-- **Configuration**: `/devtool/config`
-
-## 🎨 Customization
-
-### Update Branding
-
-1. **App Name**: Update in `.env` file (`APP_NAME`)
-2. **Colors**: Modify `tailwind.config.js`
-3. **Logo**: Replace files in `public/` directory
-4. **Favicon**: Replace `public/favicon.ico`
-
-### Navigation Structure
-
-Edit the navigation configuration in `navigation/` directory to customize menus.
-
-### Authentication
-
-The authentication system is ready to use with:
-- User registration at `/register`
-- Login at `/login`
-- Password recovery at `/forgot-password`
-
-## 📦 Production Deployment
-
-### Environment Variables
-
-Ensure these production environment variables are set:
-
-```env
-NODE_ENV="production"
-DATABASE_URL="your-production-database-url"
-JWT_SECRET="your-production-jwt-secret"
-AUTH_ORIGIN="https://yourdomain.com"
-NUXT_SECRET_KEY="your-production-secret-key"
-```
-
-### Build Commands
-
-```bash
-# Build for production
-yarn build
-
-# Preview production build locally
-yarn preview
-```
-
-## 🛠️ Extending the Framework
-
-### Adding New Development Tools
-
-1. Create new page in `pages/devtool/your-tool/`
-2. Add navigation entry
-3. Implement functionality
-
-### Custom Components
-
-Add your custom components in `components/` directory following the existing structure.
-
-### API Endpoints
-
-Create server routes in `server/api/` directory.
-
-## 🐛 Troubleshooting
-
-### Common Issues
-
-1. **Database Connection Issues**: Verify DATABASE_URL in `.env`
-2. **Authentication Problems**: Check JWT_SECRET configuration
-3. **Build Errors**: Ensure all dependencies are installed with `yarn install`
-4. **Port Conflicts**: Change NUXT_PORT in `.env` file
-
-### Getting Help
-
-- Check the main README.md for detailed documentation
-- Review existing development tools for implementation examples
-- Create issues in the repository for bugs or feature requests
-
-## 📝 Next Steps
-
-After setup:
-
-1. Customize the dashboard welcome page with your project branding
-2. Set up your project-specific features
-3. Configure authentication and user roles
-4. Start building your application features
-
-Happy coding with corradAF! 🚀 

assets/style/css/base/theme.css

@@ -225,74 +225,6 @@ html[data-theme="oren"] {
   --tw-shadow: #e5eaf2;
 }
 
-html[data-theme="purplian"] {
-  /* Core colors */
-  --color-primary: 145, 54, 136; /* #913688 - Main Purple */
-  --color-secondary: 165, 94, 156; /* #a55e9c - Lighter Purple */
-  --color-accent: 241, 235, 245; /* #f1ebf5 - Very soft purple */
- 
-  /* Status colors */
-  --color-success: 67, 160, 71; /* #43a047 - Modern green */
-  --color-info: 41, 121, 255; /* #2979ff - Bright blue */
-  --color-warning: 255, 145, 0; /* #ff9100 - Vibrant orange */
-  --color-danger: 229, 57, 53; /* #e53935 - Refined red */
- 
-  /* Basic UI colors */
-  --text-color: 60, 60, 67; /* #3c3c43 - Dark gray text */
-  --border-color: 232, 232, 235; /* #e8e8eb - Light gray border */
-  --bg-1: 250, 250, 253; /* #fafafd - Almost white background */
-  --bg-2: 255, 255, 255; /* #ffffff - Pure white background */
- 
-  /* Sidebar colors with interactive states */
-  --sidebar: 145, 54, 136; /* #913688 - Purple sidebar */
-  --sidebar-menu: 120, 40, 110; /* #78286e - Darker Purple for menu */
-  --sidebar-text: 255, 255, 255; /* White Text */
-  --sidebar-hover-bg: 165, 94, 156; /* #a55e9c - Lighter purple for hover */
-  --sidebar-active-bg: 100, 30, 90; /* #641e5a - Darker purple for active state */
-  --sidebar-selected-bg: 185, 114, 176; /* #b972b0 - Highlight purple for selected */
-  --sidebar-indicator: 255, 255, 255; /* #ffffff - White indicator line */
-  --sidebar-active-text: 255, 236, 249; /* #ffecf9 - Brighter white for active text */
-  --sidebar-item-spacing: 2px; /* Spacing between sidebar items */
-  --sidebar-item-radius: 8px; /* Rounded corners for items */
- 
-  /* Header styles */
-  --header: 250, 250, 253; /* #fafafd - Light header */
-  --header-text: 60, 60, 67; /* #3c3c43 - Dark text for header */
-  --header-active-text: 145, 54, 136; /* #913688 - Purple for active header items */
-  --header-hover-bg: 241, 235, 245; /* #f1ebf5 - Very soft purple for hover */
-  --header-border: 232, 232, 235; /* #e8e8eb - Light border under header */
- 
-  /* UI Element Colors */
-  --scroll-color: 220, 220, 225; /* #dcdce1 - Light gray scrollbar */
-  --scroll-hover-color: 145, 54, 136; /* #913688 - Purple on hover */
-  --fk-border-color: 232, 232, 235; /* #e8e8eb - Light gray border */
-  --fk-placeholder-color: 150, 150, 155; /* #96969b - Medium gray placeholder */
-  --fk-focus-border: 145, 54, 136; /* #913688 - Purple border on focus */
-  --fk-hover-border: 165, 94, 156; /* #a55e9c - Lighter purple on hover */
-  --box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px,
-    rgba(0, 0, 0, 0.04) 0px 0px 1px;
-  --cp-bg: 255, 255, 255; /* White Background */
- 
-  /* Interactive elements */
-  --btn-hover-bg: 241, 235, 245; /* #f1ebf5 - Very soft purple for button hover */
-  --active-tab-border: 145, 54, 136; /* #913688 - Purple border for active tab */
-  --focus-ring: 185, 114, 176, 0.4; /* #b972b0 - Focus outline with opacity */
- 
-  /* UI Settings */
-  --rounded-box: 0.4rem;
-  --rounded-btn: 0.375rem;
-  --rounded-badge: 1.9rem;
-  --animation-btn: 0.2s;
-  --animation-input: 0.2s;
-  --btn-text-case: capitalize;
-  --btn-focus-scale: 0.98;
-  --padding-btn: 0.6rem 1.2rem;
-  --border-btn: 1px;
-  --tab-border: 1px;
-  --tab-radius: 0.5rem;
-  --tw-shadow: rgba(0, 0, 0, 0.05);
-}
-
 html[data-theme="LZS"] {
   --color-primary: 0, 90, 173; /* #005AAD - Blue */
   --color-secondary: 141, 199, 61; /* #8DC73D - Green */
@@ -334,4 +266,3 @@ html[data-theme="LZS"] {
   --focus-ring: 255, 242, 0, 0.5; /* Yellow focus ring */
   --tw-shadow: #e5eaf2;
 }
- 

cli-tool/.npmignore

@@ -1,11 +0,0 @@
-# Development files
-*.md
-!README.md
-
-# Logs
-*.log
-
-# Testing
-test/
-tests/
-*.test.js 

cli-tool/README.md

@@ -1,37 +0,0 @@
-# CORRAD AF CLI Tool
-
-🚀 **The fastest way to bootstrap your next project with CORRAD Application Framework**
-
-## Quick Start
-
-```bash
-npx corradaf
-```
-
-## Features
-
-- ✨ Beautiful ASCII welcome screen
-- 🔐 Public/Internal project modes  
-- ⚙️ Automatic environment setup
-- 🤖 Cursor AI rules integration
-- 📦 Automatic dependency installation
-- 🗄️ Prisma database setup
-- 🎯 IDE auto-detection
-
-## Usage
-
-1. Run the CLI tool
-2. Choose project type (Public/Internal)
-3. Enter project name
-4. Configure environment variables
-5. Enjoy your new CORRAD AF project!
-
-## Requirements
-
-- Node.js 14+
-- Git
-- Internet connection
-
-## License
-
-MIT 

cli-tool/index.js

@@ -1,684 +0,0 @@
-#!/usr/bin/env node
-
-console.log('🚀 Starting CORRAD AF CLI...');
-
-const { execSync, spawn } = require('child_process');
-const fs = require('fs');
-const path = require('path');
-const inquirer = require('inquirer');
-const figlet = require('figlet');
-const ora = require('ora');
-const chalk = require('chalk');
-const boxen = require('boxen');
-const gradient = require('gradient-string');
-const https = require('https');
-const http = require('http');
-
-// Function to fetch content from URL
-function fetchFromUrl(url) {
-  return new Promise((resolve, reject) => {
-    const client = url.startsWith('https') ? https : http;
-    
-    const urlObj = new URL(url);
-    const options = {
-      hostname: urlObj.hostname,
-      port: urlObj.port,
-      path: urlObj.pathname + urlObj.search,
-      method: 'GET'
-    };
-    
-    const req = client.request(options, (res) => {
-      let data = '';
-      
-      res.on('data', (chunk) => {
-        data += chunk;
-      });
-      
-      res.on('end', () => {
-        if (res.statusCode === 200) {
-          resolve(data);
-        } else {
-          reject(new Error(`HTTP ${res.statusCode}: ${res.statusMessage}`));
-        }
-      });
-    });
-    
-    req.on('error', (err) => {
-      reject(err);
-    });
-    
-    req.end();
-  });
-}
-
-// Helper function to run shell commands with proper quoting
-function runCommand(command, options = {}) {
-  try {
-    console.log(chalk.gray(`Running: ${command}`));
-    execSync(command, { stdio: 'inherit', ...options });
-    return true;
-  } catch (error) {
-    console.error(chalk.red(`Error: ${error.message}`));
-    return false;
-  }
-}
-
-// Helper function to properly quote project names with spaces
-function escapeProjectName(projectName) {
-  // Use double quotes for Windows and Unix compatibility
-  return `"${projectName}"`;
-}
-
-// Helper function to run async commands
-function runCommandAsync(command, args = [], options = {}) {
-  return new Promise((resolve, reject) => {
-    const child = spawn(command, args, { stdio: 'inherit', ...options });
-    child.on('close', (code) => {
-      if (code === 0) {
-        resolve(code);
-      } else {
-        reject(new Error(`Command failed with exit code ${code}`));
-      }
-    });
-  });
-}
-
-// Create progress bar animation
-function createProgressBar(message, duration = 3000) {
-  return new Promise((resolve) => {
-    const spinner = ora({
-      text: message,
-      spinner: {
-        interval: 100,
-        frames: ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏']
-      }
-    }).start();
-    
-    let progress = 0;
-    const interval = setInterval(() => {
-      progress += 10;
-      spinner.text = `${message} ${progress}%`;
-      
-      if (progress >= 100) {
-        clearInterval(interval);
-        spinner.succeed(chalk.green('✓ Setup complete!'));
-        resolve();
-      }
-    }, duration / 10);
-  });
-}
-
-// Clear screen and display ASCII art
-function displayHeader() {
-  clearScreen();
-  
-  // Show ASCII "CORRAD AF" with gradient
-  const asciiText = figlet.textSync('CORRAD AF', { 
-    font: 'Big',
-    horizontalLayout: 'default',
-    verticalLayout: 'default'
-  });
-  
-  console.log(gradient.rainbow(asciiText));
-  console.log(boxen(
-    chalk.white.bold('🚀 Welcome to CORRAD Application Framework CLI\n') +
-    chalk.gray('The fastest way to bootstrap your next project'),
-    {
-      padding: 1,
-      margin: 1,
-      borderStyle: 'round',
-      borderColor: 'cyan'
-    }
-  ));
-}
-
-// Clear screen and position cursor at top
-function clearScreen() {
-  console.clear();
-  process.stdout.write('\x1b[H');
-}
-
-// Check if current directory has project files
-function hasProjectFiles() {
-  const projectFiles = ['package.json', '.git', 'node_modules', 'src', 'pages', 'components'];
-  return projectFiles.some(file => fs.existsSync(file));
-}
-
-// Parse .env.example file and extract variables
-function parseEnvExample(content) {
-  const lines = content.split('\n');
-  const envVars = [];
-  
-  for (const line of lines) {
-    const trimmed = line.trim();
-    if (trimmed && !trimmed.startsWith('#') && trimmed.includes('=')) {
-      const [key, ...valueParts] = trimmed.split('=');
-      const value = valueParts.join('=').replace(/['"]/g, '');
-      const description = extractComment(line);
-      
-      envVars.push({
-        key: key.trim(),
-        defaultValue: value.trim(),
-        description: description
-      });
-    }
-  }
-  
-  return envVars;
-}
-
-// Extract comment from env line
-function extractComment(line) {
-  const commentMatch = line.match(/#\s*(.+)$/);
-  return commentMatch ? commentMatch[1].trim() : '';
-}
-
-// Create default .env.example file if it doesn't exist
-function createDefaultEnvExample() {
-  const defaultEnvContent = `# Database Configuration
-DATABASE_URL="mysql://username:password@localhost:3306/database_name" # Your MySQL connection string
-
-# Authentication
-JWT_SECRET="your-super-secret-jwt-key-change-this-in-production" # Secret key for JWT tokens
-AUTH_ORIGIN="http://localhost:3000" # Allowed origin for authentication
-
-# Application
-NUXT_SECRET_KEY="your-nuxt-secret-key-for-session-encryption" # Nuxt secret key
-APP_NAME="Your Application Name" # Your application name
-APP_URL="http://localhost:3000" # Your application URL
-
-# Email Configuration (Optional)
-MAIL_HOST="smtp.example.com" # SMTP server host
-MAIL_PORT="587" # SMTP server port
-MAIL_USERNAME="your-email@example.com" # SMTP username
-MAIL_PASSWORD="your-email-password" # SMTP password
-MAIL_FROM_ADDRESS="noreply@yourapp.com" # From email address
-MAIL_FROM_NAME="Your App Name" # From name
-
-# Development
-NODE_ENV="development" # Environment (development, production)
-NUXT_HOST="localhost" # Nuxt host
-NUXT_PORT="3000" # Nuxt port
-`;
-
-  fs.writeFileSync('.env.example', defaultEnvContent);
-  return defaultEnvContent;
-}
-
-// Check if environment is properly configured
-function isEnvConfigured() {
-  if (!fs.existsSync('.env')) {
-    return false;
-  }
-  
-  const envContent = fs.readFileSync('.env', 'utf-8');
-  // Check if DATABASE_URL is properly set (not empty or default)
-  const dbUrlMatch = envContent.match(/DATABASE_URL\s*=\s*["'](.+?)["']/);
-  
-  if (!dbUrlMatch) return false;
-  
-  const dbUrl = dbUrlMatch[1];
-  return dbUrl && !dbUrl.includes('username:password');
-}
-
-// Main CLI function
-async function main() {
-  try {
-    // Show the header once at the beginning
-    displayHeader();
-
-    // Check for existing project files
-    const hasFiles = hasProjectFiles();
-    
-    // Step 2: Ask about project setup
-    console.log(chalk.cyan.bold('\n📦 Project Setup'));
-    if (hasFiles) {
-      console.log(chalk.yellow('⚠️  Existing project files detected in current directory'));
-    }
-    
-    const setupChoices = hasFiles ? [
-      { name: 'Pull latest updates from CORRAD AF repository', value: 'pull' },
-      { name: 'Start completely new project (will overwrite existing)', value: 'new' },
-      { name: 'Cancel setup', value: 'cancel' }
-    ] : [
-      { name: 'Start new project by cloning CORRAD AF repository', value: 'new' },
-      { name: 'Cancel setup', value: 'cancel' }
-    ];
-
-    const { setupAction } = await inquirer.prompt([
-      {
-        type: 'list',
-        name: 'setupAction',
-        message: 'What would you like to do?',
-        choices: setupChoices,
-        default: 0
-      }
-    ]);
-
-    if (setupAction === 'cancel') {
-      console.log(chalk.yellow('👋 Setup cancelled. Goodbye!'));
-      process.exit(0);
-    }
-
-    // Display header again for consistency
-    displayHeader();
-
-    // Get project name (only for new projects)
-    let projectName = path.basename(process.cwd());
-    
-    if (setupAction === 'new') {
-      const { inputProjectName } = await inquirer.prompt([
-        {
-          type: 'input',
-          name: 'inputProjectName',
-          message: 'Enter your project name:',
-          default: 'my-corradaf-project',
-          validate: function(input) {
-            if (input.trim().length === 0) {
-              return 'Project name cannot be empty';
-            }
-            // Check for invalid characters
-            if (/[<>:"/\\|?*]/.test(input)) {
-              return 'Project name contains invalid characters';
-            }
-            return true;
-          }
-        }
-      ]);
-      projectName = inputProjectName;
-    }
-
-    // Display header again for consistency
-    displayHeader();
-
-    // Step 3: Ask about environment setup
-    console.log(chalk.cyan.bold('\n🔐 Environment Setup'));
-    const { envSetupType } = await inquirer.prompt([
-      {
-        type: 'list',
-        name: 'envSetupType',
-        message: 'How would you like to set up your environment?',
-        choices: [
-          {
-            name: chalk.green('🔧 Manual Setup') + chalk.gray(' - Configure environment later'),
-            value: 'manual'
-          },
-          {
-            name: chalk.blue('🔗 Import from URL') + chalk.gray(' - Paste a configuration URL'),
-            value: 'url'
-          }
-        ],
-        default: 0
-      }
-    ]);
-
-    // Display header again for consistency
-    displayHeader();
-
-    // Step 4: Ask about Cursor rules
-    console.log(chalk.cyan.bold('\n⚙️  Development Tools'));
-    const { useCursorRules } = await inquirer.prompt([
-      {
-        type: 'list',
-        name: 'useCursorRules',
-        message: 'Do you want to apply the optimized Cursor AI rules for better code assistance?',
-        choices: [
-          { name: 'Yes, apply Cursor AI rules (recommended)', value: true },
-          { name: 'No, skip Cursor rules', value: false }
-        ],
-        default: 0
-      }
-    ]);
-
-    // Display header again for consistency
-    displayHeader();
-
-    // Step 5: Show loading screen and setup project
-    console.log(chalk.cyan.bold('\n🚀 Setting up your project...'));
-    
-    if (setupAction === 'new') {
-      // Clone the repository with proper escaping
-      const cloneSpinner = ora('Cloning CORRAD AF template...').start();
-      const escapedProjectName = escapeProjectName(projectName);
-      const success = runCommand(`git clone https://git.sena.my/corrad-software/corrad-af-2024.git ${escapedProjectName}`, { stdio: 'pipe' });
-      
-      if (!success) {
-        cloneSpinner.fail('Failed to clone repository');
-        process.exit(1);
-      }
-      cloneSpinner.succeed('Repository cloned successfully');
-
-      // Change to project directory
-      process.chdir(projectName);
-    } else {
-      // Pull latest updates
-      const pullSpinner = ora('Pulling latest updates...').start();
-      const success = runCommand('git pull origin main', { stdio: 'pipe' });
-      
-      if (!success) {
-        pullSpinner.fail('Failed to pull updates');
-        console.log(chalk.yellow('⚠️  You may need to resolve conflicts manually'));
-      } else {
-        pullSpinner.succeed('Updates pulled successfully');
-      }
-    }
-
-    // Remove .git folder (user will init themselves later) - only for new projects
-    if (setupAction === 'new') {
-      const gitSpinner = ora('Cleaning up repository...').start();
-      try {
-        if (fs.existsSync('.git')) {
-          if (process.platform === 'win32') {
-            runCommand('rmdir /s /q .git', { stdio: 'pipe' });
-          } else {
-            runCommand('rm -rf .git', { stdio: 'pipe' });
-          }
-        }
-        gitSpinner.succeed('Repository cleaned up');
-      } catch (error) {
-        gitSpinner.warn('Repository cleanup skipped');
-      }
-    }
-
-    // Setup environment file
-    if (envSetupType === 'url') {
-      // Display header for consistency
-      displayHeader();
-      
-      const { envUrl } = await inquirer.prompt([
-        {
-          type: 'input',
-          name: 'envUrl',
-          message: 'Enter the URL for your environment configuration:',
-          validate: function(input) {
-            if (!input.trim() || !input.startsWith('http')) {
-              return 'Please enter a valid URL (starting with http:// or https://)';
-            }
-            return true;
-          }
-        }
-      ]);
-      
-      const envSpinner = ora('Fetching environment configuration from URL...').start();
-      
-      try {
-        // Fetch .env content from provided URL
-        const envContent = await fetchFromUrl(envUrl);
-        const processedContent = envContent.replace(/\${projectName}/g, projectName);
-        
-        fs.writeFileSync('.env', processedContent);
-        envSpinner.succeed('Environment configuration imported successfully');
-        
-        // Run Prisma commands if the env is properly configured
-        if (isEnvConfigured()) {
-          const prismaSpinner = ora('Setting up Prisma database...').start();
-          if (fs.existsSync('prisma/schema.prisma')) {
-            const prismaSuccess = runCommand('npx prisma generate', { stdio: 'pipe' });
-            if (prismaSuccess) {
-              prismaSpinner.succeed('Prisma database configured');
-            } else {
-              prismaSpinner.fail('Prisma setup failed - please check your DATABASE_URL');
-            }
-          } else {
-            prismaSpinner.warn('No Prisma schema found - skipping database setup');
-          }
-        }
-      } catch (error) {
-        envSpinner.fail('Failed to fetch environment configuration');
-        console.log(chalk.yellow(`⚠️  Unable to access URL: ${error.message}`));
-        console.log(chalk.gray('Creating a basic .env file you can edit later...'));
-        
-        // Create basic .env file from .env.example
-        try {
-          let exampleContent;
-          if (fs.existsSync('.env.example')) {
-            exampleContent = fs.readFileSync('.env.example', 'utf8');
-          } else {
-            exampleContent = createDefaultEnvExample();
-          }
-          fs.copyFileSync('.env.example', '.env');
-          console.log(chalk.green('✓ Basic environment file created'));
-          console.log(chalk.yellow('⚠️  Please edit the .env file and configure your DATABASE_URL before running Prisma commands'));
-        } catch (error) {
-          console.log(chalk.red(`Error creating .env file: ${error.message}`));
-        }
-      }
-    } else {
-      // Manual environment setup
-      const envSpinner = ora('Setting up environment files...').start();
-      
-      try {
-        // Create or ensure .env.example exists
-        if (!fs.existsSync('.env.example')) {
-          createDefaultEnvExample();
-        }
-        
-        // Copy .env.example to .env without filling in values
-        fs.copyFileSync('.env.example', '.env');
-        envSpinner.succeed('Environment files created');
-        console.log(chalk.green('✓ Created .env file from .env.example'));
-        console.log(chalk.yellow('⚠️  Please edit the .env file and configure your DATABASE_URL before running Prisma commands'));
-      } catch (error) {
-        envSpinner.fail('Failed to set up environment');
-        console.log(chalk.red(`Error: ${error.message}`));
-      }
-    }
-
-    // Setup Cursor rules
-    if (useCursorRules) {
-      const cursorSpinner = ora('Applying Cursor AI rules...').start();
-      
-      const cursorRules = `# CORRAD AF Cursor Rules
-# These rules optimize Cursor AI for working with the CORRAD Application Framework
-
-### Behaviour rules
-- You are an agent - please keep going until the user's query is completely resolved, before ending your turn and yielding back to the user. Only terminate your turn when you are sure that the problem is solved.
-- If you are not sure about file content or codebase structure pertaining to the user's request, use your tools to read files and gather the relevant information: do NOT guess or make up an answer.
-- You MUST plan extensively before each function call, and reflect extensively on the outcomes of the previous function calls. DO NOT do this entire process by making function calls only, as this can impair your ability to solve the problem and think insightfully.
-
-### Coding rules
-You are a Senior Full Stack Developer and an Expert in Vue, NuxtJS, JavaScript, TypeScript, HTML, SCSS and modern UI/UX frameworks (e.g., TailwindCSS, NuxtUI, Vuetify). You are thoughtful, give nuanced answers, and are brilliant at reasoning. You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning.
-
-- Follow the user's requirements carefully & to the letter.
-- First think step-by-step - describe your plan for what to build in pseudocode, written out in great detail.
-- Confirm, then write code!
-- Always write correct, best practice, KISS, DRY, SOLID, YAGNI principles, bug free, fully functional and working code.
-- Avoid creating very large Vue components. When possible, extract functionality into separate sub-components.
-- When working on an existing project, adapt to the existing conventions. If there's not enough context in the prompt to know what the conventions in the current project are, you MUST proactively read other files to find out.
-- When asked to do something / create some kind of code, first read code of the same kind in the project so you know what's the project's syntax and practices.
-- Before creating types or interfaces, first search through the project as the required types might already exist.
-- Before creating migrations on backend, check what the correct command is in the package.json. After creation, check if the created migration contains only the added fields, otherwise remove the rest as the generator may add garbage.
-- Focus on easy and readability code, over being performant.
-- Fully implement all requested functionality.
-- Leave NO todo's, placeholders or missing pieces.
-- Ensure code is complete! Verify thoroughly finalised.
-- Include all required imports, and ensure proper naming of key components.
-- Be concise Minimize any other prose.
-- If you think there might not be a correct answer, you say so.
-- If you do not know the answer, say so, instead of guessing.
-- When you want to show different options to solve an issue, do so WITHOUT implementing every option. First ask the user which one they would prefer.
-- Every non-code part of your response should be written using Markdown, for better legibility.
-- When using frameworks / UI libraries, you may use context7 to check the documentation on what components to use for the required task and how to use them correctly.
-- IMPORTANT #1: Limit yourself to what you were asked to do. DO NOT REFACTOR / REWRITE code unless asked to. Instead, you MAY emit any recommendations you have at the end of your message (or you may do it at the start, and ask for confirmation, if you feel convenient).
-- IMPORTANT #2: The user is a software engineer. Focus on what he asked you to change. Do not fix or change things that haven't been asked you to.
-- IMPORTANT #3: Every change you implement must be carefuly though, and the implementation MUST BE ROBUST, unless specified otherwise by the user.
-
-## CORRAD AF Framework Specific Rules
-
-You are an expert in Nuxt 3, Vue 3, TypeScript, TailwindCSS, and the CORRAD AF framework.
-
-Code Style Preferences:
-- Use Composition API with <script setup>
-- Prefer TypeScript for type safety
-- Use TailwindCSS for styling
-- Follow CORRAD AF patterns from llms.txt
-
-Key Conventions:
-- Use \`navigateTo()\` instead of \`router.push()\`
-- Use \`definePageMeta()\` for page configuration
-- Use \`ref()\` and \`reactive()\` for Vue 3 reactivity
-- Prefer composables over mixins
-- Use middleware for route protection
-
-Framework Patterns:
-- Follow the component templates in llms.txt
-- Use rs-card, rs-button components
-- Implement proper error handling
-- Follow the API endpoint patterns
-- Use Prisma for database operations
-
-Security:
-- Always validate inputs
-- Use proper authentication patterns
-- Implement RBAC where needed
-- Follow security best practices from llms.txt
-`;
-      
-      fs.writeFileSync('.cursorrules', cursorRules);
-      cursorSpinner.succeed('Cursor AI rules applied');
-    }
-
-    // Show fancy loading progress
-    await createProgressBar('Installing dependencies and setting up project', 4000);
-
-    // Install dependencies
-    const yarnSpinner = ora('Installing dependencies with Yarn...').start();
-    const yarnSuccess = runCommand('yarn install', { stdio: 'pipe' });
-    
-    if (!yarnSuccess) {
-      yarnSpinner.fail('Failed to install dependencies with Yarn');
-      console.log(chalk.yellow('Trying with npm as fallback...'));
-      
-      const npmSpinner = ora('Installing dependencies with npm...').start();
-      const npmSuccess = runCommand('npm install', { stdio: 'pipe' });
-      
-      if (!npmSuccess) {
-        npmSpinner.fail('Failed to install dependencies');
-        console.log(chalk.red('❌ Please install dependencies manually after setup'));
-      } else {
-        npmSpinner.succeed('Dependencies installed with npm');
-      }
-    } else {
-      yarnSpinner.succeed('Dependencies installed with Yarn');
-    }
-
-    // Display header again for consistency at the end
-    displayHeader();
-    
-    // Step 6: Success message and next steps
-    const prismaNotes = isEnvConfigured() ? 
-      '' : 
-      chalk.yellow('\n⚠️  Important: Edit your .env file and configure your DATABASE_URL before running:\n') +
-      chalk.gray('  npx prisma generate\n');
-    
-    const nextSteps = setupAction === 'new' ? [
-      `  cd ${projectName}`,
-      '  git init                # Initialize git repository',
-      '  # Edit your .env file with proper configuration',
-      '  npx prisma generate     # Generate Prisma client after configuring DATABASE_URL',
-      '  yarn dev                # Start development server',
-      '  yarn build              # Build for production',
-      '  yarn start              # Start production server'
-    ] : [
-      '  # Edit your .env file with proper configuration',
-      '  npx prisma generate     # Generate Prisma client after configuring DATABASE_URL',
-      '  yarn dev                # Start development server',
-      '  yarn build              # Build for production', 
-      '  yarn start              # Start production server'
-    ];
-
-    console.log('\n' + boxen(
-      chalk.green.bold('🎉 Project setup completed successfully!\n\n') +
-      chalk.white(`Project: ${chalk.cyan.bold(projectName)}\n`) +
-      chalk.white(`Action: ${chalk.yellow.bold(setupAction === 'new' ? 'New Project' : 'Updated Existing')}\n`) +
-      chalk.white(`Location: ${chalk.gray(process.cwd())}\n`) +
-      prismaNotes +
-      chalk.white.bold('Next steps:\n') +
-      nextSteps.map(step => chalk.gray(step)).join('\n'),
-      {
-        padding: 1,
-        margin: 1,
-        borderStyle: 'round',
-        borderColor: 'green'
-      }
-    ));
-
-    // Ask if user wants to open in IDE
-    const { openIDE } = await inquirer.prompt([
-      {
-        type: 'list',
-        name: 'openIDE',
-        message: 'Would you like to open the project in your IDE now?',
-        choices: [
-          { name: 'Yes, open in IDE', value: true },
-          { name: 'No, I will open it manually', value: false }
-        ],
-        default: 0
-      }
-    ]);
-
-    if (openIDE) {
-      console.log(chalk.cyan('Opening project in IDE...'));
-      
-      // Try different IDE commands
-      const ideCommands = ['code .', 'cursor .', 'webstorm .', 'idea .'];
-      let ideOpened = false;
-      
-      for (const cmd of ideCommands) {
-        try {
-          execSync(cmd, { stdio: 'pipe' });
-          console.log(chalk.green(`✓ Opened in IDE with: ${cmd}`));
-          ideOpened = true;
-          break;
-        } catch (error) {
-          // Try next IDE
-        }
-      }
-      
-      if (!ideOpened) {
-        console.log(chalk.yellow('Could not detect IDE. Please open the project manually.'));
-      }
-    }
-
-    // Step 7: Auto close after showing final message
-    console.log(chalk.gray('\n👋 CLI setup complete. You can now continue in your IDE terminal.'));
-    console.log(chalk.gray('This terminal will close in 3 seconds...'));
-    
-    setTimeout(() => {
-      process.exit(0);
-    }, 3000);
-
-  } catch (error) {
-    if (error.isTtyError) {
-      console.error(chalk.red('❌ This CLI requires an interactive terminal.'));
-    } else {
-      console.error(chalk.red('❌ Setup failed:'), error.message);
-    }
-    process.exit(1);
-  }
-}
-
-// Handle Ctrl+C gracefully
-process.on('SIGINT', () => {
-  console.log(chalk.yellow('\n\n👋 Setup cancelled by user. Goodbye!'));
-  process.exit(0);
-});
-
-// Handle uncaught exceptions
-process.on('uncaughtException', (error) => {
-  console.error('❌ Uncaught Exception:', error);
-  process.exit(1);
-});
-
-// Handle unhandled promise rejections
-process.on('unhandledRejection', (reason, promise) => {
-  console.error('❌ Unhandled Rejection at:', promise, 'reason:', reason);
-  process.exit(1);
-});
-
-// Run the CLI
-console.log('📦 Calling main function...');
-main().catch((error) => {
-  console.error('❌ Main function error:', error);
-  process.exit(1);
-}); 

cli-tool/package.json

@@ -1,39 +0,0 @@
-{
-  "name": "corradaf",
-  "version": "1.0.2",
-  "description": "CLI tool to quickly set up CORRAD Application Framework projects",
-  "main": "index.js",
-  "bin": {
-    "corradaf": "./index.js"
-  },
-  "scripts": {
-    "start": "node index.js"
-  },
-  "keywords": [
-    "corradaf",
-    "cli",
-    "project-setup",
-    "nuxt",
-    "vue",
-    "framework",
-    "template"
-  ],
-  "dependencies": {
-    "boxen": "^5.1.2",
-    "chalk": "^4.1.2",
-    "figlet": "^1.8.1",
-    "gradient-string": "^2.0.2",
-    "inquirer": "^8.2.6",
-    "ora": "^5.4.1"
-  },
-  "author": "Corrad Team",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://git.sena.my/corrad-software/corrad-af-2024.git"
-  },
-  "homepage": "https://git.sena.my/corrad-software/corrad-af-2024",
-  "engines": {
-    "node": ">=14.0.0"
-  }
-}

components/JobDetailModal.vue

@@ -0,0 +1,180 @@
+<script setup>
+import { defineProps, defineEmits, computed } from 'vue';
+
+const props = defineProps({
+  job: {
+    type: Object,
+    required: true,
+  },
+  show: {
+    type: Boolean,
+    required: true,
+  }
+});
+
+const emit = defineEmits(['close']);
+
+function formatDate(timestamp) {
+  if (!timestamp) return 'N/A';
+  const date = new Date(Number(timestamp));
+  if (isNaN(date.getTime())) return 'Invalid Date';
+  return date.toLocaleString();
+}
+
+const jobDuration = computed(() => {
+  if (props.job.duration) {
+    return (props.job.duration / 1000).toFixed(2) + 's';
+  }
+  if (props.job.processedOn && props.job.finishedOn) {
+    return ((props.job.finishedOn - props.job.processedOn) / 1000).toFixed(2) + 's';
+  }
+  return 'N/A';
+});
+
+const dataEntries = computed(() => {
+  if (props.job.data && typeof props.job.data === 'object') {
+    return Object.entries(props.job.data);
+  }
+  return [];
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <transition name="modal-fade">
+      <div v-if="show" 
+           class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-60 backdrop-blur-sm p-4"
+           @click.self="emit('close')">
+        <rs-card class="w-full max-w-2xl bg-white shadow-xl rounded-lg max-h-[90vh] flex flex-col">
+          <template #header>
+            <div class="flex justify-between items-center px-6 py-4 border-b border-gray-200">
+              <h3 class="text-xl font-semibold text-gray-800">
+                Job Details: <span class="text-primary">#{{ job.id }}</span>
+              </h3>
+              <button @click="emit('close')" class="text-gray-400 hover:text-gray-600 transition-colors">
+                <Icon name="mdi:close" size="24" />
+              </button>
+            </div>
+          </template>
+
+          <template #body>
+            <div class="p-6 space-y-5 overflow-y-auto flex-grow">
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4 text-sm">
+                <div>
+                  <p class="text-gray-500">Name</p>
+                  <p class="font-medium text-gray-800">{{ job.name || 'N/A' }}</p>
+                </div>
+                <div>
+                  <p class="text-gray-500">Queue</p>
+                  <p class="font-medium text-gray-800">{{ job.queue }}</p>
+                </div>
+                <div>
+                  <p class="text-gray-500">Status</p>
+                  <rs-badge 
+                    :variant="job.state === 'completed' ? 'success' : 
+                             job.state === 'failed' ? 'danger' :
+                             job.state === 'active' ? 'primary' : 'info'"
+                    class="text-xs font-semibold"
+                  >
+                    {{ job.state }}
+                  </rs-badge>
+                </div>
+                <div>
+                  <p class="text-gray-500">Priority</p>
+                  <p class="font-medium text-gray-800">{{ job.priority }}</p>
+                </div>
+                <div>
+                  <p class="text-gray-500">Attempts Made</p>
+                  <p class="font-medium text-gray-800">{{ job.attemptsMade }}</p>
+                </div>
+                 <div>
+                  <p class="text-gray-500">Duration</p>
+                  <p class="font-medium text-gray-800">{{ jobDuration }}</p>
+                </div>
+              </div>
+
+              <div class="border-t border-gray-200 pt-4">
+                <h4 class="text-md font-semibold text-gray-700 mb-2">Timestamps</h4>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-2 text-sm">
+                  <div>
+                    <p class="text-gray-500">Created At</p>
+                    <p class="font-medium text-gray-800">{{ formatDate(job.timestamp) }}</p>
+                  </div>
+                  <div>
+                    <p class="text-gray-500">Processed At</p>
+                    <p class="font-medium text-gray-800">{{ formatDate(job.processedOn) }}</p>
+                  </div>
+                  <div>
+                    <p class="text-gray-500">Finished At</p>
+                    <p class="font-medium text-gray-800">{{ formatDate(job.finishedOn) }}</p>
+                  </div>
+                </div>
+              </div>
+
+              <div v-if="job.state === 'active' && job.progress > 0" class="border-t border-gray-200 pt-4">
+                <h4 class="text-md font-semibold text-gray-700 mb-1">Progress</h4>
+                <div class="w-full bg-gray-200 rounded-full h-2.5">
+                  <div class="bg-blue-600 h-2.5 rounded-full transition-all duration-300 ease-out" 
+                       :style="{ width: job.progress + '%' }">
+                  </div>
+                </div>
+                <p class="text-xs text-gray-600 mt-1">{{ job.progress }}% complete</p>
+              </div>
+
+              <div v-if="job.state === 'failed' && job.failedReason" class="border-t border-gray-200 pt-4">
+                <h4 class="text-md font-semibold text-red-600 mb-1">Failure Reason</h4>
+                <div class="p-3 bg-red-50 border border-red-200 rounded-md text-sm text-red-700 whitespace-pre-wrap">
+                  {{ job.failedReason }}
+                </div>
+              </div>
+              
+              <div v-if="dataEntries.length > 0" class="border-t border-gray-200 pt-4">
+                <h4 class="text-md font-semibold text-gray-700 mb-2">Job Data</h4>
+                <div class="p-3 bg-gray-50 border border-gray-200 rounded-md max-h-60 overflow-y-auto text-xs">
+                  <pre class="whitespace-pre-wrap break-all">{{ JSON.stringify(job.data, null, 2) }}</pre>
+                </div>
+              </div>
+              <div v-else-if="job.data" class="border-t border-gray-200 pt-4">
+                 <h4 class="text-md font-semibold text-gray-700 mb-2">Job Data</h4>
+                 <div class="p-3 bg-gray-50 border border-gray-200 rounded-md text-xs text-gray-500">
+                    No data or data is not an object.
+                 </div>
+              </div>
+
+            </div>
+          </template>
+          
+          <template #footer>
+            <div class="px-6 py-3 bg-gray-50 border-t border-gray-200 flex justify-end">
+              <rs-button variant="secondary" @click="emit('close')">Close</rs-button>
+            </div>
+          </template>
+        </rs-card>
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.modal-fade-enter-active,
+.modal-fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.modal-fade-enter-from,
+.modal-fade-leave-to {
+  opacity: 0;
+}
+
+pre::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+pre::-webkit-scrollbar-thumb {
+  background: #cbd5e1; /* cool-gray-300 */
+  border-radius: 3px;
+}
+pre::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8; /* cool-gray-400 */
+}
+</style> 

composables/themeList.js

@@ -1,135 +1,36 @@
 export default function () {
   return [
     {
-      theme: "biru",
+      theme: "biasa",
       colors: [
         {
           name: "primary",
-          value: "0, 102, 204", // Strong blue
+          value: "243, 88, 106",
         },
         {
           name: "secondary",
-          value: "51, 153, 255", // Lighter blue
+          value: "240, 122, 37",
         },
         {
           name: "accent",
-          value: "255, 204, 0", // Gold
+          value: "243, 244, 246",
-        },
-        {
-          name: "background",
-          value: "240, 248, 255", // Alice blue
-        },
-        {
-          name: "text",
-          value: "0, 0, 0", // Black
         },
       ],
     },
     {
-      theme: "merah",
+      theme: "gelap",
       colors: [
         {
           name: "primary",
-          value: "204, 0, 0", // Strong red
+          value: "243, 88, 106",
         },
         {
           name: "secondary",
-          value: "255, 102, 102", // Lighter red
+          value: "240, 122, 37",
         },
         {
           name: "accent",
-          value: "255, 255, 153", // Light yellow
+          value: "15, 23, 42",
-        },
-        {
-          name: "background",
-          value: "255, 240, 240", // Very light pink
-        },
-        {
-          name: "text",
-          value: "0, 0, 0", // Black
-        },
-      ],
-    },
-    {
-      theme: "ungu",
-      colors: [
-        {
-          name: "primary",
-          value: "75, 0, 130", // Indigo
-        },
-        {
-          name: "secondary",
-          value: "138, 43, 226", // Blue violet
-        },
-        {
-          name: "accent",
-          value: "255, 215, 0", // Gold
-        },
-        {
-          name: "background",
-          value: "240, 248, 255", // Alice blue
-        },
-        {
-          name: "text",
-          value: "0, 0, 0", // Black
-        },
-      ],
-    },
-    {
-      theme: "oren",
-      colors: [
-        {
-          name: "primary",
-          value: "255, 103, 0", // Dark orange
-        },
-        {
-          name: "secondary",
-          value: "255, 159, 64", // Lighter orange
-        },
-        {
-          name: "accent",
-          value: "0, 128, 128", // Teal
-        },
-        {
-          name: "background",
-          value: "255, 250, 240", // Floral white
-        },
-        {
-          name: "text",
-          value: "0, 0, 0", // Black
-        },
-      ],
-    },
-    {
-      theme: "purplian",
-      colors: [
-        {
-          name: "primary",
-          value: "145, 54, 136", // #913688 - Main Purple
-        },
-        {
-          name: "secondary",
-          value: "165, 94, 156", // #a55e9c - Lighter Purple
-        },
-        {
-          name: "accent",
-          value: "241, 235, 245", // #f1ebf5 - Very soft purple
-        },
-        {
-          name: "background",
-          value: "250, 250, 253", // #fafafd - Almost white
-        },
-        {
-          name: "text",
-          value: "60, 60, 67", // #3c3c43 - Dark gray text
-        },
-        {
-          name: "surface",
-          value: "255, 255, 255", // #ffffff - Pure white
-        },
-        {
-          name: "highlight",
-          value: "225, 207, 235", // #e1cfeb - Very soft purple highlight
         },
       ],
     },
@@ -148,16 +49,7 @@ export default function () {
           name: "accent",
           value: "255, 242, 0", // #FFF200 - Yellow
         },
-        {
-          name: "background",
-          value: "245, 250, 255", // Very light blue background
-        },
-        {
-          name: "text",
-          value: "0, 0, 0", // Black
-        },
       ],
     },
   ];
 }
- 

composables/themeList2.js

@@ -1,53 +1,102 @@
 export default function () {
   return [
     {
-      theme: "biasa",
+      theme: "biru",
       colors: [
         {
           name: "primary",
-          value: "243, 88, 106",
+          value: "0, 102, 204", // Strong blue
         },
         {
           name: "secondary",
-          value: "240, 122, 37",
+          value: "51, 153, 255", // Lighter blue
         },
         {
           name: "accent",
-          value: "243, 244, 246",
+          value: "255, 204, 0", // Gold
+        },
+        {
+          name: "background",
+          value: "240, 248, 255", // Alice blue
+        },
+        {
+          name: "text",
+          value: "0, 0, 0", // Black
         },
       ],
     },
     {
-      theme: "gelap",
+      theme: "merah",
       colors: [
         {
           name: "primary",
-          value: "243, 88, 106",
+          value: "204, 0, 0", // Strong red
         },
         {
           name: "secondary",
-          value: "240, 122, 37",
+          value: "255, 102, 102", // Lighter red
         },
         {
           name: "accent",
-          value: "15, 23, 42",
+          value: "255, 255, 153", // Light yellow
+        },
+        {
+          name: "background",
+          value: "255, 240, 240", // Very light pink
+        },
+        {
+          name: "text",
+          value: "0, 0, 0", // Black
         },
       ],
     },
     {
-      theme: "purplian",
+      theme: "ungu",
       colors: [
         {
           name: "primary",
-          value: "145, 54, 136", // #913688 - Main Purple
+          value: "75, 0, 130", // Indigo
         },
         {
           name: "secondary",
-          value: "165, 94, 156", // #a55e9c - Lighter Purple
+          value: "138, 43, 226", // Blue violet
         },
         {
           name: "accent",
-          value: "241, 235, 245", // #f1ebf5 - Very soft purple
+          value: "255, 215, 0", // Gold
+        },
+        {
+          name: "background",
+          value: "240, 248, 255", // Alice blue
+        },
+        {
+          name: "text",
+          value: "0, 0, 0", // Black
+        },
+      ],
+    },
+    {
+      theme: "oren",
+      colors: [
+        {
+          name: "primary",
+          value: "255, 103, 0", // Dark orange
+        },
+        {
+          name: "secondary",
+          value: "255, 159, 64", // Lighter orange
+        },
+        {
+          name: "accent",
+          value: "0, 128, 128", // Teal
+        },
+        {
+          name: "background",
+          value: "255, 250, 240", // Floral white
+        },
+        {
+          name: "text",
+          value: "0, 0, 0", // Black
         },
       ],
     },
@@ -66,8 +115,15 @@ export default function () {
           name: "accent",
           value: "255, 242, 0", // #FFF200 - Yellow
         },
+        {
+          name: "background",
+          value: "245, 250, 255", // Very light blue background
+        },
+        {
+          name: "text",
+          value: "0, 0, 0", // Black
+        },
       ],
     },
   ];
 }
- 

docs/SITE_SETTINGS.md

@@ -0,0 +1,161 @@
+# Site Settings Feature
+
+## Overview
+The Site Settings feature allows administrators to customize the appearance and branding of the application through a user-friendly interface. All settings are globally applied across the entire application including SEO, meta tags, and visual elements.
+
+## Features
+
+### 1. Basic Information
+- **Site Name**: Customize the application name displayed globally in:
+  - Header and sidebar
+  - Browser title and meta tags
+  - SEO and Open Graph tags
+  - Loading screen
+  - All pages and components
+- **Site Description**: Set a description used for:
+  - SEO meta descriptions
+  - Open Graph descriptions
+  - Twitter Card descriptions
+- **Theme Selection**: Choose from available themes:
+  - Standard themes (from themeList.js)
+  - Accessibility themes (from themeList2.js)
+  - Custom themes added to theme.css
+
+### 2. Branding
+- **Site Logo**: Upload a custom logo displayed in:
+  - Header (horizontal layout)
+  - Sidebar (vertical layout)
+  - Loading screen
+  - Login page
+  - Any component using site settings
+- **Favicon**: Upload a custom favicon displayed in:
+  - Browser tabs
+  - Bookmarks
+  - Mobile home screen icons
+
+### 3. Advanced Settings
+- **Custom CSS**: Add custom CSS injected into document head
+- **Custom Theme File**: Upload CSS files saved to `/assets/style/css/`
+- **Add Custom Theme to theme.css**: Directly add themes to the main theme.css file
+
+## How to Access
+
+1. Navigate to **Pentadbiran** → **Konfigurasi** → **Site Settings**
+2. Use the tabbed interface:
+   - **Basic Info**: Site name, description, and theme selection
+   - **Branding**: Logo and favicon uploads
+   - **Advanced**: Custom CSS and theme management
+3. Use the **Live Preview** panel to see changes in real-time
+4. Click **Save Changes** to apply your settings
+
+## Technical Implementation
+
+### Database Schema
+The settings are stored in the `site_settings` table with the following fields:
+- `siteName`, `siteDescription`
+- `siteLogo`, `siteFavicon`
+- `selectedTheme` - Selected theme name
+- `customCSS`, `customThemeFile`
+- Legacy fields maintained for backward compatibility
+
+### API Endpoints
+- `GET /api/devtool/config/site-settings` - Retrieve current settings
+- `POST /api/devtool/config/site-settings` - Update settings
+- `POST /api/devtool/config/upload-file` - Upload files (logos, themes)
+- `POST /api/devtool/config/add-custom-theme` - Add custom theme to theme.css
+
+### File Upload Locations
+- **Logo and Favicon files**: Saved to `public/uploads/site-settings/`
+- **Theme CSS files**: Saved to `assets/style/css/` directory
+- **Custom themes**: Added directly to `assets/style/css/base/theme.css`
+
+### Composable
+The `useSiteSettings()` composable provides:
+- `siteSettings` - Reactive settings object
+- `loadSiteSettings()` - Load settings from API
+- `updateSiteSettings()` - Update settings
+- `setTheme()` - Set theme using existing theme system
+- `getCurrentTheme()` - Get current theme
+- `applyThemeSettings()` - Apply theme changes to DOM
+- `updateGlobalMeta()` - Update global meta tags and SEO
+- `addCustomThemeToFile()` - Add custom theme to theme.css
+
+### Global Integration
+The site settings are globally integrated across:
+
+#### Header Component
+- Uses site settings for logo and name display
+- Theme selection dropdown uses same system as site settings
+- Synced with site settings theme selection
+
+#### Loading Component
+- Uses site logo if available, fallback to default
+- Displays site name in loading screen
+
+#### App.vue
+- Global meta tags updated from site settings
+- Title, description, and favicon managed globally
+- Theme initialization from site settings
+
+#### SEO and Meta Tags
+- Document title updated globally
+- Meta descriptions for SEO
+- Open Graph tags for social sharing
+- Twitter Card tags
+- Favicon and apple-touch-icon
+
+### Theme System Integration
+- Integrates with existing theme system (themeList.js, themeList2.js)
+- Theme selection in header dropdown synced with site settings
+- Custom themes can be added directly to theme.css
+- Backward compatibility with existing theme structure
+
+### Custom Theme Structure
+Custom themes added to theme.css should follow this structure:
+```css
+html[data-theme="your-theme-name"] {
+  --color-primary: 255, 0, 0;
+  --color-secondary: 0, 255, 0;
+  --color-success: 0, 255, 0;
+  --color-info: 0, 0, 255;
+  --color-warning: 255, 255, 0;
+  --color-danger: 255, 0, 0;
+  /* Add your theme variables here */
+}
+```
+
+## Default Values
+If no settings are configured, the system uses these defaults:
+- Site Name: "corradAF"
+- Site Description: "corradAF Base Project"
+- Selected Theme: "biasa"
+- Logo: Default corradAF logo
+- Favicon: Default favicon
+
+## Migration Notes
+- Legacy color fields (primaryColor, secondaryColor, etc.) are maintained for backward compatibility
+- `themeMode` field is mapped to `selectedTheme` for compatibility
+- Existing installations will automatically use default values
+- Theme selection integrates with existing theme dropdown in header
+
+## Notes
+- Changes are applied immediately in the preview
+- Theme changes affect the entire application
+- Custom CSS is injected into the document head
+- Theme files are saved to `/assets/style/css/` for proper integration
+- File uploads are validated for type and size
+- Settings persist across browser sessions
+- Site name and description updates are reflected globally and immediately
+- All meta tags and SEO elements are automatically updated
+- Logo changes are reflected in all components that use site settings 
+
+### Important Notes
+- Changes are applied immediately in the preview
+- Theme changes affect the entire application
+- Custom CSS is injected into the document head
+- Theme files are saved to `/assets/style/css/` for proper integration
+- File uploads are validated for type and size
+- Settings persist across browser sessions
+- Site name and description updates are reflected globally and immediately
+- All meta tags and SEO elements are automatically updated
+- Logo changes are reflected in all components that use site settings 

fixes-summary.md

@@ -0,0 +1,122 @@
+# Fixes Implemented ✅
+
+## 1. Header Title Not Showing Issue 🔧
+
+**Problem**: Site name not appearing in header even when toggle is enabled
+
+**Root Cause**: Header component only showed site name in horizontal layout (`v-else` condition), but most of the time the layout is vertical
+
+**Fixes Applied**:
+- ✅ Added site name display to both vertical AND horizontal header layouts
+- ✅ Enhanced site settings loading in Header component's `onMounted` hook
+- ✅ Added immediate watchers to sync toggle changes with global site settings
+- ✅ Added debug info panel to troubleshoot site settings state
+
+**Files Modified**:
+- `components/layouts/Header.vue` - Added site name to vertical layout
+- `pages/devtool/config/site-settings/index.vue` - Enhanced watchers and debugging
+
+## 2. Button Styling Standardization 🎨
+
+**Problem**: Inconsistent button styling across tabs
+
+**Standardization Applied**:
+- ✅ All upload buttons: `variant="outline" size="sm"`
+- ✅ Save Changes button: `variant="primary" size="sm"` 
+- ✅ Reset button: `variant="outline" size="sm"`
+- ✅ Apply Font button: `variant="outline" size="sm"` (changed from primary)
+
+**Consistent Button Pattern**:
+```vue
+<rs-button variant="outline" size="sm">
+  <Icon name="ic:outline-[icon]" class="mr-1" />
+  Action Text
+</rs-button>
+```
+
+**Files Modified**:
+- `pages/devtool/config/site-settings/index.vue` - Standardized Apply Font button
+
+## 3. Site Settings Description Padding 📝
+
+**Problem**: "Configure your platform's branding, appearance, SEO, and functionality" text had improper padding for two lines
+
+**Fix Applied**:
+- ✅ Added `leading-relaxed` class for better line height
+- ✅ Improved text readability and spacing
+
+**Before**:
+```vue
+<p>Configure your platform's branding, appearance, SEO, and functionality.</p>
+```
+
+**After**:
+```vue
+<p class="leading-relaxed">Configure your platform's branding, appearance, SEO, and functionality.</p>
+```
+
+**Files Modified**:
+- `pages/devtool/config/site-settings/index.vue` - Enhanced info card description
+
+## Additional Improvements 🚀
+
+### Enhanced Toggle Functionality
+- ✅ Real-time toggle updates without requiring save
+- ✅ Immediate sync between settings page and global state
+- ✅ Both header and sidemenu respect the toggle setting
+
+### Debug Information
+- ✅ Added debug panel in live preview showing:
+  - Current site name
+  - Toggle state (Yes/No)
+  - Font size in pixels
+- ✅ Helps troubleshoot configuration issues
+
+### Header Logic Improvements
+- ✅ Site name now shows in both vertical and horizontal layouts
+- ✅ Proper font size scaling in sidemenu (65% of header size)
+- ✅ Automatic site settings loading on component mount
+
+## Testing Verification ✅
+
+**Header Display Test**:
+1. ✅ Site name appears in vertical layout (default)
+2. ✅ Site name appears in horizontal layout
+3. ✅ Toggle OFF hides name in both layouts
+4. ✅ Toggle ON shows name in both layouts
+5. ✅ Font size applies correctly
+6. ✅ Changes are immediate
+
+**Button Consistency Test**:
+1. ✅ All upload buttons use outline variant
+2. ✅ Save button uses primary variant
+3. ✅ Reset button uses outline variant
+4. ✅ All buttons have consistent size (sm)
+5. ✅ Icons are properly positioned with mr-1
+
+**Description Styling Test**:
+1. ✅ Text has proper line height for readability
+2. ✅ Padding appears natural for two-line content
+3. ✅ Dark mode compatibility maintained
+
+## Files Changed Summary 📁
+
+1. **components/layouts/Header.vue**
+   - Added site name to vertical layout
+   - Enhanced site settings loading
+   - Improved responsive layout handling
+
+2. **pages/devtool/config/site-settings/index.vue**
+   - Standardized button variants and sizes
+   - Added debug information panel
+   - Enhanced toggle watching and real-time updates
+   - Improved description line height
+   - Fixed immediate change application
+
+## Next Steps 🎯
+
+1. Test the site settings page at `/devtool/config/site-settings`
+2. Verify header displays site name when toggle is enabled
+3. Check that all buttons follow consistent styling
+4. Confirm description text has proper spacing
+5. Use debug panel to troubleshoot any remaining issues 

llms.txt

@@ -1,589 +0,0 @@
-# corradAF Framework - LLM Interaction Guide
-
-## Metadata
-- **Framework Name**: corradAF (Corrad Application Framework)
-- **Framework Version**: 1.0.0
-- **License**: MIT License
-- **Base Technology**: Nuxt 3, Vue 3, TypeScript/JavaScript
-- **UI Framework**: TailwindCSS with custom components
-- **Database ORM**: Prisma
-- **Supported Languages**: English (primary), multi-language ready
-- **Input Format**: Text, Markdown, JSON for API specifications
-- **Output Format**: Vue SFC components, TypeScript/JavaScript, JSON configurations
-
-## Framework Overview
-
-### Introduction:
-corradAF is a comprehensive Nuxt.js template designed for rapid application development. It provides a complete development tools suite, authentication system, and modern UI components. This document defines interaction patterns for LLMs working with the corradAF framework.
-
-### Core Architecture:
-- **Frontend**: Nuxt 3 with Vue 3 Composition API
-- **Styling**: TailwindCSS with custom component library
-- **State Management**: Pinia stores
-- **Authentication**: JWT-based with middleware protection
-- **Database**: Prisma ORM with PostgreSQL (configurable)
-- **Development Tools**: Built-in suite for rapid development
-
-## Content Structure Guidelines
-
-### File Organization:
-```
-├── pages/           # Route pages (Nuxt auto-routing)
-├── components/      # Reusable Vue components
-├── composables/     # Vue composables for shared logic
-├── layouts/         # Application layouts
-├── middleware/      # Route middleware (auth, permissions)
-├── server/api/      # Server-side API endpoints
-├── stores/          # Pinia state management
-├── assets/          # Static assets and styles
-├── public/          # Public static files
-├── prisma/          # Database schema and migrations
-└── devtool/         # Development tools pages
-```
-
-### Component Naming Conventions:
-- **Pages**: Use kebab-case for file names (e.g., `user-management.vue`)
-- **Components**: Use PascalCase for component names (e.g., `UserCard.vue`)
-- **Composables**: Prefix with `use` (e.g., `useUserManagement.js`)
-- **Stores**: Use camelCase with descriptive names (e.g., `userStore.js`)
-
-## Writing Guidelines for LLMs
-
-### Controlled Vocabulary:
-- Use `navigateTo()` instead of `router.push()` for navigation (Nuxt 3 pattern)
-- Use `definePageMeta()` for page configuration
-- Use `ref()` and `reactive()` for Vue 3 Composition API
-- Use `composables` instead of `mixins` for shared logic
-- Use `middleware` for route protection and validation
-
-### Grammar Rules:
-- **Sentence Length**: Maximum 20 words for code comments
-- **Active Voice**: Prefer active voice in documentation
-- **Function Names**: Use camelCase with descriptive verbs
-- **Variable Names**: Use camelCase with clear, descriptive nouns
-
-### Code Style Guidelines:
-- **Vue SFC Structure**: `<script setup>`, `<template>`, `<style>` order
-- **Import Order**: Vue imports, Nuxt imports, local imports, type imports
-- **Function Declaration**: Use `function` keyword for named functions, arrow functions for callbacks
-- **Async/Await**: Prefer async/await over promises for better readability
-
-## Component Templates
-
-### Standard Vue SFC Component Template:
-```vue
-<script setup>
-// Imports
-import { ref, computed, onMounted } from 'vue'
-
-// Props and emits
-const props = defineProps({
-  modelValue: {
-    type: [String, Number, Boolean],
-    default: null
-  }
-})
-
-const emit = defineEmits(['update:modelValue', 'change'])
-
-// Reactive data
-const isLoading = ref(false)
-const data = ref([])
-
-// Computed properties
-const processedData = computed(() => {
-  return data.value.filter(item => item.active)
-})
-
-// Methods
-function handleUpdate(value) {
-  emit('update:modelValue', value)
-  emit('change', value)
-}
-
-// Lifecycle
-onMounted(async () => {
-  await loadData()
-})
-
-async function loadData() {
-  isLoading.value = true
-  try {
-    // Load data logic
-  } catch (error) {
-    console.error('Error loading data:', error)
-  } finally {
-    isLoading.value = false
-  }
-}
-</script>
-
-<template>
-  <div class="component-wrapper">
-    <!-- Component content -->
-  </div>
-</template>
-
-<style scoped>
-/* Component-specific styles */
-</style>
-```
-
-### Page Component Template:
-```vue
-<script setup>
-definePageMeta({
-  title: "Page Title",
-  middleware: ["auth"], // Add middleware as needed
-  requiresAuth: true,
-  breadcrumb: [
-    {
-      name: "Dashboard",
-      path: "/dashboard",
-    },
-    {
-      name: "Current Page",
-      path: "/current-page",
-    },
-  ],
-})
-
-// Page-specific logic
-</script>
-
-<template>
-  <div class="page-container">
-    <LayoutsBreadcrumb />
-    
-    <!-- Page content -->
-  </div>
-</template>
-```
-
-### Development Tool Page Template:
-```vue
-<script setup>
-definePageMeta({
-  title: "Tool Name",
-  middleware: ["auth", "dev-tools"],
-  requiresAuth: true,
-  layout: "devtool",
-  breadcrumb: [
-    {
-      name: "Dashboard",
-      path: "/dashboard",
-    },
-    {
-      name: "Development Tools",
-      path: "/devtool",
-    },
-    {
-      name: "Tool Name",
-      path: "/devtool/tool-name",
-    },
-  ],
-})
-
-// Tool-specific functionality
-const toolData = ref([])
-const isLoading = ref(false)
-
-// CRUD operations
-async function createItem(data) {
-  // Implementation
-}
-
-async function updateItem(id, data) {
-  // Implementation
-}
-
-async function deleteItem(id) {
-  // Implementation
-}
-</script>
-
-<template>
-  <div class="devtool-container space-y-6">
-    <div class="flex justify-between items-center">
-      <h1 class="text-2xl font-bold text-primary">Tool Name</h1>
-      <rs-button variant="primary" @click="createNew">
-        <Icon name="mdi:plus" size="18" />
-        Add New
-      </rs-button>
-    </div>
-    
-    <!-- Tool interface -->
-  </div>
-</template>
-```
-
-## API Endpoint Templates
-
-### Server API Route Template:
-```typescript
-export default defineEventHandler(async (event) => {
-  // Validate authentication
-  const user = await requireUserSession(event)
-  
-  // Handle different HTTP methods
-  const method = getMethod(event)
-  
-  if (method === 'GET') {
-    // GET logic
-    return { data: [] }
-  }
-  
-  if (method === 'POST') {
-    // POST logic
-    const body = await readBody(event)
-    
-    // Validate input
-    if (!body.name) {
-      throw createError({
-        statusCode: 400,
-        statusMessage: 'Name is required'
-      })
-    }
-    
-    // Process request
-    return { success: true, data: body }
-  }
-  
-  // Handle other methods
-  throw createError({
-    statusCode: 405,
-    statusMessage: 'Method not allowed'
-  })
-})
-```
-
-### API Response Format:
-```json
-{
-  "success": true,
-  "data": {},
-  "message": "Operation completed successfully",
-  "meta": {
-    "timestamp": "2024-01-01T00:00:00Z",
-    "version": "1.0.0"
-  }
-}
-```
-
-### Error Response Format:
-```json
-{
-  "success": false,
-  "error": {
-    "code": "VALIDATION_ERROR",
-    "message": "Invalid input provided",
-    "details": {}
-  },
-  "meta": {
-    "timestamp": "2024-01-01T00:00:00Z",
-    "version": "1.0.0"
-  }
-}
-```
-
-## Database Schema Patterns
-
-### Prisma Model Template:
-```prisma
-model User {
-  id          String   @id @default(cuid())
-  email       String   @unique
-  name        String?
-  role        Role     @default(USER)
-  isActive    Boolean  @default(true)
-  createdAt   DateTime @default(now())
-  updatedAt   DateTime @updatedAt
-  
-  // Relations
-  profile     UserProfile?
-  posts       Post[]
-  
-  @@map("users")
-}
-
-model UserProfile {
-  id        String @id @default(cuid())
-  userId    String @unique
-  avatar    String?
-  bio       String?
-  
-  user      User   @relation(fields: [userId], references: [id], onDelete: Cascade)
-  
-  @@map("user_profiles")
-}
-
-enum Role {
-  USER
-  ADMIN
-  DEVELOPER
-}
-```
-
-## TailwindCSS and Styling Guidelines
-
-### Component Styling Patterns:
-- **Cards**: Use `rs-card` component or `bg-white rounded-lg shadow-sm border`
-- **Buttons**: Use `rs-button` component with variants (primary, secondary, danger)
-- **Forms**: Use FormKit components with TailwindCSS utilities
-- **Grid Layouts**: Use `grid grid-cols-{n} gap-{size}` for responsive layouts
-- **Spacing**: Use consistent spacing scale (4, 6, 8, 12, 16, 24)
-
-### Color Scheme:
-- **Primary**: `text-primary`, `bg-primary`
-- **Secondary**: `text-secondary`, `bg-secondary`
-- **Success**: `text-green-600`, `bg-green-100`
-- **Warning**: `text-yellow-600`, `bg-yellow-100`
-- **Danger**: `text-red-600`, `bg-red-100`
-
-## Authentication and Security Patterns
-
-### Route Protection:
-```javascript
-// middleware/auth.js
-export default defineNuxtRouteMiddleware((to, from) => {
-  const { $auth } = useNuxtApp()
-  
-  if (!$auth.user) {
-    return navigateTo('/login')
-  }
-})
-
-// middleware/dev-tools.js
-export default defineNuxtRouteMiddleware((to, from) => {
-  const { $auth } = useNuxtApp()
-  
-  if (!$auth.user?.isDeveloper) {
-    throw createError({
-      statusCode: 403,
-      statusMessage: 'Access forbidden'
-    })
-  }
-})
-```
-
-### API Security:
-```typescript
-// server/utils/auth.ts
-export async function requireUserSession(event) {
-  const token = getCookie(event, 'auth-token') || getHeader(event, 'authorization')
-  
-  if (!token) {
-    throw createError({
-      statusCode: 401,
-      statusMessage: 'Authentication required'
-    })
-  }
-  
-  try {
-    const user = await verifyJWT(token)
-    return user
-  } catch (error) {
-    throw createError({
-      statusCode: 401,
-      statusMessage: 'Invalid token'
-    })
-  }
-}
-```
-
-## Development Tools Integration
-
-### Adding New Development Tools:
-1. Create page in `pages/devtool/tool-name/`
-2. Add navigation entry in navigation configuration
-3. Implement CRUD operations
-4. Add proper middleware and permissions
-5. Follow established UI patterns
-
-### Tool Configuration Template:
-```javascript
-// devtool configuration
-export const toolConfig = {
-  name: 'Tool Name',
-  description: 'Tool description',
-  icon: 'mdi:tool-icon',
-  path: '/devtool/tool-name',
-  permissions: ['developer', 'admin'],
-  features: [
-    'create',
-    'read',
-    'update',
-    'delete',
-    'export',
-    'import'
-  ]
-}
-```
-
-## Input/Output Specifications for Code Generation
-
-### Request Format for Component Generation:
-```json
-{
-  "task": "component_generation",
-  "type": "vue_component",
-  "specifications": {
-    "name": "UserCard",
-    "props": ["user", "showActions"],
-    "events": ["edit", "delete"],
-    "features": ["responsive", "accessible"],
-    "styling": "tailwindcss"
-  }
-}
-```
-
-### Response Format:
-```json
-{
-  "success": true,
-  "generated_code": "<!-- Vue component code -->",
-  "file_path": "components/UserCard.vue",
-  "dependencies": ["vue", "@nuxt/icon"],
-  "usage_example": "<UserCard :user=\"user\" @edit=\"handleEdit\" />",
-  "explanation": "Generated a responsive user card component with edit and delete actions."
-}
-```
-
-## Error Handling Patterns
-
-### Frontend Error Handling:
-```javascript
-// composables/useErrorHandler.js
-export const useErrorHandler = () => {
-  const handleError = (error, context = '') => {
-    console.error(`Error in ${context}:`, error)
-    
-    // Show user-friendly message
-    const { $toast } = useNuxtApp()
-    $toast.error('An error occurred. Please try again.')
-    
-    // Log to monitoring service if available
-    if (process.env.NODE_ENV === 'production') {
-      // Log to external service
-    }
-  }
-  
-  return { handleError }
-}
-```
-
-### API Error Handling:
-```typescript
-// server/utils/errorHandler.ts
-export function handleAPIError(error: unknown) {
-  if (error instanceof ValidationError) {
-    throw createError({
-      statusCode: 400,
-      statusMessage: 'Validation failed',
-      data: error.details
-    })
-  }
-  
-  if (error instanceof DatabaseError) {
-    throw createError({
-      statusCode: 500,
-      statusMessage: 'Database operation failed'
-    })
-  }
-  
-  // Generic error
-  throw createError({
-    statusCode: 500,
-    statusMessage: 'Internal server error'
-  })
-}
-```
-
-## Testing Patterns
-
-### Component Testing Template:
-```javascript
-// tests/components/UserCard.test.js
-import { mount } from '@vue/test-utils'
-import UserCard from '~/components/UserCard.vue'
-
-describe('UserCard', () => {
-  const mockUser = {
-    id: '1',
-    name: 'John Doe',
-    email: 'john@example.com'
-  }
-  
-  it('renders user information correctly', () => {
-    const wrapper = mount(UserCard, {
-      props: { user: mockUser }
-    })
-    
-    expect(wrapper.text()).toContain('John Doe')
-    expect(wrapper.text()).toContain('john@example.com')
-  })
-  
-  it('emits edit event when edit button is clicked', async () => {
-    const wrapper = mount(UserCard, {
-      props: { user: mockUser, showActions: true }
-    })
-    
-    await wrapper.find('[data-test="edit-button"]').trigger('click')
-    
-    expect(wrapper.emitted('edit')).toBeTruthy()
-    expect(wrapper.emitted('edit')[0]).toEqual([mockUser])
-  })
-})
-```
-
-## Ethical Guidelines and Security Considerations
-
-### Security Best Practices:
-- **Input Validation**: Always validate and sanitize user inputs
-- **SQL Injection Prevention**: Use Prisma ORM parameterized queries
-- **XSS Prevention**: Use Vue's built-in template sanitization
-- **CSRF Protection**: Implement CSRF tokens for state-changing operations
-- **Authentication**: Use secure JWT implementation with proper expiration
-- **Authorization**: Implement role-based access control (RBAC)
-
-### Ethical Considerations:
-- **Accessibility**: Follow WCAG 2.1 guidelines for component generation
-- **Privacy**: Implement data protection and GDPR compliance patterns
-- **Bias Prevention**: Ensure generated content is inclusive and unbiased
-- **Performance**: Generate efficient code that doesn't compromise user experience
-
-### Data Handling:
-- **Encryption**: Use encryption for sensitive data storage
-- **Logging**: Log security events without exposing sensitive information
-- **Audit Trail**: Maintain audit logs for critical operations
-- **Data Retention**: Implement proper data retention and deletion policies
-
-## Performance Guidelines
-
-### Code Generation Best Practices:
-- **Lazy Loading**: Use dynamic imports for large components
-- **Tree Shaking**: Write code that supports tree shaking
-- **Bundle Size**: Consider bundle size impact in generated code
-- **Caching**: Implement appropriate caching strategies
-- **Database Queries**: Use efficient Prisma queries with proper relations
-
-### Optimization Patterns:
-```javascript
-// Lazy component loading
-const LazyComponent = defineAsyncComponent(() => import('~/components/HeavyComponent.vue'))
-
-// Efficient data fetching
-const { data, pending, error } = await useLazyFetch('/api/data', {
-  key: 'unique-key',
-  server: false // Client-side only if needed
-})
-
-// Computed optimization
-const expensiveComputation = computed(() => {
-  return useMemo(() => heavyOperation(props.data), [props.data])
-})
-```
-
----
-
-This document serves as a comprehensive guide for LLMs working with the corradAF framework. It ensures consistent code generation, proper architecture patterns, and adherence to best practices for security, performance, and maintainability. 

navigation/index.js

@@ -1,88 +1,22 @@
 export default [
   {
-    "header": "Utama",
+    header: "Utama",
-    "description": "",
+    description: "",
-    "child": [
+    child: [
       {
-        "title": "Dashboard",
+        title: "Dashboard",
-        "path": "/dashboard",
+        path: "/dashboard",
-        "icon": "ic:outline-dashboard",
+        icon: "ic:outline-dashboard",
-        "child": [],
+        child: [],
-        "meta": {}
+        meta: {},
-      }
+      },
+      {
+        title: "Queue Dashboard",
+        icon: "mdi:view-dashboard",
+        path: "/admin",
+        child: [],
+      },
     ],
-    "meta": {}
+    meta: {},
   },
-  {
+];
-    "header": "Pentadbiran",
-    "description": "Urus aplikasi anda",
-    "child": [
-      {
-        "title": "Konfigurasi",
-        "icon": "ic:outline-settings",
-        "child": [
-          {
-            "title": "Persekitaran",
-            "path": "/devtool/config/environment"
-          },
-          {
-            "title": "Site Settings",
-            "path": "/devtool/config/site-settings"
-          }
-        ]
-      },
-      {
-        "title": "Penyunting Menu",
-        "icon": "ci:menu-alt-03",
-        "path": "/devtool/menu-editor",
-        "child": []
-      },
-      {
-        "title": "Urus Pengguna",
-        "path": "/devtool/user-management",
-        "icon": "ph:user-circle-gear",
-        "child": [
-          {
-            "title": "Senarai Pengguna",
-            "path": "/devtool/user-management/user",
-            "icon": "",
-            "child": []
-          },
-          {
-            "title": "Senarai Peranan",
-            "path": "/devtool/user-management/role",
-            "icon": "",
-            "child": []
-          }
-        ]
-      },
-      {
-        "title": "Kandungan",
-        "icon": "mdi:pencil-ruler",
-        "child": [
-          {
-            "title": "Penyunting",
-            "path": "/devtool/content-editor"
-          },
-          {
-            "title": "Templat",
-            "path": "/devtool/content-editor/template"
-          }
-        ]
-      },
-      {
-        "title": "Penyunting API",
-        "path": "/devtool/api-editor",
-        "icon": "material-symbols:api-rounded",
-        "child": []
-      }
-    ],
-    "meta": {
-      "auth": {
-        "role": [
-          "Developer"
-        ]
-      }
-    }
-  }
-]

package.json

@@ -1,29 +1,4 @@
 {
-  "name": "corrad-af",
-  "version": "1.0.0",
-  "description": "Corrad Application Framework - A comprehensive Nuxt.js template for rapid application development",
-  "author": "Corrad Team",
-  "license": "MIT",
-  "keywords": [
-    "nuxt",
-    "vue",
-    "typescript",
-    "tailwindcss",
-    "template",
-    "framework",
-    "development-tools",
-    "admin-panel",
-    "cms",
-    "authentication"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://git.sena.my/corrad-software/corrad-af-2024.git"
-  },
-  "bugs": {
-    "url": "https://git.sena.my/corrad-software/corrad-af-2024/issues"
-  },
-  "homepage": "https://git.sena.my/corrad-software/corrad-af-2024",
   "private": true,
   "scripts": {
     "build": "nuxt build",
@@ -31,8 +6,7 @@
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
-    "prisma": "yarn prisma:generate && nuxt dev",
+    "prisma": "npx prisma db pull && npx prisma generate && nuxt dev"
-    "prisma:generate": "npx prisma db pull && npx prisma generate"
   },
   "devDependencies": {
     "@nuxtjs/tailwindcss": "^6.8.0",

pages/admin/index.vue

@@ -0,0 +1,921 @@
+<script setup>
+import { ref, onMounted, computed, watch } from 'vue';
+import { useToast } from 'vue-toastification';
+import JobDetailModal from '@/components/JobDetailModal.vue';
+
+definePageMeta({
+  title: "BullMQ Dashboard",
+  middleware: ["auth"],
+  requiresAuth: true,
+  breadcrumb: [
+    {
+      name: "admin",
+      path: "/",
+    },
+    {
+      name: "BullMQ Dashboard",
+      path: "/admin",
+    }
+  ],
+});
+
+const toast = useToast();
+
+// --- Mock Data Definitions ---
+const dashboardData = ref({
+  totalJobs: 12847 + 25, // Adjusted for new jobs
+  activeJobs: 23, // Will be dynamically updated by queueSpecificData sum later if needed
+  waitingJobs: 156, // Will be dynamically updated
+  completedJobs: 12384, // Will be dynamically updated
+  failedJobs: 284, // Will be dynamically updated
+  successRate: 97.8,
+  avgProcessingTime: "2.3s",
+  throughputPerHour: 1250,
+  queues: ["email-queue", "image-processing", "data-sync", "notifications"]
+});
+
+const baseMockJobs = [
+  {
+    id: "job_001",
+    name: "Send Welcome Email",
+    queue: "email-queue",
+    state: "completed",
+    timestamp: new Date("2025-05-31T10:30:00Z").getTime(),
+    processedOn: new Date("2025-05-31T10:30:02Z").getTime(),
+    finishedOn: new Date("2025-05-31T10:30:05Z").getTime(),
+    duration: 5200,
+    priority: 5,
+    attemptsMade: 1,
+    data: { userId: 12345, template: "welcome" },
+    progress: 100,
+    failedReason: null,
+  },
+  {
+    id: "job_002", 
+    name: "Resize Product Image",
+    queue: "image-processing",
+    state: "active",
+    timestamp: new Date("2025-05-31T11:15:00Z").getTime(),
+    processedOn: new Date("2025-05-31T11:15:02Z").getTime(),
+    finishedOn: null,
+    duration: null,
+    priority: 8,
+    attemptsMade: 1,
+    progress: 65,
+    data: { imageId: "img_product_abc.jpg", sizes: [100, 300, 600] },
+    failedReason: null,
+  },
+  {
+    id: "job_003",
+    name: "Sync User Data",
+    queue: "data-sync", 
+    state: "failed",
+    timestamp: new Date("2025-05-31T09:45:00Z").getTime(),
+    processedOn: new Date("2025-05-31T09:45:03Z").getTime(),
+    finishedOn: new Date("2025-05-31T09:45:10Z").getTime(),
+    duration: 10000,
+    priority: 3,
+    attemptsMade: 3,
+    failedReason: "Database connection timeout. Attempted 3 times.",
+    data: { source: "crm", destination: "analytics_db" },
+    progress: 0,
+  },
+  {
+    id: "job_004",
+    name: "Send Newsletter Batch",
+    queue: "email-queue",
+    state: "waiting",
+    timestamp: new Date("2025-05-31T12:00:00Z").getTime(),
+    processedOn: null,
+    finishedOn: null,
+    duration: null,
+    priority: 2,
+    attemptsMade: 0,
+    data: { campaignId: "newsletter_june", segment: "active_users" },
+    progress: 0,
+    failedReason: null,
+  },
+   {
+    id: "job_005",
+    name: "Generate Sales Report",
+    queue: "notifications",
+    state: "completed",
+    timestamp: new Date("2025-05-30T17:00:00Z").getTime(),
+    processedOn: new Date("2025-05-30T17:00:05Z").getTime(),
+    finishedOn: new Date("2025-05-30T17:05:00Z").getTime(),
+    duration: 300000,
+    priority: 1,
+    attemptsMade: 1,
+    data: { period: "2025-Q2", type: "executive_summary" },
+    progress: 100,
+    failedReason: null,
+  }
+];
+
+// Generate more jobs for email-queue
+const additionalEmailJobs = [];
+const jobStates = ["completed", "waiting", "active", "failed"];
+const emailJobNames = [
+  "Password Reset Request", 
+  "Subscription Confirmation", 
+  "Order Shipped Notification", 
+  "Feature Update Announcement", 
+  "Daily Digest Email"
+];
+
+for (let i = 0; i < 25; i++) {
+  const jobState = jobStates[i % jobStates.length];
+  const jobName = emailJobNames[i % emailJobNames.length];
+  const now = new Date().getTime();
+  const randomPastTime = now - Math.floor(Math.random() * 1000 * 60 * 60 * 24 * 5); // Within last 5 days
+  const randomFutureTime = now + Math.floor(Math.random() * 1000 * 60 * 60 * 24 * 2); // Within next 2 days
+
+  let timestamp, processedOn = null, finishedOn = null, progress = 0, failedReason = null, duration = null;
+  const priority = Math.floor(Math.random() * 10) + 1;
+
+  switch (jobState) {
+    case "completed":
+      timestamp = randomPastTime - 120000; // Created 2 mins before processing
+      processedOn = randomPastTime - 60000; // Processed 1 min before finishing
+      finishedOn = randomPastTime;
+      progress = 100;
+      duration = (finishedOn - processedOn) + Math.floor(Math.random() * 1000);
+      break;
+    case "active":
+      timestamp = randomPastTime;
+      processedOn = new Date().getTime(); // Started now or recently
+      progress = Math.floor(Math.random() * 80) + 10; // 10-90%
+      break;
+    case "waiting":
+      timestamp = (i % 5 === 0 && priority <=3) ? randomFutureTime : randomPastTime; // High prio waiting jobs can be scheduled for future
+      break;
+    case "failed":
+      timestamp = randomPastTime - 120000;
+      processedOn = randomPastTime - 60000;
+      finishedOn = randomPastTime;
+      failedReason = "SMTP server unreachable after 2 attempts.";
+      duration = (finishedOn - processedOn) + Math.floor(Math.random() * 500);
+      break;
+  }
+
+  additionalEmailJobs.push({
+    id: `job_email_${String(i + 1).padStart(3, '0')}`,
+    name: `${jobName} #${i + 1}`,
+    queue: "email-queue",
+    state: jobState,
+    timestamp: timestamp,
+    processedOn: processedOn,
+    finishedOn: finishedOn,
+    duration: duration,
+    priority: priority,
+    attemptsMade: jobState === 'failed' ? 2 : (jobState === 'completed' || jobState === 'active' ? 1 : 0),
+    data: { recipient: `user${i + 1}@example.com`, subject: jobName },
+    progress: progress,
+    failedReason: failedReason,
+  });
+}
+
+const mockJobs = ref([...baseMockJobs, ...additionalEmailJobs]);
+
+// Re-calculate sums for dashboardData based on the full mockJobs list
+dashboardData.value.totalJobs = mockJobs.value.length;
+dashboardData.value.activeJobs = mockJobs.value.filter(j => j.state === 'active').length;
+dashboardData.value.waitingJobs = mockJobs.value.filter(j => j.state === 'waiting').length;
+dashboardData.value.completedJobs = mockJobs.value.filter(j => j.state === 'completed').length;
+dashboardData.value.failedJobs = mockJobs.value.filter(j => j.state === 'failed').length;
+
+
+const queueSpecificData = ref([ 
+  {
+    name: "email-queue",
+    status: "active",
+    workers: 5,
+    concurrency: 10,
+    metrics: { // Metrics are now calculated from the final mockJobs list
+        processed: mockJobs.value.filter(j => j.queue === 'email-queue' && j.state === 'completed').length,
+        failed: mockJobs.value.filter(j => j.queue === 'email-queue' && j.state === 'failed').length,
+        waiting: mockJobs.value.filter(j => j.queue === 'email-queue' && j.state === 'waiting').length,
+        active: mockJobs.value.filter(j => j.queue === 'email-queue' && j.state === 'active').length,
+    },
+    paused: false,
+    processingRate: "150 jobs/min"
+  },
+  {
+    name: "image-processing",
+    status: "active", 
+    workers: 3,
+    concurrency: 5,
+    metrics: {
+        processed: mockJobs.value.filter(j => j.queue === 'image-processing' && j.state === 'completed').length,
+        failed: mockJobs.value.filter(j => j.queue === 'image-processing' && j.state === 'failed').length,
+        waiting: mockJobs.value.filter(j => j.queue === 'image-processing' && j.state === 'waiting').length,
+        active: mockJobs.value.filter(j => j.queue === 'image-processing' && j.state === 'active').length,
+    },
+    paused: false,
+    processingRate: "45 jobs/min"
+  },
+  {
+    name: "data-sync",
+    status: "paused",
+    workers: 2,
+    concurrency: 2,
+     metrics: {
+        processed: mockJobs.value.filter(j => j.queue === 'data-sync' && j.state === 'completed').length,
+        failed: mockJobs.value.filter(j => j.queue === 'data-sync' && j.state === 'failed').length,
+        waiting: mockJobs.value.filter(j => j.queue === 'data-sync' && j.state === 'waiting').length,
+        active: mockJobs.value.filter(j => j.queue === 'data-sync' && j.state === 'active').length,
+    },
+    paused: true,
+    processingRate: "25 jobs/min"
+  },
+    {
+    name: "notifications",
+    status: "active", 
+    workers: 4,
+    concurrency: 8,
+    metrics: {
+        processed: mockJobs.value.filter(j => j.queue === 'notifications' && j.state === 'completed').length,
+        failed: mockJobs.value.filter(j => j.queue === 'notifications' && j.state === 'failed').length,
+        waiting: mockJobs.value.filter(j => j.queue === 'notifications' && j.state === 'waiting').length,
+        active: mockJobs.value.filter(j => j.queue === 'notifications' && j.state === 'active').length,
+    },
+    paused: false,
+    processingRate: "100 jobs/min"
+  }
+]);
+// --- End of Mock Data Definitions ---
+
+const jobs = ref(mockJobs.value); // This should now use the expanded mockJobs
+const error = ref(null);
+const isLoading = ref(false);
+
+const selectedQueueName = ref(dashboardData.value.queues[0]); // Default to 'email-queue'
+const availableQueues = ref(dashboardData.value.queues);
+
+const searchQuery = ref('');
+const selectedStatusFilter = ref('all');
+const selectedPriorityGroup = ref('all'); // New filter for priority
+const currentPage = ref(1);
+const itemsPerPage = ref(10);
+const selectedJob = ref(null);
+
+// For Queue Drag and Drop
+const draggedQueueInfo = ref(null); // { queue: Object, originalIndex: Number }
+const dragOverQueueIndex = ref(null); // Index of the queue card being dragged over
+
+// Priority Grouping & Colors
+const priorityGroups = {
+  high: { label: 'High (1-3)', range: [1, 3], colorClass: 'red', badgeClass: 'bg-red-500 text-white', borderClass: 'border-red-500' },
+  medium: { label: 'Medium (4-7)', range: [4, 7], colorClass: 'orange', badgeClass: 'bg-orange-500 text-white', borderClass: 'border-orange-500' },
+  low: { label: 'Low (8+)', range: [8, Infinity], colorClass: 'blue', badgeClass: 'bg-sky-500 text-white', borderClass: 'border-sky-500' },
+};
+
+function getPriorityGroup(priority) {
+  for (const groupKey in priorityGroups) {
+    const group = priorityGroups[groupKey];
+    if (priority >= group.range[0] && priority <= group.range[1]) {
+      return groupKey;
+    }
+  }
+  return 'low'; // Default to low if somehow out of defined ranges (e.g. priority 0 or very high)
+}
+
+const priorityGroupTabs = computed(() => {
+  return [
+    { label: 'All Priorities', value: 'all' },
+    ...Object.keys(priorityGroups).map(key => ({
+      label: priorityGroups[key].label,
+      value: key,
+      badgeClass: priorityGroups[key].badgeClass
+    }))
+  ];
+});
+
+function getJobPriorityClass(priority) {
+  const groupKey = getPriorityGroup(priority);
+  return priorityGroups[groupKey]?.badgeClass || 'bg-gray-400 text-white';
+}
+
+function getJobPriorityBorderClass(priority) {
+  const groupKey = getPriorityGroup(priority);
+  return priorityGroups[groupKey]?.borderClass || 'border-gray-300';
+}
+
+function formatDate(timestamp) {
+  if (!timestamp) return 'N/A';
+  const date = new Date(Number(timestamp));
+  if (isNaN(date.getTime())) return 'Invalid Date';
+  return date.toLocaleString();
+}
+
+function updateJobsDisplay() {
+  isLoading.value = true;
+  setTimeout(() => {
+    let currentJobsToDisplay = []; // Changed variable name for clarity
+    if (selectedQueueName.value && selectedQueueName.value !== 'all') {
+      currentJobsToDisplay = mockJobs.value.filter(job => job.queue === selectedQueueName.value);
+    } else {
+      currentJobsToDisplay = [...mockJobs.value]; // Use a copy for 'All Queues'
+    }
+    // The jobs ref is used by filteredAndSortedJobs, so we don't need to set jobs.value directly here.
+    // Instead, filteredAndSortedJobs will react to changes in mockJobs, selectedQueueName, etc.
+    // However, to ensure reactivity if `jobs` itself is directly used elsewhere (though it shouldn't be if paginatedJobs is the source):
+    jobs.value = [...currentJobsToDisplay]; // This line might be redundant if UI only uses paginatedJobs.
+                                         // For safety and consistency, ensure `filteredAndSortedJobs` is the primary source for `paginatedJobs`.
+    isLoading.value = false;
+    currentPage.value = 1;
+  }, 300);
+}
+
+async function retryJob(jobId) {
+  const job = mockJobs.value.find(j => j.id === jobId);
+  if (job && job.state === 'failed') {
+    job.state = 'waiting';
+    job.attemptsMade = (job.attemptsMade || 0) + 1;
+    job.failedReason = null;
+    toast.success(`Job #${jobId} sent for retry.`);
+    updateJobsDisplay(); // This will refresh the view based on current filters
+  } else {
+    toast.error(`Job #${jobId} not found or cannot be retried.`);
+  }
+}
+
+async function removeJob(jobId) {
+  const index = mockJobs.value.findIndex(j => j.id === jobId);
+  if (index !== -1) {
+    mockJobs.value.splice(index, 1);
+    // Also update dashboardData counts
+    dashboardData.value.totalJobs = mockJobs.value.length;
+    dashboardData.value.activeJobs = mockJobs.value.filter(j => j.state === 'active').length;
+    dashboardData.value.waitingJobs = mockJobs.value.filter(j => j.state === 'waiting').length;
+    dashboardData.value.completedJobs = mockJobs.value.filter(j => j.state === 'completed').length;
+    dashboardData.value.failedJobs = mockJobs.value.filter(j => j.state === 'failed').length;
+    toast.success(`Job #${jobId} removed.`);
+    updateJobsDisplay();
+  } else {
+    toast.error(`Job #${jobId} not found.`);
+  }
+}
+
+async function cleanQueue(queueName) {
+  const qData = queueSpecificData.value.find(q => q.name === queueName);
+  if (!qData) {
+    toast.error(`Queue ${queueName} not found.`);
+    return;
+  }
+  const initialJobCount = mockJobs.value.length;
+  mockJobs.value = mockJobs.value.filter(job => 
+    !(job.queue === queueName && (job.state === 'completed' || job.state === 'failed'))
+  );
+  const removedCount = initialJobCount - mockJobs.value.length;
+  if (removedCount > 0) {
+    // Update dashboardData counts
+    dashboardData.value.totalJobs = mockJobs.value.length;
+    dashboardData.value.completedJobs -= mockJobs.value.filter(j => j.queue === queueName && j.state === 'completed').length; // this is tricky, better re-calculate all
+    dashboardData.value.failedJobs -= mockJobs.value.filter(j => j.queue === queueName && j.state === 'failed').length; // same here
+    // Recalculate all global counts for simplicity and accuracy after clean
+    dashboardData.value.activeJobs = mockJobs.value.filter(j => j.state === 'active').length;
+    dashboardData.value.waitingJobs = mockJobs.value.filter(j => j.state === 'waiting').length;
+    dashboardData.value.completedJobs = mockJobs.value.filter(j => j.state === 'completed').length;
+    dashboardData.value.failedJobs = mockJobs.value.filter(j => j.state === 'failed').length;
+
+    toast.success(`Cleaned ${removedCount} completed/failed jobs from ${queueName}.`);
+  } else {
+    toast.info(`No completed or failed jobs to clean from ${queueName}.`);
+  }
+  updateJobsDisplay();
+}
+
+async function pauseQueue(queueName) {
+  const qData = queueSpecificData.value.find(q => q.name === queueName);
+  if (qData) {
+    if(qData.status === 'paused'){
+      toast.info(`Queue ${queueName} is already paused.`);
+      return;
+    }
+    qData.status = 'paused';
+    qData.paused = true;
+    toast.success(`Queue ${queueName} paused.`);
+  } else {
+    toast.error(`Queue ${queueName} not found.`);
+  }
+}
+
+async function resumeQueue(queueName) {
+  const qData = queueSpecificData.value.find(q => q.name === queueName);
+  if (qData) {
+    if(qData.status === 'active'){
+      toast.info(`Queue ${queueName} is already active/resumed.`);
+      return;
+    }
+    qData.status = 'active';
+    qData.paused = false;
+    toast.success(`Queue ${queueName} resumed.`);
+  } else {
+    toast.error(`Queue ${queueName} not found.`);
+  }
+}
+
+// Drag and Drop Handlers for Queues
+function onQueueDragStart(event, queue, index) {
+  draggedQueueInfo.value = { queue: { ...queue }, originalIndex: index };
+  event.dataTransfer.effectAllowed = 'move';
+  event.dataTransfer.setData('text/plain', queue.name); // Necessary for Firefox
+  // Optional: Add a class to the dragged element for styling
+  event.target.classList.add('dragging-queue');
+}
+
+function onQueueDragOver(event, targetIndex) {
+  event.preventDefault(); // Necessary to allow dropping
+  dragOverQueueIndex.value = targetIndex;
+  // Optional: Add a class to the drop target for styling
+  // event.target.closest('.queue-card-draggable').classList.add('drag-over-queue');
+}
+
+function onQueueDragLeave(event) {
+  // Optional: Remove drag over styling if not dropping on this element
+  // event.target.closest('.queue-card-draggable').classList.remove('drag-over-queue');
+  if (dragOverQueueIndex.value === Array.from(event.target.closest('.queue-card-draggable').parentElement.children).indexOf(event.target.closest('.queue-card-draggable'))) {
+      dragOverQueueIndex.value = null;
+  }
+}
+
+function onQueueDrop(event, targetIndex) {
+  event.preventDefault();
+  if (!draggedQueueInfo.value || draggedQueueInfo.value.originalIndex === targetIndex) {
+    dragOverQueueIndex.value = null;
+    return; // No drop if nothing is dragged or dropped on itself
+  }
+
+  const { queue: draggedItem, originalIndex } = draggedQueueInfo.value;
+  
+  // Remove the item from its original position
+  queueSpecificData.value.splice(originalIndex, 1);
+  // Insert the item at the new position
+  queueSpecificData.value.splice(targetIndex, 0, draggedItem);
+  
+  toast.info(`Queue '${draggedItem.name}' moved.`);
+  dragOverQueueIndex.value = null;
+  // Clean up classes on drag end
+}
+
+function onQueueDragEnd(event) {
+  // Clean up: remove dragging class and reset refs
+  event.target.classList.remove('dragging-queue');
+  // const cards = document.querySelectorAll('.drag-over-queue');
+  // cards.forEach(card => card.classList.remove('drag-over-queue'));
+  draggedQueueInfo.value = null;
+  dragOverQueueIndex.value = null;
+}
+
+const queueOptions = computed(() => {
+  return [{ label: 'All Queues', value: 'all' }, ...availableQueues.value.map(queue => ({
+    label: queue,
+    value: queue
+  }))];
+});
+
+const jobStatusOptions = computed(() => {
+  const statuses = new Set(['all']);
+  mockJobs.value.forEach(job => statuses.add(job.state));
+  return Array.from(statuses).map(status => ({
+    label: status.charAt(0).toUpperCase() + status.slice(1),
+    value: status
+  }));
+});
+
+const filteredAndSortedJobs = computed(() => {
+  let result = [];
+  if (selectedQueueName.value && selectedQueueName.value !== 'all') {
+    result = mockJobs.value.filter(job => job.queue === selectedQueueName.value);
+  } else {
+    result = [...mockJobs.value];
+  }
+
+  // Filter by priority group
+  if (selectedPriorityGroup.value !== 'all') {
+    const groupInfo = priorityGroups[selectedPriorityGroup.value];
+    if (groupInfo) {
+      result = result.filter(job => job.priority >= groupInfo.range[0] && job.priority <= groupInfo.range[1]);
+    }
+  }
+
+  if (selectedStatusFilter.value !== 'all') {
+    result = result.filter(job => job.state === selectedStatusFilter.value);
+  }
+
+  if (searchQuery.value.trim() !== '') {
+    const lowerSearchQuery = searchQuery.value.toLowerCase().trim();
+    result = result.filter(job => {
+      const jobIdMatch = String(job.id).toLowerCase().includes(lowerSearchQuery);
+      const jobNameMatch = job.name ? job.name.toLowerCase().includes(lowerSearchQuery) : false;
+      const jobDataString = job.data ? JSON.stringify(job.data).toLowerCase() : '';
+      const jobDataMatch = jobDataString.includes(lowerSearchQuery);
+      return jobIdMatch || jobNameMatch || jobDataMatch;
+    });
+  }
+  result.sort((a, b) => Number(b.timestamp) - Number(a.timestamp));
+  return result;
+});
+
+const totalPages = computed(() => {
+  return Math.ceil(filteredAndSortedJobs.value.length / itemsPerPage.value);
+});
+
+const paginatedJobs = computed(() => {
+  const start = (currentPage.value - 1) * itemsPerPage.value;
+  const end = start + itemsPerPage.value;
+  return filteredAndSortedJobs.value.slice(start, end);
+});
+
+watch(selectedQueueName, (newQueue) => {
+  updateJobsDisplay();
+});
+
+watch([searchQuery, selectedStatusFilter, selectedPriorityGroup], () => {
+  currentPage.value = 1;
+});
+
+watch(mockJobs, (newJobs) => {
+    // Update queueSpecificData metrics whenever mockJobs changes
+    queueSpecificData.value.forEach(q => {
+        q.metrics.processed = newJobs.filter(j => j.queue === q.name && j.state === 'completed').length;
+        q.metrics.failed = newJobs.filter(j => j.queue === q.name && j.state === 'failed').length;
+        q.metrics.waiting = newJobs.filter(j => j.queue === q.name && j.state === 'waiting').length;
+        q.metrics.active = newJobs.filter(j => j.queue === q.name && j.state === 'active').length;
+    });
+
+    // Update dashboardData counts
+    dashboardData.value.totalJobs = newJobs.length;
+    dashboardData.value.activeJobs = newJobs.filter(j => j.state === 'active').length;
+    dashboardData.value.waitingJobs = newJobs.filter(j => j.state === 'waiting').length;
+    dashboardData.value.completedJobs = newJobs.filter(j => j.state === 'completed').length;
+    dashboardData.value.failedJobs = newJobs.filter(j => j.state === 'failed').length;
+}, { deep: true });
+
+onMounted(() => {
+  updateJobsDisplay();
+});
+
+</script>
+
+<template>
+  <div class="space-y-8 p-4 md:p-6 lg:p-8">
+    <LayoutsBreadcrumb />
+    
+    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center">
+      <h1 class="text-3xl font-bold text-primary mb-4 sm:mb-0">BullMQ Dashboard</h1>
+      
+      <!-- Global Actions (Placeholder for Add Job, Pause All, etc.) -->
+      <div class="flex items-center space-x-2">
+        <rs-button variant="primary" size="sm">
+          <Icon name="mdi:plus-box-outline" class="mr-1" /> Add Job
+        </rs-button>
+        <rs-button variant="warning" size="sm">
+          <Icon name="mdi:pause-octagon-outline" class="mr-1" /> Pause All Queues
+        </rs-button>
+        <rs-button variant="danger" size="sm">
+          <Icon name="mdi:delete-sweep-outline" class="mr-1" /> Clear All Failed
+        </rs-button>
+      </div>
+    </div>
+
+    <!-- Dashboard Overview Metrics -->
+    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-8">
+      <div class="bg-slate-800 text-white p-4 rounded-lg shadow-lg">
+        <div class="text-sm font-medium text-slate-300">Total Jobs</div>
+        <div class="text-3xl font-bold">{{ dashboardData.totalJobs }}</div>
+      </div>
+      <div class="bg-sky-600 text-white p-4 rounded-lg shadow-lg">
+        <div class="text-sm font-medium text-slate-100">Active</div>
+        <div class="text-3xl font-bold">{{ dashboardData.activeJobs }}</div>
+      </div>
+      <div class="bg-amber-500 text-white p-4 rounded-lg shadow-lg">
+        <div class="text-sm font-medium text-slate-100">Waiting</div>
+        <div class="text-3xl font-bold">{{ dashboardData.waitingJobs }}</div>
+      </div>
+      <div class="bg-green-600 text-white p-4 rounded-lg shadow-lg">
+        <div class="text-sm font-medium text-slate-100">Completed</div>
+        <div class="text-3xl font-bold">{{ dashboardData.completedJobs }}</div>
+      </div>
+      <div class="bg-red-600 text-white p-4 rounded-lg shadow-lg">
+        <div class="text-sm font-medium text-slate-100">Failed</div>
+        <div class="text-3xl font-bold">{{ dashboardData.failedJobs }}</div>
+      </div>
+       <div class="bg-indigo-600 text-white p-4 rounded-lg shadow-lg">
+        <div class="text-sm font-medium text-slate-100">Success Rate</div>
+        <div class="text-3xl font-bold">{{ dashboardData.successRate }}%</div>
+      </div>
+    </div>
+
+    <!-- Queue Management Cards -->
+    <div class="mb-8">
+      <h2 class="text-2xl font-semibold text-gray-800 mb-4">Queue Overview</h2>
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <rs-card v-for="(q, index) in queueSpecificData" :key="q.name" 
+                 :class="{
+                   'border-blue-500': q.status === 'active',
+                   'border-orange-400': q.status === 'paused',
+                   'queue-drop-target-active': dragOverQueueIndex === index && draggedQueueInfo && draggedQueueInfo.originalIndex !== index
+                 }"
+                 class="border-t-4 shadow-lg hover:shadow-xl transition-all duration-200 ease-in-out queue-card-draggable cursor-grab"
+                 draggable="true"
+                 @dragstart="onQueueDragStart($event, q, index)"
+                 @dragover.prevent="onQueueDragOver($event, index)"
+                 @dragleave="onQueueDragLeave($event)"
+                 @drop="onQueueDrop($event, index)"
+                 @dragend="onQueueDragEnd($event)"
+        >
+          <template #header>
+            <div class="flex justify-between items-center px-4 py-3">
+              <h3 class="text-lg font-semibold text-gray-700">{{ q.name }}</h3>
+              <rs-badge :variant="q.status === 'active' ? 'success' : 'warning'">{{ q.status }}</rs-badge>
+            </div>
+          </template>
+          <template #body>
+            <div class="p-4 space-y-3">
+              <div class="grid grid-cols-2 gap-2 text-sm">
+                <div><span class="text-gray-500">Active:</span> <strong class="text-gray-800">{{ q.metrics.active }}</strong></div>
+                <div><span class="text-gray-500">Waiting:</span> <strong class="text-gray-800">{{ q.metrics.waiting }}</strong></div>
+                <div><span class="text-gray-500">Completed:</span> <strong class="text-green-600">{{ q.metrics.processed }}</strong></div>
+                <div><span class="text-gray-500">Failed:</span> <strong class="text-red-600">{{ q.metrics.failed }}</strong></div>
+              </div>
+              <div class="text-xs text-gray-500">
+                  Workers: {{q.workers}} | Concurrency: {{q.concurrency}} | Rate: {{q.processingRate}}
+              </div>
+            </div>
+          </template>
+          <template #footer>
+            <div class="px-4 py-2 border-t bg-gray-50 flex justify-end space-x-2">
+              <rs-button size="xs" :variant="q.status === 'active' ? 'warning' : 'success'" 
+                         @click="q.status === 'active' ? pauseQueue(q.name) : resumeQueue(q.name)">
+                <Icon :name="q.status === 'active' ? 'mdi:pause' : 'mdi:play'" size="16" class="mr-1" />
+                {{ q.status === 'active' ? 'Pause' : 'Resume' }}
+              </rs-button>
+              <rs-button size="xs" variant="danger" @click="cleanQueue(q.name)">
+                <Icon name="mdi:broom" size="16" class="mr-1" /> Clean
+              </rs-button>
+            </div>
+          </template>
+        </rs-card>
+      </div>
+    </div>
+
+    <!-- Filter and Job List Section -->
+    <div class="flex justify-between items-center mb-4">
+        <h2 class="text-2xl font-semibold text-gray-800">Job Management</h2>
+         <div class="flex items-center space-x-4">
+            <div class="w-72">
+              <rs-select v-model="selectedQueueName" 
+                        :options="queueOptions"
+                        placeholder="Select Queue to View Jobs"
+                        :disabled="isLoading || !!error" />
+            </div>
+         </div>
+    </div>
+
+    <!-- Priority Group Tabs -->
+    <div class="mb-4 border-b border-gray-200">
+        <nav class="-mb-px flex space-x-4" aria-label="Tabs">
+            <button v-for="tab in priorityGroupTabs" :key="tab.value"
+                    @click="selectedPriorityGroup = tab.value"
+                    :class="[
+                        tab.value === selectedPriorityGroup 
+                            ? (priorityGroups[tab.value]?.borderClass ? priorityGroups[tab.value].borderClass.replace('border-', 'border-b-2 border-') + ' text-' + priorityGroups[tab.value].colorClass + '-600' : 'border-b-2 border-indigo-500 text-indigo-600') 
+                            : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
+                        'whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm focus:outline-none transition-colors duration-150 ease-in-out'
+                    ]"
+                    :aria-current="tab.value === selectedPriorityGroup ? 'page' : undefined">
+                {{ tab.label }}
+            </button>
+        </nav>
+    </div>
+
+    <rs-card v-if="selectedQueueName"> 
+      <template #header>
+        <div class="px-4 py-3 border-b">
+          <div class="flex flex-col md:flex-row justify-between md:items-center mb-3">
+            <h3 class="text-xl font-semibold text-gray-700 mb-2 md:mb-0">
+              Jobs in <span class="text-primary">{{ selectedQueueName === 'all' ? 'All Queues' : selectedQueueName }}</span>
+              <span v-if="selectedPriorityGroup !== 'all'" class="text-sm font-normal text-gray-500 ml-2">
+                (Priority: {{ priorityGroups[selectedPriorityGroup]?.label }})
+              </span>
+            </h3>
+            <div class="flex items-center space-x-2" v-if="selectedQueueName !== 'all'">
+              <rs-button variant="success" size="sm" 
+                        @click="resumeQueue(selectedQueueName)" 
+                        :disabled="isLoading || !!error || queueSpecificData.find(q=>q.name === selectedQueueName)?.status === 'active'">
+                <Icon name="mdi:play" size="18" class="mr-1" /> Resume Queue
+              </rs-button>
+              <rs-button variant="warning" size="sm" 
+                        @click="pauseQueue(selectedQueueName)" 
+                        :disabled="isLoading || !!error || queueSpecificData.find(q=>q.name === selectedQueueName)?.status === 'paused'">
+                <Icon name="mdi:pause" size="18" class="mr-1" /> Pause Queue
+              </rs-button>
+              <rs-button variant="danger" size="sm" 
+                        @click="cleanQueue(selectedQueueName)" 
+                        :disabled="isLoading || !!error">
+                <Icon name="mdi:broom" size="18" class="mr-1" /> Clean Queue
+              </rs-button>
+            </div>
+          </div>
+          <div class="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-4">
+            <div class="flex-grow w-full md:w-auto">
+               <rs-input type="text" v-model="searchQuery" placeholder="Search Jobs by ID, Name, or Data..." class="w-full" />
+            </div>
+            <div class="w-full md:w-48">
+              <rs-select v-model="selectedStatusFilter"
+                        :options="jobStatusOptions"
+                        placeholder="Filter by Status"
+                        :disabled="isLoading || !!error || paginatedJobs.length === 0 && filteredAndSortedJobs.length === 0" />
+            </div>
+            <rs-button variant="secondary" size="sm" 
+                      @click="updateJobsDisplay" 
+                      :disabled="isLoading || !!error" 
+                      class="w-full md:w-auto">
+              <Icon name="mdi:refresh" size="18" 
+                    :class="{ 'animate-spin': isLoading }" 
+                    class="mr-1" />
+              {{ isLoading ? 'Refreshing...' : 'Refresh Jobs' }}
+            </rs-button>
+          </div>
+        </div>
+      </template>
+
+      <template #body>
+        <div class="p-4">
+          <div v-if="isLoading" class="text-center py-8">
+            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
+            <p class="mt-2 text-gray-500">Loading jobs...</p>
+          </div>
+          <div v-else-if="error" class="bg-red-50 border-l-4 border-red-500 p-4 rounded">
+            <div class="flex">
+              <div class="flex-shrink-0">
+                <Icon name="mdi:alert-circle-outline" class="h-5 w-5 text-red-400" />
+              </div>
+              <div class="ml-3">
+                <p class="text-sm text-red-700">{{ error }}</p>
+              </div>
+            </div>
+          </div>
+          <div v-else-if="paginatedJobs.length > 0" class="space-y-4">
+            <div v-for="job in paginatedJobs" :key="job.id" 
+                 class="bg-white p-4 rounded-lg shadow hover:shadow-lg transition-all duration-200 ease-in-out cursor-pointer border-l-4 flex flex-col"
+                 :class="getJobPriorityBorderClass(job.priority)"
+                 @click="selectedJob = job">
+              <div class="flex flex-col sm:flex-row justify-between items-start flex-grow">
+                <div class="mb-2 sm:mb-0 flex-grow">
+                  <div class="flex items-center space-x-2 mb-1">
+                    <span class="font-semibold text-primary hover:underline">#{{ job.id }}</span>
+                    <span class="text-md font-medium text-gray-700">- {{ job.name }}</span>
+                    <rs-badge 
+                      :variant="job.state === 'completed' ? 'success' : 
+                               job.state === 'failed' ? 'danger' :
+                               job.state === 'active' ? 'primary' : 'info'" 
+                               class="text-xs"
+                    >
+                      {{ job.state }}
+                    </rs-badge>
+                  </div>
+                  <p class="text-xs text-gray-500">
+                    Queue: <span class="font-medium">{{job.queue}}</span> 
+                    | Priority: <span :class="getJobPriorityClass(job.priority)" class="px-1.5 py-0.5 rounded-full text-xs font-semibold">{{job.priority}}</span>
+                  </p>
+                  <p class="text-xs text-gray-500 mt-0.5">
+                    Created: {{ formatDate(job.timestamp) }}
+                    <span v-if="job.processedOn">| Started: {{ formatDate(job.processedOn) }}</span>
+                    <span v-if="job.finishedOn">| Finished: {{ formatDate(job.finishedOn) }}</span>
+                    <span v-if="job.duration">| Duration: {{(job.duration / 1000).toFixed(1)}}s</span>
+                  </p>
+                </div>
+                
+                <div class="flex space-x-2 mt-2 sm:mt-0 self-start sm:self-center flex-shrink-0">
+                  <rs-button v-if="job.state === 'failed'" 
+                            variant="warning" size="xs" 
+                            @click.stop="retryJob(job.id)" 
+                            :disabled="isLoading || !!error">
+                    <Icon name="mdi:refresh" size="14" class="mr-1" /> Retry
+                  </rs-button>
+                  <rs-button variant="danger" size="xs" 
+                            @click.stop="removeJob(job.id)" 
+                            :disabled="isLoading || !!error">
+                    <Icon name="mdi:delete-outline" size="14" class="mr-1" /> Remove
+                  </rs-button>
+                </div>
+              </div>
+
+              <div v-if="job.state === 'active' && job.progress > 0" class="mt-3 border-t border-gray-100 pt-2">
+                <div class="flex justify-between text-xs text-gray-600 mb-1">
+                    <span>Progress: {{ job.progress }}%</span>
+                    <span>Attempts: {{ job.attemptsMade }}</span>
+                </div>
+                <div class="w-full bg-gray-200 rounded-full h-1.5">
+                  <div class="bg-blue-600 h-1.5 rounded-full" 
+                       :style="{ width: job.progress + '%' }">
+                  </div>
+                </div>
+              </div>
+              
+              <div v-if="job.state === 'failed' && job.failedReason" 
+                   class="mt-3 p-2 bg-red-50 border-l-4 border-red-400 rounded text-xs text-red-700 whitespace-pre-wrap">
+                <strong>Error:</strong> {{ job.failedReason }}
+              </div>
+
+              <div v-if="job.data && Object.keys(job.data).length > 0" class="mt-2 pt-2 border-t border-gray-100">
+                <details class="text-xs">
+                    <summary class="cursor-pointer text-gray-500 hover:text-gray-700">View Data</summary>
+                    <pre class="mt-1 p-2 bg-gray-50 rounded text-gray-600 text-[11px] max-h-32 overflow-auto">{{ JSON.stringify(job.data, null, 2) }}</pre>
+                </details>
+              </div>
+            </div>
+          </div>
+          <div v-else-if="filteredAndSortedJobs.length === 0 && jobs.length > 0 && (searchQuery || selectedStatusFilter !== 'all' || selectedPriorityGroup !== 'all')" class="text-center py-10">
+            <Icon name="mdi:filter-variant-remove" size="48" class="text-gray-400 mx-auto mb-2" />
+            <p class="text-gray-500">No jobs match your current filters in <strong class="text-gray-700">{{selectedQueueName === 'all' ? 'any queue' : selectedQueueName}}</strong>.</p>
+            <p class="text-sm text-gray-400 mt-1">Try adjusting your search or filters.</p>
+          </div>
+          <div v-else class="text-center py-10">
+            <Icon name="mdi:playlist-remove" size="48" class="text-gray-400 mx-auto mb-2" />
+            <p class="text-gray-500">No jobs found in <strong class="text-gray-700">{{selectedQueueName === 'all' ? 'any queue' : selectedQueueName}}</strong>.</p>
+            <p v-if="selectedQueueName !== 'all'" class="text-sm text-gray-400 mt-1">This queue is currently empty.</p>
+          </div>
+        </div>
+      </template>
+      <template #footer v-if="totalPages > 1">
+        <div class="px-4 py-3 border-t bg-gray-50 flex flex-col sm:flex-row justify-between items-center space-y-2 sm:space-y-0">
+          <div class="text-sm text-gray-600">
+            Showing {{ paginatedJobs.length }} of {{ filteredAndSortedJobs.length }} jobs (Page {{ currentPage }} of {{ totalPages }})
+          </div>
+          <div class="flex space-x-1">
+            <rs-button size="xs" variant="secondary" :disabled="currentPage <= 1" @click="currentPage = 1">
+                <Icon name="mdi:page-first" size="16" />
+            </rs-button>
+            <rs-button size="xs" variant="secondary" :disabled="currentPage <= 1" @click="currentPage--">
+              <Icon name="mdi:chevron-left" size="16" /> Previous
+            </rs-button>
+            <rs-button size="xs" variant="secondary" :disabled="currentPage >= totalPages" @click="currentPage++">
+              Next <Icon name="mdi:chevron-right" size="16" />
+            </rs-button>
+             <rs-button size="xs" variant="secondary" :disabled="currentPage >= totalPages" @click="currentPage = totalPages">
+                <Icon name="mdi:page-last" size="16" />
+            </rs-button>
+          </div>
+        </div>
+      </template>
+    </rs-card>
+
+    <div v-else-if="!selectedQueueName && !isLoading" class="text-center py-12">
+      <Icon name="mdi:information-outline" size="48" class="text-gray-400 mx-auto mb-2" />
+      <p class="text-gray-500">Please select a queue from the dropdown above to view its jobs.</p>
+    </div>
+
+    <JobDetailModal v-if="selectedJob" :job="selectedJob" :show="!!selectedJob" @close="selectedJob = null" />
+
+  </div>
+</template>
+
+<style scoped>
+/* Add any page-specific styles if needed - Tailwind should cover most */
+.text-primary {
+  color: #3B82F6; /* Example primary color from your design spec */
+}
+
+/* Custom scrollbar for pre tag if needed */
+pre::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+pre::-webkit-scrollbar-thumb {
+  background: #cbd5e1; /* cool-gray-300 */
+  border-radius: 3px;
+}
+pre::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8; /* cool-gray-400 */
+}
+
+.dragging-queue {
+  opacity: 0.5;
+  border: 2px dashed #3B82F6; /* primary color for border */
+  transform: scale(0.95);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
+}
+
+.queue-drop-target-active {
+  /* Basic style for when an item is dragged over a potential drop target */
+  outline: 2px dashed #10B981; /* success color */
+  outline-offset: 2px;
+  background-color: #f0fdf4; /* Light green background, Tailwind green-50 */
+  transform: scale(1.02); /* Slightly enlarge the drop target */
+  transition: transform 0.2s ease-out, background-color 0.2s ease-out; 
+}
+
+/* Enhanced styling for the specific drop target queue card */
+.queue-card-draggable.queue-drop-target-active {
+    border-color: #10B981 !important; /* Ensure border color overrides others */
+}
+
+.queue-card-draggable {
+  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+
+</style> 

pages/dashboard/index.vue

@@ -11,305 +11,328 @@ definePageMeta({
   ],
 });
 
-// Framework information
+// Data baru untuk lapangan terbang teratas
-const frameworkInfo = ref({
+const topAirports = ref([
-  name: "corradAF",
+  {
-  version: "1.0.0",
+    rank: 1,
-  description: "Corrad Application Framework - A comprehensive Nuxt.js template for rapid application development",
+    name: "Lapangan Terbang Antarabangsa Kuala Lumpur (KLIA)",
-  features: [
+    visitors: 62000000,
-    "Authentication System",
+  },
-    "User Management",
+  {
-    "Role-based Access Control", 
+    rank: 2,
-    "Development Tools Suite",
+    name: "Lapangan Terbang Antarabangsa Kota Kinabalu",
-    "API Management",
+    visitors: 9000000,
-    "Menu Configuration",
+  },
-    "Content Management",
+  { rank: 3, name: "Lapangan Terbang Antarabangsa Penang", visitors: 8000000 },
-    "Code Playground",
+  { rank: 4, name: "Lapangan Terbang Antarabangsa Kuching", visitors: 5500000 },
-    "ORM Integration",
+  {
-    "Responsive Design"
+    rank: 5,
-  ]
+    name: "Lapangan Terbang Antarabangsa Langkawi",
+    visitors: 3000000,
+  },
+]);
+
+// Data baru untuk kad ringkasan pantas
+const quickSummary = ref([
+  { title: "Jumlah Pelawat", value: "10.5 Juta", icon: "ic:outline-people" },
+  {
+    title: "Pendapatan Pelancongan",
+    value: "RM 86.14 Bilion",
+    icon: "ic:outline-attach-money",
+  },
+  {
+    title: "Tempoh Penginapan Purata",
+    value: "6.1 Hari",
+    icon: "ic:outline-hotel",
+  },
+  {
+    title: "Kepuasan Pelancong",
+    value: "92%",
+    icon: "ic:outline-sentiment-satisfied",
+  },
+]);
+
+// Data Pelawat Malaysia
+const visitorData = ref([
+  {
+    name: "Pelawat Tempatan",
+    data: [5000000, 5500000, 6000000, 6500000, 7000000, 7500000],
+  },
+  {
+    name: "Pelawat Asing",
+    data: [3000000, 3500000, 4000000, 4500000, 5000000, 5500000],
+  },
+]);
+
+// Data Pelawat Asing mengikut Negeri
+const foreignVisitorsByState = ref([
+  { state: "Selangor", visitors: 1500000 },
+  { state: "Pulau Pinang", visitors: 1200000 },
+  { state: "Johor", visitors: 1000000 },
+  { state: "Sabah", visitors: 800000 },
+  { state: "Sarawak", visitors: 600000 },
+  { state: "Melaka", visitors: 500000 },
+  { state: "Kedah", visitors: 400000 },
+  { state: "Negeri Sembilan", visitors: 300000 },
+  { state: "Perak", visitors: 250000 },
+  { state: "Terengganu", visitors: 200000 },
+  { state: "Kelantan", visitors: 150000 },
+  { state: "Pahang", visitors: 100000 },
+  { state: "Perlis", visitors: 50000 },
+]);
+
+// Lapangan Terbang Keberangkatan Teratas
+const departureData = ref([
+  { airport: "JFK", departures: 1500 },
+  { airport: "LHR", departures: 1200 },
+  { airport: "CDG", departures: 1000 },
+  { airport: "DXB", departures: 800 },
+  { airport: "SIN", departures: 600 },
+]);
+
+// Data Pelancong Berulang
+const repeatVisitorsData = ref([
+  { category: "1-2 kali", percentage: 45 },
+  { category: "3-5 kali", percentage: 30 },
+  { category: "6-10 kali", percentage: 15 },
+  { category: ">10 kali", percentage: 10 },
+]);
+
+// Data Negara Asal Pelancong Asing Teratas
+const topVisitorCountries = ref([
+  { country: "Singapura", visitors: 1500000 },
+  { country: "Indonesia", visitors: 1200000 },
+  { country: "China", visitors: 1000000 },
+  { country: "Thailand", visitors: 800000 },
+  { country: "India", visitors: 600000 },
+]);
+
+const chartOptionsVisitors = computed(() => ({
+  chart: { height: 350, type: "line" },
+  stroke: { curve: "smooth", width: 2 },
+  xaxis: { categories: ["2018", "2019", "2020", "2021", "2022", "2023"] },
+  yaxis: { title: { text: "Bilangan Pelawat" } },
+}));
+
+const chartOptionsForeignVisitors = computed(() => ({
+  chart: { type: "bar" },
+  plotOptions: { bar: { horizontal: true } },
+  xaxis: { categories: foreignVisitorsByState.value.map((item) => item.state) },
+}));
+
+const chartOptionsDeparture = computed(() => ({
+  chart: { type: "bar" },
+  plotOptions: { bar: { horizontal: true } },
+  xaxis: { categories: departureData.value.map((item) => item.airport) },
+}));
+
+const chartOptionsRepeatVisitors = computed(() => ({
+  chart: { type: "pie" },
+  labels: repeatVisitorsData.value.map((item) => item.category),
+  responsive: [
+    {
+      breakpoint: 480,
+      options: {
+        chart: {
+          width: 200,
+        },
+        legend: {
+          position: "bottom",
+        },
+      },
+    },
+  ],
+}));
+
+const chartOptionsTopCountries = computed(() => ({
+  chart: { type: "bar" },
+  plotOptions: {
+    bar: { horizontal: false, columnWidth: "55%", endingShape: "rounded" },
+  },
+  dataLabels: { enabled: false },
+  stroke: { show: true, width: 2, colors: ["transparent"] },
+  xaxis: { categories: topVisitorCountries.value.map((item) => item.country) },
+  yaxis: { title: { text: "Bilangan Pelawat" } },
+  fill: { opacity: 1 },
+  tooltip: {
+    y: {
+      formatter: function (val) {
+        return val.toLocaleString() + " pelawat";
+      },
+    },
+  },
+}));
+
+onMounted(() => {
+  // Sebarang logik yang diperlukan semasa pemasangan
 });
-
-// Development tools available
-const devTools = ref([
-  {
-    title: "User Management",
-    description: "Manage users and roles with comprehensive CRUD operations",
-    icon: "mdi:account-group",
-    path: "/devtool/user-management/user",
-    color: "blue"
-  },
-  {
-    title: "Menu Editor",
-    description: "Configure navigation menus and application structure",
-    icon: "mdi:menu",
-    path: "/devtool/menu-editor",
-    color: "green"
-  },
-  {
-    title: "API Editor",
-    description: "Design and test API endpoints with interactive tools",
-    icon: "mdi:api",
-    path: "/devtool/api-editor",
-    color: "purple"
-  },
-  {
-    title: "Content Editor",
-    description: "Manage dynamic content and templates",
-    icon: "mdi:file-document-edit",
-    path: "/devtool/content-editor",
-    color: "orange"
-  },
-  {
-    title: "Code Playground",
-    description: "Test and prototype code snippets in real-time",
-    icon: "mdi:code-braces",
-    path: "/devtool/code-playground",
-    color: "indigo"
-  },
-  {
-    title: "ORM Tools",
-    description: "Database schema management and query tools",
-    icon: "mdi:database",
-    path: "/devtool/orm",
-    color: "red"
-  },
-  {
-    title: "Configuration",
-    description: "System settings and environment configuration",
-    icon: "mdi:cog",
-    path: "/devtool/config",
-    color: "gray"
-  }
-]);
-
-// Quick stats
-const quickStats = ref([
-  { title: "Dev Tools", value: "7", icon: "mdi:tools" },
-  { title: "Components", value: "50+", icon: "mdi:view-grid" },
-  { title: "Auth System", value: "Ready", icon: "mdi:shield-check" },
-  { title: "Framework", value: "Nuxt 3", icon: "mdi:nuxt" }
-]);
-
-// Getting started steps
-const gettingStarted = ref([
-  {
-    step: 1,
-    title: "Clone Repository",
-    description: "Clone this template to start your new project",
-    command: "git clone <repository-url> your-project-name"
-  },
-  {
-    step: 2,
-    title: "Install Dependencies",
-    description: "Install all required packages",
-    command: "yarn install"
-  },
-  {
-    step: 3,
-    title: "Configure Environment",
-    description: "Set up your environment variables and database",
-    command: "cp .env.example .env"
-  },
-  {
-    step: 4,
-    title: "Start Development",
-    description: "Run the development server",
-    command: "yarn dev"
-  }
-]);
-
-function navigateToTool(path) {
-  navigateTo(path);
-}
-
-function getColorClasses(color) {
-  const colorMap = {
-    blue: 'bg-blue-100 text-blue-600 hover:bg-blue-200',
-    green: 'bg-green-100 text-green-600 hover:bg-green-200',
-    purple: 'bg-purple-100 text-purple-600 hover:bg-purple-200',
-    orange: 'bg-orange-100 text-orange-600 hover:bg-orange-200',
-    indigo: 'bg-indigo-100 text-indigo-600 hover:bg-indigo-200',
-    red: 'bg-red-100 text-red-600 hover:bg-red-200',
-    gray: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
-  };
-  return colorMap[color] || 'bg-gray-100 text-gray-600 hover:bg-gray-200';
-}
 </script>
 
 <template>
-  <div class="space-y-8">
+  <div>
     <LayoutsBreadcrumb />
-    
+    <!-- Kad Ringkasan Pantas -->
-    <!-- Welcome Header -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-6">
-    <div class="text-center py-12 bg-gradient-to-br from-primary/10 to-secondary/10 rounded-2xl">
-      <div class="max-w-4xl mx-auto px-6">
-        <h1 class="text-4xl md:text-6xl font-bold text-primary mb-4">
-          Welcome to {{ frameworkInfo.name }}
-        </h1>
-        <p class="text-xl text-gray-600 mb-6">
-          {{ frameworkInfo.description }}
-        </p>
-        <div class="flex justify-center gap-4">
-          <rs-badge variant="primary" class="text-sm px-4 py-2">
-            v{{ frameworkInfo.version }}
-          </rs-badge>
-          <rs-badge variant="secondary" class="text-sm px-4 py-2">
-            Nuxt 3 Ready
-          </rs-badge>
-        </div>
-      </div>
-    </div>
-
-    <!-- Quick Stats -->
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
       <rs-card
-        v-for="(stat, index) in quickStats"
+        v-for="(item, index) in quickSummary"
         :key="index"
         class="transition-all duration-300 hover:shadow-lg"
       >
-        <div class="p-6 flex items-center gap-4">
+        <div class="pt-5 pb-3 px-5 flex items-center gap-4">
-          <div class="p-4 bg-primary/20 rounded-2xl">
+          <div
-            <Icon :name="stat.icon" size="24" class="text-primary" />
+            class="p-5 flex justify-center items-center bg-primary/20 rounded-2xl transition-all duration-300 hover:bg-primary/30"
+          >
+            <Icon class="text-primary text-3xl" :name="item.icon"></Icon>
           </div>
-          <div>
+          <div class="flex-1 truncate">
-            <span class="block text-2xl font-bold text-primary">{{ stat.value }}</span>
+            <span class="block font-bold text-2xl leading-tight text-primary">
-            <span class="text-sm text-gray-600">{{ stat.title }}</span>
+              {{ item.value }}
+            </span>
+            <span class="text-sm font-medium text-gray-600">
+              {{ item.title }}
+            </span>
           </div>
         </div>
       </rs-card>
     </div>
 
-    <!-- Development Tools -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
-    <div>
+      <!-- Gambaran Keseluruhan Pelawat Malaysia -->
-      <h2 class="text-2xl font-bold text-primary mb-6">Development Tools</h2>
+      <rs-card class="col-span-1 lg:col-span-2">
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <template #header>
-        <rs-card
+          <h2 class="text-xl font-bold text-primary">
-          v-for="(tool, index) in devTools"
+            Gambaran Keseluruhan Pelawat
-          :key="index"
+          </h2>
-          class="transition-all duration-300 hover:shadow-lg cursor-pointer group"
+        </template>
-          @click="navigateToTool(tool.path)"
+        <template #body>
-        >
+          <client-only>
-          <div class="p-6">
+            <VueApexCharts
-            <div class="flex items-start gap-4 mb-4">
+              width="100%"
-              <div 
+              height="350"
-                :class="getColorClasses(tool.color)"
+              type="line"
-                class="p-3 rounded-xl transition-all duration-300"
+              :options="chartOptionsVisitors"
+              :series="visitorData"
+            ></VueApexCharts>
+          </client-only>
+        </template>
+      </rs-card>
+
+      <!-- Pelawat Asing mengikut Negeri -->
+      <rs-card>
+        <template #header>
+          <h2 class="text-lg font-semibold text-primary">
+            Pelawat Asing mengikut Negeri
+          </h2>
+        </template>
+        <template #body>
+          <client-only>
+            <VueApexCharts
+              width="100%"
+              height="300"
+              type="bar"
+              :options="chartOptionsForeignVisitors"
+              :series="[
+                { data: foreignVisitorsByState.map((item) => item.visitors) },
+              ]"
+            ></VueApexCharts>
+          </client-only>
+        </template>
+      </rs-card>
+
+      <!-- Pelancong Berulang -->
+      <rs-card>
+        <template #header>
+          <h2 class="text-lg font-semibold text-primary">
+            Kekerapan Lawatan Pelancong
+          </h2>
+        </template>
+        <template #body>
+          <client-only>
+            <VueApexCharts
+              width="100%"
+              height="300"
+              type="pie"
+              :options="chartOptionsRepeatVisitors"
+              :series="repeatVisitorsData.map((item) => item.percentage)"
+            ></VueApexCharts>
+          </client-only>
+        </template>
+      </rs-card>
+    </div>
+
+    <!-- Negara Asal Pelancong Asing Teratas -->
+    <rs-card class="mb-6">
+      <template #header>
+        <h2 class="text-xl font-bold text-primary">
+          Negara Asal Pelancong Asing Teratas
+        </h2>
+      </template>
+      <template #body>
+        <client-only>
+          <VueApexCharts
+            width="100%"
+            height="350"
+            type="bar"
+            :options="chartOptionsTopCountries"
+            :series="[
+              {
+                name: 'Pelawat',
+                data: topVisitorCountries.map((item) => item.visitors),
+              },
+            ]"
+          ></VueApexCharts>
+        </client-only>
+      </template>
+    </rs-card>
+
+    <rs-card class="mb-6">
+      <template #header>
+        <h2 class="text-xl font-bold text-primary">
+          Lapangan Terbang Teratas dengan Pelawat Terbanyak
+        </h2>
+      </template>
+      <template #body>
+        <div class="overflow-x-auto">
+          <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+              <tr>
+                <th
+                  class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                >
+                  Kedudukan
+                </th>
+                <th
+                  class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                >
+                  Nama Lapangan Terbang
+                </th>
+                <th
+                  class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                >
+                  Jumlah Pelawat
+                </th>
+              </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-200">
+              <tr
+                v-for="airport in topAirports"
+                :key="airport.rank"
+                class="hover:bg-gray-50 transition-colors duration-200"
               >
-                <Icon :name="tool.icon" size="24" />
+                <td class="px-6 py-4 whitespace-nowrap font-medium">
-              </div>
+                  {{ airport.rank }}
-              <div class="flex-1">
+                </td>
-                <h3 class="font-semibold text-lg text-gray-800 group-hover:text-primary transition-colors">
+                <td class="px-6 py-4 whitespace-nowrap">{{ airport.name }}</td>
-                  {{ tool.title }}
+                <td
-                </h3>
+                  class="px-6 py-4 whitespace-nowrap font-semibold text-primary"
-              </div>
+                >
-            </div>
+                  {{ airport.visitors.toLocaleString() }}
-            <p class="text-gray-600 text-sm leading-relaxed">
+                </td>
-              {{ tool.description }}
+              </tr>
-            </p>
+            </tbody>
-            <div class="mt-4 flex items-center text-primary text-sm font-medium group-hover:gap-2 transition-all">
+          </table>
-              <span>Open Tool</span>
-              <Icon name="mdi:arrow-right" size="16" class="ml-1 group-hover:ml-2 transition-all" />
-            </div>
-          </div>
-      </rs-card>
-      </div>
-    </div>
-
-    <!-- Framework Features -->
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
-      <!-- Features List -->
-      <rs-card>
-        <div class="p-6">
-          <h3 class="text-xl font-bold text-primary mb-4 flex items-center gap-2">
-            <Icon name="mdi:star" size="20" />
-            Framework Features
-          </h3>
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
-            <div
-              v-for="(feature, index) in frameworkInfo.features"
-              :key="index"
-              class="flex items-center gap-2 text-sm"
-            >
-              <Icon name="mdi:check-circle" size="16" class="text-green-500" />
-              <span>{{ feature }}</span>
-            </div>
-          </div>
         </div>
-      </rs-card>
+      </template>
-
-      <!-- Getting Started -->
-      <rs-card>
-        <div class="p-6">
-          <h3 class="text-xl font-bold text-primary mb-4 flex items-center gap-2">
-            <Icon name="mdi:rocket-launch" size="20" />
-            Getting Started
-          </h3>
-          <div class="space-y-4">
-            <div
-              v-for="(step, index) in gettingStarted"
-              :key="index"
-              class="border-l-2 border-primary/20 pl-4"
-            >
-              <div class="flex items-center gap-2 mb-1">
-                <span class="w-6 h-6 bg-primary text-white rounded-full flex items-center justify-center text-xs font-bold">
-                  {{ step.step }}
-                </span>
-                <h4 class="font-semibold text-gray-800">{{ step.title }}</h4>
-              </div>
-              <p class="text-sm text-gray-600 mb-2">{{ step.description }}</p>
-              <code class="text-xs bg-gray-100 px-2 py-1 rounded block font-mono">
-                {{ step.command }}
-              </code>
-            </div>
-          </div>
-        </div>
-      </rs-card>
-    </div>
-
-    <!-- Documentation Links -->
-    <rs-card>
-      <div class="p-6">
-        <h3 class="text-xl font-bold text-primary mb-4 flex items-center gap-2">
-          <Icon name="mdi:book-open" size="20" />
-          Documentation & Resources
-        </h3>
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-          <a 
-            href="https://nuxt.com/docs" 
-            target="_blank"
-            class="flex items-center gap-3 p-4 bg-gray-50 rounded-xl hover:bg-gray-100 transition-colors"
-          >
-            <Icon name="mdi:nuxt" size="24" class="text-green-500" />
-            <div>
-              <div class="font-semibold">Nuxt 3 Docs</div>
-              <div class="text-sm text-gray-600">Official documentation</div>
-            </div>
-          </a>
-          <a 
-            href="https://tailwindcss.com/docs" 
-            target="_blank"
-            class="flex items-center gap-3 p-4 bg-gray-50 rounded-xl hover:bg-gray-100 transition-colors"
-          >
-            <Icon name="mdi:tailwind" size="24" class="text-blue-500" />
-            <div>
-              <div class="font-semibold">Tailwind CSS</div>
-              <div class="text-sm text-gray-600">Utility-first CSS</div>
-            </div>
-          </a>
-          <a 
-            href="https://github.com" 
-            target="_blank"
-            class="flex items-center gap-3 p-4 bg-gray-50 rounded-xl hover:bg-gray-100 transition-colors"
-          >
-            <Icon name="mdi:github" size="24" class="text-gray-700" />
-            <div>
-              <div class="font-semibold">Source Code</div>
-              <div class="text-sm text-gray-600">View on GitHub</div>
-            </div>
-          </a>
-        </div>
-      </div>
     </rs-card>
   </div>
 </template>

prisma/schema.prisma

@@ -99,14 +99,3 @@ model site_settings {
   settingModifiedDate  DateTime? @db.DateTime(0)
   siteLoginLogo        String?   @db.VarChar(500)
 }
-
-model ticket {
-  ticketId    Int      @id @default(autoincrement())
-  title       String
-  description String
-  dueDate     DateTime
-  priority    String   @default("medium")
-  status      String   @default("pending")
-  createdAt   DateTime @default(now())
-  updatedAt   DateTime
-}

server/api/analyze-asnaf.post.ts

@@ -0,0 +1,124 @@
+import { defineEventHandler, readBody } from 'h3';
+
+// Define an interface for the expected request body (subset of AsnafProfile)
+interface AsnafAnalysisRequest {
+  monthlyIncome: string;
+  otherIncome: string;
+  totalIncome: string;
+  occupation: string;
+  maritalStatus: string;
+  dependents: Array<any>; // Or a more specific type if you have one for dependents
+  // Add any other fields you deem necessary for OpenAI to analyze
+}
+
+interface AidSuggestion {
+  nama: string;
+  peratusan: string;
+}
+
+// Define an interface for the expected OpenAI response structure (and our API response)
+interface AsnafAnalysisResponse {
+  hadKifayahPercentage: string;
+  kategoriAsnaf: string;
+  kategoriKeluarga: string;
+  cadanganKategori: string;
+  statusKelayakan: string;
+  cadanganBantuan: AidSuggestion[];
+  ramalanJangkaMasaPulih: string;
+  rumusan: string;
+}
+
+export default defineEventHandler(async (event): Promise<AsnafAnalysisResponse> => {
+  const body = await readBody<AsnafAnalysisRequest>(event);
+
+  // --- Placeholder for Actual OpenAI API Call ---
+  // In a real application, you would:
+  // 1. Retrieve your OpenAI API key securely (e.g., from environment variables)
+  const openAIApiKey = process.env.OPENAI_API_KEY;
+  if (!openAIApiKey) {
+    console.error('OpenAI API key not configured. Please set OPENAI_API_KEY in your .env file.');
+    throw createError({ statusCode: 500, statusMessage: 'OpenAI API key not configured' });
+  }
+  
+  // 2. Construct the prompt for OpenAI using the data from `body`.
+  //    IMPORTANT: Sanitize or carefully construct any data from `body` included in the prompt to prevent prompt injection.
+  const prompt = `You are an expert Zakat administrator. Based on the following applicant data: monthlyIncome: ${body.monthlyIncome}, totalIncome: ${body.totalIncome}, occupation: ${body.occupation}, maritalStatus: ${body.maritalStatus}, dependents: ${body.dependents.length}. 
+Return JSON with keys: hadKifayahPercentage, kategoriAsnaf, kategoriKeluarga, cadanganKategori, statusKelayakan, cadanganBantuan, ramalanJangkaMasaPulih, rumusan. 
+For 'cadanganBantuan', provide a JSON array of objects, where each object has a 'nama' (string, name of the aid) and 'peratusan' (string, e.g., '85%', representing suitability). Suggest 2-3 most relevant aid types. 
+Example for cadanganBantuan: [{"nama": "Bantuan Kewangan Bulanan", "peratusan": "90%"}, {"nama": "Bantuan Makanan Asas", "peratusan": "75%"}].
+Full JSON Example: {"hadKifayahPercentage": "75%", ..., "cadanganBantuan": [{"nama": "Bantuan Kewangan Bulanan", "peratusan": "90%"}], ...}`;
+  //    Adjust the prompt to be more detailed and specific to your needs and desired JSON output structure.
+
+  // 3. Make the API call to OpenAI
+  try {
+    const openAIResponse = await fetch('https://api.openai.com/v1/chat/completions', { 
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${openAIApiKey}`,
+      },
+      body: JSON.stringify({
+        model: 'gpt-3.5-turbo', // Or your preferred model like gpt-4
+        messages: [{ role: 'user', content: prompt }],
+        // For more consistent JSON output, consider using a model version that officially supports JSON mode if available
+        // and set response_format: { type: "json_object" }, (check OpenAI documentation for model compatibility)
+      }),
+    });
+
+    if (!openAIResponse.ok) {
+      const errorData = await openAIResponse.text();
+      console.error('OpenAI API Error details:', errorData);
+      throw createError({ statusCode: openAIResponse.status, statusMessage: `Failed to get analysis from OpenAI: ${openAIResponse.statusText}` });
+    }
+
+    const openAIData = await openAIResponse.json();
+    
+    // Parse the content from the response - structure might vary slightly based on OpenAI model/API version
+    // It's common for the JSON string to be in openAIData.choices[0].message.content
+    if (openAIData.choices && openAIData.choices[0] && openAIData.choices[0].message && openAIData.choices[0].message.content) {
+      const analysisResult = JSON.parse(openAIData.choices[0].message.content) as AsnafAnalysisResponse;
+      return analysisResult;
+    } else {
+      console.error('OpenAI response structure not as expected:', openAIData);
+      throw createError({ statusCode: 500, statusMessage: 'Unexpected response structure from OpenAI' });
+    }
+
+  } catch (error) {
+    console.error('Error during OpenAI API call or parsing:', error);
+    // Avoid exposing detailed internal errors to the client if they are not createError objects
+    if (typeof error === 'object' && error !== null && 'statusCode' in error) {
+        // We can infer error has statusCode here, but to be super safe with TS:
+        const e = error as { statusCode: number }; 
+        if (e.statusCode) throw e; 
+    }
+    throw createError({ statusCode: 500, statusMessage: 'Internal server error during AI analysis' });
+  }
+  // --- End of Actual OpenAI API Call ---
+
+  // The simulated response below this line should be REMOVED once the actual OpenAI call is implemented and working.
+  /*
+  console.log('Received for analysis in server route:', body);
+  await new Promise(resolve => setTimeout(resolve, 2000)); // Simulate API delay
+
+  const totalIncomeNumeric = parseFloat(body.totalIncome);
+  let percentage = '50%'; 
+  if (totalIncomeNumeric < 1000) percentage = '30%';
+  else if (totalIncomeNumeric < 2000) percentage = '65%';
+  else if (totalIncomeNumeric < 3000) percentage = '85%';
+  else percentage = '110%';
+  
+  return {
+    hadKifayahPercentage: percentage,
+    kategoriAsnaf: 'Simulated - Miskin',
+    kategoriKeluarga: 'Simulated - Miskin (50-100% HK)',
+    cadanganKategori: 'Simulated - Miskin',
+    statusKelayakan: 'Simulated - Layak (Miskin)',
+    cadanganBantuan: [
+      { nama: 'Simulated - Bantuan Kewangan Bulanan', peratusan: '80%' },
+      { nama: 'Simulated - Bantuan Pendidikan Anak', peratusan: '65%' }
+    ],
+    ramalanJangkaMasaPulih: 'Simulated - 6 bulan',
+    rumusan: 'Simulated - Pemohon memerlukan perhatian segera.'
+  };
+  */
+}); 

server/api/queue/asnaf-analysis/index.get.js

@@ -0,0 +1,50 @@
+// import Queue from 'bull';
+
+// // Create a Bull queue instance
+// const asnafAnalysisQueue = new Queue('asnaf-analysis', {
+//   redis: {
+//     host: process.env.REDIS_HOST || 'localhost',
+//     port: process.env.REDIS_PORT || 6379,
+//     password: process.env.REDIS_PASSWORD
+//   }
+// });
+
+export default defineEventHandler(async (event) => {
+  try {
+    // // Get all jobs from different states
+    // const [waiting, active, completed, failed] = await Promise.all([
+    //   asnafAnalysisQueue.getWaiting(),
+    //   asnafAnalysisQueue.getActive(),
+    //   asnafAnalysisQueue.getCompleted(),
+    //   asnafAnalysisQueue.getFailed()
+    // ]);
+
+    // // Combine all jobs and format them
+    // const allJobs = [...waiting, ...active, ...completed, ...failed]
+    //   .map(job => ({
+    //     id: job.id,
+    //     status: job.finishedOn ? 'completed' : 
+    //             job.failedReason ? 'failed' : 
+    //             job.processedOn ? 'active' : 'waiting',
+    //     data: job.data,
+    //     timestamp: job.timestamp,
+    //     processedOn: job.processedOn,
+    //     finishedOn: job.finishedOn,
+    //     failedReason: job.failedReason
+    //   }))
+    //   .sort((a, b) => b.timestamp - a.timestamp); // Sort by timestamp, newest first
+
+    // return allJobs;
+
+    return {
+      message: 'Queue data fetched successfully',
+      data: []
+    }
+  } catch (error) {
+    console.error('Error fetching queue data:', error);
+    throw createError({ 
+      statusCode: 500, 
+      statusMessage: 'Failed to fetch queue data' 
+    });
+  }
+}); 

test-site-settings.md

@@ -0,0 +1,121 @@
+# Site Settings Features Test Guide
+
+## Features Implemented ✅
+
+### 1. Font Size Stepper for Site Name
+**Location**: Site Settings > Appearance Tab > Site Name Styling
+
+**Test Steps**:
+1. Navigate to `/devtool/config/site-settings`
+2. Click on the "Appearance" tab
+3. Locate the "Site Name Font Size" section
+4. Use the stepper buttons (+/-) to change the font size (12px - 36px)
+5. Observe the live preview showing the size change
+6. Check the current size indicator showing the exact pixel value
+
+**Expected Results**:
+- Font size changes in real-time in the preview
+- Size indicator updates with current pixel value
+- Header and sidemenu site name reflect the new size after saving
+
+### 2. Google Fonts Suggestions Dropdown
+**Location**: Site Settings > Appearance Tab > Font Configuration
+
+**Test Steps**:
+1. In the same "Appearance" tab, scroll to "Font Configuration"
+2. Open the "Popular Google Fonts" dropdown
+3. Select a font (e.g., "Inter", "Poppins", "Roboto")
+4. Verify the font is applied immediately
+5. Check that a success toast notification appears
+6. Verify the "Current Font" section updates
+
+**Expected Results**:
+- Dropdown contains 15 popular Google Fonts
+- Font applies immediately when selected
+- Success notification shows: "[Font Name] font applied successfully"
+- Current font section shows the new font name and Google Fonts URL
+- Dropdown resets after selection
+
+### 3. Show Site Name in Header Toggle
+**Location**: Site Settings > Basic Tab
+
+**Test Steps**:
+1. Go to the "Basic" tab
+2. Locate the "Show site name in header" toggle
+3. Toggle it OFF
+4. Navigate to any other page
+5. Check the header - site name should be hidden
+6. Return to settings and toggle it ON
+7. Check the header - site name should be visible again
+
+**Expected Results**:
+- When OFF: Site name is hidden in both header and sidemenu
+- When ON: Site name is visible in both header and sidemenu
+- Changes apply immediately without needing to save
+
+### 4. Consistent UI Components
+**Verification Points**:
+- Uses `rs-button` components with proper variants (primary, outline)
+- Uses `rs-card` components for layout
+- Consistent spacing and typography
+- Uses `FontSizeStepper` component with proper props
+- Proper dark mode support
+- Icons from Iconify (`ic:` prefix)
+
+**Design Patterns Used**:
+- Border rounded containers with proper padding
+- Gray borders with dark mode variants
+- Consistent form input styling
+- Proper spacing with Tailwind classes
+- Live preview sidebar with real-time updates
+
+## Database Fields Added ✅
+
+- `siteNameFontSize` (Int, default: 18) - Already existed in Prisma schema
+- Field is properly handled in API endpoints
+- Synced with global site settings composable
+
+## API Integration ✅
+
+- All settings are saved to `/api/devtool/config/site-settings`
+- Font size is included in the POST request body
+- Settings load correctly on page refresh
+- Changes persist across browser sessions
+
+## Components Updated ✅
+
+1. **pages/devtool/config/site-settings/index.vue**
+   - Added font size stepper
+   - Added Google Fonts dropdown
+   - Enhanced live preview
+   - Added visual feedback
+
+2. **components/layouts/Header.vue**
+   - Applied dynamic font sizing
+   - Respects show/hide toggle
+
+3. **components/layouts/sidemenu/index.vue**
+   - Applied scaled font sizing
+   - Respects show/hide toggle
+
+4. **composables/useSiteSettings.js**
+   - Added siteNameFontSize field
+   - Maintains global state consistency
+
+## Testing Checklist ✅
+
+- [ ] Font size stepper works (12px - 36px range)
+- [ ] Font size preview updates in real-time
+- [ ] Font size applies to header site name
+- [ ] Font size applies to sidemenu site name (scaled)
+- [ ] Google Fonts dropdown has 15 options
+- [ ] Google Font selection applies immediately
+- [ ] Font source URL updates when Google Font selected
+- [ ] Show/hide toggle works for header
+- [ ] Show/hide toggle works for sidemenu
+- [ ] Live preview sidebar reflects all changes
+- [ ] Settings save and persist correctly
+- [ ] Dark mode compatibility
+- [ ] Mobile responsiveness
+- [ ] Toast notifications appear for font changes
+- [ ] All UI components follow design system