feat(packages): display detailed pricing breakdown on package cards

src/pages/packages/components/PackageCard.vue

@@ -17,16 +17,24 @@
         Duração padrão: {{ (pkg.class_duration_minutes ?? 120) / 60 }}h
       </div>
 
-      <div class="row q-gutter-xs">
-        <q-badge v-if="pkg.pavao" color="primary" outline>
-          Pavão {{ formatToBRLCurrency(pkg.pavao.total_value) }}
-        </q-badge>
+      <div class="q-mt-sm row q-col-gutter-sm">
+        <div v-if="pkg.pavao" class="col-12 col-md-6">
+          <div class="text-caption text-weight-bold text-primary q-mb-xs">PAVÃO</div>
+          <div class="text-caption text-grey-8">Matrícula: {{ formatToBRLCurrency(pkg.pavao.registration_value) }}</div>
+          <div class="text-caption text-grey-8">Aulas: {{ formatToBRLCurrency(pkg.pavao.classes_value) }}</div>
+          <div class="text-caption text-grey-8">Materiais: {{ formatToBRLCurrency(pkg.pavao.materials_total_value) }}</div>
+          <div class="text-caption text-weight-bold q-mt-xs">Total: {{ formatToBRLCurrency(pkg.pavao.total_value) }}</div>
+        </div>
 
-        <q-badge v-if="pkg.irrecusavel" color="secondary" outline>
-          Irrecusável {{ formatToBRLCurrency(pkg.irrecusavel.total_value) }}
-        </q-badge>
+        <div v-if="pkg.irrecusavel" class="col-12 col-md-6">
+          <div class="text-caption text-weight-bold text-secondary q-mb-xs">IRRECUSÁVEL</div>
+          <div class="text-caption text-grey-8">Matrícula: {{ formatToBRLCurrency(pkg.irrecusavel.registration_value) }}</div>
+          <div class="text-caption text-grey-8">Aulas: {{ formatToBRLCurrency(pkg.irrecusavel.classes_value) }}</div>
+          <div class="text-caption text-grey-8">Materiais: {{ formatToBRLCurrency(pkg.irrecusavel.materials_total_value) }}</div>
+          <div class="text-caption text-weight-bold q-mt-xs">Total: {{ formatToBRLCurrency(pkg.irrecusavel.total_value) }}</div>
+        </div>
 
-        <span v-if="!pkg.pavao && !pkg.irrecusavel" class="text-caption text-grey-5">
+        <span v-if="!pkg.pavao && !pkg.irrecusavel" class="col-12 text-caption text-grey-5">
           Sem precificação definida
         </span>
       </div>