From cb4a5ab5ab8abf7c50fe983c678836ac24d0bce0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tha=C3=ADs=20Ferreira?= <thais.ferreira07@outlook.com>
Date: Thu, 6 Feb 2025 14:21:55 -0300
Subject: [PATCH] =?UTF-8?q?vers=C3=A3o=2014h21?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                 |  90 ++++
 package.json                      |   2 +
 src/App.vue                       | 227 +++++-----
 src/services/profileservice.js    |  18 +
 src/services/useprofileservice.js |  24 +
 src/views/RegisterUserCamView.vue | 412 ++++++++++--------
 src/views/TestingView.vue         |   2 +-
 src/views/UserProfileView.vue     | 699 ++++++++++++++----------------
 vite.config.js                    |  69 +--
 9 files changed, 846 insertions(+), 697 deletions(-)
 create mode 100644 src/services/profileservice.js
 create mode 100644 src/services/useprofileservice.js

diff --git a/package-lock.json b/package-lock.json
index 6402027..846e11d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,8 @@
       "version": "1.0.0",
       "dependencies": {
         "@mdi/font": "^7.4.47",
+        "@vuelidate/core": "^2.0.3",
+        "@vuelidate/validators": "^2.0.4",
         "axios": "^1.7.9",
         "pinia": "^2.1.3",
         "vue": "^3.3.4",
@@ -2780,6 +2782,94 @@
         "vue-component-type-helpers": "^2.0.0"
       }
     },
+    "node_modules/@vuelidate/core": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@vuelidate/core/-/core-2.0.3.tgz",
+      "integrity": "sha512-AN6l7KF7+mEfyWG0doT96z+47ljwPpZfi9/JrNMkOGLFv27XVZvKzRLXlmDPQjPl/wOB1GNnHuc54jlCLRNqGA==",
+      "license": "MIT",
+      "dependencies": {
+        "vue-demi": "^0.13.11"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^2.0.0 || >=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vuelidate/core/node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vuelidate/validators": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@vuelidate/validators/-/validators-2.0.4.tgz",
+      "integrity": "sha512-odTxtUZ2JpwwiQ10t0QWYJkkYrfd0SyFYhdHH44QQ1jDatlZgTh/KRzrWVmn/ib9Gq7H4hFD4e8ahoo5YlUlDw==",
+      "license": "MIT",
+      "dependencies": {
+        "vue-demi": "^0.13.11"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^2.0.0 || >=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vuelidate/validators/node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
diff --git a/package.json b/package.json
index 2855b65..8c93e61 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,8 @@
   },
   "dependencies": {
     "@mdi/font": "^7.4.47",
+    "@vuelidate/core": "^2.0.3",
+    "@vuelidate/validators": "^2.0.4",
     "axios": "^1.7.9",
     "pinia": "^2.1.3",
     "vue": "^3.3.4",
diff --git a/src/App.vue b/src/App.vue
index 106dddc..bbb6616 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,4 @@
 <template>
-  <!-- Anterior template permanece o mesmo até a parte do menu -->
   <v-app>
     <v-navigation-drawer
       v-model="drawer"
@@ -26,12 +25,12 @@
       <v-divider class="border-opacity-25"></v-divider>
 
       <!-- User Profile Section -->
-      <div class="profile-section px-4 py-3" v-if="!isCollapsed">
-        <div class="d-flex align-center">
+      <div class="profile-section px-4 py-3" @click="goToUserProfile">
+        <div class="d-flex align-center" :class="{ 'justify-center': isCollapsed }">
           <v-avatar color="primary" size="40">
             <v-icon>mdi-account</v-icon>
           </v-avatar>
-          <div class="ml-3">
+          <div v-if="!isCollapsed" class="ml-3">
             <div class="text-subtitle-2 font-weight-medium">Admin User</div>
             <div class="text-caption text-grey-lighten-1">Administrador</div>
           </div>
@@ -40,43 +39,34 @@
 
       <v-divider class="border-opacity-25"></v-divider>
 
-      <!-- Navigation Menu -->
+      <!-- Flattened Navigation Menu -->
       <v-list nav class="px-2">
-        <template v-for="category in menuCategories" :key="category.title">
-          <v-list-subheader
-            v-if="!isCollapsed"
-            class="text-caption font-weight-bold text-uppercase ml-2 mt-2"
-          >
-            {{ category.title }}
-          </v-list-subheader>
+        <v-list-item
+          v-for="item in flattenedMenuItems"
+          :key="item.name"
+          :to="item.route"
+          :value="item.name"
+          rounded="lg"
+          class="mb-1"
+        >
+          <template v-slot:prepend>
+            <v-icon :size="22">{{ item.icon }}</v-icon>
+          </template>
 
-          <v-list-item
-            v-for="item in category.items"
-            :key="item.name"
-            :to="item.route"
-            :value="item.name"
-            rounded="lg"
-            class="mb-1"
-          >
-            <template v-slot:prepend>
-              <v-icon :size="22">{{ item.icon }}</v-icon>
-            </template>
+          <v-list-item-title class="text-subtitle-2">
+            {{ item.label }}
+          </v-list-item-title>
 
-            <v-list-item-title class="text-subtitle-2">
-              {{ item.label }}
-            </v-list-item-title>
-
-            <template v-slot:append v-if="item.badge && !isCollapsed">
-              <v-chip
-                size="x-small"
-                :color="item.badge.color"
-                class="font-weight-bold"
-              >
-                {{ item.badge.text }}
-              </v-chip>
-            </template>
-          </v-list-item>
-        </template>
+          <template v-slot:append v-if="item.badge && !isCollapsed">
+            <v-chip
+              size="x-small"
+              :color="item.badge.color"
+              class="font-weight-bold"
+            >
+              {{ item.badge.text }}
+            </v-chip>
+          </template>
+        </v-list-item>
       </v-list>
 
       <!-- Bottom Actions -->
@@ -125,7 +115,7 @@
       <v-btn
         color="error"
         variant="tonal"
-        @click="logout"
+        @click="handleLogout"
         prepend-icon="mdi-logout"
         class="mr-2"
       >
@@ -156,96 +146,76 @@ export default {
     return {
       drawer: true,
       isCollapsed: false,
-      menuCategories: [
-        {
-          title: 'Principal',
-          items: [
-            { 
-              name: 'home', 
-              route: { name: 'home' }, 
-              icon: 'mdi-home', 
-              label: 'Home' 
-            },
-            { 
-              name: 'dashboard', 
-              route: { name: 'dashboard' }, 
-              icon: 'mdi-view-dashboard', 
-              label: 'Dashboard',
-              badge: { text: 'Novo', color: 'success' }
-            },
-            { 
-              name: 'monitoring', 
-              route: { name: 'monitoring' }, 
-              icon: 'mdi-cctv', 
-              label: 'Monitoramento',
-              badge: { text: '12', color: 'info' }
-            }
-          ]
+      flattenedMenuItems: [
+        { 
+          name: 'home', 
+          route: { name: 'home' }, 
+          icon: 'mdi-home', 
+          label: 'Home' 
         },
-        {
-          title: 'Gestão',
-          items: [
-            { 
-              name: 'analytics', 
-              route: { name: 'analytics' }, 
-              icon: 'mdi-chart-box', 
-              label: 'Analytics' 
-            },
-            { 
-              name: 'reports', 
-              route: { name: 'reports' }, 
-              icon: 'mdi-file-chart', 
-              label: 'Relatórios' 
-            },
-            { 
-              name: 'alerts', 
-              route: { name: 'alerts' }, 
-              icon: 'mdi-bell-ring', 
-              label: 'Alertas',
-              badge: { text: '3', color: 'error' }
-            }
-          ]
+        { 
+          name: 'dashboard', 
+          route: { name: 'dashboard' }, 
+          icon: 'mdi-view-dashboard', 
+          label: 'Dashboard',
+          badge: { text: 'Novo', color: 'success' }
         },
-        {
-          title: 'Desenvolvimento',
-          items: [
-            { 
-              name: 'testing', 
-              route: { name: 'testing' }, 
-              icon: 'mdi-flask', 
-              label: 'Testes',
-              badge: { text: 'Dev', color: 'warning' }
-            },
-            { 
-              name: 'register', 
-              route: { name: 'register' }, 
-              icon: 'mdi-file-document-plus', 
-              label: 'Registro' 
-            }
-          ]
+        { 
+          name: 'monitoring', 
+          route: { name: 'monitoring' }, 
+          icon: 'mdi-cctv', 
+          label: 'Monitoramento',
+          badge: { text: '12', color: 'info' }
         },
-        {
-          title: 'Configurações',
-          items: [
-            { 
-              name: 'cameras', 
-              route: { name: 'cameras' }, 
-              icon: 'mdi-camera', 
-              label: 'Câmeras' 
-            },
-            { 
-              name: 'users', 
-              route: { name: 'users' }, 
-              icon: 'mdi-account-group', 
-              label: 'Usuários' 
-            },
-            { 
-              name: 'settings', 
-              route: { name: 'settings' }, 
-              icon: 'mdi-cog', 
-              label: 'Configurações' 
-            }
-          ]
+        { 
+          name: 'analytics', 
+          route: { name: 'analytics' }, 
+          icon: 'mdi-chart-box', 
+          label: 'Analytics' 
+        },
+        { 
+          name: 'reports', 
+          route: { name: 'reports' }, 
+          icon: 'mdi-file-chart', 
+          label: 'Relatórios' 
+        },
+        { 
+          name: 'alerts', 
+          route: { name: 'alerts' }, 
+          icon: 'mdi-bell-ring', 
+          label: 'Alertas',
+          badge: { text: '3', color: 'error' }
+        },
+        { 
+          name: 'testing', 
+          route: { name: 'testing' }, 
+          icon: 'mdi-flask', 
+          label: 'Testes',
+          badge: { text: 'Dev', color: 'warning' }
+        },
+        { 
+          name: 'register-user-cam', 
+          route: { name: 'register-user-cam' }, 
+          icon: 'mdi-file-document-plus', 
+          label: 'Registro' 
+        },
+        { 
+          name: 'cameras', 
+          route: { name: 'cameras' }, 
+          icon: 'mdi-camera', 
+          label: 'Câmeras' 
+        },
+        { 
+          name: 'users', 
+          route: { name: 'users' }, 
+          icon: 'mdi-account-group', 
+          label: 'Usuários' 
+        },
+        { 
+          name: 'settings', 
+          route: { name: 'settings' }, 
+          icon: 'mdi-cog', 
+          label: 'Configurações' 
         }
       ]
     };
@@ -258,6 +228,10 @@ export default {
       this.isCollapsed = !this.isCollapsed;
     },
     
+    goToUserProfile() {
+      this.$router.push({ name: 'user-profile' });
+    },
+    
     async handleLogout() {
       try {
         await this.logout();
@@ -281,6 +255,7 @@ export default {
 
 .profile-section {
   background-color: rgba(255, 255, 255, 0.05);
+  cursor: pointer;
 }
 
 .v-list-item--active {
diff --git a/src/services/profileservice.js b/src/services/profileservice.js
new file mode 100644
index 0000000..22dd869
--- /dev/null
+++ b/src/services/profileservice.js
@@ -0,0 +1,18 @@
+import axios from 'axios'
+
+export default function useProfileService() {
+  const getProfile = async () => {
+    const response = await axios.get('/api/profile')
+    return response.data
+  }
+
+  const updateProfile = async (profileData) => {
+    const response = await axios.put('/api/profile', profileData)
+    return response.data
+  }
+
+  return {
+    getProfile,
+    updateProfile
+  }
+}
\ No newline at end of file
diff --git a/src/services/useprofileservice.js b/src/services/useprofileservice.js
new file mode 100644
index 0000000..570ce99
--- /dev/null
+++ b/src/services/useprofileservice.js
@@ -0,0 +1,24 @@
+import api from './api'
+
+export default function useProfileService() {
+  return {
+    async getProfile() {
+      try {
+        const response = await api.get('/profile')
+        return response.data
+      } catch (error) {
+        console.error('Failed to fetch profile:', error)
+        throw error
+      }
+    },
+    async updateProfile(profileData) {
+      try {
+        const response = await api.put('/profile', profileData)
+        return response.data
+      } catch (error) {
+        console.error('Failed to update profile:', error)
+        throw error
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/RegisterUserCamView.vue b/src/views/RegisterUserCamView.vue
index 9cc8b4d..0dbd1dc 100644
--- a/src/views/RegisterUserCamView.vue
+++ b/src/views/RegisterUserCamView.vue
@@ -1,104 +1,236 @@
 <template>
-  <div class="container">
-    <!-- Aba de Cadastro de Câmera -->
-    <div class="camera-registration">
-      <h2>Cadastro de Câmera</h2>
-      <form @submit.prevent="handleCameraSubmit" ref="cameraForm">
-        <div>
-          <label for="modelName">Nome do Modelo:</label>
-          <input v-model="cameraForm.modelName" type="text" id="modelName" required />
-        </div>
-        <div>
-          <label for="id">ID:</label>
-          <input v-model="cameraForm.id" type="text" id="id" required />
-        </div>
-        <div>
-          <label for="responsible">Responsável pelo Cadastro:</label>
-          <input v-model="cameraForm.responsible" type="text" id="responsible" required />
-        </div>
-        <div>
-          <label for="description">Descrição:</label>
-          <textarea v-model="cameraForm.description" id="description" required></textarea>
-        </div>
-        <div>
-          <label for="date">Data:</label>
-          <input v-model="cameraForm.date" type="date" id="date" required />
-        </div>
-        <div>
-          <label for="time">Hora:</label>
-          <input v-model="cameraForm.time" type="time" id="time" required />
-        </div>
-        <button type="submit">Cadastrar</button>
-      </form>
-      <p v-if="cameraRegistered" class="success-message">Cadastro de câmera concluído!</p>
+  <v-container fluid>
+    <v-row>
+      <!-- Camera Registration -->
+      <v-col cols="12" md="6">
+        <v-card>
+          <v-card-title>
+            <v-icon left>mdi-camera</v-icon>
+            Cadastro de Câmera
+          </v-card-title>
+          <v-card-text>
+            <v-form ref="cameraForm" v-model="cameraFormValid" lazy-validation @submit.prevent="handleCameraSubmit">
+              <v-row>
+                <v-col cols="12" sm="6">
+                  <v-text-field
+                    v-model="cameraForm.modelName"
+                    :rules="[v => !!v || 'Nome do modelo é obrigatório']"
+                    label="Nome do Modelo"
+                    required
+                  ></v-text-field>
+                </v-col>
+                <v-col cols="12" sm="6">
+                  <v-text-field
+                    v-model="cameraForm.id"
+                    :rules="[v => !!v || 'ID é obrigatório']"
+                    label="ID"
+                    required
+                  ></v-text-field>
+                </v-col>
+                <v-col cols="12">
+                  <v-text-field
+                    v-model="cameraForm.responsible"
+                    :rules="[v => !!v || 'Responsável é obrigatório']"
+                    label="Responsável pelo Cadastro"
+                    required
+                  ></v-text-field>
+                </v-col>
+                <v-col cols="12">
+                  <v-textarea
+                    v-model="cameraForm.description"
+                    :rules="[v => !!v || 'Descrição é obrigatória']"
+                    label="Descrição"
+                    required
+                  ></v-textarea>
+                </v-col>
+                <v-col cols="12" sm="6">
+                  <v-text-field
+                    v-model="cameraForm.date"
+                    type="date"
+                    :rules="[v => !!v || 'Data é obrigatória']"
+                    label="Data"
+                    required
+                  ></v-text-field>
+                </v-col>
+                <v-col cols="12" sm="6">
+                  <v-text-field
+                    v-model="cameraForm.time"
+                    type="time"
+                    :rules="[v => !!v || 'Hora é obrigatória']"
+                    label="Hora"
+                    required
+                  ></v-text-field>
+                </v-col>
+              </v-row>
+              <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn 
+                  color="primary" 
+                  type="submit" 
+                  :disabled="!cameraFormValid"
+                >
+                  Cadastrar Câmera
+                </v-btn>
+              </v-card-actions>
+            </v-form>
+          </v-card-text>
+        </v-card>
 
-      <h3>Últimos Cadastros de Câmeras</h3>
-      <ul>
-        <li v-for="(camera, index) in recentCameras" :key="index">
-          {{ camera.modelName }} - {{ camera.id }} (Responsável: {{ camera.responsible }})
-        </li>
-      </ul>
-    </div>
+        <!-- Recent Cameras -->
+        <v-card class="mt-4" v-if="recentCameras.length">
+          <v-card-title>Últimos Cadastros de Câmeras</v-card-title>
+          <v-list>
+            <v-list-item 
+              v-for="(camera, index) in recentCameras" 
+              :key="index"
+            >
+              <v-list-item-content>
+                <v-list-item-title>
+                  {{ camera.modelName }} - {{ camera.id }}
+                </v-list-item-title>
+                <v-list-item-subtitle>
+                  Responsável: {{ camera.responsible }}
+                </v-list-item-subtitle>
+              </v-list-item-content>
+            </v-list-item>
+          </v-list>
+        </v-card>
+      </v-col>
 
-    <!-- Aba de Cadastro de Usuário -->
-    <div class="user-registration">
-      <h2>Cadastro de Usuário</h2>
-      <form @submit.prevent="handleUserSubmit" ref="userForm">
-        <div>
-          <label for="profilePicture">Foto de Perfil:</label>
-          <input type="file" @change="handleProfilePictureChange" />
-        </div>
-        <div>
-          <label for="firstName">Nome:</label>
-          <input v-model="userForm.firstName" type="text" id="firstName" required />
-        </div>
-        <div>
-          <label for="lastName">Sobrenome:</label>
-          <input v-model="userForm.lastName" type="text" id="lastName" required />
-        </div>
-        <div>
-          <label for="userId">ID:</label>
-          <input v-model="userForm.userId" type="text" id="userId" required />
-        </div>
-        <div>
-          <label for="email">E-mail:</label>
-          <input v-model="userForm.email" type="email" id="email" required />
-        </div>
-        <div>
-          <label for="phone">Telefone:</label>
-          <input v-model="userForm.phone" type="text" id="phone" required />
-        </div>
-        <div>
-          <label for="group">Grupo:</label>
-          <input v-model="userForm.group" type="text" id="group" required />
-        </div>
-        <div>
-          <label for="role">Cargo:</label>
-          <input v-model="userForm.role" type="text" id="role" required />
-        </div>
-        <div>
-          <label for="permissions">Permissão:</label>
-          <select v-model="userForm.permissions" id="permissions" required>
-            <option value="admin">Admin</option>
-            <option value="user">Usuário</option>
-          </select>
-        </div>
-        <div>
-          <label for="shift">Turno:</label>
-          <input v-model="userForm.shift" type="text" id="shift" required />
-        </div>
-        <button type="submit">Cadastrar</button>
-      </form>
-      <p v-if="userRegistered" class="success-message">Cadastro de usuário concluído!</p>
-    </div>
-  </div>
+      <!-- User Registration -->
+      <v-col cols="12" md="6">
+        <v-card>
+          <v-card-title>
+            <v-icon left>mdi-account-plus</v-icon>
+            Cadastro de Usuário
+          </v-card-title>
+          <v-card-text>
+            <v-form ref="userForm" v-model="userFormValid" lazy-validation @submit.prevent="handleUserSubmit">
+              <v-row>
+                <v-col cols="12">
+                  <v-file-input
+                    v-model="userForm.profilePicture"
+                    label="Foto de Perfil"
+                    prepend-icon="mdi-camera"
+                    accept="image/*"
+                    @change="handleProfilePictureChange"
+                  ></v-file-input>
+                </v-col>
+                <v-col cols="12" sm="6">
+                  <v-text-field
+                    v-model="userForm.firstName"
+                    :rules="[v => !!v || 'Nome é obrigatório']"
+                    label="Nome"
+                    required
+                  ></v-text-field>
+                </v-col>
+                <v-col cols="12" sm="6">
+                  <v-text-field
+                    v-model="userForm.lastName"
+                    :rules="[v => !!v || 'Sobrenome é obrigatório']"
+                    label="Sobrenome"
+                    required
+                  ></v-text-field>
+                </v-col>
+                <v-col cols="12" sm="6">
+                  <v-text-field
+                    v-model="userForm.userId"
+                    :rules="[v => !!v || 'ID é obrigatório']"
+                    label="ID"
+                    required
+                  ></v-text-field>
+                </v-col>
+                <v-col cols="12" sm="6">
+                  <v-text-field
+                    v-model="userForm.email"
+                    :rules="[v => !!v || 'E-mail é obrigatório', v => /.+@.+\..+/.test(v) || 'E-mail inválido']"
+                    label="E-mail"
+                    type="email"
+                    required
+                  ></v-text-field>
+                </v-col>
+                <v-col cols="12" sm="6">
+                  <v-text-field
+                    v-model="userForm.phone"
+                    :rules="[v => !!v || 'Telefone é obrigatório']"
+                    label="Telefone"
+                    required
+                  ></v-text-field>
+                </v-col>
+                <v-col cols="12" sm="6">
+                  <v-text-field
+                    v-model="userForm.group"
+                    :rules="[v => !!v || 'Grupo é obrigatório']"
+                    label="Grupo"
+                    required
+                  ></v-text-field>
+                </v-col>
+                <v-col cols="12" sm="6">
+                  <v-text-field
+                    v-model="userForm.role"
+                    :rules="[v => !!v || 'Cargo é obrigatório']"
+                    label="Cargo"
+                    required
+                  ></v-text-field>
+                </v-col>
+                <v-col cols="12" sm="6">
+                  <v-select
+                    v-model="userForm.permissions"
+                    :items="['Admin', 'Usuário']"
+                    :rules="[v => !!v || 'Permissão é obrigatória']"
+                    label="Permissão"
+                    required
+                  ></v-select>
+                </v-col>
+                <v-col cols="12" sm="6">
+                  <v-text-field
+                    v-model="userForm.shift"
+                    :rules="[v => !!v || 'Turno é obrigatório']"
+                    label="Turno"
+                    required
+                  ></v-text-field>
+                </v-col>
+              </v-row>
+              <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn 
+                  color="primary" 
+                  type="submit" 
+                  :disabled="!userFormValid"
+                >
+                  Cadastrar Usuário
+                </v-btn>
+              </v-card-actions>
+            </v-form>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <!-- Snackbars for Feedback -->
+    <v-snackbar v-model="cameraRegistered" color="success">
+      Cadastro de câmera concluído!
+      <template v-slot:actions>
+        <v-btn text @click="cameraRegistered = false">Fechar</v-btn>
+      </template>
+    </v-snackbar>
+
+    <v-snackbar v-model="userRegistered" color="success">
+      Cadastro de usuário concluído!
+      <template v-slot:actions>
+        <v-btn text @click="userRegistered = false">Fechar</v-btn>
+      </template>
+    </v-snackbar>
+  </v-container>
 </template>
 
 <script>
 export default {
+  name: 'RegisterUserCamView',
   data() {
     return {
-      // Dados do Formulário de Cadastro de Câmera
+      cameraFormValid: false,
+      userFormValid: false,
       cameraForm: {
         modelName: '',
         id: '',
@@ -107,8 +239,8 @@ export default {
         date: '',
         time: ''
       },
-      // Dados do Formulário de Cadastro de Usuário
       userForm: {
+        profilePicture: null,
         firstName: '',
         lastName: '',
         userId: '',
@@ -119,63 +251,36 @@ export default {
         permissions: '',
         shift: ''
       },
-      // Variáveis de controle de sucesso
       cameraRegistered: false,
       userRegistered: false,
-      // Arrays para armazenar os cadastros
-      recentCameras: [],
+      recentCameras: []
     };
   },
   methods: {
     handleCameraSubmit() {
-      // Valida se todos os campos foram preenchidos
-      if (this.isFormValid(this.cameraForm)) {
-        this.recentCameras.push({ ...this.cameraForm });
+      if (this.$refs.cameraForm.validate()) {
+        this.recentCameras.unshift({ ...this.cameraForm });
+        
+        // Limit to 3 recent cameras
         if (this.recentCameras.length > 3) {
-          this.recentCameras.shift(); // Mantém apenas os 3 últimos cadastros
+          this.recentCameras.pop();
         }
+
         this.cameraRegistered = true;
-        this.resetCameraForm();
+        this.$refs.cameraForm.reset();
       }
     },
     handleUserSubmit() {
-      // Valida se todos os campos foram preenchidos
-      if (this.isFormValid(this.userForm)) {
+      if (this.$refs.userForm.validate()) {
         this.userRegistered = true;
-        this.resetUserForm();
+        this.$refs.userForm.reset();
       }
     },
-    isFormValid(form) {
-      return Object.values(form).every(value => value !== '');
-    },
-    resetCameraForm() {
-      this.cameraForm = {
-        modelName: '',
-        id: '',
-        responsible: '',
-        description: '',
-        date: '',
-        time: ''
-      };
-    },
-    resetUserForm() {
-      this.userForm = {
-        firstName: '',
-        lastName: '',
-        userId: '',
-        email: '',
-        phone: '',
-        group: '',
-        role: '',
-        permissions: '',
-        shift: ''
-      };
-    },
-    handleProfilePictureChange(event) {
-      const file = event.target.files[0];
-      if (file) {
+    handleProfilePictureChange(files) {
+      if (files && files.length) {
+        const file = files[0];
         console.log("Foto de perfil selecionada:", file.name);
-        // Aqui você pode realizar o upload da foto
+        // Additional file handling logic can be added here
       }
     }
   }
@@ -183,40 +288,7 @@ export default {
 </script>
 
 <style scoped>
-.container {
-  display: flex;
-  justify-content: space-between;
-  padding: 20px;
+.v-card {
+  margin-bottom: 16px;
 }
-
-form {
-  display: flex;
-  flex-direction: column;
-  width: 300px;
-}
-
-input, textarea, select {
-  margin-bottom: 10px;
-}
-
-button {
-  padding: 10px;
-  background-color: #28a745;
-  color: white;
-  border: none;
-  cursor: pointer;
-}
-
-button:hover {
-  background-color: #218838;
-}
-
-.success-message {
-  color: green;
-  font-weight: bold;
-}
-
-h3 {
-  margin-top: 20px;
-}
-</style>
+</style>
\ No newline at end of file
diff --git a/src/views/TestingView.vue b/src/views/TestingView.vue
index 08ed452..4ad61c2 100644
--- a/src/views/TestingView.vue
+++ b/src/views/TestingView.vue
@@ -58,7 +58,7 @@
                 <v-spacer></v-spacer>
               </v-toolbar>
             </template>
-            <template #item.actions="{ item }">
+            <template #item_actions="{ item }">
               <v-btn icon color="primary" @click="viewDetails(item)">
                 <v-icon>mdi-eye</v-icon>
               </v-btn>
diff --git a/src/views/UserProfileView.vue b/src/views/UserProfileView.vue
index ca6826b..6d41f52 100644
--- a/src/views/UserProfileView.vue
+++ b/src/views/UserProfileView.vue
@@ -1,166 +1,218 @@
-<!-- ProfilePage.vue -->
 <template>
   <div class="profile-container">
     <div class="profile-header">
-      <h1 class="profile-title">Perfil do Usuário</h1>
-      <p class="profile-subtitle">Gerencie suas informações pessoais</p>
+      <h1 class="profile-title">{{ $t('profile.title') }}</h1>
+      <p class="profile-subtitle">{{ $t('profile.subtitle') }}</p>
     </div>
     
-    <form @submit.prevent="saveProfile" class="profile-form">
+    <form 
+      @submit.prevent="submitProfile" 
+      class="profile-form" 
+      novalidate
+      aria-labelledby="profile-form-title"
+    >
       <div class="profile-grid">
-        <!-- Coluna da Foto -->
+        <!-- Photo Section with Advanced Upload -->
         <div class="photo-section">
-          <div class="profile-photo-container">
-            <div class="photo-wrapper">
-              <img :src="profileData.photoUrl || defaultPhoto" alt="Foto de Perfil" class="profile-photo">
-              <div class="photo-overlay">
-                <span class="photo-text">Alterar foto</span>
-              </div>
+          <div 
+            class="profile-photo-wrapper" 
+            :class="{ 'has-error': photoError }"
+          >
+            <img 
+              :src="previewPhotoUrl || defaultPhoto" 
+              :alt="$t('profile.photoAlt')"
+              class="profile-photo"
+            >
+            <div 
+              class="photo-upload-overlay"
+              @click="openFileDialog"
+              @keydown.enter="openFileDialog"
+              tabindex="0"
+              role="button"
+              :aria-label="$t('profile.changePhoto')"
+            >
+              <i class="fas fa-camera"></i>
+              <span>{{ $t('profile.changePhoto') }}</span>
             </div>
             <input 
               type="file" 
-              @change="handlePhotoUpload" 
-              accept="image/*"
               ref="photoInput"
-              class="photo-input"
+              accept="image/jpeg,image/png,image/webp"
+              @change="handlePhotoUpload"
+              class="hidden-file-input"
             >
-            <button type="button" @click="triggerPhotoUpload" class="upload-btn">
-              <i class="fas fa-camera"></i>
-              Alterar Foto
-            </button>
           </div>
+          <transition name="fade">
+            <div v-if="photoError" class="error-text">
+              {{ photoError }}
+            </div>
+          </transition>
         </div>
 
-        <!-- Coluna das Informações -->
-        <div class="info-section">
-          <!-- Seção de Informações Básicas -->
-          <div class="section-title">
-            <i class="fas fa-user"></i>
-            <h2 class="sub-title">Informações Básicas</h2>
-          </div>
+        <!-- Profile Information Section -->
+        <div class="profile-information">
+          <!-- Basic Information -->
+          <div class="info-section">
+            <h2 class="section-heading">
+              <i class="fas fa-user-circle"></i>
+              {{ $t('profile.basicInfo') }}
+            </h2>
 
-          <div class="form-row">
-            <div class="form-group">
-              <label>ID</label>
-              <input type="text" v-model="profileData.id" readonly class="form-input readonly">
+            <div class="form-grid">
+              <div class="form-field">
+                <label for="firstName">{{ $t('profile.firstName') }}</label>
+                <input 
+                  id="firstName"
+                  v-model.trim="profileData.firstName"
+                  type="text"
+                  :class="{ 'is-invalid': v$.firstName.$error }"
+                  @blur="v$.firstName.$touch()"
+                  required
+                >
+                <div 
+                  v-if="v$.firstName.$error" 
+                  class="validation-error"
+                >
+                  {{ $t('validation.requiredField') }}
+                </div>
+              </div>
+
+              <div class="form-field">
+                <label for="lastName">{{ $t('profile.lastName') }}</label>
+                <input 
+                  id="lastName"
+                  v-model.trim="profileData.lastName"
+                  type="text"
+                  :class="{ 'is-invalid': v$.lastName.$error }"
+                  @blur="v$.lastName.$touch()"
+                  required
+                >
+                <div 
+                  v-if="v$.lastName.$error" 
+                  class="validation-error"
+                >
+                  {{ $t('validation.requiredField') }}
+                </div>
+              </div>
             </div>
           </div>
 
-          <div class="form-row">
-            <div class="form-group">
-              <label>Nome</label>
-              <input 
-                type="text" 
-                v-model="profileData.firstName" 
-                required
-                class="form-input"
-                placeholder="Digite seu nome"
-              >
-            </div>
+          <!-- Contact Information -->
+          <div class="info-section">
+            <h2 class="section-heading">
+              <i class="fas fa-envelope"></i>
+              {{ $t('profile.contactInfo') }}
+            </h2>
 
-            <div class="form-group">
-              <label>Sobrenome</label>
-              <input 
-                type="text" 
-                v-model="profileData.lastName" 
-                required
-                class="form-input"
-                placeholder="Digite seu sobrenome"
-              >
+            <div class="form-grid">
+              <div class="form-field">
+                <label for="email">{{ $t('profile.email') }}</label>
+                <input 
+                  id="email"
+                  v-model.trim="profileData.email"
+                  type="email"
+                  :class="{ 'is-invalid': v$.email.$error }"
+                  @blur="v$.email.$touch()"
+                  required
+                >
+                <div 
+                  v-if="v$.email.$error" 
+                  class="validation-error"
+                >
+                  {{ $t('validation.invalidEmail') }}
+                </div>
+              </div>
+
+              <div class="form-field">
+                <label for="phone">{{ $t('profile.phone') }}</label>
+                <input 
+                  id="phone"
+                  v-model="profileData.phone"
+                  type="tel"
+                  v-mask="'(##) #####-####'"
+                  placeholder="(00) 00000-0000"
+                >
+              </div>
             </div>
           </div>
 
-          <!-- Seção de Contato -->
-          <div class="section-title">
-            <i class="fas fa-address-card"></i>
-            <h2>Informações de Contato</h2>
-          </div>
+          <!-- Professional Information -->
+          <div class="info-section">
+            <h2 class="section-heading">
+              <i class="fas fa-briefcase"></i>
+              {{ $t('profile.professionalInfo') }}
+            </h2>
 
-          <div class="form-row">
-            <div class="form-group">
-              <label>Email</label>
-              <input 
-                type="email" 
-                v-model="profileData.email" 
-                required
-                class="form-input"
-                placeholder="seu@email.com"
-              >
-            </div>
+            <div class="form-grid">
+              <div class="form-field">
+                <label for="role">{{ $t('profile.role') }}</label>
+                <select 
+                  id="role"
+                  v-model="profileData.role"
+                  :class="{ 'is-invalid': v$.role.$error }"
+                  @blur="v$.role.$touch()"
+                  required
+                >
+                  <option value="" disabled>
+                    {{ $t('profile.selectRole') }}
+                  </option>
+                  <option 
+                    v-for="role in roles" 
+                    :key="role.id" 
+                    :value="role.id"
+                  >
+                    {{ role.name }}
+                  </option>
+                </select>
+                <div 
+                  v-if="v$.role.$error" 
+                  class="validation-error"
+                >
+                  {{ $t('validation.requiredField') }}
+                </div>
+              </div>
 
-            <div class="form-group">
-              <label>Telefone</label>
-              <input 
-                type="tel" 
-                v-model="profileData.phone"
-                v-mask="'(##) #####-####'"
-                class="form-input"
-                placeholder="(00) 00000-0000"
-              >
-            </div>
-          </div>
-
-          <!-- Seção Profissional -->
-          <div class="section-title">
-            <i class="fas fa-briefcase"></i>
-            <h2>Informações Profissionais</h2>
-          </div>
-
-          <div class="form-row">
-            <div class="form-group">
-              <label>Cargo</label>
-              <select v-model="profileData.role" class="form-select">
-                <option value="" disabled>Selecione um cargo</option>
-                <option v-for="role in roles" :key="role.id" :value="role.id">
-                  {{ role.name }}
-                </option>
-              </select>
-            </div>
-
-            <div class="form-group">
-              <label>Grupo</label>
-              <select v-model="profileData.group" class="form-select">
-                <option value="" disabled>Selecione um grupo</option>
-                <option v-for="group in groups" :key="group.id" :value="group.id">
-                  {{ group.name }}
-                </option>
-              </select>
-            </div>
-          </div>
-
-          <div class="form-row">
-            <div class="form-group">
-              <label>Permissão</label>
-              <select v-model="profileData.permission" class="form-select">
-                <option value="" disabled>Selecione uma permissão</option>
-                <option v-for="permission in permissions" :key="permission.id" :value="permission.id">
-                  {{ permission.name }}
-                </option>
-              </select>
-            </div>
-
-            <div class="form-group">
-              <label>Turno</label>
-              <select v-model="profileData.shift" class="form-select">
-                <option value="" disabled>Selecione um turno</option>
-                <option value="morning">Manhã</option>
-                <option value="afternoon">Tarde</option>
-                <option value="night">Noite</option>
-              </select>
+              <div class="form-field">
+                <label for="group">{{ $t('profile.group') }}</label>
+                <select 
+                  id="group"
+                  v-model="profileData.group"
+                >
+                  <option value="" disabled>
+                    {{ $t('profile.selectGroup') }}
+                  </option>
+                  <option 
+                    v-for="group in groups" 
+                    :key="group.id" 
+                    :value="group.id"
+                  >
+                    {{ group.name }}
+                  </option>
+                </select>
+              </div>
             </div>
           </div>
         </div>
       </div>
 
-      <!-- Botões de Ação -->
-      <div class="button-group">
-        <button type="button" @click="resetForm" class="cancel-btn">
+      <!-- Action Buttons -->
+      <div class="form-actions">
+        <button 
+          type="button" 
+          class="btn btn-secondary" 
+          @click="resetForm"
+          :disabled="isSubmitting"
+        >
           <i class="fas fa-times"></i>
-          Cancelar
+          {{ $t('profile.cancel') }}
         </button>
-        <button type="submit" class="save-btn">
+        <button 
+          type="submit" 
+          class="btn btn-primary"
+          :disabled="isSubmitting || !isFormValid"
+        >
           <i class="fas fa-save"></i>
-          Salvar Alterações
+          {{ $t('profile.save') }}
         </button>
       </div>
     </form>
@@ -168,8 +220,28 @@
 </template>
 
 <script>
+import { ref } from 'vue'
+import { useVuelidate } from '@vuelidate/core'
+import { required, email } from '@vuelidate/validators'
+import useProfileService from '@/services/profileService'
+
 export default {
   name: 'ProfilePage',
+  setup() {
+    const profileService = useProfileService()
+    const v$ = useVuelidate()
+    const previewPhotoUrl = ref(null)
+    const photoError = ref(null)
+    const isSubmitting = ref(false)
+
+    return {
+      v$,
+      previewPhotoUrl,
+      photoError,
+      isSubmitting,
+      profileService
+    }
+  },
   data() {
     return {
       defaultPhoto: '/path/to/default-avatar.png',
@@ -181,321 +253,208 @@ export default {
         email: '',
         phone: '',
         role: '',
-        group: '',
-        permission: '',
-        shift: ''
+        group: ''
       },
       roles: [
-        { id: 1, name: 'Funcionário' },
-        { id: 2, name: 'Estagiário' },
-        { id: 3, name: 'Gerente' }
+        { id: 1, name: 'Employee' },
+        { id: 2, name: 'Intern' },
+        { id: 3, name: 'Manager' }
       ],
       groups: [
         { id: 1, name: 'Beta' },
-        { id: 2, name: 'Alfa' },
+        { id: 2, name: 'Alpha' },
         { id: 3, name: 'Omega' }
-      ],
-      permissions: [
-        { id: 1, name: 'Administrador' },
-        { id: 2, name: 'Editor' },
-        { id: 3, name: 'Visualizador' }
       ]
     }
   },
+  computed: {
+    isFormValid() {
+      return !this.v$.$error && 
+             this.profileData.firstName && 
+             this.profileData.lastName && 
+             this.profileData.email && 
+             this.profileData.role
+    }
+  },
+  validations() {
+    return {
+      profileData: {
+        firstName: { required },
+        lastName: { required },
+        email: { required, email },
+        role: { required }
+      }
+    }
+  },
   methods: {
     async loadProfile() {
       try {
-        const response = await fetch('/api/profile');
-        const data = await response.json();
-        this.profileData = { ...data };
+        const profile = await this.profileService.getProfile()
+        this.profileData = { ...profile }
+        this.previewPhotoUrl = profile.photoUrl
       } catch (error) {
-        console.error('Erro ao carregar perfil:', error);
+        this.handleError(error)
       }
     },
-    triggerPhotoUpload() {
-      this.$refs.photoInput.click();
+    openFileDialog() {
+      this.$refs.photoInput.click()
     },
     handlePhotoUpload(event) {
-      const file = event.target.files[0];
+      const file = event.target.files[0]
+      this.photoError = null
+
       if (file) {
-        const reader = new FileReader();
+        const maxSize = 5 * 1024 * 1024 // 5MB
+        const validTypes = ['image/jpeg', 'image/png', 'image/webp']
+
+        if (file.size > maxSize) {
+          this.photoError = this.$t('validation.photoSizeTooLarge')
+          return
+        }
+
+        if (!validTypes.includes(file.type)) {
+          this.photoError = this.$t('validation.invalidPhotoType')
+          return
+        }
+
+        const reader = new FileReader()
         reader.onload = (e) => {
-          this.profileData.photoUrl = e.target.result;
-        };
-        reader.readAsDataURL(file);
+          this.previewPhotoUrl = e.target.result
+          this.profileData.photoUrl = e.target.result
+        }
+        reader.readAsDataURL(file)
       }
     },
-    async saveProfile() {
+    async submitProfile() {
+      this.v$.$touch()
+      
+      if (this.v$.$invalid) return
+
+      this.isSubmitting = true
+      
       try {
-        await fetch('/api/profile', {
-          method: 'PUT',
-          headers: {
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify(this.profileData)
-        });
-        
-        this.$emit('profile-updated');
-        this.showNotification('Perfil atualizado com sucesso!', 'success');
+        await this.profileService.updateProfile(this.profileData)
+        this.$emit('profile-updated')
+        this.$toast.success(this.$t('profile.updateSuccess'))
       } catch (error) {
-        console.error('Erro ao salvar perfil:', error);
-        this.showNotification('Erro ao salvar perfil. Tente novamente.', 'error');
+        this.handleError(error)
+      } finally {
+        this.isSubmitting = false
       }
     },
     resetForm() {
-      this.loadProfile();
+      this.v$.$reset()
+      this.loadProfile()
+      this.previewPhotoUrl = this.profileData.photoUrl
     },
-    showNotification(message,_type) {
-      // Implementar sistema de notificação de sua preferência
-      alert(message);
+    handleError(error) {
+      console.error('Profile error:', error)
+      this.$toast.error(
+        error.response?.data?.message || 
+        this.$t('profile.updateError')
+      )
     }
   },
   created() {
-    this.loadProfile();
+    this.loadProfile()
   }
 }
 </script>
 
 <style scoped>
 .profile-container {
-  max-width: 1200px;
+  max-width: 800px;
   margin: 0 auto;
-  padding: 40px 20px;
-}
-
-.profile-header {
-  text-align: center;
-  margin-bottom: 40px;
-}
-
-.profile-title {
-  font-size: 2.5rem;
-  color: #2c3e50;
-  margin-bottom: 10px;
-}
-
-.profile-subtitle {
-  color: #7f8c8d;
-  font-size: 1.1rem;
-}
-
-.profile-form {
-  background: #fff;
-  border-radius: 15px;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
+  padding: 1rem;
 }
 
 .profile-grid {
   display: grid;
-  grid-template-columns: 300px 1fr;
-  gap: 30px;
+  grid-template-columns: 1fr 2fr;
+  gap: 1rem;
 }
 
-.photo-section {
-  padding: 30px;
-  background: #f8f9fa;
-  border-right: 1px solid #eee;
-}
-
-.info-section {
-  padding: 30px;
-}
-
-.photo-wrapper {
+.profile-photo-wrapper {
   position: relative;
-  width: 200px;
-  height: 200px;
-  margin: 0 auto 20px;
-  border-radius: 50%;
-  overflow: hidden;
-  cursor: pointer;
+  text-align: center;
 }
 
 .profile-photo {
-  width: 100%;
-  height: 100%;
+  width: 200px;
+  height: 200px;
   object-fit: cover;
-  transition: transform 0.3s ease;
+  border-radius: 50%;
 }
 
-.photo-overlay {
+.photo-upload-overlay {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-}
-
-.photo-text {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(0,0,0,0.5);
   color: white;
-  font-size: 0.9rem;
-  font-weight: 500;
+  padding: 0.5rem;
+  border-radius: 0 0 100px 100px;
+  cursor: pointer;
 }
 
-.photo-wrapper:hover .photo-overlay {
-  opacity: 1;
-}
-
-.photo-wrapper:hover .profile-photo {
-  transform: scale(1.1);
-}
-
-.section-title {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin: 30px 0 20px;
-  padding-bottom: 10px;
-  border-bottom: 2px solid #e1e8ed;
-}
-
-.section-title i {
-  color: #3498db;
-  font-size: 1.2rem;
-}
-
-.section-title h2 {
-  font-size: 1.2rem;
-  color: #2c3e50;
-  margin: 0;
-}
-
-.form-row {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 20px;
-  margin-bottom: 20px;
-}
-
-.form-group {
-  margin-bottom: 0;
-}
-
-.form-group label {
-  display: block;
-  margin-bottom: 8px;
-  font-weight: 500;
-  color: #34495e;
-}
-
-.form-input,
-.form-select {
-  width: 100%;
-  padding: 12px;
-  border: 2px solid #e1e8ed;
-  border-radius: 8px;
-  font-size: 14px;
-  transition: all 0.3s ease;
-}
-
-.form-input:focus,
-.form-select:focus {
-  border-color: #3498db;
-  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
-  outline: none;
-}
-
-.form-input.readonly {
-  background-color: #f8f9fa;
-  cursor: not-allowed;
-  color: #7f8c8d;
-}
-
-.photo-input {
+.hidden-file-input {
   display: none;
 }
 
-.upload-btn {
+.form-field {
+  margin-bottom: 1rem;
+}
+
+.form-field label {
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+.form-field input,
+.form-field select {
   width: 100%;
-  padding: 12px;
-  background: #3498db;
-  color: white;
-  border: none;
-  border-radius: 8px;
-  font-weight: 500;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  transition: background 0.3s ease;
+  padding: 0.5rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
 }
 
-.upload-btn:hover {
-  background: #2980b9;
+.is-invalid {
+  border-color: #dc3545;
 }
 
-.button-group {
+.validation-error {
+  color: #dc3545;
+  font-size: 0.8rem;
+  margin-top: 0.25rem;
+}
+
+.form-actions {
   display: flex;
-  gap: 15px;
   justify-content: flex-end;
-  padding: 30px;
-  background: #f8f9fa;
-  border-top: 1px solid #eee;
+  gap: 1rem;
+  margin-top: 1rem;
 }
 
-.save-btn,
-.cancel-btn {
-  padding: 12px 24px;
+.btn {
+  padding: 0.5rem 1rem;
   border: none;
-  border-radius: 8px;
-  font-weight: 500;
+  border-radius: 4px;
   cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  transition: all 0.3s ease;
 }
 
-.save-btn {
-  background: #2ecc71;
+.btn-primary {
+  background-color: #007bff;
   color: white;
 }
 
-.save-btn:hover {
-  background: #27ae60;
-  transform: translateY(-1px);
-}
-
-.cancel-btn {
-  background: #e74c3c;
+.btn-secondary {
+  background-color: #6c757d;
   color: white;
 }
 
-.cancel-btn:hover {
-  background: #c0392b;
-  transform: translateY(-1px);
-}
-
-@media (max-width: 768px) {
-  .profile-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .photo-section {
-    border-right: none;
-    border-bottom: 1px solid #eee;
-  }
-
-  .form-row {
-    grid-template-columns: 1fr;
-  }
-
-  .button-group {
-    flex-direction: column-reverse;
-  }
-
-  .save-btn,
-  .cancel-btn {
-    width: 100%;
-    justify-content: center;
-  }
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 </style>
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index b477c98..309096b 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,45 +1,54 @@
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import vueDevTools from 'vite-plugin-vue-devtools'
 import path from 'path'
 import json from '@rollup/plugin-json'
 
-// Correção para o __dirname não definido em Vite
 import { fileURLToPath } from 'url'
 import { dirname } from 'path'
 
-// Definindo __dirname manualmente
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = dirname(__filename)
 
-export default defineConfig({
-  server: {
-    host: '0.0.0.0',
-    port: 5173,
-    strictPort: true,
-    fs: {
-      strict: false,
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '')
+  
+  return {
+    server: {
+      host: '0.0.0.0',
+      port: env.VITE_PORT || 5173,
+      strictPort: true,
+      fs: {
+        strict: false,
+      },
     },
-  },
-  plugins: [
-    vue(),
-    vueJsx(),
-    vueDevTools(),
-    json(),
-  ],
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, 'src'),
+    plugins: [
+      vue(),
+      vueJsx(),
+      vueDevTools(),
+      json(),
+    ],
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, 'src'),
+      },
+      extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue'],
     },
-    extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue'],
-  },
-  optimizeDeps: {
-    include: ['vue', 'vue-router', 'vuetify', 'msw'],
-  },
-  define: {
-    'process.env': {
-      NODE_ENV: JSON.stringify(process.env.NODE_ENV),
+    optimizeDeps: {
+      include: [
+        'vue', 
+        'vue-router', 
+        'vuetify', 
+        'msw',
+        '@vuelidate/core',
+        '@vuelidate/validators'
+      ],
     },
-  },
-})
+    define: {
+      'process.env': {
+        NODE_ENV: JSON.stringify(env.NODE_ENV || 'development'),
+      },
+    },
+  }
+})
\ No newline at end of file