michael/fixfin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

V3.4

Browse Source
This commit is contained in:
michael
2026-08-18 09:37:59 +02:00
parent 8726ce1a45
commit ab5c611338
5 changed files with 112 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main.jsx
+1 -1
View File
@@ -129,7 +129,7 @@ function Dashboard({totals,onToggle}){
<section className="toggle-panel"><div><strong>Periodische Kosten in Monats-Saldo einrechnen</strong><span>Jährliche, halbjährliche und vierteljährliche Beträge werden auf einen Monatswert heruntergerechnet.</span></div><button className={`switch ${totals.includePeriodic?'on':''}`} onClick={onToggle} role="switch" aria-checked={totals.includePeriodic}><span/></button></section>
<section className="summary-grid"><Metric label="Eingänge / Monat" value={totals.income} positive/><Metric label="Ausgänge / Monat" value={totals.expense} negative/><Metric label="Periodische Rücklage / Monat" value={totals.periodicExpenseReserve}/><Metric label="Monatlicher Gesamtsaldo" value={totals.balance} positive={totals.balance>=0} negative={totals.balance<0} featured/></section>
{!totals.includePeriodic&&totals.periodicExpenseReserve>0&&<div className="info-note">Periodische Ausgaben von rechnerisch <strong>{formatMoney(totals.periodicExpenseReserve)} / Monat</strong> sind derzeit nicht im Saldo enthalten.</div>}
<section className="panel"><div className="section-head"><div><h2>Saldo je Konto</h2><p>Monatliche Fixwerte plus optional heruntergerechnete periodische Werte.</p></div></div>{totals.accounts.length===0?<Empty text="Lege zuerst ein Konto an."/>:<div className="account-balance-list">{totals.accounts.map(s=><details className="account-balance-card" key={s.account.id}><summary><div className="account-balance-title"><h3>{s.account.name}</h3><span>monatlicher Fix-Saldo</span></div><strong className={`account-balance-value ${s.balance>=0?'good-text':'bad-text'}`}>{s.balance>=0?'+':''}{formatMoney(s.balance)}</strong><span className="accordion-chevron" aria-hidden="true">⌄</span></summary><div className="account-balance-details"><div className="mini-grid"><div><span>Eingänge</span><strong className="good-text">+{formatMoney(s.income)}</strong></div><div><span>Ausgänge</span><strong className="bad-text">−{formatMoney(s.expense)}</strong></div><div><span>Transfers rein</span><strong className="good-text">+{formatMoney(s.transferIn)}</strong></div><div><span>Transfers raus</span><strong className="bad-text">−{formatMoney(s.transferOut)}</strong></div></div></div></details>)}</div>}</section>
<section className="panel"><div className="section-head"><div><h2>Saldo je Konto</h2><p>Monatliche Fixwerte plus optional heruntergerechnete periodische Werte.</p></div></div>{totals.accounts.length===0?<Empty text="Lege zuerst ein Konto an."/>:<div className="account-balance-list">{totals.accounts.map(s=><details className="account-balance-card" key={s.account.id}><summary><div className="account-balance-title"><h3>{s.account.name}</h3><span>monatlicher Fix-Saldo</span></div><div className="account-balance-right"><strong className={`account-balance-value ${s.balance>=0?'good-text':'bad-text'}`}>{s.balance>=0?'+':''}{formatMoney(s.balance)}</strong><span className="accordion-chevron" aria-hidden="true">⌄</span></div></summary><div className="account-balance-details"><div className="mini-grid"><div><span>Eingänge</span><strong className="good-text">+{formatMoney(s.income)}</strong></div><div><span>Ausgänge</span><strong className="bad-text">−{formatMoney(s.expense)}</strong></div><div><span>Transfers rein</span><strong className="good-text">+{formatMoney(s.transferIn)}</strong></div><div><span>Transfers raus</span><strong className="bad-text">−{formatMoney(s.transferOut)}</strong></div></div></div></details>)}</div>}</section>
<section className="panel total-panel"><div><span className="eyebrow">GESAMT</span><h2>Monatlich nach Fixkosten übrig</h2><p>Interne Transfers verändern den Gesamtsaldo nicht.</p></div><div className={`grand-total ${totals.balance>=0?'good-text':'bad-text'}`}>{formatMoney(totals.balance)}</div></section>
</div>;
}
src/styles.css
+19 -9
View File
@@ -187,7 +187,7 @@ code { color:#b8c3ff; }
.year-month-list { gap:9px; }
.year-month-card summary { grid-template-columns:1fr 22px; gap:9px 10px; padding:13px 12px; }
.year-month-heading { grid-column:1; }
.accordion-chevron { grid-column:2; grid-row:1; align-self:center; }
.year-month-card .accordion-chevron { grid-column:2; grid-row:1; align-self:center; }
.year-month-basics { grid-column:1 / -1; grid-row:2; gap:6px; }
.year-month-basics div { background:#101823; border:1px solid #202c3c; border-radius:9px; padding:8px; }
.year-month-basics strong { font-size:12px; }
@@ -213,7 +213,7 @@ code { color:#b8c3ff; }
.mobile-nav { grid-template-columns:repeat(7,minmax(50px,1fr)); }
}
/* v3.2: kompakte Kontosalden als Akkordeon */
/* v3.4: robuste Konto-Saldo-Anzeige auf der Übersicht */
.account-balance-list {
display:grid;
gap:10px;
@@ -231,16 +231,16 @@ code { color:#b8c3ff; }
.account-balance-card summary {
list-style:none;
cursor:pointer;
display:grid;
grid-template-columns:minmax(0,1fr) auto 22px;
gap:14px;
display:flex;
gap:12px;
align-items:center;
justify-content:space-between;
min-height:68px;
padding:12px 15px;
user-select:none;
}
.account-balance-card summary::-webkit-details-marker { display:none; }
.account-balance-title { min-width:0; }
.account-balance-title { min-width:0; overflow:hidden; flex:1 1 auto; }
.account-balance-title h3 {
margin:0;
overflow:hidden;
@@ -253,11 +253,21 @@ code { color:#b8c3ff; }
color:var(--muted);
font-size:11px;
}
.account-balance-right {
flex:0 0 auto;
display:flex;
align-items:center;
justify-content:flex-end;
gap:8px;
min-width:max-content;
}
.account-balance-value {
display:block;
font-size:19px;
font-weight:850;
letter-spacing:-.035em;
white-space:nowrap;
flex:0 0 auto;
}
.account-balance-card[open] .accordion-chevron { transform:rotate(180deg); }
.account-balance-details {
@@ -272,15 +282,15 @@ code { color:#b8c3ff; }
@media (max-width:760px) {
.account-balance-list { gap:8px; }
.account-balance-card summary {
grid-template-columns:minmax(0,1fr) auto 18px;
gap:8px;
min-height:58px;
padding:9px 10px;
}
.account-balance-title h3 { font-size:14px; }
.account-balance-title span { font-size:9px; }
.account-balance-value { font-size:16px; }
.account-balance-card .accordion-chevron { font-size:17px; }
.account-balance-value { font-size:15px; letter-spacing:-.025em; }
.account-balance-right { gap:6px; }
.account-balance-card .accordion-chevron { font-size:17px; flex:0 0 auto; }
.account-balance-details { padding:0 10px 10px; }
.account-balance-details .mini-grid {
gap:8px;