Versão 04/02 16h22

src/App.vue

@@ -3,84 +3,86 @@
     <v-navigation-drawer 
       app 
       :width="drawerWidth"
-      :permanent="!canCollapse"
+      :permanent="true"
-      :mobile-breakpoint="breakpoint"
       color="blue-darken-4"
       class="sidebar-navigation"
-      style="max-width: 100%; overflow-x: hidden;"
     >
-      <div class="d-flex justify-end pa-2" v-if="canCollapse">
+      <!-- Collapse Button -->
-        <v-btn 
+      <div class="drawer-toggle d-flex justify-end pa-2">
-          icon 
+        <v-tooltip 
-          @click="toggleDrawer" 
+          :text="isCollapsed ? 'Expandir Menu' : 'Recolher Menu'"
-          color="white"
+          location="right"
-          class="collapse-button"
         >
-          <v-icon>{{ isCollapsed ? 'mdi-menu' : 'mdi-chevron-left' }}</v-icon>
+          <template v-slot:activator="{ props }">
-        </v-btn>
+            <v-btn 
+              icon 
+              @click="toggleDrawer" 
+              color="white"
+              v-bind="props"
+              class="collapse-button"
+            >
+              <v-icon>
+                {{ isCollapsed ? 'mdi-menu' : 'mdi-chevron-left' }}
+              </v-icon>
+            </v-btn>
+          </template>
+        </v-tooltip>
       </div>
 
-      <v-list 
+      <v-list>
-        class="px-0"
+        <!-- TARS Logo/Title -->
-        style="width: 100%; overflow-x: hidden;"
+        <v-list-item class="d-flex align-center logo-container">
-      >
-        <!-- Ícone + Nome TARS -->
-        <v-list-item class="d-flex align-center px-4 py-2">
           <v-list-item-avatar class="mr-3">
-            <v-icon color="white">mdi-robot</v-icon>
+            <v-icon color="white" class="logo-icon">
+              mdi-robot
+            </v-icon>
           </v-list-item-avatar>
           <v-list-item-title 
-            class="text-h6 text-white font-weight-bold" 
+            v-if="!isCollapsed" 
-            v-if="!isCollapsed"
+            class="text-h6 text-white font-weight-bold logo-title"
-            style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
           >
             TARS
           </v-list-item-title>
         </v-list-item>
 
-        <v-divider class="mb-2"></v-divider>
+        <v-divider class="my-4 divider-custom"></v-divider>
 
-        <!-- Itens do Menu -->
+        <!-- Menu Items -->
         <v-list-item 
-          v-for="(item, index) in menuItems" 
+          v-for="item in menuItems" 
-          :key="index"
+          :key="item.name"
+          :to="item.route"
           link 
-          :to="item.route" 
+          class="menu-item d-flex align-center"
-          class="d-flex align-center px-4 py-2"
-          style="width: 100%; max-width: 100%;"
         >
           <v-list-item-icon class="mr-3">
             <v-icon color="white">{{ item.icon }}</v-icon>
           </v-list-item-icon>
           <v-list-item-title 
-            class="text-white" 
+            v-if="!isCollapsed" 
-            v-if="!isCollapsed"
+            class="text-white menu-title"
-            style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
           >
-            {{ item.title }}
+            {{ item.label }}
-          </v-list-item-title>
-        </v-list-item>
-
-        <v-list-item 
-          @click="logout" 
-          class="d-flex align-center px-4 py-2"
-          style="width: 100%; max-width: 100%;"
-        >
-          <v-list-item-icon class="mr-3">
-            <v-icon color="white">mdi-logout</v-icon>
-          </v-list-item-icon>
-          <v-list-item-title 
-            class="text-white" 
-            v-if="!isCollapsed"
-            style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
-          >
-            Sair
           </v-list-item-title>
         </v-list-item>
       </v-list>
     </v-navigation-drawer>
 
-    <!-- Conteúdo Principal -->
+    <!-- Compact Header with Logout -->
+    <v-app-bar 
+      app 
+      color="blue-darken-3" 
+      dark 
+      height="56"
+      class="header-compact"
+    >
+      <v-spacer></v-spacer>
+      <v-btn @click="logout" text class="logout-button">
+        <v-icon left>mdi-logout</v-icon>
+        Sair
+      </v-btn>
+    </v-app-bar>
+
     <v-main>
       <router-view />
     </v-main>
@@ -92,17 +94,55 @@ export default {
   data() {
     return {
       isCollapsed: false,
-      canCollapse: true,
-      breakpoint: 600,
       menuItems: [
-        { title: 'Home', icon: 'mdi-home', route: { name: 'home' } },
+        { 
-        { title: 'Perfil', icon: 'mdi-account', route: { name: 'user-profile' } },
+          name: 'home', 
-        { title: 'Dashboard', icon: 'mdi-view-dashboard', route: { name: 'dashboard' } },
+          route: { name: 'home' }, 
-        { title: 'Relatórios', icon: 'mdi-chart-bar', route: { name: 'reports' } },
+          icon: 'mdi-home', 
-        { title: 'Treinamento', icon: 'mdi-brain', route: { name: 'training' } },
+          label: 'Home' 
-        { title: 'Usuários', icon: 'mdi-account-group', route: { name: 'users' } },
+        },
-        { title: 'Testes', icon: 'mdi-flask', route: { name: 'testing' } },
+        { 
-        { title: 'Configurações', icon: 'mdi-cog', route: { name: 'settings' } }
+          name: 'profile', 
+          route: { name: 'user-profile' }, 
+          icon: 'mdi-account', 
+          label: 'Perfil' 
+        },
+        { 
+          name: 'dashboard', 
+          route: { name: 'dashboard' }, 
+          icon: 'mdi-view-dashboard', 
+          label: 'Dashboard' 
+        },
+        { 
+          name: 'reports', 
+          route: { name: 'reports' }, 
+          icon: 'mdi-chart-bar', 
+          label: 'Relatórios' 
+        },
+        { 
+          name: 'training', 
+          route: { name: 'training' }, 
+          icon: 'mdi-brain', 
+          label: 'Treinamento' 
+        },
+        { 
+          name: 'testing', 
+          route: { name: 'testing' }, 
+          icon: 'mdi-flask', 
+          label: 'Testes' 
+        },
+        { 
+          name: 'users', 
+          route: { name: 'users' }, 
+          icon: 'mdi-account-group', 
+          label: 'Usuários' 
+        },
+        { 
+          name: 'settings', 
+          route: { name: 'settings' }, 
+          icon: 'mdi-cog', 
+          label: 'Configurações' 
+        }
       ]
     }
   },
@@ -116,47 +156,67 @@ export default {
       this.isCollapsed = !this.isCollapsed
     },
     logout() {
-      // Lógica de logout
+      // Implement logout logic
       console.log('Logout')
+      // Example: 
+      // this.$store.dispatch('logout')
+      // this.$router.push('/login')
     }
   }
 }
 </script>
 
 <style scoped>
-.v-application {
+.sidebar-navigation {
+  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  background: linear-gradient(to bottom, #1565c0, #0d47a1);
   overflow: hidden;
 }
 
-.sidebar-navigation {
+.drawer-toggle {
-  transition: width 0.3s ease;
+  position: sticky;
-  height: 100vh;
+  top: 0;
-  max-width: 100%;
+  z-index: 10;
-  overflow: hidden !important;
+  background: rgba(0, 0, 0, 0.1);
 }
 
-.v-navigation-drawer {
+.header-compact {
-  box-shadow: 2px 0 5px rgba(0,0,0,0.1);
+  max-height: 56px !important;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 
-.v-list-item {
+.logout-button {
-  transition: background-color 0.2s ease;
+  margin-right: 8px;
+}
+
+.logo-container {
+  opacity: 0.9;
+  transform: translateY(0);
+  transition: all 0.3s ease;
+}
+
+.menu-item {
+  transition: all 0.2s ease;
   border-radius: 8px;
   margin: 4px 8px;
-  max-width: 100%;
+  padding: 8px 12px;
 }
 
-.v-list-item:hover {
+.menu-item:hover {
   background-color: rgba(255, 255, 255, 0.15);
+  transform: translateX(4px);
 }
 
-.v-list-item-title {
+.divider-custom {
-  font-size: 16px;
+  opacity: 0.3;
-  opacity: 1;
+  border-color: rgba(255, 255, 255, 0.2);
-  transition: opacity 0.3s ease;
 }
 
 .collapse-button {
-  margin-bottom: 8px;
+  transition: background-color 0.3s ease;
+}
+
+.collapse-button:hover {
+  background-color: rgba(255, 255, 255, 0.2);
 }
 </style>

src/views/TrainingView.vue

@@ -4,7 +4,6 @@
       <v-card>
         <v-tabs v-model="activeTab">
           <v-tab>Cadastro</v-tab>
-          <v-tab>Câmera ID</v-tab>
           <v-tab>Pesquisar</v-tab>
           <v-tab>Treino</v-tab>
           <v-tab>Lista de Nomes</v-tab>
@@ -14,34 +13,20 @@
           <!-- Cadastro Tab -->
           <v-form v-if="activeTab === 0" @submit.prevent="registerCameraModel">
             <v-row>
-              <v-col cols="12" md="6">
+              <v-col cols="12" md="4">
-                <v-text-field 
+                <v-text-field v-model="cameraModel.name" label="Nome do Modelo" required></v-text-field>
-                  v-model="cameraModel.name" 
+              </v-col>
-                  label="Nome do Modelo" 
+              <v-col cols="12" md="4">
-                  required
+                <v-text-field v-model="cameraModel.responsible" label="Responsável pelo Cadastro" required></v-text-field>
-                ></v-text-field>
               </v-col>
               <v-col cols="12" md="6">
-                <v-text-field 
+                <v-text-field v-model="cameraModel.description" label="Descrição" required></v-text-field>
-                  v-model="cameraModel.id" 
-                  label="ID" 
-                  required
-                ></v-text-field>
               </v-col>
-              <v-col cols="12">
+              <v-col cols="12" md="3">
-                <v-textarea
+                <v-text-field type="date" v-model="cameraModel.creationDate" label="Data de Criação" required></v-text-field>
-                  v-model="cameraModel.description"
-                  label="Descrição"
-                  rows="3"
-                ></v-textarea>
               </v-col>
-              <v-col cols="12">
+              <v-col cols="12" md="3">
-                <v-text-field 
+                <v-text-field type="time" v-model="cameraModel.creationTime" label="Hora de Criação" required></v-text-field>
-                  type="datetime-local" 
-                  v-model="cameraModel.registrationDate" 
-                  label="Data e Hora de Registro" 
-                  required
-                ></v-text-field>
               </v-col>
               <v-col cols="12">
                 <v-btn type="submit" color="primary">Cadastrar Modelo</v-btn>
@@ -49,58 +34,20 @@
             </v-row>
           </v-form>
 
-          <!-- Câmera ID Tab -->
-          <v-row v-if="activeTab === 1">
-            <v-col cols="12" md="6" v-for="camera in cameras" :key="camera.id">
-              <v-card outlined>
-                <v-card-title>{{ camera.name }}</v-card-title>
-                <v-card-subtitle>{{ camera.id }}</v-card-subtitle>
-                <v-card-text>
-                  <p><strong>Status:</strong> {{ camera.isActive ? 'Ativo' : 'Inativo' }}</p>
-                  <p><strong>Descrição:</strong> {{ camera.description }}</p>
-                  <p><strong>Data de Registro:</strong> {{ camera.registrationDate }}</p>
-                </v-card-text>
-              </v-card>
-            </v-col>
-          </v-row>
-
           <!-- Pesquisar Tab -->
-          <v-form v-if="activeTab === 2" @submit.prevent="searchCameraModels">
+          <v-form v-if="activeTab === 1" @submit.prevent="searchCameraModels">
             <v-row>
               <v-col cols="12" md="6">
-                <v-text-field 
+                <v-text-field v-model="searchCriteria.name" label="Nome do Modelo"></v-text-field>
-                  v-model="searchCriteria.id" 
-                  label="ID do Modelo"
-                ></v-text-field>
-              </v-col>
-              <v-col cols="12" md="6">
-                <v-text-field 
-                  v-model="searchCriteria.name" 
-                  label="Nome do Modelo"
-                ></v-text-field>
               </v-col>
               <v-col cols="12">
                 <v-btn type="submit" color="primary">Pesquisar</v-btn>
               </v-col>
             </v-row>
-            <v-row v-if="searchResults.length">
-              <v-col v-for="(camera, index) in searchResults" :key="index" cols="12" md="4">
-                <v-card outlined>
-                  <v-card-title>{{ camera.name }}</v-card-title>
-                  <v-card-subtitle>{{ camera.id }}</v-card-subtitle>
-                  <v-card-text>
-                    <p><strong>Descrição:</strong> {{ camera.description }}</p>
-                    <p><strong>Status:</strong> {{ camera.isActive ? 'Ativo' : 'Inativo' }}</p>
-                    <p><strong>Data de Registro:</strong> {{ camera.registrationDate }}</p>
-                    <p><strong>Treinada:</strong> {{ camera.isTrained ? 'Sim' : 'Não' }}</p>
-                  </v-card-text>
-                </v-card>
-              </v-col>
-            </v-row>
           </v-form>
 
           <!-- Treino Tab -->
-          <v-row v-if="activeTab === 3">
+          <v-row v-if="activeTab === 2">
             <v-col>
               <v-card outlined>
                 <v-card-title>Treinamento de Modelo de Câmera</v-card-title>
@@ -133,94 +80,33 @@
                       </v-btn>
                     </v-col>
                   </v-row>
-
-                  <v-card v-if="isTraining" class="mt-3">
-                    <v-card-title>Detalhes do Treinamento</v-card-title>
-                    <v-card-text>
-                      <p><strong>Câmera:</strong> {{ selectedCameraForTraining.name }}</p>
-                      <p><strong>ID:</strong> {{ selectedCameraForTraining.id }}</p>
-                      <v-progress-linear 
-                        :value="trainingProgress" 
-                        color="primary" 
-                        height="15"
-                      ></v-progress-linear>
-                      <div class="text-center mt-2">
-                        {{ trainingMessage }}
-                      </div>
-                    </v-card-text>
-                  </v-card>
                 </v-card-text>
               </v-card>
             </v-col>
           </v-row>
 
           <!-- Lista de Nomes Tab -->
-          <v-row v-if="activeTab === 4" class="mt-4">
+          <v-row v-if="activeTab === 3" class="mt-4">
             <v-col md="6" sm="12">
               <v-card outlined>
-                <v-card-title class="subtitle-1">
+                <v-card-title class="subtitle-1">Rostos Identificados</v-card-title>
-                  Rostos Identificados
-                </v-card-title>
                 <v-card-text>
                   <v-list>
-                    <v-list-item 
+                    <v-list-item v-for="(face, index) in identifiedFaces" :key="index">
-                      v-for="(face, index) in identifiedFaces" 
-                      :key="index"
-                    >
                       <v-list-item-avatar>
                         <v-icon large>mdi-account-circle</v-icon>
                       </v-list-item-avatar>
                       <v-list-item-content>
-                        ID: {{ face.id }} - {{ face.name }} 
+                        {{ face.name }} 
                         <v-chip small :color="face.isActive ? 'success' : 'error'">
                           {{ face.isActive ? 'Ativo' : 'Inativo' }}
                         </v-chip>
                       </v-list-item-content>
-                      <v-list-item-action>
-                        <v-btn icon @click="editFaceName(face)">
-                          <v-icon>mdi-pencil</v-icon>
-                        </v-btn>
-                      </v-list-item-action>
                     </v-list-item>
                   </v-list>
                 </v-card-text>
               </v-card>
             </v-col>
-
-            <v-col md="6" sm="12">
-              <v-card outlined>
-                <v-card-title class="subtitle-1">
-                  Rostos Não Identificados
-                </v-card-title>
-                <v-card-text>
-                  <v-list>
-                    <v-list-item 
-                      v-for="(face, index) in unidentifiedFaces" 
-                      :key="index"
-                    >
-                      <v-list-item-avatar>
-                        <v-icon large>mdi-account-circle</v-icon>
-                      </v-list-item-avatar>
-                      <v-list-item-action>
-                        <v-select
-                          :items="registeredUsers"
-                          label="Selecionar Usuário"
-                          v-model="face.selectedUser"
-                        ></v-select>
-                      </v-list-item-action>
-                    </v-list-item>
-                  </v-list>
-                  <v-btn 
-                    color="primary" 
-                    class="mt-3" 
-                    block 
-                    @click="confirmAssignments"
-                  >
-                    Confirmar Atribuições
-                  </v-btn>
-                </v-card-text>
-              </v-card>
-            </v-col>
           </v-row>
         </v-card-text>
       </v-card>