Forráskód Böngészése

feat: :sparkles: feat(agendamento-sob-medida): finalizando fluxo frontend com dashboard, modal e i18n

Realizada a finalização do fluxo Sob Medida no frontend, incluindo criação do componente FinalSuccessModal para exibição do modal de sucesso após a criação do agendamento e integração do redirecionamento para dashboard, além da refatoração do script setup, organização do template, melhorias de CSS e implementação da internacionalização (PT, EN e ES).

fase:dev | origin:escopo
kayo henrique 2 hete
szülő
commit
6508b9f431

+ 5 - 0
src/i18n/locales/pt.json

@@ -393,6 +393,11 @@
       "rating": "Avaliação",
       "services": "Serviços"
     },
+    "dashboard_pending_custom_schedules": {
+      "pending_request_title": "Solicitando propostas de diaristas",
+      "pending_request_time": "15 min atrás",
+      "waiting_status": "Aguardando"
+    },
     "summary": {
       "welcome": "Bem-vindo (a),",
       "my_schedules": "Minhas diárias"

+ 2 - 0
src/pages/dashboard/DashboardPage.vue

@@ -9,6 +9,7 @@
       <DashboardHeaderBar :data="headerBar" />
       <DashboardSummaryInfos :data="summaryInfos" />
       <DashboardScrollAreaSchedules />
+      <DashboardPendingCustomSchedules />
       <DashboardNextSchedules v-if="nextSchedules.length > 0" :data="nextSchedules" />
       <DashboardLastDoneSchedules v-if="lastDoneSchedules.length > 0" :data="lastDoneSchedules" />
       <DashboardFavoriteProviders v-if="favoriteProviders.length > 0" :data="favoriteProviders" />
@@ -26,6 +27,7 @@ import DashboardLastDoneSchedules from 'src/components/dashboard/DashboardLastDo
 import DashboardFavoriteProviders from 'src/components/dashboard/DashboardFavoriteProviders.vue';
 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 { useRouter } from 'vue-router'
 import { onMounted, ref } from 'vue';
 import { dadosDashboard } from 'src/api/dashboard';

+ 94 - 0
src/pages/dashboard/components/DashboardPendingCustomSchedules.vue

@@ -0,0 +1,94 @@
+<template>
+  <q-card flat bordered class="pending-request-card">
+    <div class="request-wrapper">
+      <!-- informações -->
+      <div class="request-info">
+        <div class="request-title">
+          {{ $t('dashboard_client.dashboard_pending_custom_schedules.pending_request_title') }}
+        </div>
+
+        <div class="request-time">
+          <q-icon name="schedule" size="14px" />
+          <span>{{ $t('dashboard_client.dashboard_pending_custom_schedules.pending_request_time') }}</span>
+        </div>
+      </div>
+
+      <!-- status -->
+      <div class="request-status">
+        <q-icon
+          name="hourglass_empty"
+          size="22px"
+          color="secondary"
+        />
+        <span>{{ $t('dashboard_client.dashboard_pending_custom_schedules.waiting_status') }}</span>
+      </div>
+    </div>
+
+    <!-- barra -->
+    <div class="progress-track">
+      <div class="progress-fill" />
+    </div>
+  </q-card>
+</template>
+
+<script setup>
+</script>
+
+<style scoped lang="scss">
+.pending-request-card {
+  border-radius: 14px;
+  padding: 12px;
+  background: white;
+  margin: 12px 16px;
+}
+
+.request-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.request-info {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.request-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #4b4b4b;
+  line-height: 1.2;
+}
+
+.request-time {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: #999;
+  font-size: 12px;
+}
+
+.request-status {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #9b5cff;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.progress-track {
+  margin-top: 10px;
+  height: 4px;
+  border-radius: 999px;
+  background: #ece6f8;
+  overflow: hidden;
+}
+
+.progress-fill {
+  width: 35%;
+  height: 100%;
+  background: linear-gradient(90deg, #ff72df, #8f5cff);
+}
+</style>

+ 1 - 0
src/pages/search/SearchPage.vue

@@ -22,6 +22,7 @@
             unelevated
             padding="8px 16px"
             class="text-weight-bold custom-schedule-btn card-border"
+            @click="router.push({ name: 'SobMedidaPage' })"
           >
             <template #default>
               <div class="column items-center q-gutter-y-xs">