ajustes nos blocos de servicos do dia

src/components/dashboard/DashboardTodaySchedules.vue

@@ -1,5 +1,9 @@
 <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
@@ -31,7 +35,11 @@
 
               <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'">
+                  <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>
 
@@ -71,7 +79,17 @@
               <div
                 class="flex-shrink-0 q-ml-sm column items-center justify-start"
               >
-                <template v-if="cardState(item) === 'awaiting_code'">
+                <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") }}
@@ -201,7 +219,7 @@
                     {{ $t("dashboard_client.today_schedules.end_time_label") }}
 
                     <span class="gradient-diarista">
-                      {{ item.end_time?.slice(0, 5) }}
+                      {{ calculateTimeUntilEnd(item.end_time) }}
                     </span>
                   </span>
                 </template>
@@ -277,6 +295,36 @@ const cardState = (item) => {
   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);
 });

src/components/dashboard/ScheduleAcceptedDialog.vue

@@ -13,7 +13,15 @@
           size="80px"
           :style="avatarStyle"
         >
-          {{ displayProviderName.slice(0, 2).toUpperCase() || "??" }}
+          <img
+            v-if="getProfileMediaUrl(item)"
+            :src="getProfileMediaUrl(item)"
+            style="object-fit: cover"
+          />
+
+          <span v-else>
+            {{ displayProviderName.slice(0, 2).toUpperCase() || "??" }}
+          </span>
         </q-avatar>
 
         <div class="font16 fontbold provider-name">
@@ -159,6 +167,7 @@
 import { avatarColors } from "src/helpers/avatarColors";
 import { computed, onMounted } from "vue";
 import { formatCurrency, getFirstName } from "src/helpers/utils";
+import { getProfileMediaUrl } from "src/helpers/profileMedia";
 
 import {
   getSchedulePlatformFeeRate,

src/i18n/locales/en.json

@@ -441,12 +441,14 @@
       "my_schedules": "My schedules"
     },
     "today_schedules": {
+      "title": "Today",
       "start_with": "Service starting with",
-      "started_by": "Service in progress",
+      "not_started_label": "Starting soon with",
+      "started_by": "Service started by",
       "finished_by": "Service completed by",
       "code_label": "Code",
       "in_progress": "in progress",
-      "end_time_label": "Ends at",
+      "end_time_label": "Ends in:",
       "rate_btn": "Rate",
       "help_btn": "help",
       "cancelled": "Service cancelled"

src/i18n/locales/es.json

@@ -441,12 +441,14 @@
       "my_schedules": "Mis jornadas"
     },
     "today_schedules": {
+      "title": "Hoy",
       "start_with": "Servicio iniciado con",
-      "started_by": "Servicio en curso",
+      "not_started_label": "Comienza pronto con",
+      "started_by": "Servicio iniciado por",
       "finished_by": "Servicio concluido por",
       "code_label": "Código",
       "in_progress": "en progreso",
-      "end_time_label": "Término a las",
+      "end_time_label": "Termina en:",
       "rate_btn": "Avaliar",
       "help_btn": "ayuda",
       "cancelled": "Servicio cancelado"

src/i18n/locales/pt.json

@@ -441,12 +441,14 @@
       "my_schedules": "Minhas diárias"
     },
     "today_schedules": {
+      "title": "Hoje",
       "start_with": "Início do serviço com",
-      "started_by": "Seriço serviço em andamento",
+      "not_started_label": "Início em breve com",
+      "started_by": "Serviço iniciado por",
       "finished_by": "Serviço concluído por",
       "code_label": "Código",
       "in_progress": "em andamento",
-      "end_time_label": "Término às",
+      "end_time_label": "Termina em:",
       "rate_btn": "Avaliar",
       "help_btn": "ajuda",
       "cancelled": "Serviço cancelado"