Terminado as páginas principais, adicionada a rota /dashboard
This commit is contained in:
Caio1w
BIN
src/assets/CtrlCash-blue.png
Normal file
BIN
src/assets/CtrlCash-blue.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/assets/CtrlCash-white.png
Normal file
BIN
src/assets/CtrlCash-white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 68 KiB |
@@ -4,7 +4,7 @@
|
|||||||
<div class="row g-4">
|
<div class="row g-4">
|
||||||
|
|
||||||
<div class="col-md-4 col-12">
|
<div class="col-md-4 col-12">
|
||||||
<img src="@/assets/CtrlCash.png" alt="CtrlCash Logo" width="120" height="35" class="mb-3">
|
<img src="@/assets/CtrlCash-white.png" alt="CtrlCash Logo" width="120" height="35" class="mb-3">
|
||||||
<p class="text-secondary-footer mt-2">
|
<p class="text-secondary-footer mt-2">
|
||||||
Seu dinheiro. Seu controle total.
|
Seu dinheiro. Seu controle total.
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
95
src/components/HeaderApp.vue
Normal file
95
src/components/HeaderApp.vue
Normal file
@@ -0,0 +1,95 @@
|
|||||||
|
<template>
|
||||||
|
<nav class="navbar navbar-expand-lg navbar-dark bg-primary-dark shadow-lg sticky-top">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<!-- Botão para Mobile (Hamburguer) -->
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="collapse navbar-collapse" id="navbarNav">
|
||||||
|
|
||||||
|
<!-- Navegação Principal -->
|
||||||
|
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||||
|
<li class="nav-item">
|
||||||
|
<router-link to="/dashboard" :class="['nav-link', route.path === '/dashboard' ? 'active fw-bold text-white' : 'text-white-50', 'hover-success-feature']">Dashboard</router-link>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<router-link to="/transacoes" :class="['nav-link', route.path === '/transacoes' ? 'active fw-bold text-white' : 'text-white-50', 'hover-success-feature']">Transações</router-link>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<router-link to="/configuracoes" :class="['nav-link', route.path === '/configuracoes' ? 'active fw-bold text-white' : 'text-white-50', 'hover-success-feature']">Configurações</router-link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<!-- Ícones de Ação e Usuário -->
|
||||||
|
<div class="d-flex align-items-center ms-auto">
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
</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> -->
|
||||||
|
</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">
|
||||||
|
<i class="bi bi-box-arrow-right me-1"></i>
|
||||||
|
Sair
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { useRouter, useRoute } from 'vue-router';
|
||||||
|
import { ref, watch } from 'vue'; // Importando ref e watch
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const route = useRoute(); // Obtém o objeto de rota atual
|
||||||
|
|
||||||
|
const logout = () => {
|
||||||
|
console.log("Usuário desconectado. Redirecionando para o login.");
|
||||||
|
// Ação de logout real (ex: limpar token, session) seria aqui.
|
||||||
|
router.push('/login');
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* Definição das cores customizadas com Bootstrap */
|
||||||
|
.bg-primary-dark { background-color: #1A3B5E !important; }
|
||||||
|
.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 */
|
||||||
|
}
|
||||||
|
.logo-align {
|
||||||
|
vertical-align: middle;
|
||||||
|
/* Removendo o ajuste manual para confiar no alinhamento Flexbox do Bootstrap */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -8,7 +8,7 @@
|
|||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
|
|
||||||
<router-link class="navbar-brand p-0" to="/">
|
<router-link class="navbar-brand p-0" to="/">
|
||||||
<img src="@/assets/CtrlCash.png" alt="CtrlCash Logo" width="140" height="40">
|
<img src="@/assets/CtrlCash-white.png" alt="CtrlCash Logo" width="140" height="40">
|
||||||
</router-link>
|
</router-link>
|
||||||
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
@@ -22,7 +22,7 @@
|
|||||||
<router-link to="/about" class="nav-link">Sobre nós</router-link>
|
<router-link to="/about" class="nav-link">Sobre nós</router-link>
|
||||||
<router-link to="/help" class="nav-link me-3">Ajuda</router-link>
|
<router-link to="/help" class="nav-link me-3">Ajuda</router-link>
|
||||||
|
|
||||||
<router-link to="/register" class="btn btn-success me-2">Abrir Conta</router-link>
|
<router-link to="/cadastro" class="btn btn-success me-2">Abrir Conta</router-link>
|
||||||
<router-link to="/login" class="btn btn-light text-primary">Login</router-link>
|
<router-link to="/login" class="btn btn-light text-primary">Login</router-link>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,12 +1,58 @@
|
|||||||
import { createRouter, createWebHistory } from 'vue-router'
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
import HomeView from '../views/HomeView.vue'
|
import HomeView from '../views/HomeView.vue'
|
||||||
|
import UserDashboardView from '../views/UserDashboardView.vue'
|
||||||
|
import LoginView from '../views/LoginView.vue'
|
||||||
|
import CadastroView from '@/views/CadastroView.vue'
|
||||||
|
import TransacoesView from '@/views/TransacoesView.vue'
|
||||||
|
import ConfiguracoesView from '@/views/ConfiguracoesView.vue'
|
||||||
|
import SobreNosView from '@/views/SobreNosView.vue'
|
||||||
|
import AjudaView from '@/views/AjudaView.vue'
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
history: createWebHistory(import.meta.env.BASE_URL),
|
history: createWebHistory(import.meta.env.BASE_URL),
|
||||||
routes: [{
|
routes: [
|
||||||
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
name: 'home',
|
name: 'home',
|
||||||
component: HomeView
|
component: HomeView
|
||||||
}],
|
},
|
||||||
|
{
|
||||||
|
path: '/dashboard',
|
||||||
|
name: 'dashboard',
|
||||||
|
component: UserDashboardView
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/login',
|
||||||
|
name: 'login',
|
||||||
|
component: LoginView
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/cadastro',
|
||||||
|
name: 'cadastro',
|
||||||
|
component: CadastroView
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/transacoes',
|
||||||
|
name: 'transacoes',
|
||||||
|
component: TransacoesView
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/configuracoes',
|
||||||
|
name: 'configuracoes',
|
||||||
|
component: ConfiguracoesView
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/about',
|
||||||
|
name: 'about',
|
||||||
|
component: SobreNosView
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/help',
|
||||||
|
name: 'help',
|
||||||
|
component: AjudaView
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
],
|
||||||
})
|
})
|
||||||
|
|
||||||
export default router
|
export default router
|
||||||
|
|||||||
78
src/views/AjudaView.vue
Normal file
78
src/views/AjudaView.vue
Normal file
@@ -0,0 +1,78 @@
|
|||||||
|
<template>
|
||||||
|
<div class="ajuda-page bg-light min-vh-100">
|
||||||
|
|
||||||
|
<!-- Header Público (Links para Login/Cadastro) -->
|
||||||
|
<HeaderPublic />
|
||||||
|
|
||||||
|
<div class="container-fluid py-5 max-w-7xl mx-auto px-4">
|
||||||
|
|
||||||
|
<h1 class="display-5 fw-bold text-primary-dark mb-4 text-center">Central de Ajuda e FAQ</h1>
|
||||||
|
<p class="text-center text-muted mb-5">Encontre respostas rápidas para suas dúvidas mais comuns ou envie seu feedback.</p>
|
||||||
|
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-lg-10">
|
||||||
|
|
||||||
|
<!-- ACORDEÃO DE PERGUNTAS FREQUENTES -->
|
||||||
|
<div class="accordion" id="faqAccordion">
|
||||||
|
|
||||||
|
<!-- Pergunta 1 -->
|
||||||
|
<div class="accordion-item shadow-sm mb-3 rounded-3">
|
||||||
|
<h2 class="accordion-header" id="headingOne">
|
||||||
|
<button class="accordion-button fw-bold text-primary-dark" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||||
|
Como faço para registrar uma nova transação?
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#faqAccordion">
|
||||||
|
<div class="accordion-body text-muted small">
|
||||||
|
No seu Dashboard, clique em "Transações" na barra de navegação. Na View de Transações, use o botão "Nova Transação" (verde) para adicionar Receitas ou Despesas. Certifique-se de categorizar corretamente para as análises futuras.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Pergunta 2 -->
|
||||||
|
<div class="accordion-item shadow-sm mb-3 rounded-3">
|
||||||
|
<h2 class="accordion-header" id="headingThree">
|
||||||
|
<button class="accordion-button collapsed fw-bold text-primary-dark" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||||||
|
Posso adicionar minhas próprias categorias?
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#faqAccordion">
|
||||||
|
<div class="accordion-body text-muted small">
|
||||||
|
Sim! Vá para a View "Configurações" e selecione a aba "Gestão de Categorias". Lá você pode criar, editar ou remover categorias personalizadas para se adequar ao seu estilo de vida financeiro.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import HeaderPublic from '@/components/HeaderPublic.vue';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* Estilos Customizados do CtrlCash */
|
||||||
|
.bg-primary-dark { background-color: #1A3B5E !important; }
|
||||||
|
.text-primary-dark { color: #1A3B5E !important; }
|
||||||
|
.text-success-feature { color: #2ECC71 !important; }
|
||||||
|
.btn-success-feature { background-color: #2ECC71 !important; border-color: #2ECC71 !important; color: white; }
|
||||||
|
|
||||||
|
.max-w-7xl { max-width: 80rem; }
|
||||||
|
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
|
||||||
|
|
||||||
|
.accordion-button:not(.collapsed) {
|
||||||
|
color: white !important;
|
||||||
|
background-color: #1A3B5E !important;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.accordion-button:focus {
|
||||||
|
box-shadow: none;
|
||||||
|
border-color: #1A3B5E;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
158
src/views/CadastroView.vue
Normal file
158
src/views/CadastroView.vue
Normal file
@@ -0,0 +1,158 @@
|
|||||||
|
<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">
|
||||||
|
</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">
|
||||||
|
</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">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="mb-4">
|
||||||
|
<label for="confirmPassword" class="form-label fw-medium text-primary-dark">Confirmar 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="confirmPassword" v-model="confirmPassword" required placeholder="Repita a senha">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<button type="submit" class="btn btn-primary-feature w-100 fw-bold py-2 shadow-sm">
|
||||||
|
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';
|
||||||
|
|
||||||
|
const nome = ref('');
|
||||||
|
const email = ref('');
|
||||||
|
const password = ref('');
|
||||||
|
const confirmPassword = ref('');
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const handleCadastro = () => {
|
||||||
|
|
||||||
|
if (password.value !== confirmPassword.value) {
|
||||||
|
console.error("As senhas não coincidem!");
|
||||||
|
|
||||||
|
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');
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const alertSimulado = (message) => {
|
||||||
|
|
||||||
|
console.log(`[ALERTA SIMULADO]: ${message}`);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.btn-primary-feature {
|
||||||
|
background-color: #1A3B5E;
|
||||||
|
border-color: #1A3B5E;
|
||||||
|
color: white;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
.btn-primary-feature:hover {
|
||||||
|
background-color: #29517b;
|
||||||
|
border-color: #29517b;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.form-control:focus {
|
||||||
|
border-color: #1A3B5E;
|
||||||
|
box-shadow: 0 0 0 0.25rem rgba(26, 59, 94, 0.25);
|
||||||
|
}
|
||||||
|
.input-group-text {
|
||||||
|
background-color: #e9ecef;
|
||||||
|
border-right: none;
|
||||||
|
color: #1A3B5E;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover-link:hover {
|
||||||
|
text-decoration: underline !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
111
src/views/ConfiguracoesView.vue
Normal file
111
src/views/ConfiguracoesView.vue
Normal file
@@ -0,0 +1,111 @@
|
|||||||
|
<template>
|
||||||
|
<div class="config-page bg-light min-vh-100">
|
||||||
|
|
||||||
|
<!-- Header 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">Configurações e Gestão da Conta</h1>
|
||||||
|
|
||||||
|
<div class="row g-4">
|
||||||
|
|
||||||
|
<!-- Coluna de Navegação Lateral -->
|
||||||
|
<div class="col-lg-3">
|
||||||
|
<div class="list-group shadow-sm border-0 rounded-3">
|
||||||
|
<a href="#"
|
||||||
|
@click.prevent="setActiveTab('perfil')"
|
||||||
|
:class="['list-group-item list-group-item-action', {'active-feature': activeTab === 'perfil'}]">
|
||||||
|
<i class="bi bi-person-circle me-2"></i> Perfil e Dados Pessoais
|
||||||
|
</a>
|
||||||
|
<a href="#"
|
||||||
|
@click.prevent="setActiveTab('categorias')"
|
||||||
|
:class="['list-group-item list-group-item-action', {'active-feature': activeTab === 'categorias'}]">
|
||||||
|
<i class="bi bi-tags-fill me-2"></i> Gestão de Categorias
|
||||||
|
</a>
|
||||||
|
<a href="#"
|
||||||
|
@click.prevent="setActiveTab('seguranca')"
|
||||||
|
:class="['list-group-item list-group-item-action', {'active-feature': activeTab === 'seguranca'}]">
|
||||||
|
<i class="bi bi-lock-fill me-2"></i> Segurança e Senha
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Área de Conteúdo (Abas) -->
|
||||||
|
<div class="col-lg-9">
|
||||||
|
<div class="card shadow-sm border-0 p-4 h-100">
|
||||||
|
|
||||||
|
<!-- Aba: Perfil e Dados Pessoais -->
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Aba: Gestão de Categorias -->
|
||||||
|
<div v-if="activeTab === 'categorias'">
|
||||||
|
<h2 class="h4 fw-bold text-primary-dark mb-3">Categorias Financeiras</h2>
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Aba: Integrações -->
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
import HeaderApp from '@/components/HeaderApp.vue';
|
||||||
|
|
||||||
|
const activeTab = ref('perfil'); // Aba ativa por padrão
|
||||||
|
|
||||||
|
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.
|
||||||
|
});
|
||||||
|
|
||||||
|
</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; }
|
||||||
|
|
||||||
|
.max-w-7xl { max-width: 80rem; }
|
||||||
|
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
|
||||||
|
</style>
|
||||||
129
src/views/LoginView.vue
Normal file
129
src/views/LoginView.vue
Normal file
@@ -0,0 +1,129 @@
|
|||||||
|
<template>
|
||||||
|
<HeaderPublic />
|
||||||
|
<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">
|
||||||
|
</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="********">
|
||||||
|
</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
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import HeaderPublic from '@/components/HeaderPublic.vue'
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
|
||||||
|
const email = ref('');
|
||||||
|
const password = ref('');
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const handleLogin = () => {
|
||||||
|
|
||||||
|
|
||||||
|
console.log('Tentativa de Login:', email.value);
|
||||||
|
router.push('/dashboard');
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.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%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.btn-primary-feature {
|
||||||
|
background-color: #1A3B5E;
|
||||||
|
border-color: #1A3B5E;
|
||||||
|
color: white;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
.btn-primary-feature:hover {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.form-control:focus {
|
||||||
|
border-color: #1A3B5E;
|
||||||
|
box-shadow: 0 0 0 0.25rem rgba(26, 59, 94, 0.25);
|
||||||
|
}
|
||||||
|
.input-group-text {
|
||||||
|
background-color: #e9ecef;
|
||||||
|
border-right: none;
|
||||||
|
color: #1A3B5E;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover-link:hover {
|
||||||
|
text-decoration: underline !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
61
src/views/SobreNosView.vue
Normal file
61
src/views/SobreNosView.vue
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
<template>
|
||||||
|
<div class="sobre-nos-page bg-light min-vh-100">
|
||||||
|
|
||||||
|
<!-- Header Público (Links para Login/Cadastro) -->
|
||||||
|
<HeaderPublic />
|
||||||
|
|
||||||
|
<div class="container-fluid py-5 max-w-7xl mx-auto px-4">
|
||||||
|
|
||||||
|
<div class="row g-5 align-items-center">
|
||||||
|
<!-- Seção de Texto (Sobre a Missão) -->
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<h1 class="display-5 fw-bold text-primary-dark mb-4">
|
||||||
|
Nossa Missão: <span class="text-success-feature">Empoderar</span> Suas Finanças.
|
||||||
|
</h1>
|
||||||
|
<p class="lead text-muted">
|
||||||
|
O CtrlCash nasceu da necessidade de simplificar a gestão financeira pessoal. Acreditamos que controlar suas finanças não deve ser um fardo, mas uma ferramenta para alcançar seus objetivos.
|
||||||
|
</p>
|
||||||
|
<p class="text-muted">
|
||||||
|
Nosso sistema oferece uma visão clara e organizada de onde seu dinheiro está indo, permitindo que você tome decisões informadas. Não se trata apenas de registrar gastos, mas de planejar o futuro.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<router-link to="/cadastro" class="btn btn-lg btn-success-feature shadow-lg mt-4">
|
||||||
|
Comece a Controlar Sua Vida Financeira Hoje
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Seção de Imagem/Visual -->
|
||||||
|
<div class="col-lg-6 d-none d-lg-block">
|
||||||
|
<div class="p-5 bg-white shadow-lg rounded-5 text-center border">
|
||||||
|
<i class="bi bi-wallet2 display-1 text-primary-dark mb-3"></i>
|
||||||
|
<h3 class="fw-bold text-primary-dark">Controle Financeiro Descomplicado</h3>
|
||||||
|
<p class="text-muted">A plataforma ideal para quem busca clareza e inteligência nos gastos diários.</p>
|
||||||
|
<i class="bi bi-graph-up display-4 text-success-feature mt-3"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- FOOTER SIMPLES -->
|
||||||
|
<footer class="bg-primary-dark text-white-50 py-3 mt-5">
|
||||||
|
<div class="container-fluid text-center small">
|
||||||
|
© {{ new Date().getFullYear() }} CtrlCash. Todos os direitos reservados.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import HeaderPublic from '@/components/HeaderPublic.vue';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* Estilos Customizados do CtrlCash (Garantindo que o TXT funcione) */
|
||||||
|
.bg-primary-dark { background-color: #1A3B5E !important; }
|
||||||
|
.text-primary-dark { color: #1A3B5E !important; }
|
||||||
|
.text-success-feature { color: #2ECC71 !important; }
|
||||||
|
.btn-success-feature { background-color: #2ECC71 !important; border-color: #2ECC71 !important; color: white; }
|
||||||
|
|
||||||
|
.max-w-7xl { max-width: 80rem; }
|
||||||
|
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
|
||||||
|
</style>
|
||||||
228
src/views/TransacoesView.vue
Normal file
228
src/views/TransacoesView.vue
Normal file
@@ -0,0 +1,228 @@
|
|||||||
|
<template>
|
||||||
|
<div class="transacoes-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">
|
||||||
|
|
||||||
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||||
|
<h1 class="h3 fw-bold text-primary-dark">Minhas Transações</h1>
|
||||||
|
|
||||||
|
<!-- Botão para abrir o Modal de Nova Transação -->
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
<i class="bi bi-plus-circle-fill me-2"></i>
|
||||||
|
Nova Transação
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Card de Filtros e Pesquisa -->
|
||||||
|
<div class="card shadow-sm border-0 mb-4 p-3">
|
||||||
|
<div class="row g-3 align-items-center">
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
</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...">
|
||||||
|
</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">
|
||||||
|
<span class="input-group-text">a</span>
|
||||||
|
<input type="date" class="form-control">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tabela de Transações -->
|
||||||
|
<div class="card shadow-sm border-0">
|
||||||
|
<div class="card-body p-0">
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table class="table table-hover mb-0">
|
||||||
|
<thead class="bg-light">
|
||||||
|
<tr>
|
||||||
|
<th scope="col" class="text-primary-dark fw-bold">Descrição</th>
|
||||||
|
<th scope="col" class="text-primary-dark fw-bold">Categoria</th>
|
||||||
|
<th scope="col" class="text-primary-dark fw-bold text-center">Tipo</th>
|
||||||
|
<th scope="col" class="text-primary-dark fw-bold text-end">Valor</th>
|
||||||
|
<th scope="col" class="text-primary-dark fw-bold">Data</th>
|
||||||
|
<th scope="col" class="text-primary-dark fw-bold text-center">Ações</th>
|
||||||
|
</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>
|
||||||
|
<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>
|
||||||
|
<!-- 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>
|
||||||
|
</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>
|
||||||
|
</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">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<form>
|
||||||
|
|
||||||
|
<!-- 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" name="tipoTransacao" id="tipoDespesa" value="despesa">
|
||||||
|
<label class="btn btn-outline-danger fw-bold" for="tipoDespesa">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">
|
||||||
|
</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">
|
||||||
|
</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">
|
||||||
|
</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>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import HeaderApp from '@/components/HeaderApp.vue';
|
||||||
|
// Lógica para controle de filtros e interação com o modal (será adicionada com o Flask)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* Definição das cores customizadas para o Bootstrap (Garantia de cores) */
|
||||||
|
.bg-primary-dark { background-color: #1A3B5E !important; }
|
||||||
|
.text-primary-dark { color: #1A3B5E !important; }
|
||||||
|
|
||||||
|
.bg-success-feature { background-color: #2ECC71 !important; }
|
||||||
|
.text-success-feature { color: #2ECC71 !important; }
|
||||||
|
|
||||||
|
.btn-outline-success-feature {
|
||||||
|
--bs-btn-color: #2ECC71;
|
||||||
|
--bs-btn-border-color: #2ECC71;
|
||||||
|
--bs-btn-hover-bg: #2ECC71;
|
||||||
|
--bs-btn-hover-border-color: #2ECC71;
|
||||||
|
--bs-btn-active-bg: #2ECC71;
|
||||||
|
--bs-btn-active-border-color: #2ECC71;
|
||||||
|
--bs-btn-active-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary-dark-feature {
|
||||||
|
background-color: #1A3B5E;
|
||||||
|
color: white;
|
||||||
|
border-color: #1A3B5E;
|
||||||
|
}
|
||||||
|
.btn-primary-dark-feature:hover {
|
||||||
|
background-color: #122841;
|
||||||
|
border-color: #122841;
|
||||||
|
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>
|
||||||
129
src/views/UserDashboardView.vue
Normal file
129
src/views/UserDashboardView.vue
Normal file
@@ -0,0 +1,129 @@
|
|||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Gráfico Principal (Matplotlib) 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>
|
||||||
|
</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>
|
||||||
|
</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>
|
||||||
|
<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>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import HeaderApp from '@/components/HeaderApp.vue';
|
||||||
|
// Importações e lógica do dashboard (serão adicionadas ao integrar com Flask)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.bg-primary-dark { background-color: #1A3B5E !important; }
|
||||||
|
.text-primary-dark { color: #1A3B5E !important; }
|
||||||
|
.bg-success-feature { background-color: #2ECC71 !important; }
|
||||||
|
.text-success-feature { color: #2ECC71 !important; }
|
||||||
|
|
||||||
|
/* Estilos de Card de Destaque */
|
||||||
|
.card-body {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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>
|
||||||
Reference in New Issue
Block a user