feat: adiciona filtro em franchisor: dashboard

src/components/layout/DefaultHeaderPage.vue

@@ -33,11 +33,17 @@
           <q-skeleton type="text" height="40px" />
         </div>
         <q-icon
+          v-if="showFilterIcon"
           name="mdi-filter-outline"
-          color="background"
+          :color="filterOpen ? 'background' : 'primary'"
           size="sm"
-          class="q-ml-sm bg-primary"
-          style="border-radius: 8px; padding: 2px"
+          class="q-ml-sm cursor-pointer"
+          :class="filterOpen ? 'bg-primary' : ''"
+          :style="
+            filterOpen
+              ? 'border-radius: 8px; padding: 2px'
+              : 'border-radius: 8px; padding: 2px; border: 1.5px solid var(--q-primary)'
+          "
           @click="$emit('show-filter')"
         />
       </div>
@@ -46,21 +52,6 @@
         :class="$q.screen.lt.sm ? '' : 'q-pt-md'"
       >
         <div class="flex items-center no-wrap" style="gap: 12px">
-          <q-select
-            v-if="$q.screen.gt.xs"
-            v-model="selectedUnit"
-            dense
-            :options="[]"
-            label="Unidade"
-            style="width: 250px; flex-shrink: 0"
-            color="secondary"
-            hide-dropdown-icon
-          >
-            <template #append>
-              <q-icon name="mdi-map-marker-outline" color="secondary" />
-            </template>
-          </q-select>
-
           <div
             class="flex items-center no-wrap q-gutter-x-md q-px-sm q-ml-md"
             style="flex-shrink: 0"
@@ -113,12 +104,12 @@
 </template>
 
 <script setup>
-import { computed, ref } from "vue";
+import { computed } from "vue";
 import { useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
 import { userStore } from "src/stores/user";
 
-const { title, breadcrumbs } = defineProps({
+const { title, breadcrumbs, filterOpen, showFilterIcon } = defineProps({
   title: {
     type: String,
     default: null,
@@ -127,13 +118,20 @@ const { title, breadcrumbs } = defineProps({
     type: Object,
     default: null,
   },
+  filterOpen: {
+    type: Boolean,
+    default: false,
+  },
+  showFilterIcon: {
+    type: Boolean,
+    default: true,
+  },
 });
 
 defineEmits(["show-filter"]);
 
 const store = userStore();
 const user = computed(() => store.user);
-const selectedUnit = ref(null);
 
 const lastLoginFormatted = computed(() => {
   const raw = store.user?.last_login_at;

src/pages/dashboard/DashboardPage.vue

@@ -1,91 +1,52 @@
 <template>
   <div>
-    <DefaultHeaderPage show-filter-icon title="Dashboard" />
+    <DefaultHeaderPage
+      title="Dashboard"
+      :filter-open="showFilter"
+      @show-filter="showFilter = !showFilter"
+    />
 
     <div class="q-pa-sm">
       <div class="filter-row">
-        <q-select
-          v-model="selectedPeriod"
-          :options="periodOptions"
-          option-value="value"
-          option-label="label"
-          emit-value
-          map-options
-          dense
-          label="Selecione o Período"
-          color="secondary"
-          class="filter-item"
-          hide-dropdown-icon
-        >
-          <template #append>
-            <q-icon name="mdi-chevron-down" color="secondary" />
-          </template>
-        </q-select>
-
-        <template v-if="selectedPeriod === 'custom'">
-          <q-input
-            v-model="startDate"
+        <template v-if="showFilter">
+          <UnitSelect
+            v-model="selectedUnit"
             dense
-            label="Data Inicial"
-            mask="##/##/####"
-            placeholder="DD/MM/AAAA"
-            color="secondary"
+            label="Unidade"
             class="filter-item"
-          >
-            <template #append>
-              <q-icon
-                name="mdi-calendar"
-                color="secondary"
-                class="cursor-pointer"
-              >
-                <q-popup-proxy
-                  cover
-                  transition-show="scale"
-                  transition-hide="scale"
-                >
-                  <q-date
-                    v-model="startDate"
-                    mask="DD/MM/YYYY"
-                    color="secondary"
-                  >
-                    <div class="row items-center justify-end">
-                      <q-btn v-close-popup label="OK" color="secondary" flat />
-                    </div>
-                  </q-date>
-                </q-popup-proxy>
-              </q-icon>
-            </template>
-          </q-input>
-
-          <q-input
-            v-model="endDate"
+            color="secondary"
+          />
+
+          <DefaultSelect
+            v-model="selectedPeriod"
+            :options="periodOptions"
+            option-value="value"
+            option-label="label"
+            emit-value
+            map-options
             dense
-            label="Data Final"
-            mask="##/##/####"
-            placeholder="DD/MM/AAAA"
+            label="Selecione o Período"
             color="secondary"
             class="filter-item"
-          >
-            <template #append>
-              <q-icon
-                name="mdi-calendar"
-                color="secondary"
-                class="cursor-pointer"
-              >
-                <q-popup-proxy
-                  cover
-                  transition-show="scale"
-                  transition-hide="scale"
-                >
-                  <q-date v-model="endDate" mask="DD/MM/YYYY" color="secondary">
-                    <div class="row items-center justify-end">
-                      <q-btn v-close-popup label="OK" color="secondary" flat />
-                    </div>
-                  </q-date>
-                </q-popup-proxy>
-              </q-icon>
-            </template>
-          </q-input>
+          />
+
+          <template v-if="selectedPeriod === 'custom'">
+            <DefaultInputDatePicker
+              v-model="startDate"
+              dense
+              label="Data Inicial"
+              color="secondary"
+              class="filter-item"
+            />
+
+            <DefaultInputDatePicker
+              v-model="endDate"
+              dense
+              label="Data Final"
+              color="secondary"
+              class="filter-item"
+            />
+          </template>
         </template>
       </div>
     </div>
@@ -198,6 +159,9 @@ import { onMounted, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useI18n } from "vue-i18n";
 import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
+import DefaultSelect from "src/components/defaults/DefaultSelect.vue";
+import DefaultInputDatePicker from "src/components/defaults/DefaultInputDatePicker.vue";
+import UnitSelect from "src/components/selects/UnitSelect.vue";
 import DashboardStatCard from "src/components/charts/DashboardStatCard.vue";
 import DashboardChartCard from "src/components/charts/DashboardChartCard.vue";
 import GroupedBarChart from "src/components/charts/normal/GroupedBarChart.vue";
@@ -241,6 +205,8 @@ const openTicketsAbertoDialog = () => {
 const defaultPeriod = ref("month");
 const defaultEventId = ref(1);
 
+const showFilter = ref(false);
+const selectedUnit = ref(null);
 const selectedPeriod = ref("custom");
 const startDate = ref("");
 const endDate = ref("");

src/pages/franchisee/FranchiseePage.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <DefaultHeaderPage title="Franqueados" show-filter-icon />
+    <DefaultHeaderPage title="Franqueados" :show-filter-icon="false" />
 
     <div class="q-px-sm">
       <DefaultTable

src/pages/packages/PackagesPage.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <DefaultHeaderPage title="Pacotes" />
+    <DefaultHeaderPage title="Pacotes" :show-filter-icon="false" />
 
     <div class="q-px-sm">
       <!-- Add button -->
@@ -39,7 +39,10 @@
           <PackageCard :pkg="pkg" @click="openEditDialog(pkg)" />
         </div>
 
-        <div v-if="packages.length === 0" class="col-12 text-center text-grey-5 q-py-xl">
+        <div
+          v-if="packages.length === 0"
+          class="col-12 text-center text-grey-5 q-py-xl"
+        >
           Nenhum pacote cadastrado
         </div>
       </div>
@@ -78,7 +81,10 @@ const openAddDialog = () => {
 };
 
 const openEditDialog = (pkg) => {
-  $q.dialog({ component: AddEditPackageDialog, componentProps: { package: pkg } }).onOk(() => {
+  $q.dialog({
+    component: AddEditPackageDialog,
+    componentProps: { package: pkg },
+  }).onOk(() => {
     fetchPackages();
   });
 };

src/pages/tbr/TbrPage.vue

@@ -4,28 +4,40 @@ import { defineAsyncComponent, ref } from "vue";
 import CustomTabComponent from "src/components/shared/CustomTabComponent.vue";
 import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
 
-const SettingsTab  = defineAsyncComponent(() => import("./tabs/SettingsTab.vue"));
-const ContractsTab = defineAsyncComponent(() => import("./tabs/ContractsTab.vue"));
-const BillingsTab  = defineAsyncComponent(() => import("./tabs/BillingsTab.vue"));
-
-const InhabitantClassificationsTab = defineAsyncComponent(() => import("./tabs/InhabitantClassificationsTab.vue"));
+const SettingsTab = defineAsyncComponent(
+  () => import("./tabs/SettingsTab.vue"),
+);
+const ContractsTab = defineAsyncComponent(
+  () => import("./tabs/ContractsTab.vue"),
+);
+const BillingsTab = defineAsyncComponent(
+  () => import("./tabs/BillingsTab.vue"),
+);
+
+const InhabitantClassificationsTab = defineAsyncComponent(
+  () => import("./tabs/InhabitantClassificationsTab.vue"),
+);
 
 const currentTab = ref("settings");
 
 const tabs = [
-  { name: "settings",  label: "Configurações" },
+  { name: "settings", label: "Configurações" },
   { name: "inhabitant_classifications", label: "Faixas" },
   { name: "contracts", label: "Contratos" },
-  { name: "billings",  label: "Cobranças" },
+  { name: "billings", label: "Cobranças" },
 ];
 </script>
 
 <template>
   <div>
-    <DefaultHeaderPage title="TBR - Configurações" />
+    <DefaultHeaderPage title="TBR - Configurações" :show-filter-icon="false" />
 
     <div class="q-px-sm">
-      <CustomTabComponent v-model:active-tab="currentTab" :tabs="tabs" class="q-mb-md" />
+      <CustomTabComponent
+        v-model:active-tab="currentTab"
+        :tabs="tabs"
+        class="q-mb-md"
+      />
 
       <div v-show="currentTab === 'settings'">
         <SettingsTab />

src/pages/user_types/UserTypesPage.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <DefaultHeaderPage title="Tipos de Usuários do Sistema" />
+    <DefaultHeaderPage
+      title="Tipos de Usuários do Sistema"
+      :show-filter-icon="false"
+    />
 
     <div class="q-px-sm">
       <DefaultTable