add workload plans

app/pages/policies/[application_id].vue

@@ -308,7 +308,13 @@ const applicantRows = computed(() => {
                 <td v-for="plan in allPlans" :key="plan.plan_id"
                   class="py-3 px-4 text-center align-top pt-4"
                   :class="plan.plan_id === policy.accepted_plan_id ? 'bg-green-50' : ''">
-                  <p class="text-xs text-gray-600 leading-relaxed">{{ plan.coverage_details }}</p>
+                  <div v-if="plan.coverage_details" class="space-y-1">
+                    <div v-for="(value, key) in plan.coverage_details" :key="key" class="flex text-xs">
+                      <span class="font-medium text-gray-500">{{ key }}:</span>
+                      <span class="text-gray-700 ml-1">{{ value }}</span>
+                    </div>
+                  </div>
+                  <div v-else class="text-gray-400 text-xs">—</div>
                 </td>
               </tr>
               <!-- Accept row -->

app/pages/tasks/[id].vue

@@ -1,304 +0,0 @@
-<script setup lang="ts">
-const route = useRoute()
-const id = route.params.id as string
-
-const { data, pending, error, refresh } = useTasks(`/tasks/${id}`)
-const task = computed(() => data.value.task)
-
-const payload = computed(() => data.value?.payload)
-
-const isSolicitation = computed(() => task.value?.comm_type === 'solicitation')
-const isQuote        = computed(() => task.value?.comm_type === 'quote')
-
-// ── Respond (quote) ──────────────────────────────────────────────────────────
-const isRespondOpen = ref(false)
-const submitting    = ref(false)
-const toast         = useToast()
-const { $tasks } = useNuxtApp()
-
-const plans = ref([{ name: '', premium: '', coverage_details: '', deductible: '', coverage_limit: '' }])
-const respondForm = ref({ valid_until: '', entered_by: '' })
-
-function addPlan() { plans.value.push({ name: '', premium: '', coverage_details: '', deductible: '', coverage_limit: '' }) }
-function removePlan(i: number) { plans.value.splice(i, 1) }
-
-async function submitResponse() {
-  submitting.value = true
-  try {
-    await $tasks(`/tasks/${id}/respond`, {
-      method: 'POST',
-      body: {
-        valid_until: respondForm.value.valid_until,
-        entered_by:  respondForm.value.entered_by,
-        plans: plans.value.map(p => ({
-          name: p.name, premium: parseFloat(p.premium), coverage_details: p.coverage_details,
-          deductible: p.deductible ? parseFloat(p.deductible) : 0,
-          coverage_limit: p.coverage_limit ? parseFloat(p.coverage_limit) : 0
-        }))
-      }
-    })
-    toast.add({ title: 'Response submitted', color: 'green' })
-    isRespondOpen.value = false
-    await refresh()
-  } catch (e: any) {
-    toast.add({ title: 'Failed', description: e?.data?.error ?? e.message, color: 'red' })
-  } finally { submitting.value = false }
-}
-
-const isRespondFormValid = computed(() =>
-  respondForm.value.valid_until && respondForm.value.entered_by &&
-  plans.value.every(p => p.name && p.premium && p.coverage_details)
-)
-
-// ── Confirm delivery (solicitation) ─────────────────────────────────────────
-const confirmingDelivery = ref(false)
-
-async function confirmDelivery() {
-  confirmingDelivery.value = true
-  try {
-    await $tasks(`/tasks/${id}/confirm-delivery`, { method: 'POST' })
-    toast.add({ title: 'Delivery confirmed', color: 'green' })
-    await refresh()
-  } catch (e: any) {
-    toast.add({ title: 'Failed', description: e?.data?.error ?? e.message, color: 'red' })
-  } finally { confirmingDelivery.value = false }
-}
-
-// ── Issue policy (solicitation) ──────────────────────────────────────────────
-const isIssueOpen = ref(false)
-const issuing     = ref(false)
-const issueForm   = ref({ policy_number: '', effective_date: '', expiry_date: '' })
-
-const isIssueFormValid = computed(() =>
-  issueForm.value.policy_number && issueForm.value.effective_date && issueForm.value.expiry_date
-)
-
-async function submitIssuePolicy() {
-  issuing.value = true
-  try {
-    await $tasks(`/tasks/${id}/issue-policy`, { method: 'POST', body: issueForm.value })
-    toast.add({ title: 'Policy issued successfully', color: 'green' })
-    isIssueOpen.value = false
-    await refresh()
-  } catch (e: any) {
-    toast.add({ title: 'Failed', description: e?.data?.error ?? e.message, color: 'red' })
-  } finally { issuing.value = false }
-}
-
-// ── Solicitation PDF ─────────────────────────────────────────────────────────
-const pdfUrl     = computed(() => task.value?.download_url ?? null)
-const showPdf    = ref(false)
-
-// ── Helpers ──────────────────────────────────────────────────────────────────
-const statusColor = (s: string) =>
-  ({ pending: 'yellow', responded: 'blue', delivered: 'purple', issued: 'green' }[s] ?? 'gray')
-
-const formatDate = (d: string) => d
-  ? new Date(d).toLocaleDateString('es-PA', { day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' })
-  : '—'
-</script>
-
-<template>
-  <div class="p-8 space-y-8 bg-gray-50 min-h-screen">
-    <NuxtLink to="/tasks">
-      <UButton icon="i-heroicons-arrow-left" color="gray" variant="ghost">Back to Tasks</UButton>
-    </NuxtLink>
-
-    <UAlert v-if="error" color="red" variant="soft" title="Failed to load task" :description="error.message" />
-    <div v-else-if="pending" class="space-y-4"><UCard v-for="n in 3" :key="n"><div class="h-32 animate-pulse bg-gray-200 rounded" /></UCard></div>
-
-    <template v-else-if="task">
-      <!-- Header -->
-      <div class="flex justify-between items-start">
-        <div class="space-y-2">
-          <div class="flex items-center gap-2 flex-wrap">
-            <UBadge :color="statusColor(task.status)" variant="soft">{{ task.status }}</UBadge>
-            <UBadge color="blue" variant="outline">{{ task.policy_type?.toUpperCase() }}</UBadge>
-            <UBadge color="gray" variant="outline">{{ task.comm_type }}</UBadge>
-          </div>
-          <h1 class="text-xl font-bold text-slate-900 font-mono">{{ task.application_id }}</h1>
-          <p class="text-gray-500 text-sm">Received {{ formatDate(task.created_at) }}</p>
-        </div>
-
-        <!-- Actions -->
-        <div class="flex gap-2 flex-wrap justify-end">
-          <UButton icon="i-heroicons-arrow-path" color="gray" variant="soft" :loading="pending" @click="refresh()" />
-
-          <!-- Quote actions -->
-          <UButton v-if="isQuote && task.status === 'pending'"
-            icon="i-heroicons-chat-bubble-left-right" color="primary" @click="isRespondOpen = true">
-            Record Response
-          </UButton>
-
-          <!-- Solicitation actions -->
-          <template v-if="isSolicitation">
-            <UButton v-if="task.status === 'pending'"
-              icon="i-heroicons-check" color="green" variant="soft"
-              :loading="confirmingDelivery" @click="confirmDelivery">
-              Confirm Delivery
-            </UButton>
-            <UButton v-if="task.status === 'delivered'"
-              icon="i-heroicons-document-check" color="primary" @click="isIssueOpen = true">
-              Issue Policy
-            </UButton>
-          </template>
-        </div>
-      </div>
-
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-        <!-- Task info -->
-        <UCard>
-          <template #header><p class="font-semibold text-slate-700">Task Info</p></template>
-          <div class="space-y-2 text-sm">
-            <div class="flex justify-between"><span class="text-gray-500">Task ID</span><span class="font-mono text-xs">{{ task.id }}</span></div>
-            <div class="flex justify-between"><span class="text-gray-500">Application ID</span><span class="font-mono text-xs">{{ task.application_id }}</span></div>
-            <div class="flex justify-between"><span class="text-gray-500">Provider ID</span><span class="font-mono text-xs">{{ task.provider_id }}</span></div>
-            <div v-if="task.provider_name" class="flex justify-between"><span class="text-gray-500">Provider</span><span>{{ task.provider_name }}</span></div>
-            <div class="flex justify-between"><span class="text-gray-500">Org</span><span class="font-mono text-xs">{{ task.org_id }}</span></div>
-            <div class="flex justify-between"><span class="text-gray-500">Created</span><span>{{ formatDate(task.created_at) }}</span></div>
-            <div class="flex justify-between"><span class="text-gray-500">Updated</span><span>{{ formatDate(task.updated_at) }}</span></div>
-          </div>
-        </UCard>
-
-        <!-- Payload -->
-        <UCard>
-          <template #header><p class="font-semibold text-slate-700">Request Payload</p></template>
-          <div class="space-y-4 text-sm">
-            <div v-if="payload?.applicant_info">
-              <p class="text-xs font-semibold text-gray-400 uppercase mb-2">Applicant</p>
-              <div class="bg-gray-50 rounded-lg p-3 space-y-1.5">
-                <div class="flex justify-between"><span class="text-gray-500">Name</span><span>{{ payload.applicant_info.name }}</span></div>
-                <div class="flex justify-between"><span class="text-gray-500">DOB</span><span>{{ payload.applicant_info.date_of_birth }}</span></div>
-                <div class="flex justify-between"><span class="text-gray-500">Document</span><span class="font-mono text-xs">{{ payload.applicant_info.document_id }}</span></div>
-              </div>
-            </div>
-            <div v-if="payload?.car_details">
-              <p class="text-xs font-semibold text-gray-400 uppercase mb-2">Vehicle</p>
-              <div class="bg-gray-50 rounded-lg p-3 space-y-1.5">
-                <div class="flex justify-between"><span class="text-gray-500">Plate</span><span class="font-mono font-medium">{{ payload.car_details.plate }}</span></div>
-                <div class="flex justify-between"><span class="text-gray-500">Vehicle</span><span>{{ payload.car_details.year }} {{ payload.car_details.make }} {{ payload.car_details.model }}</span></div>
-                <div class="flex justify-between"><span class="text-gray-500">Value</span><span>${{ Number(payload.car_details.car_value).toLocaleString() }}</span></div>
-              </div>
-            </div>
-          </div>
-        </UCard>
-      </div>
-
-      <!-- Solicitation PDF section -->
-      <UCard v-if="isSolicitation">
-        <template #header>
-          <div class="flex justify-between items-center">
-            <p class="font-semibold text-slate-700 flex items-center gap-2">
-              <UIcon name="i-heroicons-document-text" class="w-4 h-4" /> Solicitation Document
-            </p>
-            <div class="flex gap-2">
-              <UButton v-if="pdfUrl" icon="i-heroicons-eye" color="gray" variant="soft" size="xs"
-                @click="showPdf = !showPdf">{{ showPdf ? 'Hide' : 'Preview' }}</UButton>
-              <UButton v-if="pdfUrl" icon="i-heroicons-arrow-top-right-on-square"
-                color="gray" variant="soft" size="xs" :to="pdfUrl" target="_blank">Open</UButton>
-            </div>
-          </div>
-        </template>
-
-        <div v-if="!pdfUrl" class="text-center py-10 text-gray-400">
-          <UIcon name="i-heroicons-document" class="w-10 h-10 mx-auto mb-2" />
-          <p class="text-sm">No solicitation document available</p>
-        </div>
-
-        <div v-else-if="showPdf">
-          <iframe :src="pdfUrl" class="w-full rounded-lg border" style="height: 600px;" />
-        </div>
-
-        <div v-else class="flex items-center gap-4 p-4 bg-gray-50 rounded-lg">
-          <UIcon name="i-heroicons-document-text" class="w-8 h-8 text-red-400 flex-shrink-0" />
-          <div class="flex-1 min-w-0">
-            <p class="text-sm font-medium text-slate-800">Solicitation v{{ task.version ?? 1 }}</p>
-            <p class="text-xs text-gray-400 font-mono truncate">{{ task.s3_key }}</p>
-          </div>
-          <UBadge :color="statusColor(task.status)" variant="soft" size="sm">{{ task.status }}</UBadge>
-        </div>
-      </UCard>
-    </template>
-
-    <!-- Quote respond slideover -->
-    <USlideover v-model:open="isRespondOpen" side="right">
-      <template #content>
-        <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">Record Quote Response</h2></div>
-            <UButton icon="i-heroicons-x-mark" color="gray" variant="ghost" @click="isRespondOpen = false" />
-          </div>
-          <div class="flex-1 overflow-y-auto p-6 space-y-6">
-            <div class="grid grid-cols-2 gap-4">
-              <UFormField label="Valid Until" required>
-                <UInput v-model="respondForm.valid_until" type="date" class="w-full" />
-              </UFormField>
-              <UFormField label="Entered By" required>
-                <UInput v-model="respondForm.entered_by" placeholder="Your name" class="w-full" />
-              </UFormField>
-            </div>
-            <div class="space-y-3">
-              <div class="flex justify-between items-center">
-                <p class="font-medium text-sm text-slate-700">Plans <UBadge color="gray" variant="soft" size="xs" class="ml-1">{{ plans.length }}</UBadge></p>
-                <UButton icon="i-heroicons-plus" size="xs" color="gray" variant="soft" @click="addPlan">Add Plan</UButton>
-              </div>
-              <div v-for="(plan, i) in plans" :key="i" class="border rounded-lg p-4 space-y-3">
-                <div class="flex justify-between items-center">
-                  <p class="text-sm font-semibold text-slate-700">Plan {{ i + 1 }}</p>
-                  <UButton v-if="plans.length > 1" icon="i-heroicons-trash" size="xs" color="red" variant="ghost" @click="removePlan(i)" />
-                </div>
-                <div class="grid grid-cols-2 gap-3">
-                  <UFormField label="Name" required><UInput v-model="plan.name" placeholder="Basic / Standard / Premium" class="w-full" /></UFormField>
-                  <UFormField label="Premium (USD)" required><UInput v-model="plan.premium" type="number" class="w-full" /></UFormField>
-                  <UFormField label="Deductible"><UInput v-model="plan.deductible" type="number" class="w-full" /></UFormField>
-                  <UFormField label="Coverage Limit"><UInput v-model="plan.coverage_limit" type="number" class="w-full" /></UFormField>
-                </div>
-                <UFormField label="Coverage Details" required>
-                  <UTextarea v-model="plan.coverage_details" :rows="2" class="w-full" />
-                </UFormField>
-              </div>
-            </div>
-          </div>
-          <div class="p-6 border-t flex justify-end gap-3">
-            <UButton color="gray" variant="soft" @click="isRespondOpen = false">Cancel</UButton>
-            <UButton color="primary" icon="i-heroicons-paper-airplane" :loading="submitting" :disabled="!isRespondFormValid" @click="submitResponse">
-              Submit Response
-            </UButton>
-          </div>
-        </div>
-      </template>
-    </USlideover>
-
-    <!-- Issue policy slideover -->
-    <USlideover v-model:open="isIssueOpen" side="right">
-      <template #content>
-        <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">Issue Policy</h2>
-              <p class="text-sm text-gray-500">Enter the policy details from the provider</p>
-            </div>
-            <UButton icon="i-heroicons-x-mark" color="gray" variant="ghost" @click="isIssueOpen = false" />
-          </div>
-          <div class="flex-1 p-6 space-y-4">
-            <UFormField label="Policy Number" required>
-              <UInput v-model="issueForm.policy_number" placeholder="POL-2026-001" class="w-full" />
-            </UFormField>
-            <UFormField label="Effective Date" required>
-              <UInput v-model="issueForm.effective_date" type="date" class="w-full" />
-            </UFormField>
-            <UFormField label="Expiry Date" required>
-              <UInput v-model="issueForm.expiry_date" type="date" class="w-full" />
-            </UFormField>
-          </div>
-          <div class="p-6 border-t flex justify-end gap-3">
-            <UButton color="gray" variant="soft" @click="isIssueOpen = false">Cancel</UButton>
-            <UButton color="primary" icon="i-heroicons-document-check" :loading="issuing" :disabled="!isIssueFormValid" @click="submitIssuePolicy">
-              Issue Policy
-            </UButton>
-          </div>
-        </div>
-      </template>
-    </USlideover>
-  </div>
-</template>

app/pages/workload/[id].vue

@@ -0,0 +1,316 @@
+<script setup lang="ts">
+const route = useRoute()
+const id = decodeURIComponent(route.params.id as string)
+
+const { data, pending, error, refresh } = useWorkload(`/tasks/${id}`)
+const task = computed(() => data.value?.data)
+
+const taskType = computed(() => {
+  const parts = id?.split(':') ?? []
+  return parts[1] || 'unknown'
+})
+
+const isQuote = computed(() => taskType.value === 'quote')
+const isSolicitation = computed(() => taskType.value === 'solicitation')
+
+// State-based actions
+const isSubmitResponseOpen = ref(false)
+const isApproveOpen = ref(false)
+const isCompleteOpen = ref(false)
+
+const submitting = ref(false)
+const toast = useToast()
+const { $workload } = useNuxtApp()
+
+// Quote response form
+const quoteForm = ref({
+  quote_id: '',
+  valid_until: '',
+  recorded_by: '',
+  document_url: '',
+  plans: [{ plan_id: '', name: '', premium: '', coverage_details: {} }]
+})
+
+function addPlan() {
+  quoteForm.value.plans.push({ plan_id: '', name: '', premium: '', coverage_details: {} })
+}
+
+function removePlan(i: number) {
+  quoteForm.value.plans.splice(i, 1)
+}
+
+function addCoverageDetail(plan: any) {
+  const key = newCoverageKey.value.trim()
+  const value = newCoverageValue.value.trim()
+  if (key && value) {
+    plan.coverage_details[key] = value
+    newCoverageKey.value = ''
+    newCoverageValue.value = ''
+  }
+}
+
+const newCoverageKey = ref('')
+const newCoverageValue = ref('')
+
+async function submitResponse() {
+  submitting.value = true
+  try {
+    await $workload(`/tasks/${id}/submit`, {
+      method: 'POST',
+      body: {
+        quote_id: quoteForm.value.quote_id,
+        valid_until: quoteForm.value.valid_until,
+        recorded_by: quoteForm.value.recorded_by,
+        document_url: quoteForm.value.document_url || undefined,
+        plans: quoteForm.value.plans.map(p => ({
+          plan_id: p.plan_id,
+          name: p.name,
+          premium: parseFloat(p.premium) || 0,
+          coverage_details: p.coverage_details
+        }))
+      }
+    })
+    toast.add({ title: 'Response submitted', color: 'green' })
+    isSubmitResponseOpen.value = false
+    await refresh()
+  } catch (e: any) {
+    toast.add({ title: 'Failed', description: e?.data?.error ?? e.message, color: 'red' })
+  } finally {
+    submitting.value = false
+  }
+}
+
+async function confirmDelivery() {
+  submitting.value = true
+  try {
+    await $workload(`/tasks/${id}/submit`, { method: 'POST' })
+    toast.add({ title: 'Delivery confirmed', color: 'green' })
+    await refresh()
+  } catch (e: any) {
+    toast.add({ title: 'Failed', description: e?.data?.error ?? e.message, color: 'red' })
+  } finally {
+    submitting.value = false
+  }
+}
+
+async function approveSubmission() {
+  submitting.value = true
+  try {
+    await $workload(`/tasks/${id}/approve`, { method: 'POST' })
+    toast.add({ title: 'Submission approved', color: 'green' })
+    isApproveOpen.value = false
+    await refresh()
+  } catch (e: any) {
+    toast.add({ title: 'Failed', description: e?.data?.error ?? e.message, color: 'red' })
+  } finally {
+    submitting.value = false
+  }
+}
+
+async function completeTask() {
+  submitting.value = true
+  try {
+    await $workload(`/tasks/${id}/complete`, { method: 'POST', body: { completed_by: 'admin' } })
+    toast.add({ title: 'Task completed', color: 'green' })
+    isCompleteOpen.value = false
+    await refresh()
+  } catch (e: any) {
+    toast.add({ title: 'Failed', description: e?.data?.error ?? e.message, color: 'red' })
+  } finally {
+    submitting.value = false
+  }
+}
+
+const statusColor = (status: string) => {
+  switch (status) {
+    case 'created': return 'yellow'
+    case 'draft': return 'blue'
+    case 'approved': return 'green'
+    case 'completed': return 'gray'
+    default: return 'gray'
+  }
+}
+
+const policyTypeColor = (type: string) => {
+  switch (type) {
+    case 'car': return 'blue'
+    case 'life': return 'purple'
+    case 'fire': return 'orange'
+    default: return 'gray'
+  }
+}
+
+const formatDate = (d: string) => d
+  ? new Date(d).toLocaleDateString('es-PA', { day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' })
+  : '—'
+</script>
+
+<template>
+  <div class="p-8 space-y-8 bg-gray-50 min-h-screen">
+    <NuxtLink to="/workload">
+      <UButton icon="i-heroicons-arrow-left" color="gray" variant="ghost">Back to Workload</UButton>
+    </NuxtLink>
+
+    <UAlert v-if="error" color="red" variant="soft" title="Failed to load task" :description="error.message" />
+    <div v-else-if="pending" class="space-y-4"><UCard v-for="n in 3" :key="n"><div class="h-32 animate-pulse bg-gray-200 rounded" /></UCard></div>
+
+    <template v-else-if="task">
+      <!-- Header -->
+      <div class="flex justify-between items-start">
+        <div class="space-y-2">
+          <div class="flex items-center gap-2 flex-wrap">
+            <UBadge :color="statusColor(task.status)" variant="soft">{{ task.status }}</UBadge>
+            <UBadge :color="policyTypeColor(task.task_info?.policy_type)" variant="outline">{{ task.task_info?.policy_type?.toUpperCase() || '—' }}</UBadge>
+            <UBadge color="gray" variant="outline">{{ taskType }}</UBadge>
+          </div>
+          <h1 class="text-xl font-bold text-slate-900 font-mono">{{ task.application_id }}</h1>
+          <p class="text-gray-500 text-sm">Created {{ formatDate(task.created_at) }}</p>
+        </div>
+
+        <!-- Actions based on state -->
+        <div class="flex gap-2 flex-wrap justify-end">
+          <UButton icon="i-heroicons-arrow-path" color="gray" variant="soft" :loading="pending" @click="refresh()" />
+
+          <!-- State: created -->
+          <template v-if="task.status === 'created'">
+            <UButton v-if="isQuote"
+              icon="i-heroicons-chat-bubble-left-right" color="primary"
+              @click="isSubmitResponseOpen = true">
+              Submit Response
+            </UButton>
+            <UButton v-if="isSolicitation"
+              icon="i-heroicons-check" color="green" variant="soft"
+              :loading="submitting" @click="confirmDelivery">
+              Confirm Delivery
+            </UButton>
+          </template>
+
+          <!-- State: draft -->
+          <UButton v-if="task.status === 'draft'"
+            icon="i-heroicons-check-circle" color="blue" variant="soft"
+            :loading="submitting" @click="approveSubmission">
+            Approve
+          </UButton>
+
+          <!-- State: approved -->
+          <UButton v-if="task.status === 'approved'"
+            icon="i-heroicons-check-badge" color="green"
+            :loading="submitting" @click="completeTask">
+            Complete
+          </UButton>
+
+          <!-- State: completed - no actions -->
+        </div>
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <!-- Task Info -->
+        <UCard>
+          <template #header><p class="font-semibold text-slate-700">Task Info</p></template>
+          <div class="space-y-2 text-sm">
+            <div class="flex justify-between"><span class="text-gray-500">Task ID</span><span class="font-mono text-xs">{{ task.id }}</span></div>
+            <div class="flex justify-between"><span class="text-gray-500">Application ID</span><span class="font-mono text-xs">{{ task.application_id }}</span></div>
+            <div class="flex justify-between"><span class="text-gray-500">Provider ID</span><span class="font-mono text-xs">{{ task.task_info?.provider_id }}</span></div>
+            <div v-if="task.task_info?.provider_name" class="flex justify-between"><span class="text-gray-500">Provider</span><span>{{ task.task_info.provider_name }}</span></div>
+            <div class="flex justify-between"><span class="text-gray-500">Org</span><span class="font-mono text-xs">{{ task.org_id }}</span></div>
+            <div class="flex justify-between"><span class="text-gray-500">Created</span><span>{{ formatDate(task.created_at) }}</span></div>
+            <div class="flex justify-between"><span class="text-gray-500">Updated</span><span>{{ formatDate(task.updated_at) }}</span></div>
+          </div>
+        </UCard>
+
+        <!-- Task Info Details -->
+        <UCard>
+          <template #header><p class="font-semibold text-slate-700">Request Details</p></template>
+          <div class="space-y-4 text-sm">
+            <div v-if="task.task_info">
+              <pre class="text-xs bg-gray-50 p-3 rounded overflow-x-auto">{{ JSON.stringify(task.task_info, null, 2) }}</pre>
+            </div>
+            <div v-else class="text-gray-400 text-center py-4">No task info</div>
+          </div>
+        </UCard>
+      </div>
+
+      <!-- Submission -->
+      <UCard v-if="task.submission">
+        <template #header><p class="font-semibold text-slate-700">Submission</p></template>
+        <pre class="text-xs bg-gray-50 p-3 rounded overflow-x-auto">{{ JSON.stringify(task.submission, null, 2) }}</pre>
+      </UCard>
+
+      <!-- Attachments -->
+      <UCard v-if="task.attachments?.length">
+        <template #header><p class="font-semibold text-slate-700">Attachments</p></template>
+        <div class="space-y-2">
+          <div v-for="(url, i) in task.attachments" :key="i" class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
+            <UIcon name="i-heroicons-document" class="w-5 h-5 text-gray-400 flex-shrink-0" />
+            <a :href="url" target="_blank" class="text-sm text-blue-600 hover:underline truncate font-mono">{{ url }}</a>
+          </div>
+        </div>
+      </UCard>
+    </template>
+
+    <!-- Submit Response Slideover (Quote) -->
+    <USlideover v-model:open="isSubmitResponseOpen" side="right">
+      <template #content>
+        <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">Submit Quote Response</h2></div>
+            <UButton icon="i-heroicons-x-mark" color="gray" variant="ghost" @click="isSubmitResponseOpen = false" />
+          </div>
+          <div class="flex-1 overflow-y-auto p-6 space-y-6">
+            <div class="grid grid-cols-2 gap-4">
+              <UFormField label="Quote ID" required>
+                <UInput v-model="quoteForm.quote_id" placeholder="QUOTE-001" class="w-full" />
+              </UFormField>
+              <UFormField label="Valid Until" required>
+                <UInput v-model="quoteForm.valid_until" type="date" class="w-full" />
+              </UFormField>
+            </div>
+            <UFormField label="Responded By" required>
+              <UInput v-model="quoteForm.recorded_by" placeholder="Your name" class="w-full" />
+            </UFormField>
+            <UFormField label="Document URL">
+              <UInput v-model="quoteForm.document_url" placeholder="https://..." class="w-full" />
+            </UFormField>
+            <div class="space-y-3">
+              <div class="flex justify-between items-center">
+                <p class="font-medium text-sm text-slate-700">Plans</p>
+                <UButton icon="i-heroicons-plus" size="xs" color="gray" variant="soft" @click="addPlan">Add</UButton>
+              </div>
+              <div v-for="(plan, i) in quoteForm.plans" :key="i" class="border rounded-lg p-4 space-y-3">
+                <div class="flex justify-between items-center">
+                  <p class="text-sm font-semibold text-slate-700">Plan {{ i + 1 }}</p>
+                  <UButton v-if="quoteForm.plans.length > 1" icon="i-heroicons-trash" size="xs" color="red" variant="ghost" @click="removePlan(i)" />
+                </div>
+                <div class="grid grid-cols-2 gap-3">
+                  <UFormField label="Plan ID"><UInput v-model="plan.plan_id" placeholder="PLAN-001" class="w-full" /></UFormField>
+                  <UFormField label="Name"><UInput v-model="plan.name" placeholder="Basic" class="w-full" /></UFormField>
+                  <UFormField label="Premium"><UInput v-model="plan.premium" type="number" placeholder="1000" class="w-full" /></UFormField>
+                </div>
+                <UFormField label="Coverage Details">
+                  <div class="space-y-2">
+                    <div v-for="(value, key) in plan.coverage_details" :key="key" class="flex gap-2 items-center">
+                      <span class="text-sm font-medium text-gray-600 w-24 truncate">{{ key }}:</span>
+                      <UInput v-model="plan.coverage_details[key]" placeholder="Value" class="flex-1" />
+                      <UButton icon="i-heroicons-trash" size="xs" color="red" variant="ghost" @click="delete plan.coverage_details[key]" />
+                    </div>
+                    <div class="flex gap-2">
+                      <UInput v-model="newCoverageKey" placeholder="Key (e.g., liability)" class="flex-1" @keydown.enter="addCoverageDetail(plan)" />
+                      <UInput v-model="newCoverageValue" placeholder="Value" class="flex-1" @keydown.enter="addCoverageDetail(plan)" />
+                      <UButton size="xs" color="gray" variant="soft" @click="addCoverageDetail(plan)">Add</UButton>
+                    </div>
+                  </div>
+                </UFormField>
+              </div>
+            </div>
+          </div>
+          <div class="p-6 border-t flex justify-end gap-3">
+            <UButton color="gray" variant="soft" @click="isSubmitResponseOpen = false">Cancel</UButton>
+            <UButton color="primary" icon="i-heroicons-paper-airplane" :loading="submitting" @click="submitResponse">
+              Submit
+            </UButton>
+          </div>
+        </div>
+      </template>
+    </USlideover>
+  </div>
+</template>

app/pages/workload/index.vue

@@ -4,12 +4,13 @@ import type { SelectItem } from '@nuxt/ui'
 const page = ref(1)
 const statusFilter = ref<string | null>(null)
 const policyTypeFilter = ref<string | null>(null)
-const commTypeFilter = ref<string | null>(null)
 
 const statusItems = ref<SelectItem[]>([
   { label: 'All Statuses', value: null },
-  { label: 'Pending', value: 'pending' },
-  { label: 'Responded', value: 'responded' }
+  { label: 'Created', value: 'created' },
+  { label: 'Draft', value: 'draft' },
+  { label: 'Approved', value: 'approved' },
+  { label: 'Completed', value: 'completed' }
 ])
 
 const policyTypeItems = ref<SelectItem[]>([
@@ -19,45 +20,46 @@ const policyTypeItems = ref<SelectItem[]>([
   { label: 'Fire', value: 'fire' }
 ])
 
-const commTypeItems = ref<SelectItem[]>([
-  { label: 'All Comm Types', value: null },
-  { label: 'Quote', value: 'quote' },
-  { label: 'Solicitation', value: 'solicitation' }
-])
+watch([statusFilter, policyTypeFilter], () => { page.value = 1 })
 
-watch([statusFilter, policyTypeFilter, commTypeFilter], () => { page.value = 1 })
-
-const { data, pending, error, refresh } = useTasks('/tasks', {
+const { data, pending, error, refresh } = useWorkload('/tasks', {
   query: computed(() => ({
     page: page.value,
-    limit: 20,
-    ...(statusFilter.value     && { status:      statusFilter.value }),
-    ...(policyTypeFilter.value && { policy_type: policyTypeFilter.value }),
-    ...(commTypeFilter.value   && { comm_type:   commTypeFilter.value })
+    page_size: 20,
+    ...(statusFilter.value && { status: statusFilter.value }),
+    ...(policyTypeFilter.value && { policy_type: policyTypeFilter.value })
   }))
 })
 
-const tasks      = computed(() => data.value?.tasks ?? [])
-const total      = computed(() => data.value?.total ?? 0)
-const totalPages = computed(() => Math.ceil(total.value / 20))
+const tasks = computed(() => data.value?.data ?? [])
+const meta = computed(() => data.value?.meta)
+const total = computed(() => meta.value?.total_count ?? 0)
+const totalPages = computed(() => meta.value?.total_pages ?? 0)
 
 const statusColor = (status: string) => {
   switch (status) {
-    case 'pending':   return 'yellow'
-    case 'responded': return 'green'
-    default:          return 'gray'
+    case 'created': return 'yellow'
+    case 'draft': return 'blue'
+    case 'approved': return 'green'
+    case 'completed': return 'gray'
+    default: return 'gray'
   }
 }
 
 const policyTypeColor = (type: string) => {
   switch (type) {
-    case 'car':  return 'blue'
+    case 'car': return 'blue'
     case 'life': return 'purple'
     case 'fire': return 'orange'
-    default:     return 'gray'
+    default: return 'gray'
   }
 }
 
+const getTaskType = (id: string) => {
+  const parts = id?.split(':') ?? []
+  return parts[1] || 'unknown'
+}
+
 const formatDate = (date: string) => {
   if (!date) return '—'
   return new Date(date).toLocaleDateString('es-PA', {
@@ -72,8 +74,8 @@ const formatDate = (date: string) => {
     <!-- Header -->
     <div class="flex justify-between items-center">
       <div>
-        <h1 class="text-3xl text-slate-900 font-bold">Tasks</h1>
-        <p class="text-gray-500 text-sm">Carrier Inbox — Quote & Solicitation Requests</p>
+        <h1 class="text-3xl text-slate-900 font-bold">Workload</h1>
+        <p class="text-gray-500 text-sm">Quote & Solicitation Tasks</p>
       </div>
       <div class="flex items-center gap-3">
         <UBadge color="gray" variant="soft" size="lg">{{ total }} tasks</UBadge>
@@ -91,9 +93,8 @@ const formatDate = (date: string) => {
 
     <!-- Filters -->
     <div class="flex gap-4 items-center flex-wrap">
-      <USelect v-model="statusFilter"      :items="statusItems"      class="w-44" />
-      <USelect v-model="policyTypeFilter"  :items="policyTypeItems"  class="w-44" />
-      <USelect v-model="commTypeFilter"    :items="commTypeItems"    class="w-44" />
+      <USelect v-model="statusFilter" :items="statusItems" class="w-40" />
+      <USelect v-model="policyTypeFilter" :items="policyTypeItems" class="w-40" />
     </div>
 
     <UAlert
@@ -115,7 +116,7 @@ const formatDate = (date: string) => {
         <NuxtLink
           v-for="task in tasks"
           :key="task.id"
-          :to="`/tasks/${task.id}`"
+          :to="`/workload/${encodeURIComponent(task.id)}`"
         >
           <UCard class="hover:shadow-md transition-shadow cursor-pointer">
             <div class="flex items-center justify-between gap-4">
@@ -125,8 +126,8 @@ const formatDate = (date: string) => {
                   <UBadge :color="statusColor(task.status)" variant="soft" size="xs">
                     {{ task.status }}
                   </UBadge>
-                  <UBadge :color="policyTypeColor(task.policy_type)" variant="outline" size="xs">
-                    {{ task.policy_type?.toUpperCase() }}
+                  <UBadge :color="policyTypeColor(task.task_info?.policy_type)" variant="outline" size="xs">
+                    {{ task.task_info?.policy_type?.toUpperCase() || '—' }}
                   </UBadge>
                 </div>
 
@@ -143,8 +144,8 @@ const formatDate = (date: string) => {
               <!-- Right -->
               <div class="flex items-center gap-6 flex-shrink-0 text-sm text-gray-500">
                 <div class="text-right">
-                  <p class="text-xs text-gray-400">Comm Type</p>
-                  <UBadge color="gray" variant="soft" size="xs">{{ task.comm_type }}</UBadge>
+                  <p class="text-xs text-gray-400">Type</p>
+                  <UBadge color="gray" variant="soft" size="xs">{{ getTaskType(task.id) }}</UBadge>
                 </div>
                 <div class="text-right">
                   <p class="text-xs text-gray-400">Received</p>
@@ -173,4 +174,4 @@ const formatDate = (date: string) => {
       </div>
     </template>
   </div>
-</template>
+</template>