BarangaySystem/docs/completed/chklist-20260403-032827.md

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.

• InputGroup.vue:

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

• InputGroupSelect.vue:

  • Add error and hint props.
  • Add isPremium and variant props.
  • Support flexible options format (Array of Strings or Array of Objects { value, text }).
  • Update dropdown arrow styling for premium look.

• InputGroupButton.vue:

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

• InputGroupTextarea.vue:

  • Add rows (Number, default 3) prop.
  • Add error and hint props.
  • Add isPremium and variant props.
  • Ensure styling matches InputGroup.vue.

• InputGroupCheckbox.vue:

  • Add label (String) prop.
  • Add error prop.
  • Add isSwitch (Boolean) prop for toggle-style checkbox.
  • Replace native checkbox with a premium, theme-aware custom design.

• CardSimple.vue:

  • Add isPremium / glass (Boolean) prop for background glassmorphism.
  • Add noPadding (Boolean) for custom body content.
  • 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)

• EditStoreUltimate.vue:
  • Replace input with InputGroup.
  • Replace select with InputGroupSelect.
  • Replace textarea with InputGroupTextarea.
  • Replace button with InputGroupButton.
  • Remove excessive <style> blocks once standardized components are used.
• UserInfoEdit.vue:
  • Replace extensive set of ~40+ raw input and select with InputGroup components.
• ShipmentDetail.vue:
  • Standardize action buttons with InputGroupButton variants.
• AccountSettings.vue:
  • Replace user info inputs and buttons.

Page Audit & Cleanup

• resources/js/Pages/: Scan all remaining files for raw <button>, <input>, <select>, <textarea>.
• Consistency Check: Verify that all replaced components correctly bind v-model and handle events like @click or @change.
• 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)

• NPM Build: Run npm run build to ensure all changes are compiled.
• Visual Audit: Verify the "WOW" factor across different pages and screen sizes.
• Docker Restart: docker restart bukidbountyapp.
• Baseline Check: Run tests again to ensure no regressions in functional logic.