feat: adiciona estilizacao de left menu

src/components/layout/DefaultHeaderPage.vue

@@ -2,7 +2,7 @@
   <div>
     <q-breadcrumbs
       v-if="displayBreadcrumbs != null"
-      class="q-mb-xs"
+      class="q-mb-xs text-secondary"
       :class="$q.screen.lt.sm ? '' : 'q-pl-lg'"
     >
       <q-breadcrumbs-el
@@ -22,18 +22,12 @@
 
     <div class="flex items-center justify-between">
       <div class="column q-pl-xs" :class="$q.screen.lt.sm ? '' : 'q-pt-md'">
-        <span v-if="displayTitle" class="text-h4 text-primary q-mb-xs">
+        <span v-if="displayTitle" class="text-h6 text-primary q-mb-xs">
           {{ displayTitle }}
         </span>
         <div v-else style="width: 280px">
           <q-skeleton type="text" height="40px" />
         </div>
-        <span v-if="displayDescription" class="text-body2">
-          {{ displayDescription }}
-        </span>
-        <div v-else style="width: 380px">
-          <q-skeleton type="text" height="20px" />
-        </div>
       </div>
       <div>
         <slot name="after" />
@@ -48,15 +42,12 @@ import { computed } from "vue";
 import { useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
 
-const { title, description, breadcrumbs } = defineProps({
+const { title, breadcrumbs } = defineProps({
   title: {
     type: Object,
     default: null,
   },
-  description: {
-    type: Object,
-    default: null,
-  },
+
   breadcrumbs: {
     type: Object,
     default: null,
@@ -83,23 +74,6 @@ const displayTitle = computed(() => {
   return null;
 });
 
-const displayDescription = computed(() => {
-  if (description) {
-    if (description.translate) {
-      return t(description.value);
-    } else {
-      return description.value;
-    }
-  } else if (route.meta?.description) {
-    if (route.meta?.description.translate) {
-      return t(route.meta?.description.value);
-    } else {
-      return route.meta?.description.value;
-    }
-  }
-  return null;
-});
-
 const displayBreadcrumbs = computed(() => {
   if (!breadcrumbs && breadcrumbs?.length <= 0) {
     return null;

src/components/layout/LeftMenuLayout.vue

@@ -12,18 +12,18 @@
     :behavior="'desktop'"
     class="detached-container"
   >
-    <div class="column full-height no-wrap">
+    <div class="column full-height no-wrap q-drawer-container">
       <div class="overflow-hidden" style="border-radius: 8px 8px 0px 0px">
         <div
-          class="flex flex-center full-width q-pa-sm"
+          class="flex flex-center full-width q-pa-sm bg-terciary"
           style="height: 60px"
         >
           <q-img
             v-if="!miniState"
             :src="Logo"
-            style="width: 92px; height: 32px"
+            style="width: 138px; height: 39px"
           />
-          <q-img v-else :src="Logo" style="width: 32px" />
+          <q-img v-else :src="MiniLogo" style="width: 59px; height: 50px" />
         </div>
       </div>
 
@@ -41,7 +41,7 @@
                   ? 'mdi-page-layout-sidebar-right'
                   : 'mdi-page-layout-sidebar-left'
               "
-              color="primary"
+              color="secondary"
             />
             <q-tooltip
               anchor="center right"
@@ -69,7 +69,11 @@
                 :to="{ name: item.name }"
               >
                 <q-item-section avatar>
-                  <q-icon :name="item.icon" style="font-size: 20px" />
+                  <q-icon
+                    :name="item.icon"
+                    style="font-size: 20px"
+                    color="secondary"
+                  />
                 </q-item-section>
                 <q-item-section>{{ $t(item.title) }}</q-item-section>
                 <q-tooltip
@@ -185,44 +189,19 @@
         <q-list class="column q-mb-md no-wrap" style="border-radius: 6px">
         </q-list>
         <q-list class="q-mt-auto">
-          <q-item v-ripple clickable @click="changeTheme">
-            <div class="flex">
-              <q-item-section avatar>
-                <q-icon
-                  :name="
-                    $q.dark.isActive ? 'mdi-weather-sunny' : 'mdi-weather-night'
-                  "
-                  style="font-size: 20px"
-                />
-              </q-item-section>
-              <q-item-section>{{
-                $q.dark.isActive
-                  ? $t("common.terms.light")
-                  : $t("common.terms.dark")
-              }}</q-item-section>
-            </div>
-            <q-tooltip
-              v-if="miniState"
-              anchor="center right"
-              self="center left"
-              :offset="[10, 10]"
-              >{{
-                $q.dark.isActive
-                  ? $t("common.terms.light")
-                  : $t("common.terms.dark")
-              }}</q-tooltip
-            >
-          </q-item>
           <q-item v-ripple clickable @click="logoutFn">
-            <div class="flex">
+            <div class="flex q-mx-auto">
               <q-item-section avatar>
-                <q-icon
-                  name="logout"
-                  color="negative"
-                  style="font-size: 20px"
-                />
+                <div class="flex q-mx-auto q-gutter-x-xs">
+                  <q-icon
+                    name="logout"
+                    color="negative"
+                    style="font-size: 20px"
+                  />
+
+                  <div>SAIR</div>
+                </div>
               </q-item-section>
-              <q-item-section>{{ $t("auth.logout") }}</q-item-section>
             </div>
             <q-tooltip
               v-if="miniState"
@@ -253,17 +232,13 @@
           </q-item>
         </q-list>
         <div
-          class="full-width text-center text-subtitle3 q-pb-xs cursor-pointer"
+          class="full-width text-center q-pb-xs cursor-pointer text-dark"
           @click="gotoVersionPage()"
         >
-          <span
-            v-if="!(miniState || $q.screen.lt.md)"
-            class="text-caption text-weight-light"
-            >{{ $t("common.terms.version") + " " + version }}</span
-          >
-          <span v-else class="text-caption text-weight-light">{{
-            version
+          <span v-if="!(miniState || $q.screen.lt.md)" class="text-caption">{{
+            $t("common.terms.version") + " " + version
           }}</span>
+          <span v-else class="text-caption">{{ version }}</span>
         </div>
       </div>
     </div>
@@ -277,7 +252,8 @@ import { navigationStore } from "src/stores/navigation";
 import { useQuasar, Cookies } from "quasar";
 import { version } from "src/../package.json";
 
-import Logo from "src/assets/logo.png";
+import Logo from "src/assets/images/logo.svg";
+import MiniLogo from "src/assets/images/mini-logo.svg";
 import LogoSoftparLight from "src/assets/softpar_logo_light.svg";
 import LogoSoftparDark from "src/assets/softpar_logo_dark.svg";
 import LogoSoftparMini from "src/assets/softpar_logo_mini.svg";
@@ -288,9 +264,6 @@ const route = useRoute();
 const navigation_store = navigationStore();
 const $q = useQuasar();
 
-const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
-  ? "dark"
-  : "light";
 const miniStateCookies = Cookies.get("miniState");
 const miniState = ref(miniStateCookies === "true" ? true : false);
 
@@ -312,15 +285,6 @@ watchEffect(() => {
   }
 });
 
-const changeTheme = async () => {
-  const theme = $q.cookies.get("theme") || systemTheme;
-  if (theme == "dark") {
-    $q.dark.set(false);
-  } else {
-    $q.dark.set(true);
-  }
-};
-
 const logoutFn = async () => {
   await logout();
   router.push({ name: "LoginPage" });
@@ -350,13 +314,8 @@ onMounted(() => {
 <style lang="scss" scoped>
 @import "/src/css/quasar.variables.scss";
 
-.text-subtitle3 {
-  font-size: 1.1rem !important;
-  font-weight: 400 !important;
-}
-
 .menu-selected {
-  background-color: rgba($primary, 0.1);
+  background-color: $terciary;
   color: $primary;
 }
 
@@ -367,4 +326,9 @@ onMounted(() => {
 .toggle-button-wrapper:hover {
   transform: scale(1.1);
 }
+
+.q-drawer-container {
+  background-image: url("images/background.png");
+  background-position: 15%;
+}
 </style>

src/css/quasar.variables.scss

@@ -1,5 +1,6 @@
 $primary: #003e29; 
 $secondary: #ff8340; 
+$terciary: #ace4e4;
 $accent: #e91e63;
 
 $positive: #2e7d32;

src/pages/dashboard/DashboardPage.vue

@@ -1,211 +1,17 @@
 <template>
   <div>
-    <DefaultHeaderPage>
-      <template #after>
-        <q-btn
-          outline
-          icon="mdi-calendar"
-          color="primary"
-          @click="showFilter"
-        />
-      </template>
-    </DefaultHeaderPage>
-    <q-expansion-item
-      v-model="filter"
-      dense
-      hide-expand-icon
-      class="remove-header-expansion-item"
-    >
-      <DatePeriodSelector
-        v-model:selected-period="defaultPeriod"
-        v-model:selected-event-id="defaultEventId"
-        class="q-pa-sm"
-      />
-    </q-expansion-item>
-
-    <div v-if="!isLoading" class="column gap q-pa-sm">
-      <div class="flex full-width gap">
-        <div class="flex flex-grow gap">
-          <CardIconMiniChart
-            class="flex-grow"
-            :title="t('dashboard.cards.total_earnings')"
-            :icon="'mdi-currency-usd'"
-            :number-porcent="paymentsChart.percentage_change"
-            :number-card="
-              t('dashboard.currency_format', {
-                value: paymentsChart.current_total,
-              })
-            "
-          >
-            <template #chart>
-              <MiniLineChart
-                :data="paymentsChart.trend_data"
-                fill-color="rgba(0, 0, 0, 0)"
-              />
-            </template>
-          </CardIconMiniChart>
-          <CardIconMiniChart
-            class="flex-grow"
-            :title="t('orders.plural')"
-            :icon="'mdi-package-variant'"
-            :number-porcent="ordersChart.percentage_change"
-            :number-card="ordersChart.current_total"
-          >
-            <template #chart>
-              <MiniBarChart
-                :data="ordersChart.trend_data"
-                fill-color="rgba(0, 0, 0, 0)"
-              />
-            </template>
-          </CardIconMiniChart>
-        </div>
-        <div class="flex flex-grow gap">
-          <CardIconMiniChart
-            class="flex-grow"
-            :title="t('dashboard.cards.tickets_sold')"
-            :icon="'mdi-ticket-outline'"
-            :number-porcent="ticketsSoldChart.percentage_change"
-            :number-card="ticketsSoldChart.current_total"
-          >
-            <template #chart>
-              <MiniLineChart
-                :data="ticketsSoldChart.trend_data"
-                fill-color="rgba(0, 0, 0, 0)"
-              />
-            </template>
-          </CardIconMiniChart>
-          <CardIconMiniChart
-            class="flex-grow"
-            :title="t('dashboard.cards.registrations')"
-            :icon="'mdi-account-group-outline'"
-            :number-porcent="participantsChart.percentage_change"
-            :number-card="participantsChart.current_total"
-          >
-            <template #chart>
-              <MiniBarChart
-                :data="participantsChart.trend_data"
-                fill-color="rgba(0, 0, 0, 0)"
-              />
-            </template>
-          </CardIconMiniChart>
-        </div>
-      </div>
-
-      <div class="flex full-width gap">
-        <div class="flex flex-grow">
-          <CardIconChart
-            :title="t('dashboard.charts.tickets_by_type.title')"
-            :icon="'mdi-ticket-account'"
-            class="flex-grow"
-          >
-            <template #chart>
-              <BarChart
-                :data="eventTicketsByTypeChart"
-                :data-set-label="t('events.tickets.plural')"
-                :label-x="t('events.tickets.types_singular')"
-                :label-y="t('common.terms.quantity')"
-                :show-legend="true"
-              />
-            </template>
-          </CardIconChart>
-        </div>
-        <div class="flex flex-grow">
-          <CardIconChart
-            :title="t('dashboard.charts.participants_by_document.title')"
-            :icon="'mdi-badge-account'"
-            class="flex-grow"
-          >
-            <template #chart>
-              <DoughnutChart
-                :data="eventParticipantsByCNPJAndCPF"
-                :data-set-label="t('events.attendance.participant_plural')"
-              />
-            </template>
-          </CardIconChart>
-        </div>
-      </div>
-
-      <div class="flex full-width gap">
-        <div class="flex flex-grow">
-          <CardIconChart
-            :title="t('dashboard.charts.sales_over_time.title')"
-            :icon="'mdi-chart-line'"
-            class="flex-grow"
-          >
-            <template #chart>
-              <LineChart
-                :data="salesOverTimeLineChart"
-                :data-set-label="t('ui.navigation.sales')"
-                :label-x="t('common.terms.month')"
-                :label-y="
-                  t('dashboard.charts.sales_over_time.y_label', {
-                    currency: 'R$',
-                  })
-                "
-              />
-            </template>
-          </CardIconChart>
-        </div>
-        <div class="flex flex-grow">
-          <CardIconChart
-            :title="t('dashboard.charts.registration_source.title')"
-            :icon="'mdi-chart-pie'"
-            class="flex-grow"
-          >
-            <template #chart>
-              <PieChart
-                :data="eventSourcePieChart"
-                :data-set-label="
-                  t('dashboard.charts.registration_source.source')
-                "
-              />
-            </template>
-          </CardIconChart>
-        </div>
-      </div>
-    </div>
-
-    <div v-else class="flex flex-center full-width q-pa-xl">
-      <q-spinner color="primary" size="50px" />
-    </div>
+    <DefaultHeaderPage />
   </div>
 </template>
 
 <script setup>
-import { onMounted, ref, watch, defineAsyncComponent } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
-import DatePeriodSelector from "./components/DatePeriodSelector.vue";
-
-const MiniLineChart = defineAsyncComponent(
-  () => import("src/components/charts/mini/MiniLineChart.vue"),
-);
-const MiniBarChart = defineAsyncComponent(
-  () => import("src/components/charts/mini/MiniBarChart.vue"),
-);
-const CardIconMiniChart = defineAsyncComponent(
-  () => import("src/components/charts/CardIconMiniChart.vue"),
-);
-const CardIconChart = defineAsyncComponent(
-  () => import("src/components/charts/CardIconChart.vue"),
-);
-const BarChart = defineAsyncComponent(
-  () => import("src/components/charts/normal/BarChart.vue"),
-);
-const DoughnutChart = defineAsyncComponent(
-  () => import("src/components/charts/normal/DoughnutChart.vue"),
-);
-const LineChart = defineAsyncComponent(
-  () => import("src/components/charts/normal/LineChart.vue"),
-);
-const PieChart = defineAsyncComponent(
-  () => import("src/components/charts/normal/PieChart.vue"),
-);
 
 const { t } = useI18n();
 
 const isLoading = ref(true);
-const filter = ref(false);
 const defaultPeriod = ref("month");
 const defaultEventId = ref(1);
 
@@ -218,10 +24,6 @@ const eventParticipantsByCNPJAndCPF = ref({});
 const salesOverTimeLineChart = ref({});
 const eventSourcePieChart = ref({});
 
-const showFilter = () => {
-  filter.value = !filter.value;
-};
-
 const generateMockData = () => {
   const createMiniChartData = (currentTotal, percentage) => ({
     current_total: currentTotal,

src/stores/navigation.js

@@ -21,52 +21,6 @@ export const navigationStore = defineStore("navigation", () => {
       permission: false,
       permissionScope: "dashboard",
     },
-    {
-      type: "expansive",
-      title: "ui.navigation.registration",
-      icon: "mdi-plus",
-      disable: false,
-      permission: false,
-      permissionScope: "config",
-      childrens: [
-        {
-          type: "single",
-          title: "ui.navigation.users",
-          name: "UsersPage",
-          icon: "mdi-account-multiple-outline",
-          disable: false,
-          permission: false,
-          permissionScope: "config.user",
-        },
-        {
-          type: "single",
-          title: "ui.navigation.city",
-          name: "CityPage",
-          icon: "mdi-city-variant-outline",
-          disable: false,
-          permission: false,
-          permissionScope: "config.city",
-        },
-        {
-          type: "single",
-          title: "ui.navigation.country",
-          name: "CountryPage",
-          icon: "mdi-earth",
-          disable: false,
-          permission: false,
-          permissionScope: "config.country",
-        },
-        {
-          type: "single",
-          title: "ui.navigation.state",
-          name: "StatePage",
-          icon: "mdi-map-marker",
-          disable: false,
-          permission: false,
-          permissionScope: "config.state",
-        },
-      ],
-    },
   ]);
 
   const getNavigationAccess = () => {