diff --git a/.gitignore b/.gitignore index 969bbc7..a3663c8 100644 --- a/.gitignore +++ b/.gitignore @@ -8,14 +8,48 @@ 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.* @@ -23,3 +57,39 @@ node_modules # 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 diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index c1c99bb..0000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "vue3snippets.enable-compile-vue-file-on-did-save-code": true -} \ No newline at end of file diff --git a/README.md b/README.md index 7f452fe..9b99e90 100644 --- a/README.md +++ b/README.md @@ -1,45 +1,214 @@ -# Nuxt 3 Minimal Starter +# corradAF - Corrad Application Framework -Look at the [nuxt 3 documentation](https://v3.nuxtjs.org) to learn more. +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. -## Setup +## šŸš€ Features -Make sure to install the dependencies: +- **šŸ” Complete Authentication System** - Login, Register, Password Recovery, Logout +- **šŸ‘„ 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 -# yarn +git clone https://git.sena.my/corrad-software/corrad-af-2024.git your-project-name +cd your-project-name +``` + +### 2. Install Dependencies + +```bash +# Using yarn (recommended) yarn install -# npm +# Or using npm npm install - -# pnpm -pnpm install --shamefully-hoist ``` -## Development Server - -Start the development server on http://localhost:3000 +### 3. Environment Setup ```bash -npm run dev +# Copy environment template +cp .env.example .env + +# Edit your environment variables +nano .env ``` -## Production +Configure your database connection and other environment variables in the `.env` file. -Build the application for production: +### 4. Database Setup ```bash -npm run build +# Run database migrations and generate Prisma client +yarn prisma + +# Or manually +npx prisma db pull && npx prisma generate ``` -Locally preview production build: +### 5. Start Development Server ```bash -npm run preview +yarn dev ``` -Checkout the [deployment documentation](https://v3.nuxtjs.org/guide/deploy/presets) for more information. -# corradAF +Your application will be available at `http://localhost:3000` -This is the base project for corradAF. +## šŸ“ Project Structure + +``` +ā”œā”€ā”€ 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.** diff --git a/SETUP.md b/SETUP.md new file mode 100644 index 0000000..de85f20 --- /dev/null +++ b/SETUP.md @@ -0,0 +1,155 @@ +# 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! šŸš€ \ No newline at end of file diff --git a/assets/style/css/base/theme.css b/assets/style/css/base/theme.css index a6c095c..1046699 100644 --- a/assets/style/css/base/theme.css +++ b/assets/style/css/base/theme.css @@ -225,6 +225,74 @@ 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 */ @@ -266,3 +334,4 @@ html[data-theme="LZS"] { --focus-ring: 255, 242, 0, 0.5; /* Yellow focus ring */ --tw-shadow: #e5eaf2; } + \ No newline at end of file diff --git a/cli-tool/.npmignore b/cli-tool/.npmignore new file mode 100644 index 0000000..e59b32a --- /dev/null +++ b/cli-tool/.npmignore @@ -0,0 +1,11 @@ +# Development files +*.md +!README.md + +# Logs +*.log + +# Testing +test/ +tests/ +*.test.js \ No newline at end of file diff --git a/cli-tool/README.md b/cli-tool/README.md new file mode 100644 index 0000000..98c56ec --- /dev/null +++ b/cli-tool/README.md @@ -0,0 +1,37 @@ +# 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 \ No newline at end of file diff --git a/cli-tool/index.js b/cli-tool/index.js new file mode 100644 index 0000000..a5a30da --- /dev/null +++ b/cli-tool/index.js @@ -0,0 +1,684 @@ +#!/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 diff --git a/composables/themeList.js b/composables/themeList.js index 3779de1..470b7df 100644 --- a/composables/themeList.js +++ b/composables/themeList.js @@ -1,36 +1,135 @@ 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: "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 }, ], }, @@ -49,7 +148,16 @@ 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 + }, ], }, ]; } + \ No newline at end of file diff --git a/composables/themeList2.js b/composables/themeList2.js index 26230d5..29fa7e6 100644 --- a/composables/themeList2.js +++ b/composables/themeList2.js @@ -1,102 +1,53 @@ 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 - }, - { - name: "background", - value: "240, 248, 255", // Alice blue - }, - { - name: "text", - value: "0, 0, 0", // Black + value: "243, 244, 246", }, ], }, { - 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 - }, - { - name: "background", - value: "255, 240, 240", // Very light pink - }, - { - name: "text", - value: "0, 0, 0", // Black + value: "15, 23, 42", }, ], }, { - theme: "ungu", + theme: "purplian", colors: [ { name: "primary", - value: "75, 0, 130", // Indigo + value: "145, 54, 136", // #913688 - Main Purple }, { name: "secondary", - value: "138, 43, 226", // Blue violet + value: "165, 94, 156", // #a55e9c - Lighter Purple }, { 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 + value: "241, 235, 245", // #f1ebf5 - Very soft purple }, ], }, @@ -115,15 +66,8 @@ 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 - }, ], }, ]; } + \ No newline at end of file diff --git a/docs/SITE_SETTINGS.md b/docs/SITE_SETTINGS.md deleted file mode 100644 index eed0bcc..0000000 --- a/docs/SITE_SETTINGS.md +++ /dev/null @@ -1,161 +0,0 @@ -# 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 \ No newline at end of file diff --git a/fixes-summary.md b/fixes-summary.md deleted file mode 100644 index 57882b9..0000000 --- a/fixes-summary.md +++ /dev/null @@ -1,122 +0,0 @@ -# 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 - - - Action Text - -``` - -**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 -

Configure your platform's branding, appearance, SEO, and functionality.

-``` - -**After**: -```vue -

Configure your platform's branding, appearance, SEO, and functionality.

-``` - -**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 \ No newline at end of file diff --git a/llms.txt b/llms.txt new file mode 100644 index 0000000..ec619a3 --- /dev/null +++ b/llms.txt @@ -0,0 +1,589 @@ +# 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**: ` + + + + +``` + +### Page Component Template: +```vue + + + +``` + +### Development Tool Page Template: +```vue + + + +``` + +## 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": "", + "file_path": "components/UserCard.vue", + "dependencies": ["vue", "@nuxt/icon"], + "usage_example": "", + "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. \ No newline at end of file diff --git a/navigation/index.js b/navigation/index.js index 9a543d0..ed66b1c 100644 --- a/navigation/index.js +++ b/navigation/index.js @@ -9,18 +9,6 @@ export default [ "icon": "ic:outline-dashboard", "child": [], "meta": {} - }, - { - "title": "Notes", - "path": "/notes", - "icon": "", - "child": [] - }, - { - "title": "Metabase", - "path": "/metabase", - "icon": "", - "child": [] } ], "meta": {} diff --git a/package.json b/package.json index 4575231..d344d8d 100644 --- a/package.json +++ b/package.json @@ -1,4 +1,29 @@ { + "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", @@ -6,7 +31,8 @@ "generate": "nuxt generate", "preview": "nuxt preview", "postinstall": "nuxt prepare", - "prisma": "npx prisma db pull && npx prisma generate && nuxt dev" + "prisma": "yarn prisma:generate && nuxt dev", + "prisma:generate": "npx prisma db pull && npx prisma generate" }, "devDependencies": { "@nuxtjs/tailwindcss": "^6.8.0", diff --git a/pages/dashboard/index.vue b/pages/dashboard/index.vue index 361238f..568d9bb 100644 --- a/pages/dashboard/index.vue +++ b/pages/dashboard/index.vue @@ -11,328 +11,305 @@ definePageMeta({ ], }); -// Data baru untuk lapangan terbang teratas -const topAirports = ref([ - { - rank: 1, - name: "Lapangan Terbang Antarabangsa Kuala Lumpur (KLIA)", - visitors: 62000000, - }, - { - rank: 2, - name: "Lapangan Terbang Antarabangsa Kota Kinabalu", - visitors: 9000000, - }, - { rank: 3, name: "Lapangan Terbang Antarabangsa Penang", visitors: 8000000 }, - { rank: 4, name: "Lapangan Terbang Antarabangsa Kuching", visitors: 5500000 }, - { - 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 +// Framework information +const frameworkInfo = ref({ + name: "corradAF", + version: "1.0.0", + description: "Corrad Application Framework - A comprehensive Nuxt.js template for rapid application development", + features: [ + "Authentication System", + "User Management", + "Role-based Access Control", + "Development Tools Suite", + "API Management", + "Menu Configuration", + "Content Management", + "Code Playground", + "ORM Integration", + "Responsive Design" + ] }); + +// 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 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'; +} diff --git a/pages/devtool/config/site-settings/index.vue b/pages/devtool/config/site-settings/index.vue index d22b6e4..05f2139 100644 --- a/pages/devtool/config/site-settings/index.vue +++ b/pages/devtool/config/site-settings/index.vue @@ -5,7 +5,7 @@ definePageMeta({ requiresAuth: true, }); -const { $swal, $toast } = useNuxtApp(); +const { $swal } = useNuxtApp(); const { siteSettings, updateSiteSettings, applyThemeSettings, updateGlobalMeta } = useSiteSettings(); // Reactive data @@ -139,7 +139,7 @@ const loadSettings = async () => { } } catch (error) { console.error("Error loading settings:", error); - $toast.error("Failed to load site settings"); + alert("Failed to load site settings"); } finally { loading.value = false; } @@ -148,7 +148,7 @@ const loadSettings = async () => { // Save settings const saveSettings = async () => { if (!validateForm()) { - $toast.error("Please fix the validation errors"); + alert("Please fix the validation errors"); return; } @@ -160,7 +160,7 @@ const saveSettings = async () => { if (result && result.success) { originalSettings.value = { ...settings.value }; - $toast.success("Settings saved successfully"); + alert("Settings saved successfully"); // Apply changes // applyChanges(); // Temporarily commented out to isolate the error source @@ -175,7 +175,7 @@ const saveSettings = async () => { console.error("[SiteSettingsPage] 'result' from updateSiteSettings was undefined."); } - $toast.error(errorMsg); + alert(errorMsg); if (result && result.error && result.error.details) { console.error("[SiteSettingsPage] Save settings error details:", result.error.details); @@ -189,7 +189,7 @@ const saveSettings = async () => { // This catch block is for unexpected errors during the saveSettings execution itself, // or if updateSiteSettings somehow re-throws an error not caught by its own try-catch. console.error("Critical error saving settings:", error); - $toast.error("A critical error occurred. Failed to save settings."); + alert("A critical error occurred. Failed to save settings."); } finally { saving.value = false; } @@ -220,7 +220,7 @@ const applyFontFromSource = () => { } } - $toast.success('Font applied successfully'); + alert('Font applied successfully'); } }; @@ -241,7 +241,7 @@ const uploadFile = async (file, type) => { return response.data.url; } catch (error) { console.error(`Error uploading ${type}:`, error); - $toast.error(`Failed to upload ${type}`); + alert(`Failed to upload ${type}`); return null; } }; @@ -253,7 +253,7 @@ const handleLogoUpload = async (event) => { const url = await uploadFile(file, 'logo'); if (url) { settings.value.siteLogo = url; - $toast.success('Logo uploaded successfully'); + alert('Logo uploaded successfully'); } } }; @@ -264,7 +264,7 @@ const handleLoadingLogoUpload = async (event) => { const url = await uploadFile(file, 'loading-logo'); if (url) { settings.value.siteLoadingLogo = url; - $toast.success('Loading logo uploaded successfully'); + alert('Loading logo uploaded successfully'); } } }; @@ -275,7 +275,7 @@ const handleFaviconUpload = async (event) => { const url = await uploadFile(file, 'favicon'); if (url) { settings.value.siteFavicon = url; - $toast.success('Favicon uploaded successfully'); + alert('Favicon uploaded successfully'); } } }; @@ -286,7 +286,7 @@ const handleLoginLogoUpload = async (event) => { const url = await uploadFile(file, 'login-logo'); if (url) { settings.value.siteLoginLogo = url; - $toast.success('Login logo uploaded successfully'); + alert('Login logo uploaded successfully'); } } }; @@ -295,14 +295,14 @@ const handleCSSUpload = async (event) => { const file = event.target.files[0]; if (file) { if (!file.name.endsWith('.css')) { - $toast.error('Please upload a valid CSS file'); + alert('Please upload a valid CSS file'); return; } const reader = new FileReader(); reader.onload = (e) => { settings.value.customCSS = e.target.result; - $toast.success('CSS file loaded successfully'); + alert('CSS file loaded successfully'); }; reader.readAsText(file); } @@ -314,7 +314,7 @@ const handleOgImageUpload = async (event) => { const url = await uploadFile(file, 'og-image'); if (url) { settings.value.seoOgImage = url; - $toast.success('OG image uploaded successfully'); + alert('OG image uploaded successfully'); } } }; @@ -332,7 +332,7 @@ const resetSettings = () => { settings.value = { ...originalSettings.value }; errors.value = {}; applyChanges(); - $toast.info('Settings reset to last saved state'); + alert('Settings reset to last saved state'); }; // Check for changes @@ -364,7 +364,7 @@ const applyGoogleFont = (font) => { settings.value.fontSource = googleFontUrl; settings.value.currentFont = font.name; applyFontFromSource(); - $toast.success(`${font.name} font applied successfully`); + alert(`${font.name} font applied successfully`); // Reset the dropdown after selection selectedGoogleFont.value = ''; } @@ -451,7 +451,7 @@ watch(() => settings.value.showSiteNameInHeader, (newValue) => {
-