diff --git a/src/App.vue b/src/App.vue
index 3230074..72ef197 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -179,12 +179,6 @@ export default {
           label: 'Testes',
           badge: { text: 'Dev', color: 'warning' }
         },
-        { 
-          name: 'register-user-cam', 
-          route: { name: 'register-user-cam' }, 
-          icon: 'mdi-file-document-plus', 
-          label: 'Registro' 
-        },
         { 
           name: 'users', 
           route: { name: 'users' }, 
diff --git a/src/views/RegisterUserCamView.vue b/src/views/RegisterUserCamView.vue
deleted file mode 100644
index 0dbd1dc..0000000
--- a/src/views/RegisterUserCamView.vue
+++ /dev/null
@@ -1,294 +0,0 @@
-<template>
-  <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>
-
-        <!-- 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>
-
-      <!-- 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 {
-      cameraFormValid: false,
-      userFormValid: false,
-      cameraForm: {
-        modelName: '',
-        id: '',
-        responsible: '',
-        description: '',
-        date: '',
-        time: ''
-      },
-      userForm: {
-        profilePicture: null,
-        firstName: '',
-        lastName: '',
-        userId: '',
-        email: '',
-        phone: '',
-        group: '',
-        role: '',
-        permissions: '',
-        shift: ''
-      },
-      cameraRegistered: false,
-      userRegistered: false,
-      recentCameras: []
-    };
-  },
-  methods: {
-    handleCameraSubmit() {
-      if (this.$refs.cameraForm.validate()) {
-        this.recentCameras.unshift({ ...this.cameraForm });
-        
-        // Limit to 3 recent cameras
-        if (this.recentCameras.length > 3) {
-          this.recentCameras.pop();
-        }
-
-        this.cameraRegistered = true;
-        this.$refs.cameraForm.reset();
-      }
-    },
-    handleUserSubmit() {
-      if (this.$refs.userForm.validate()) {
-        this.userRegistered = true;
-        this.$refs.userForm.reset();
-      }
-    },
-    handleProfilePictureChange(files) {
-      if (files && files.length) {
-        const file = files[0];
-        console.log("Foto de perfil selecionada:", file.name);
-        // Additional file handling logic can be added here
-      }
-    }
-  }
-};
-</script>
-
-<style scoped>
-.v-card {
-  margin-bottom: 16px;
-}
-</style>
\ No newline at end of file
diff --git a/src/views/UsersView.vue b/src/views/UsersView.vue
index 83f2a69..96ec069 100644
--- a/src/views/UsersView.vue
+++ b/src/views/UsersView.vue
@@ -2,453 +2,653 @@
   <v-container>
     <!-- Tabs para alternar entre Usuários e Câmeras -->
     <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-tab value="usuarios">Usuarios</v-tab>
+      <v-tab value="cameras">Cameras</v-tab>
+      <v-tab value="rostos">Rostos</v-tab>
     </v-tabs>
 
     <v-window v-model="tab">
-      <!-- Aba Usuários -->
-      <v-window-item value="usuarios">
-        <v-container>
-      <!-- Aba Usuários -->
-      <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">
+      <!-- Aba de Usuários -->
+      <v-window-item value="usuarios">
+        <div class="d-flex align-center mb-4 gap-2">
+          <v-btn 
+            prepend-icon="mdi-account-plus"
+            color="primary" 
+            @click="openDialog('user', 'create')"
+          >
+            Cadastrar Usuário
+          </v-btn>
+          <v-btn 
+            prepend-icon="mdi-file-export"
+            color="secondary" 
+            @click="exportData('users')"
+          >
+            Exportar Lista
+          </v-btn>
+        </div>
+
+        <v-card>
+          <v-card-text>
+            <v-text-field
+              v-model="filters.user"
+              prepend-inner-icon="mdi-magnify"
+              label="Pesquisar Usuário"
+              single-line
+              hide-details
+              clearable
+            ></v-text-field>
+          </v-card-text>
+
+          <v-data-table
+            :headers="headers.users"
+            :items="filteredUsers"
+            :loading="loading.users"
+            :search="filters.user"
+          >
             <template v-slot:item.actions="{ item }">
-              <v-btn icon="mdi-pencil" size="small" color="info" variant="text" density="compact" @click="openUserEdit(item)">
-              </v-btn>
-              <v-btn icon="mdi-delete" size="small" color="error" variant="text" density="compact" @click="deleteUser(item)">
-              </v-btn>
+              <v-tooltip text="Editar">
+                <template v-slot:activator="{ props }">
+                  <v-btn 
+                    icon="mdi-pencil" 
+                    size="small"
+                    color="info" 
+                    v-bind="props"
+                    @click="openDialog('user', 'edit', item.raw)"
+                  ></v-btn>
+                </template>
+              </v-tooltip>
+
+              <v-tooltip text="Excluir">
+                <template v-slot:activator="{ props }">
+                  <v-btn 
+                    icon="mdi-delete" 
+                    size="small"
+                    color="error"
+                    class="ml-2"
+                    v-bind="props"
+                    @click="confirmDelete('user', item.raw)"
+                  ></v-btn>
+                </template>
+              </v-tooltip>
             </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>
-              <v-card-title>
-                <span class="text-h5">Editar Usuário</span>
-              </v-card-title>
-              <v-card-text>
-                <v-container>
-                  <v-row>
-                    <v-col cols="12">
-                      <v-text-field
-                        v-model="editedUser.name"
-                        label="Nome"
-                        required
-                      ></v-text-field>
-                    </v-col>
-                    <v-col cols="12">
-                      <v-text-field
-                        v-model="editedUser.email"
-                        label="E-mail"
-                        required
-                      ></v-text-field>
-                    </v-col>
-                    <v-col cols="12">
-                      <v-select
-                        v-model="editedUser.role"
-                        :items="['Administrador', 'Usuário']"
-                        label="Cargo"
-                        required
-                      ></v-select>
-                    </v-col>
-                    <v-col cols="12">
-                      <v-select
-                        v-model="editedUser.group"
-                        :items="['Alfa', 'Beta', 'Omega']"
-                        label="Grupo"
-                        required
-                      ></v-select>
-                    </v-col>
-                  </v-row>
-                </v-container>
-              </v-card-text>
-              <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn color="blue-darken-1" variant="text" @click="closeUserEdit">
-                  Cancelar
-                </v-btn>
-                <v-btn color="blue-darken-1" variant="text" @click="saveUserEdit">
-                  Salvar
-                </v-btn>
-              </v-card-actions>
-            </v-card>
-          </v-dialog>
-        </v-container>
+        </v-card>
       </v-window-item>
 
-      <!-- Aba Câmeras -->
+      <!-- Aba de Câmeras -->
       <v-window-item value="cameras">
-        <v-container>
-          <v-text-field v-model="searchCamera" label="Buscar câmera" prepend-inner-icon="mdi-magnify"></v-text-field>
-          <v-btn color="primary" class="mb-3" @click="exportCamerasPDF">Exportar PDF</v-btn>
+        <div class="d-flex align-center mb-4 gap-2">
+          <v-btn 
+            prepend-icon="mdi-camera-plus"
+            color="primary" 
+            @click="openDialog('camera', 'create')"
+          >
+            Cadastrar Câmera
+          </v-btn>
+          <v-btn 
+            prepend-icon="mdi-file-export"
+            color="secondary" 
+            @click="exportData('cameras')"
+          >
+            Exportar Lista
+          </v-btn>
+        </div>
 
-          <v-data-table :headers="cameraHeaders" :items="filteredCameras" item-value="model">
-            <template v-slot:item.view="{ item }">
+        <v-card>
+          <v-card-text>
+            <v-text-field
+              v-model="filters.camera"
+              prepend-inner-icon="mdi-magnify"
+              label="Pesquisar Câmera"
+              single-line
+              hide-details
+              clearable
+            ></v-text-field>
+          </v-card-text>
+
+          <v-data-table
+            :headers="headers.cameras"
+            :items="filteredCameras"
+            :loading="loading.cameras"
+            :search="filters.camera"
+          >
+            <template v-slot:item.status="{ item }">
               <v-chip
-                :color="getStreamTypeColor(item.view)"
+                :color="getStatusColor(item.raw.status)"
+                :text="item.raw.status"
                 size="small"
-                class="text-caption"
-              >
-                {{ getStreamType(item.view) }}
-              </v-chip>
-              <v-btn icon="mdi-video" size="small" color="primary" variant="text" density="compact" @click="openCameraView(item)" class="ml-2">
-              </v-btn>
+              ></v-chip>
             </template>
+
             <template v-slot:item.actions="{ item }">
-              <v-btn icon="mdi-pencil" size="small" color="info" variant="text" density="compact" @click="editCamera(item)">
-              </v-btn>
-              <v-btn icon="mdi-delete" size="small" color="error" variant="text" density="compact" @click="deleteCamera(item)">
-              </v-btn>
+              <v-tooltip text="Editar">
+                <template v-slot:activator="{ props }">
+                  <v-btn 
+                    icon="mdi-pencil" 
+                    size="small"
+                    color="info"
+                    v-bind="props"
+                    @click="openDialog('camera', 'edit', item.raw)"
+                  ></v-btn>
+                </template>
+              </v-tooltip>
+
+              <v-tooltip text="Excluir">
+                <template v-slot:activator="{ props }">
+                  <v-btn 
+                    icon="mdi-delete" 
+                    size="small"
+                    color="error"
+                    class="ml-2"
+                    v-bind="props"
+                    @click="confirmDelete('camera', item.raw)"
+                  ></v-btn>
+                </template>
+              </v-tooltip>
             </template>
           </v-data-table>
-
-          <!-- Diálogo de Edição de Câmera -->
-          <v-dialog v-model="showCameraEdit" max-width="600px">
-            <v-card>
-              <v-card-title>
-                <span class="text-h5">Editar Câmera</span>
-              </v-card-title>
-              <v-card-text>
-                <v-form ref="form" v-model="validForm">
-                  <v-text-field
-                    v-model="editedCamera.model"
-                    label="Modelo"
-                    required
-                    :rules="[v => !!v || 'Modelo é obrigatório']"
-                    class="mb-4"
-                  ></v-text-field>
-                  
-                  <v-text-field
-                    v-model="editedCamera.description"
-                    label="Descrição"
-                    required
-                    :rules="[v => !!v || 'Descrição é obrigatória']"
-                    class="mb-4"
-                  ></v-text-field>
-                  
-                  <v-text-field
-                    v-model="editedCamera.view"
-                    label="URL do Stream"
-                    required
-                    :rules="[
-                      v => !!v || 'URL é obrigatória',
-                      v => isValidStreamUrl(v) || 'URL deve começar com http:// ou rtsp://'
-                    ]"
-                    class="mb-4"
-                  ></v-text-field>
-                  
-                  <v-select
-                    v-model="editedCamera.status"
-                    :items="['Ativa', 'Inativa', 'Manutenção']"
-                    label="Status"
-                    required
-                    :rules="[v => !!v || 'Status é obrigatório']"
-                    class="mb-4"
-                  ></v-select>
-                </v-form>
-              </v-card-text>
-              <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn color="error" variant="text" @click="closeCameraEdit">
-                  Cancelar
-                </v-btn>
-                <v-btn color="success" variant="text" @click="saveCameraEdit">
-                  Salvar
-                </v-btn>
-              </v-card-actions>
-            </v-card>
-          </v-dialog>
-
-          <!-- Diálogo de Visualização de Câmera -->
-          <v-dialog v-model="showCameraView" fullscreen hide-overlay>
-            <v-card>
-              <v-toolbar dark color="primary">
-                <v-btn icon dark @click="closeCameraView">
-                  <v-icon>mdi-close</v-icon>
-                </v-btn>
-                <v-toolbar-title>Visualização da Câmera</v-toolbar-title>
-              </v-toolbar>
-              <v-card-text>
-                <div class="camera-container">
-                  <div v-if="isRTSP" class="video-player">
-                    <v-alert
-                      type="info"
-                      title="Stream RTSP"
-                      text="Conectando ao stream RTSP. Por favor, aguarde..."
-                      class="mb-4"
-                    ></v-alert>
-                    <video-js
-                      ref="videoPlayer"
-                      class="vjs-custom-skin"
-                      controls
-                      preload="auto"
-                      width="100%"
-                      height="100%"
-                    >
-                      <source :src="rtspToHls(selectedCameraUrl)" type="application/x-mpegURL">
-                    </video-js>
-                  </div>
-                  <div v-else-if="isHTTP" class="video-player">
-                    <video-js
-                      ref="videoPlayer"
-                      class="vjs-custom-skin"
-                      controls
-                      preload="auto"
-                      width="100%"
-                      height="100%"
-                    >
-                      <source :src="selectedCameraUrl" :type="getVideoType(selectedCameraUrl)">
-                    </video-js>
-                  </div>
-                  <div v-else class="error-message">
-                    <v-alert
-                      type="error"
-                      title="Erro"
-                      text="Formato de URL não suportado. Use URLs que comecem com http:// ou rtsp://"
-                    ></v-alert>
-                  </div>
-                </div>
-              </v-card-text>
-            </v-card>
-          </v-dialog>
-        </v-container>
+        </v-card>
       </v-window-item>
     </v-window>
+
+    <!-- Diálogo de Usuário (Novo/Edição) -->
+    <v-dialog v-model="dialogs.user" max-width="600px">
+      <v-card>
+        <v-card-title class="text-h5 bg-primary text-white">
+          {{ isEditing ? 'Editar' : 'Novo' }} Usuário
+        </v-card-title>
+
+        <v-card-text class="pt-4">
+          <v-form ref="userForm" v-model="forms.userValid" @submit.prevent="submitForm('user')">
+            <v-row>
+              <v-col cols="12" sm="6">
+                <v-text-field
+                  v-model="forms.user.nome"
+                  label="Nome"
+                  :rules="rules.required"
+                  required
+                ></v-text-field>
+              </v-col>
+
+              <v-col cols="12" sm="6">
+                <v-text-field
+                  v-model="forms.user.sobrenome"
+                  label="Sobrenome"
+                  :rules="rules.required"
+                  required
+                ></v-text-field>
+              </v-col>
+
+              <v-col cols="12" sm="6">
+                <v-text-field
+                  v-model="forms.user.email"
+                  label="Email"
+                  :rules="[...rules.required, rules.email]"
+                  required
+                ></v-text-field>
+              </v-col>
+
+              <v-col cols="12" sm="6">
+                <v-select
+                  v-model="forms.user.grupo"
+                  :items="['alfa', 'beta', 'gamma']"
+                  label="Grupo"
+                  :rules="rules.required"
+                  required
+                ></v-select>
+              </v-col>
+
+              <v-col cols="12">
+                <v-select
+                  v-model="forms.user.permissao"
+                  :items="['administrador', 'supervisor', 'visualizador']"
+                  label="Permissão"
+                  :rules="rules.required"
+                  required
+                ></v-select>
+              </v-col>
+            </v-row>
+          </v-form>
+        </v-card-text>
+
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="grey" @click="closeDialog('user')">Cancelar</v-btn>
+          <v-btn 
+            color="primary" 
+            :loading="loading.submit"
+            :disabled="!forms.userValid"
+            @click="submitForm('user')"
+          >
+            Salvar
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <!-- Diálogo de Câmera (Nova/Edição) -->
+    <v-dialog v-model="dialogs.camera" max-width="600px">
+      <v-card>
+        <v-card-title class="text-h5 bg-primary text-white">
+          {{ isEditing ? 'Editar' : 'Nova' }} Câmera
+        </v-card-title>
+
+        <v-card-text class="pt-4">
+          <v-form ref="cameraForm" v-model="forms.cameraValid" @submit.prevent="submitForm('camera')">
+            <v-row>
+              <v-col cols="12" sm="6">
+                <v-text-field
+                  v-model="forms.camera.modelo"
+                  label="Modelo"
+                  :rules="rules.required"
+                  required
+                ></v-text-field>
+              </v-col>
+
+              <v-col cols="12" sm="6">
+                <v-text-field
+                  v-model="forms.camera.descricao"
+                  label="Descrição"
+                  :rules="rules.required"
+                  required
+                ></v-text-field>
+              </v-col>
+
+              <v-col cols="12" sm="6">
+                <v-select
+                  v-model="forms.camera.tipo"
+                  :items="['HTTP', 'RTSP']"
+                  label="Tipo"
+                  :rules="rules.required"
+                  required
+                ></v-select>
+              </v-col>
+
+              <v-col cols="12" sm="6">
+                <v-select
+                  v-model="forms.camera.status"
+                  :items="['Ativo', 'Inativo', 'Em Manutenção']"
+                  label="Status"
+                  :rules="rules.required"
+                  required
+                ></v-select>
+              </v-col>
+
+              <v-col cols="12">
+                <v-select
+                  v-model="forms.camera.info"
+                  :items="['Treinado', 'Integrado', 'Testado']"
+                  label="Info"
+                  :rules="rules.required"
+                  required
+                ></v-select>
+              </v-col>
+            </v-row>
+          </v-form>
+        </v-card-text>
+
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="grey" @click="closeDialog('camera')">Cancelar</v-btn>
+          <v-btn 
+            color="primary" 
+            :loading="loading.submit"
+            :disabled="!forms.cameraValid"
+            @click="submitForm('camera')"
+          >
+            Salvar
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <!-- Diálogo de Confirmação de Exclusão -->
+    <v-dialog v-model="dialogs.delete" max-width="400px">
+      <v-card>
+        <v-card-title class="text-h5 bg-error text-white">
+          Confirmar Exclusão
+        </v-card-title>
+
+        <v-card-text class="pt-4">
+          Tem certeza que deseja excluir este item? Esta ação não pode ser desfeita.
+        </v-card-text>
+
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="grey" @click="dialogs.delete = false">Cancelar</v-btn>
+          <v-btn 
+            color="error" 
+            :loading="loading.delete"
+            @click="deleteItem"
+          >
+            Excluir
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <!-- Snackbar para Feedback -->
+    <v-snackbar
+      v-model="snackbar.show"
+      :color="snackbar.color"
+      :timeout="3000"
+    >
+      {{ snackbar.text }}
+      <template v-slot:actions>
+        <v-btn
+          color="white"
+          variant="text"
+          @click="snackbar.show = false"
+        >
+          Fechar
+        </v-btn>
+      </template>
+    </v-snackbar>
   </v-container>
 </template>
 
-<script setup>
-import { ref, computed, onMounted } from "vue";
-import { jsPDF } from "jspdf";
-import "jspdf-autotable";
-import VideoPlayer from 'vue-video-player';
-import 'video.js/dist/video-js.css';
+<script>
+import { ref, computed, onMounted } from 'vue';
+import { useTheme } from 'vuetify';
 
-// Estado dos tabs
-const tab = ref("usuarios");
+export default {
+  name: 'AdminDashboard',
+  
+  setup() {
+    const theme = useTheme();
 
-// Estado dos diálogos
-const showUserEdit = ref(false);
-const showCameraView = ref(false);
-const editedUser = ref({});
-const selectedCameraUrl = ref('');
+    // Estados
+    const activeTab = ref('usuarios');
+    const isEditing = ref(false);
+    const itemToDelete = ref(null);
 
-// **Usuários**
-const userHeaders = [
-  { title: "ID", key: "id" },
-  { title: "Nome", key: "name" },
-  { 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 }
-];
+    // Loading states
+    const loading = ref({
+      users: false,
+      cameras: false,
+      submit: false,
+      delete: false
+    });
 
-const users = ref([
-  { id: 1, name: "Alice", email: "alice@email.com", role: "Gerente", group: "Alfa", permisson: 'Administrador' },
-  { id: 2, name: "Bob", email: "bob@email.com", role: "Funcionário", group: "Omega", permisson: 'Editor' },
-  { id: 3, name: "Lucca", email: "lucca@email.com", role: "Funcionário", group: "Omega", permisson: 'Editor' },
-  { id: 4, name: "Claudia", email: "claudia@email.com", role: "Estagário", group: "Beta", permisson: 'Vizualizador' }
-]);
+    // Diálogos
+    const dialogs = ref({
+      user: false,
+      camera: false,
+      delete: false
+    });
 
-const searchUser = ref("");
-const filteredUsers = computed(() =>
-  users.value.filter(user =>
-    Object.values(user).some(value =>
-      String(value).toLowerCase().includes(searchUser.value.toLowerCase())
-    )
-  )
-);
+    // Filtros
+    const filters = ref({
+      user: '',
+      camera: ''
+    });
 
-// **Câmeras**
-const cameraHeaders = [
-  { title: "Modelo", key: "model" },
-  { title: "Descrição", key: "description" },
-  { title: "Visualização", key: "view" },
-  { title: "Status", key: "status" },
-  { title: "Ações", key: "actions", sortable: false }
-];
+    // Dados
+    const users = ref([
+      { 
+        id: 1, 
+        nome: "João", 
+        sobrenome: "Silva", 
+        email: "joao@email.com", 
+        grupo: "alfa", 
+        permissao: "administrador",
+        created_at: "2024-02-19T10:00:00"
+      },
+      { 
+        id: 2, 
+        nome: "Maria", 
+        sobrenome: "Santos", 
+        email: "maria@email.com", 
+        grupo: "beta", 
+        permissao: "visualizador",
+        created_at: "2024-02-19T11:30:00"
+      }
+    ]);
 
-const cameras = ref([
-  { model: "AXIS Q6128", description: "Câmera HD", view: "https://stream-akamai.castr.com/5b9352dbda7b8c769937e459/live_2361c920455111ea85db6911fe397b9e/index.fmp4.m3u8", status: "Ativa" },
-  { model: "Hikvision DS-2CD", description: "Câmera IP", view: "rtsp://admin:706726do@farmacia1111.ddns-intelbras.com.br:58589/cam/realmonitor?channel=1&subtype=0", status: "Ativa" },
-  { model: "AK-31548", description: "Câmera IP", view: "rtsp://admin:706726do@farmacia1111.ddns-intelbras.com.br:58589/cam/realmonitor?channel=3&subtype=0", status: "Ativa" }
-]);
+    const cameras = ref([
+      { 
+        id: 101, 
+        modelo: "Câmera 1", 
+        descricao: "Descrição da Câmera 1", 
+        tipo: "RTSP", 
+        status: "Ativo", 
+        info: "testado",
+        created_at: "2024-02-19T09:00"
+      },
+      { 
+        id: 102, 
+        modelo: "Câmera 2", 
+        descricao: "Descrição da Câmera 2", 
+        tipo: "HTTP", 
+        status: "Inativo", 
+        info: "integrado",
+        created_at: "2024-02-19T14:15"
+      }
+    ]);
 
-// Funções auxiliares para identificação do tipo de stream
-const getStreamType = (url) => {
-  if (url.toLowerCase().startsWith('rtsp://')) return 'RTSP';
-  if (url.toLowerCase().startsWith('http')) return 'HTTP';
-  return 'Desconhecido';
+    // Formulários
+    const forms = ref({
+      userValid: false,
+      cameraValid: false,
+      user: {
+        nome: '',
+        sobrenome: '',
+        email: '',
+        grupo: '',
+        permissao: ''
+      },
+      camera: {
+        modelo: '',
+        descricao: '',
+        tipo: '',
+        status: '',
+        info: ''
+      }
+    });
+
+    // Headers para as tabelas
+    const headers = ref({
+      users: [
+        { title: 'Nome', key: 'nome' },
+        { title: 'Sobrenome', key: 'sobrenome' },
+        { title: 'Email', key: 'email' },
+        { title: 'Grupo', key: 'grupo' },
+        { title: 'Permissão', key: 'permissao' },
+        { title: 'Data Cadastro', key: 'created_at' },
+        { title: 'Ações', key: 'actions', sortable: false }
+      ],
+      cameras: [
+        { title: 'Modelo', key: 'modelo' },
+        { title: 'Descrição', key: 'descricao' },
+        { title: 'Tipo', key: 'tipo' },
+        { title: 'Status', key: 'status' },
+        { title: 'Info', key: 'info' },
+        { title: 'Data Cadastro', key: 'created_at' },
+        { title: 'Ações', key: 'actions', sortable: false }
+      ]
+    });
+
+    // Regras de validação
+    const rules = {
+      required: [v => !!v || 'Campo obrigatório'],
+      email: v => /.+@.+\..+/.test(v) || 'E-mail inválido'
+    };
+
+    // Snackbar
+    const snackbar = ref({
+      show: false,
+      text: '',
+      color: 'success'
+    });
+
+    // Computed properties
+    const filteredUsers = computed(() => {
+      return users.value.map(user => ({
+        ...user,
+        created_at: new Date(user.created_at).toLocaleString()
+      }));
+    });
+
+    const filteredCameras = computed(() => {
+      return cameras.value.map(camera => ({
+        ...camera,
+        created_at: new Date(camera.created_at).toLocaleString()
+      }));
+    });
+
+    // Métodos
+    const openDialog = (type, action, item = null) => {
+      isEditing.value = action === 'edit';
+      if (item) {
+        forms.value[type] = { ...item };
+      } else {
+        // Reset form
+        Object.keys(forms.value[type]).forEach(key => {
+          forms.value[type][key] = '';
+        });
+      }
+      dialogs.value[type] = true;
+    };
+
+    const closeDialog = (type) => {
+      dialogs.value[type] = false;
+      forms.value[type + 'Valid'] = false;
+    };
+
+    const confirmDelete = (type, item) => {
+      itemToDelete.value = { type, item };
+      dialogs.value.delete = true;
+    };
+
+    const getStatusColor = (status) => {
+      const colors = {
+        'Ativo': 'success',
+        'Inativo': 'error',
+        'Em Manutenção': 'warning'
+      };
+      return colors[status] || 'grey';
+    };
+
+    const showNotification = (text, color = 'success') => {
+      snackbar.value = {
+        show: true,
+        text,
+        color
+      };
+    };
+
+    const submitForm = async (type) => {
+      loading.value.submit = true;
+      try {
+        const formData = forms.value[type];
+        if (isEditing.value) {
+          // Atualizar item existente
+          const items = type === 'user' ? users : cameras;
+          const index = items.value.findIndex(item => item.id === formData.id);
+          if (index !== -1) {
+            items.value[index] = { ...items.value[index], ...formData };
+          }
+        } else {
+          // Criar novo item
+          const newItem = {
+            ...formData,
+            id: Date.now(),
+            created_at: new Date().toISOString()
+          };
+          if (type === 'user') {
+            users.value.push(newItem);
+          } else {
+            cameras.value.push(newItem);
+          }
+        }
+        showNotification(`${type === 'user' ? 'Usuário' : 'Câmera'} ${isEditing.value ? 'atualizado' : 'cadastrado'} com sucesso!`);
+        closeDialog(type);
+      } catch (error) {
+        showNotification('Erro ao salvar os dados', 'error');
+        console.error('Error submitting form:', error);
+      } finally {
+        loading.value.submit = false;
+      }
+    };
+
+    const deleteItem = async () => {
+      if (!itemToDelete.value) return;
+
+      loading.value.delete = true;
+      try {
+        const { type, item } = itemToDelete.value;
+        const items = type === 'user' ? users : cameras;
+        const index = items.value.findIndex(i => i.id === item.id);
+        if (index !== -1) {
+          items.value.splice(index, 1);
+        }
+        showNotification(`${type === 'user' ? 'Usuário' : 'Câmera'} excluído com sucesso!`);
+        dialogs.value.delete = false;
+      } catch (error) {
+        showNotification('Erro ao excluir o item', 'error');
+        console.error('Error deleting item:', error);
+      } finally {
+        loading.value.delete = false;
+        itemToDelete.value = null;
+      }
+    };
+
+    const exportData = (type) => {
+      const items = type === 'users' ? users.value : cameras.value;
+      const fileName = `${type}_${new Date().toISOString().split('T')[0]}.csv`;
+      
+      // Convert items to CSV
+      const headers = Object.keys(items[0]).join(',');
+      const rows = items.map(item => Object.values(item).join(','));
+      const csv = [headers, ...rows].join('\n');
+      
+      // Create and download file
+      const blob = new Blob([csv], { type: 'text/csv' });
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = fileName;
+      a.click();
+      window.URL.revokeObjectURL(url);
+    };
+
+    // Lifecycle hooks
+    onMounted(() => {
+      // Aqui você pode adicionar chamadas de API para carregar dados iniciais
+      console.log('Dashboard mounted');
+    });
+
+    return {
+      // States
+      activeTab,
+      isEditing,
+      loading,
+      dialogs,
+      filters,
+      users,
+      cameras,
+      forms,
+      headers,
+      rules,
+      snackbar,
+      
+      // Computed
+      filteredUsers,
+      filteredCameras,
+      
+      // Methods
+      openDialog,
+      closeDialog,
+      confirmDelete,
+      getStatusColor,
+      submitForm,
+      deleteItem,
+      exportData
+    };
+  }
 };
-
-const getStreamTypeColor = (url) => {
-  if (url.toLowerCase().startsWith('rtsp://')) return 'purple';
-  if (url.toLowerCase().startsWith('http')) return 'blue';
-  return 'gray';
-};
-
-const searchCamera = ref("");
-const filteredCameras = computed(() =>
-  cameras.value.filter(camera =>
-    Object.values(camera).some(value =>
-      String(value).toLowerCase().includes(searchCamera.value.toLowerCase())
-    )
-  )
-);
-
-// Computed properties para o player de vídeo
-const isRTSP = computed(() => selectedCameraUrl.value.toLowerCase().startsWith('rtsp://'));
-const isHTTP = computed(() => selectedCameraUrl.value.toLowerCase().startsWith('http'));
-
-const playerOptions = computed(() => ({
-  autoplay: true,
-  controls: true,
-  sources: [{
-    src: selectedCameraUrl.value,
-    type: 'application/x-mpegURL'
-  }]
-}));
-
-// [Resto do código permanece o mesmo...]
-
 </script>
-
 <style scoped>
 .camera-container {
   width: 100%;