sfp_front_vue_diarista_cliente/src/pages/dashboard/components/DashboardClientProposals.vue

<template>
  <div class="scroll-wrapper">
    <div
      class="dashboard-section-title gradient-diarista q-mb-sm font16 fontbold q-px-md"
    >
      {{ $t("dashboard_client.client_proposals.title") }}
    </div>

    <div class="scroll-track q-pb-md q-px-md text-text">
      <q-card
        v-for="item in data"
        :key="item.id"
        :flat="false"
        class="proposal-card shadow-card"
      >
        <div class="row no-wrap">
          <div class="column">
            <q-avatar
              class="q-mx-auto"
              :style="avatarColors[item.id % avatarColors.length]"
            >
              <img
                v-if="item.provider_photo"
                :src="item.provider_photo"
                style="object-fit: cover; border-radius: 50%"
              />

              <span v-else>
                {{ item.provider_name?.slice(0, 1) ?? "—" }}
              </span>
            </q-avatar>

            <q-space />

            <div class="customColor font8 fontbold">
              <div>
                {{ $t("dashboard_client.client_proposals.candidate") }}
              </div>

              <div class="no-wrap">
                {{ $t("dashboard_client.client_proposals.custom") }}
              </div>
            </div>
          </div>

          <div class="content">
            <div class="row justify-between items-center text-text">
              <div>
                <div class="font12 fontmedium">
                  {{ item.provider_name }}

                  <span class="font9 fontregular">
                    {{
                      $t("dashboard_client.client_proposals.age", {
                        idade: item.idade,
                      })
                    }}
                  </span>
                </div>

                <span
                  v-if="getProviderGenderLabel(item, t)"
                  class="font9 fontregular text-grey-7"
                >
                  {{ getProviderGenderLabel(item, t) }}
                </span>

                <span class="font10 fontmedium">
                  <q-icon
                    class="font9 fontregular"
                    color="warning"
                    name="star"
                    size="12px"
                  />

                  <span>
                    {{ item.average_rating }}
                  </span>
                </span>
              </div>
            </div>

            <div class="column font9 text-text">
              <div class="schedule-line">
                <span class="text-schedule-date-bold fontbold">
                  {{ formatWeekday(item.date) }}
                </span>

                <span class="text-schedule-date-regular">
                  {{ ", " + formatDayMonth(item.date) }}
                </span>
              </div>

              <div class="schedule-line q-pt-xs">
                <span class="text-schedule-date-regular">
                  {{ $t("dashboard_client.next_schedules.from") }}&nbsp;
                </span>

                <span class="text-schedule-date-bold fontbold">
                  {{ item.start_time?.slice(0, 5) }}
                  {{ $t("dashboard_client.next_schedules.to") }}
                  {{ item.end_time?.slice(0, 5) }}
                </span>
              </div>
            </div>

            <!-- PREÇO -->
            <div class="price text-text">
              <span class="font9 fontmedium distance">
                <span class="fontbold font10">
                  {{ $t("dashboard_client.client_proposals.distance") }}
                </span>

                <span class="font10 fontregular q-ml-sm">
                  {{ (item.distance_km ?? "--") + " km" }}
                </span>
              </span>

              <span class="font14 fontbold">
                {{
                  filterCurrency(
                    chooseprice(item.period_type, item.daily_price_8h),
                  )
                }}
              </span>

              <span class="col-6 font10 fontmedium">
                {{ formatLabelByPeriodType(item.period_type) }}
              </span>
            </div>

            <div class="actions">
              <q-btn
                class="btn-reject"
                flat
                label="recusar"
                padding="4px 12px"
                size="sm"
                @click="() => handleRefuseProposal(item.id)"
              />

              <q-btn
                class="btn-accept"
                label="aceitar"
                padding="4px 12px"
                size="sm"
                @click="() => handleAcceptProposal(item.id)"
              />
            </div>
          </div>
        </div>
      </q-card>
    </div>
  </div>
</template>

<script setup>
import { acceptProposal, refuseProposal } from "src/api/customSchedules";
import { avatarColors } from "src/helpers/avatarColors";
import { useQuasar } from "quasar";
import SchedulePaymentDialog from "src/components/dashboard/SchedulePaymentDialog.vue";

import {
  chooseprice,
  filterCurrency,
  formatLabelByPeriodType,
} from "src/helpers/utils";

import { getProviderGenderLabel } from "src/helpers/provider";
import { useI18n } from "vue-i18n";

const emit = defineEmits(["refreshData"]);

defineProps({
  data: {
    type: Array,
    default: () => [],
  },
});

const { t } = useI18n();
const $q = useQuasar();

// 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 formatDayMonth = (iso) => {
  if (!iso) return "";

  return new Date(iso).toLocaleDateString("pt-BR", {
    day: "2-digit",
    month: "2-digit",
  });
};

const formatWeekday = (iso) => {
  if (!iso) return "";

  const d = new Date(iso);

  const w = d.toLocaleDateString("pt-BR", { weekday: "long" });

  return w.charAt(0).toUpperCase() + w.slice(1);
};

const handleAcceptProposal = async (proposalId) => {
  try {
    const response = await acceptProposal(proposalId);

    const schedule = response.payload;

    const servicePackage = {
      id: schedule.id,
      total_amount: schedule.total_amount,
      provider: schedule.provider,
      schedules: [
        {
          ...schedule,
        },
      ],
    };

    $q.dialog({
      component: SchedulePaymentDialog,
      componentProps: {
        servicePackage,
      },
    }).onOk(() => {
      emit("refreshData");
    });

  } catch (error) {
    console.log(error);
  }
};

const handleRefuseProposal = async (proposalId) => {
  // isLoading.value = true
  try {
    await refuseProposal(proposalId);

    // await loadProposals()
    emit("refreshData");
  } catch (error) {
    console.log(error);
  } finally {
    // isLoading.value = false
  }
};
</script>

<style scoped lang="scss">
.scroll-wrapper {
  overflow-x: auto;
  scrollbar-width: none;
}

.scroll-track {
  display: flex;
  gap: 12px;
}

.scroll-wrapper::-webkit-scrollbar {
  display: none;
}

.proposal-card {
  position: relative;
  min-width: 330px;
  max-width: 330px;
  border-radius: 18px;
  padding: 12px;
  background: white;
  flex-shrink: 0;
}

/* alinhar topo */
// .proposal-card .row:first-child {
//   align-items: flex-start !important;
// }

.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2px;
}

.price .distance {
  margin-top: 4px;
}

.datetime {
  margin-top: 2px;
  line-height: 1.2;
}

.price {
  position: absolute;
  top: 12px;
  right: 12px;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* avatar alinhado */
.q-avatar {
  margin-left: 0 !important;
  margin-right: 10px !important;
}

/* botões */
.actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
}

.btn-reject {
  background: #eee6ff;
  color: #6b4eff;
  border-radius: 20px;
  padding: 3px 12px;
}

.btn-accept {
  background: linear-gradient(90deg, #6b4eff, #9f6bff);
  color: white;
  border-radius: 20px;
  padding: 3px 12px;
}

.customColor {
  background: linear-gradient(180deg, #8b5cf6 50%, #ec4899 50%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>