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

components/ConcentrationChip.vue

@@ -0,0 +1,63 @@
+<template>
+  <UBadge
+    :color="badgeColor"
+    :variant="variant"
+    :size="size"
+  >
+    <UIcon v-if="showIcon" :name="iconName" class="mr-1" />
+    {{ displayText }}
+  </UBadge>
+</template>
+
+<script setup lang="ts">
+type ConcentrationStatus = 'green' | 'yellow' | 'red'
+
+interface Props {
+  status: ConcentrationStatus
+  topSourcePct?: number
+  variant?: 'solid' | 'outline' | 'soft' | 'subtle'
+  size?: 'xs' | 'sm' | 'md' | 'lg'
+  showIcon?: boolean
+  showPercentage?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'subtle',
+  size: 'sm',
+  showIcon: false,
+  showPercentage: true
+})
+
+const badgeColor = computed(() => {
+  return props.status
+})
+
+const displayText = computed(() => {
+  const statusTexts = {
+    green: 'Low Risk',
+    yellow: 'Medium Risk', 
+    red: 'High Risk'
+  }
+  
+  const baseText = statusTexts[props.status]
+  
+  if (props.showPercentage && props.topSourcePct) {
+    return `${baseText} (${Math.round(props.topSourcePct)}%)`
+  }
+  
+  return baseText
+})
+
+const iconName = computed(() => {
+  switch (props.status) {
+    case 'green':
+      return 'i-heroicons-check-circle'
+    case 'yellow':
+      return 'i-heroicons-exclamation-triangle'
+    case 'red':
+      return 'i-heroicons-x-circle'
+    default:
+      return 'i-heroicons-question-mark-circle'
+  }
+})
+</script>