ajustes visuais apresentacao

src/components/dashboard/DashboardTodayServices.vue

@@ -10,7 +10,7 @@
         >
           <q-card-section class="q-pa-md">
             <div class="row no-wrap items-start q-mb-xs">
-              <div class="col-7 row">
+              <div class="col-8 row">
                 <q-avatar size="40px" class="flex-shrink-0 q-mr-sm">
                   <span
                     :style="avatarColors[item.id % avatarColors.length]"
@@ -22,7 +22,7 @@
                 </q-avatar>
 
                 <div class="col column no-wrap overflow-hidden justify-center">
-                  <span class="text-body2 text-text leading-tight">
+                  <span class="text-caption text-text">
                     <template v-if="cardState(item) === 'finished'">
                       {{ $t('provider.dashboard.today_services.finished_label') }}
                       <span class="text-weight-bold"> {{ ' ' + item.client_name ?? '—' }}</span>
@@ -33,23 +33,23 @@
                       <span class="text-weight-bold"> {{ ' ' + item.client_name ?? '—' }}</span>
                     </template>
                   </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">
+                  <div class="row items-center q-mt-xs no-wrap">
+                    <q-icon name="mdi-clock-outline" size="12px" class="q-mr-xs gradient-diarista" />
+                    <span class="hours-font text-grey-5">
                       {{ $t('common.from') }} {{  item.start_time?.slice(0, 5) }} {{ $t('common.to') }} {{ item.end_time?.slice(0, 5) }}
                     </span>
                   </div>
                 </div>
               </div>
 
-              <div class="flex-shrink-0 row items-center justify-center col-5">
+              <div class="flex-shrink-0 row items-center justify-center col-4">
                 <div v-if="cardState(item) === 'awaiting_code'" class="col-12 row items-center justify-center q-pb-sm q-px-sm">
-                  <div class="hint-text text-caption text-text text-weight-bold text-center q-mb-xs col-12">
-                    {{ $t('provider.dashboard.today_services.code_hint1') }}
+                  <div class="hint-text text-caption text-text text-center q-mb-xs col-12">
+                    {{ $t('provider.dashboard.today_services.code_hint') }}
                   </div>
-                  <div class="hint-text text-caption text-text text-weight-bold text-center q-mb-xs col-12">
+                  <!-- <div class="hint-text text-caption text-text text-center q-mb-xs col-12">
                     {{ $t('provider.dashboard.today_services.code_hint2') }}
-                  </div>
+                  </div> -->
                   <div class="code-input-row col-12">
                     <input
                       v-for="(_, idx) in 4"
@@ -77,7 +77,7 @@
                     </span>
                     <div class="code-pill bg-positive row">
                       <q-icon
-                        name="mdi-check" size="14px" class="q-mr-xs q-my-auto"
+                        name="mdi-check" size="12px" class="q-mr-xs q-my-auto"
                       />
                       {{ item.code || localVerified[item.id] }}
                     </div>
@@ -93,10 +93,13 @@
                     v-else
                     unelevated no-caps
                     class="rate-btn"
-                    icon="mdi-star-outline"
-                    :label="$t('provider.dashboard.today_services.rate_btn')"
                     @click.stop="emit('rate', item)"
-                  />
+                  >
+                    <div class="column items-center">
+                      <q-icon name="mdi-star-outline" size="12px" class="q-mr-xs" />
+                      {{ $t('provider.dashboard.today_services.rate_btn') }}
+                    </div>
+                  </q-btn>
                 </div>
               </div>
             </div>
@@ -123,7 +126,7 @@
                 <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('provider.dashboard.today_services.end_time_label') }} 
-                  <span class="gradient-diarista">{{ item.end_time?.slice(0, 5) }}</span>
+                  <span class="gradient-diarista">{{ calculateTimeUntilEnd(item.end_time) }}</span>
                 </span>
               </template>
               <template v-else-if="cardState(item) === 'awaiting_code'">
@@ -244,6 +247,18 @@ const progressByState = (item) => {
   return 100
 }
 
+const calculateTimeUntilEnd = (endTimeStr) => {
+  const [h, m] = (endTimeStr || '23:59').slice(0, 5).split(':').map(Number)
+  const now = new Date()
+  const endTime = new Date()
+  endTime.setHours(h, m, 0, 0)
+  const diffMs = endTime - now
+  if (diffMs <= 0) return '00:00'
+  const diffH = Math.floor(diffMs / (1000 * 60 * 60))
+  const diffM = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60))
+  return `${String(diffH).padStart(2, '0')}h:${String(diffM).padStart(2, '0')}`
+}
+
 const openHelp = () => {
   $q.dialog({ component: ProfileHelpDialog })
 }
@@ -281,13 +296,13 @@ const openHelp = () => {
 }
 
 .code-input-box {
-  width: 26px;
-  height: 32px;
+  width: 16px;
+  height: 22px;
   background: #d1d5db;
   border: none;
   border-radius: 6px;
   text-align: center;
-  font-size: 15px;
+  font-size: 11px;
   font-weight: 700;
   color: #1a1a2e;
   outline: none;
@@ -307,10 +322,10 @@ const openHelp = () => {
 .code-pill {
   color: white;
   font-weight: 800;
-  font-size: 15px;
+  font-size: 12px;
   letter-spacing: 2px;
   border-radius: 20px;
-  padding: 1px 18px;
+  padding: 1px 8px;
 }
 
 .badge-status-text {
@@ -321,13 +336,13 @@ const openHelp = () => {
 .rate-btn {
   background: #EC4899;
   color: white;
-  font-weight: 700;
-  font-size: 13px;
+  font-weight: 600;
+  font-size: 11px;
   white-space: nowrap;
   border-radius: 10px !important;
-  min-width: 72px;
-  min-height: 56px;
-  padding: 6px 10px;
+  min-width: 45px;
+  min-height: 40px;
+  padding: 3px 5px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -359,4 +374,8 @@ const openHelp = () => {
     background: #22c55e;
   }
 }
+
+.hours-font {
+  font-size: 11px;
+}
 </style>

src/i18n/locales/en.json

@@ -256,6 +256,7 @@
         "start_label": "Service start for",
         "finished_label": "Service by",
         "finished_suffix": "completed",
+        "code_hint": "Ask the client for the code to begin",
         "code_hint1": "Ask the client for ",
         "code_hint2": "the code to begin",
         "code_placeholder": "0000",

src/i18n/locales/es.json

@@ -254,6 +254,7 @@
       },
       "today_services": {
         "start_label": "Inicio del servicio para",
+        "code_hint": "Solicite al cliente el código para comenzar",
         "code_hint1": "Solicite al cliente el ",
         "code_hint2": "código para comenzar",
         "code_placeholder": "0000",

src/i18n/locales/pt.json

@@ -256,6 +256,7 @@
         "start_label": "Início do serviço para",
         "finished_label": "Serviço de",
         "finished_suffix": "concluído",
+        "code_hint": "Solicite ao cliente o código para começar",
         "code_hint1": "Solicite ao cliente o ",
         "code_hint2": "código para começar",
         "code_placeholder": "0000",