feat: add initial application structure with configuration, UI components, and state management
This commit is contained in:
parent
fadf94002c
commit
0af6b17792
56 changed files with 6137 additions and 129 deletions
405
components/WizardRevenueStep.vue
Normal file
405
components/WizardRevenueStep.vue
Normal file
|
|
@ -0,0 +1,405 @@
|
|||
<template>
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<h3 class="text-lg font-medium mb-4">Revenue Streams</h3>
|
||||
<p class="text-gray-600 mb-6">
|
||||
Plan your revenue mix with target percentages and payout terms.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Revenue Streams -->
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<h4 class="font-medium">Revenue Sources</h4>
|
||||
<UButton size="sm" @click="addRevenueStream" icon="i-heroicons-plus">
|
||||
Add Stream
|
||||
</UButton>
|
||||
</div>
|
||||
|
||||
<div v-if="streams.length === 0" class="text-center py-8 text-gray-500">
|
||||
<p>No revenue streams added yet.</p>
|
||||
<p class="text-sm">
|
||||
Add streams like client work, grants, sales, or other income sources.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="stream in streams"
|
||||
:key="stream.id"
|
||||
class="p-4 border border-gray-200 rounded-lg">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<!-- Basic Info -->
|
||||
<div class="space-y-4">
|
||||
<UFormField label="Stream Name" required>
|
||||
<USelectMenu
|
||||
v-model="stream.name"
|
||||
:items="nameOptionsByCategory[stream.category] || []"
|
||||
placeholder="Select or type a source name"
|
||||
creatable
|
||||
searchable
|
||||
@update:model-value="saveStream(stream)" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Category" required>
|
||||
<USelect
|
||||
v-model="stream.category"
|
||||
:items="categoryOptions"
|
||||
@update:model-value="saveStream(stream)" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Certainty Level">
|
||||
<USelect
|
||||
v-model="stream.certainty"
|
||||
:items="certaintyOptions"
|
||||
@update:model-value="saveStream(stream)" />
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<!-- Financial Details -->
|
||||
<div class="space-y-4">
|
||||
<UFormField label="Target %" required>
|
||||
<UInput
|
||||
v-model.number="stream.targetPct"
|
||||
type="number"
|
||||
min="0"
|
||||
max="100"
|
||||
placeholder="40"
|
||||
@update:model-value="saveStream(stream)"
|
||||
@blur="saveStream(stream)">
|
||||
<template #trailing>
|
||||
<span class="text-gray-500">%</span>
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Monthly Target">
|
||||
<UInput
|
||||
v-model.number="stream.targetMonthlyAmount"
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.01"
|
||||
placeholder="5000.00"
|
||||
@update:model-value="saveStream(stream)"
|
||||
@blur="saveStream(stream)">
|
||||
<template #leading>
|
||||
<span class="text-gray-500">€</span>
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormField>
|
||||
|
||||
<UFormField
|
||||
label="Payout Delay"
|
||||
hint="Days from earning to payment">
|
||||
<UInput
|
||||
v-model.number="stream.payoutDelayDays"
|
||||
type="number"
|
||||
min="0"
|
||||
placeholder="30"
|
||||
@update:model-value="saveStream(stream)"
|
||||
@blur="saveStream(stream)">
|
||||
<template #trailing>
|
||||
<span class="text-gray-500">days</span>
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Advanced Details (Collapsible) -->
|
||||
<UAccordion
|
||||
:items="[
|
||||
{ label: 'Advanced Settings', slot: 'advanced-' + stream.id },
|
||||
]"
|
||||
class="mt-4">
|
||||
<template #[`advanced-${stream.id}`]>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 pt-2">
|
||||
<UFormField label="Platform Fee %">
|
||||
<UInput
|
||||
v-model.number="stream.platformFeePct"
|
||||
type="number"
|
||||
min="0"
|
||||
max="100"
|
||||
placeholder="3"
|
||||
@update:model-value="saveStream(stream)"
|
||||
@blur="saveStream(stream)">
|
||||
<template #trailing>
|
||||
<span class="text-gray-500">%</span>
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Revenue Share %">
|
||||
<UInput
|
||||
v-model.number="stream.revenueSharePct"
|
||||
type="number"
|
||||
min="0"
|
||||
max="100"
|
||||
placeholder="0"
|
||||
@update:model-value="saveStream(stream)"
|
||||
@blur="saveStream(stream)">
|
||||
<template #trailing>
|
||||
<span class="text-gray-500">%</span>
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Payment Terms">
|
||||
<UInput
|
||||
v-model="stream.terms"
|
||||
placeholder="Net 30"
|
||||
@update:model-value="saveStream(stream)"
|
||||
@blur="saveStream(stream)" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Fund Restrictions">
|
||||
<USelect
|
||||
v-model="stream.restrictions"
|
||||
:items="restrictionOptions"
|
||||
@update:model-value="saveStream(stream)" />
|
||||
</UFormField>
|
||||
</div>
|
||||
</template>
|
||||
</UAccordion>
|
||||
|
||||
<div class="flex justify-end mt-4 pt-4 border-t border-gray-100">
|
||||
<UButton
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
color="red"
|
||||
@click="removeStream(stream.id)">
|
||||
Remove
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mix Validation -->
|
||||
<div v-if="streams.length > 0" class="bg-yellow-50 rounded-lg p-4">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<UIcon
|
||||
name="i-heroicons-exclamation-triangle"
|
||||
class="w-4 h-4 text-yellow-600" />
|
||||
<h4 class="font-medium text-sm text-yellow-900">Revenue Mix Status</h4>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 gap-4 text-sm">
|
||||
<div>
|
||||
<span class="text-yellow-700">Total target %:</span>
|
||||
<span
|
||||
class="font-medium ml-1"
|
||||
:class="totalTargetPct === 100 ? 'text-green-700' : 'text-red-700'">
|
||||
{{ totalTargetPct }}%
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-yellow-700">Top source:</span>
|
||||
<span class="font-medium ml-1">{{ topSourcePct }}%</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-yellow-700">Concentration:</span>
|
||||
<UBadge
|
||||
:color="concentrationColor"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
class="ml-1">
|
||||
{{ concentrationStatus }}
|
||||
</UBadge>
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="totalTargetPct !== 100" class="text-xs text-yellow-700 mt-2">
|
||||
Target percentages should add up to 100%. Currently
|
||||
{{ totalTargetPct > 100 ? "over" : "under" }} by
|
||||
{{ Math.abs(100 - totalTargetPct) }}%.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Summary -->
|
||||
<div class="bg-gray-50 rounded-lg p-4">
|
||||
<h4 class="font-medium text-sm mb-2">Revenue Summary</h4>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
|
||||
<div>
|
||||
<span class="text-gray-600">Total streams:</span>
|
||||
<span class="font-medium ml-1">{{ streams.length }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-gray-600">Monthly target:</span>
|
||||
<span class="font-medium ml-1">€{{ totalMonthlyTarget }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-gray-600">Avg payout delay:</span>
|
||||
<span class="font-medium ml-1">{{ avgPayoutDelay }} days</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-gray-600">Committed %:</span>
|
||||
<span class="font-medium ml-1">{{ committedPercentage }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useDebounceFn } from "@vueuse/core";
|
||||
import { storeToRefs } from "pinia";
|
||||
const emit = defineEmits<{
|
||||
"save-status": [status: "saving" | "saved" | "error"];
|
||||
}>();
|
||||
|
||||
// Store
|
||||
const streamsStore = useStreamsStore();
|
||||
const { streams } = storeToRefs(streamsStore);
|
||||
|
||||
// Options
|
||||
const categoryOptions = [
|
||||
{ label: "Games & Products", value: "games" },
|
||||
{ label: "Services & Contracts", value: "services" },
|
||||
{ label: "Grants & Funding", value: "grants" },
|
||||
{ label: "Community Support", value: "community" },
|
||||
{ label: "Partnerships", value: "partnerships" },
|
||||
{ label: "Investment Income", value: "investment" },
|
||||
{ label: "In-Kind Contributions", value: "inkind" },
|
||||
];
|
||||
|
||||
// Suggested names per category
|
||||
const nameOptionsByCategory: Record<string, string[]> = {
|
||||
games: [
|
||||
"Direct sales",
|
||||
"Platform revenue share",
|
||||
"DLC/expansions",
|
||||
"Merchandise",
|
||||
],
|
||||
services: [
|
||||
"Contract development",
|
||||
"Consulting",
|
||||
"Workshops/teaching",
|
||||
"Technical services",
|
||||
],
|
||||
grants: [
|
||||
"Government funding",
|
||||
"Arts council grants",
|
||||
"Foundation support",
|
||||
"Research grants",
|
||||
],
|
||||
community: [
|
||||
"Patreon/subscriptions",
|
||||
"Crowdfunding",
|
||||
"Donations",
|
||||
"Mutual aid received",
|
||||
],
|
||||
partnerships: [
|
||||
"Corporate partnerships",
|
||||
"Academic partnerships",
|
||||
"Sponsorships",
|
||||
],
|
||||
investment: ["Impact investment", "Venture capital", "Loans"],
|
||||
inkind: [
|
||||
"Office space",
|
||||
"Equipment/hardware",
|
||||
"Software licenses",
|
||||
"Professional services",
|
||||
"Marketing/PR services",
|
||||
"Legal services",
|
||||
],
|
||||
};
|
||||
|
||||
const certaintyOptions = [
|
||||
{ label: "Committed", value: "Committed" },
|
||||
{ label: "Probable", value: "Probable" },
|
||||
{ label: "Aspirational", value: "Aspirational" },
|
||||
];
|
||||
|
||||
const restrictionOptions = [
|
||||
{ label: "General Use", value: "General" },
|
||||
{ label: "Restricted Use", value: "Restricted" },
|
||||
];
|
||||
|
||||
// Computeds
|
||||
const totalTargetPct = computed(() => streamsStore.totalTargetPct);
|
||||
const totalMonthlyTarget = computed(() =>
|
||||
Math.round(
|
||||
streams.value.reduce((sum, s) => sum + (s.targetMonthlyAmount || 0), 0)
|
||||
)
|
||||
);
|
||||
|
||||
const topSourcePct = computed(() => {
|
||||
if (streams.value.length === 0) return 0;
|
||||
return Math.max(...streams.value.map((s) => s.targetPct || 0));
|
||||
});
|
||||
|
||||
const concentrationStatus = computed(() => {
|
||||
const topPct = topSourcePct.value;
|
||||
if (topPct > 50) return "High Risk";
|
||||
if (topPct > 35) return "Medium Risk";
|
||||
return "Low Risk";
|
||||
});
|
||||
|
||||
const concentrationColor = computed(() => {
|
||||
const status = concentrationStatus.value;
|
||||
if (status === "High Risk") return "red";
|
||||
if (status === "Medium Risk") return "yellow";
|
||||
return "green";
|
||||
});
|
||||
|
||||
const avgPayoutDelay = computed(() => {
|
||||
if (streams.value.length === 0) return 0;
|
||||
const total = streams.value.reduce(
|
||||
(sum, s) => sum + (s.payoutDelayDays || 0),
|
||||
0
|
||||
);
|
||||
return Math.round(total / streams.value.length);
|
||||
});
|
||||
|
||||
const committedPercentage = computed(() => {
|
||||
const committedStreams = streams.value.filter(
|
||||
(s) => s.certainty === "Committed"
|
||||
);
|
||||
const committedPct = committedStreams.reduce(
|
||||
(sum, s) => sum + (s.targetPct || 0),
|
||||
0
|
||||
);
|
||||
return Math.round(committedPct);
|
||||
});
|
||||
|
||||
// Live-write with debounce
|
||||
const debouncedSave = useDebounceFn((stream: any) => {
|
||||
emit("save-status", "saving");
|
||||
|
||||
try {
|
||||
streamsStore.upsertStream(stream);
|
||||
emit("save-status", "saved");
|
||||
} catch (error) {
|
||||
console.error("Failed to save stream:", error);
|
||||
emit("save-status", "error");
|
||||
}
|
||||
}, 300);
|
||||
|
||||
function saveStream(stream: any) {
|
||||
if (stream.name && stream.category && stream.targetPct >= 0) {
|
||||
debouncedSave(stream);
|
||||
}
|
||||
}
|
||||
|
||||
function addRevenueStream() {
|
||||
const newStream = {
|
||||
id: Date.now().toString(),
|
||||
name: "",
|
||||
category: "games",
|
||||
subcategory: "",
|
||||
targetPct: 0,
|
||||
targetMonthlyAmount: 0,
|
||||
certainty: "Aspirational",
|
||||
payoutDelayDays: 0,
|
||||
terms: "",
|
||||
revenueSharePct: 0,
|
||||
platformFeePct: 0,
|
||||
restrictions: "General",
|
||||
seasonalityWeights: new Array(12).fill(1),
|
||||
effortHoursPerMonth: 0,
|
||||
};
|
||||
|
||||
streamsStore.upsertStream(newStream);
|
||||
}
|
||||
|
||||
function removeStream(id: string) {
|
||||
streamsStore.removeStream(id);
|
||||
}
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue