sfp_front_vue_diarista_cliente/src/components/dashboard/DashboardNextSchedules.vue

<template>
  <div class="q-mx-md q-mb-md">
    <div class="dashboard-section-title gradient-diarista q-mb-sm">{{ $t('dashboard_client.next_schedules.title') }}</div>

    <div class="scroll-wrapper">
      <div class="scroll-track">
        <q-card
          v-for="item in data"
          :key="item.id"
          class="schedule-card card-border shadow-card bg-surface"
          :flat="false"
        >
          <q-card-section class="q-pa-md row col-12 no-wrap">
            <div class="col-3 column text-center">
              <div class="col-7">
                <q-avatar :style="avatarColors[item.id % avatarColors.length]" class="text-weight-bold q-mx-auto">
                  {{ item.provider_name?.slice(0,1) ?? '—' }}
                </q-avatar>
              </div>
              <div class="col-5 column justify-end">
                <span class="text-pill text-primary customColor">
                  {{ item.schedule_type === 'custom' ? $t('dashboard_client.next_schedules.tag_custom') : $t('dashboard_client.next_schedules.tag_default') }}
                </span>
              </div>
            </div>

            <div class="col-5 column text-text q-px-sm">
              <div class="col-7 column">
                <div class="col-4">
                  <span class="text-provider-name">{{ item.provider_name ?? $t('dashboard_client.next_schedules.no_provider') }}</span>
                </div>
                <div class="col-4 column">
                  <div class="col-6">
                    <span class="text-schedule-date-bold">{{ formatWeekday(item.date) }}</span><span class="text-schedule-date-regular">{{ ', ' + formatDayMonth(item.date) }}</span>
                  </div>
                  <div class="col-6 q-pt-sm">
                    <span class="text-schedule-date-regular">{{ $t('dashboard_client.next_schedules.from') }} </span>
                    <span class="text-schedule-date-bold">{{ item.start_time?.slice(0,5) }} {{ $t('dashboard_client.next_schedules.to') }} {{ item.end_time?.slice(0,5) }}</span>
                  </div>
                </div>
              </div>
              <div class="col-5">
                <div class="full-height column justify-end">
                  <div class="row text-pill-place">
                    <q-icon :name="addressIcon(item.address?.address_type ?? item.custom_address_type)" size="15px" color="primary" />
                    <span class="row items-end">{{ addressLabel(item.address?.address_type ?? item.custom_address_type) }}</span>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-4 column text-text">
              <div class="column col-5">
                <span class="text-price-main col-6">
                  {{ item.total_amount && item.total_amount !== '0.00' ? formatCurrency(item.total_amount) : $t('dashboard_client.next_schedules.to_combine') }}
                </span>
                <span class="text-price-label col-6">
                  {{ formatLabelByPeriodType(item.period_type) }}
                </span>
              </div>
              <div class="col-7 column justify-end items-end">
                <q-btn
                  unelevated rounded no-caps
                  color="primary"
                  padding="1px 5px"
                  size="sm"
                  class="full-width"
                  :label="$t('dashboard_client.next_schedules.details')"
                />
              </div>
            </div>
          </q-card-section>
        </q-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n';
import { formatCurrency } from 'src/helpers/utils';

defineProps({ data: { type: Array, default: () => [] } });

const { t } = useI18n();

const avatarColors = [
  { background: '#ffd5df', color: '#932e57' },
  { background: '#d7e8ff', color: '#2158a8' },
  { background: '#dfd',    color: '#2a7a3b' },
  { background: '#ffe5cc', color: '#8a4500' },
];

const formatWeekday = (iso) => {
  if (!iso) return '';
  const d = new Date(iso);
  const w = d.toLocaleDateString('pt-BR', { weekday: 'long' });
  return w.charAt(0).toUpperCase() + w.slice(1);
};

const formatDayMonth = (iso) => {
  if (!iso) return '';
  return new Date(iso).toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit' });
};

const addressIcon = (type) => type === 'home' ? 'mdi-home-outline' : 'mdi-office-building-outline';

const addressLabel = (type) => {
  if (type === 'home') return t('address.types.commercial.home');
  if (type === 'apartment') return t('dashboard_client.next_schedules.place_apartment');
  if (type === 'commercial') return t('address.types.commercial.commercial');
  return t('dashboard_client.next_schedules.place_unknown');
};

const formatLabelByPeriodType = (type) => {
  switch (type) {
    case '2': return t('period_types.2');
    case '4': return t('period_types.4');
    case '6': return t('period_types.6');
    case '8': return t('period_types.8');
    default: return t('period_types.unknown');

  }
};
</script>

<style scoped lang="scss">
.scroll-wrapper { overflow: hidden; }
.scroll-track {
  display: flex;
  flex-direction: row;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 8px;
  &::-webkit-scrollbar { display: none; }
  &::after { content: ''; flex: 0 0 1px; }
}
.schedule-card {
  min-width: 80%;
  min-height: 90px;
}

.customColor {
  background: linear-gradient(180deg, #8B5CF6 50%, #EC4899 50%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>