WIP jordan

app/pages/providers/[provider_id].vue

@@ -4,6 +4,8 @@ const providerId = route.params.provider_id as string
 const toast = useToast()
 const { $providers } = useNuxtApp()
 
+const { emails, roles, label } = useProviderContactEmails(providerId)
+
 const { data, pending, error, refresh } = useProviders(`/providers/${providerId}`)
 const provider = computed(() => data.value?.data)
 
@@ -125,7 +127,7 @@ const clientTypeColor = (ct: string) =>
               {{ provider.active ? 'Active' : 'Inactive' }}
             </UBadge>
           </div>
-          <h1 class="text-2xl font-bold text-slate-900">{{ provider.name }}</h1>
+          <h1 class="text-2xl font-semibold text-[var(--text-primary)]">{{ provider.name }}</h1>
           <p class="text-gray-500 text-sm font-mono">{{ provider.provider_id }}</p>
         </div>
         <div class="flex gap-2">
@@ -144,7 +146,7 @@ const clientTypeColor = (ct: string) =>
       <!-- Info -->
       <UCard>
         <template #header>
-          <p class="font-semibold text-slate-700 flex items-center gap-2">
+          <p class="font-semibold text-[var(--text-primary)] flex items-center gap-2">
             <UIcon name="i-heroicons-building-office" class="w-4 h-4" /> Provider Details
           </p>
         </template>
@@ -157,11 +159,29 @@ const clientTypeColor = (ct: string) =>
         </div>
       </UCard>
 
+      <UCard>
+        <template #header>
+          <p class="font-semibold text-[var(--text-primary)] flex items-center gap-2">
+            <UIcon name="i-heroicons-envelope" class="w-4 h-4" />
+            Outbound email roles
+          </p>
+        </template>
+        <p class="mb-4 text-xs text-gray-500">
+          Stored in this browser for demo — sync to API later. Workflows (quotes, claims, renewals) resolve recipients
+          from these slots.
+        </p>
+        <div class="grid gap-3 sm:grid-cols-2">
+          <UFormField v-for="role in roles" :key="role" :label="label(role)">
+            <UInput v-model="emails[role]" type="email" placeholder="name@carrier.com" class="w-full" />
+          </UFormField>
+        </div>
+      </UCard>
+
       <!-- Templates — grouped by policy_type → client_type -->
       <UCard>
         <template #header>
           <div class="flex justify-between items-center">
-            <p class="font-semibold text-slate-700 flex items-center gap-2">
+            <p class="font-semibold text-[var(--text-primary)] flex items-center gap-2">
               <UIcon name="i-heroicons-document" class="w-4 h-4" /> Solicitation Templates
             </p>
             <UButton icon="i-heroicons-arrow-up-tray" color="primary" size="sm" @click="isUploadOpen = true">
@@ -197,7 +217,7 @@ const clientTypeColor = (ct: string) =>
                     v-for="t in tmplList"
                     :key="t.template_id"
                     class="flex items-center justify-between p-3 border rounded-lg text-sm"
-                    :class="t.active ? 'border-gray-200 bg-white' : 'border-gray-100 bg-gray-50 opacity-60'"
+                    :class="t.active ? 'border-gray-200 bg-[var(--surface)]' : 'border-gray-100 bg-gray-50 opacity-60'"
                   >
                     <div class="space-y-0.5 min-w-0">
                       <div class="flex items-center gap-2 flex-wrap">
@@ -246,7 +266,7 @@ const clientTypeColor = (ct: string) =>
         <div class="flex flex-col h-full">
           <div class="flex justify-between items-center p-6 border-b">
             <div>
-              <h2 class="text-lg font-semibold text-slate-900">Upload Template</h2>
+              <h2 class="text-lg font-semibold text-[var(--text-primary)]">Upload Template</h2>
               <p class="text-sm text-gray-500">Upload a fillable PDF solicitation form</p>
             </div>
             <UButton icon="i-heroicons-x-mark" color="gray" variant="ghost" @click="isUploadOpen = false" />

app/pages/providers/index.vue

@@ -14,8 +14,8 @@ const providers = computed(() => {
   <div class="p-8 space-y-8 bg-gray-50 min-h-screen">
     <div class="flex justify-between items-center">
       <div>
-        <h1 class="text-3xl font-bold text-slate-900">Providers</h1>
-        <p class="text-gray-500 text-sm">Insurance carrier management</p>
+        <h1 class="text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Providers</h1>
+        <p class="text-[13px] text-[var(--text-muted)]">Insurance carrier management</p>
       </div>
       <div class="flex items-center gap-3">
         <UBadge color="gray" variant="soft" size="lg">{{ providers.length }} providers</UBadge>
@@ -39,7 +39,7 @@ const providers = computed(() => {
         <UCard class="hover:shadow-md transition-shadow cursor-pointer h-full">
           <div class="space-y-3">
             <div class="flex justify-between items-start">
-              <p class="font-semibold text-slate-900 text-lg">{{ p.name }}</p>
+              <p class="font-semibold text-[var(--text-primary)] text-lg">{{ p.name }}</p>
               <UBadge :color="p.active ? 'green' : 'red'" variant="soft" size="xs">
                 {{ p.active ? 'Active' : 'Inactive' }}
               </UBadge>

app/pages/providers/new.vue

@@ -31,14 +31,14 @@ async function submit() {
         <UButton icon="i-heroicons-arrow-left" color="gray" variant="ghost">Back</UButton>
       </NuxtLink>
       <div>
-        <h1 class="text-3xl font-bold text-slate-900">New Provider</h1>
-        <p class="text-gray-500 text-sm">Register a new insurance carrier</p>
+        <h1 class="text-2xl font-semibold tracking-tight text-[var(--text-primary)]">New Provider</h1>
+        <p class="text-[13px] text-[var(--text-muted)]">Register a new insurance carrier</p>
       </div>
     </div>
 
     <UCard class="max-w-2xl">
       <template #header>
-        <p class="font-semibold text-slate-700 flex items-center gap-2">
+        <p class="font-semibold text-[var(--text-primary)] flex items-center gap-2">
           <UIcon name="i-heroicons-building-office" class="w-4 h-4" /> Provider Information
         </p>
       </template>