From e0592c916cf84e73414505d3b5c1fd95bd8e4c9d Mon Sep 17 00:00:00 2001
From: ka-lucas <katarinelucas1@gmail.com>
Date: Tue, 6 May 2025 17:11:06 -0300
Subject: [PATCH] =?UTF-8?q?aba=20de=20configura=C3=A7=C3=B5es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Settings.vue | 791 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 781 insertions(+), 10 deletions(-)

diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index cdd5c6c..031aec0 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -1,10 +1,781 @@
-<template>
-    <v-container>
-      <h1>Settings</h1>
-      <p>Configurações do usuário.</p>
-    </v-container>
-  </template>
-  
-  <script setup>
-  </script>
-  
\ No newline at end of file
+<template>    
+    <v-container class="tab">
+      <div class="header-container">
+        <div class="header-left">
+          <div class="icon-wrapper">
+            <v-icon color="primary" size="32">mdi-clock-outline</v-icon>
+          </div>
+          <div class="header-title">
+            <h1>Sistema de Ponto | Admin</h1>
+          </div>
+        </div>
+        <div class="header-right">
+          <v-btn variant="text" prepend-icon="mdi-arrow-left" class="back-button" to="/dashboard">
+            Voltar para Dashboard
+          </v-btn>
+          <v-badge dot color="error" class="notification-badge">
+            <v-icon>mdi-bell</v-icon>
+          </v-badge>
+          <div class="admin-profile">
+            <v-avatar class="mr-2" color="primary" size="40">
+              <v-img src="/api/placeholder/40/40" alt="Administrador"></v-img>
+            </v-avatar>
+            <div class="admin-info">
+              <span class="admin-name">Administrador</span>
+              <span class="admin-role">Gestor</span>
+            </div>
+            <v-icon>mdi-chevron-down</v-icon>
+          </div>
+        </div>
+      </div>
+      <!-- Título e descrição da seção -->
+      <div class="section-header">
+        <h2>Configurações do Sistema</h2>
+        <p class="section-description">Defina os parâmetros de funcionamento do sistema de ponto</p>
+      </div>
+
+    <!-- Abas -->
+    <v-tabs v-model="selectedTab" class="custom-tabs" align-tabs="start">
+      <v-tab
+        v-for="tab in tabs"
+        :key="tab.value"
+        :value="tab.value"
+        :class="selectedTab === tab.value ? 'active-tab' : ''"
+      >
+        {{ tab.label }}
+      </v-tab>
+    </v-tabs>
+
+    <v-window v-model="selectedTab">
+      <!-- Aba: Geral -->
+      <v-window-item value="geral">
+        <v-card class="pa-6">
+          <h3 class="section-title">Configurações Gerais</h3>
+          <p class="section-description">Configure os parametros gerais de funcionamento do sistema de ponto</p>
+          
+          <v-row class="mb-6">
+            
+            <v-col cols="12" md="6">
+              <div class="mb-3 font-weight-medium">Tolerância para Entrada (minutos)</div>
+              <v-text-field 
+              v-model="form.tolerancia_entrada"
+              type="number"
+              variant="outlined"
+              class="mb-4"
+              hide-details />
+            </v-col>
+            
+            <v-col cols="12" md="6">
+              <div class="mb-3 font-weight-medium">Tolerância para Saída(minutos)</div>
+              <v-text-field 
+              v-model="form.tolerancia_saida"
+              type="number"
+              variant="outlined"
+              class="mb-4"
+              hide-details
+              />
+            </v-col>
+            
+            <v-col cols="12" md="6">
+              <div class="mb-3 font-weight-medium">Limite Diário de Horas Extras</div>
+              <v-text-field 
+                v-model="form.limite_diario_he" 
+                type="number"
+                variant="outlined"
+                class="mb-4"
+                hide-details
+               />
+            </v-col>
+            <v-col cols="12" md="6">
+              <div class="mb-3 font-weight-medium">Limite Mensal de Horas Extras</div>
+              <v-text-field  
+              v-model="form.limite_mensal_he" 
+              type="number"
+              variant="outlined"
+              class="mb-4"
+              hide-details/>
+            </v-col>
+
+            <v-col cols="12" md="6">
+              <div class="mb-3 font-weight-medium">Limite Banco de Horas Positivo</div>
+              
+              <v-text-field
+              v-model="form.banco_horas_positivo"
+              type="number"
+              variant="outlined"
+              class="mb-4"
+              hide-details />
+            </v-col>
+
+            <v-col cols="12" md="6">
+              <div class="mb-3 font-weight-medium">Limite Banco de Horas Negativo</div>
+              
+              <v-text-field 
+              v-model="form.banco_horas_negativo"
+              type="number"
+              variant="outlined"
+              class="mb-4"
+              hide-details
+               />
+            </v-col>
+
+            <v-col cols="12" md="6">
+              <v-row class="align-center justify-space-between">
+                <v-col cols="auto">
+                  <span class="font-weight-medium">Validação Facial Obrigatória</span>
+                </v-col>
+                <v-col cols="auto">
+                  <v-switch 
+                    v-model="form.validacao_facial"
+                    color="#2563eb"
+                    hide-details
+                    inset
+                  />
+                </v-col>
+              </v-row>
+            </v-col>
+            <v-col cols="12" md="6">
+              <v-row class="align-center justify-space-between">
+                <v-col cols="auto">
+                  <span class="font-weight-medium">Permitir Registro Remoto</span>
+                </v-col>
+                <v-col cols="auto">
+                  <v-switch 
+                    v-model="form.registro_remoto"
+                    color="#2563eb"
+                    hide-details
+                    inset
+                  />
+                </v-col>
+              </v-row>
+            </v-col>
+
+            <v-col cols="12" md="6">
+              <v-row class="align-center justify-space-between">
+                <v-col cols="auto">
+                  <span class="font-weight-medium">Permitir Ajuste pelo Colaborador</span>
+                </v-col>
+                <v-col cols="auto">
+                  <v-switch 
+                    v-model="form.ajuste_colaborador"
+                    color="#2563eb"
+                    hide-details
+                    inset
+                  />
+                </v-col>
+              </v-row>
+            </v-col>
+
+
+            <v-col cols="12" md="6">
+              <div class="mb-3 font-weight-medium">Dias para Aprovação Automática</div>
+            
+              <v-text-field 
+              v-model="form.dias_aprovacao" 
+              type="number"
+              variant="outlined"
+              class="mb-4"
+              hide-details/>
+              <small > Dias após os quais as soliticações são aprovadas automaticamente (0=nunca)</small>
+              
+            </v-col>
+          </v-row>
+
+          
+        </v-card>
+        <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn color="primary" @click="salvarConfiguracoes" class="add-btn">Salvar Configurações</v-btn>
+        </v-card-actions>
+      </v-window-item>
+
+
+      <!-- Outras abas virão depois -->
+    </v-window>
+    
+    <v-window v-model="selectedTab">
+      <v-window-item value="calculo">
+        <v-card class="pa-6">
+          <h3 class="section-title">Configurações de Cálculo de Horas</h3>
+          <p class="section-description">Configure os parametros para cálculo de horas trabalhados, extras e noturnoas</p>
+          
+          <v-row class="mb-6">
+            
+            <v-col cols="12" md="6">
+              <div class="mb-3 font-weight-medium">Jornada Diária (horas)</div>
+              <v-text-field 
+              v-model="form.jornada_diaria"
+              type="number"
+              variant="outlined"
+              class="mb-4"
+              hide-details />
+            </v-col>
+            
+            <v-col cols="12" md="6">
+              <div class="mb-3 font-weight-medium">Jornada Semanal (horas)</div>
+              <v-text-field 
+              v-model="form.jornada_semanal"
+              type="number"
+              variant="outlined"
+              class="mb-4"
+              hide-details
+              />
+            </v-col>
+            
+            <v-col cols="12" md="6">
+              <div class="mb-3 font-weight-medium">Início Período Noturno</div>
+              <v-text-field
+                v-model="form.periodo_noturno_inicio"
+                type="time"
+                variant="outlined"
+                class="mb-4"
+                hide-details
+            ></v-text-field>
+            </v-col>
+            <v-col cols="12" md="6">
+              <div class="mb-3 font-weight-medium">Fim do Período Noturno</div>
+                <v-text-field
+                  v-model="form.periodo_noturno_inicio"
+                  type="time"
+                  variant="outlined"
+                  class="mb-4"
+                  hide-details
+              ></v-text-field>
+            </v-col>
+            <v-col cols="12" md="6">
+              <v-row class="align-center justify-space-between">
+                <v-col cols="auto">
+                  <span class="font-weight-medium">Aplicar Redução de Hora Noturna</span>
+                </v-col>
+                <v-col cols="auto">
+                  <v-switch 
+                    v-model="form.hora_noturna"
+                    color="#2563eb"
+                    hide-details
+                    inset
+                  />
+                </v-col>
+              </v-row>
+            </v-col>
+            <v-col cols="12" md="6">
+              <div class="mb-3 font-weight-medium">Adicional Noturno (%)</div>
+                <v-text-field
+                  v-model="form.adicional_noturno"
+                  type="number"
+                  variant="outlined"
+                  class="mb-4"
+                  hide-details
+              ></v-text-field>
+            </v-col>
+            <v-col cols="12" md="6">
+              <div class="mb-3 font-weight-medium">Adicional Hora Extra Normal (%)</div>
+                <v-text-field
+                  v-model="form.adicional_hora_normal"
+                  type="number"
+                  variant="outlined"
+                  class="mb-4"
+                  hide-details
+              ></v-text-field>
+            </v-col>
+
+            <v-col cols="12" md="6">
+              <div class="mb-3 font-weight-medium">Adicional Hora Extra Feriado (%)</div>
+                <v-text-field
+                  v-model="form.hora_extra_feriado"
+                  type="number"
+                  variant="outlined"
+                  class="mb-4"
+                  hide-details
+              ></v-text-field>
+            </v-col>
+
+            <v-col cols="12" md="6">
+              <v-row class="align-center justify-space-between">
+                <v-col cols="auto">
+                  <span class="font-weight-medium">Descontar Atrasos Automaticamente</span>
+                </v-col>
+                <v-col cols="auto">
+                  <v-switch 
+                    v-model="form.descontar_atrasos"
+                    color="#2563eb"
+                    hide-details
+                    inset
+                  />
+                </v-col>
+              </v-row>
+            </v-col>
+
+            <v-col cols="12" md="6">
+              <div class="mb-3 font-weight-medium">Tolerância para Descontos (minutos)</div>
+              
+              <v-text-field
+              v-model="form.tolerancia_desconto"
+              type="number"
+              variant="outlined"
+              class="mb-4"
+              hide-details />
+            </v-col>
+
+            <v-col cols="12" md="12">
+              <div class="mb-3 font-weight-medium">Arredondamento de Minutos</div>
+              
+              <v-text-field 
+              v-model="form.arredondamento_registro"
+              type="number"
+              variant="outlined"
+              class="mb-4"
+              hide-details
+                />
+                <small>Arredondamento aplicado aos registros de ponto</small>
+            </v-col>
+          </v-row>
+
+          
+        </v-card>
+        <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn color="primary" @click="salvarConfiguracoes" class="add-btn">Salvar Configurações</v-btn>
+        </v-card-actions>
+      </v-window-item>
+    </v-window>
+
+    <v-window v-model="selectedTab">
+      <v-window-item value="notificacoes">
+        <v-card class="pa-6">
+          <h3 class="section-title">Configurações Notificações</h3>
+          <p class="section-description">Configure as notificações do sistema para colaboradores e gestores</p>
+          
+          <v-row class="mb-6">
+            
+            <v-col cols="12">
+              <v-row class="align-center justify-space-between">
+                <v-col cols="auto">
+                  <span class="font-weight-medium">Notificar Esquecimento de Ponto</span>
+                </v-col>
+                <v-col cols="auto">
+                  <v-switch 
+                    v-model="form.esquecimento_ponto_notificacao"
+                    color="#2563eb"
+                    hide-details
+                    inset
+                  />
+                </v-col>
+              </v-row>
+            </v-col>
+            <v-col cols="12">
+              <v-row class="align-center justify-space-between">
+                <v-col cols="auto">
+                  <span class="font-weight-medium">Notificar Horas Extras</span>
+                </v-col>
+                <v-col cols="auto">
+                  <v-switch 
+                    v-model="form.horas_extras_notificacao"
+                    color="#2563eb"
+                    hide-details
+                    inset
+                  />
+                </v-col>
+              </v-row>
+            </v-col>
+
+            <v-col cols="12">
+              <v-row class="align-center justify-space-between">
+                <v-col cols="auto">
+                  <span class="font-weight-medium">Notificar Solicitações Pendentes</span>
+                </v-col>
+                <v-col cols="auto">
+                  <v-switch 
+                    v-model="form.solictacao_pendente_notificacao"
+                    color="#2563eb"
+                    hide-details
+                    inset
+                  />
+                </v-col>
+              </v-row>
+            </v-col>
+       
+            <v-col cols="12">
+              <v-row class="align-center justify-space-between">
+                <v-col cols="auto">
+                  <span class="font-weight-medium">Notificar Banco de Horas</span>
+                </v-col>
+                <v-col cols="auto">
+                  <v-switch 
+                    v-model="form.banco_horas_notificacao"
+                    color="#2563eb"
+                    hide-details
+                    inset
+                  />
+                </v-col>
+              </v-row>
+            </v-col>
+
+            <v-col cols="12">
+              <v-row class="align-center justify-space-between">
+                <v-col cols="auto">
+                  <span class="font-weight-medium">Notificar Gestor sobre Ajustes</span>
+                </v-col>
+                <v-col cols="auto">
+                  <v-switch 
+                    v-model="form.banco_horas_notificacao"
+                    color="#2563eb"
+                    hide-details
+                    inset
+                  />
+                </v-col>
+              </v-row>
+            </v-col>
+          </v-row>
+          <v-divider class="my-4 mx-auto custom-divider"></v-divider>
+          
+          <v-row class ="mb-6">
+
+            <v-col cols="12">
+              <v-row class="align-center justify-space-between">
+                <v-col cols="auto">
+                  <span class="font-weight-medium">Relatórios por E-mail</span>
+                </v-col>
+                <v-col cols="auto">
+                  <v-switch 
+                    v-model="form.relatorio_email"
+                    color="#2563eb"
+                    hide-details
+                    inset
+                  />
+                </v-col>
+              </v-row>
+            </v-col>
+
+            <v-col cols="12">
+              <v-row class="align-center justify-space-between">
+                <v-col cols="auto">
+                  <span class="font-weight-medium">Relatórios Díario para Gestores</span>
+                </v-col>
+                <v-col cols="auto">
+                  <v-switch 
+                    v-model="form.relatorio_gestores"
+                    color="#2563eb"
+                    hide-details
+                    inset
+                  />
+                </v-col>
+              </v-row>
+            </v-col>
+
+            <v-col cols="12">
+              <v-row class="align-center justify-space-between">
+                <v-col cols="auto">
+                  <span class="font-weight-medium">Relatórios Semanal para Colaboradores</span>
+                </v-col>
+                <v-col cols="auto">
+                  <v-switch 
+                    v-model="form.relatorio_colaboradores"
+                    color="#2563eb"
+                    hide-details
+                    inset
+                  />
+                </v-col>
+              </v-row>
+            </v-col>
+          </v-row>
+        </v-card>
+        <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn color="primary" @click="salvarConfiguracoes" class="add-btn">Salvar Configurações</v-btn>
+        </v-card-actions>
+      </v-window-item>
+      <!-- Outras abas virão depois -->
+    </v-window>
+
+    <v-window v-model="selectedTab">
+      <v-window-item value="integracoes">
+        <v-card class="pa-6">
+          <h3 class="section-title">Configurações de Integrações</h3>
+          <p class="section-description">Configure as integrações com outros sistemas</p>
+          
+          <v-row class="mb-6">
+            
+            <v-col cols="12">
+              <v-row class="align-center justify-space-between ">
+                <v-col cols="auto">
+                  <span class="font-weight-medium">Integrar com Folha de Pagamento</span>
+                </v-col>
+                <v-col cols="auto">
+                  <v-switch 
+                    v-model="form.integrar_folha_pagamento"
+                    color="#2563eb"
+                    hide-details
+                    inset
+                  />
+                </v-col>
+              </v-row>
+            </v-col>
+          </v-row>
+
+          <v-divider class="my-4 mx-auto custom-divider"></v-divider>
+          
+          <v-row class ="mb-6">
+
+            <v-col cols="12">
+              <v-row class="align-center justify-space-between">
+                <v-col cols="auto">
+                  <span class="font-weight-medium">Exportação de Dados</span>
+                </v-col>
+                <v-col cols="auto">
+                  <v-switch 
+                    v-model="form.exportacao_dados"
+                    color="#2563eb"
+                    hide-details
+                    inset
+                  />
+                </v-col>
+              </v-row>
+            </v-col>
+
+            <v-col cols="12">
+              <v-row class="align-center justify-space-between">
+                <v-col cols="auto">
+                  <span class="font-weight-medium">Permitir Exportação CSV</span>
+                </v-col>
+                <v-col cols="auto">
+                  <v-switch 
+                    v-model="form.exportacao_csv"
+                    color="#2563eb"
+                    hide-details
+                    inset
+                  />
+                </v-col>
+              </v-row>
+            </v-col>
+       
+            <v-col cols="12">
+              <v-row class="align-center justify-space-between">
+                <v-col cols="auto">
+                  <span class="font-weight-medium">Permitir Exportação PDF</span>
+                </v-col>
+                <v-col cols="auto">
+                  <v-switch 
+                    v-model="form.exportacao_pdf"
+                    color="#2563eb"
+                    hide-details
+                    inset
+                  />
+                </v-col>
+              </v-row>
+            </v-col>
+
+            <v-col cols="12">
+              <v-row class="align-center justify-space-between">
+                <v-col cols="auto">
+                  <span class="font-weight-medium">Integrar com Calendário</span>
+                </v-col>
+                <v-col cols="auto">
+                  <v-switch 
+                    v-model="form.banco_horas_notificacao"
+                    color="#2563eb"
+                    hide-details
+                    inset
+                  />
+                </v-col>
+              </v-row>
+            </v-col>
+          </v-row>
+        </v-card>
+        <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn color="primary" @click="salvarConfiguracoes" class="add-btn">Salvar Configurações</v-btn>
+        </v-card-actions>
+      </v-window-item>
+      <!-- Outras abas virão depois -->
+    </v-window>
+
+  </v-container>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const selectedTab = ref('geral');
+
+const tabs = [
+  { value: 'geral', label: 'Geral' },
+  { value: 'calculo', label: 'Cálculo de Horas' },
+  { value: 'notificacoes', label: 'Notificações' },
+  { value: 'integracoes', label: 'Integrações' }
+];
+
+
+const form = ref({
+  tolerancia_entrada: '15',
+  tolerancia_saida: '15',
+  limite_diario_he: '2',
+  limite_mensal_he: '40',
+  banco_horas_positivo: '40',
+  banco_horas_negativo: '10',
+  validacao_facial: true,
+  registro_remoto: true,
+  ajuste_colaborador: false,
+  dias_aprovacao: '7'
+});
+
+const salvarConfiguracoes = () => {
+  console.log('Configurações salvas:', form.value);
+  // Chamada à API futura aqui
+};
+</script>
+<style scoped>
+.custom-divider {
+  width: 85%; /* ou qualquer valor: 300px, 80%, etc */
+}
+.mb-6 {
+  margin-bottom: 32px !important;
+}
+
+
+.header-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding: 0 0 20px 0;
+  border-bottom: 1px solid #eaecef;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+}
+
+.icon-wrapper {
+  background-color: #e3f2fd;
+  border-radius: 8px;
+  padding: 12px;
+  margin-right: 12px;
+}
+
+.header-title h1 {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0;
+  color: #1e293b;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.back-button {
+  color: #1976d2;
+}
+
+.new-holiday-btn {
+  background-color: #1976d2;
+  color: white;
+}
+
+.admin-profile {
+  display: flex;
+  align-items: center;
+  margin-left: 16px;
+  cursor: pointer;
+}
+
+.admin-info {
+  display: flex;
+  flex-direction: column;
+  margin: 0 8px;
+}
+
+.admin-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #1e293b;
+}
+
+.admin-role {
+  font-size: 12px;
+  color: #64748b;
+}
+
+.notification-badge {
+  margin: 0 8px;
+}
+
+/* Estilo da seção de título */
+.section-header {
+  margin-bottom: 24px;
+}
+
+.section-header h2 {
+  font-size: 24px;
+  font-weight: 600;
+  margin: 0 0 8px 0;
+  color: #1e293b;
+}
+
+.section-description {
+  color: #64748b;
+  font-size: 14px;
+  margin: 1;
+  padding-bottom: 2%;
+}
+
+
+.main-title {
+  font-size: 28px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: #333;
+}
+
+.subtitle {
+  color: #666;
+  font-size: 16px;
+}
+
+.image-wrapper {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.top-image {
+  max-width: 180px;
+  height: auto;
+}
+
+.v-card {
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+}
+.custom-tabs {
+  background-color: #e6edf700;
+  border-radius: 8px;
+  padding: 4px;
+}
+
+.v-tab {
+  border-radius: 8px;
+  min-width: 140px;
+  text-transform: none;
+  font-weight: 500;
+  color: #475569;
+}
+
+.v-tab.active-tab {
+  background-color: #ffffff !important;
+  color: #1e293b !important;
+}
+.add-btn {
+  border-radius: 8px;
+  font-weight: 500;
+  padding: 0 20px ;
+  height: 44px;
+  color: white !important;
+  background-color: #2563eb;
+}
+
+
+</style>
\ No newline at end of file