big refactor

app/components/policies/ConfirmAcceptModal.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+interface Plan {
+  provider_id: string
+  plan_id: string
+  name: string
+  premium: number
+}
+
+interface Props {
+  open: boolean
+  plan: Plan | null
+  loading?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  loading: false
+})
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+  accept: []
+  cancel: []
+}>()
+
+function close() {
+  emit('update:open', false)
+  emit('cancel')
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition duration-200 ease-out"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition duration-150 ease-in"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div v-if="open" class="confirm-modal-overlay" @click.self="close">
+        <Transition
+          enter-active-class="transition duration-200 ease-out"
+          enter-from-class="opacity-0 scale-95 translate-y-2"
+          enter-to-class="opacity-100 scale-100 translate-y-0"
+          leave-active-class="transition duration-150 ease-in"
+          leave-from-class="opacity-100 scale-100 translate-y-0"
+          leave-to-class="opacity-0 scale-95 translate-y-2"
+        >
+          <div v-if="open" class="confirm-modal">
+            <div class="confirm-modal-head">
+              <h3 class="text-lg font-semibold text-[var(--text-primary)]">Accept Quote</h3>
+              <button type="button" class="confirm-modal-close" @click="close">
+                <UIcon name="i-heroicons-x-mark" style="width: 16px; height: 16px;" />
+              </button>
+            </div>
+            <div class="confirm-modal-body">
+              <div v-if="plan" class="space-y-3">
+                <div class="bg-gray-50 rounded-lg p-4">
+                  <div class="text-sm text-gray-500">Selected Plan</div>
+                  <div class="text-lg font-semibold text-[var(--text-primary)] mt-1">{{ plan.name }}</div>
+                  <div class="text-2xl font-bold text-green-600 mt-2">${{ plan.premium?.toLocaleString() }}</div>
+                  <div class="text-xs text-gray-500 mt-1">Provider: {{ plan.provider_id }}</div>
+                </div>
+                <p class="text-sm text-gray-600">
+                  Are you sure you want to accept this plan? This will trigger the solicitation process.
+                </p>
+              </div>
+            </div>
+            <div class="confirm-modal-foot">
+              <div class="flex justify-end gap-3">
+                <UButton color="gray" variant="soft" @click="close">Cancel</UButton>
+                <UButton color="primary" :loading="loading" @click="emit('accept')">Accept</UButton>
+              </div>
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </Transition>
+   </Teleport>
+ </template>
+
+ <style scoped>
+/* Modal overlay */
+.confirm-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  background: rgba(0, 0, 0, 0.25);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  backdrop-filter: blur(2px);
+}
+
+/* Modal container */
+.confirm-modal {
+  width: 100%;
+  max-width: 480px;
+  border-radius: 12px;
+  background: #ffffff;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+}
+
+/* Modal header */
+.confirm-modal-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px 20px 0;
+  flex-shrink: 0;
+}
+
+/* Modal body */
+.confirm-modal-body {
+  padding: 16px 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Modal footer */
+.confirm-modal-foot {
+  padding: 12px 20px 16px;
+  border-top: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+/* Close button */
+.confirm-modal-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  color: #8a8a86;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+
+.confirm-modal-close:hover {
+  background: rgba(0, 0, 0, 0.05);
+  color: var(--text-primary);
+}
+</style>