sfp_front_vue_diarista_cliente/src/components/dashboard/DashboardTodaySchedules.vue

<template>
  <div class="q-mx-md q-mb-md">
    <div class="scroll-wrapper">
      <div class="scroll-track">
        <q-card
          v-for="item in data"
          :key="item.id"
          class="today-card card-border shadow-card bg-surface"
          :flat="false"
        >
          <q-card-section class="q-pa-md">
            <div class="row no-wrap items-start q-mb-xs">
              <q-avatar size="40px" class="flex-shrink-0 q-mr-sm">
                <img v-if="item.provider_photo" :src="item.provider_photo" />
                <span v-else :style="avatarColors[item.id % avatarColors.length]" class="text-weight-bold full-width full-height flex flex-center" style="font-size:14px; border-radius:50%;">
                  {{ item.provider_name?.slice(0, 2).toUpperCase() ?? '??' }}
                </span>
              </q-avatar>
              <div class="col column no-wrap overflow-hidden justify-center">
                <span class="text-body2 text-text leading-tight">
                  <template v-if="cardState(item) === 'awaiting_code'">{{ $t('dashboard_client.today_schedules.start_with') }}</template>
                  <template v-else-if="cardState(item) === 'in_progress'">{{ $t('dashboard_client.today_schedules.started_by') }}</template>
                  <template v-else>{{ $t('dashboard_client.today_schedules.finished_by') }}</template>
                  <span class="text-weight-bold"> {{ ' ' +  item.provider_name ?? '—' }}</span>
                </span>
                <div class="row items-center q-mt-xs">
                  <q-icon name="mdi-clock-outline" size="13px" class="q-mr-xs gradient-diarista" />
                  <span class="text-caption text-grey-5">
                    <template v-if="cardState(item) !== 'finished'">{{ $t('dashboard_client.next_schedules.from') }} </template>
                    {{ item.start_time?.slice(0, 5) }} {{ $t('dashboard_client.next_schedules.to') }} {{ item.end_time?.slice(0, 5) }}
                  </span>
                </div>
              </div>
              <div class="flex-shrink-0 q-ml-sm column items-center justify-start">
                <template v-if="cardState(item) === 'awaiting_code'">
                  <div class="column items-center">
                    <span class="text-caption text-primary q-mb-xs">{{ $t('dashboard_client.today_schedules.code_label') }}</span>
                    <div class="code-pill bg-primary">{{ item.code }}</div>
                  </div>
                </template>

                <template v-else-if="cardState(item) === 'in_progress'">
                  <div class="column items-center">
                    <div class="clock-badge">
                      <q-icon name="mdi-clock-outline" size="18px" color="white" />
                    </div>
                    <span class="badge-status-text text-primary text-weight-bold q-mt-xs">
                      {{ $t('dashboard_client.today_schedules.in_progress') }}
                    </span>
                  </div>
                </template>

                <template v-else>
                  <div v-if="item.client_reviewed" class="rate-btn reviewed-badge">
                    <q-icon name="mdi-star" size="14px" class="q-mr-xs" />
                    {{ $t('dashboard_client.schedule_rating.reviewed_badge') }}
                  </div>
                  <q-btn
                    v-else
                    unelevated no-caps
                    class="rate-btn"
                    icon="mdi-star-outline"
                    :label="$t('dashboard_client.today_schedules.rate_btn')"
                    @click.stop="emit('rate', item)"
                  />
                </template>
              </div>
            </div>

            <div class="progress-track q-mb-sm">
              <div class="progress-fill" :class="cardState(item) === 'finished' ? 'progress-fill--finished' : ''" :style="{ width: progressByState(item) + '%' }" />
            </div>

            <div class="row items-center no-wrap">
              <template v-if="cardState(item) !== 'finished'">
                <q-btn
                  flat no-caps dense
                  :label="$t('dashboard_client.today_schedules.help_btn')"
                  color="primary"
                  size="sm"
                  class="flex-shrink-0"
                  @click.stop="openHelp"
                />
                <q-space />
                <template v-if="cardState(item) === 'awaiting_code'">
                  <q-icon name="mdi-map-marker-outline" size="13px" color="grey-6" class="q-mr-xs flex-shrink-0" />
                  <span class="text-caption text-grey-6 col ellipsis text-right">
                    {{ [item.address?.address, item.address?.number, item.address?.district].filter(Boolean).join(', ') || '—' }}
                  </span>
                </template>
                <template v-else>
                  <q-icon name="mdi-clock-outline" size="13px" class="q-mr-xs flex-shrink-0 gradient-diarista" />
                  <span class="text-caption text-grey-6 text-right text-no-wrap">
                    {{ $t('dashboard_client.today_schedules.end_time_label') }} 
                    <span class="gradient-diarista">{{ item.end_time?.slice(0, 5) }}</span>
                  </span>
                </template>
              </template>
            </div>
          </q-card-section>
        </q-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useQuasar } from 'quasar'
import ProfileHelpDialog from 'src/components/profile/ProfileHelpDialog.vue'

defineProps({ data: { type: Array, default: () => [] } })
const emit = defineEmits(['rate'])

const $q = useQuasar()

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

const cardState = (item) => {
  if (!item.code_verified) return 'awaiting_code'
  const [h, m] = (item.end_time || '23:59').slice(0, 5).split(':').map(Number)
  const endTime = new Date()
  endTime.setHours(h, m, 0, 0)
  return new Date() >= endTime ? 'finished' : 'in_progress'
}

const progressByState = (item) => {
  const state = cardState(item)
  if (state === 'awaiting_code') return 60
  if (state === 'in_progress')   return 80
  return 100
}

const openHelp = () => {
  $q.dialog({ component: ProfileHelpDialog })
}
</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; }
}

.today-card {
  min-width: 80%;
  scroll-snap-align: start;
  border-radius: 12px;
}

.code-pill {
  color: white;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 2px;
  border-radius: 20px;
  padding: 4px 14px;
}

.clock-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8B5CF6, #EC4899);
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-status-text {
  font-size: 10px;
  white-space: nowrap;
}

.rate-btn {
  background: #EC4899;
  color: white;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  border-radius: 10px !important;
  min-width: 72px;
  min-height: 56px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.reviewed-badge {
  cursor: default;
  opacity: 0.85;
  font-size: 11px;
}

.progress-track {
  width: 100%;
  height: 5px;
  background: #E2E8F0;
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #8B5CF6, #EC4899);
  transition: width 0.4s ease;

  &--finished {
    background: #22c55e;
  }
}
</style>