# 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.