sfp_front_vue_diarista_prestador/src/components/dashboard/DashboardSummaryInfos.vue

<template>
  <q-card class="summary-card shadow-card q-ma-md bg-surface card-border" :flat="false">
    <q-card-section class="q-pa-md">
      <div class="row items-center no-wrap q-gutter-x-md">
        <div class="row items-center no-wrap q-gutter-x-sm col">
          <q-avatar size="54px" :style="!data?.profile_photo ? avatarStyle : undefined" class="">
            <img v-if="data?.profile_photo" :src="data.profile_photo" style="object-fit:cover;width:100%;height:100%;border-radius:50%" />
            <span v-else>{{ data?.name?.slice(0, 2).toUpperCase() ?? '??' }}</span>
          </q-avatar>
          <div class="column q-gutter-y-xs min-width-0">
            <span class="summary-greeting font14 fontmedium">{{ $t('provider.dashboard.summary.welcome') }}</span>
            <span class="summary-name text-primary font16 fontbold">{{ data?.name ?? $t('provider.dashboard.summary.welcome') }}</span>
          </div>
        </div>
        <div class="column items-end q-gutter-y-xs col-auto">
          <span class="summary-label text-grey-6 font12 fontbold">{{ $t('provider.dashboard.summary.my_schedules') }}</span>
          <span class="summary-count row">
            <q-icon name="mdi-clock-check-outline" class="q-my-auto" size="xs" color="positive" />
            <span class="q-my-auto q-ml-sm">{{ data?.pending_services ?? 0 }}</span>
          </span>
        </div>
      </div>

      <div class="row items-center justify-between no-wrap q-mt-xs">
        <div class="text-text col font8 fontmedium ellipsis">
          {{ formatAddress(data.address) }}
        </div>
        <q-icon name="mdi-chevron-down" color="secondary" size="18px" class="col-auto" />
      </div>
    </q-card-section>
  </q-card>
</template>

<script setup>
import { formatAddress } from 'src/helpers/utils';
defineProps({ data: { type: Object, default: () => null } });

const avatarStyle = {
  background: 'linear-gradient(135deg, #ffd7e8 0%, #ff9acc 100%)',
  color: '#7a154f',
};

</script>

<style scoped lang="scss">
.summary-card { overflow: hidden; }
.min-width-0 { min-width: 0; }
.summary-greeting { color: #8c8c98; display: block; }
.summary-name { display: block; line-height: 1.1; }
.summary-label { white-space: nowrap; }
.summary-count {
  color: #3a3a4a;
}
</style>