sfp_front_vue_diarista_cliente/src/components/dashboard/DashboardTodaySchedules.vue

<template>
  <div class="q-mx-md q-mb-md">
    <div class="font16 fontbold gradient-diarista q-mb-sm">
      {{ $t("dashboard_client.today_schedules.title") }}
    </div>

    <div class="scroll-wrapper">
      <div class="scroll-track">
        <q-card
          v-for="item in visibleItems"
          :key="item.id"
          :flat="false"
          class="today-card card-border shadow-card bg-surface"
        >
          <q-card-section class="q-pa-md">
            <div class="row no-wrap items-start q-mb-xs">
              <q-avatar
                class="flex-shrink-0 q-mr-sm"
                size="40px"
              >
                <img
                  v-if="item.provider_photo"
                  :src="item.provider_photo"
                />

                <span
                  v-else
                  :style="avatarColors[item.id % avatarColors.length]"
                  class="full-width full-height flex flex-center"
                  style="border-radius: 50%"
                >
                  {{ item.provider_name?.slice(0, 2).toUpperCase() ?? "??" }}
                </span>
              </q-avatar>

              <div class="col-7 column no-wrap overflow-hidden justify-center">
                <span class="font12 fontmedium text-text leading-tight">
                  <template v-if="cardState(item) === 'awaiting_code' && !hasStarted(item)">
                    {{ $t("dashboard_client.today_schedules.not_started_label") }}
                  </template>

                  <template v-else-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-if="cardState(item) === 'finished'">
                    {{ $t("dashboard_client.today_schedules.finished_by") }}
                  </template>

                  <template v-else-if="cardState(item) === 'cancelled'">
                    {{ $t("dashboard_client.today_schedules.cancelled") }}
                  </template>

                  <span class="fontbold">
                    {{ " " + (getFirstName(item.provider_name) || "—") }}
                  </span>
                </span>

                <div class="row items-center q-mt-xs no-wrap">
                  <q-icon
                    class="q-mr-xs gradient-diarista"
                    name="mdi-clock-outline"
                    size="13px"
                  />

                  <span class="font9 fontregular text-grey-6">
                    {{ $t("dashboard_client.next_schedules.from") }}
                    {{ 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' && !hasStarted(item)">
                  <div class="clock-badge">
                    <q-icon
                      color="white"
                      name="mdi-clock-outline"
                      size="15px"
                    />
                  </div>
                </template>

                <template v-else-if="cardState(item) === 'awaiting_code' && hasStarted(item)">
                  <div class="column items-center">
                    <span class="font9 fontbold text-primary q-mb-xs">
                      {{ $t("dashboard_client.today_schedules.code_label") }}
                    </span>

                    <div class="code-pill fontbold font10 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
                        color="white"
                        name="mdi-clock-outline"
                        size="15px"
                      />
                    </div>

                    <span
                      class="font10 fontregular badge-status-text text-primary q-mt-xs"
                    >
                      {{ $t("dashboard_client.today_schedules.in_progress") }}
                    </span>
                  </div>
                </template>

                <template v-else-if="cardState(item) === 'finished'">
                  <div
                    v-if="item.client_reviewed"
                    class="rate-btn reviewed-badge"
                  >
                    <q-icon
                      class="q-mr-xs"
                      name="mdi-star"
                      size="12px"
                    />

                    {{ $t("dashboard_client.schedule_rating.reviewed_badge") }}
                  </div>

                  <q-btn
                    v-else
                    class="rate-btn font10 fontmedium"
                    no-caps
                    unelevated
                    @click.stop="emit('rate', item)"
                  >
                    <div class="column items-center">
                      <q-icon
                        class="q-mr-xs"
                        name="mdi-star-outline"
                        size="12px"
                      />

                      {{ $t("dashboard_client.today_schedules.rate_btn") }}
                    </div>
                  </q-btn>
                </template>

                <template v-else-if="cardState(item) === 'cancelled'">
                  <div class="text-negative font10 fontbold text-center">
                    {{ $t("dashboard_client.today_schedules.cancelled") }}
                  </div>
                </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
                  class="flex-shrink-0"
                  color="primary"
                  dense
                  flat
                  no-caps
                  size="xs"
                  :label="$t('dashboard_client.today_schedules.help_btn')"
                  @click.stop="openHelp"
                />

                <q-space />

                <template v-if="cardState(item) === 'awaiting_code'">
                  <span
                    class="font9 fontregular text-grey-6 col ellipsis text-right"
                  >
                    <q-icon
                      class="q-mr-xs flex-shrink-0"
                      color="grey-6"
                      name="mdi-map-marker-outline"
                      size="13px"
                    />

                    {{
                      [
                        item.address?.address,
                        item.address?.number,
                        item.address?.district,
                      ]
                        .filter(Boolean)
                        .join(", ") || "—"
                    }}
                  </span>
                </template>

                <template v-else>
                  <q-icon
                    class="q-mr-xs flex-shrink-0 gradient-diarista"
                    name="mdi-clock-outline"
                    size="13px"
                  />

                  <span
                    class="font9 fontregular text-grey-6 text-right text-no-wrap"
                  >
                    {{ $t("dashboard_client.today_schedules.end_time_label") }}

                    <span class="gradient-diarista">
                      {{ calculateTimeUntilEnd(item.end_time) }}
                    </span>
                  </span>
                </template>
              </template>
            </div>
          </q-card-section>
        </q-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { avatarColors } from "src/helpers/avatarColors";
import { getFirstName } from "src/helpers/utils";
import { useQuasar } from "quasar";
import { ref, onMounted, onBeforeUnmount, computed } from "vue";

import ProfileHelpDialog from "src/components/profile/ProfileHelpDialog.vue";


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



const emit = defineEmits(["rate"]);

const $q = useQuasar();

const now = ref(Date.now());

let timer = null;

const cardState = (item) => {
  if (item.status === "cancelled") {
    return "cancelled";
  }

  if (item.client_reviewed) {
    return "finished";
  }

  if (item.status === "paid") {
    return "awaiting_code";
  }

  if (
    item.status === "started" ||
    item.status === "finished"
  ) {
    const [hours, minutes] = (item.end_time || "23:59")
      .slice(0, 5)
      .split(":")
      .map(Number);

    const endTime = new Date();

    endTime.setHours(hours, minutes, 0, 0);

    return now.value >= endTime.getTime()
      ? "finished"
      : "in_progress";
  }

  return "awaiting_code";
};

const hasStarted = (item) => {
  const [h, m] = (item.start_time || "00:00").slice(0, 5).split(":").map(Number);

  const startTime = new Date();

  startTime.setHours(h, m, 0, 0);

  return now.value >= startTime.getTime();
};

const calculateTimeUntilEnd = (endTimeStr) => {
  const [h, m] = (endTimeStr || "23:59").slice(0, 5).split(":").map(Number);

  const endTime = new Date();

  endTime.setHours(h, m, 0, 0);

  const diffMs = endTime.getTime() - now.value;

  if (diffMs <= 0) return "00:00:00";

  const diffH = Math.floor(diffMs / (1000 * 60 * 60));

  const diffM = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));

  const diffS = Math.floor((diffMs % (1000 * 60)) / 1000);

  return `${String(diffH).padStart(2, "0")}:${String(diffM).padStart(2, "0")}:${String(diffS).padStart(2, "0")}`;
};

const visibleItems = computed(() => {
  return props.data.filter((item) => !item.client_reviewed);
});

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 });
};

onMounted(() => {
  timer = setInterval(() => {
    now.value = Date.now();
  }, 1000);
});

onBeforeUnmount(() => {
  clearInterval(timer);
});
</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;
  letter-spacing: 1px;
  border-radius: 20px;
  padding: 4px 10px;
}

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

.badge-status-text {
  white-space: nowrap;
}

.rate-btn {
  background: #ec4899;
  color: white;
  white-space: nowrap;
  border-radius: 10px !important;
  min-width: 45px;
  min-height: 40px;
  padding: 3px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.reviewed-badge {
  cursor: default;
  opacity: 0.85;
}

.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>