Merge branch 'feature/diariaapp-kay-agendamentos-sob-medida-apps' of Softpar/sfp_front_vue_diarista_cliente into development

src/components/dashboard/DashboardNextSchedules.vue

@@ -80,6 +80,7 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { formatCurrency } from 'src/helpers/utils';
+import { formatLabelByPeriodType } from 'src/helpers/utils';
 
 defineProps({ data: { type: Array, default: () => [] } });
 const emit = defineEmits(['view-details']);
@@ -114,16 +115,8 @@ const addressLabel = (type) => {
   return t('dashboard_client.next_schedules.place_unknown');
 };
 
-const formatLabelByPeriodType = (type) => {
-  switch (type) {
-    case '2': return t('period_types.2');
-    case '4': return t('period_types.4');
-    case '6': return t('period_types.6');
-    case '8': return t('period_types.8');
-    default: return t('period_types.unknown');
 
-  }
-};
+
 </script>
 
 <style scoped lang="scss">

src/helpers/utils.js

@@ -328,7 +328,18 @@ const chooseprice = (periodType, daily_price_8h) => {
     default:
       return 0
   }
-}
+};
+
+const formatLabelByPeriodType = (type) => {
+  switch (type) {
+    case '2': return useI18n().t('period_types.2');
+    case '4': return useI18n().t('period_types.4');
+    case '6': return useI18n().t('period_types.6');
+    case '8': return useI18n().t('period_types.8');
+    default: return useI18n().t('period_types.unknown');
+
+  }
+};
 
 export {
   formatDateDMYtoYMD,
@@ -348,5 +359,6 @@ export {
   validateCardExpiration,
   formatAddress,
   calculateDailyPrices,
-  chooseprice
+  chooseprice,
+  formatLabelByPeriodType
 };

src/i18n/locales/pt.json

@@ -431,6 +431,10 @@
       "btn_close": "fechar",
       "btn_help": "Ajuda"
     },
+      "client_proposals": {
+        "candidate": "Candidato",
+        "custom": "sob medida"
+      },
     "last_schedules": {
       "title": "Últimos serviços",
       "reschedule": "reagendar",

src/pages/dashboard/components/DashboardClientProposals.vue

@@ -1,23 +1,24 @@
 <template>
   <div class="scroll-wrapper">
-  <div class="scroll-track">
+  <div class="scroll-track q-pb-md q-px-md">
 
     <q-card
       v-for="item in data"
       :key="item.id"
-      class="proposal-card"
-      flat
+      class="proposal-card shadow-card"
+      :flat ="false"
+
     >
       <div class="row no-wrap items-center">
 
-        <q-avatar size="48px" class="q-mr-sm">
-          <img :src="item.avatar" />
-        </q-avatar>
+        <q-avatar :style="avatarColors[item.id % avatarColors.length]" class="text-weight-bold q-mx-auto">
+                  {{ item.provider_name?.slice(0,1) ?? '—' }}
+                </q-avatar>
 
         <div class="content">
 
           <!-- HEADER -->
-          <div class="row justify-between items-center">
+          <div class="row justify-between items-center text-text ">
             <div>
               <div class="name">
                 {{ item.provider_name }}
@@ -35,19 +36,19 @@
 
           <!-- DATA -->
           <div class="datetime">
-            {{ item.date }} <br />
-            {{ item.start_time }}   {{ item.end_time }}
+            {{ formatDate(item.date) }} <br />
+            {{ $t('dashboard_client.next_schedules.from') }} {{ formatTime(item.start_time) }} {{ $t('dashboard_client.next_schedules.to') }}  {{ formatTime(item.end_time) }}
           </div>
 
           <!-- PREÇO -->
           <div class="price">
-            {{ 'R$ ' + chooseprice(item.period_type, item.daily_price_8h) }}
+            {{ 'R$' + chooseprice(item.period_type, item.daily_price_8h) }}
           </div>
 
           <!-- LABEL -->
-          <!-- <div class="type">
-            Candidato <span>sob medida</span>
-          </div> -->
+           <div class="type">
+            {{ $t('dashboard_client.client_proposals.candidate') }} <span>{{ $t('dashboard_client.client_proposals.custom') }}</span>
+          </div> 
 
           <!-- BOTÕES -->
           <div class="actions">
@@ -76,6 +77,36 @@ defineProps({
 })
 
 
+const avatarColors = [
+  { background: '#ffd5df', color: '#932e57' },
+  { background: '#d7e8ff', color: '#2158a8' },
+  { background: '#dfd',    color: '#2a7a3b' },
+  { background: '#ffe5cc', color: '#8a4500' },
+];
+
+const formatTime = (time) => {
+  if (!time) return '';
+
+  
+  const [hour, minute] = time.split(':');
+  return `${hour}:${minute}`;
+};
+
+const formatDate = (date) => {
+  if (!date) return '';
+
+  const d = new Date(date);
+
+  const weekday = d.toLocaleDateString('pt-BR', {
+    weekday: 'long'
+  });
+
+  const day = String(d.getDate()).padStart(2, '0');
+  const month = String(d.getMonth() + 1).padStart(2, '0');
+
+  return `${weekday}, ${day}-${month}`;
+};
+
 const handleAcceptProposal = async (proposalId) => {
   // isLoading.value = true
   try {
@@ -106,21 +137,32 @@ const handleAcceptProposal = async (proposalId) => {
 }
 
 .proposal-card {
-  min-width: 240px;
-  max-width: 240px;
-  border-radius: 16px;
-  padding: 12px;
+  min-width: 300px;
+  max-width: 300px;
+  min-height: 140px; // garante altura pra distribuir conteúdo
+  border-radius: 20px;
+  padding: 16px;
   background: white;
   flex-shrink: 0;
 }
 
+.proposal-card .row {
+  height: 100%;
+  align-items: stretch !important;
+}
+
 .content {
   width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between; // distribui topo e base
 }
 
 .name {
-  font-size: 13px;
+  font-size: 15px;
   font-weight: 600;
+  color: #6b4eff;
 }
 
 .age {
@@ -129,8 +171,8 @@ const handleAcceptProposal = async (proposalId) => {
 }
 
 .rating {
-  font-size: 11px;
-  color: #999;
+  font-size: 12px;
+  color: #0f0000;
 }
 
 .distance {
@@ -141,17 +183,20 @@ const handleAcceptProposal = async (proposalId) => {
 
 .datetime {
   font-size: 11px;
-  color: #777;
-  margin-top: 4px;
+  color: #999;
+  margin-top: 10px;
+  line-height: 1.5;
+  margin-left: 6px;
 }
 
 .price {
+  position: absolute;
+  top: 16px;
+  right: 16px;
   font-size: 14px;
   font-weight: 700;
   color: #6b4eff;
-  margin-top: 4px;
 }
-
 .type {
   font-size: 11px;
   margin-top: 4px;
@@ -165,23 +210,23 @@ const handleAcceptProposal = async (proposalId) => {
 .actions {
   display: flex;
   justify-content: flex-end;
-  gap: 6px;
-  margin-top: 8px;
+  gap: 8px;
+  margin-top: auto; 
 }
 
 .btn-reject {
   background: #eee6ff;
   color: #6b4eff;
   border-radius: 20px;
-  padding: 2px 10px;
-  font-size: 11px;
+  padding: 4px 14px;
+  font-size: 12px;
 }
 
 .btn-accept {
   background: linear-gradient(90deg, #6b4eff, #9f6bff);
   color: white;
   border-radius: 20px;
-  padding: 2px 10px;
-  font-size: 11px;
+  padding: 4px 14px;
+  font-size: 12px;
 }
 </style>