feat: logica de filtros aplicadas (Sem func)

src/pages/dashboard/DashboardPage.vue

@@ -71,18 +71,93 @@
         </div>
       </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 class="q-px-md q-py-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"
+        >
+          <template #append>
+            <q-icon name="mdi-chevron-down" color="secondary" />
+          </template>
+        </q-select>
+
+        <template v-if="selectedPeriod === 'custom'">
+          <q-input
+            v-model="startDate"
+            dense
+            label="Data Inicial"
+            mask="##/##/####"
+            placeholder="DD/MM/AAAA"
+            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="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"
+            dense
+            label="Data Final"
+            mask="##/##/####"
+            placeholder="DD/MM/AAAA"
+            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>
+      </div>
+    </div>
 
     <div v-if="!isLoading" class="column gap q-pa-sm">
       <div class="flex full-width gap">
@@ -236,7 +311,6 @@
 import { onMounted, ref, watch, defineAsyncComponent } 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"),
@@ -266,11 +340,22 @@ const PieChart = defineAsyncComponent(
 const { t } = useI18n();
 
 const isLoading = ref(true);
-const filter = ref(false);
 const selectedUnit = ref(null);
 const defaultPeriod = ref("month");
 const defaultEventId = ref(1);
 
+const selectedPeriod = ref("custom");
+const startDate = ref("");
+const endDate = ref("");
+
+const periodOptions = [
+  { label: "Hoje", value: "today" },
+  { label: "Esta semana", value: "week" },
+  { label: "Este mês", value: "month" },
+  { label: "Este ano", value: "year" },
+  { label: "Personalizado", value: "custom" },
+];
+
 const ordersChart = ref({});
 const participantsChart = ref({});
 const paymentsChart = ref({});
@@ -443,4 +528,24 @@ onMounted(async () => {
   border-radius: 50%;
   flex-shrink: 0;
 }
+
+.filter-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+}
+
+.filter-item {
+  flex: 1 1 200px;
+  min-width: 180px;
+  max-width: 300px;
+}
+
+@media (max-width: 599px) {
+  .filter-item {
+    flex: 1 1 100%;
+    max-width: 100%;
+  }
+}
 </style>