feat: :sparkles: feat(carteirinha dependente) Foi adicionado ao frontend a visualização da data e status

Foi adicionado ao frontend a visualização da data e status na carteirinha

fase:dev | origin:escopo

src/pages/associado/carteirinha/CarteirinhaPage.vue

@@ -72,58 +72,80 @@
       </q-card>
 
      <q-card
-        v-for="(dependent, index) in user?.dependents ?? []"
-        :key="`dependent-${index}`"
-        flat
-        class="associado-card"
-        :class="isVertical ? 'card-vertical' : 'card-horizontal'"
-      >
-        <div class="card-logo-row text-center">
-          <img
-            :src="LogoSerPratiParceiro"
-            class="card-logo"
-            alt="SerPrati"
-          />
-        </div>
+  v-for="(dependent, index) in user?.dependents ?? []"
+  :key="`dependent-${index}`"
+  flat
+  class="associado-card"
+  :class="isVertical ? 'card-vertical' : 'card-horizontal'"
+>
+  <div class="card-logo-row text-center">
+    <img
+      :src="LogoSerPratiParceiro"
+      class="card-logo"
+      alt="SerPrati"
+    />
+  </div>
 
-        <div
-          class="card-body"
-          :class="isVertical ? 'card-body--vertical' : 'card-body--horizontal'"
-        >
-          <q-avatar
-            class="card-avatar"
-            :size="isVertical ? '100px' : '76px'"
-          >
-            <q-icon
-              name="mdi-account"
-              color="white"
-              :size="isVertical ? '64px' : '40px'"
-            />
-          </q-avatar>
+  <div
+    class="card-body"
+    :class="isVertical ? 'card-body--vertical' : 'card-body--horizontal'"
+  >
+    <q-avatar
+      class="card-avatar"
+      :size="isVertical ? '100px' : '76px'"
+    >
+      <q-icon
+        name="mdi-account"
+        color="white"
+        :size="isVertical ? '64px' : '40px'"
+      />
+    </q-avatar>
+
+    <div class="card-info">
+
+      <div class="card-info__row">
+        <span class="card-info__label">
+          {{ $t('common.terms.name') }}
+        </span>
+
+        <span class="card-info__value">
+          {{ dependent.name }}
+        </span>
+      </div>
 
-          <div class="card-info">
-            <div class="card-info__row">
-              <span class="card-info__label">
-                {{ $t('common.terms.name') }}
-              </span>
+      <div class="card-info__row q-pt-sm">
+        <span class="card-info__label">
+          Parentesco
+        </span>
 
-              <span class="card-info__value">
-                {{ dependent.name }}
-              </span>
-            </div>
+        <span class="card-info__value">
+          {{ dependent.kinship }}
+        </span>
+      </div>
 
-            <div class="card-info__row q-pt-sm">
-              <span class="card-info__label">
-                Tipo
-              </span>
+      <div class="card-info__row q-pt-sm">
+        <span class="card-info__label">
+          Status
+        </span>
 
-              <span class="card-info__value">
-                {{ dependent.kinship }}
-              </span>
-            </div>
-          </div>
-        </div>
-      </q-card>
+        <span class="card-info__value">
+          {{ dependent.status ? $t(`associado.dependent_statuses.${dependent.status}`) : '—' }}
+        </span>
+      </div>
+
+      <div class="card-info__row q-pt-sm">
+        <span class="card-info__label">
+          {{ $t('associado.validity') }}
+        </span>
+
+        <span class="card-info__value">
+          {{ dependent.expiry_date ?? '—' }}
+        </span>
+      </div>
+
+    </div>
+  </div>
+</q-card>
       <div class="q-mt-auto justify-end">
         <q-btn
           round