---
task: In CreateProductUltimate.vue store-picker modal, allow Big 3 users (ultimate, super operator, operator) to complete product creation without assigning to a store
cycles: 5
context: true
private: false
started: 2026-05-29T04:36:00Z
finished: 2026-05-29T04:36:30Z
---

## files
- resources/js/Pages/CreateProductUltimate.vue [1-323, 570-614] — all logic + store-picker modal template

## steps
1. In `CreateProductUltimate.vue` `<script setup>`, import `useAuth` and compute `isBig3`:
   ```js
   import { useAuth } from '../composables/Core/useAuth'
   const { isUltimate, isSuperOperator, isOperator } = useAuth()
   const isBig3 = computed(() => isUltimate.value || isSuperOperator.value || isOperator.value)
   ```

2. In `openStorePicker` (line 271-275): for Big 3 users, do NOT pre-select any store so the picker starts with no selection (making it visually optional):
   ```js
   const openStorePicker = () => {
     showMatchesModal.value = false
     pickerStore.value = isBig3.value ? '' : (selectedStore.value || (selectableStores.value[0]?.hashkey ?? ''))
     showStorePickerModal.value = true
   }
   ```

3. In `confirmAndCreate` (line 278): relax the store-required guard so it only applies to non-Big 3:
   ```js
   const confirmAndCreate = async () => {
     if (!isBig3.value && selectableStores.value.length > 0 && !pickerStore.value) {
       error.value = 'Please select a store to assign this product to.'
       return
     }
     selectedStore.value = pickerStore.value
     showStorePickerModal.value = false
     await handleSubmit()
   }
   ```

4. In the store-picker modal template (line 576-611), make two changes:
   a. Subtitle: show "optional" note for Big 3 —
      ```html
      <p class="text-muted small mb-0">
        Pick the store this product will be listed in.
        <span v-if="isBig3" class="ms-1 badge bg-info-subtle text-info rounded-pill" style="font-size:0.7em">Optional for your account</span>
      </p>
      ```
   b. "Confirm & Create" button `:disabled` — remove store requirement for Big 3:
      ```html
      :disabled="isLoading || (!isBig3 && selectableStores.length > 0 && !pickerStore)"
      ```
   c. Add a helper note inside `bb-modal-body` when Big 3 and no store selected:
      ```html
      <p v-if="isBig3 && !pickerStore" class="text-muted small mt-2 mb-0">
        <i class="fas fa-info-circle me-1"></i>No store selected — product will be created as a global listing only.
      </p>
      ```

## context
### useAuth pattern (from MyStores.vue)
```js
import { useAuth } from '../composables/Core/useAuth'
const { user, isLoggedIn, isUltimate, isSuperOperator, isOperator } = useAuth()
const isBig3 = computed(() => isUltimate.value || isSuperOperator.value || isOperator.value)
```

### confirmAndCreate current (line 277-285)
```js
const confirmAndCreate = async () => {
  if (selectableStores.value.length > 0 && !pickerStore.value) {
    error.value = 'Please select a store to assign this product to.'
    return
  }
  selectedStore.value = pickerStore.value
  showStorePickerModal.value = false
  await handleSubmit()
}
```

### handleSubmit sends (line 198-210)
```js
await axios.post('/Products/Admin/New/', {
  ...
  TargetStore: selectedStore.value,   // backend validates as nullable — OK when empty for Big 3
  ...
})
```

### Backend (ProductController@createNew_Admin line 64)
```php
'TargetStore' => 'nullable|string',
// Big 3 has CreateProductGlobal → no store required, product created globally
```

### Store picker modal footer (line 602-611)
```html
<div class="bb-modal-footer">
  <button class="btn btn-link text-muted" @click="showStorePickerModal = false">Cancel</button>
  <button
    class="btn btn-primary rounded-pill px-4"
    :disabled="isLoading || (selectableStores.length > 0 && !pickerStore)"
    @click="confirmAndCreate"
  >
    <span v-if="isLoading"><LoadingSpinner size="small" class="me-2" /> Creating...</span>
    <span v-else>Confirm &amp; Create</span>
  </button>
</div>
```

## notes
- dictionary: ai-docs/dictionary.md
- linters: eslint
- constraints: backend already handles empty TargetStore for Big 3 (nullable + CreateProductGlobal permission). No backend changes needed. Frontend-only change.