Create first table area for admin

Author: VitorCarvalho67

client/src/components/admin/AsideDashboard.vue

@@ -49,7 +49,7 @@
                 </li>
                 <ul class="tables">
                     <li>
-                        <router-link to="/admin/register/coordenador">
+                        <router-link to="/admin/table/coordenador">
                             <p v-if="showPs">Coordenadores</p>
                         </router-link>
                     </li>

client/src/router/routes/admin.js

@@ -5,6 +5,7 @@ import RegisterCoordenador from '../../views/admin/RegisterCoordenador.vue';
 import RegisterCurso from '../../views/admin/RegisterCurso.vue';
 import RegisterFuncionario from '../../views/admin/RegisterFuncionario.vue';
 import RegisterTurma from '../../views/admin/RegisterTurma.vue';
+import TableCoordenadores from '../../views/admin/TableCoordenador.vue';
 
 import {
     isAuthAdmin
@@ -61,5 +62,10 @@ export const adminRoutes = [
         name: 'RegisterFuncionario',
         component: RegisterFuncionario,
 
-    }
+    },
+    {
+        path: '/admin/table/coordenador',
+        name: 'TableCoordenadores',
+        component: TableCoordenadores,
+    },
 ]

client/src/scss/pages/admin/_tableCoordenador.scss

@@ -0,0 +1,66 @@
+main {
+    height: calc(100vh - 80px);
+    background-color: $primary-color-dark;
+    @include flex-center;
+}
+
+.path {
+    width: 100%;
+    @include flex(row, flex-start, center);
+
+    font-size: 0.9rem;
+    @include font-inter(300);
+    margin-bottom: 20px;
+    > p {
+        @include flex(column, center, center);
+        @include font-inter(400);
+
+        &:after {
+            width: 100%;
+            height: 3px;
+            margin-top: 3px;
+            background-color: $secondary-color-orange;
+        }
+
+        &:hover::after {
+            animation: none;
+        }
+    }
+
+    img {
+        @include flex(column, center, center);
+        width: 15px;
+        transform: rotate(180deg);
+        filter: invert(100%);
+        margin-inline: 20px;
+    }
+}
+
+.table {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    .table-header {
+        border-left: 3px solid $secondary-color-orange;
+        font-size: 1rem;
+        @include font-inter(600);
+        color: $font-color-dark;
+    }
+
+    .table-row {
+        display: flex;
+        flex-direction: row;
+
+    }
+
+    .table-cell {
+        flex: 1;
+        padding: 8px;
+        border-right: 1px solid #ddd;
+
+        &:last-child {
+            border-right: none;
+        }
+    }
+}

client/src/views/admin/TableCoordenador.vue

@@ -0,0 +1,91 @@
+<template>
+    <Header />
+    <div id="app">
+        <main>
+            <AsideDashboard pageName='home' />
+            <div class="content">
+                <div class="path">
+                    <p>Dashboard</p>
+                    <img :src="anguloIcon" alt="">
+                    <p>Tabelas</p>
+                    <img :src="anguloIcon" alt="">
+                    <p>Coordenadores</p>
+                </div>
+                <div class="table">
+                    <div class="table-header">
+                        <div class="table-row">
+                            <div class="table-cell">Nome dos coordenadores Registrados</div>
+                        </div>
+                    </div>
+                    <div class="table-body">
+                        <div class="table-row" v-for="coordenador in coordenadores" :key="coordenador.id">
+                            <div class="table-cell">{{ coordenador.name }}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+</template>
+
+
+<script>
+import Header from '../../components/Header.vue';
+import AsideDashboard from '../../components/admin/AsideDashboard.vue';
+import anguloIcon from '../../assets/icons/angulo.png';
+
+import { mixinAdmin } from '../../util/authMixins.js';
+import { getCoordenadores } from '../../services/api/admin';
+
+export default {
+    name: 'TableCoordenadores',
+    components: {
+        Header,
+        AsideDashboard,
+    },
+    data() {
+        return {
+            anguloIcon,
+            coordenadores: []
+        }
+    },
+    methods: {
+        async fetchCoordenadores() {
+            const data = await getCoordenadores(this.admin.token);
+            console.log('Received coordenadores data:', data.data);
+            this.coordenadores = data.data;
+        }
+    },
+    mixins: [mixinAdmin],
+    async created() {
+        this.getToken();
+        await this.fetchCoordenadores();
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../scss/pages/admin/_tableCoordenador.scss";
+
+#app {
+    display: flex;
+    flex-direction: column;
+    min-height: calc(100vh - 80px);
+
+    main {
+        display: flex;
+        overflow: hidden;
+
+        .content {
+            flex: 1;
+            padding: 20px;
+            overflow-y: auto;
+            height: 100%;
+
+            @media (max-width: 1000px) {
+                width: calc(100% - 100px);
+            }
+        }
+    }
+}
+</style>

client/src/views/admin/TableCurso.vue

@@ -33,6 +33,7 @@
     "minio": "^8.0.0",
     "multer": "1.4.5-lts.1",
     "nodemailer": "^6.9.13",
+    "pdf-parse": "^1.1.1",
     "socket.io": "^4.7.5"
   }
 }