initial: bootstrap from BukidBountyApp base

docs/completed/prt-20260403-032827.md

@@ -0,0 +1,54 @@
+# Plan: Standardize Vue Element Components & Design System Elevation
+
+## 🎯 Goal
+Standardize all UI elements across the application by replacing raw HTML elements (`button`, `input`, `select`, `textarea`, `label`, `checkbox`) with a centralized set of highly customizable, premium-designed Vue components. This will ensure visual consistency, reduce code duplication in `<style>` blocks, and provide a state-of-the-art "WOW" factor for the user.
+
+## 🏗️ Technical Approach
+
+### 1. Component Enhancements (`resources/js/Components/Core/Forms/`)
+We will upgrade the existing "InputGroup" components to support premium aesthetics (glassmorphism, subtle gradients, and micro-animations) and deep customizability through props.
+
+#### Shared Features across all Form Components:
+- **Premium Styling**: Default to a high-end look (rounded corners, soft shadows, theme-aware glass effects).
+- **Error Handling**: Standardized `error` prop and error message display.
+- **Labels & Hints**: Consistent handling of labels (with optional required asterisks) and hint text.
+- **Size Variants**: `sm`, `md` (default), `lg`.
+- **States**: `disabled`, `readonly`, `loading`.
+
+#### Specific Component Upgrades:
+- **`InputGroup.vue`**: 
+    - Support for different text-based input types (text, email, password, date, etc.).
+    - Built-in clear button option.
+- **`InputGroupSelect.vue`**:
+    - Consistent icon positioning and custom dropdown styling.
+- **`InputGroupTextarea.vue`**:
+    - Support for `rows`, `autoResize`.
+- **`InputGroupButton.vue`**:
+    - New `variant` prop: `primary`, `secondary`, `outline`, `glass`, `danger`, `text`.
+    - Integrated `LoadingSpinner` when `loading` prop is true.
+    - Hover animations and scale effects.
+- **`InputGroupCheckbox.vue`**:
+    - Premium custom checkbox design (replacing browser defaults).
+    - Support for toggle/switch style.
+
+### 2. New Core Components
+- **`BaseCard.vue` / `PremiumCard.vue`**: To replace repeated card structures like those in `EditStoreUltimate.vue`, supporting glassmorphism and header/footer slots.
+
+### 3. Scanning and Replacement Phase
+A systematic approach to scan `resources/js/Pages/` and replace raw elements:
+1.  **Batch 1: Core Pages** (Dashboard, Home, User Profiles).
+2.  **Batch 2: Market Pages** (Store Management, Add/Edit Store, POS).
+3.  **Batch 3: Configuration & Settings**.
+
+## 🎨 Design Tokens (Global Update)
+Ensure `app.js` or a new `theme.css` contains the necessary variables for these premium components to pull from, respecting the `dark-mode` state.
+
+## 🚀 Implementation Workflow
+1.  **Refine Core Components**: Update the `Core/Forms` components with new props and premium logic.
+2.  **Component Proofing**: Test the new components in a dedicated playground page or by updating a single high-visibility page (e.g., `EditStoreUltimate.vue`).
+3.  **Broad Replacement**: Iterate through all identified pages, replacing raw HTML with standardized components and removing redundant `<style>` code.
+4.  **Audit**: Final check for any missed raw elements or styling inconsistencies.
+
+## ⚠️ Stability & Compatibility
+- Maintain existing `modelValue` / `v-model` compatibility to avoid breaking functional logic.
+- Ensure props are optional or have sensible defaults to minimize immediate breakage during the transition.