diff --git a/assets/css/main.css b/assets/css/main.css index 303f754..d4193c0 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -237,7 +237,7 @@ html.dark .section-card::before { ========================= */ .dither-shadow { - @apply bg-black dark:bg-neutral-600; + @apply bg-black dark:bg-neutral-400; background-image: radial-gradient(white 1px, transparent 1px); background-size: 2px 2px; } diff --git a/components/AnnualBudget.vue b/components/AnnualBudget.vue index 3433222..16e9a24 100644 --- a/components/AnnualBudget.vue +++ b/components/AnnualBudget.vue @@ -2,114 +2,164 @@
| + Category + | ++ Planned + | ++ % + | +
|---|---|---|
| + REVENUE + | +||
| - Category - | -- Planned - | -% | -
|---|---|---|
| REVENUE | -||
| + {{ category.name }} + | ++ {{ formatCurrency(category.planned) }} + | ++ {{ category.percentage }}% + | +
| - {{ category.name }} - | -- {{ formatCurrency(category.planned) }} - | -{{ category.percentage }}% | -
| + Total Revenue + | ++ {{ formatCurrency(totalRevenuePlanned) }} + | ++ 100% + | +
| Total Revenue | -- {{ formatCurrency(totalRevenuePlanned) }} - | -100% | -
|
+
+
+ + {{ diversificationGuidance }} + ++ Consider developing: {{ suggestedCategories.join(", ") }} + +
+ |
+ ||
|
-
-
- {{ diversificationGuidance }} -- Consider developing: {{ suggestedCategories.join(", ") }} - -
- |
- ||
| + EXPENSES + | +||
| EXPENSES | -||
| + {{ category.name }} + | ++ {{ formatCurrency(category.planned) }} + | ++ {{ category.percentage }}% + | +
| - {{ category.name }} - | -- {{ formatCurrency(category.planned) }} - | -{{ category.percentage }}% | -
| + Total Expenses + | ++ {{ formatCurrency(totalExpensesPlanned) }} + | ++ 100% + | +
| Total Expenses | -- {{ formatCurrency(totalExpensesPlanned) }} - | -100% | -
| NET TOTAL | -- {{ formatCurrency(netTotal) }} - | -- | -
+ Set the percentage added to base payroll for taxes, benefits, and other oncosts. +
+ ++ Example: €100 base payroll + {{ newOncostPct }}% tax = + €{{ Math.round(100 * (1 + newOncostPct / 100)) }} total cost +
++ Set the minimum cash balance that your co-op should never go below. The budget will automatically reduce payroll allocations if needed to maintain this threshold. +
+ ++ Safety buffer: Your co-op will maintain at least + {{ getCurrencySymbol(coopStore.currency) }}{{ formatAmount(newMinCashThreshold) }} + in cash at all times. +
+- What are payroll oncosts? -
-- Payroll oncosts cover taxes, benefits, and other - employee-related expenses beyond base wages. This typically - includes employer payroll taxes, worker's compensation, benefits - contributions, and other statutory requirements. -
-| - Item - | -- {{ month.label }} - | -||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
-
- REVENUE
-
- |
- - | ||||||||||||||||||||||||||||||
| - {{ categoryName }} - | +
| + Item + | ++ {{ month.label }} + | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
-
-
-
+ class="px-4 py-2 font-bold sticky left-0 bg-black dark:bg-white text-white dark:text-black z-10">
+
-
- {{ item.name }}
-
- {{ item.subcategory }}
-
-
+ REVENUE
|
+ + | ||||||||||||
| + {{ categoryName }} + | +|||||||||||||
|
+
+
+
+
+
+
+
+ {{ item.name }}
+
+
+ {{ item.subcategory }}
+
+
+
+ |
+ + + | +||||||||||||
| + TOTAL REVENUE + | - + class="border-r border-black dark:border-neutral-400 px-2 py-2 text-right last:border-r-0 text-black dark:text-white font-mono"> + {{ + formatCurrency(monthlyTotals[month.key]?.revenue || 0) + }} | ||||||||||||
| - TOTAL REVENUE - | -- {{ formatCurrency(monthlyTotals[month.key]?.revenue || 0) }} - | -||||||||||||
|
-
- EXPENSES
-
- |
- - | ||||||||||||
|
- {{ categoryName }}
+ class="px-4 py-2 font-bold sticky left-0 bg-black dark:bg-white text-white dark:text-black z-10">
+
+ EXPENSES
+
+
+ |
+ |||||||||||||
|
-
-
-
-
-
-
- {{ item.subcategory }}
+
+
+
+
+ |
+
+ {{ categoryName }}
+
+
+ |
+
+
-
-
+
-
+
+
+
+ {{ item.subcategory }}
+
+
+
+
+
+
+
+ |
+
+ TOTAL EXPENSES
|
-
+ class="border-r border-neutral-400 dark:border-neutral-600 px-2 py-2 text-right last:border-r-0 text-black dark:text-white font-mono">
+ {{
+ formatCurrency(monthlyTotals[month.key]?.expenses || 0)
+ }}
|
- TOTAL EXPENSES
- |
-
- {{ formatCurrency(monthlyTotals[month.key]?.expenses || 0) }}
- |
-
+ NET INCOME
+ |
+
+ {{
+ formatCurrency(monthlyTotals[month.key]?.net || 0)
+ }}
+ |
+
- NET INCOME
- |
-
- {{ formatCurrency(monthlyTotals[month.key]?.net || 0) }}
- |
-
- CUMULATIVE BALANCE
- |
-
- {{ formatCurrency(cumulativeBalances[month.key] || 0) }}
- |
- |
This will divide
- ${{ newRevenue.annualAmount || 0 }}
equally across all 12 months (${{
newRevenue.annualAmount
? Math.round(newRevenue.annualAmount / 12)
@@ -440,7 +506,9 @@
placeholder="Enter monthly amount (e.g., 1000)"
size="lg">
- $
+ $
@@ -452,7 +520,7 @@
This will set
- ${{ newRevenue.monthlyAmount || 0 }}
for all 12 months
@@ -545,7 +613,9 @@
size="lg"
class="text-sm font-medium w-full">
- $
+ $
@@ -557,11 +627,11 @@
This will divide
- ${{ newExpense.annualAmount || 0 }}
equally across all 12 months (${{
newExpense.annualAmount
? Math.round(newExpense.annualAmount / 12)
@@ -583,7 +653,9 @@
size="lg"
class="text-sm font-medium w-full">
- $
+ $
@@ -595,7 +667,7 @@
This will set
- ${{ newExpense.monthlyAmount || 0 }}
for all 12 months
@@ -638,76 +710,419 @@
-
-
+ This will divide
+ ${{ newRevenue.annualAmount || 0 }}
+ equally across all 12 months (${{
+ newRevenue.annualAmount
+ ? Math.round(newRevenue.annualAmount / 12)
+ : 0
+ }}
+ per month)
+
+ This will set
+ ${{ newRevenue.monthlyAmount || 0 }}
+ for all 12 months
+
+ The revenue item will not change its monthly values. You can
+ adjust them manually in the budget table.
+
+ This will divide
+ ${{ newExpense.annualAmount || 0 }}
+ equally across all 12 months (${{
+ newExpense.annualAmount
+ ? Math.round(newExpense.annualAmount / 12)
+ : 0
+ }}
+ per month)
+
+ This will set
+ ${{ newExpense.monthlyAmount || 0 }}
+ for all 12 months
+
+ The expense item will not change its monthly values. You can
+ adjust them manually in the budget table.
+ Revenue comes from your setup wizard streams and any manual additions:
+ Revenue comes from the streams you set up in the budget builder,
+ and any manual additions to the budget spreadsheet:
+ Payroll uses a cumulative balance approach to ensure sustainability:
+ Payroll uses a cumulative balance approach to
+ make sure members are paid sustainably:
+ Step-by-step process:
- This means payroll varies by month - higher in good cash flow months, lower when cash is tight.
+
+ This means payroll varies by month - higher in good cash flow
+ months, lower when cash is tight.
Shows your running cash position over time:
+ Shows your running cash position over time:
+
- Everyone gets equal hourly wage (${{ coopBuilderStore.equalHourlyWage || 0 }}/hour) based on their monthly hours.
+ Everyone gets equal hourly wage ({{
+ $format.currency(coopBuilderStore.equalHourlyWage || 0)
+ }}/hour) based on their monthly hours.
- Pay is allocated proportionally based on each member's minimum monthly needs, ensuring fair coverage.
+
+ Pay is allocated proportionally based on each member's minimum
+ monthly needs, ensuring fair coverage.
- Pay is allocated proportionally based on hours worked, with higher hours getting more pay.
+
+ Pay is allocated proportionally based on hours worked, with
+ higher hours getting more pay.
- Key insight: This system prioritizes sustainability over theoretical maximums.
- You might not always get full theoretical wages, but you'll never run out of cash.
+
+ This system prioritizes sustainability over
+ theoretical maximum pay. You might not always get full
+ theoretical wages, but this method will prevent you from running
+ out of cash.
📈 Revenue Calculation
-
-
Revenue Calculation
+
+
👥 Smart Payroll Calculation
- Payroll Calculation
+
-
+
💰 Cumulative Balance
-
-
Cumulative Balance
+
+
⚖️ Pay Policy: {{ getPolicyName() }}
-
+ Pay Policy: {{ getPolicyName() }}
+
+