Compare commits
3 Commits
a4a7574a21
...
db0d1d4a3a
| Author | SHA1 | Date | |
|---|---|---|---|
|
db0d1d4a3a | ||
|
|
c126b0c550 | ||
|
|
a9db545049 |
@@ -2,12 +2,15 @@
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<link rel="icon" href="./src/assets/icons/facivon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vite App</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
|
||||
<title>CtrlCash</title>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
|
||||
</html>
|
||||
|
||||
2561
package-lock.json
generated
Normal file
2561
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
13
src/App.vue
13
src/App.vue
@@ -1,11 +1,10 @@
|
||||
<script setup></script>
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>You did it!</h1>
|
||||
<p>
|
||||
Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
|
||||
documentation
|
||||
</p>
|
||||
<RouterView />
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<style>
|
||||
</style>
|
||||
|
||||
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 |
BIN
src/assets/Hero.png
Normal file
BIN
src/assets/Hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 192 KiB |
BIN
src/assets/icons/facivon.ico
Normal file
BIN
src/assets/icons/facivon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
88
src/components/FooterPublic.vue
Normal file
88
src/components/FooterPublic.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<footer class="bg-dark-footer text-white pt-5 pb-3">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
|
||||
<div class="col-md-4 col-12">
|
||||
<img src="@/assets/CtrlCash-white.png" alt="CtrlCash Logo" width="120" height="35" class="mb-3">
|
||||
<p class="text-secondary-footer mt-2">
|
||||
Seu dinheiro. Seu controle total.
|
||||
</p>
|
||||
<p class="text-secondary-footer small">
|
||||
Um projeto acadêmico de finanças inovadoras.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2 col-6">
|
||||
<h5 class="fw-bold text-white-footer mb-3">Navegue</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><router-link to="/" class="text-secondary-footer text-decoration-none">Início</router-link></li>
|
||||
<li class="mb-2"><router-link to="/about" class="text-secondary-footer text-decoration-none">Sobre Nós</router-link></li>
|
||||
<li class="mb-2"><router-link to="/help" class="text-secondary-footer text-decoration-none">Ajuda</router-link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3 col-6">
|
||||
<h5 class="fw-bold text-white-footer mb-3">Projeto</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><a href="https://github.com/Caio1w/CtrlCash" target="_blank" class="text-secondary-footer text-decoration-none">Repósitorio GitHub</a></li>
|
||||
<li class="mb-2"><a href="/termos" class="text-secondary-footer text-decoration-none">Termos de Uso</a></li>
|
||||
<li class="mb-2"><a href="/privacidade" class="text-secondary-footer text-decoration-none">Política de Privacidade</a></li>
|
||||
<li class="mb-2"><a href="/equipe" class="text-secondary-footer text-decoration-none">Equipe de Desenvolvimento</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3 col-12">
|
||||
<h5 class="fw-bold text-white-footer mb-3">Contato</h5>
|
||||
<p class="text-secondary-footer mb-1">E-mail: contato@ctrlcash.com</p>
|
||||
<p class="text-secondary-footer">Telefone: (XX) XXXX-XXXX</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<hr class="my-4 border-secondary-footer">
|
||||
<div class="text-center">
|
||||
<p class="text-secondary-footer small mb-0">
|
||||
© 2025 CtrlCash - Todos os direitos reservados. Protótipo desenvolvido para fins acadêmicos.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.bg-dark-footer {
|
||||
background-color: #1A3B5E;
|
||||
}
|
||||
|
||||
|
||||
.text-white-footer {
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
.text-secondary-footer {
|
||||
color: #C0CCDA !important;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
|
||||
.text-success-footer {
|
||||
color: #2ECC71 !important;
|
||||
}
|
||||
|
||||
|
||||
.text-secondary-footer:hover {
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
.text-success-footer:hover {
|
||||
color: #34D399 !important;
|
||||
}
|
||||
|
||||
.border-secondary-footer {
|
||||
border-color: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
</style>
|
||||
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>
|
||||
51
src/components/HeaderPublic.vue
Normal file
51
src/components/HeaderPublic.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<script>
|
||||
// A tag <script> pode ficar vazia se não houver lógica (como imports de componentes ou métodos),
|
||||
// mas é bom mantê-la para futuras expansões.
|
||||
</script>
|
||||
<template>
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-lg px-3" :class="['bg-especial', 'navbar-dark']">
|
||||
<div class="container-fluid">
|
||||
|
||||
<router-link class="navbar-brand p-0" to="/">
|
||||
<img src="@/assets/CtrlCash-white.png" alt="CtrlCash Logo" width="140" height="40">
|
||||
</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">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
|
||||
<div class="navbar-nav ms-auto align-items-center">
|
||||
|
||||
<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="/cadastro" class="btn btn-success me-2">Abrir Conta</router-link>
|
||||
<router-link to="/login" class="btn btn-light text-primary">Login</router-link>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
</template>
|
||||
<style scoped>
|
||||
.bg-especial {
|
||||
background-color: #1A3B5E;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background-color: #2ECC71;
|
||||
border-color: #2ECC71;
|
||||
}
|
||||
.btn-success:hover {
|
||||
background-color: #26a95f;
|
||||
border-color: #26a95f;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: #1A3B5E !important;
|
||||
}
|
||||
</style>
|
||||
@@ -1,8 +1,58 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
|
||||
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({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [],
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
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
|
||||
|
||||
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>
|
||||
154
src/views/HomeView.vue
Normal file
154
src/views/HomeView.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
<script setup>
|
||||
import HeaderPublic from '../components/HeaderPublic.vue'
|
||||
import FooterPublic from '../components/FooterPublic.vue'
|
||||
</script>
|
||||
<template>
|
||||
<HeaderPublic />
|
||||
|
||||
|
||||
<main class="main-no-gap">
|
||||
|
||||
|
||||
<div class="bg-especial">
|
||||
<section class="container p-3 row align-items-center m-auto">
|
||||
|
||||
<div class="col-md-6 col-12 py-5">
|
||||
<h1 class="text-white display-10 text fw-bold text-break">Seu dinheiro. <br> Seu controle total.</h1>
|
||||
<p class="text-secondary fs-5">Organize, invista e alcance seus objetivos financeiros com segurança e facilidade. </p>
|
||||
|
||||
<router-link to="/register" class="btn btn-success btn-lg mt-3 fw-bold me-3">Abra sua conta</router-link>
|
||||
<router-link to="/features" class="btn btn-outline-light btn-lg mt-3">Conheça os recursos</router-link>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-6 col-12 d-flex justify-content-center py-5">
|
||||
<img src="@/assets/Hero.png" alt="Ilustração de controle financeiro do CtrlCash" class="img-fluid">
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<section class="container py-5">
|
||||
|
||||
<div class="row text-center mb-5">
|
||||
<div class="col-lg-8 mx-auto">
|
||||
|
||||
<h2 class="fw-bold display-6 text-primary-dark">Concentre-se no que importa. Nós cuidamos do resto.</h2>
|
||||
<p class="lead text-secondary-feature mt-3">Descubra as funcionalidades que dão o controle total da sua vida financeira na palma da sua mão.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row g-5">
|
||||
|
||||
|
||||
<div class="col-lg-4 col-md-6 col-12">
|
||||
<div class="d-flex align-items-start">
|
||||
<i class="bi bi-pie-chart-fill display-5 me-5 text-success-feature flex-shrink-0"></i>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-1 text-dark-feature">Orçamento Inteligente</h4>
|
||||
<p class="text-secondary-feature">Crie orçamentos por categoria, receba alertas e visualize seus gastos em tempo real, evitando surpresas no fim do mês.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-lg-4 col-md-6 col-12">
|
||||
<div class="d-flex align-items-start">
|
||||
<i class="bi bi-rocket-takeoff-fill display-5 me-4 text-success-feature flex-shrink-0"></i>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-1 text-dark-feature">Metas e Investimentos</h4>
|
||||
<p class="text-secondary-feature">Defina seus objetivos (viagem, casa, carro) e o CtrlCash te ajuda a poupar, investir e acompanhar seu progresso.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-lg-4 col-md-6 col-12">
|
||||
<div class="d-flex align-items-start">
|
||||
<i class="bi bi-lightning-charge-fill display-5 me-4 text-success-feature flex-shrink-0"></i>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-1 text-dark-feature">PIX e Pagamentos Rápidos</h4>
|
||||
<p class="text-secondary-feature">Envie e receba dinheiro em segundos. Pague contas e boletos com agilidade, tudo em um só lugar.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-lg-4 col-md-6 col-12">
|
||||
<div class="d-flex align-items-start">
|
||||
<i class="bi bi-clock-history display-5 me-4 text-success-feature flex-shrink-0"></i>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-1 text-dark-feature">Histórico Automático</h4>
|
||||
<p class="text-secondary-feature">Chega de planilhas. O app registra todas as transações, categoriza e gera relatórios visuais inteligentes para você.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recurso 5: Segurança e Alertas -->
|
||||
<div class="col-lg-4 col-md-6 col-12">
|
||||
<div class="d-flex align-items-start">
|
||||
<i class="bi bi-lock-fill display-5 me-4 text-success-feature flex-shrink-0"></i>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-1 text-dark-feature">Segurança e Alertas</h4>
|
||||
<p class="text-secondary-feature">Monitoramento 24h e notificações em tempo real. Sua segurança é prioridade máxima com tecnologia de ponta.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-lg-4 col-md-6 col-12">
|
||||
<div class="d-flex align-items-start">
|
||||
<i class="bi bi-credit-card-2-front-fill display-5 me-4 text-success-feature flex-shrink-0"></i>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-1 text-dark-feature">Central de Cartões</h4>
|
||||
<p class="text-secondary-feature">Controle seus limites, bloqueie e desbloqueie cartões virtuais e físicos diretamente pelo app, com total autonomia.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
<FooterPublic />
|
||||
</template>
|
||||
<style scoped>
|
||||
|
||||
.main-no-gap {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
|
||||
.bg-especial {
|
||||
background-color: #122942;
|
||||
}
|
||||
.btn-success {
|
||||
background-color: #2ECC71;
|
||||
border-color: #2ECC71;
|
||||
}
|
||||
.btn-success:hover {
|
||||
background-color: #26a95f;
|
||||
border-color: #26a95f;
|
||||
}
|
||||
|
||||
|
||||
.text-secondary {
|
||||
color: #D1D5DB !important;
|
||||
}
|
||||
|
||||
|
||||
.text-primary-dark {
|
||||
color: #1A3B5E !important;
|
||||
}
|
||||
.text-success-feature {
|
||||
color: #2ECC71 !important;
|
||||
}
|
||||
.text-dark-feature {
|
||||
color: #343a40 !important;
|
||||
}
|
||||
.text-secondary-feature {
|
||||
color: #6c757d !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