feat: :sparkles: feat(agendamento-sob-medida) criação do card do front end, e as rotas de acesso para listagem das ifnormações

criado a rota de acesso para exibição dos dados do prestador que aceitou a proposta, tambem criada a dashboard que ira mostrar os prestadores para o cliente onde ele ira recusar ou aceitar aquele prestador para o serviço

fase:dev | origin:escopo

src/api/proposals.js

@@ -0,0 +1,6 @@
+import api from "src/api";
+
+export const getClientOpportunitiesProposals = async () => {
+  const { data } = await api.get(`/custom-schedule-client-opportunities-proposals`);
+  return data.payload;
+}

src/pages/dashboard/DashboardPage.vue

@@ -14,6 +14,7 @@
         @view-details="openAcceptedDialog"
       />
       <DashboardScrollAreaSchedules />
+      <DashboardClientProposals />
       <DashboardPendingCustomSchedules />
       <DashboardNextSchedules v-if="nextSchedules.length > 0" :data="nextSchedules" />
       <DashboardLastDoneSchedules v-if="lastDoneSchedules.length > 0" :data="lastDoneSchedules" />
@@ -35,6 +36,7 @@ import DashboardFavoriteProviders from 'src/components/dashboard/DashboardFavori
 import DashboardProvidersClose from 'src/components/dashboard/DashboardProvidersClose.vue';
 import FinalSuccesModal from '../schedules/components/FinalSuccesModal.vue';
 import DashboardPendingCustomSchedules from 'src/pages/dashboard/components/DashboardPendingCustomSchedules.vue';
+import DashboardClientProposals from 'src/pages/dashboard/components/DashboardClientProposals.vue';
 import { useRouter } from 'vue-router'
 import { onMounted, ref } from 'vue';
 import { useQuasar } from 'quasar';
@@ -73,6 +75,7 @@ const reloadDashboard = async () => {
     lastDoneSchedules.value = response.lastDoneSchedules ?? [];
     favoriteProviders.value = response.favoriteProviders ?? [];
     providersClose.value = response.providersClose ?? [];
+    DashboardClientProposals.value = response.DashboardClientProposals ?? [];
   }
   if( showSuccessModal.value ) {
     $q.dialog({

src/pages/dashboard/components/DashboardClientProposals.vue

@@ -0,0 +1,194 @@
+<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>
+
+              <!-- 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>
+
+            </div>
+
+          </div>
+        </q-card>
+
+      </div>
+    </div>
+
+  </q-page>
+</template>
+
+<script setup>
+
+import { ref } from 'vue'
+const proposals = ref([])
+
+const onAccept = (item) => {
+  console.log('Aceitou', item)
+}
+
+const onReject = (item) => {
+  console.log('Recusou', item)
+}
+
+const formatPrice = (value) => {
+  return Number(value).toFixed(2).replace('.', ',')
+}
+</script>
+
+<style scoped>
+/* SCROLL */
+.scroll-wrapper {
+  overflow: hidden;
+}
+
+.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;
+
+  border-radius: 16px;
+  padding: 16px;
+  background: #f6f6f9;
+
+  display: flex;
+}
+
+/* CONTEÚDO */
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+}
+
+/* TEXTO */
+.name {
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.age {
+  color: #777;
+  font-size: 12px;
+}
+
+.rating {
+  font-size: 12px;
+  color: #999;
+}
+
+.distance .value {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.datetime {
+  font-size: 11px;
+  color: #888;
+  margin-top: 4px;
+}
+
+.price {
+  font-size: 16px;
+  font-weight: bold;
+  color: #6b4eff;
+  margin-top: 6px;
+}
+
+/* BOTÕES */
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.btn-reject {
+  background: #e5ddff;
+  color: #6b4eff;
+  border-radius: 20px;
+  padding: 4px 14px;
+  font-size: 12px;
+}
+
+.btn-accept {
+  background: linear-gradient(90deg, #6b4eff, #9f6bff);
+  color: white;
+  border-radius: 20px;
+  padding: 4px 14px;
+  font-size: 12px;
+}
+</style>

src/router/routes/proposals.route.js

@@ -0,0 +1,7 @@
+export default [
+  {
+    path: '/proposals',
+    name: 'proposals',
+    component: () => import('src/pages/dashboard/components/DashboardClientProposals.vue')
+  }
+]