BarangaySystem/.claude/plans/d649faffd424aace60ec46a1fde5ff83-complete.md

task, cycles, context, private, started, finished

task	cycles	context	private	started	finished
Fix the bulk-apply "Apply" buttons on AddProductsToStore Step 2 (mobile layout broken)	5	true	false	2026-05-16T17:49:31Z	2026-05-16T17:49:35Z

files

• resources/js/Pages/AddProductsToStore.vue [lines 303-332] — Step 2 bulk-apply card with broken input-group layout

steps

1. In AddProductsToStore.vue at lines ~308-313 (price bulk-apply), replace <div class="input-group"> with <div class="d-flex gap-2 align-items-center"> and change the button class from btn btn-primary rounded-end-pill to btn btn-primary rounded-pill flex-shrink-0
2. In AddProductsToStore.vue at lines ~319-324 (availability bulk-apply), apply the identical replacement — input-group → d-flex gap-2 align-items-center, button class → btn btn-primary rounded-pill flex-shrink-0

context

Bulk apply card (lines 303-332):

<CardSimple class="mb-3">
    <div class="fw_6 mb-3">Bulk apply</div>
    <div class="row g-3 align-items-end">
        <div class="col-12 col-sm-5">
            <label class="form-label smallest text-muted mb-1">Set all prices (₱)</label>
            <div class="input-group">                                          <!-- CHANGE THIS -->
                <input v-model="bulkPrice" type="number" min="0" step="0.01" class="form-control"
                    placeholder="e.g. 50" />
                <button class="btn btn-primary rounded-end-pill" @click="applyBulkPrice">  <!-- AND THIS -->
                    Apply
                </button>
            </div>
        </div>
        <div class="col-12 col-sm-5">
            <label class="form-label smallest text-muted mb-1">Set all availability</label>
            <div class="input-group">                                          <!-- CHANGE THIS -->
                <input v-model="bulkAvailable" type="number" min="0" step="1" class="form-control"
                    placeholder="e.g. 100" />
                <button class="btn btn-primary rounded-end-pill" @click="applyBulkAvailable">  <!-- AND THIS -->
                    Apply
                </button>
            </div>
        </div>
        <div class="col-12 col-sm-2 d-flex align-items-end">
            <button class="btn btn-outline-secondary rounded-pill w-100" @click="backToPick">
                <i class="fas fa-arrow-left me-1"></i> Back
            </button>
        </div>
    </div>
</CardSimple>

Target (apply to both price and availability rows):

<div class="d-flex gap-2 align-items-center">
    <input v-model="bulkPrice" type="number" min="0" step="0.01" class="form-control"
        placeholder="e.g. 50" />
    <button class="btn btn-primary rounded-pill flex-shrink-0" @click="applyBulkPrice">
        Apply
    </button>
</div>

notes

• dictionary: ai-docs/dictionary.md
• linters: none detected
• constraints: mobile-first fix only — no backend changes, no new files, no route changes