283 lines
8.7 KiB
Vue
283 lines
8.7 KiB
Vue
<template>
|
|
<div class="max-w-4xl mx-auto space-y-6">
|
|
<!-- Section Header -->
|
|
<div class="mb-8">
|
|
<h3 class="text-2xl font-black text-black dark:text-white mb-2">
|
|
Where does your money go?
|
|
</h3>
|
|
<p class="text-neutral-600 dark:text-neutral-200">
|
|
Add costs like rent + utilities, software licenses, insurance, lawyer
|
|
fees, accountant fees, and other recurring expenses.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Overhead Costs -->
|
|
<div class="space-y-4">
|
|
<div
|
|
v-if="overheadCosts.length > 0"
|
|
class="flex items-center justify-between">
|
|
<h4 class="text-lg font-bold text-black dark:text-white">Overhead</h4>
|
|
</div>
|
|
|
|
<div
|
|
v-if="overheadCosts.length === 0"
|
|
class="text-center py-12 border-2 border-dashed border-neutral-300 dark:border-neutral-600 rounded-xl bg-white dark:bg-neutral-950 shadow-sm">
|
|
<h4 class="font-medium text-neutral-900 dark:text-neutral-100 mb-2">
|
|
No overhead costs yet
|
|
</h4>
|
|
<p class="text-sm text-neutral-500 dark:text-neutral-400 mb-4">
|
|
Get started by adding your first overhead cost.
|
|
</p>
|
|
<UButton
|
|
@click="addOverheadCost"
|
|
size="lg"
|
|
variant="solid"
|
|
color="primary">
|
|
<UIcon name="i-heroicons-plus" class="mr-2" />
|
|
Add your first cost
|
|
</UButton>
|
|
</div>
|
|
|
|
<div
|
|
v-for="cost in overheadCosts"
|
|
:key="cost.id"
|
|
class="p-6 border-2 border-black dark:border-neutral-400 rounded-xl bg-white dark:bg-neutral-950 shadow-md">
|
|
<!-- Header row with name and delete button -->
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="flex items-center gap-4 flex-1">
|
|
<UInput
|
|
v-model="cost.name"
|
|
placeholder="Office rent"
|
|
size="xl"
|
|
class="text-xl w-full font-bold flex-1"
|
|
@update:model-value="saveCost(cost)"
|
|
@blur="saveCost(cost)" />
|
|
</div>
|
|
<UButton
|
|
size="xs"
|
|
variant="solid"
|
|
color="error"
|
|
class="ml-4"
|
|
@click="removeCost(cost.id)"
|
|
:ui="{
|
|
base: 'cursor-pointer hover:opacity-90 transition-opacity',
|
|
}">
|
|
<UIcon name="i-heroicons-trash" class="w-4 h-4" />
|
|
</UButton>
|
|
</div>
|
|
|
|
<!-- Fields grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<UFormField label="Category">
|
|
<USelect
|
|
v-model="cost.category"
|
|
:items="categoryOptions"
|
|
size="md"
|
|
class="text-sm font-medium w-full"
|
|
@update:model-value="saveCost(cost)" />
|
|
</UFormField>
|
|
|
|
<UFormField
|
|
:label="
|
|
cost.amountType === 'annual' ? 'Annual Amount' : 'Monthly Amount'
|
|
"
|
|
required>
|
|
<div class="flex gap-2">
|
|
<UInput
|
|
:value="
|
|
cost.amountType === 'annual' ? cost.annualAmount : cost.amount
|
|
"
|
|
type="text"
|
|
:placeholder="cost.amountType === 'annual' ? '9600' : '800'"
|
|
size="md"
|
|
class="text-sm font-medium w-full"
|
|
@update:model-value="validateAndSaveAmount($event, cost)"
|
|
@blur="saveCost(cost)">
|
|
<template #leading>
|
|
<span class="text-neutral-500">{{ currencySymbol }}</span>
|
|
</template>
|
|
</UInput>
|
|
<UButtonGroup size="md">
|
|
<UButton
|
|
:variant="cost.amountType === 'monthly' ? 'solid' : 'outline'"
|
|
color="primary"
|
|
@click="switchAmountType(cost, 'monthly')"
|
|
class="text-xs">
|
|
Monthly
|
|
</UButton>
|
|
<UButton
|
|
:variant="cost.amountType === 'annual' ? 'solid' : 'outline'"
|
|
color="primary"
|
|
@click="switchAmountType(cost, 'annual')"
|
|
class="text-xs">
|
|
Annual
|
|
</UButton>
|
|
</UButtonGroup>
|
|
</div>
|
|
<p class="text-xs text-neutral-500 dark:text-neutral-400 mt-1">
|
|
<template v-if="cost.amountType === 'annual'">
|
|
{{ currencySymbol
|
|
}}{{ Math.round((cost.annualAmount || 0) / 12) }} per month
|
|
</template>
|
|
<template v-else>
|
|
{{ currencySymbol }}{{ (cost.amount || 0) * 12 }} per year
|
|
</template>
|
|
</p>
|
|
</UFormField>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add Cost Button (when items exist) -->
|
|
<div v-if="overheadCosts.length > 0" class="flex justify-center">
|
|
<UButton
|
|
@click="addOverheadCost"
|
|
size="lg"
|
|
variant="solid"
|
|
:ui="{
|
|
base: 'cursor-pointer hover:scale-105 transition-transform',
|
|
leadingIcon: 'hover:rotate-90 transition-transform',
|
|
}">
|
|
<UIcon name="i-heroicons-plus" class="mr-2" />
|
|
Add another cost
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useDebounceFn } from "@vueuse/core";
|
|
const emit = defineEmits<{
|
|
"save-status": [status: "saving" | "saved" | "error"];
|
|
}>();
|
|
|
|
// Store and Currency
|
|
const coop = useCoopBuilder();
|
|
const { currencySymbol } = useCurrency();
|
|
|
|
// Get the store directly for overhead costs
|
|
const store = useCoopBuilderStore();
|
|
|
|
// Computed for overhead costs (from store) with amountType defaults
|
|
const overheadCosts = computed(() =>
|
|
(store.overheadCosts || []).map((cost) => ({
|
|
...cost,
|
|
amountType: cost.amountType || "monthly",
|
|
annualAmount: cost.annualAmount || (cost.amount || 0) * 12,
|
|
}))
|
|
);
|
|
|
|
// Operating mode removed - always use target mode
|
|
|
|
// Category options
|
|
const categoryOptions = [
|
|
{ label: "Operations", value: "Operations" },
|
|
{ label: "Tools & Software", value: "Tools" },
|
|
{ label: "Professional Services", value: "Professional" },
|
|
{ label: "Marketing", value: "Marketing" },
|
|
{ label: "Other", value: "Other" },
|
|
];
|
|
|
|
// Computeds
|
|
const totalMonthlyCosts = computed(() =>
|
|
overheadCosts.value.reduce((sum, cost) => sum + (cost.amount || 0), 0)
|
|
);
|
|
|
|
const largestCost = computed(() => {
|
|
if (overheadCosts.value.length === 0) return 0;
|
|
return Math.max(...overheadCosts.value.map((c) => c.amount || 0));
|
|
});
|
|
|
|
const avgCostPerItem = computed(() => {
|
|
if (overheadCosts.value.length === 0) return 0;
|
|
return Math.round(totalMonthlyCosts.value / overheadCosts.value.length);
|
|
});
|
|
|
|
// Live-write with debounce
|
|
const debouncedSave = useDebounceFn((cost: any) => {
|
|
emit("save-status", "saving");
|
|
|
|
try {
|
|
// Use store's upsert method
|
|
store.upsertOverheadCost(cost);
|
|
emit("save-status", "saved");
|
|
} catch (error) {
|
|
console.error("Failed to save cost:", error);
|
|
emit("save-status", "error");
|
|
}
|
|
}, 300);
|
|
|
|
function saveCost(cost: any) {
|
|
const hasValidAmount =
|
|
cost.amountType === "annual" ? cost.annualAmount >= 0 : cost.amount >= 0;
|
|
|
|
if (cost.name && hasValidAmount) {
|
|
debouncedSave(cost);
|
|
}
|
|
}
|
|
|
|
// Immediate save without debounce for UI responsiveness
|
|
function saveCostImmediate(cost: any) {
|
|
try {
|
|
// Use store's upsert method directly
|
|
store.upsertOverheadCost(cost);
|
|
} catch (error) {
|
|
console.error("Failed to save cost:", error);
|
|
}
|
|
}
|
|
|
|
// Validation function for amount
|
|
function validateAndSaveAmount(value: string, cost: any) {
|
|
const numValue = parseFloat(value.replace(/[^\d.]/g, ""));
|
|
const validValue = isNaN(numValue) ? 0 : Math.max(0, numValue);
|
|
|
|
if (cost.amountType === "annual") {
|
|
cost.annualAmount = validValue;
|
|
cost.amount = Math.round(validValue / 12);
|
|
} else {
|
|
cost.amount = validValue;
|
|
cost.annualAmount = validValue * 12;
|
|
}
|
|
|
|
saveCost(cost);
|
|
}
|
|
|
|
// Function to switch between annual and monthly
|
|
function switchAmountType(cost: any, type: "annual" | "monthly") {
|
|
cost.amountType = type;
|
|
|
|
// Recalculate values based on new type
|
|
if (type === "annual") {
|
|
if (!cost.annualAmount) {
|
|
cost.annualAmount = (cost.amount || 0) * 12;
|
|
}
|
|
} else {
|
|
if (!cost.amount) {
|
|
cost.amount = Math.round((cost.annualAmount || 0) / 12);
|
|
}
|
|
}
|
|
|
|
// Save immediately without debounce for instant UI update
|
|
saveCostImmediate(cost);
|
|
}
|
|
|
|
function addOverheadCost() {
|
|
const newCost = {
|
|
id: Date.now().toString(),
|
|
name: "",
|
|
amount: 0,
|
|
annualAmount: 0,
|
|
amountType: "monthly",
|
|
category: "Operations",
|
|
recurring: true,
|
|
};
|
|
|
|
store.addOverheadCost(newCost);
|
|
emit("save-status", "saved");
|
|
}
|
|
|
|
function removeCost(id: string) {
|
|
store.removeOverheadCost(id);
|
|
emit("save-status", "saved");
|
|
}
|
|
</script>
|