feat(contracts): adiciona filtro em contratos

src/components/layout/DefaultHeaderPage.vue

@@ -33,12 +33,12 @@
           <q-skeleton type="text" height="40px" />
         </div>
         <q-icon
-          v-if="showFilterIcon"
           name="mdi-filter-outline"
           color="background"
           size="sm"
           class="q-ml-sm bg-primary"
           style="border-radius: 8px; padding: 2px"
+          @click="$emit('show-filter')"
         />
       </div>
       <div
@@ -127,12 +127,10 @@ const { title, breadcrumbs } = defineProps({
     type: Object,
     default: null,
   },
-  showFilterIcon: {
-    type: Boolean,
-    default: false,
-  },
 });
 
+defineEmits(["show-filter"]);
+
 const store = userStore();
 const user = computed(() => store.user);
 const selectedUnit = ref(null);

src/pages/contracts/ContractPage.vue

@@ -1,6 +1,32 @@
 <template>
   <div>
-    <DefaultHeaderPage title="Contratos" show-filter-icon />
+    <DefaultHeaderPage
+      title="Contratos"
+      show-filter-icon
+      @show-filter="handleShowFilter"
+    />
+
+    <div class="row">
+      <q-select
+        v-if="showFilter"
+        v-model="statusSelected"
+        label="Selecione o Status"
+        :options="statusOptions"
+        option-value="value"
+        option-label="label"
+        class="col-3"
+        bg-color="white"
+        hide-dropdown-icon
+        emit-value
+        map-options
+        color="secondary"
+        outlined
+      >
+        <template #append>
+          <q-icon name="mdi-chevron-down" color="secondary" />
+        </template>
+      </q-select>
+    </div>
 
     <DefaultTable
       :columns
@@ -20,6 +46,10 @@ import { ref } from "vue";
 
 const rows = ref([]);
 
+const showFilter = ref(false);
+
+const statusSelected = ref(null);
+
 const columns = ref([
   {
     name: "student_name",
@@ -51,4 +81,18 @@ const columns = ref([
     align: "center",
   },
 ]);
+
+const statusOptions = ref([
+  { label: "Selecione", value: null },
+  { label: "Ativo", value: "active" },
+  { label: "Inativo", value: "inactive" },
+  { label: "Congelado", value: "frozen" },
+  { label: "Encerrado", value: "closed" },
+]);
+
+const handleShowFilter = () => {
+  showFilter.value == false
+    ? (showFilter.value = true)
+    : (showFilter.value = false);
+};
 </script>