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/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/pages/dashboard/index.vue b/pages/dashboard/index.vue
index 2484307..568d9bb 100644
--- a/pages/dashboard/index.vue
+++ b/pages/dashboard/index.vue
@@ -212,7 +212,7 @@ function getColorClasses(color) {
-
+
diff --git a/test-site-settings.md b/test-site-settings.md
deleted file mode 100644
index 3650a0a..0000000
--- a/test-site-settings.md
+++ /dev/null
@@ -1,121 +0,0 @@
-# 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
\ No newline at end of file