Vue final feito pro site
This commit is contained in:
Caio1w
2
.gitignore
vendored
2
.gitignore
vendored
@@ -13,7 +13,7 @@ dist
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
venv
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
<div class="container-fluid max-w-7xl mx-auto px-4">
|
||||
|
||||
<!-- Logo e Branding -->
|
||||
<!-- O 'd-flex align-items-center' da navbar deve garantir o alinhamento central -->
|
||||
<router-link to="/dashboard" class="navbar-brand d-flex align-items-center me-4">
|
||||
<img src="@/assets/CtrlCash-white.png" alt="CtrlCash Logo" width="120" class="d-inline-block logo-align">
|
||||
</router-link>
|
||||
@@ -34,25 +33,36 @@
|
||||
<!-- Botão de Notificações -->
|
||||
<button class="btn btn-link text-white me-3 p-0" title="Notificações">
|
||||
<i class="bi bi-bell-fill fs-5 position-relative">
|
||||
<span class="position-absolute top-0 start-100 translate-middle p-1 bg-danger border border-light rounded-circle"></span>
|
||||
<span v-if="unreadNotifications > 0" class="position-absolute top-0 start-100 translate-middle p-1 bg-danger border border-light rounded-circle">
|
||||
<small>{{ unreadNotifications > 9 ? '9+' : unreadNotifications }}</small>
|
||||
</span>
|
||||
</i>
|
||||
</button>
|
||||
|
||||
<!-- Avatar do Usuário -->
|
||||
<div class="dropdown me-3">
|
||||
<button class="btn btn-link p-0 d-flex align-items-center text-white" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<img class="rounded-circle border border-white" src="https://placehold.co/36x36/1A3B5E/FFFFFF?text=JP" alt="Avatar" style="width: 36px; height: 36px; object-fit: cover;">
|
||||
<span class="ms-2 d-none d-md-inline text-sm">João Pedro</span>
|
||||
</button>
|
||||
<!-- Dropdown Menu (Placeholder) -->
|
||||
<!-- <ul class="dropdown-menu">...</ul> -->
|
||||
<!-- Avatar e Nome do Usuário -->
|
||||
<div class="d-flex align-items-center me-3">
|
||||
<img
|
||||
class="rounded-circle border border-white"
|
||||
:src="userAvatar"
|
||||
:alt="`Avatar de ${userName}`"
|
||||
style="width: 36px; height: 36px; object-fit: cover;"
|
||||
>
|
||||
<span class="ms-2 d-none d-md-inline text-sm text-white">{{ userName }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Botão de Logout -->
|
||||
<button @click="logout" class="btn btn-outline-light btn-sm d-none d-sm-inline-flex align-items-center" title="Sair">
|
||||
<!-- Botão de Logout - Desktop -->
|
||||
<button @click="logout" class="btn btn-outline-light btn-sm d-none d-md-inline-flex align-items-center" title="Sair">
|
||||
<i class="bi bi-box-arrow-right me-1"></i>
|
||||
Sair
|
||||
</button>
|
||||
|
||||
<!-- Botão de Logout - Mobile (dentro do menu) -->
|
||||
<div class="d-md-none">
|
||||
<button @click="logout" class="btn btn-outline-light btn-sm w-100 mt-2 d-flex align-items-center justify-content-center">
|
||||
<i class="bi bi-box-arrow-right me-2"></i>
|
||||
Sair
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -62,16 +72,71 @@
|
||||
|
||||
<script setup>
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { ref, watch } from 'vue'; // Importando ref e watch
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute(); // Obtém o objeto de rota atual
|
||||
const route = useRoute();
|
||||
|
||||
// Estados reativos
|
||||
const userName = ref('Usuário');
|
||||
const userAvatar = ref('https://placehold.co/36x36/1A3B5E/FFFFFF?text=U');
|
||||
const unreadNotifications = ref(0);
|
||||
|
||||
// Função para carregar dados do usuário
|
||||
const loadUserData = () => {
|
||||
try {
|
||||
const userData = localStorage.getItem('user');
|
||||
if (userData) {
|
||||
const user = JSON.parse(userData);
|
||||
userName.value = user.name || 'Usuário';
|
||||
|
||||
// Gerar avatar dinâmico baseado nas iniciais do nome
|
||||
if (user.name) {
|
||||
const initials = user.name
|
||||
.split(' ')
|
||||
.map(word => word[0])
|
||||
.join('')
|
||||
.toUpperCase()
|
||||
.substring(0, 2);
|
||||
|
||||
userAvatar.value = `https://placehold.co/36x36/1A3B5E/FFFFFF?text=${initials}`;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erro ao carregar dados do usuário:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const logout = () => {
|
||||
console.log("Usuário desconectado. Redirecionando para o login.");
|
||||
// Ação de logout real (ex: limpar token, session) seria aqui.
|
||||
|
||||
// Limpar dados de autenticação
|
||||
localStorage.removeItem('user');
|
||||
localStorage.removeItem('isAuthenticated');
|
||||
localStorage.removeItem('token');
|
||||
|
||||
// Redirecionar para login
|
||||
router.push('/login');
|
||||
};
|
||||
|
||||
// Watcher para atualizar dados do usuário quando a rota mudar
|
||||
watch(route, () => {
|
||||
// Recarregar dados do usuário quando mudar de página
|
||||
loadUserData();
|
||||
});
|
||||
|
||||
// Carregar dados quando o componente for montado
|
||||
onMounted(() => {
|
||||
loadUserData();
|
||||
|
||||
// Verificar se o usuário está autenticado
|
||||
const isAuthenticated = localStorage.getItem('isAuthenticated');
|
||||
const user = localStorage.getItem('user');
|
||||
|
||||
if (!isAuthenticated || !user) {
|
||||
router.push('/login');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -80,16 +145,41 @@
|
||||
.text-primary-dark { color: #1A3B5E !important; }
|
||||
.text-success-feature { color: #2ECC71 !important; }
|
||||
.hover-success-feature:hover { color: #2ECC71 !important; }
|
||||
|
||||
|
||||
|
||||
/* FORÇA O ALINHAMENTO VERTICAL DA IMAGEM E DO TEXTO */
|
||||
.navbar-brand {
|
||||
display: flex;
|
||||
align-items: center; /* Garante que todos os itens no brand estão centralizados */
|
||||
align-items: center;
|
||||
}
|
||||
.logo-align {
|
||||
vertical-align: middle;
|
||||
/* Removendo o ajuste manual para confiar no alinhamento Flexbox do Bootstrap */
|
||||
}
|
||||
</style>
|
||||
|
||||
/* Estilos para o botão de logout no mobile */
|
||||
@media (max-width: 767.98px) {
|
||||
.navbar-collapse {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.btn-outline-light {
|
||||
margin-top: 0.5rem;
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.btn-outline-light:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
/* Estilos para a badge de notificações */
|
||||
.position-relative .bg-danger {
|
||||
font-size: 0.6rem;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@@ -1,50 +1,39 @@
|
||||
<template>
|
||||
<HeaderPublic />
|
||||
<div class="cadastro-container d-flex align-items-center justify-content-center min-vh-100 p-3">
|
||||
|
||||
<div class="cadastro-card p-5 shadow-lg rounded-4 bg-white">
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="text-center mb-4">
|
||||
|
||||
<img src="@/assets/CtrlCash-blue.png" alt="CtrlCash Logo" width="150" class="mb-3">
|
||||
<h2 class="fw-bold text-primary-dark">Abra Sua Conta</h2>
|
||||
<p class="text-secondary-dark">Preencha os campos para iniciar seu controle financeiro.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<form @submit.prevent="handleCadastro">
|
||||
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="nome" class="form-label fw-medium text-primary-dark">Nome Completo</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text"><i class="bi bi-person-fill"></i></span>
|
||||
<input type="text" class="form-control" id="nome" v-model="nome" required placeholder="Seu nome">
|
||||
<input type="text" class="form-control" id="nome" v-model="cadastroForm.name" required placeholder="Seu nome">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="email" class="form-label fw-medium text-primary-dark">E-mail</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text"><i class="bi bi-envelope-fill"></i></span>
|
||||
<input type="email" class="form-control" id="email" v-model="email" required placeholder="seu.email@exemplo.com">
|
||||
<input type="email" class="form-control" id="email" v-model="cadastroForm.email" required placeholder="seu.email@exemplo.com">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label fw-medium text-primary-dark">Crie Sua Senha</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
|
||||
<input type="password" class="form-control" id="password" v-model="password" required placeholder="Mínimo 8 caracteres">
|
||||
<input type="password" class="form-control" id="password" v-model="cadastroForm.password" required placeholder="Mínimo 6 caracteres">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="confirmPassword" class="form-label fw-medium text-primary-dark">Confirmar Senha</label>
|
||||
<div class="input-group">
|
||||
@@ -52,96 +41,113 @@
|
||||
<input type="password" class="form-control" id="confirmPassword" v-model="confirmPassword" required placeholder="Repita a senha">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mensagens -->
|
||||
<div v-if="error" class="alert alert-danger">
|
||||
{{ error }}
|
||||
</div>
|
||||
<div v-if="success" class="alert alert-success">
|
||||
{{ success }}
|
||||
</div>
|
||||
|
||||
|
||||
<button type="submit" class="btn btn-primary-feature w-100 fw-bold py-2 shadow-sm">
|
||||
Criar Minha Conta CtrlCash
|
||||
<button type="submit" class="btn btn-primary-feature w-100 fw-bold py-2 shadow-sm" :disabled="loading">
|
||||
<span v-if="loading" class="spinner-border spinner-border-sm me-2"></span>
|
||||
{{ loading ? 'Cadastrando...' : 'Criar Minha Conta CtrlCash' }}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import HeaderPublic from '@/components/HeaderPublic.vue'
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import HeaderPublic from '@/components/HeaderPublic.vue';
|
||||
|
||||
const nome = ref('');
|
||||
const email = ref('');
|
||||
const password = ref('');
|
||||
const confirmPassword = ref('');
|
||||
const router = useRouter();
|
||||
const loading = ref(false);
|
||||
const error = ref('');
|
||||
const success = ref('');
|
||||
|
||||
const handleCadastro = () => {
|
||||
|
||||
if (password.value !== confirmPassword.value) {
|
||||
console.error("As senhas não coincidem!");
|
||||
|
||||
const cadastroForm = ref({
|
||||
name: '',
|
||||
email: '',
|
||||
password: ''
|
||||
});
|
||||
const confirmPassword = ref('');
|
||||
|
||||
const handleCadastro = async () => {
|
||||
loading.value = true;
|
||||
error.value = '';
|
||||
success.value = '';
|
||||
|
||||
// Validações
|
||||
if (cadastroForm.value.password !== confirmPassword.value) {
|
||||
error.value = "As senhas não coincidem!";
|
||||
loading.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Tentativa de Cadastro:', nome.value, email.value);
|
||||
alertSimulado('Conta criada com sucesso! Faça login para acessar o dashboard.');
|
||||
router.push('/login');
|
||||
};
|
||||
if (cadastroForm.value.password.length < 6) {
|
||||
error.value = "A senha deve ter pelo menos 6 caracteres";
|
||||
loading.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
const alertSimulado = (message) => {
|
||||
|
||||
console.log(`[ALERTA SIMULADO]: ${message}`);
|
||||
try {
|
||||
const response = await fetch('http://localhost:5000/api/auth/register', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(cadastroForm.value)
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
success.value = 'Cadastro realizado com sucesso! Redirecionando...';
|
||||
|
||||
// Auto-login após cadastro
|
||||
setTimeout(() => {
|
||||
localStorage.setItem('user', JSON.stringify(data.user));
|
||||
localStorage.setItem('isAuthenticated', 'true');
|
||||
router.push('/dashboard');
|
||||
}, 2000);
|
||||
} else {
|
||||
error.value = data.error || 'Erro ao cadastrar';
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Erro:', err);
|
||||
error.value = 'Erro de conexão com o servidor';
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.text-primary-dark {
|
||||
color: #1A3B5E !important;
|
||||
}
|
||||
.text-secondary-dark {
|
||||
color: #6c757d !important;
|
||||
}
|
||||
|
||||
.text-primary-dark { color: #1A3B5E !important; }
|
||||
.text-secondary-dark { color: #6c757d !important; }
|
||||
|
||||
.cadastro-container {
|
||||
background-color: #F8F9FA;
|
||||
}
|
||||
|
||||
|
||||
.cadastro-card {
|
||||
max-width: 450px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
text-decoration: none;
|
||||
transition: opacity 0.2s;
|
||||
z-index: 10;
|
||||
}
|
||||
.back-button:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.cadastro-container { background-color: #F8F9FA; }
|
||||
.cadastro-card { max-width: 450px; width: 100%; }
|
||||
|
||||
.btn-primary-feature {
|
||||
background-color: #1A3B5E;
|
||||
background-color: #1A3B5E;
|
||||
border-color: #1A3B5E;
|
||||
color: white;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.btn-primary-feature:hover {
|
||||
background-color: #29517b;
|
||||
.btn-primary-feature:hover:not(:disabled) {
|
||||
background-color: #29517b;
|
||||
border-color: #29517b;
|
||||
}
|
||||
.btn-primary-feature:disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
|
||||
.form-control:focus {
|
||||
border-color: #1A3B5E;
|
||||
box-shadow: 0 0 0 0.25rem rgba(26, 59, 94, 0.25);
|
||||
@@ -151,8 +157,4 @@
|
||||
border-right: none;
|
||||
color: #1A3B5E;
|
||||
}
|
||||
|
||||
.hover-link:hover {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@@ -39,73 +39,527 @@
|
||||
<div v-if="activeTab === 'perfil'">
|
||||
<h2 class="h4 fw-bold text-primary-dark mb-3">Meu Perfil</h2>
|
||||
<p class="text-muted">Gerencie seu nome, e-mail e outras informações de contato.</p>
|
||||
<!-- Placeholder de Formulário -->
|
||||
<form>
|
||||
<div class="mb-3"><label class="form-label">Nome:</label><input type="text" class="form-control" value="[Nome do Usuário]"></div>
|
||||
<div class="mb-3"><label class="form-label">E-mail:</label><input type="email" class="form-control" value="[Email do Usuário]" disabled></div>
|
||||
<button class="btn btn-primary-feature mt-2">Salvar Alterações</button>
|
||||
|
||||
<form @submit.prevent="updateProfile">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label fw-medium">Nome Completo</label>
|
||||
<input type="text" class="form-control" v-model="profileForm.name" required>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label fw-medium">E-mail</label>
|
||||
<input type="email" class="form-control" v-model="profileForm.email" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label fw-medium">Meta de Receita Mensal (R$)</label>
|
||||
<input type="number" class="form-control" v-model="profileForm.profile.monthly_income_goal" step="0.01" min="0">
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label fw-medium">Limite de Despesas Mensal (R$)</label>
|
||||
<input type="number" class="form-control" v-model="profileForm.profile.monthly_expense_limit" step="0.01" min="0">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mensagens -->
|
||||
<div v-if="profileMessage" class="alert" :class="profileMessage.type === 'success' ? 'alert-success' : 'alert-danger'">
|
||||
{{ profileMessage.text }}
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary-feature mt-2" :disabled="updatingProfile">
|
||||
<span v-if="updatingProfile" class="spinner-border spinner-border-sm me-2"></span>
|
||||
{{ updatingProfile ? 'Salvando...' : 'Salvar Alterações' }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Aba: Gestão de Categorias -->
|
||||
<div v-if="activeTab === 'categorias'">
|
||||
<h2 class="h4 fw-bold text-primary-dark mb-3">Categorias Financeiras</h2>
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h2 class="h4 fw-bold text-primary-dark mb-0">Categorias Financeiras</h2>
|
||||
<button class="btn btn-success-feature" @click="showAddCategoryModal = true">
|
||||
<i class="bi bi-plus-circle me-2"></i> Nova Categoria
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-muted">Crie, edite ou remova categorias de receitas e despesas.</p>
|
||||
<button class="btn btn-success-feature mb-3"><i class="bi bi-plus-circle me-2"></i> Nova Categoria</button>
|
||||
<!-- Placeholder de Lista -->
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">Moradia <span class="badge bg-danger">Despesa</span></li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">Salário <span class="badge bg-success">Receita</span></li>
|
||||
</ul>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="loadingCategories" class="text-center py-4">
|
||||
<div class="spinner-border text-primary-dark" role="status"></div>
|
||||
<p class="text-muted mt-2">Carregando categorias...</p>
|
||||
</div>
|
||||
|
||||
<!-- Lista de Categorias -->
|
||||
<div v-else class="row">
|
||||
<div class="col-md-6">
|
||||
<h5 class="fw-bold text-success mb-3">📈 Receitas</h5>
|
||||
<div class="list-group mb-4">
|
||||
<div
|
||||
v-for="category in incomeCategories"
|
||||
:key="category.id"
|
||||
class="list-group-item d-flex justify-content-between align-items-center"
|
||||
>
|
||||
<div class="d-flex align-items-center">
|
||||
<span
|
||||
class="badge me-2"
|
||||
:style="{
|
||||
backgroundColor: category.color,
|
||||
width: '15px',
|
||||
height: '15px',
|
||||
display: 'inline-block'
|
||||
}"
|
||||
></span>
|
||||
{{ category.name }}
|
||||
</div>
|
||||
<span class="badge bg-success">Receita</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<h5 class="fw-bold text-danger mb-3">📉 Despesas</h5>
|
||||
<div class="list-group">
|
||||
<div
|
||||
v-for="category in expenseCategories"
|
||||
:key="category.id"
|
||||
class="list-group-item d-flex justify-content-between align-items-center"
|
||||
>
|
||||
<div class="d-flex align-items-center">
|
||||
<span
|
||||
class="badge me-2"
|
||||
:style="{
|
||||
backgroundColor: category.color,
|
||||
width: '15px',
|
||||
height: '15px',
|
||||
display: 'inline-block'
|
||||
}"
|
||||
></span>
|
||||
{{ category.name }}
|
||||
</div>
|
||||
<span class="badge bg-danger">Despesa</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mensagem de Categorias -->
|
||||
<div v-if="categoriesMessage" class="alert" :class="categoriesMessage.type === 'success' ? 'alert-success' : 'alert-danger'">
|
||||
{{ categoriesMessage.text }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Aba: Segurança e Senha -->
|
||||
<div v-if="activeTab === 'seguranca'">
|
||||
<h2 class="h4 fw-bold text-primary-dark mb-3">Segurança da Conta</h2>
|
||||
<p class="text-muted">Altere sua senha e configure a autenticação de dois fatores.</p>
|
||||
<!-- Placeholder de Formulário -->
|
||||
<form>
|
||||
<div class="mb-3"><label class="form-label">Nova Senha:</label><input type="password" class="form-control"></div>
|
||||
<div class="mb-3"><label class="form-label">Confirmar Nova Senha:</label><input type="password" class="form-control"></div>
|
||||
<button class="btn btn-warning text-white mt-2">Alterar Senha</button>
|
||||
<p class="text-muted">Altere sua senha para manter sua conta segura.</p>
|
||||
|
||||
<form @submit.prevent="changePassword">
|
||||
<div class="mb-3">
|
||||
<label class="form-label fw-medium">Senha Atual</label>
|
||||
<input type="password" class="form-control" v-model="passwordForm.currentPassword" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label fw-medium">Nova Senha</label>
|
||||
<input type="password" class="form-control" v-model="passwordForm.newPassword" required minlength="6">
|
||||
<small class="text-muted">Mínimo 6 caracteres</small>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label fw-medium">Confirmar Nova Senha</label>
|
||||
<input type="password" class="form-control" v-model="passwordForm.confirmPassword" required>
|
||||
</div>
|
||||
|
||||
<!-- Mensagens -->
|
||||
<div v-if="passwordMessage" class="alert" :class="passwordMessage.type === 'success' ? 'alert-success' : 'alert-danger'">
|
||||
{{ passwordMessage.text }}
|
||||
</div>
|
||||
|
||||
<button class="btn btn-warning text-white mt-2" :disabled="changingPassword">
|
||||
<span v-if="changingPassword" class="spinner-border spinner-border-sm me-2"></span>
|
||||
{{ changingPassword ? 'Alterando...' : 'Alterar Senha' }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Aba: Integrações -->
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Adicionar Categoria -->
|
||||
<div class="modal fade" :class="{ 'show d-block': showAddCategoryModal }" tabindex="-1" v-if="showAddCategoryModal">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-primary-dark text-white">
|
||||
<h5 class="modal-title fw-bold">Nova Categoria</h5>
|
||||
<button type="button" class="btn-close btn-close-white" @click="closeCategoryModal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form @submit.prevent="addCategory">
|
||||
<div class="mb-3">
|
||||
<label class="form-label fw-medium">Nome da Categoria</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
v-model="newCategory.name"
|
||||
placeholder="Ex: Investimentos, Lazer, Educação..."
|
||||
required
|
||||
>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label fw-medium">Tipo</label>
|
||||
<select v-model="newCategory.type" class="form-select" required>
|
||||
<option value="income">Receita</option>
|
||||
<option value="expense">Despesa</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label fw-medium">Cor</label>
|
||||
<div class="d-flex align-items-center">
|
||||
<input
|
||||
type="color"
|
||||
class="form-control form-control-color"
|
||||
v-model="newCategory.color"
|
||||
required
|
||||
>
|
||||
<span class="ms-2 small text-muted">Escolha uma cor para identificar</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mensagens -->
|
||||
<div v-if="categoryMessage" class="alert" :class="categoryMessage.type === 'success' ? 'alert-success' : 'alert-danger'">
|
||||
{{ categoryMessage.text }}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" @click="closeCategoryModal">Cancelar</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary-dark-feature fw-bold"
|
||||
@click="addCategory"
|
||||
:disabled="addingCategory"
|
||||
>
|
||||
<span v-if="addingCategory" class="spinner-border spinner-border-sm me-2"></span>
|
||||
{{ addingCategory ? 'Adicionando...' : 'Adicionar Categoria' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-backdrop fade show" @click="closeCategoryModal"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import HeaderApp from '@/components/HeaderApp.vue';
|
||||
|
||||
const activeTab = ref('perfil'); // Aba ativa por padrão
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
// Estados reativos
|
||||
const activeTab = ref('perfil');
|
||||
const loadingCategories = ref(false);
|
||||
const updatingProfile = ref(false);
|
||||
const changingPassword = ref(false);
|
||||
const addingCategory = ref(false);
|
||||
const showAddCategoryModal = ref(false);
|
||||
|
||||
// Dados do usuário
|
||||
const userProfile = ref({
|
||||
name: '',
|
||||
email: '',
|
||||
profile: {
|
||||
monthly_income_goal: 5000,
|
||||
monthly_expense_limit: 2500,
|
||||
currency: 'BRL'
|
||||
}
|
||||
});
|
||||
|
||||
const categories = ref([]);
|
||||
|
||||
// Forms
|
||||
const profileForm = ref({
|
||||
name: '',
|
||||
email: '',
|
||||
profile: {
|
||||
monthly_income_goal: 5000,
|
||||
monthly_expense_limit: 2500,
|
||||
currency: 'BRL'
|
||||
}
|
||||
});
|
||||
|
||||
const passwordForm = ref({
|
||||
currentPassword: '',
|
||||
newPassword: '',
|
||||
confirmPassword: ''
|
||||
});
|
||||
|
||||
const newCategory = ref({
|
||||
name: '',
|
||||
type: 'expense',
|
||||
color: '#6c757d'
|
||||
});
|
||||
|
||||
// Mensagens
|
||||
const profileMessage = ref(null);
|
||||
const passwordMessage = ref(null);
|
||||
const categoriesMessage = ref(null);
|
||||
const categoryMessage = ref(null);
|
||||
|
||||
// Computed
|
||||
const incomeCategories = computed(() => {
|
||||
return categories.value.filter(cat => cat.type === 'income');
|
||||
});
|
||||
|
||||
const expenseCategories = computed(() => {
|
||||
return categories.value.filter(cat => cat.type === 'expense');
|
||||
});
|
||||
|
||||
// Métodos
|
||||
const setActiveTab = (tabName) => {
|
||||
activeTab.value = tabName;
|
||||
};
|
||||
|
||||
// Lógica para marcar o link "Configurações" como ativo no HeaderApp
|
||||
onMounted(() => {
|
||||
// Esta lógica é apenas um lembrete. O HeaderApp usa o Vue Router para gerenciar o estado ativo.
|
||||
});
|
||||
|
||||
const loadUserProfile = async () => {
|
||||
try {
|
||||
const user = JSON.parse(localStorage.getItem('user'));
|
||||
if (!user) {
|
||||
router.push('/login');
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await fetch(`http://localhost:5000/api/user/profile?user_id=${user.id}`);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
userProfile.value = data.user;
|
||||
profileForm.value = { ...data.user };
|
||||
|
||||
// Atualizar localStorage
|
||||
localStorage.setItem('user', JSON.stringify(data.user));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erro ao carregar perfil:', error);
|
||||
showMessage(profileMessage, 'Erro ao carregar perfil', 'error');
|
||||
}
|
||||
};
|
||||
|
||||
const loadCategories = async () => {
|
||||
loadingCategories.value = true;
|
||||
try {
|
||||
const user = JSON.parse(localStorage.getItem('user'));
|
||||
const response = await fetch(`http://localhost:5000/api/categories?user_id=${user.id}`);
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
categories.value = data.categories;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erro ao carregar categorias:', error);
|
||||
showMessage(categoriesMessage, 'Erro ao carregar categorias', 'error');
|
||||
} finally {
|
||||
loadingCategories.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const updateProfile = async () => {
|
||||
updatingProfile.value = true;
|
||||
profileMessage.value = null;
|
||||
|
||||
try {
|
||||
const user = JSON.parse(localStorage.getItem('user'));
|
||||
const response = await fetch('http://localhost:5000/api/user/profile', {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
user_id: user.id,
|
||||
name: profileForm.value.name,
|
||||
email: profileForm.value.email,
|
||||
profile: profileForm.value.profile
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
// Atualizar localStorage
|
||||
const updatedUser = { ...user, name: data.user.name, email: data.user.email, profile: data.user.profile };
|
||||
localStorage.setItem('user', JSON.stringify(updatedUser));
|
||||
|
||||
showMessage(profileMessage, 'Perfil atualizado com sucesso!', 'success');
|
||||
} else {
|
||||
showMessage(profileMessage, data.error || 'Erro ao atualizar perfil', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erro:', error);
|
||||
showMessage(profileMessage, 'Erro de conexão com o servidor', 'error');
|
||||
} finally {
|
||||
updatingProfile.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const changePassword = async () => {
|
||||
changingPassword.value = true;
|
||||
passwordMessage.value = null;
|
||||
|
||||
// Validações
|
||||
if (passwordForm.value.newPassword !== passwordForm.value.confirmPassword) {
|
||||
showMessage(passwordMessage, 'As senhas não coincidem', 'error');
|
||||
changingPassword.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (passwordForm.value.newPassword.length < 6) {
|
||||
showMessage(passwordMessage, 'A senha deve ter pelo menos 6 caracteres', 'error');
|
||||
changingPassword.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const user = JSON.parse(localStorage.getItem('user'));
|
||||
const response = await fetch('http://localhost:5000/api/user/change-password', {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
user_id: user.id,
|
||||
current_password: passwordForm.value.currentPassword,
|
||||
new_password: passwordForm.value.newPassword
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
showMessage(passwordMessage, 'Senha alterada com sucesso!', 'success');
|
||||
passwordForm.value = {
|
||||
currentPassword: '',
|
||||
newPassword: '',
|
||||
confirmPassword: ''
|
||||
};
|
||||
} else {
|
||||
showMessage(passwordMessage, data.error || 'Erro ao alterar senha', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erro:', error);
|
||||
showMessage(passwordMessage, 'Erro de conexão com o servidor', 'error');
|
||||
} finally {
|
||||
changingPassword.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const addCategory = async () => {
|
||||
addingCategory.value = true;
|
||||
categoryMessage.value = null;
|
||||
|
||||
try {
|
||||
const user = JSON.parse(localStorage.getItem('user'));
|
||||
const response = await fetch('http://localhost:5000/api/categories', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
user_id: user.id,
|
||||
name: newCategory.value.name,
|
||||
type: newCategory.value.type,
|
||||
color: newCategory.value.color
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
showMessage(categoryMessage, 'Categoria adicionada com sucesso!', 'success');
|
||||
closeCategoryModal();
|
||||
loadCategories();
|
||||
} else {
|
||||
showMessage(categoryMessage, data.error || 'Erro ao adicionar categoria', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erro:', error);
|
||||
showMessage(categoryMessage, 'Erro de conexão com o servidor', 'error');
|
||||
} finally {
|
||||
addingCategory.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const closeCategoryModal = () => {
|
||||
showAddCategoryModal.value = false;
|
||||
newCategory.value = {
|
||||
name: '',
|
||||
type: 'expense',
|
||||
color: '#6c757d'
|
||||
};
|
||||
categoryMessage.value = null;
|
||||
};
|
||||
|
||||
const showMessage = (messageRef, text, type) => {
|
||||
messageRef.value = { text, type };
|
||||
setTimeout(() => {
|
||||
messageRef.value = null;
|
||||
}, 5000);
|
||||
};
|
||||
|
||||
// Lifecycle
|
||||
onMounted(() => {
|
||||
loadUserProfile();
|
||||
loadCategories();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Estilos Customizados do CtrlCash */
|
||||
.bg-primary-dark { background-color: #1A3B5E !important; }
|
||||
.text-primary-dark { color: #1A3B5E !important; }
|
||||
.btn-primary-feature { background-color: #1A3B5E !important; border-color: #1A3B5E !important; color: white; }
|
||||
.btn-success-feature { background-color: #2ECC71 !important; border-color: #2ECC71 !important; color: white; }
|
||||
.active-feature { background-color: #1A3B5E !important; color: white !important; }
|
||||
.btn-primary-feature {
|
||||
background-color: #1A3B5E !important;
|
||||
border-color: #1A3B5E !important;
|
||||
color: white;
|
||||
}
|
||||
.btn-primary-feature:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.btn-success-feature {
|
||||
background-color: #2ECC71 !important;
|
||||
border-color: #2ECC71 !important;
|
||||
color: white;
|
||||
}
|
||||
.active-feature {
|
||||
background-color: #1A3B5E !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.max-w-7xl { max-width: 80rem; }
|
||||
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
|
||||
</style>
|
||||
|
||||
/* Modal backdrop */
|
||||
.modal-backdrop {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Form controls */
|
||||
.form-control:focus {
|
||||
border-color: #1A3B5E;
|
||||
box-shadow: 0 0 0 0.25rem rgba(26, 59, 94, 0.25);
|
||||
}
|
||||
|
||||
/* List group items */
|
||||
.list-group-item {
|
||||
border: 1px solid #dee2e6;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/* Color picker */
|
||||
.form-control-color {
|
||||
width: 50px;
|
||||
height: 38px;
|
||||
}
|
||||
</style>
|
||||
@@ -3,116 +3,116 @@
|
||||
<div class="login-container d-flex align-items-center justify-content-center min-vh-100 p-3">
|
||||
|
||||
<div class="login-card p-5 shadow-lg rounded-4 bg-white">
|
||||
|
||||
|
||||
<div class="text-center mb-4">
|
||||
|
||||
<img src="@/assets/CtrlCash-blue.png" alt="CtrlCash Logo" width="150" class="mb-3">
|
||||
<h2 class="fw-bold text-primary-dark">Login</h2>
|
||||
<p class="text-secondary-dark">Insira seus dados para continuar o controle.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<form @submit.prevent="handleLogin">
|
||||
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="email" class="form-label fw-medium text-primary-dark">E-mail</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text"><i class="bi bi-envelope-fill"></i></span>
|
||||
<input type="email" class="form-control" id="email" v-model="email" required placeholder="seu.email@exemplo.com">
|
||||
<input type="email" class="form-control" id="email" v-model="loginForm.email" required placeholder="seu.email@exemplo.com">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="password" class="form-label fw-medium text-primary-dark">Senha</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
|
||||
<input type="password" class="form-control" id="password" v-model="password" required placeholder="********">
|
||||
<input type="password" class="form-control" id="password" v-model="loginForm.password" required placeholder="********">
|
||||
</div>
|
||||
<div class="text-end mt-2">
|
||||
<a href="/recuperar-senha" class="text-secondary-dark small text-decoration-none hover-link">Esqueceu a senha?</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<button type="submit" class="btn btn-primary-feature w-100 fw-bold py-2 shadow-sm">
|
||||
Acessar Minha Conta
|
||||
|
||||
<!-- Mensagem de erro -->
|
||||
<div v-if="error" class="alert alert-danger">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary-feature w-100 fw-bold py-2 shadow-sm" :disabled="loading">
|
||||
<span v-if="loading" class="spinner-border spinner-border-sm me-2"></span>
|
||||
{{ loading ? 'Entrando...' : 'Acessar Minha Conta' }}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import HeaderPublic from '@/components/HeaderPublic.vue'
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import HeaderPublic from '@/components/HeaderPublic.vue';
|
||||
|
||||
const email = ref('');
|
||||
const password = ref('');
|
||||
const router = useRouter();
|
||||
const loading = ref(false);
|
||||
const error = ref('');
|
||||
|
||||
const handleLogin = () => {
|
||||
|
||||
|
||||
console.log('Tentativa de Login:', email.value);
|
||||
router.push('/dashboard');
|
||||
const loginForm = ref({
|
||||
email: '',
|
||||
password: ''
|
||||
});
|
||||
|
||||
const handleLogin = async () => {
|
||||
loading.value = true;
|
||||
error.value = '';
|
||||
|
||||
try {
|
||||
const response = await fetch('http://localhost:5000/api/auth/login', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(loginForm.value)
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
// Salvar usuário no localStorage
|
||||
localStorage.setItem('user', JSON.stringify(data.user));
|
||||
localStorage.setItem('isAuthenticated', 'true');
|
||||
|
||||
// Redirecionar para dashboard
|
||||
router.push('/dashboard');
|
||||
} else {
|
||||
error.value = data.error || 'Erro ao fazer login';
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Erro:', err);
|
||||
error.value = 'Erro de conexão com o servidor';
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.text-primary-dark { color: #1A3B5E !important; }
|
||||
.text-secondary-dark { color: #6c757d !important; }
|
||||
|
||||
.text-primary-dark {
|
||||
color: #1A3B5E !important;
|
||||
}
|
||||
.text-secondary-dark {
|
||||
color: #6c757d !important;
|
||||
}
|
||||
.text-success-feature {
|
||||
color: #2ECC71 !important;
|
||||
}
|
||||
|
||||
.login-container { background-color: #F8F9FA; }
|
||||
.login-card { max-width: 420px; width: 100%; }
|
||||
|
||||
.login-container {
|
||||
background-color: #F8F9FA;
|
||||
}
|
||||
|
||||
|
||||
.login-card {
|
||||
max-width: 420px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.btn-primary-feature {
|
||||
background-color: #1A3B5E;
|
||||
background-color: #1A3B5E;
|
||||
border-color: #1A3B5E;
|
||||
color: white;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.btn-primary-feature:hover {
|
||||
background-color: #29517b;
|
||||
.btn-primary-feature:hover:not(:disabled) {
|
||||
background-color: #29517b;
|
||||
border-color: #29517b;
|
||||
}
|
||||
|
||||
|
||||
.btn-outline-primary-feature {
|
||||
color: #1A3B5E;
|
||||
border-color: #1A3B5E;
|
||||
background-color: transparent;
|
||||
transition: all 0.2s;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.btn-outline-primary-feature:hover {
|
||||
background-color: #1A3B5E;
|
||||
color: white;
|
||||
.btn-primary-feature:disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
|
||||
.form-control:focus {
|
||||
border-color: #1A3B5E;
|
||||
box-shadow: 0 0 0 0.25rem rgba(26, 59, 94, 0.25);
|
||||
@@ -123,7 +123,5 @@
|
||||
color: #1A3B5E;
|
||||
}
|
||||
|
||||
.hover-link:hover {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
</style>
|
||||
.hover-link:hover { text-decoration: underline !important; }
|
||||
</style>
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="transacoes-page bg-light min-vh-100">
|
||||
|
||||
<!-- Componente do Header (Barra de navegação da aplicação) -->
|
||||
<!-- Componente do Header -->
|
||||
<HeaderApp />
|
||||
|
||||
<div class="container-fluid py-4 max-w-7xl mx-auto px-4">
|
||||
@@ -13,8 +13,7 @@
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-success-feature fw-bold shadow-sm d-flex align-items-center"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#novaTransacaoModal"
|
||||
@click="openAddModal"
|
||||
>
|
||||
<i class="bi bi-plus-circle-fill me-2"></i>
|
||||
Nova Transação
|
||||
@@ -28,26 +27,31 @@
|
||||
<!-- Filtro por Tipo -->
|
||||
<div class="col-md-3">
|
||||
<label for="filtroTipo" class="form-label small text-muted">Tipo</label>
|
||||
<select id="filtroTipo" class="form-select">
|
||||
<option selected>Todos</option>
|
||||
<option value="receita">Receitas</option>
|
||||
<option value="despesa">Despesas</option>
|
||||
<select id="filtroTipo" v-model="filters.type" class="form-select" @change="loadTransactions">
|
||||
<option value="">Todos</option>
|
||||
<option value="income">Receitas</option>
|
||||
<option value="expense">Despesas</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Filtro por Categoria -->
|
||||
<div class="col-md-4">
|
||||
<label for="filtroCategoria" class="form-label small text-muted">Categoria</label>
|
||||
<input type="text" id="filtroCategoria" class="form-control" placeholder="Buscar por categoria...">
|
||||
<select id="filtroCategoria" v-model="filters.category" class="form-select" @change="loadTransactions">
|
||||
<option value="">Todas as categorias</option>
|
||||
<option v-for="category in categories" :key="category.id" :value="category.name">
|
||||
{{ category.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Filtro por Período -->
|
||||
<div class="col-md-5">
|
||||
<label for="filtroPeriodo" class="form-label small text-muted">Período</label>
|
||||
<div class="input-group">
|
||||
<input type="date" class="form-control">
|
||||
<input type="date" v-model="filters.startDate" class="form-control" @change="loadTransactions">
|
||||
<span class="input-group-text">a</span>
|
||||
<input type="date" class="form-control">
|
||||
<input type="date" v-model="filters.endDate" class="form-control" @change="loadTransactions">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -56,7 +60,17 @@
|
||||
<!-- Tabela de Transações -->
|
||||
<div class="card shadow-sm border-0">
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading" class="text-center py-5">
|
||||
<div class="spinner-border text-primary-dark" role="status">
|
||||
<span class="visually-hidden">Carregando...</span>
|
||||
</div>
|
||||
<p class="text-muted mt-2">Carregando transações...</p>
|
||||
</div>
|
||||
|
||||
<!-- Tabela com Dados -->
|
||||
<div v-else class="table-responsive">
|
||||
<table class="table table-hover mb-0">
|
||||
<thead class="bg-light">
|
||||
<tr>
|
||||
@@ -69,112 +83,172 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- Exemplo de Receita -->
|
||||
<tr>
|
||||
<td>Salário Mês de Setembro</td>
|
||||
<td>Renda Principal</td>
|
||||
<td class="text-center"><span class="badge bg-success-feature"><i class="bi bi-arrow-up"></i> Receita</span></td>
|
||||
<td class="text-end fw-bold text-success-feature">R$ 4.200,00</td>
|
||||
<td>28/09/2025</td>
|
||||
<!-- Transações Dinâmicas -->
|
||||
<tr v-for="transaction in transactions" :key="transaction.id">
|
||||
<td>{{ transaction.description }}</td>
|
||||
<td>
|
||||
<span class="badge" :style="{
|
||||
backgroundColor: getCategoryColor(transaction.category),
|
||||
color: 'white'
|
||||
}">
|
||||
{{ transaction.category }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button class="btn btn-sm btn-link text-primary-dark p-0 me-2" title="Editar"><i class="bi bi-pencil-square"></i></button>
|
||||
<button class="btn btn-sm btn-link text-danger p-0" title="Excluir"><i class="bi bi-trash"></i></button>
|
||||
<span
|
||||
class="badge"
|
||||
:class="transaction.type === 'income' ? 'bg-success-feature' : 'bg-danger'"
|
||||
>
|
||||
<i :class="transaction.type === 'income' ? 'bi bi-arrow-up' : 'bi bi-arrow-down'"></i>
|
||||
{{ transaction.type === 'income' ? 'Receita' : 'Despesa' }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-end fw-bold" :class="transaction.type === 'income' ? 'text-success-feature' : 'text-danger'">
|
||||
{{ formatCurrency(transaction.amount) }}
|
||||
</td>
|
||||
<td>{{ formatDate(transaction.date) }}</td>
|
||||
<td class="text-center">
|
||||
<!-- ✅ BOTÃO DE DELETAR VISÍVEL -->
|
||||
<button
|
||||
class="btn btn-sm btn-outline-danger"
|
||||
title="Excluir transação"
|
||||
@click="deleteTransaction(transaction.id)"
|
||||
>
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Exemplo de Despesa -->
|
||||
<tr>
|
||||
<td>Pagamento do Aluguel</td>
|
||||
<td>Moradia</td>
|
||||
<td class="text-center"><span class="badge bg-danger"><i class="bi bi-arrow-down"></i> Despesa</span></td>
|
||||
<td class="text-end fw-bold text-danger">R$ 1.200,00</td>
|
||||
<td>05/10/2025</td>
|
||||
<td class="text-center">
|
||||
<button class="btn btn-sm btn-link text-primary-dark p-0 me-2" title="Editar"><i class="bi bi-pencil-square"></i></button>
|
||||
<button class="btn btn-sm btn-link text-danger p-0" title="Excluir"><i class="bi bi-trash"></i></button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Mais um Exemplo -->
|
||||
<tr>
|
||||
<td>Compra no Supermercado</td>
|
||||
<td>Alimentação</td>
|
||||
<td class="text-center"><span class="badge bg-danger"><i class="bi bi-arrow-down"></i> Despesa</span></td>
|
||||
<td class="text-end fw-bold text-danger">R$ 250,50</td>
|
||||
<td>15/10/2025</td>
|
||||
<td class="text-center">
|
||||
<button class="btn btn-sm btn-link text-primary-dark p-0 me-2" title="Editar"><i class="bi bi-pencil-square"></i></button>
|
||||
<button class="btn btn-sm btn-link text-danger p-0" title="Excluir"><i class="bi bi-trash"></i></button>
|
||||
|
||||
<!-- Estado Vazio -->
|
||||
<tr v-if="transactions.length === 0 && !loading">
|
||||
<td colspan="6" class="text-center py-5 text-muted">
|
||||
<i class="bi bi-receipt fs-1 opacity-50 d-block mb-2"></i>
|
||||
Nenhuma transação encontrada
|
||||
<br>
|
||||
<small>Clique em "Nova Transação" para adicionar sua primeira transação</small>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Paginação ou Footer -->
|
||||
<div class="card-footer bg-white text-center">
|
||||
<small class="text-muted">Exibindo 1 a 10 de 52 transações.</small>
|
||||
|
||||
<!-- Footer com Contador -->
|
||||
<div class="card-footer bg-white text-center" v-if="transactions.length > 0">
|
||||
<small class="text-muted">Exibindo {{ transactions.length }} transações</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Modal de Nova Transação (Formulário Flutuante) -->
|
||||
<div class="modal fade" id="novaTransacaoModal" tabindex="-1" aria-labelledby="novaTransacaoModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<!-- Modal de Nova Transação -->
|
||||
<div v-if="showAddModal" class="modal-overlay">
|
||||
<div class="modal-container">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-primary-dark text-white">
|
||||
<h5 class="modal-title fw-bold" id="novaTransacaoModalLabel">Adicionar Nova Transação</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Fechar"></button>
|
||||
<h5 class="modal-title fw-bold">
|
||||
Adicionar Nova Transação
|
||||
</h5>
|
||||
<button type="button" class="btn-close btn-close-white" @click="closeModal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form>
|
||||
<form @submit.prevent="saveTransaction">
|
||||
|
||||
<!-- Tipo de Transação (Receita/Despesa) -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label fw-medium text-primary-dark">Tipo</label>
|
||||
<div class="btn-group w-100" role="group">
|
||||
<input type="radio" class="btn-check" name="tipoTransacao" id="tipoReceita" value="receita" checked>
|
||||
<label class="btn btn-outline-success-feature fw-bold" for="tipoReceita">Receita</label>
|
||||
<input type="radio" class="btn-check" v-model="newTransaction.type" id="tipoReceita" value="income">
|
||||
<label class="btn btn-outline-success-feature fw-bold" for="tipoReceita"
|
||||
:class="{ 'active': newTransaction.type === 'income' }">
|
||||
Receita
|
||||
</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="tipoTransacao" id="tipoDespesa" value="despesa">
|
||||
<label class="btn btn-outline-danger fw-bold" for="tipoDespesa">Despesa</label>
|
||||
<input type="radio" class="btn-check" v-model="newTransaction.type" id="tipoDespesa" value="expense">
|
||||
<label class="btn btn-outline-danger fw-bold" for="tipoDespesa"
|
||||
:class="{ 'active': newTransaction.type === 'expense' }">
|
||||
Despesa
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Descrição -->
|
||||
<div class="mb-3">
|
||||
<label for="descricao" class="form-label fw-medium text-primary-dark">Descrição</label>
|
||||
<input type="text" class="form-control" id="descricao" placeholder="Ex: Salário, Aluguel, Supermercado">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="descricao"
|
||||
v-model="newTransaction.description"
|
||||
placeholder="Ex: Salário, Aluguel, Supermercado"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Valor e Data -->
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="valor" class="form-label fw-medium text-primary-dark">Valor (R$)</label>
|
||||
<input type="number" step="0.01" class="form-control" id="valor" placeholder="0.00">
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0.01"
|
||||
class="form-control"
|
||||
id="valor"
|
||||
v-model="newTransaction.amount"
|
||||
placeholder="0.00"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="data" class="form-label fw-medium text-primary-dark">Data</label>
|
||||
<input type="date" class="form-control" id="data">
|
||||
<input
|
||||
type="date"
|
||||
class="form-control"
|
||||
id="data"
|
||||
v-model="newTransaction.date"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Categoria -->
|
||||
<div class="mb-3">
|
||||
<label for="categoria" class="form-label fw-medium text-primary-dark">Categoria</label>
|
||||
<select id="categoria" class="form-select">
|
||||
<option selected>Selecione uma categoria...</option>
|
||||
<option value="renda">Renda Principal</option>
|
||||
<option value="moradia">Moradia</option>
|
||||
<option value="alimentacao">Alimentação</option>
|
||||
<option value="transporte">Transporte</option>
|
||||
<option value="lazer">Lazer</option>
|
||||
<select
|
||||
id="categoria"
|
||||
class="form-select"
|
||||
v-model="newTransaction.category"
|
||||
required
|
||||
>
|
||||
<option value="">Selecione uma categoria...</option>
|
||||
<option
|
||||
v-for="category in filteredCategories"
|
||||
:key="category.id"
|
||||
:value="category.name"
|
||||
>
|
||||
{{ category.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Mensagens de Erro/Sucesso -->
|
||||
<div v-if="message" class="alert" :class="message.type === 'success' ? 'alert-success' : 'alert-danger'">
|
||||
{{ message.text }}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
|
||||
<button type="submit" class="btn btn-primary-dark-feature fw-bold">Salvar Transação</button>
|
||||
<button type="button" class="btn btn-secondary" @click="closeModal">Cancelar</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary-dark-feature fw-bold"
|
||||
@click="saveTransaction"
|
||||
:disabled="saving"
|
||||
>
|
||||
<span v-if="saving" class="spinner-border spinner-border-sm me-2"></span>
|
||||
{{ saving ? 'Salvando...' : 'Salvar Transação' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -184,12 +258,241 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import HeaderApp from '@/components/HeaderApp.vue';
|
||||
// Lógica para controle de filtros e interação com o modal (será adicionada com o Flask)
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
// Estados reativos
|
||||
const transactions = ref([]);
|
||||
const categories = ref([]);
|
||||
const loading = ref(false);
|
||||
const saving = ref(false);
|
||||
const showAddModal = ref(false);
|
||||
|
||||
const filters = ref({
|
||||
type: '',
|
||||
category: '',
|
||||
startDate: '',
|
||||
endDate: ''
|
||||
});
|
||||
|
||||
const newTransaction = ref({
|
||||
type: 'expense',
|
||||
description: '',
|
||||
amount: '',
|
||||
category: '',
|
||||
date: new Date().toISOString().split('T')[0]
|
||||
});
|
||||
|
||||
const message = ref(null);
|
||||
|
||||
// Computed
|
||||
const filteredCategories = computed(() => {
|
||||
return categories.value.filter(cat => cat.type === newTransaction.value.type);
|
||||
});
|
||||
|
||||
// Métodos
|
||||
const loadTransactions = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const user = JSON.parse(localStorage.getItem('user'));
|
||||
if (!user) {
|
||||
router.push('/login');
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await fetch(`http://localhost:5000/api/transactions?user_id=${user.id}`);
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
let filtered = data.transactions;
|
||||
|
||||
// Aplicar filtros
|
||||
if (filters.value.type) {
|
||||
filtered = filtered.filter(t => t.type === filters.value.type);
|
||||
}
|
||||
if (filters.value.category) {
|
||||
filtered = filtered.filter(t => t.category === filters.value.category);
|
||||
}
|
||||
if (filters.value.startDate) {
|
||||
filtered = filtered.filter(t => t.date >= filters.value.startDate);
|
||||
}
|
||||
if (filters.value.endDate) {
|
||||
filtered = filtered.filter(t => t.date <= filters.value.endDate);
|
||||
}
|
||||
|
||||
transactions.value = filtered;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erro ao carregar transações:', error);
|
||||
showMessage('Erro ao carregar transações', 'error');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const loadCategories = async () => {
|
||||
try {
|
||||
const user = JSON.parse(localStorage.getItem('user'));
|
||||
const response = await fetch(`http://localhost:5000/api/categories?user_id=${user.id}`);
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
categories.value = data.categories;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erro ao carregar categorias:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const saveTransaction = async () => {
|
||||
saving.value = true;
|
||||
message.value = null;
|
||||
|
||||
// Validações
|
||||
if (!newTransaction.value.description.trim()) {
|
||||
showMessage('Descrição é obrigatória', 'error');
|
||||
saving.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (!newTransaction.value.amount || parseFloat(newTransaction.value.amount) <= 0) {
|
||||
showMessage('Valor deve ser maior que zero', 'error');
|
||||
saving.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (!newTransaction.value.category) {
|
||||
showMessage('Selecione uma categoria', 'error');
|
||||
saving.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const user = JSON.parse(localStorage.getItem('user'));
|
||||
|
||||
const transactionData = {
|
||||
user_id: user.id,
|
||||
amount: parseFloat(newTransaction.value.amount),
|
||||
description: newTransaction.value.description.trim(),
|
||||
category: newTransaction.value.category,
|
||||
type: newTransaction.value.type,
|
||||
date: newTransaction.value.date
|
||||
};
|
||||
|
||||
const response = await fetch('http://localhost:5000/api/transactions', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(transactionData)
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
showMessage('Transação salva com sucesso!', 'success');
|
||||
closeModal();
|
||||
loadTransactions();
|
||||
} else {
|
||||
showMessage(data.error || 'Erro ao salvar transação', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erro:', error);
|
||||
showMessage('Erro de conexão com o servidor', 'error');
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const deleteTransaction = async (transactionId) => {
|
||||
if (!confirm('Tem certeza que deseja excluir esta transação?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const user = JSON.parse(localStorage.getItem('user'));
|
||||
const response = await fetch(`http://localhost:5000/api/transactions/${transactionId}?user_id=${user.id}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
showMessage('Transação excluída com sucesso!', 'success');
|
||||
loadTransactions();
|
||||
} else {
|
||||
const data = await response.json();
|
||||
showMessage(data.error || 'Erro ao excluir transação', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erro:', error);
|
||||
showMessage('Erro de conexão com o servidor', 'error');
|
||||
}
|
||||
};
|
||||
|
||||
const openAddModal = () => {
|
||||
showAddModal.value = true;
|
||||
resetNewTransaction();
|
||||
message.value = null;
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
showAddModal.value = false;
|
||||
resetNewTransaction();
|
||||
message.value = null;
|
||||
};
|
||||
|
||||
const resetNewTransaction = () => {
|
||||
newTransaction.value = {
|
||||
type: 'expense',
|
||||
description: '',
|
||||
amount: '',
|
||||
category: '',
|
||||
date: new Date().toISOString().split('T')[0]
|
||||
};
|
||||
};
|
||||
|
||||
const showMessage = (text, type) => {
|
||||
message.value = { text, type };
|
||||
setTimeout(() => {
|
||||
message.value = null;
|
||||
}, 5000);
|
||||
};
|
||||
|
||||
const formatCurrency = (value) => {
|
||||
return new Intl.NumberFormat('pt-BR', {
|
||||
style: 'currency',
|
||||
currency: 'BRL'
|
||||
}).format(value || 0);
|
||||
};
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
if (!dateString) return '-';
|
||||
|
||||
// Converter YYYY-MM-DD para DD/MM/YYYY
|
||||
if (dateString.match(/^\d{4}-\d{2}-\d{2}$/)) {
|
||||
const [year, month, day] = dateString.split('-');
|
||||
return `${day.padStart(2, '0')}/${month.padStart(2, '0')}/${year}`;
|
||||
}
|
||||
|
||||
return dateString;
|
||||
};
|
||||
|
||||
const getCategoryColor = (categoryName) => {
|
||||
const category = categories.value.find(cat => cat.name === categoryName);
|
||||
return category ? category.color : '#6c757d';
|
||||
};
|
||||
|
||||
// Lifecycle
|
||||
onMounted(() => {
|
||||
loadTransactions();
|
||||
loadCategories();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Definição das cores customizadas para o Bootstrap (Garantia de cores) */
|
||||
/* Definição das cores customizadas para o Bootstrap */
|
||||
.bg-primary-dark { background-color: #1A3B5E !important; }
|
||||
.text-primary-dark { color: #1A3B5E !important; }
|
||||
|
||||
@@ -211,18 +514,110 @@
|
||||
color: white;
|
||||
border-color: #1A3B5E;
|
||||
}
|
||||
.btn-primary-dark-feature:hover {
|
||||
.btn-primary-dark-feature:hover:not(:disabled) {
|
||||
background-color: #122841;
|
||||
border-color: #122841;
|
||||
color: white;
|
||||
}
|
||||
.btn-primary-dark-feature:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Utilitário para limitar largura (usado no header) */
|
||||
/* Utilitário para limitar largura */
|
||||
.max-w-7xl {
|
||||
max-width: 80rem; /* 1280px */
|
||||
max-width: 80rem;
|
||||
}
|
||||
.mx-auto {
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
/* Modal Customizado */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||||
animation: modalAppear 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes modalAppear {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 1.5rem;
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
border-top: 1px solid #dee2e6;
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
|
||||
/* Estilo para botões ativos */
|
||||
.btn-group .btn.active {
|
||||
background-color: inherit;
|
||||
border-color: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.btn-outline-success-feature.active {
|
||||
background-color: #2ECC71;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-outline-danger.active {
|
||||
background-color: #dc3545;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Estilos para badges */
|
||||
.badge {
|
||||
font-size: 0.75em;
|
||||
padding: 0.35em 0.65em;
|
||||
}
|
||||
|
||||
/* Botão de deletar */
|
||||
.btn-outline-danger {
|
||||
border-color: #dc3545;
|
||||
color: #dc3545;
|
||||
}
|
||||
|
||||
.btn-outline-danger:hover {
|
||||
background-color: #dc3545;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
@@ -1,98 +1,114 @@
|
||||
<template>
|
||||
<div class="dashboard-page bg-light min-vh-100">
|
||||
|
||||
<!-- Componente do Header (Barra de navegação da aplicação) -->
|
||||
<HeaderApp />
|
||||
|
||||
<div class="container-fluid py-4 max-w-7xl mx-auto px-4">
|
||||
|
||||
<h1 class="h3 fw-bold text-primary-dark mb-4">Visão Geral</h1>
|
||||
|
||||
<!-- Sumário (Cards de Resumo) -->
|
||||
<div class="row g-4 mb-5">
|
||||
|
||||
<!-- Card Saldo Total -->
|
||||
<div class="col-lg-4 col-md-6 col-sm-12">
|
||||
<div class="card shadow-sm border-0 h-100 p-3">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-muted mb-3">Saldo Total</h5>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<p class="card-text fs-3 fw-bold text-primary-dark">R$ 15.480,23</p>
|
||||
<p class="card-text fs-3 fw-bold text-primary-dark">{{ formatCurrency(summary.balance) }}</p>
|
||||
<i class="bi bi-wallet2 fs-2 text-primary-dark opacity-75"></i>
|
||||
</div>
|
||||
<small class="text-success-feature fw-medium">+2.5% desde o mês passado</small>
|
||||
<small :class="summary.balance >= 0 ? 'text-success-feature' : 'text-danger'" class="fw-medium">
|
||||
{{ getBalanceTrend() }}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card Receitas -->
|
||||
<div class="col-lg-4 col-md-6 col-sm-12">
|
||||
<div class="card shadow-sm border-0 h-100 p-3">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-muted mb-3">Receitas do Mês</h5>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<p class="card-text fs-3 fw-bold text-success-feature">R$ 4.200,00</p>
|
||||
<p class="card-text fs-3 fw-bold text-success-feature">{{ formatCurrency(summary.total_income) }}</p>
|
||||
<i class="bi bi-arrow-up-circle-fill fs-2 text-success-feature opacity-75"></i>
|
||||
</div>
|
||||
<small class="text-muted">Meta alcançada: 84%</small>
|
||||
<small class="text-muted">{{ getIncomeProgress() }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card Despesas -->
|
||||
<div class="col-lg-4 col-md-12 col-sm-12">
|
||||
<div class="card shadow-sm border-0 h-100 p-3">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-muted mb-3">Despesas do Mês</h5>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<p class="card-text fs-3 fw-bold text-danger">R$ 1.850,50</p>
|
||||
<p class="card-text fs-3 fw-bold text-danger">{{ formatCurrency(summary.total_expenses) }}</p>
|
||||
<i class="bi bi-arrow-down-circle-fill fs-2 text-danger opacity-75"></i>
|
||||
</div>
|
||||
<small class="text-muted">Limite restante: R$ 649,50</small>
|
||||
<small class="text-muted">{{ getExpenseLimit() }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Gráfico Principal (Matplotlib) e Atividade Recente -->
|
||||
<!-- Gráfico e Atividade Recente -->
|
||||
<div class="row g-4">
|
||||
|
||||
<!-- Coluna Principal para o Gráfico (Placeholder para Matplotlib) -->
|
||||
<div class="col-lg-8">
|
||||
<div class="card shadow-sm border-0 h-100 p-4">
|
||||
<h4 class="fw-bold text-primary-dark mb-3">Evolução Financeira (Gráfico)</h4>
|
||||
<p class="text-muted">Aqui será renderizado o gráfico gerado pelo Matplotlib no Flask.</p>
|
||||
<!-- Área de 400px de altura para o gráfico -->
|
||||
<div class="matplotlib-placeholder bg-light-subtle rounded-3 border border-dashed p-5 text-center d-flex align-items-center justify-content-center" style="min-height: 400px; height: 100%;">
|
||||
<i class="bi bi-bar-chart-fill fs-1 text-primary-dark opacity-25"></i>
|
||||
<p class="ms-3 text-primary-dark opacity-50">Carregando visualização de dados...</p>
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h4 class="fw-bold text-primary-dark mb-0">Evolução Financeira</h4>
|
||||
<div class="btn-group btn-group-sm">
|
||||
<button @click="loadChartData('monthly')" class="btn btn-outline-primary" :class="{ 'active': chartType === 'monthly' }">
|
||||
Mensal
|
||||
</button>
|
||||
<button @click="loadChartData('categories')" class="btn btn-outline-primary" :class="{ 'active': chartType === 'categories' }">
|
||||
Categorias
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="chartImage" class="chart-container rounded-3 text-center">
|
||||
<img :src="chartImage" alt="Gráfico Financeiro" class="img-fluid rounded" style="max-height: 400px;">
|
||||
</div>
|
||||
|
||||
<div v-else class="matplotlib-placeholder bg-light-subtle rounded-3 border border-dashed p-5 text-center d-flex flex-column align-items-center justify-content-center" style="min-height: 400px;">
|
||||
<div v-if="loadingChart" class="spinner-border text-primary-dark mb-3" role="status"></div>
|
||||
<i class="bi bi-bar-chart-fill fs-1 text-primary-dark opacity-25 mb-2"></i>
|
||||
<p class="text-primary-dark opacity-50 mb-0">
|
||||
{{ loadingChart ? 'Carregando visualização...' : 'Selecione um tipo de gráfico' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Coluna de Atividade Recente -->
|
||||
<div class="col-lg-4">
|
||||
<div class="card shadow-sm border-0 h-100 p-4">
|
||||
<h4 class="fw-bold text-primary-dark mb-3">Atividade Recente</h4>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
Pagamento de Aluguel
|
||||
<span class="badge bg-danger">-R$ 1.200,00</span>
|
||||
|
||||
<div v-if="loadingTransactions" class="text-center py-4">
|
||||
<div class="spinner-border text-primary-dark" role="status"></div>
|
||||
</div>
|
||||
|
||||
<ul v-else class="list-group list-group-flush">
|
||||
<li v-for="transaction in summary.recent_transactions" :key="transaction.id" class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<div class="transaction-info">
|
||||
<div class="fw-medium">{{ transaction.description }}</div>
|
||||
<small class="text-muted">
|
||||
{{ formatDate(transaction.date) }} • {{ transaction.category }}
|
||||
</small>
|
||||
</div>
|
||||
<span :class="transaction.type === 'income' ? 'badge bg-success-feature' : 'badge bg-danger'">
|
||||
{{ transaction.type === 'income' ? '+' : '-' }}{{ formatCurrency(transaction.amount) }}
|
||||
</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
Salário - Empresa Y
|
||||
<span class="badge bg-success-feature">+R$ 4.200,00</span>
|
||||
|
||||
<li v-if="summary.recent_transactions && summary.recent_transactions.length === 0" class="list-group-item text-center text-muted py-4">
|
||||
<i class="bi bi-receipt fs-4 opacity-50 d-block mb-2"></i>
|
||||
Nenhuma transação recente
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
Compra Mercado
|
||||
<span class="badge bg-danger">-R$ 250,50</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
Recebimento de Freelance
|
||||
<span class="badge bg-success-feature">+R$ 500,00</span>
|
||||
</li>
|
||||
<li class="list-group-item text-center">
|
||||
<router-link to="/transacoes" class="btn btn-link btn-sm text-primary-dark fw-medium">Ver todas as transações</router-link>
|
||||
|
||||
<li class="list-group-item text-center pt-3 border-0">
|
||||
<router-link to="/transacoes" class="btn btn-link btn-sm text-primary-dark fw-medium">
|
||||
Ver todas as transações
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -103,8 +119,103 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import HeaderApp from '@/components/HeaderApp.vue';
|
||||
// Importações e lógica do dashboard (serão adicionadas ao integrar com Flask)
|
||||
|
||||
const router = useRouter();
|
||||
const summary = ref({
|
||||
total_income: 0,
|
||||
total_expenses: 0,
|
||||
balance: 0,
|
||||
recent_transactions: []
|
||||
});
|
||||
const chartImage = ref('');
|
||||
const chartType = ref('monthly');
|
||||
const loadingChart = ref(false);
|
||||
const loadingTransactions = ref(false);
|
||||
|
||||
const loadDashboardData = async () => {
|
||||
loadingTransactions.value = true;
|
||||
try {
|
||||
const user = JSON.parse(localStorage.getItem('user'));
|
||||
if (!user) {
|
||||
router.push('/login');
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await fetch(`http://localhost:5000/api/dashboard/summary?user_id=${user.id}`);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
summary.value = data;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erro ao carregar dashboard:', error);
|
||||
} finally {
|
||||
loadingTransactions.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const loadChartData = async (type = 'monthly') => {
|
||||
loadingChart.value = true;
|
||||
chartType.value = type;
|
||||
try {
|
||||
const user = JSON.parse(localStorage.getItem('user'));
|
||||
const response = await fetch(`http://localhost:5000/api/dashboard/chart?user_id=${user.id}&type=${type}`);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
chartImage.value = data.chart;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erro ao carregar gráfico:', error);
|
||||
} finally {
|
||||
loadingChart.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const formatCurrency = (value) => {
|
||||
return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value || 0);
|
||||
};
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
if (!dateString) return '-';
|
||||
|
||||
// ✅ MESMA CORREÇÃO: Converter YYYY-MM-DD para DD/MM/YYYY
|
||||
if (dateString.match(/^\d{4}-\d{2}-\d{2}$/)) {
|
||||
const [year, month, day] = dateString.split('-');
|
||||
return `${day.padStart(2, '0')}/${month.padStart(2, '0')}/${year}`;
|
||||
}
|
||||
|
||||
// Se já está formatada, retorna como está
|
||||
return dateString;
|
||||
};
|
||||
|
||||
const getBalanceTrend = () => {
|
||||
const balance = summary.value.balance;
|
||||
if (balance > 0) return 'Saldo positivo';
|
||||
if (balance < 0) return 'Saldo negativo';
|
||||
return 'Saldo zerado';
|
||||
};
|
||||
|
||||
const getIncomeProgress = () => {
|
||||
const income = summary.value.total_income;
|
||||
if (income === 0) return 'Sem receitas este mês';
|
||||
const target = 5000;
|
||||
const progress = (income / target) * 100;
|
||||
return `Meta: ${Math.min(progress, 100).toFixed(0)}%`;
|
||||
};
|
||||
|
||||
const getExpenseLimit = () => {
|
||||
const expenses = summary.value.total_expenses;
|
||||
const limit = 2500;
|
||||
const remaining = limit - expenses;
|
||||
return remaining >= 0 ? `Limite restante: ${formatCurrency(remaining)}` : `Excedido: ${formatCurrency(Math.abs(remaining))}`;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
loadDashboardData();
|
||||
setTimeout(() => loadChartData('monthly'), 500);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -113,17 +224,16 @@
|
||||
.bg-success-feature { background-color: #2ECC71 !important; }
|
||||
.text-success-feature { color: #2ECC71 !important; }
|
||||
|
||||
/* Estilos de Card de Destaque */
|
||||
.card-body {
|
||||
padding: 1.5rem;
|
||||
.max-w-7xl { max-width: 80rem; }
|
||||
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
|
||||
|
||||
.btn-outline-primary.active {
|
||||
background-color: #1A3B5E;
|
||||
border-color: #1A3B5E;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Utilitário para limitar largura (usado no header) */
|
||||
.max-w-7xl {
|
||||
max-width: 80rem; /* 1280px */
|
||||
}
|
||||
.mx-auto {
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
</style>
|
||||
.transaction-info { flex: 1; text-align: left; }
|
||||
.chart-container { background-color: white; border: 1px solid #e9ecef; }
|
||||
.border-dashed { border-style: dashed !important; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user