manja_dev_ui/.cursorrules

# CoreUI Free Vue Admin Template - AI Assistant Rules

You are working with the CoreUI Free Vue Admin Template, a professional admin dashboard built with Vue 3, CoreUI Vue components, and modern build tools. This project uses Vite for development and building, Vue Router for navigation, Pinia for state management, and Sass for styling.

## Critical Rules

**Component Library**: ALWAYS use CoreUI Vue components from https://coreui.io/vue/docs/. NEVER use Tailwind CSS, Vuetify, Element Plus, or other component libraries. This project is built on Bootstrap 5 and CoreUI Vue components exclusively.

**Technology Stack**: This project uses:
- Vue 3.5.x with Composition API and script setup
- Single File Components (SFC) with <template>, <script>, and <style> sections
- CoreUI Vue 5.x and @coreui/coreui 5.x
- Vue Router 5.x for client-side routing
- Pinia 3.x for state management
- Vite 8.x for development server and building
- Sass/SCSS for styling with Bootstrap 5 variables
- Chart.js 4.x with @coreui/vue-chartjs for data visualization

## Code Conventions

**Vue/JavaScript Standards**:
- Use Composition API with `<script setup>` syntax
- Use ref() and reactive() for reactive state
- Follow Vue 3 Composition API patterns
- Use Prettier formatting: no semicolons, single quotes, 2-space indentation
- Enforce ESLint rules with Vue and Prettier plugins
- Prefer const and arrow functions
- Use destructuring where appropriate

**File Organization**:
- `src/` - All source code
  - `components/` - Reusable UI components (AppHeader, AppSidebar, etc.)
  - `views/` - Page components organized by feature (dashboard, forms, charts, etc.)
  - `layouts/` - Layout wrapper components (DefaultLayout)
  - `assets/` - Static assets (images, brand logos)
  - `scss/` - Global styles and theme customization
  - `router/` - Router configuration
  - `stores/` - Pinia stores
  - `_nav.js` - Navigation/sidebar menu configuration
  - `App.vue` - Main application component
  - `main.js` - Application entry point

**Vue/SFC Practices**:
- Use `<script setup>` for components (preferred modern syntax)
- Use `defineProps()` and `defineEmits()` for component API
- Use computed() for derived state
- Use watch() or watchEffect() for side effects
- Keep components focused and single-responsibility
- Extract reusable logic into composables (useX pattern)
- Use Suspense for async components when needed

**CSS/Sass Practices**:
- Import global styles in main.js: `import './scss/style.scss'`
- Use Bootstrap utilities first before custom CSS
- Leverage CoreUI CSS custom properties for theming
- Support dark mode through CoreUI's color mode system
- File: `src/scss/style.scss` - main stylesheet importing CoreUI and Bootstrap
- File: `src/scss/_custom.scss` - custom style overrides
- Use scoped styles in components: `<style scoped>`
- Use SCSS variables from Bootstrap and CoreUI when possible

**Routing Conventions**:
- Use createWebHashHistory for client-side routing (GitHub Pages compatible)
- Define routes in router/index.js as array of objects
- Use dynamic imports for lazy loading route components
- Use exact path matching where needed
- Public routes (login, register, 404, 500) defined separately
- Protected routes handled in DefaultLayout

**State Management**:
- Use Pinia for global state (theme, sidebar visibility)
- Create stores in stores/ directory
- Use defineStore() with setup syntax
- Access stores with const store = useStore()
- Keep component-level state in ref() or reactive() when state is local

**Naming Conventions**:
- PascalCase for component files and component names (AppHeader.vue, DefaultLayout.vue)
- camelCase for variables, functions, and composables (useState, useEffect)
- UPPER_SNAKE_CASE for constants (API_URL, MAX_ITEMS)
- kebab-case for CSS classes (following Bootstrap/CoreUI conventions)
- Descriptive names that indicate purpose (AppHeaderDropdown vs Dropdown)

## Project Structure

```
coreui-free-vue-admin-template/
├── public/              # Static assets served directly
├── src/
│   ├── assets/         # Images, logos, icons
│   │   ├── brand/     # Logo components
│   │   └── images/    # Image files
│   ├── components/     # Reusable UI components
│   │   ├── AppHeader.vue
│   │   ├── AppSidebar.vue
│   │   ├── AppFooter.vue
│   │   ├── AppContent.vue
│   │   ├── AppBreadcrumb.vue
│   │   └── AppHeaderDropdown.vue
│   ├── layouts/        # Layout components
│   │   └── DefaultLayout.vue
│   ├── views/          # Page components
│   │   ├── dashboard/ # Dashboard page
│   │   ├── base/      # Base UI components examples
│   │   ├── buttons/   # Button examples
│   │   ├── forms/     # Form examples
│   │   ├── charts/    # Chart examples
│   │   ├── icons/     # Icon examples
│   │   ├── notifications/ # Notification examples
│   │   ├── widgets/   # Widget examples
│   │   └── pages/     # Auth & error pages
│   ├── router/         # Router configuration
│   │   └── index.js   # Route definitions
│   ├── stores/         # Pinia stores
│   ├── scss/           # Stylesheets
│   │   ├── style.scss # Main stylesheet
│   │   └── _custom.scss # Custom overrides
│   ├── App.vue         # Main app component
│   ├── main.js         # Entry point
│   └── _nav.js         # Navigation config
├── index.html          # HTML template
├── vite.config.mjs     # Vite configuration
├── eslint.config.mjs   # ESLint configuration
├── package.json        # Dependencies
└── README.md           # Documentation
```

## Development Workflow

**Starting Development**:
```bash
npm install          # Install dependencies
npm run dev          # Start dev server (http://localhost:3000)
npm run build        # Build for production
npm run preview      # Preview production build
npm run lint         # Run ESLint
```

**Adding a New Page**:
1. Create component in `src/views/[feature]/ComponentName.vue`
2. Add route to `src/router/index.js`
3. Add navigation item to `src/_nav.js` (if needed)
4. Import and use CoreUI components from '@coreui/vue'

**Creating Components**:
```vue
<template>
  <CCard>
    <CCardHeader>{{ title }}</CCardHeader>
    <CCardBody>
      <slot />
    </CCardBody>
  </CCard>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    required: true,
  },
})
</script>

<style scoped>
/* Component-specific styles */
</style>
```

**Using Composition API**:
```vue
<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from '@/stores/main'

const data = ref([])
const store = useStore()
const router = useRouter()

const filteredData = computed(() => {
  return data.value.filter(item => item.active)
})

watch(data, (newValue) => {
  console.log('Data changed:', newValue)
})

onMounted(() => {
  // Fetch data or run initialization
})

const navigate = () => {
  router.push('/dashboard')
}
</script>
```

## Code Quality

**Linting**:
- ESLint configuration in `eslint.config.mjs`
- Prettier integration for code formatting
- Vue-specific rules with eslint-plugin-vue
- Run `npm run lint` before committing

**Best Practices**:
- Always define props with types and validation
- Use meaningful component and variable names
- Keep components small and focused
- Extract complex logic into composables
- Use Vue DevTools for debugging
- Test in both light and dark themes
- Ensure responsive design works on all screen sizes

**Git Commits**:
Follow conventional commit format:
- feat: New feature
- fix: Bug fix
- docs: Documentation changes
- style: Code style changes (formatting)
- refactor: Code refactoring
- test: Adding tests
- chore: Maintenance tasks

## Common Patterns

**Lazy Loading Routes**:
```javascript
const Dashboard = () => import('./views/dashboard/Dashboard.vue')
```

**Composables** (Custom hooks):
```javascript
// composables/useFetch.js
import { ref } from 'vue'

export function useFetch(url) {
  const data = ref(null)
  const error = ref(null)
  const loading = ref(true)

  fetch(url)
    .then(res => res.json())
    .then(json => {
      data.value = json
    })
    .catch(err => {
      error.value = err
    })
    .finally(() => {
      loading.value = false
    })

  return { data, error, loading }
}
```

**Pinia Store**:
```javascript
// stores/main.js
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useStore = defineStore('main', () => {
  const sidebarVisible = ref(true)
  const theme = ref('light')

  function toggleSidebar() {
    sidebarVisible.value = !sidebarVisible.value
  }

  function setTheme(newTheme) {
    theme.value = newTheme
  }

  return { sidebarVisible, theme, toggleSidebar, setTheme }
})
```

**Navigation Configuration** (`_nav.js`):
```javascript
export default [
  {
    component: 'CNavItem',
    name: 'Dashboard',
    to: '/dashboard',
    icon: 'cil-speedometer',
  },
]
```

## AI Assistant Guidelines

**What AI Should Do**:
- Generate code using CoreUI Vue components
- Follow existing code style and conventions
- Use Composition API with <script setup>
- Implement responsive designs
- Define props with proper validation
- Follow the project's file organization
- Use existing utility functions and helpers
- Suggest performance optimizations when appropriate

**What AI Should NOT Do**:
- Use Options API (use Composition API instead)
- Import components from libraries other than CoreUI/Vue
- Suggest Tailwind CSS or other CSS frameworks
- Ignore ESLint/Prettier rules
- Create files outside the src/ directory structure
- Modify build configuration without clear reason
- Use deprecated Vue patterns

## External Dependencies

**Core Libraries**:
- @coreui/coreui: ^5.6.1 - CoreUI CSS framework
- @coreui/vue: ^5.8.0 - CoreUI Vue components
- @coreui/icons-vue: 2.2.0 - CoreUI icons for Vue
- vue: ^3.5.31 - Vue framework
- vue-router: ^5.0.4 - Routing library
- pinia: ^3.0.4 - State management

**Additional Libraries**:
- chart.js: ^4.5.1 - Charting library
- @coreui/vue-chartjs: ^3.0.0 - CoreUI Chart.js wrapper for Vue
- simplebar-vue: ^2.4.2 - Custom scrollbars
- @coreui/utils: ^2.0.2 - Utility functions

## Browser Support

Modern browsers with ES6+ support:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## Resources

- CoreUI Vue Documentation: https://coreui.io/vue/docs/
- CoreUI Components: https://coreui.io/vue/docs/components/
- Vue 3 Documentation: https://vuejs.org/
- Vue Router: https://router.vuejs.org/
- Pinia: https://pinia.vuejs.org/
- Vite: https://vitejs.dev/

---

Remember: This is a Vue 3 application using CoreUI Vue components. Always check CoreUI Vue documentation for component APIs and usage examples. Keep the code clean, maintainable, and following Vue 3 best practices with Composition API.