versão 23h09 14/02

src/App.vue

@@ -189,7 +189,7 @@ export default {
           name: 'users', 
           route: { name: 'users' }, 
           icon: 'mdi-account-group', 
-          label: 'Usuários' 
+          label: 'Gerenciamento' 
         },
         { 
           name: 'logout', 

src/views/ReportsView.vue

@@ -20,10 +20,10 @@
             <v-btn
               color="success"
               prepend-icon="mdi-file-export"
-              @click="exportToCSV"
+              @click="exportToPDF"
               :loading="isExporting"
             >
-              Exportar CSV
+              Exportar PDF
             </v-btn>
           </div>
         </v-card-title>
@@ -256,24 +256,31 @@ export default {
       reports: [
         {
           id: 1,
-          name: 'João Silva',
+          name: 'Alice Silva',
           entryTime: '08:00',
           exitTime: '17:00',
-          status: 'regular'
+          status: 'Regular'
         },
         {
           id: 2,
-          name: 'Maria Oliveira',
+          name: 'Bob Oliveira',
           entryTime: '09:15',
           exitTime: '18:00',
-          status: 'late'
+          status: 'Atrasado'
         },
         {
           id: 3,
-          name: 'Pedro Santos',
+          name: 'Lucca Santos',
           entryTime: '08:00',
           exitTime: '16:30',
-          status: 'early'
+          status: 'Saída Antecipada'
+        },
+                {
+          id: 3,
+          name: 'Claudia Louveira',
+          entryTime: '08:00',
+          exitTime: '16:30',
+          status: 'Regular'
         },
       ],
     }

src/views/UsersView.vue

@@ -4,14 +4,30 @@
     <v-tabs v-model="tab" grow>
       <v-tab value="usuarios">Usuários</v-tab>
       <v-tab value="cameras">Câmeras</v-tab>
+      <v-tab value="cameras">Rostos</v-tab>
     </v-tabs>
 
     <v-window v-model="tab">
       <!-- Aba Usuários -->
       <v-window-item value="usuarios">
         <v-container>
-          <v-text-field v-model="searchUser" label="Buscar usuário" prepend-inner-icon="mdi-magnify"></v-text-field>
+      <!-- Aba Usuários -->
-          <v-btn color="primary" class="mb-3" @click="exportUsersPDF">Exportar PDF</v-btn>
+      <v-window-item value="usuarios">
+        <v-container>
+          <div class="d-flex align-center mb-4">
+            <v-text-field
+              v-model="searchUser"
+              label="Buscar usuário"
+              prepend-inner-icon="mdi-magnify"
+              class="mr-4"
+            ></v-text-field>
+            <v-btn color="primary" class="mr-2" @click="exportUsersPDF">
+              Exportar PDF
+            </v-btn>
+            <v-btn color="success" @click="openUserRegistration">
+              Cadastrar Usuário
+            </v-btn>
+          </div>
 
           <v-data-table :headers="userHeaders" :items="filteredUsers" item-value="id">
             <template v-slot:item.actions="{ item }">
@@ -22,6 +38,123 @@
             </template>
           </v-data-table>
 
+                  <!-- Diálogo de Cadastro de Usuário -->
+          <v-dialog v-model="showUserRegistration" max-width="700px">
+            <v-card>
+              <v-card-title>
+                <span class="text-h5">Cadastrar Novo Usuário</span>
+              </v-card-title>
+              <v-card-text>
+                <v-container>
+                  <v-row>
+                    <v-col cols="12" class="text-center">
+                      <v-avatar size="150" color="grey-lighten-2">
+                        <v-img v-if="previewImage" :src="previewImage"></v-img>
+                        <v-icon v-else size="80">mdi-account</v-icon>
+                      </v-avatar>
+                      <div class="mt-2">
+                        <v-file-input
+                          v-model="profileImage"
+                          accept="image/*"
+                          label="Foto de Perfil"
+                          prepend-icon=""
+                          @change="onImageSelected"
+                          hide-details
+                          class="d-none"
+                          ref="fileInput"
+                        ></v-file-input>
+                        <v-btn
+                          size="small"
+                          color="primary"
+                          @click="$refs.fileInput.click()"
+                        >
+                          Escolher Foto
+                        </v-btn>
+                      </div>
+                    </v-col>
+                    <v-col cols="6">
+                      <v-text-field
+                        v-model="newUser.nome"
+                        label="Nome"
+                        required
+                      ></v-text-field>
+                    </v-col>
+                    <v-col cols="6">
+                      <v-text-field
+                        v-model="newUser.sobrenome"
+                        label="Sobrenome"
+                        required
+                      ></v-text-field>
+                    </v-col>
+                    <v-col cols="6">
+                      <v-text-field
+                        v-model="newUser.id"
+                        label="ID"
+                        required
+                      ></v-text-field>
+                    </v-col>
+                    <v-col cols="6">
+                      <v-text-field
+                        v-model="newUser.email"
+                        label="E-mail"
+                        required
+                        type="email"
+                      ></v-text-field>
+                    </v-col>
+                    <v-col cols="6">
+                      <v-text-field
+                        v-model="newUser.telefone"
+                        label="Telefone"
+                        required
+                      ></v-text-field>
+                    </v-col>
+                    <v-col cols="6">
+                      <v-select
+                        v-model="newUser.grupo"
+                        :items="['Alfa', 'Beta', 'Omega']"
+                        label="Grupo"
+                        required
+                      ></v-select>
+                    </v-col>
+                    <v-col cols="6">
+                      <v-select
+                        v-model="newUser.cargo"
+                        :items="['Gerente', 'Funcionário', 'Estagiário']"
+                        label="Cargo"
+                        required
+                      ></v-select>
+                    </v-col>
+                    <v-col cols="6">
+                      <v-select
+                        v-model="newUser.permissao"
+                        :items="['Administrador', 'Editor', 'Visualizador']"
+                        label="Permissão"
+                        required
+                      ></v-select>
+                    </v-col>
+                    <v-col cols="12">
+                      <v-select
+                        v-model="newUser.turno"
+                        :items="['Manhã', 'Tarde', 'Noite']"
+                        label="Turno"
+                        required
+                      ></v-select>
+                    </v-col>
+                  </v-row>
+                </v-container>
+              </v-card-text>
+              <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="error" variant="text" @click="closeUserRegistration">
+                  Cancelar
+                </v-btn>
+                <v-btn color="success" variant="text" @click="saveNewUser">
+                  Salvar
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-dialog>
+
           <!-- Diálogo de Edição de Usuário -->
           <v-dialog v-model="showUserEdit" max-width="600px">
             <v-card>
@@ -242,14 +375,15 @@ const userHeaders = [
   { title: "E-mail", key: "email" },
   { title: "Cargo", key: "role" },
   { title: "Grupo", key: "group" },
+  { title: "Permissão", key: "permisson" },
   { title: "Ações", key: "actions", sortable: false }
 ];
 
 const users = ref([
-  { id: 1, name: "Alice", email: "alice@email.com", role: "Administrador", group: "Alfa" },
+  { id: 1, name: "Alice", email: "alice@email.com", role: "Gerente", group: "Alfa", permisson: 'Administrador' },
-  { id: 2, name: "Bob", email: "bob@email.com", role: "Usuário", group: "Omega" },
+  { id: 2, name: "Bob", email: "bob@email.com", role: "Funcionário", group: "Omega", permisson: 'Editor' },
-  { id: 3, name: "Lucca", email: "lucca@email.com", role: "Usuário", group: "Omega" },
+  { id: 3, name: "Lucca", email: "lucca@email.com", role: "Funcionário", group: "Omega", permisson: 'Editor' },
-  { id: 4, name: "Claudia", email: "claudia@email.com", role: "Usuário", group: "Beta" }
+  { id: 4, name: "Claudia", email: "claudia@email.com", role: "Estagário", group: "Beta", permisson: 'Vizualizador' }
 ]);
 
 const searchUser = ref("");