refactor: remove CashFlowChart and UnifiedCashFlowDashboard components, update routing paths in app.vue, and enhance budget page with cumulative balance calculations and payroll explanation modal for improved user experience
This commit is contained in:
parent
864a81065c
commit
f1889b3a70
17 changed files with 922 additions and 1004 deletions
112
pages/budget.vue
112
pages/budget.vue
|
|
@ -28,6 +28,9 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<UButton @click="showCalculationModal = true" variant="ghost" size="sm">
|
||||
How are these calculated?
|
||||
</UButton>
|
||||
<UButton @click="exportBudget" variant="ghost" size="sm">
|
||||
Export
|
||||
</UButton>
|
||||
|
|
@ -222,7 +225,7 @@
|
|||
<div class="font-medium flex items-start gap-2">
|
||||
<UTooltip
|
||||
v-if="isPayrollItem(item.id)"
|
||||
text="Calculated from compensation settings"
|
||||
text="Calculated based on available revenue after overhead costs. This represents realistic, sustainable payroll."
|
||||
:content="{ side: 'top', align: 'start' }">
|
||||
<span class="cursor-help">{{ item.name }}</span>
|
||||
</UTooltip>
|
||||
|
|
@ -315,6 +318,23 @@
|
|||
{{ formatCurrency(monthlyTotals[month.key]?.net || 0) }}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Cumulative Balance Row -->
|
||||
<tr class="border-t-1 border-gray-400 font-bold text-lg bg-blue-50">
|
||||
<td
|
||||
class="border-r-1 border-black px-4 py-3 sticky left-0 bg-blue-50 z-10">
|
||||
CUMULATIVE BALANCE
|
||||
</td>
|
||||
<td
|
||||
v-for="month in monthlyHeaders"
|
||||
:key="month.key"
|
||||
class="border-r border-gray-400 px-2 py-3 text-right last:border-r-0"
|
||||
:class="
|
||||
getCumulativeBalanceClass(cumulativeBalances[month.key] || 0)
|
||||
">
|
||||
{{ formatCurrency(cumulativeBalances[month.key] || 0) }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -622,6 +642,77 @@
|
|||
<PayrollOncostModal
|
||||
v-model:open="showPayrollOncostModal"
|
||||
@save="handlePayrollOncostUpdate" />
|
||||
|
||||
<!-- Calculation Explanation Modal -->
|
||||
<UModal v-model:open="showCalculationModal" title="How Budget Calculations Work">
|
||||
<template #content>
|
||||
<div class="space-y-6 max-w-2xl p-6">
|
||||
<!-- Revenue Section -->
|
||||
<div>
|
||||
<h4 class="font-semibold text-green-600 mb-2">📈 Revenue Calculation</h4>
|
||||
<p class="text-sm text-gray-600 mb-2">Revenue comes from your setup wizard streams and any manual additions:</p>
|
||||
<ul class="text-sm text-gray-600 space-y-1 ml-4">
|
||||
<li>• Monthly amounts you entered for each revenue stream</li>
|
||||
<li>• Varies by month based on your specific projections</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Payroll Section -->
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-600 mb-2">👥 Smart Payroll Calculation</h4>
|
||||
<p class="text-sm text-gray-600 mb-2">Payroll uses a <strong>cumulative balance approach</strong> to ensure sustainability:</p>
|
||||
<div class="bg-blue-50 border border-blue-200 rounded p-3 text-sm">
|
||||
<p class="font-medium mb-2">Step-by-step process:</p>
|
||||
<ol class="space-y-1 ml-4">
|
||||
<li>1. Calculate available funds: Revenue - Other Expenses</li>
|
||||
<li>2. Check if this maintains minimum cash threshold (${{ $format.currency(coopBuilderStore.minCashThreshold || 0) }})</li>
|
||||
<li>3. Allocate using your chosen policy ({{ getPolicyName() }})</li>
|
||||
<li>4. Account for payroll taxes ({{ coopBuilderStore.payrollOncostPct || 0 }}%)</li>
|
||||
<li>5. Ensure cumulative balance doesn't fall below threshold</li>
|
||||
</ol>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 mt-2">
|
||||
This means payroll varies by month - higher in good cash flow months, lower when cash is tight.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Cumulative Balance Section -->
|
||||
<div>
|
||||
<h4 class="font-semibold text-purple-600 mb-2">💰 Cumulative Balance</h4>
|
||||
<p class="text-sm text-gray-600 mb-2">Shows your running cash position over time:</p>
|
||||
<ul class="text-sm text-gray-600 space-y-1 ml-4">
|
||||
<li>• Starts at $0 (current cash position)</li>
|
||||
<li>• Adds each month's net income (Revenue - All Expenses)</li>
|
||||
<li>• Helps you see when cash might run low</li>
|
||||
<li>• Payroll is reduced to prevent going below minimum threshold</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Policy Explanation -->
|
||||
<div>
|
||||
<h4 class="font-semibold text-orange-600 mb-2">⚖️ Pay Policy: {{ getPolicyName() }}</h4>
|
||||
<div class="text-sm text-gray-600">
|
||||
<p v-if="coopBuilderStore.policy?.relationship === 'equal-pay'">
|
||||
Everyone gets equal hourly wage (${{ coopBuilderStore.equalHourlyWage || 0 }}/hour) based on their monthly hours.
|
||||
</p>
|
||||
<p v-else-if="coopBuilderStore.policy?.relationship === 'needs-weighted'">
|
||||
Pay is allocated proportionally based on each member's minimum monthly needs, ensuring fair coverage.
|
||||
</p>
|
||||
<p v-else-if="coopBuilderStore.policy?.relationship === 'hours-weighted'">
|
||||
Pay is allocated proportionally based on hours worked, with higher hours getting more pay.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 border border-gray-200 rounded p-3">
|
||||
<p class="text-sm text-gray-700">
|
||||
<strong>Key insight:</strong> This system prioritizes sustainability over theoretical maximums.
|
||||
You might not always get full theoretical wages, but you'll never run out of cash.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -749,6 +840,7 @@ const activeView = ref("monthly");
|
|||
const showAddRevenueModal = ref(false);
|
||||
const showAddExpenseModal = ref(false);
|
||||
const showPayrollOncostModal = ref(false);
|
||||
const showCalculationModal = ref(false);
|
||||
const activeTab = ref(0);
|
||||
const highlightedItemId = ref<string | null>(null);
|
||||
|
||||
|
|
@ -863,6 +955,7 @@ const budgetWorksheet = computed(
|
|||
const groupedRevenue = computed(() => budgetStore.groupedRevenue);
|
||||
const groupedExpenses = computed(() => budgetStore.groupedExpenses);
|
||||
const monthlyTotals = computed(() => budgetStore.monthlyTotals);
|
||||
const cumulativeBalances = computed(() => budgetStore.cumulativeBalances);
|
||||
|
||||
// Initialize on mount
|
||||
// Removed duplicate onMounted - initialization is now handled above
|
||||
|
|
@ -1141,6 +1234,23 @@ function getNetIncomeClass(amount: number): string {
|
|||
return "text-gray-600";
|
||||
}
|
||||
|
||||
function getCumulativeBalanceClass(amount: number): string {
|
||||
if (amount > 50000) return "text-green-700 font-bold"; // Healthy cash position
|
||||
if (amount > 10000) return "text-green-600 font-bold"; // Good cash position
|
||||
if (amount > 0) return "text-blue-600 font-bold"; // Positive but low
|
||||
if (amount > -10000) return "text-orange-600 font-bold"; // Concerning
|
||||
return "text-red-700 font-bold"; // Critical cash position
|
||||
}
|
||||
|
||||
function getPolicyName(): string {
|
||||
const policyType = coopBuilderStore.policy?.relationship || 'equal-pay';
|
||||
|
||||
if (policyType === 'equal-pay') return 'Equal Pay';
|
||||
if (policyType === 'hours-weighted') return 'Hours Based';
|
||||
if (policyType === 'needs-weighted') return 'Needs Weighted';
|
||||
return 'Equal Pay';
|
||||
}
|
||||
|
||||
// Payroll oncost handling
|
||||
function handlePayrollOncostUpdate(newPercentage: number) {
|
||||
// Update the coop store
|
||||
|
|
|
|||
|
|
@ -1,30 +0,0 @@
|
|||
<template>
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<div class="mb-8">
|
||||
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
Cash Flow Analysis
|
||||
</h1>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Detailed cash flow projections with one-time events and scenario planning.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-8">
|
||||
<!-- Unified Cash Flow Dashboard -->
|
||||
<UnifiedCashFlowDashboard />
|
||||
|
||||
<!-- One-Off Events Editor -->
|
||||
<OneOffEventEditor />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// Component auto-imported
|
||||
|
||||
// SEO
|
||||
useSeoMeta({
|
||||
title: 'Cash Flow Analysis - Plan Your Cooperative Finances',
|
||||
description: 'Detailed cash flow analysis with runway projections, one-time events, and scenario planning for your cooperative.'
|
||||
})
|
||||
</script>
|
||||
|
|
@ -64,7 +64,7 @@ onMounted(async () => {
|
|||
const policiesStore = usePoliciesStore()
|
||||
|
||||
// Update reactive values
|
||||
currentMode.value = policiesStore.operatingMode || 'minimum'
|
||||
currentMode.value = 'target' // Simplified - always use target mode
|
||||
memberCount.value = membersStore.members?.length || 0
|
||||
streamCount.value = streamsStore.streams?.length || 0
|
||||
|
||||
|
|
|
|||
|
|
@ -1,166 +0,0 @@
|
|||
<template>
|
||||
<section class="py-8 space-y-6 max-w-4xl mx-auto">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-2xl font-semibold">Compensation</h2>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm">Mode:</span>
|
||||
<button
|
||||
@click="setOperatingMode('min')"
|
||||
class="px-3 py-1 text-sm font-bold border-2 border-black"
|
||||
:class="coopStore.operatingMode === 'min' ? 'bg-black text-white' : 'bg-white'">
|
||||
MIN
|
||||
</button>
|
||||
<button
|
||||
@click="setOperatingMode('target')"
|
||||
class="px-3 py-1 text-sm font-bold border-2 border-black"
|
||||
:class="coopStore.operatingMode === 'target' ? 'bg-black text-white' : 'bg-white'">
|
||||
TARGET
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Simple Policy Display -->
|
||||
<div class="border-2 border-black bg-white p-4">
|
||||
<div class="text-lg font-bold mb-2">
|
||||
{{ getPolicyName() }} Policy
|
||||
</div>
|
||||
<div class="text-2xl font-mono">
|
||||
{{ getPolicyFormula() }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Member List -->
|
||||
<div class="border-2 border-black bg-white">
|
||||
<div class="border-b-2 border-black p-4">
|
||||
<h3 class="font-bold">Members ({{ coopStore.members.length }})</h3>
|
||||
</div>
|
||||
<div class="divide-y divide-gray-300">
|
||||
<div v-if="coopStore.members.length === 0" class="p-4 text-gray-500 text-center">
|
||||
No members yet. Add members in Setup Wizard.
|
||||
</div>
|
||||
<div v-for="member in membersWithPay" :key="member.id" class="p-4 flex justify-between items-center">
|
||||
<div>
|
||||
<div class="font-bold">{{ member.name || 'Unnamed' }}</div>
|
||||
<div class="text-sm text-gray-600">
|
||||
<span v-if="coopStore.policy?.relationship === 'needs-weighted'">
|
||||
Needs: {{ $format.currency(member.minMonthlyNeeds || 0) }}/month
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ member.hoursPerMonth || 0 }} hrs/month
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="font-mono font-bold">{{ $format.currency(member.expectedPay) }}</div>
|
||||
<div class="text-xs" :class="member.coverage >= 100 ? 'text-green-600' : 'text-red-600'">
|
||||
{{ member.coverage }}% covered
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Total -->
|
||||
<div class="border-2 border-black bg-gray-100 p-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="font-bold">Total Monthly Payroll</span>
|
||||
<span class="text-xl font-mono font-bold">{{ $format.currency(totalPayroll) }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center mt-2 text-sm text-gray-600">
|
||||
<span>+ Oncosts ({{ coopStore.payrollOncostPct }}%)</span>
|
||||
<span class="font-mono">{{ $format.currency(totalPayroll * coopStore.payrollOncostPct / 100) }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center mt-2 pt-2 border-t border-gray-400">
|
||||
<span class="font-bold">Total Cost</span>
|
||||
<span class="text-xl font-mono font-bold">{{ $format.currency(totalPayroll * (1 + coopStore.payrollOncostPct / 100)) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
@click="navigateTo('/coop-builder')"
|
||||
class="px-4 py-2 border-2 border-black bg-white font-bold hover:bg-gray-100">
|
||||
Edit in Setup Wizard
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { $format } = useNuxtApp();
|
||||
const coopStore = useCoopBuilderStore();
|
||||
|
||||
// Calculate member pay based on policy
|
||||
const membersWithPay = computed(() => {
|
||||
const policyType = coopStore.policy?.relationship || 'equal-pay';
|
||||
const totalHours = coopStore.members.reduce((sum, m) => sum + (m.hoursPerMonth || 0), 0);
|
||||
const totalNeeds = coopStore.members.reduce((sum, m) => sum + (m.minMonthlyNeeds || 0), 0);
|
||||
|
||||
return coopStore.members.map(member => {
|
||||
let expectedPay = 0;
|
||||
const hours = member.hoursPerMonth || 0;
|
||||
|
||||
if (policyType === 'equal-pay') {
|
||||
// Equal pay: hours × wage
|
||||
expectedPay = hours * coopStore.equalHourlyWage;
|
||||
} else if (policyType === 'hours-weighted') {
|
||||
// Hours weighted: proportion of total hours
|
||||
expectedPay = totalHours > 0 ? (hours / totalHours) * (totalHours * coopStore.equalHourlyWage) : 0;
|
||||
} else if (policyType === 'needs-weighted') {
|
||||
// Needs weighted: based on individual needs
|
||||
const needs = member.minMonthlyNeeds || 0;
|
||||
expectedPay = totalNeeds > 0 ? (needs / totalNeeds) * (totalHours * coopStore.equalHourlyWage) : 0;
|
||||
}
|
||||
|
||||
const actualPay = member.monthlyPayPlanned || expectedPay;
|
||||
const coverage = expectedPay > 0 ? Math.round((actualPay / expectedPay) * 100) : 100;
|
||||
|
||||
return {
|
||||
...member,
|
||||
expectedPay,
|
||||
actualPay,
|
||||
coverage
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
// Total payroll
|
||||
const totalPayroll = computed(() => {
|
||||
return membersWithPay.value.reduce((sum, m) => sum + m.expectedPay, 0);
|
||||
});
|
||||
|
||||
// Operating mode toggle
|
||||
function setOperatingMode(mode: 'min' | 'target') {
|
||||
coopStore.setOperatingMode(mode);
|
||||
}
|
||||
|
||||
// Get current policy name
|
||||
function getPolicyName() {
|
||||
// Check both coopStore.policy and the root level policy.relationship
|
||||
const policyType = coopStore.policy?.relationship || coopStore.policy || 'equal-pay';
|
||||
|
||||
if (policyType === 'equal-pay') return 'Equal Pay';
|
||||
if (policyType === 'hours-weighted') return 'Hours Based';
|
||||
if (policyType === 'needs-weighted') return 'Needs Based';
|
||||
return 'Equal Pay'; // fallback
|
||||
}
|
||||
|
||||
// Get policy formula display
|
||||
function getPolicyFormula() {
|
||||
const policyType = coopStore.policy?.relationship || coopStore.policy || 'equal-pay';
|
||||
const mode = coopStore.operatingMode === 'target' ? 'Target' : 'Min';
|
||||
|
||||
if (policyType === 'equal-pay') {
|
||||
return `${$format.currency(coopStore.equalHourlyWage)}/hour × ${mode} Hours`;
|
||||
}
|
||||
if (policyType === 'hours-weighted') {
|
||||
return `Based on ${mode} Hours Proportion`;
|
||||
}
|
||||
if (policyType === 'needs-weighted') {
|
||||
return `Based on Individual Needs`;
|
||||
}
|
||||
return `${$format.currency(coopStore.equalHourlyWage)}/hour × ${mode} Hours`;
|
||||
}
|
||||
</script>
|
||||
|
|
@ -4,9 +4,6 @@
|
|||
<div>
|
||||
<h2 class="text-2xl font-semibold">Compensation</h2>
|
||||
<div class="flex items-center gap-2 mt-1">
|
||||
<span class="px-2 py-1 border border-black bg-white text-xs font-bold uppercase">
|
||||
{{ policiesStore.operatingMode === 'target' ? 'Target Mode' : 'Min Mode' }}
|
||||
</span>
|
||||
<span class="text-xs font-mono">
|
||||
Runway: {{ Math.round(metrics.runway) }}mo
|
||||
</span>
|
||||
|
|
@ -224,7 +221,7 @@ const metrics = computed(() => {
|
|||
);
|
||||
|
||||
// Use integrated runway calculations that respect operating mode
|
||||
const currentMode = policiesStore.operatingMode || 'minimum';
|
||||
const currentMode = 'target'; // Always target mode now
|
||||
const monthlyBurn = getMonthlyBurn(currentMode);
|
||||
|
||||
// Use actual cash store values with fallback
|
||||
|
|
|
|||
84
pages/project-budget.vue
Normal file
84
pages/project-budget.vue
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
<template>
|
||||
<div class="space-y-8">
|
||||
<div class="text-center">
|
||||
<h1 class="text-3xl font-bold mb-4">Project Budget Estimate</h1>
|
||||
<p class="text-gray-600 max-w-2xl mx-auto mb-4">
|
||||
Get a quick estimate of what it would cost to build your project with fair pay.
|
||||
This tool helps worker co-ops sketch project budgets and break-even scenarios.
|
||||
</p>
|
||||
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4 max-w-2xl mx-auto">
|
||||
<div class="flex items-start gap-2">
|
||||
<UIcon name="i-heroicons-information-circle" class="h-5 w-5 text-blue-500 mt-0.5 flex-shrink-0" />
|
||||
<div class="text-sm text-blue-800">
|
||||
<p class="font-medium mb-1">About the calculations:</p>
|
||||
<p>These estimates are based on <strong>sustainable payroll</strong> — what you can actually afford to pay based on your revenue minus overhead costs. This may be different from theoretical maximum wages if revenue is limited.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="membersWithPay.length === 0" class="text-center py-8">
|
||||
<p class="text-gray-600 mb-4">No team members set up yet.</p>
|
||||
<NuxtLink
|
||||
to="/coop-builder"
|
||||
class="px-4 py-2 border-2 border-black bg-white font-bold hover:bg-gray-100"
|
||||
>
|
||||
Set up your team in Setup Wizard
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<ProjectBudgetEstimate
|
||||
v-else
|
||||
:members="membersWithPay"
|
||||
:oncost-rate="coopStore.payrollOncostPct / 100"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const coopStore = useCoopBuilderStore()
|
||||
const budgetStore = useBudgetStore()
|
||||
|
||||
// Calculate member pay using the same allocation logic as the budget system
|
||||
const membersWithPay = computed(() => {
|
||||
// Get current month's payroll from budget store (matches budget page)
|
||||
const today = new Date()
|
||||
const currentMonthKey = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, "0")}`
|
||||
|
||||
const payrollExpense = budgetStore.budgetWorksheet.expenses.find(item =>
|
||||
item.id === "expense-payroll-base" || item.id === "expense-payroll"
|
||||
)
|
||||
const actualPayrollBudget = payrollExpense?.monthlyValues?.[currentMonthKey] || 0
|
||||
|
||||
// Use the member's desired hours (targetHours if available, otherwise hoursPerMonth)
|
||||
const getHoursForMember = (member: any) => {
|
||||
return member.capacity?.targetHours || member.hoursPerMonth || 0
|
||||
}
|
||||
|
||||
// Get theoretical allocation then scale to actual budget
|
||||
const { allocatePayroll } = useCoopBuilder()
|
||||
const theoreticalMembers = allocatePayroll()
|
||||
const theoreticalTotal = theoreticalMembers.reduce((sum, m) => sum + (m.monthlyPayPlanned || 0), 0)
|
||||
const scaleFactor = theoreticalTotal > 0 ? actualPayrollBudget / theoreticalTotal : 0
|
||||
|
||||
const allocatedMembers = theoreticalMembers.map(member => ({
|
||||
...member,
|
||||
monthlyPayPlanned: (member.monthlyPayPlanned || 0) * scaleFactor
|
||||
}))
|
||||
|
||||
return allocatedMembers.map(member => {
|
||||
const hours = getHoursForMember(member)
|
||||
|
||||
return {
|
||||
name: member.name || 'Unnamed',
|
||||
hoursPerMonth: hours,
|
||||
monthlyPay: member.monthlyPayPlanned || 0
|
||||
}
|
||||
}).filter(m => m.hoursPerMonth > 0) // Only include members with hours
|
||||
})
|
||||
|
||||
// Set page meta
|
||||
definePageMeta({
|
||||
title: 'Project Budget Estimate'
|
||||
})
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue