Enhance application structure: Add runtime configuration for environment variables, integrate new dependencies for Cloudinary and UI components, and refactor member management features including improved forms and member dashboard. Update styles and layout for better user experience.

app/pages/members/index.vue

@@ -9,7 +9,8 @@
       <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
         <UCard>
           <template #header>Your Circle</template>
-          <p class="text-xl font-semibold">{{ member?.circle }}</p>
+          <p class="text-xl font-semibold">{{ circleLabel }}</p>
+          <p class="text-sm text-zinc-600 mt-1">{{ circleDescription }}</p>
           <UButton variant="soft" size="sm" class="mt-2">
             Request Circle Change
           </UButton>
@@ -17,10 +18,8 @@
 
         <UCard>
           <template #header>Your Contribution</template>
-          <p class="text-xl font-semibold">
-            ${{ member?.contributionTier }}/month
-          </p>
-          <p class="text-sm text-gray-600">Supporting 2 solidarity spots</p>
+          <p class="text-xl font-semibold">{{ contributionLabel }}</p>
+          <p class="text-sm text-zinc-600">Supporting 2 solidarity spots</p>
           <UButton variant="soft" size="sm" class="mt-2">
             Adjust Contribution
           </UButton>
@@ -38,3 +37,32 @@
     </UDashboardPanel>
   </UDashboard>
 </template>
+
+<script setup>
+import { computed } from 'vue'
+import { getCircleByValue } from '~/config/circles'
+import { getContributionTierByValue } from '~/config/contributions'
+
+// Mock member data - in real app this would come from authentication/API
+const member = ref({
+  name: 'Guest User',
+  circle: 'community',
+  contributionTier: '15'
+})
+
+// Computed properties for display labels
+const circleLabel = computed(() => {
+  const circle = getCircleByValue(member.value?.circle)
+  return circle?.label || member.value?.circle
+})
+
+const circleDescription = computed(() => {
+  const circle = getCircleByValue(member.value?.circle)
+  return circle?.description || ''
+})
+
+const contributionLabel = computed(() => {
+  const tier = getContributionTierByValue(member.value?.contributionTier)
+  return tier?.label || `$${member.value?.contributionTier}/month`
+})
+</script>