feat: :sparkles: feat(agendamento-sob-medida) Realizado o ajuste do card para que o cliente possa aceitar ou recusar a proposta do prestador

foi ajustado o template para que ele possa listar as oportunidades aceitar pelos prestadores, para que o cliente consiga aceitar ou recusa de acordo com as informação que são necessarias para visalização do card

fase:dev | origin:escopo

Co-authored-by: Copilot <copilot@github.com>

src/pages/dashboard/DashboardPage.vue

@@ -14,7 +14,7 @@
         @view-details="openAcceptedDialog"
       />
       <DashboardScrollAreaSchedules />
-      <DashboardClientProposals />
+      <DashboardClientProposals :data="clientProposals" />
       <DashboardPendingCustomSchedules />
       <DashboardNextSchedules v-if="nextSchedules.length > 0" :data="nextSchedules" />
       <DashboardLastDoneSchedules v-if="lastDoneSchedules.length > 0" :data="lastDoneSchedules" />
@@ -47,6 +47,7 @@ const headerBar = ref({});
 const summaryInfos = ref({});
 const pendingSchedules = ref([]);
 const nextSchedules = ref([]);
+const clientProposals = ref([]);
 const lastDoneSchedules = ref([]);
 const favoriteProviders = ref([]);
 const providersClose = ref([]);
@@ -75,7 +76,7 @@ const reloadDashboard = async () => {
     lastDoneSchedules.value = response.lastDoneSchedules ?? [];
     favoriteProviders.value = response.favoriteProviders ?? [];
     providersClose.value = response.providersClose ?? [];
-    DashboardClientProposals.value = response.DashboardClientProposals ?? [];
+    clientProposals.value = response.schedulesProposals ?? [];
   }
   if( showSuccessModal.value ) {
     $q.dialog({

src/pages/dashboard/components/DashboardClientProposals.vue

@@ -1,194 +1,169 @@
 <template>
-  <q-page class="bg-grey-2 q-pa-md">
-
-    <div class="scroll-wrapper">
-      <div class="scroll-track">
-
-        <q-card
-          v-for="item in proposals"
-          :key="item.id"
-          class="proposal-card"
-          flat
-        >
-          <div class="row no-wrap items-center">
-
-            <!-- AVATAR -->
-            <q-avatar size="56px" class="q-mr-md">
-              <img :src="item.avatar" />
-            </q-avatar>
-
-            <!-- CONTEÚDO -->
-            <div class="content">
-
-              <!-- HEADER -->
-              <div class="row items-center justify-between">
-                <div>
-                  <div class="name">
-                    {{ item.name }}
-                    <span class="age">{{ `(${item.age})` }}</span>
-                  </div>
-
-                  <div class="rating">
-                     {{ item.rating }}
-                  </div>
-                </div>
-
-                <div class="distance text-right">
-                  <div class="value">{{ item.distance }} </div>
-                </div>
+  <div class="scroll-wrapper">
+  <div class="scroll-track">
+
+    <q-card
+      v-for="item in data"
+      :key="item.id"
+      class="proposal-card"
+      flat
+    >
+      <div class="row no-wrap items-center">
+
+        <q-avatar size="48px" class="q-mr-sm">
+          <img :src="item.avatar" />
+        </q-avatar>
+
+        <div class="content">
+
+          <!-- HEADER -->
+          <div class="row justify-between items-center">
+            <div>
+              <div class="name">
+                {{ item.provider_name }}
               </div>
 
-              <!-- DATA -->
-              <div class="datetime">
-                {{ item.date }}
-              </div>
-
-              <!-- PREÇO -->
-              <div class="price">
-                 {{ formatPrice(item.price) }}
-              </div>
-
-              <!-- AÇÕES -->
-              <div class="actions">
-                <q-btn
-                  label="recusar"
-                  no-caps
-                  flat
-                  class="btn-reject"
-                  @click="onReject(item)"
-                />
-
-                <q-btn
-                  label="aceitar"
-                  no-caps
-                  class="btn-accept"
-                  @click="onAccept(item)"
-                />
+              <div class="rating">
+                 {{ item.avarage_rating }}
               </div>
+            </div>
 
+            <div class="distance">
+              {{ item.distance }}
             </div>
+          </div>
 
+          <!-- DATA -->
+          <div class="datetime">
+            {{ item.date }} <br />
+            {{ item.start_time }}   {{ item.end_time }}
           </div>
-        </q-card>
 
-      </div>
-    </div>
+          <!-- PREÇO -->
+          <div class="price">
+            {{ item.total_amount }}
+          </div>
 
-  </q-page>
-</template>
+          <!-- LABEL -->
+          <!-- <div class="type">
+            Candidato <span>sob medida</span>
+          </div> -->
 
-<script setup>
+          <!-- BOTÕES -->
+          <div class="actions">
+            <q-btn label="recusar" flat class="btn-reject" />
+            <q-btn label="aceitar" class="btn-accept" />
+          </div>
 
-import { ref } from 'vue'
-const proposals = ref([])
+        </div>
 
-const onAccept = (item) => {
-  console.log('Aceitou', item)
-}
+      </div>
+    </q-card>
 
-const onReject = (item) => {
-  console.log('Recusou', item)
-}
+  </div>
+</div>
+</template>
 
-const formatPrice = (value) => {
-  return Number(value).toFixed(2).replace('.', ',')
-}
+<script setup>
+defineProps({
+  data: {
+    type: Array,
+    default: () => []
+  }
+})
 </script>
 
-<style scoped>
-/* SCROLL */
+<style scoped lang="scss">
 .scroll-wrapper {
-  overflow: hidden;
+  overflow-x: auto;
 }
 
 .scroll-track {
   display: flex;
   gap: 12px;
-  overflow-x: auto;
-  padding-bottom: 8px;
-
-  scroll-snap-type: x proximity;
 }
 
 .scroll-track::-webkit-scrollbar {
   display: none;
 }
 
-/* CARD */
 .proposal-card {
-  min-width: 260px;
-  flex: 0 0 auto;
-
+  min-width: 240px;
+  max-width: 240px;
   border-radius: 16px;
-  padding: 16px;
-  background: #f6f6f9;
-
-  display: flex;
+  padding: 12px;
+  background: white;
+  flex-shrink: 0;
 }
 
-/* CONTEÚDO */
 .content {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
   width: 100%;
 }
 
-/* TEXTO */
 .name {
+  font-size: 13px;
   font-weight: 600;
-  font-size: 14px;
 }
 
 .age {
-  color: #777;
-  font-size: 12px;
+  font-size: 11px;
+  color: #999;
 }
 
 .rating {
-  font-size: 12px;
+  font-size: 11px;
   color: #999;
 }
 
-.distance .value {
-  font-size: 12px;
+.distance {
+  font-size: 11px;
   font-weight: 600;
+  color: #777;
 }
 
 .datetime {
   font-size: 11px;
-  color: #888;
+  color: #777;
   margin-top: 4px;
 }
 
 .price {
-  font-size: 16px;
-  font-weight: bold;
+  font-size: 14px;
+  font-weight: 700;
+  color: #6b4eff;
+  margin-top: 4px;
+}
+
+.type {
+  font-size: 11px;
+  margin-top: 4px;
   color: #6b4eff;
-  margin-top: 6px;
 }
 
-/* BOTÕES */
+.type span {
+  font-weight: 600;
+}
+
 .actions {
   display: flex;
   justify-content: flex-end;
-  gap: 8px;
-  margin-top: 10px;
+  gap: 6px;
+  margin-top: 8px;
 }
 
 .btn-reject {
-  background: #e5ddff;
+  background: #eee6ff;
   color: #6b4eff;
   border-radius: 20px;
-  padding: 4px 14px;
-  font-size: 12px;
+  padding: 2px 10px;
+  font-size: 11px;
 }
 
 .btn-accept {
   background: linear-gradient(90deg, #6b4eff, #9f6bff);
   color: white;
   border-radius: 20px;
-  padding: 4px 14px;
-  font-size: 12px;
+  padding: 2px 10px;
+  font-size: 11px;
 }
-</style>
+</style>