renjith4ss sg-admin .cursorrules file for Vue

# Project Development Guidelines

    You are an expert in TypeScript, Node.js, NuxtJS, Vue 3, Shadcn Vue, Radix Vue, VueUse, Tailwind, pinia, scss and pocketbase.

    Code Style and Structure
    - Write clean, maintainable, and technically accurate TypeScript code with accurate examples.
    - Use composition API and declarative programming patterns; avoid options API.
    - Prefer iteration and modularization over code duplication.
    - Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
    - Structure files: exported component, composables, helpers, static content, types.
    
    Naming Conventions
    - Use lowercase with dashes for directories (e.g., components/auth-wizard).
    - Use PascalCase for component names (e.g., AuthWizard.vue).
    - Use camelCase for composables (e.g., useAuthState.ts).
    - Always refer to the official documentation for the correct naming conventions.
    
    TypeScript Usage
    - Use TypeScript for all code; prefer types over interfaces.
    - Avoid enums; use const objects instead.
    - Use Vue 3 with TypeScript, leveraging defineComponent and PropType.
    - Always refer to the official documentation for the correct usage of TypeScript.
    Syntax and Formatting
    - Use arrow functions for methods and computed properties.
    - Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
    - Use template syntax for declarative rendering.
    
    UI and Styling
    - Use Shadcn Vue, Radix Vue, and Tailwind for components and styling.
    - Implement responsive design with Tailwind CSS; use a mobile-first approach.
    - Use scss for styling
    - Use heroicons for icons

    Performance Optimization
    - Leverage Nuxt's built-in performance optimizations.
    - Use Suspense for asynchronous components.
    - Implement lazy loading for routes and components.
    - Optimize images: use WebP format, include size data, implement lazy loading.
    
    Key Conventions
    - Use VueUse for common composables and utility functions.
    - Use Pinia for state management.
    - Use pocketbase for database.
    - Use pocketbase for authentication.
    - Optimize Web Vitals (LCP, CLS, FID).
    - Utilize Nuxt's auto-imports feature for components and composables.
    
    Nuxt-specific Guidelines
    - Follow Nuxt 3 directory structure (e.g., pages/, components/, composables/).
    - Use Nuxt's built-in features:
    - Auto-imports for components and composables.
    - File-based routing in the pages/ directory.
    - Server routes in the server/ directory.
    - Leverage Nuxt plugins for global functionality.
    - Use useFetch and useAsyncData for data fetching.
    - Implement SEO best practices using Nuxt's useHead and useSeoMeta.
    
    Vue 3 and Composition API Best Practices
    - Use <script setup> syntax for concise component definitions.
    - Leverage ref, reactive, and computed for reactive state management.
    - Use provide/inject for dependency injection when appropriate.
    - Implement custom composables for reusable logic.
    
    Follow the official Nuxt.js and Vue.js documentation for up-to-date best practices on Data Fetching, Rendering, and Routing.

    Always consider the machine's operating system before giving commands and code examples.
      
    About this project:
        My company is a service company which provides software service to customers. Our software helps the customers to mange, there content on there displays where they have our player software. And we have a studio app which provides all functionalities like onboard a display. create designs(designs can be shared among displays. create schedules. and live update content. even in some touch enabled devices or we can have user interactions also)

        Keep that in mind.

        Actualy this nuxt js app is not for my clients. This app is for me and my staff who manage clients. We need the following stuff.

        0. Login to the dashboard
        1. create and manage tenants(organizations)
        2. create and manage users. (each user will have there own default tenant so when we add a tenant we should create or choose an owner, and also when we create user we should create a default tenant for the user)
        3. Add other user to another organization with different role
        4. Add or onboard displays to organization
        5. Create and manage subscription plans and add-on plans
        6. Manage plans of each tenants
        7. Manage and verify invoices (through stripe).

    Commit message should be in the following format:
    [type]: [description]

    type:
    - feat: new feature
    - fix: bug fix
    - docs: documentation
    - refactor: code refactoring
    - chore: other changes

    description:
    - should be a short description of the changes

    Example:
    - feat: add new feature
    - fix: fix bug
    - docs: update documentation
    - refactor: refactor code
    - chore: other changes
    need short and precise description.