name: Feature Request
about: Propose a new feature for MotoVaultPro
title: "[Feature]: "
labels:
  - type/feature
  - status/backlog
body:
  - type: markdown
    attributes:
      value: |
        ## Feature Request
        Use this template to propose new features. Be specific about requirements and integration points.

  - type: textarea
    id: problem
    attributes:
      label: Problem / User Need
      description: What problem does this feature solve? Who needs it and why?
      placeholder: "As a [user type], I want to [goal] so that [benefit]..."
    validations:
      required: true

  - type: textarea
    id: solution
    attributes:
      label: Proposed Solution
      description: Describe the feature and how it should work
      placeholder: "When the user does X, the system should Y..."
    validations:
      required: true

  - type: textarea
    id: non-goals
    attributes:
      label: Non-goals / Out of Scope
      description: What is explicitly NOT part of this feature?
      placeholder: |
        - Advanced analytics (future enhancement)
        - Data export functionality
        - etc.
    validations:
      required: false

  - type: textarea
    id: acceptance-criteria
    attributes:
      label: Acceptance Criteria (Feature Behavior)
      description: What must be true for this feature to be complete?
      placeholder: |
        - [ ] User can see X
        - [ ] System displays Y when Z
        - [ ] Works on mobile viewport (320px) with touch-friendly targets
        - [ ] Works on desktop viewport (1920px) with keyboard navigation
    validations:
      required: true

  - type: textarea
    id: integration-criteria
    attributes:
      label: Integration Criteria (App Flow)
      description: How does this feature integrate into the app? This prevents missed navigation/routing.
      value: |
        ### Navigation
        - [ ] Desktop sidebar: [not needed / add as item #X / replace existing]
        - [ ] Mobile bottom nav: [not needed / add to left/right items]
        - [ ] Mobile hamburger menu: [not needed / add to menu items]

        ### Routing
        - [ ] Desktop route path: `/garage/[feature-name]`
        - [ ] Is this the default landing page after login? [yes / no]
        - [ ] Replaces existing placeholder/route: [none / specify what]

        ### State Management
        - [ ] Mobile screen type needed in navigation store? [yes / no]
        - [ ] New Zustand store needed? [yes / no]
    validations:
      required: true

  - type: textarea
    id: visual-integration
    attributes:
      label: Visual Integration (Design Consistency)
      description: Ensure the feature matches the app's visual language. Reference existing patterns.
      value: |
        ### Icons
        - [ ] Use MUI Rounded icons only (e.g., `HomeRoundedIcon`, `DirectionsCarRoundedIcon`)
        - [ ] Icon reference: Check `frontend/src/components/Layout.tsx` for existing icons
        - [ ] No emoji icons in UI (text content only)

        ### Colors
        - [ ] Use theme colors via MUI sx prop: `color: 'primary.main'`, `bgcolor: 'background.paper'`
        - [ ] No hardcoded hex colors (use Tailwind theme classes or MUI theme)
        - [ ] Dark mode support: Use `dark:` Tailwind variants or MUI `theme.applyStyles('dark', ...)`

        ### Components
        - [ ] Use existing shared components: `GlassCard`, `Button`, `Input` from `shared-minimal/`
        - [ ] Follow card patterns in: `frontend/src/features/vehicles/` or `frontend/src/features/fuel-logs/`
        - [ ] Loading states: Use skeleton patterns from existing features

        ### Typography & Spacing
        - [ ] Use MUI Typography variants: `h4`, `h5`, `body1`, `body2`, `caption`
        - [ ] Use consistent spacing: `gap-4`, `space-y-4`, `p-4` (multiples of 4)
        - [ ] Mobile padding: `px-5 pt-5 pb-3` pattern from Layout.tsx
    validations:
      required: true

  - type: textarea
    id: implementation-notes
    attributes:
      label: Implementation Notes
      description: Technical hints, existing patterns to follow, files to modify
      placeholder: |
        - Current placeholder: frontend/src/App.tsx lines X-Y
        - Create new feature directory: frontend/src/features/[name]/
        - Backend APIs already exist for X, Y, Z
        - Follow pattern in: frontend/src/features/vehicles/
    validations:
      required: false

  - type: textarea
    id: test-plan
    attributes:
      label: Test Plan
      description: How will this feature be tested?
      placeholder: |
        **Unit tests:**
        - Component tests for X, Y, Z

        **Integration tests:**
        - Test data fetching with mocked API responses

        **Manual testing:**
        - Verify mobile layout at 320px, 768px viewports
        - Verify desktop layout at 1920px viewport
        - Test with 0 items, 1 item, 10+ items
    validations:
      required: false