feat: add initial application structure with configuration, UI components, and state management

components/PayRelationshipChip.vue

@@ -0,0 +1,54 @@
+<template>
+  <UBadge
+    :color="badgeColor"
+    :variant="variant"
+    :size="size"
+  >
+    {{ displayText }}
+  </UBadge>
+</template>
+
+<script setup lang="ts">
+type PayRelationship = 'FullyPaid' | 'Hybrid' | 'Supplemental' | 'VolunteerOrDeferred'
+
+interface Props {
+  relationship: PayRelationship
+  variant?: 'solid' | 'outline' | 'soft' | 'subtle'
+  size?: 'xs' | 'sm' | 'md' | 'lg'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'subtle',
+  size: 'sm'
+})
+
+const badgeColor = computed(() => {
+  switch (props.relationship) {
+    case 'FullyPaid':
+      return 'green'
+    case 'Hybrid':
+      return 'blue'
+    case 'Supplemental':
+      return 'yellow'
+    case 'VolunteerOrDeferred':
+      return 'gray'
+    default:
+      return 'gray'
+  }
+})
+
+const displayText = computed(() => {
+  switch (props.relationship) {
+    case 'FullyPaid':
+      return 'Fully Paid'
+    case 'Hybrid':
+      return 'Hybrid'
+    case 'Supplemental':
+      return 'Supplemental'
+    case 'VolunteerOrDeferred':
+      return 'Volunteer'
+    default:
+      return 'Unknown'
+  }
+})
+</script>