Correções de design
This commit is contained in:
parent
b0ba36507b
commit
b46da18c45
File diff suppressed because it is too large
Load Diff
@ -86,7 +86,7 @@ function mockFetchPagamentos() {
|
||||
{
|
||||
id: "PAY-001",
|
||||
paciente: { nome: "Sarah Oliveira", convenio: "Unimed" },
|
||||
valor: 20000,
|
||||
valor: 20000,
|
||||
forma_pagamento: "Cartão",
|
||||
data_vencimento: "2025-09-30",
|
||||
status: "pendente",
|
||||
@ -96,7 +96,7 @@ function mockFetchPagamentos() {
|
||||
{
|
||||
id: "PAY-002",
|
||||
paciente: { nome: "Laissa Marquetti", convenio: "Bradesco Saúde" },
|
||||
valor: 15000,
|
||||
valor: 15000,
|
||||
forma_pagamento: "Dinheiro",
|
||||
data_vencimento: "2025-09-15",
|
||||
status: "pago",
|
||||
@ -106,14 +106,14 @@ function mockFetchPagamentos() {
|
||||
{
|
||||
id: "PAY-003",
|
||||
paciente: { nome: "Vera Santos", convenio: "Particular" },
|
||||
valor: 30000,
|
||||
valor: 30000,
|
||||
forma_pagamento: "Pix",
|
||||
data_vencimento: "2025-09-20",
|
||||
status: "vencido",
|
||||
status: "vencido",
|
||||
desconto: 0,
|
||||
observacoes: "Não respondeu ao contato"
|
||||
},
|
||||
{
|
||||
{
|
||||
id: "PAY-004",
|
||||
paciente: { nome: "Carlos Almeida", convenio: "Particular" },
|
||||
valor: 10000,
|
||||
@ -169,7 +169,7 @@ export default function FinanceiroDashboard() {
|
||||
recebido += valorLiquido;
|
||||
descontos += p.desconto;
|
||||
} else {
|
||||
aReceber += p.valor;
|
||||
aReceber += valorLiquido;
|
||||
}
|
||||
});
|
||||
|
||||
@ -244,8 +244,7 @@ export default function FinanceiroDashboard() {
|
||||
<option value="vencido">Vencido</option>
|
||||
</select>
|
||||
<button
|
||||
className="action-btn"
|
||||
style={{ background: "#3b82f6", color: "#fff", borderColor: "#3b82f6" }}
|
||||
className="btn btn-primary"
|
||||
onClick={() => {
|
||||
setModalPagamento({
|
||||
paciente: { nome:"", convenio: CONVENIOS_LIST[0] },
|
||||
@ -284,7 +283,7 @@ export default function FinanceiroDashboard() {
|
||||
<tbody>
|
||||
{filteredPagamentos.map(p => (
|
||||
<tr key={p.id}>
|
||||
<td>{p.paciente.nome}</td>
|
||||
<td style={{ fontWeight: 600 }}>{p.paciente.nome}</td>
|
||||
<td>{p.paciente.convenio}</td>
|
||||
<td>{formatCurrency(p.valor)}</td>
|
||||
<td>{formatCurrency(p.desconto)}</td>
|
||||
@ -295,16 +294,16 @@ export default function FinanceiroDashboard() {
|
||||
<td>
|
||||
<div className="action-group">
|
||||
<button
|
||||
className="action-btn"
|
||||
className="btn-view"
|
||||
onClick={() => { setModalPagamento({...p}); setNovoPagamento(false); }}
|
||||
>
|
||||
Ver / Editar
|
||||
<i className="bi bi-eye me-1"></i> Ver / Editar
|
||||
</button>
|
||||
<button
|
||||
className="action-btn delete"
|
||||
className="btn-delete"
|
||||
onClick={() => handleDelete(p.id)}
|
||||
>
|
||||
Excluir
|
||||
<i className="bi bi-trash me-1"></i> Excluir
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
@ -416,15 +415,14 @@ export default function FinanceiroDashboard() {
|
||||
</div>
|
||||
|
||||
<div className="modal-footer">
|
||||
<button className="action-btn" onClick={() => handleSave(modalPagamento)}>
|
||||
Salvar
|
||||
<button className="btn-view" onClick={() => handleSave(modalPagamento)}>
|
||||
<i className="bi bi-check-circle me-1"></i> Salvar
|
||||
</button>
|
||||
<button
|
||||
className="action-btn"
|
||||
onClick={closeModal}
|
||||
style={{ borderColor: '#d1d5db', color: '#4b5563' }}
|
||||
className="btn-delete"
|
||||
onClick={closeModal}
|
||||
>
|
||||
Cancelar
|
||||
<i className="bi bi-x-circle me-1"></i> Cancelar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -432,4 +430,4 @@ export default function FinanceiroDashboard() {
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -273,6 +273,7 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 15px 0 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tabs-agenda-fila {
|
||||
|
||||
@ -39,6 +39,7 @@
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
@ -107,35 +108,79 @@
|
||||
}
|
||||
|
||||
/* Botões de ação */
|
||||
.action-group {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
|
||||
.btn-view {
|
||||
background-color: #E6F2FF !important;
|
||||
color: #004085 !important;
|
||||
border: 1px solid #B8D4F0 !important;
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease-in-out;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
cursor: pointer;
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #d7e6fb;
|
||||
background: #fff;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 13px;
|
||||
.btn-view:hover {
|
||||
background-color: #D1E7FF !important;
|
||||
border-color: #9EC5FE !important;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background: #f6f9fc;
|
||||
border-color: #93c5fd;
|
||||
.btn-edit {
|
||||
background-color: #FFF3CD !important;
|
||||
color: #856404 !important;
|
||||
border: 1px solid #FFEAA7 !important;
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease-in-out;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.action-btn.delete {
|
||||
border-color: #fca5a5;
|
||||
color: #b91c1c;
|
||||
.btn-edit:hover {
|
||||
background-color: #FFEEBA !important;
|
||||
border-color: #FFE087 !important;
|
||||
}
|
||||
|
||||
.action-btn.delete:hover {
|
||||
background: #fee2e2;
|
||||
border-color: #ef4444;
|
||||
.btn-delete:hover {
|
||||
background-color: #F1B0B7 !important;
|
||||
border-color: #ED969E !important;
|
||||
}
|
||||
.btn-delete {
|
||||
background-color: #F8D7DA !important;
|
||||
color: #721C24 !important;
|
||||
border: 1px solid #F5C6CB !important;
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease-in-out;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .btn-view {
|
||||
background-color: #1e3a8a !important;
|
||||
color: #e0e0e0 !important;
|
||||
border-color: #374151 !important;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .btn-edit {
|
||||
background-color: #78350f !important;
|
||||
color: #fef3c7 !important;
|
||||
border-color: #374151 !important;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .btn-delete {
|
||||
background-color: #7f1d1d !important;
|
||||
color: #fee2e2 !important;
|
||||
border-color: #374151 !important;
|
||||
}
|
||||
|
||||
/* Badges de status */
|
||||
@ -182,8 +227,8 @@
|
||||
padding: 24px;
|
||||
width: 100%;
|
||||
max-width: 550px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
max-height: 85vh;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
@ -208,6 +253,12 @@
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.modal-card .input-field,
|
||||
.modal-card .select-field,
|
||||
.modal-card textarea {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -241,12 +292,23 @@
|
||||
gap: 10px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
.input-field,
|
||||
.select-field,
|
||||
textarea {
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
/* Inputs e selects */
|
||||
.input-field,
|
||||
.select-field,
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 8px;
|
||||
@ -269,6 +331,18 @@ textarea {
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.financeiro-wrap .input-field:not(.modal-card *),
|
||||
.financeiro-wrap .select-field:not(.modal-card *),
|
||||
.financeiro-wrap textarea:not(.modal-card *) {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.modal-card .input-field,
|
||||
.modal-card .select-field,
|
||||
.modal-card textarea {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Mensagem quando não há pagamentos */
|
||||
.empty {
|
||||
text-align: center;
|
||||
@ -366,4 +440,4 @@ html[data-bs-theme="dark"] textarea:focus {
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -70,10 +70,10 @@
|
||||
}
|
||||
|
||||
/* Cores dos ícones */
|
||||
.stat-icon-wrapper.blue { background-color: #5d5dff; }
|
||||
.stat-icon-wrapper.green { background-color: #30d158; }
|
||||
.stat-icon-wrapper.purple { background-color: #a272ff; }
|
||||
.stat-icon-wrapper.orange { background-color: #f1952e; }
|
||||
.stat-icon-wrapper.blue { background-color: #1D3B88; }
|
||||
.stat-icon-wrapper.green { background-color: #399CE5; }
|
||||
.stat-icon-wrapper.purple { background-color: #5F5DF2; }
|
||||
.stat-icon-wrapper.orange { background-color: #051AFF; }
|
||||
|
||||
/* Seção de Ações Rápidas */
|
||||
.quick-actions h2 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user