sfp_front_vue_diarista_cliente/src/pages/agenda/CalendarPage.vue

<template>
  <q-page class="bg-page q-pb-xl">
    <div class="calendar-header row items-center bg-white">
      <q-space />
      <span class="text-subtitle1 text-weight-bold gradient-diarista">{{ $t('dashboard_client.agenda.title') }}</span>
      <q-space />
    </div>

    <template v-if="loading">
      <div class="row items-center justify-center full-width" style="height: 60vh">
        <q-spinner-dots color="primary" />
      </div>
    </template>

    <template v-else>
      <div class="q-mt-md q-mx-md">
        <div class="section-title gradient-diarista q-mb-sm">{{ $t('dashboard_client.agenda.upcoming_title') }}</div>

        <template v-if="upcomingSchedules.length > 0">
          <q-card
            v-for="item in upcomingSchedules"
            :key="item.id"
            class="calendar-card bg-surface shadow-card q-mb-sm"
            :flat="false"
          >
            <q-card-section class="q-pa-sm">
              <div class="row no-wrap items-start q-gutter-x-sm">
                <q-avatar size="44px">
                  <img :src="item.provider_photo || defaultAvatar">
                </q-avatar>

                <div class="col column">
                  <span class="text-name ellipsis">{{ item.provider_name }}</span>
                  <div class="row items-center no-wrap">
                    <span class="text-date-bold">{{ formatWeekday(item.date) }}</span>
                    <span class="text-date-regular">{{ ', ' + formatDayMonth(item.date) }}</span>
                  </div>
                  <span class="text-date-regular">
                    {{ $t('dashboard_client.next_schedules.from') }}
                    <span class="text-date-bold">{{ item.start_time?.slice(0, 5) }}</span>
                    {{ $t('dashboard_client.next_schedules.to') }}
                    <span class="text-date-bold">{{ item.end_time?.slice(0, 5) }}</span>
                  </span>
                </div>

                <div class="col-auto column items-end">
                  <q-chip
                    dense
                    square
                    :color="statusBgColor(item.status)"
                    :text-color="statusTextColor(item.status)"
                    :label="statusLabel(item.status)"
                    class="status-chip"
                  />
                  <span class="text-price">{{ formatCurrency(item.total_amount) }}</span>
                  <span class="text-period">{{ periodLabel(item.period_type) }}</span>
                </div>
              </div>

              <div class="row items-center no-wrap q-mt-xs">
                <span class="type-label" :class="item.schedule_type === 'custom' ? 'type-custom' : 'type-default'">
                  {{ item.schedule_type === 'custom' ? $t('dashboard_client.agenda.type_custom') : $t('dashboard_client.agenda.type_default') }}
                </span>
                <q-space />
                <q-btn
                  flat
                  no-caps
                  color="primary"
                  size="xs"
                  class="btn-action"
                  :label="$t('dashboard_client.agenda.btn_view_details')"
                  @click="openDetailsDialog(item)"
                />
              </div>
            </q-card-section>
          </q-card>
        </template>

        <div v-else class="text-center text-grey-5 q-py-lg text-body2">
          {{ $t('dashboard_client.agenda.empty_upcoming') }}
        </div>
      </div>

      <div class="q-mt-lg q-mx-md">
        <div class="section-title gradient-diarista q-mb-sm">{{ $t('dashboard_client.agenda.completed_title') }}</div>

        <template v-if="completedSchedules.length > 0">
          <q-card
            v-for="item in completedSchedules"
            :key="item.id"
            class="calendar-card bg-surface shadow-card q-mb-sm"
            :flat="false"
          >
            <q-card-section class="q-pa-sm">
              <div class="row no-wrap items-start q-gutter-x-sm">
                <q-avatar size="44px">
                  <img :src="item.provider_photo || defaultAvatar">
                </q-avatar>

                <div class="col column">
                  <span class="text-name ellipsis">{{ item.provider_name }}</span>
                  <div class="row items-center no-wrap">
                    <span class="text-date-bold">{{ formatWeekday(item.date) }}</span>
                    <span class="text-date-regular">{{ ', ' + formatDayMonth(item.date) }}</span>
                  </div>
                  <span class="text-date-regular">
                    {{ $t('dashboard_client.next_schedules.from') }}
                    <span class="text-date-bold">{{ item.start_time?.slice(0, 5) }}</span>
                    {{ $t('dashboard_client.next_schedules.to') }}
                    <span class="text-date-bold">{{ item.end_time?.slice(0, 5) }}</span>
                  </span>
                </div>

                <div class="col-auto column items-end">
                  <q-chip
                    dense
                    square
                    :color="statusBgColor(item.status)"
                    :text-color="statusTextColor(item.status)"
                    :label="statusLabel(item.status)"
                    class="status-chip"
                  />
                  <span class="text-price">{{ formatCurrency(item.total_amount) }}</span>
                  <span class="text-period">{{ periodLabel(item.period_type) }}</span>
                </div>
              </div>

              <div class="row items-center no-wrap q-mt-xs">
                <span class="type-label" :class="item.schedule_type === 'custom' ? 'type-custom' : 'type-default'">
                  {{ item.schedule_type === 'custom' ? $t('dashboard_client.agenda.type_custom') : $t('dashboard_client.agenda.type_default') }}
                </span>
                <q-space />
                <q-rating
                  :model-value="item.client_reviewed ? item.client_stars : 0"
                  :max="5"
                  size="14px"
                  color="amber"
                  icon="mdi-star-outline"
                  icon-selected="mdi-star"
                  readonly
                  class="q-mr-sm"
                />
                <q-btn
                  v-if="item.client_reviewed"
                  unelevated
                  rounded
                  no-caps
                  color="secondary"
                  size="xs"
                  class="btn-rate"
                  :label="$t('dashboard_client.agenda.btn_reschedule')"
                  @click="openSchedulingDialog(item)"
                />
                <q-btn
                  v-else
                  unelevated
                  rounded
                  no-caps
                  color="secondary"
                  size="xs"
                  class="btn-rate"
                  :label="$t('dashboard_client.agenda.btn_rate')"
                  @click="openRatingDialog(item)"
                />
              </div>
            </q-card-section>
          </q-card>
        </template>

        <div v-else class="text-center text-grey-5 q-py-lg text-body2">
          {{ $t('dashboard_client.agenda.empty_completed') }}
        </div>
      </div>
    </template>
  </q-page>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useQuasar } from 'quasar';
import { useI18n } from 'vue-i18n';
import { getClientCalendar } from 'src/api/clientCalendar';
import { formatCurrency } from 'src/helpers/utils';
import NextSchedulesDetailsDialog from 'src/components/dashboard/NextSchedulesDetailsDialog.vue';
import ScheduleRatingDialog from 'src/components/dashboard/ScheduleRatingDialog.vue';
import SchedulingDialog from 'src/pages/search/components/SchedulingDialog.vue';

const $q = useQuasar();
const { t } = useI18n();

const defaultAvatar = 'https://cdn.quasar.dev/img/avatar.png';
const loading = ref(true);
const upcomingSchedules = ref([]);
const completedSchedules = ref([]);

const parseLocalDate = (dateStr) => {
  if (!dateStr) return null;
  const s = String(dateStr);
  const iso = s.match(/^(\d{4})-(\d{2})-(\d{2})/);
  if (iso) return new Date(+iso[1], +iso[2] - 1, +iso[3]);
  const dmy = s.match(/^(\d{2})\/(\d{2})\/(\d{4})/);
  if (dmy) return new Date(+dmy[3], +dmy[2] - 1, +dmy[1]);
  return null;
};

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

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

const periodLabel = (periodType) => {
  const key = `period_types.${periodType}`;
  const translated = t(key);
  return translated !== key ? translated : '';
};

const statusLabel = (status) => {
  const map = {
    pending: t('dashboard_client.agenda.status_pending'),
    accepted: t('dashboard_client.agenda.status_accepted'),
    paid: t('dashboard_client.agenda.status_paid'),
    started: t('dashboard_client.agenda.status_started'),
    finished: t('dashboard_client.agenda.status_finished'),
    cancelled: t('dashboard_client.agenda.status_cancelled'),
  };
  return map[status] ?? status;
};

const statusBgColor = (status) => {
  const map = {
    pending: 'warning-bg',
    accepted: 'success-bg',
    paid: 'success-bg',
    started: 'info-bg',
    finished: 'neutral-bg',
    cancelled: 'secondary-bg',
  };
  return map[status] ?? 'neutral-bg';
};

const statusTextColor = (status) => {
  const map = {
    pending: 'warning',
    accepted: 'success',
    paid: 'success',
    started: 'info',
    finished: 'status-finished',
    cancelled: 'secondary',
  };
  return map[status] ?? 'text';
};

const loadCalendar = async () => {
  const response = await getClientCalendar();
  if (response) {
    upcomingSchedules.value = response.upcomingSchedules ?? [];
    completedSchedules.value = response.completedSchedules ?? [];
  }
};

const openDetailsDialog = (schedule) => {
  $q.dialog({
    component: NextSchedulesDetailsDialog,
    componentProps: { schedule },
  }).onOk(async ({ action }) => {
    if (action === 'cancelled') {
      await loadCalendar();
    }
  });
};

const openRatingDialog = (schedule) => {
  $q.dialog({
    component: ScheduleRatingDialog,
    componentProps: { schedule },
  }).onOk(() => {
    loadCalendar();
  });
};

const openSchedulingDialog = (item) => {
  $q.dialog({
    component: SchedulingDialog,
    componentProps: {
      provider: {
        provider_id: item.provider_id,
        provider_name: item.provider_name,
        average_rating: item.average_rating,
        total_reviews: item.total_reviews,
        total_services: item.total_services,
      },
    },
  });
};

onMounted(async () => {
  await loadCalendar();
  loading.value = false;
});
</script>

<style scoped lang="scss">
.calendar-header {
  padding-top: calc(env(safe-area-inset-top) + 12px);
  padding-bottom: 12px;
  box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.08);
}

.calendar-card {
  border-radius: 12px;
  width: 100%;
}

.type-label {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
}

.type-default {
  color: #8B5CF6;
}

.type-custom {
  color: #EC4899;
}

.text-name {
  font-size: 13px;
  font-weight: 700;
  color: #3a3a4a;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-date-bold {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #3a3a4a;
}

.text-date-regular {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: #666;
}

.text-price {
  font-size: 13px;
  font-weight: 700;
  color: #3a3a4a;
  white-space: nowrap;
}

.text-period {
  font-size: 10px;
  color: #888;
  text-align: right;
  white-space: nowrap;
}

.status-chip {
  font-size: 11px !important;
  font-weight: 700;
  height: auto;
  padding: 2px 2px;
}

.btn-action {
  font-size: 11px;
  font-weight: 700;
}

.btn-rate {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
}

</style>