# Checklist: UI Component Standardization & Premium Elevation

## 🧩 1. Core Component Enhancements (Phase 1)
Upgrade components in `resources/js/Components/Core/Forms/` with premium logic and props.

- [x] **`InputGroup.vue`**:
    - [x] Add `error` (String) prop for displaying validation messages.
    - [x] Add `hint` (String) prop for supporting text under the input.
    - [x] Add `isPremium` (Boolean, default true) for enabling premium glassmorphism styles.
    - [x] Add `variant` (String, 'default' | 'glass' | 'soft') prop.
    - [x] Standardize the label to include a red asterisk if `required` is true.
    - [x] Refactor styles to pull from global theme variables (`--bg-secondary`, `--text-primary`).

- [x] **`InputGroupSelect.vue`**:
    - [x] Add `error` and `hint` props.
    - [x] Add `isPremium` and `variant` props.
    - [x] Support flexible `options` format (Array of Strings or Array of Objects `{ value, text }`).
    - [x] Update dropdown arrow styling for premium look.

- [x] **`InputGroupButton.vue`**:
    - [x] Add `variant` (String, 'primary' | 'secondary' | 'outline' | 'danger' | 'glass' | 'text').
    - [x] Add `loading` (Boolean) to show integrated `LoadingSpinner`.
    - [x] Add `size` (String, 'sm' | 'md' | 'lg').
    - [x] Add `disabled` prop handling (visual and functional).
    - [x] Add default slot support for complex button content (icons + text).
    - [x] Remove hardcoded `text` prop requirement if slot is present.

- [x] **`InputGroupTextarea.vue`**:
    - [x] Add `rows` (Number, default 3) prop.
    - [x] Add `error` and `hint` props.
    - [x] Add `isPremium` and `variant` props.
    - [x] Ensure styling matches `InputGroup.vue`.

- [x] **`InputGroupCheckbox.vue`**:
    - [x] Add `label` (String) prop.
    - [x] Add `error` prop.
    - [x] Add `isSwitch` (Boolean) prop for toggle-style checkbox.
    - [x] Replace native checkbox with a premium, theme-aware custom design.

- [x] **`CardSimple.vue`**:
    - [x] Add `isPremium` / `glass` (Boolean) prop for background glassmorphism.
    - [x] Add `noPadding` (Boolean) for custom body content.
    - [x] Add `shadow` (String, 'none' | 'sm' | 'md' | 'lg') prop.

## 🔍 2. Scanning & Replacement (Phase 2)
Identify and replace raw HTML elements in all pages.

### High-Priority Pages (Standardize first)
- [x] **`EditStoreUltimate.vue`**:
    - [x] Replace `input` with `InputGroup`.
    - [x] Replace `select` with `InputGroupSelect`.
    - [x] Replace `textarea` with `InputGroupTextarea`.
    - [x] Replace `button` with `InputGroupButton`.
    - [x] Remove excessive `<style>` blocks once standardized components are used.
- [x] **`UserInfoEdit.vue`**:
    - [x] Replace extensive set of ~40+ raw `input` and `select` with `InputGroup` components.
- [x] **`ShipmentDetail.vue`**:
    - [x] Standardize action buttons with `InputGroupButton` variants.
- [x] **`AccountSettings.vue`**:
    - [x] Replace user info inputs and buttons.

### Page Audit & Cleanup
- [x] **`resources/js/Pages/`**: Scan all remaining files for raw `<button>`, `<input>`, `<select>`, `<textarea>`.
- [x] **Consistency Check**: Verify that all replaced components correctly bind `v-model` and handle events like `@click` or `@change`.
- [x] **Dead Code Removal**: Search for and remove local CSS like `.premium-input`, `.premium-select`, `.btn-premium-launch` from component `<style>` blocks after they are integrated into the core components.

## 🏗️ 3. Build & Verification (Phase 3)
- [x] **NPM Build**: Run `npm run build` to ensure all changes are compiled.
- [x] **Visual Audit**: Verify the "WOW" factor across different pages and screen sizes.
- [x] **Docker Restart**: `docker restart bukidbountyapp`.
- [x] **Baseline Check**: Run tests again to ensure no regressions in functional logic.