feat(users): adiciona pagina de usuarios

src/pages/users/UserPage.vue

@@ -1,9 +1,184 @@
 <template>
   <div>
     <DefaultHeaderPage title="Usuários" show-filter-icon />
+
+    <div class="row q-col-gutter-x-md q-pa-sm">
+      <q-select
+        v-model="funcaoSelected"
+        label="Selecione a Função"
+        class="col-3"
+        color="secondary"
+        emit-value
+        map-options
+        :options="funcaoOptions"
+      />
+
+      <q-select
+        v-model="unitSelected"
+        label="Selecione a Unidade"
+        class="col-3"
+        color="secondary"
+        emit-value
+        map-options
+        :options="unitOptions"
+      />
+    </div>
+
+    <div class="q-px-sm">
+      <DefaultTable
+        v-model:rows="rows"
+        title="Lista de Usuários"
+        :columns
+        descricao="Usuários"
+        no-api-call
+        add-item
+      >
+        <template #body-cell-status="{ row }">
+          <q-td align="center">
+            <q-badge
+              :color="row.status === 'active' ? 'positive' : 'warning'"
+              :label="row.status === 'active' ? 'Ativo' : 'Inativo'"
+            />
+          </q-td>
+        </template>
+
+        <template #body-cell-actions>
+          <q-td auto-width>
+            <q-item-section class="no-wrap" style="flex-direction: row">
+              <q-btn
+                outline
+                icon="mdi-account-edit-outline"
+                style="width: 36px"
+                class="q-mr-sm"
+                @click.prevent.stop="() => {}"
+              />
+              <q-btn
+                outline
+                icon="mdi-trash-can-outline"
+                style="width: 36px"
+                class="q-mr-sm"
+                @click.prevent.stop="() => {}"
+              />
+            </q-item-section>
+          </q-td>
+        </template>
+      </DefaultTable>
+    </div>
   </div>
 </template>
 
 <script setup>
 import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
+import DefaultTable from "src/components/defaults/DefaultTable.vue";
+import { ref } from "vue";
+
+const funcaoSelected = ref(null);
+const unitSelected = ref(null);
+
+const funcaoOptions = ref([
+  { label: "Todas", value: null },
+  { label: "Neurotainer", value: "neurotainer" },
+  { label: "Assessor", value: "assessor" },
+  { label: "Marketing", value: "marketing" },
+  { label: "Comercial", value: "comercial" },
+  { label: "Gestor", value: "gestor" },
+  { label: "Administrativo", value: "administrativo" },
+  { label: "Recepção", value: "recepcao" },
+]);
+
+const unitOptions = ref([
+  { label: "Todas", value: null },
+  { label: "Toledo-PR", value: "toledo" },
+  { label: "Arapongas-PR", value: "arapongas" },
+  { label: "Curitiba-PR", value: "curitiba" },
+  { label: "Londrina-PR", value: "londrina" },
+  { label: "Ponta Grossa-PR", value: "ponta_grossa" },
+  { label: "Maringá-PR", value: "maringa" },
+  { label: "Cascavel-PR", value: "cascavel" },
+]);
+
+const columns = ref([
+  {
+    name: "name",
+    label: "Nome",
+    field: "name",
+    align: "left",
+  },
+  {
+    name: "unit",
+    label: "Unidade",
+    field: "unit",
+    align: "left",
+  },
+  {
+    name: "role",
+    label: "Função",
+    field: "role",
+    align: "left",
+  },
+  {
+    name: "status",
+    label: "Status",
+    field: "status",
+    align: "center",
+  },
+  {
+    name: "actions",
+    label: "Ações",
+    field: null,
+    align: "center",
+  },
+]);
+
+const rows = ref([
+  {
+    id: 1,
+    name: "Heloisa Faria",
+    unit: "Toledo-PR",
+    role: "Neurotainer",
+    status: "inactive",
+  },
+  {
+    id: 2,
+    name: "Carol",
+    unit: "Arapongas-PR",
+    role: "Assessor",
+    status: "active",
+  },
+  {
+    id: 3,
+    name: "Marcelo Souza",
+    unit: "Curitiba-PR",
+    role: "Marketing",
+    status: "active",
+  },
+  {
+    id: 4,
+    name: "Ana Lúcia",
+    unit: "Londrina-PR",
+    role: "Comercial",
+    status: "active",
+  },
+  {
+    id: 5,
+    name: "Ricardo Silva",
+    unit: "Ponta Grossa-PR",
+    role: "Gestor",
+    status: "active",
+  },
+  {
+    id: 6,
+    name: "Juliana Civita",
+    unit: "Maringá-PR",
+    role: "Administrativo",
+    status: "active",
+  },
+  {
+    id: 7,
+    name: "Fernando Almeida",
+    unit: "Cascavel-PR",
+    role: "Recepção",
+    status: "active",
+  },
+]);
 </script>