pgo-uiux2 1.0.0

package/.env

@@ -0,0 +1 @@
+VITE_API_BASE_URL=https://uiapi.pgo.mv/api

package/.env.production

@@ -0,0 +1 @@
+VITE_API_BASE_URL=https://your-production-api.com/api

package/.prettierrc

@@ -0,0 +1,13 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "useTabs": false,
+  "trailingComma": "none",
+  "printWidth": 140,
+  "vueIndentScriptAndStyle": true,
+  "htmlWhitespaceSensitivity": "ignore",
+  "singleAttributePerLine": false,
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "embeddedLanguageFormatting": "auto"
+}

package/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

package/BUTTON_GUIDE.md

@@ -0,0 +1,257 @@
+# Button Component Guide
+
+## Overview
+
+The Button component has been refactored to use **semantic theme tokens** instead of hardcoded colors. It now automatically adapts to any theme and switches between light/dark variants.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | String | `'contained'` | Button style: `'contained'` \| `'outlined'` \| `'text'` \| `'tonal'` \| `'plain'` |
+| `color` | String | `'primary'` | Button color: `'primary'` \| `'secondary'` \| `'gray'` (or any other color) |
+| `size` | String | `'md'` | Button size: `'xs'` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'` |
+| `rounded` | String | `'md'` | Border radius: `'none'` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'` \| `'full'` |
+| `block` | Boolean | `false` | Full width button |
+| `disabled` | Boolean | `false` | Disable button |
+| `loading` | Boolean | `false` | Show loading state |
+| `label` | String | `''` | Button label (supports i18n keys like `'buttons.submit'`) |
+| `icon` | String | `''` | Icon name from HeroIcons |
+| `prependIcon` | String | `''` | Icon before label |
+| `appendIcon` | String | `''` | Icon after label |
+| `padding` | Boolean | `false` | Custom padding (when using icon-only) |
+| `lang` | String | `''` | Component-level language override |
+
+## Usage Examples
+
+### Basic Button
+```vue
+<Button color="primary">Click Me</Button>
+```
+
+### Variants
+
+#### Contained (default)
+```vue
+<Button color="primary" variant="contained">Contained</Button>
+<Button color="secondary" variant="contained">Secondary</Button>
+```
+
+#### Outlined
+```vue
+<Button color="primary" variant="outlined">Outlined</Button>
+```
+
+#### Text
+```vue
+<Button color="primary" variant="text">Text Only</Button>
+```
+
+#### Tonal
+```vue
+<Button color="primary" variant="tonal">Tonal</Button>
+```
+
+#### Plain
+```vue
+<Button color="primary" variant="plain">Plain</Button>
+```
+
+### Sizes
+```vue
+<Button size="xs">Extra Small</Button>
+<Button size="sm">Small</Button>
+<Button size="md">Medium</Button>
+<Button size="lg">Large</Button>
+<Button size="xl">Extra Large</Button>
+```
+
+### With Icons
+```vue
+<Button prependIcon="heart">Add to Favorites</Button>
+<Button appendIcon="arrow-right">Next</Button>
+<Button icon="bell" padding />
+```
+
+### States
+```vue
+<Button disabled>Disabled</Button>
+<Button loading>Loading...</Button>
+<Button block>Full Width</Button>
+```
+
+### Border Radius
+```vue
+<Button rounded="none">Sharp</Button>
+<Button rounded="sm">Small Radius</Button>
+<Button rounded="md">Medium Radius</Button>
+<Button rounded="full">Pill Button</Button>
+```
+
+### With Custom Slots
+```vue
+<Button color="primary">
+  <template #prepend>
+    <CustomIcon />
+  </template>
+  Click Me
+</Button>
+
+<Button color="secondary">
+  <template #append>
+    <ArrowIcon />
+  </template>
+  Next Step
+</Button>
+```
+
+### Internationalization (i18n)
+```vue
+<!-- Uses 'buttons.submit' key from i18n -->
+<Button label="buttons.submit" />
+
+<!-- Direct label -->
+<Button label="Click Me" />
+```
+
+## Theme Integration
+
+### Color Mapping
+
+The Button component automatically uses theme tokens:
+
+| Color | Primary Token | Text Token |
+|-------|---------------|-----------|
+| `primary` | `--vts-color-primary` | `--vts-color-primaryText` |
+| `secondary` | `--vts-color-secondary` | `--vts-color-secondaryText` |
+| `gray` (default) | `--vts-color-surface` | `--vts-color-text` |
+
+### Variant Styles
+
+Each variant uses theme tokens:
+
+- **Contained**: Solid background with primary color
+- **Outlined**: Transparent background with colored border
+- **Text**: No background, text only
+- **Tonal**: Light background with text color
+- **Plain**: Minimal styling, transparent background
+
+### Border Radius
+
+Uses theme radius tokens:
+- `none` → `var(--vts-radius-none)`
+- `sm` → `var(--vts-radius-sm)`
+- `md` → `var(--vts-radius-md)` (default)
+- `lg` → `var(--vts-radius-lg)`
+- `xl` → `var(--vts-radius-xl)`
+- `full` → `var(--vts-radius-full)`
+
+### Dark Mode Support
+
+Buttons automatically adjust colors when switching between light and dark themes because they use CSS variables from the theme system.
+
+## Events
+
+```vue
+<Button @click="handleClick">Click Me</Button>
+```
+
+The `click` event is emitted when the button is clicked (unless disabled or loading).
+
+## Best Practices
+
+✅ **Do:**
+- Use semantic colors: `primary`, `secondary`, `gray`
+- Leverage built-in variants for consistent styling
+- Use `label` prop with i18n keys for internationalization
+- Use icon props for consistent icon sizing
+- Use `block` for full-width buttons when needed
+
+❌ **Don't:**
+- Override button styles with custom CSS classes
+- Hardcode colors directly
+- Use raw HTML buttons in examples; use the Button component instead
+- Mix icon systems (use HeroIcons consistently)
+
+## Complete Example
+
+```vue
+<template>
+  <div class="space-y-4 p-6">
+    <!-- Primary action -->
+    <Button color="primary" size="md">Save Changes</Button>
+
+    <!-- Secondary action -->
+    <Button color="secondary" variant="outlined">Cancel</Button>
+
+    <!-- With icons -->
+    <Button prependIcon="heart" color="primary">Add to Favorites</Button>
+    <Button appendIcon="arrow-right">Next Step</Button>
+
+    <!-- Different variants -->
+    <Button variant="text">Text Link</Button>
+    <Button variant="tonal" color="secondary">Info</Button>
+
+    <!-- States -->
+    <Button disabled>Disabled</Button>
+    <Button loading>Processing...</Button>
+    <Button block>Full Width Action</Button>
+
+    <!-- All sizes -->
+    <div class="space-x-2">
+      <Button size="xs">XS</Button>
+      <Button size="sm">SM</Button>
+      <Button size="md">MD</Button>
+      <Button size="lg">LG</Button>
+      <Button size="xl">XL</Button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Button from '@/components/pgo/Button.vue'
+</script>
+```
+
+## Theme Customization
+
+To customize button appearance globally, edit the theme tokens in `/src/tokens/index.js`:
+
+```javascript
+export const themes = {
+  default: {
+    light: {
+      color: {
+        primary: '#0066ff',        // Changes all primary buttons
+        primaryText: '#ffffff',
+        secondary: '#64748b',      // Changes all secondary buttons
+        secondaryText: '#ffffff'
+      },
+      radius: {
+        md: '8px'  // Default button border radius
+      }
+    }
+  }
+}
+```
+
+No component-specific Button configuration needed! The Button component automatically uses the semantic tokens.
+
+## Migration from Old Approach
+
+### Before (hardcoded styles in example components)
+```vue
+<button :style="{
+  backgroundColor: '#0066ff',
+  color: 'white',
+  borderRadius: '8px',
+  padding: '0.5rem 1rem'
+}">Click</button>
+```
+
+### After (use Button component)
+```vue
+<Button color="primary">Click</Button>
+```
+
+Much cleaner and theme-aware! 🎉

package/README.md

@@ -0,0 +1,49 @@
+# uiux
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Recommended Browser Setup
+
+- Chromium-based browsers (Chrome, Edge, Brave, etc.):
+  - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
+  - [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
+- Firefox:
+  - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
+  - [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### New components
+
+`NavDrawerItem` — A small wrapper to create consistent navigation items inside `NavDrawer`. Use it like:
+
+```vue
+<NavDrawerItem href="#/">
+  <HeroIcon name="home" /> Dashboard
+</NavDrawerItem>
+```
+
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```

package/THEME_REFERENCE.md

@@ -0,0 +1,310 @@
+# Theme System Reference
+
+## Overview
+
+This project uses a **semantic token-based theme system** where components reference generic design tokens rather than component-specific keys. This approach ensures consistency and scalability across all components.
+
+## CSS Variable Naming Convention
+
+All theme tokens are converted to CSS variables with the prefix `--vts-`:
+
+```
+Token path: color.text → CSS variable: --vts-color-text
+Token path: shadow.md → CSS variable: --vts-shadow-md
+Token path: elevation.2 → CSS variable: --vts-elevation-2
+```
+
+## Available Semantic Tokens
+
+### Color Tokens
+
+Use these for ALL components (no component-specific color keys needed):
+
+| Token | CSS Variable | Usage |
+|-------|-------------|--------|
+| `color.text` | `--vts-color-text` | Primary text color |
+| `color.textSecondary` | `--vts-color-text-secondary` | Secondary/muted text |
+| `color.background` | `--vts-color-background` | Page background |
+| `color.surface` | `--vts-color-surface` | Card/panel backgrounds |
+| `color.surfaceElevated` | `--vts-color-surface-elevated` | Elevated surfaces (AppBar, modals) |
+| `color.primary` | `--vts-color-primary` | Primary brand color |
+| `color.primaryText` | `--vts-color-primary-text` | Text on primary color |
+| `color.secondary` | `--vts-color-secondary` | Secondary brand color |
+| `color.border` | `--vts-color-border` | Default borders |
+| `color.borderLight` | `--vts-color-border-light` | Subtle borders |
+| `color.borderHeavy` | `--vts-color-border-heavy` | Emphasized borders |
+| `color.divider` | `--vts-color-divider` | Divider lines |
+| `color.overlay` | `--vts-color-overlay` | Modal/dialog overlays |
+| `color.success` | `--vts-color-success` | Success states |
+| `color.warning` | `--vts-color-warning` | Warning states |
+| `color.error` | `--vts-color-error` | Error states |
+| `color.info` | `--vts-color-info` | Info states |
+
+### Border Radius Tokens
+
+| Token | CSS Variable | Usage |
+|-------|-------------|--------|
+| `radius.sm` | `--vts-radius-sm` | Small radius (buttons, chips) |
+| `radius.md` | `--vts-radius-md` | Medium radius (cards, inputs) |
+| `radius.lg` | `--vts-radius-lg` | Large radius (modals) |
+| `radius.xl` | `--vts-radius-xl` | Extra large radius |
+| `radius.full` | `--vts-radius-full` | Fully rounded (pills, avatars) |
+
+### Shadow Tokens
+
+| Token | CSS Variable | Usage |
+|-------|-------------|--------|
+| `shadow.sm` | `--vts-shadow-sm` | Small shadow |
+| `shadow.md` | `--vts-shadow-md` | Medium shadow (default) |
+| `shadow.lg` | `--vts-shadow-lg` | Large shadow (cards) |
+| `shadow.xl` | `--vts-shadow-xl` | Extra large shadow (modals) |
+
+### Elevation Tokens
+
+Elevations provide consistent shadow levels:
+
+| Token | CSS Variable | Usage |
+|-------|-------------|--------|
+| `elevation.0` | `--vts-elevation-0` | No elevation |
+| `elevation.1` | `--vts-elevation-1` | Slight elevation |
+| `elevation.2` | `--vts-elevation-2` | Medium elevation (AppBar) |
+| `elevation.3` | `--vts-elevation-3` | High elevation (floating) |
+| `elevation.4` | `--vts-elevation-4` | Maximum elevation (modals) |
+
+## Component Examples
+
+### AppBar (Updated Example)
+
+```vue
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  elevation: { type: Number, default: 2 }
+})
+
+const themeStyles = computed(() => ({
+  backgroundColor: 'var(--vts-color-surface-elevated)',
+  color: 'var(--vts-color-text)',
+  boxShadow: `var(--vts-elevation-${props.elevation})`,
+  borderBottom: '1px solid var(--vts-color-border)'
+}))
+</script>
+
+<template>
+  <header :style="themeStyles">
+    <!-- content -->
+  </header>
+</template>
+```
+
+### Card Component
+
+```vue
+<script setup>
+const cardStyles = computed(() => ({
+  backgroundColor: 'var(--vts-color-surface)',
+  color: 'var(--vts-color-text)',
+  borderRadius: 'var(--vts-radius-md)',
+  boxShadow: 'var(--vts-shadow-md)',
+  border: '1px solid var(--vts-color-border-light)'
+}))
+</script>
+
+<template>
+  <div :style="cardStyles">
+    <slot />
+  </div>
+</template>
+```
+
+### Button Component
+
+```vue
+<script setup>
+const props = defineProps({
+  variant: { type: String, default: 'primary' }
+})
+
+const buttonStyles = computed(() => {
+  if (props.variant === 'primary') {
+    return {
+      backgroundColor: 'var(--vts-color-primary)',
+      color: 'var(--vts-color-primary-text)',
+      borderRadius: 'var(--vts-radius-sm)'
+    }
+  }
+  return {
+    backgroundColor: 'var(--vts-color-surface)',
+    color: 'var(--vts-color-text)',
+    border: '1px solid var(--vts-color-border)',
+    borderRadius: 'var(--vts-radius-sm)'
+  }
+})
+</script>
+```
+
+### Modal Component
+
+```vue
+<script setup>
+const modalStyles = computed(() => ({
+  backgroundColor: 'var(--vts-color-surface-elevated)',
+  color: 'var(--vts-color-text)',
+  borderRadius: 'var(--vts-radius-lg)',
+  boxShadow: 'var(--vts-elevation-4)'
+}))
+
+const overlayStyles = computed(() => ({
+  backgroundColor: 'var(--vts-color-overlay)'
+}))
+</script>
+```
+
+### Input Component
+
+```vue
+<script setup>
+const inputStyles = computed(() => ({
+  backgroundColor: 'var(--vts-color-surface)',
+  color: 'var(--vts-color-text)',
+  border: '1px solid var(--vts-color-border)',
+  borderRadius: 'var(--vts-radius-sm)'
+}))
+
+const focusStyles = {
+  borderColor: 'var(--vts-color-primary)'
+}
+</script>
+```
+
+### Divider Component
+
+```vue
+<template>
+  <hr :style="{
+    borderTop: '1px solid var(--vts-color-divider)',
+    margin: '16px 0'
+  }" />
+</template>
+```
+
+## Best Practices
+
+### ✅ DO
+
+- **Use semantic tokens** for all component styling
+- **Reference elevation levels** for consistent shadows
+- **Use surface tokens** for backgrounds (surface, surfaceElevated)
+- **Use border variants** based on emphasis (border, borderLight, borderHeavy)
+- **Use state colors** for feedback (success, warning, error, info)
+
+```vue
+// ✅ Good
+const styles = {
+  backgroundColor: 'var(--vts-color-surface)',
+  border: '1px solid var(--vts-color-border)',
+  boxShadow: 'var(--vts-elevation-2)'
+}
+```
+
+### ❌ DON'T
+
+- **Don't create component-specific color keys** in theme tokens
+- **Don't hardcode colors** in components
+- **Don't use arbitrary shadow values** - use elevation levels
+
+```vue
+// ❌ Bad - component-specific theme key
+const styles = {
+  backgroundColor: 'var(--vts-my-component-background)', // Don't do this
+  boxShadow: '0 2px 4px rgba(0,0,0,0.1)' // Use elevation instead
+}
+
+// ❌ Bad - hardcoded color
+const styles = {
+  backgroundColor: '#ffffff', // Use token instead
+  color: '#000000'
+}
+```
+
+## Adding New Themes
+
+When creating a new theme, only define these semantic tokens:
+
+```javascript
+export const themes = {
+  myNewTheme: {
+    light: {
+      color: {
+        text: '...',
+        textSecondary: '...',
+        background: '...',
+        surface: '...',
+        surfaceElevated: '...',
+        primary: '...',
+        primaryText: '...',
+        border: '...',
+        // ... all semantic colors
+      },
+      radius: { sm: '...', md: '...', lg: '...', xl: '...', full: '...' },
+      shadow: { sm: '...', md: '...', lg: '...', xl: '...' },
+      elevation: { 0: 'none', 1: '...', 2: '...', 3: '...', 4: '...' }
+    },
+    dark: {
+      // Same structure
+    }
+  }
+}
+```
+
+**No component-specific keys needed!** All components reference the same semantic tokens.
+
+## Migration Guide
+
+If you have existing components using component-specific tokens:
+
+### Before (component-specific):
+```javascript
+// tokens/index.js
+appBar: {
+  background: '#ffffff',
+  text: '#000000',
+  border: 'rgba(0,0,0,0.1)'
+}
+
+// AppBar.vue
+const styles = {
+  backgroundColor: 'var(--app-bar-background)'
+}
+```
+
+### After (semantic):
+```javascript
+// tokens/index.js - no appBar key needed!
+color: {
+  surfaceElevated: '#ffffff',
+  text: '#000000',
+  border: 'rgba(0,0,0,0.1)'
+}
+
+// AppBar.vue
+const styles = {
+  backgroundColor: 'var(--vts-color-surface-elevated)'
+}
+```
+
+## Benefits
+
+1. **Consistency**: All components use the same design language
+2. **Scalability**: Add new components without adding theme keys
+3. **Maintainability**: Update colors in one place, affects all components
+4. **Smaller bundle**: No duplicate theme definitions per component
+5. **Flexibility**: Switch themes without updating components
+6. **Type safety**: Predictable token structure
+
+## Questions?
+
+- Want a specific semantic token? Consider adding it to the base theme rather than creating a component-specific key
+- Need component-specific behavior? Use props and computed styles, not theme tokens
+- Unsure which token to use? Check this reference guide!

package/eslint.config.ts

@@ -0,0 +1,27 @@
+import vue from 'eslint-plugin-vue'
+
+export default [
+  ...vue.configs['flat/recommended'],
+
+  {
+    files: ['**/*.vue'],
+    plugins: { vue },
+    rules: {
+      'vue/block-order': [
+        'error',
+        {
+          order: ['template', 'script', 'style']
+        }
+      ],
+      'vue/max-attributes-per-line': 'off',
+      'vue/attributes-order': 'off',
+      'vue/multi-word-component-names': 'off',
+      'vue/opening-bracket-newline': 'off',
+      'vue/closing-bracket-newline': 'off',
+      'vue/jsx-opening-bracket-newline': 'off',
+      'vue/jsx-closing-bracket-newline': 'off',
+      'vue/singleline-html-element-content-newline': 'off',
+      'vue/multiline-html-element-content-newline': 'off'
+    }
+  }
+]

package/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="" class="dark">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>