Преглед изворни кода

style: ajuste na ordem de exibicao do dashboard + ajuste on layout de meus dados

Gustavo Mantovani пре 9 часа
родитељ
комит
42e451c43b

+ 11 - 11
src/pages/dashboard/DashboardPage.vue

@@ -57,6 +57,17 @@
         </div>
 
         <div class="dashboard-panels">
+          <DashboardAvailabilityPanel
+            :is-all-properties-selected="isAllPropertiesSelected"
+            :items="availabilityItems"
+            :total-capacity-days="totalCapacityDays"
+          />
+
+          <DashboardRevenuePanel
+            :chart-data="revenueChartData"
+            :chart-options="revenueChartOptions"
+          />
+
           <DashboardChannelsPanel :channels="channels" />
 
           <q-card flat class="panel-card panel-card--soft">
@@ -68,17 +79,6 @@
               :total-value="Number(summary.final_payout_amount ?? 0)"
             />
           </q-card>
-
-          <DashboardAvailabilityPanel
-            :is-all-properties-selected="isAllPropertiesSelected"
-            :items="availabilityItems"
-            :total-capacity-days="totalCapacityDays"
-          />
-
-          <DashboardRevenuePanel
-            :chart-data="revenueChartData"
-            :chart-options="revenueChartOptions"
-          />
         </div>
       </template>
 

+ 53 - 20
src/pages/dashboard/components/DashboardChannelsPanel.vue

@@ -38,17 +38,25 @@ const props = defineProps({
   },
 });
 
-const channelPalette = Object.freeze([
-  "#FF3B30",
-  "#00A6FB",
-  "#FFC400",
-  "#34C759",
-  "#0052FF",
-  "#FF7A00",
-  "#5856D6",
-  "#00C7BE",
-  "#E53935",
-  "#1D4ED8",
+const fixedChannelColors = Object.freeze({
+  airbnb: "#FF385C",
+  booking: "#60A5FA",
+  decolar: "#22C55E",
+  direto: "#F59E0B",
+  vrbo: "#0EA5E9",
+  sem_canal: "#B0BEC5",
+  raniery_kohler: "#A855F7",
+});
+
+const fallbackChannelPalette = Object.freeze([
+  "#A855F7",
+  "#8B5CF6",
+  "#C084FC",
+  "#9333EA",
+  "#D946EF",
+  "#7C3AED",
+  "#E879F9",
+  "#6D28D9",
 ]);
 
 const normalize = (channel) => {
@@ -62,6 +70,22 @@ const normalize = (channel) => {
     return "booking";
   }
 
+  if (value.includes("decolar")) {
+    return "decolar";
+  }
+
+  if (
+    value.includes("sem canal") ||
+    value.includes("sem_canal") ||
+    value.includes("no channel")
+  ) {
+    return "sem_canal";
+  }
+
+  if (value.includes("raniery kohler")) {
+    return "raniery_kohler";
+  }
+
   if (
     value.includes("direto") ||
     value.includes("direct") ||
@@ -79,21 +103,30 @@ const normalize = (channel) => {
   return "outros";
 };
 
-const buildFallbackColor = (index) => {
-  const hue = (index * 47) % 360;
+const buildFallbackColor = (channel) => {
+  const seed = String(channel ?? "").trim().toLowerCase();
 
-  return `hsl(${hue} 84% 52%)`;
+  let hash = 0;
+
+  for (let index = 0; index < seed.length; index += 1) {
+    hash = (hash * 31 + seed.charCodeAt(index)) % fallbackChannelPalette.length;
+  }
+
+  return fallbackChannelPalette[hash];
 };
 
-const resolveChannelColor = (index) =>
-  channelPalette[index] ?? buildFallbackColor(index);
+const resolveChannelColor = (channel) => {
+  const normalizedChannel = normalize(channel);
+
+  return fixedChannelColors[normalizedChannel] ?? buildFallbackColor(channel);
+};
 
 const legendItems = computed(() =>
-  props.channels.map((c, index) => ({
-    key: `${normalize(c.channel)}-${index}`,
+  props.channels.map((c) => ({
+    key: String(c.channel ?? ""),
     label: c.channel,
     reservations_count: Number(c.reservations_count ?? 0),
-    color: resolveChannelColor(index),
+    color: resolveChannelColor(c.channel),
   })),
 );
 
@@ -111,7 +144,7 @@ const chartData = computed(() => ({
       backgroundColor: hasChannels.value
         ? legendItems.value.map((item) => item.color)
         : ["#D9E3E7"],
-      borderColor: "transparent",
+      // borderColor: "#FFFFFF",
       borderWidth: 0,
     },
   ],

+ 10 - 9
src/pages/profile/ProfilePage.vue

@@ -2,7 +2,7 @@
   <q-page class="column q-gutter-md">
     <DefaultHeaderPage />
 
-    <q-card bordered class="q-pa-md" flat style="border-radius: 10px">
+    <q-card bordered class="q-py-md q-pr-sm" flat style="border-radius: 10px">
       <div class="column q-gutter-md">
         <div class="column q-gutter-sm">
           <div class="text-subtitle1 text-weight-bold text-primary">
@@ -23,7 +23,7 @@
             <q-input
               :model-value="userData.document"
               bg-color="white"
-              label="CPF/CNPJ"
+              label="Número de documento"
               outlined
               readonly
             />
@@ -63,7 +63,13 @@
         </div>
 
         <div class="row justify-end">
-          <q-btn color="primary" label="Alterar" @click="openEditDialog" />
+          <q-btn
+            class="btn-custom-default"
+            color="secondary"
+            label="Alterar"
+            text-color="primary"
+            @click="openEditDialog"
+          />
         </div>
       </div>
 
@@ -121,12 +127,7 @@ const userData = computed(() => {
   return {
     id: user?.id ?? null,
     name: user?.name ?? user?.full_name ?? "",
-    document:
-      user?.document_number ??
-      user?.cpf_cnpj ??
-      user?.cpf ??
-      user?.document ??
-      "",
+    document: user?.document_number ?? "",
     email: user?.email ?? "",
   };
 });

+ 6 - 5
src/pages/profile/components/ProfileEditDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <q-dialog v-model="dialogModel" persistent>
-    <q-card style="max-width: 100%; border-radius: 10px">
+    <q-card style="max-width: 100%; border-radius: 8px">
       <DefaultDialogHeader title="Editar meus dados" @close="closeDialog" />
 
       <q-form
@@ -9,10 +9,10 @@
         @submit="submitForm"
       >
         <div
-          class="bg-white radius-8 q-pa-md q-mb-xl"
+          class="bg-white radius-8 q-pa-sm q-mb-xl"
           style="border: 1px solid #ccc"
         >
-          <div class="column q-gutter-sm q-pa-sm" style="border-radius: 8px">
+          <div class="column q-gutter-sm" style="border-radius: 8px">
             <div class="text-subtitle2 text-weight-bold text-primary">
               Dados pessoais
             </div>
@@ -34,7 +34,7 @@
               <q-input
                 v-model="localForm.document"
                 bg-color="white"
-                label="CPF/CNPJ"
+                label="Número de documento"
                 outlined
                 :error="Boolean(serverErrors.document_number)"
                 :error-message="serverErrors.document_number"
@@ -43,7 +43,7 @@
             </div>
           </div>
 
-          <div class="column q-gutter-sm q-pa-sm" style="border-radius: 8px">
+          <div class="column q-gutter-sm" style="border-radius: 8px">
             <div class="text-subtitle2 text-weight-bold text-primary">
               Acesso
             </div>
@@ -87,6 +87,7 @@
 
         <div class="row justify-end q-gutter-sm">
           <q-btn
+            class="bg-white"
             color="primary"
             label="Cancelar"
             outline