manish1034 Matter-Frontend-Nuxtjs- .cursorrules file for Vue

# Matter PLM Development Guidelines

## Tech Stack Overview

### Frontend (matter-client)
- **Core**: Nuxt 3.14, Vue 3.4, TypeScript
- **UI**: Vuetify 3.7, PrimeVue 4.0, Syncfusion Components, Shadcn Vue, Radix Vue
- **State**: Pinia
- **Utilities**: VueUse, date-fns
- **File Handling**: Uppy, pdfmake, jspdf
- **Styling**: Tailwind CSS

### Backend (matter-server)
- **Core**: Laravel 11, PHP 8.2
- **Authentication Tokens**: JWT
- **Storage**: Firebase
- **Integration**: Shopify API, Reverb (Web Sockets)
- **Admin**: Filament 3.2, Livewire 3.0

---

## Development Workflow
Before coding, follow a four-step analysis process:
1. **Current State**: Assess the current state of the codebase.
2. **Requirements**: Define the requirements clearly.
3. **Risks**: Identify potential risks and mitigation strategies.
4. **Strategy**: Plan the best approach to meet the requirements.

---


Project Management:
- Reference cursorProject.md for all feature implementations
- Reference collection.json for all API endpoints and their request/response formats
- Follow the established database schema
- Maintain consistency with existing components


## Project Structure

**Frontend (Nuxt 3)**

matter-client/
├── components/          # Vue components
│   ├── ui/              # Base UI components
│   └── {feature}/       # Feature-specific components
├── layouts/             # Page layouts
├── pages/               # File-based routing
├── composables/         # Shared logic
├── plugins/             # Nuxt plugins
├── stores/              # Pinia stores
├── types/               # TypeScript definitions
└── utils/               # Helper functions

**Backend (Laravel 11)**

matter-server/
├── app/
│   ├── Http/
│   │   ├── Controllers/  # Feature-based controllers
│   │   └── Middleware/   # Request middleware
│   ├── Models/           # Eloquent models
│   ├── Services/         # Business logic
│   ├── Observers/        # Model observers
│   └── Traits/           # Shared traits
├── database/
│   ├── migrations/       # Database migrations
│   └── seeders/          # Database seeders
└── routes/
    └── api/              # API routes by feature

# FRONTEND (matter-client)
**Frontend Guidelines**

- Components and Icons
- Use Remix Iconify icons (ri-*).
- Do not use Material Design icons (mdi-*).
- Use Vuetify for layout components.
- Use PrimeVue for complex widgets.

**Code Style and Structure**

- Use TypeScript with concise, technical examples.
- Use Composition API and declarative patterns.
- Use Axios for API calls, not fetch method
- Do not put api/ infront of API routes since this is already configured to be done.
- All our API routes are in the collection.json file in the server/public/docs/collection.json file.
- Use <script setup lang='ts'> at the top and place the template at the bottom.
- Favor modular, iterative code; avoid duplication.
- Use descriptive variable names (e.g., isLoading, hasError).
- Preserve payload structure in async functions.
- Prefer types over interfaces; avoid enums (use constant objects).
- Use arrow functions for methods and computed properties.
- Leverage defineProps and defineComponent for strong typing.
- Avoid unnecessary curly braces and keep syntax concise.
- Keep only one onMounted, don't repeat anything which can be optimized
- Always shift onMounted at the last of the script
- Keep everything in short using existing function as much as possible.
- In Fetch functions Don't use localStorage to fetch access_token as it got clear in the plugin of axios instance already.
- While implementing new feature or any task, don't touch anything else other than that and try to use existing function to make it short and simple.

**Styling**

- Use Vuetify and Tailwind CSS:
- Utilize component props over custom classes.
- Avoid styling imported components unnecessarily.
- Minimize custom class usage.
- Follow Vuetify component patterns and Tailwind utility classes.
- Implement responsive design (mobile-first).

**Naming Conventions**

- Directories: lowercase with dashes (e.g., components/auth-wizard).
- Components: PascalCase (e.g., AuthWizard.vue).
- Composables: camelCase (e.g., useAuthState.ts).
- Models: PascalCase singular (e.g., User.php).
- Controllers: PascalCase with Controller suffix (e.g., UserController.php).

**Performance Optimization**

- Use Nuxt's built-in optimizations:
- Leverage Suspense for async components.
- Implement lazy-loading for routes and components.
- Optimize images (WebP, size metadata, lazy loading).
- Monitor Core Web Vitals (LCP, CLS, FID).
- Implement proper caching strategies.
- Use code splitting effectively.

# BACKEND (matter-server)
**Backend Guidelines (Laravel 11)**

## Key Principles
- Write concise, technical responses with accurate PHP examples.
- Follow Laravel best practices and conventions.
- Use object-oriented programming with a focus on SOLID principles.
- Prefer iteration and modularization over duplication.
- Use descriptive variable and method names.
- Use lowercase with dashes for directories (e.g., app/Http/Controllers).
- Favor dependency injection and service containers.

## PHP/Laravel
- Use PHP 8.2+ features when appropriate (e.g., typed properties, match expressions).
- Follow PSR-12 coding standards.
- Utilize Laravel's built-in features and helpers when possible.
- File structure: Follow Laravel's directory structure and naming conventions.
- Implement proper error handling and logging:
- Use Laravel's exception handling and logging features.
- Create custom exceptions when necessary.
- Use try-catch blocks for expected exceptions.
- Use Laravel's validation features for form and request validation.
- Implement middleware for request filtering and modification.
- Utilize Laravel's Eloquent ORM for database interactions.
- Use Laravel's query builder for complex database queries.
- Implement proper database migrations and seeders.

## Key Conventions
1. Follow Laravel's MVC architecture.
2. Use Laravel's routing system for defining application endpoints.
3. Implement proper request validation using Form Requests.
4. Implement proper database relationships using Eloquent.
5. Implement proper API resource transformations.
6. Use Laravel's event and listener system for decoupled code.
7. Implement proper database transactions for data integrity.
8. Use Laravel's built-in scheduling features for recurring tasks.

## Matter PLM Engineering Principles (Laravel)
1. Try keeping controllers thin with only CRUD methods (index, show, store, update, destroy).
2. Use relationship controllers for extra "verbs" while maintaining CRUD operations.
3. Implement the Action pattern for mutating business logic.
4. Avoid code duplication by utilizing existing patterns or creating new ones when necessary.
5. Use the Pipeline pattern for sequences of commands, especially in controllers that mutate data.
6. Implement logging in Actions to track their execution.
7. Use Request classes for validation instead of putting validation code in Controllers.
8. Utilize query scopes, custom collections, or static methods on models for fetching multiple models.
9. Use traits to add common functions to models.
10. Implement Resource classes for data transformation and standardization.
11. Manage dropdowns through the DropdownServiceProvider. It is automatically shared as part of InjectDropdowns middleware.
12. Only use Tailwind to implement CSS, Allow custom CSS under defined guidelines for specific needs.
13. All responses to the front end should be JSON responses.
14. All tables require company_id/brand_id fields.
15. Use AssignCompanyandBrand.php Trait to automatically assigns the company_id and brand_id, these fields shouldn't be come from the frontend payload.
16. Use HasCompanyOrBrandScope.php Trait to check if the authenticated user has any company or brand linked to it.
17. Use BasModel.php file to automatically assigns the row_position to required tables. (Use this file to extend existing Models.
18. Use DropdownServiceProvider.php to inject necessary dropdown data to the routes for specific pages.
19. Organize routes by feature in separate files (e.g., settings.php, account_settings.php, auth.php, product_development.php, sales.php, supply_chain.php, tasks.php).
20. Do not modify .env.example.

## Database Management Guidelines
### Migrations
- Create new migrations for tables with timestamped filenames (YYYY_MM_DD_HHMMSS)
- Always implement both up() and down() methods
- Include company_id and brand_id for multi-tenancy
- Use consistent nullable() patterns for optional fields
- Implement proper foreign key constraints with onDelete behaviors
- Group related fields with clear comments
- Standard fields: timestamps(), row_position for ordering
- Use descriptive table and column names
- Define proper field types and lengths

### Seeders
- Path: database/seeders
- Register all seeders in DatabaseSeeder.php
- Organize seeders in logical group- folders (eg: system, company, settings)
- Maintain proper seeding order for dependencies
- Create modular seeder classes by feature
- Handle relations and constraints properly
- Implement clear data structures
- Handle multi-tenancy in seed data