jennie/app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: enhance AnnualBudget component layout with improved dark mode support, streamline table structure, and update CSS for better visual consistency

Browse source
This commit is contained in:
Jennie Robinson Faber 2025-09-10 15:24:18 +01:00
parent 24e8b7a3a8
commit f073f91569
14 changed files with 1440 additions and 922 deletions
Download patch file Download diff file Expand all files Collapse all files

48
stores/budget.ts
View file

@ -416,7 +416,7 @@ export const useBudgetStore = defineStore(
return sum + (m.monthlyPayPlanned || 0);
}, 0);
let monthlyOncostAmount = monthlyAllocatedPayroll * (oncostPct / 100);
let monthlyOncostAmount = Math.round(monthlyAllocatedPayroll * (oncostPct / 100));
// Calculate projected balance after this month's expenses and payroll
const totalExpensesWithPayroll = nonPayrollExpenses + monthlyAllocatedPayroll + monthlyOncostAmount;
@ -442,7 +442,7 @@ export const useBudgetStore = defineStore(
}
monthlyAllocatedPayroll = maxSustainablePayroll;
monthlyOncostAmount = monthlyAllocatedPayroll * (oncostPct / 100);
monthlyOncostAmount = Math.round(monthlyAllocatedPayroll * (oncostPct / 100));
}
// Update running balance with actual net income after payroll adjustments
@ -451,17 +451,17 @@ export const useBudgetStore = defineStore(
// Update this specific month's payroll values
if (basePayrollIndex !== -1) {
budgetWorksheet.value.expenses[basePayrollIndex].monthlyValues[monthKey] = monthlyAllocatedPayroll;
budgetWorksheet.value.expenses[basePayrollIndex].monthlyValues[monthKey] = Math.round(monthlyAllocatedPayroll);
}
if (oncostIndex !== -1) {
budgetWorksheet.value.expenses[oncostIndex].monthlyValues[monthKey] = monthlyOncostAmount;
budgetWorksheet.value.expenses[oncostIndex].monthlyValues[monthKey] = Math.round(monthlyOncostAmount);
}
// Handle legacy single payroll entry
if (legacyIndex !== -1 && basePayrollIndex === -1) {
const combinedPayroll = monthlyAllocatedPayroll * (1 + oncostPct / 100);
budgetWorksheet.value.expenses[legacyIndex].monthlyValues[monthKey] = combinedPayroll;
const combinedPayroll = Math.round(monthlyAllocatedPayroll * (1 + oncostPct / 100));
budgetWorksheet.value.expenses[legacyIndex].monthlyValues[monthKey] = Math.round(combinedPayroll);
}
// Accumulate for annual totals
@ -490,9 +490,9 @@ export const useBudgetStore = defineStore(
// Update annual values based on actual totals
if (basePayrollIndex !== -1) {
budgetWorksheet.value.expenses[basePayrollIndex].values = {
year1: { best: totalAnnualPayroll * 1.2, worst: totalAnnualPayroll * 0.8, mostLikely: totalAnnualPayroll },
year2: { best: totalAnnualPayroll * 1.3, worst: totalAnnualPayroll * 0.9, mostLikely: totalAnnualPayroll * 1.1 },
year3: { best: totalAnnualPayroll * 1.5, worst: totalAnnualPayroll, mostLikely: totalAnnualPayroll * 1.25 }
year1: { best: Math.round(totalAnnualPayroll * 1.2), worst: Math.round(totalAnnualPayroll * 0.8), mostLikely: Math.round(totalAnnualPayroll) },
year2: { best: Math.round(totalAnnualPayroll * 1.3), worst: Math.round(totalAnnualPayroll * 0.9), mostLikely: Math.round(totalAnnualPayroll * 1.1) },
year3: { best: Math.round(totalAnnualPayroll * 1.5), worst: Math.round(totalAnnualPayroll), mostLikely: Math.round(totalAnnualPayroll * 1.25) }
};
}
@ -501,9 +501,9 @@ export const useBudgetStore = defineStore(
budgetWorksheet.value.expenses[oncostIndex].name = `Payroll Taxes & Benefits (${oncostPct}%)`;
budgetWorksheet.value.expenses[oncostIndex].values = {
year1: { best: totalAnnualOncosts * 1.2, worst: totalAnnualOncosts * 0.8, mostLikely: totalAnnualOncosts },
year2: { best: totalAnnualOncosts * 1.3, worst: totalAnnualOncosts * 0.9, mostLikely: totalAnnualOncosts * 1.1 },
year3: { best: totalAnnualOncosts * 1.5, worst: totalAnnualOncosts, mostLikely: totalAnnualOncosts * 1.25 }
year1: { best: Math.round(totalAnnualOncosts * 1.2), worst: Math.round(totalAnnualOncosts * 0.8), mostLikely: Math.round(totalAnnualOncosts) },
year2: { best: Math.round(totalAnnualOncosts * 1.3), worst: Math.round(totalAnnualOncosts * 0.9), mostLikely: Math.round(totalAnnualOncosts * 1.1) },
year3: { best: Math.round(totalAnnualOncosts * 1.5), worst: Math.round(totalAnnualOncosts), mostLikely: Math.round(totalAnnualOncosts * 1.25) }
};
}
@ -511,9 +511,9 @@ export const useBudgetStore = defineStore(
if (legacyIndex !== -1 && basePayrollIndex === -1) {
const totalCombined = totalAnnualPayroll + totalAnnualOncosts;
budgetWorksheet.value.expenses[legacyIndex].values = {
year1: { best: totalCombined * 1.2, worst: totalCombined * 0.8, mostLikely: totalCombined },
year2: { best: totalCombined * 1.3, worst: totalCombined * 0.9, mostLikely: totalCombined * 1.1 },
year3: { best: totalCombined * 1.5, worst: totalCombined, mostLikely: totalCombined * 1.25 }
year1: { best: Math.round(totalCombined * 1.2), worst: Math.round(totalCombined * 0.8), mostLikely: Math.round(totalCombined) },
year2: { best: Math.round(totalCombined * 1.3), worst: Math.round(totalCombined * 0.9), mostLikely: Math.round(totalCombined * 1.1) },
year3: { best: Math.round(totalCombined * 1.5), worst: Math.round(totalCombined), mostLikely: Math.round(totalCombined * 1.25) }
};
}
}
@ -807,19 +807,19 @@ export const useBudgetStore = defineStore(
monthlyValues,
values: {
year1: {
best: annualAmount,
worst: annualAmount * 0.8,
mostLikely: annualAmount,
best: Math.round(annualAmount),
worst: Math.round(annualAmount * 0.8),
mostLikely: Math.round(annualAmount),
},
year2: {
best: annualAmount * 1.1,
worst: annualAmount * 0.9,
mostLikely: annualAmount * 1.05,
best: Math.round(annualAmount * 1.1),
worst: Math.round(annualAmount * 0.9),
mostLikely: Math.round(annualAmount * 1.05),
},
year3: {
best: annualAmount * 1.2,
worst: annualAmount,
mostLikely: annualAmount * 1.1,
best: Math.round(annualAmount * 1.2),
worst: Math.round(annualAmount),
mostLikely: Math.round(annualAmount * 1.1),
},
},
});

2
stores/coopBuilder.ts
View file

@ -51,7 +51,7 @@ export const useCoopBuilderStore = defineStore("coop", {
payrollOncostPct: 25,
// Cash flow management
minCashThreshold: 5000, // Minimum cash balance to maintain
minCashThreshold: 0, // Minimum cash balance to maintain
savingsTargetMonths: 6,
minCashCushion: 10000,