115 lines
4.4 KiB
Vue
115 lines
4.4 KiB
Vue
<script setup lang="ts">
|
|
usePageTitle('Facturación')
|
|
</script>
|
|
|
|
<template>
|
|
<div class="fac-page">
|
|
<div class="flex flex-wrap items-start justify-between gap-4">
|
|
<div>
|
|
<h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Facturación</h1>
|
|
<p class="mt-2 max-w-2xl text-[14px] leading-relaxed text-[var(--text-muted)]">
|
|
Invoicing workflow for the brokerage. Generate, track, and manage invoices tied to policies, commissions, and client accounts. Integrates with carrier billing and AR to keep financials in sync.
|
|
</p>
|
|
</div>
|
|
<span
|
|
class="inline-flex items-center rounded-full px-3 py-1 text-[11px] font-semibold uppercase tracking-wider"
|
|
style="background: rgba(1, 105, 111, 0.06); color: #01696f;"
|
|
>Coming soon</span>
|
|
</div>
|
|
|
|
<!-- Feature preview -->
|
|
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
|
<div class="fac-card">
|
|
<div class="fac-icon" style="background: rgba(1,105,111,0.08); color: #01696f;">
|
|
<UIcon name="i-heroicons-document-text" style="width: 20px; height: 20px;" />
|
|
</div>
|
|
<h3 class="fac-card-title">Invoice generation</h3>
|
|
<p class="fac-card-desc">Create invoices from bound policies, endorsements, or manual entries. Auto-populate client data, premium breakdowns, and tax fields.</p>
|
|
</div>
|
|
|
|
<div class="fac-card">
|
|
<div class="fac-icon" style="background: rgba(124,58,237,0.08); color: #7c3aed;">
|
|
<UIcon name="i-heroicons-arrow-path" style="width: 20px; height: 20px;" />
|
|
</div>
|
|
<h3 class="fac-card-title">Recurring billing</h3>
|
|
<p class="fac-card-desc">Schedule monthly, quarterly, or annual invoices for policies with installment plans. Automatic reminders on upcoming due dates.</p>
|
|
</div>
|
|
|
|
<div class="fac-card">
|
|
<div class="fac-icon" style="background: rgba(194,123,26,0.08); color: #c27b1a;">
|
|
<UIcon name="i-heroicons-banknotes" style="width: 20px; height: 20px;" />
|
|
</div>
|
|
<h3 class="fac-card-title">Payment tracking</h3>
|
|
<p class="fac-card-desc">Record payments against invoices, mark partial payments, and flag overdue balances. Ties into the collections workstation.</p>
|
|
</div>
|
|
|
|
<div class="fac-card">
|
|
<div class="fac-icon" style="background: rgba(15,123,95,0.08); color: #0f7b5f;">
|
|
<UIcon name="i-heroicons-building-office-2" style="width: 20px; height: 20px;" />
|
|
</div>
|
|
<h3 class="fac-card-title">Carrier reconciliation</h3>
|
|
<p class="fac-card-desc">Match brokerage invoices to carrier statements. Surface discrepancies between what was billed and what was remitted.</p>
|
|
</div>
|
|
|
|
<div class="fac-card">
|
|
<div class="fac-icon" style="background: rgba(193,56,56,0.08); color: #c13838;">
|
|
<UIcon name="i-heroicons-document-arrow-down" style="width: 20px; height: 20px;" />
|
|
</div>
|
|
<h3 class="fac-card-title">PDF & export</h3>
|
|
<p class="fac-card-desc">Generate branded PDF invoices, export batches to CSV for accounting software, or integrate via API with ERP systems.</p>
|
|
</div>
|
|
|
|
<div class="fac-card">
|
|
<div class="fac-icon" style="background: rgba(190,24,93,0.08); color: #be185d;">
|
|
<UIcon name="i-heroicons-chart-bar" style="width: 20px; height: 20px;" />
|
|
</div>
|
|
<h3 class="fac-card-title">Billing analytics</h3>
|
|
<p class="fac-card-desc">Aging reports, collection rates by client segment, revenue recognition dashboards, and commission payout summaries.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.fac-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
max-width: 64rem;
|
|
margin: 0 auto;
|
|
padding-bottom: 3rem;
|
|
}
|
|
.fac-card {
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(0,0,0,0.06);
|
|
background: #fff;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.03);
|
|
padding: 24px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
transition: all 200ms ease;
|
|
}
|
|
.fac-card:hover {
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
|
|
border-color: rgba(1,105,111,0.15);
|
|
}
|
|
.fac-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 36px; height: 36px;
|
|
border-radius: 10px;
|
|
}
|
|
.fac-card-title {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
.fac-card-desc {
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
color: var(--text-muted);
|
|
}
|
|
</style>
|