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

@@ -77,55 +77,83 @@
       </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 in user?.dependents ?? []"
+          :key="`dependent-${dependent.id}`"
+          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-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__row q-pt-sm">
-        <span class="card-info__label">
-          Tipo
-        </span>
-
-        <span class="card-info__value">
-          {{ dependent.kinship }}
-        </span>
-      </div>
-    </div>
-  </div>
-</q-card>
+          <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__row q-pt-sm">
+                <span class="card-info__label">
+                  Parentesco
+                </span>
+
+                <span class="card-info__value">
+                  {{ dependent.kinship ?? '—' }}
+                </span>
+              </div>
+
+              <div class="card-info__row q-pt-sm">
+                <span class="card-info__label">
+                  Status
+                </span>
+
+                <span class="card-info__value">
+                  {{ dependent.status ? $t(`associado.dependent_statuses.${dependent.status}`) : '—' }}
+                </span>
+              </div>
+
+              <div
+                v-if="dependent.expiry_date"
+                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>
 
       <q-btn
         round