This commit is contained in:
Jennie Robinson Faber 2025-09-04 10:42:03 +01:00
parent fc2d9ed56b
commit 983aeca2dc
32 changed files with 1570 additions and 27266 deletions

BIN
pages/.DS_Store vendored Normal file

Binary file not shown.

View file

@ -2,8 +2,36 @@
<div>
<section class="py-8 space-y-6">
<div class="flex items-center justify-between">
<h2 class="text-2xl font-bold">Budget Worksheet</h2>
<div class="flex items-center gap-4">
<h2 class="text-2xl font-bold">Budget Worksheet</h2>
<div class="flex border-2 border-black bg-white">
<button
@click="activeView = 'monthly'"
:class="[
'px-4 py-2 font-medium transition-none',
activeView === 'monthly' ? 'bg-black text-white' : 'bg-white text-black hover:bg-gray-100'
]"
>
Monthly
</button>
<button
@click="activeView = 'annual'"
:class="[
'px-4 py-2 font-medium border-l-2 border-black transition-none',
activeView === 'annual' ? 'bg-black text-white' : 'bg-white text-black hover:bg-gray-100'
]"
>
Annual
</button>
</div>
</div>
<div class="flex items-center gap-2">
<NuxtLink
to="/help"
class="inline-flex items-center px-3 py-2 text-sm font-medium text-blue-600 hover:text-blue-800 border-2 border-blue-200 hover:border-blue-300 bg-blue-50 hover:bg-blue-100 transition-colors"
>
Help & Guides
</NuxtLink>
<UButton
@click="exportBudget"
variant="outline"
@ -29,8 +57,8 @@
</div>
</div>
<!-- Budget Table -->
<div class="border-4 border-black bg-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
<!-- Monthly View -->
<div v-if="activeView === 'monthly'" class="border-4 border-black bg-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
<div class="overflow-x-auto">
<table class="w-full border-collapse text-sm">
<thead>
@ -275,6 +303,14 @@
</table>
</div>
</div>
<!-- Annual View -->
<div v-if="activeView === 'annual'">
<AnnualBudget
:orgId="'default'"
:year="new Date().getFullYear()"
/>
</div>
</section>
<!-- Add Revenue Modal -->
@ -519,6 +555,7 @@ const membersStore = useMembersStore();
const policiesStore = usePoliciesStore();
// State
const activeView = ref('monthly');
const showAddRevenueModal = ref(false);
const showAddExpenseModal = ref(false);
const activeTab = ref(0);

191
pages/help.vue Normal file
View file

@ -0,0 +1,191 @@
<template>
<div class="min-h-screen bg-gray-50 py-8">
<div class="container mx-auto max-w-4xl px-4">
<!-- Header -->
<div class="mb-8 text-center">
<h1 class="text-4xl font-bold mb-4">Budget Planning Help</h1>
<p class="text-xl text-gray-600">Learn how to build a sustainable financial plan for your co-op or studio</p>
</div>
<!-- Navigation -->
<div class="mb-8">
<div class="border-4 border-black bg-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
<div class="p-4">
<h2 class="text-xl font-bold mb-4">Quick Navigation</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<a href="#revenue-diversification" class="block p-3 bg-blue-50 border-2 border-blue-200 rounded hover:bg-blue-100 transition-colors">
<span class="font-semibold">Revenue Diversification</span>
<p class="text-sm text-gray-600">How to develop multiple income streams</p>
</a>
<a href="#budget-categories" class="block p-3 bg-green-50 border-2 border-green-200 rounded hover:bg-green-100 transition-colors">
<span class="font-semibold">Budget Categories</span>
<p class="text-sm text-gray-600">Understanding revenue and expense types</p>
</a>
<a href="#planning-tips" class="block p-3 bg-yellow-50 border-2 border-yellow-200 rounded hover:bg-yellow-100 transition-colors">
<span class="font-semibold">Planning Tips</span>
<p class="text-sm text-gray-600">Best practices for financial planning</p>
</a>
<a href="#getting-started" class="block p-3 bg-purple-50 border-2 border-purple-200 rounded hover:bg-purple-100 transition-colors">
<span class="font-semibold">Getting Started</span>
<p class="text-sm text-gray-600">Step-by-step setup guide</p>
</a>
</div>
</div>
</div>
</div>
<!-- Content Sections -->
<div class="space-y-8">
<!-- Revenue Diversification -->
<section id="revenue-diversification" class="border-4 border-black bg-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
<div class="bg-blue-500 text-white px-6 py-4">
<h2 class="text-2xl font-bold">Revenue Diversification</h2>
</div>
<div class="p-6">
<div class="prose max-w-none">
<p class="text-lg mb-4">
Building multiple revenue streams reduces risk and creates more stable income for your co-op.
</p>
<h3 class="text-xl font-semibold mb-3">How to Develop Games & Products</h3>
<p class="mb-4">
[Placeholder text - Add your content here about developing games and product revenue streams]
</p>
<h3 class="text-xl font-semibold mb-3">How to Develop Services & Contracts</h3>
<p class="mb-4">
[Placeholder text - Add your content here about developing service-based revenue streams]
</p>
<h3 class="text-xl font-semibold mb-3">How to Secure Grants & Funding</h3>
<p class="mb-4">
[Placeholder text - Add your content here about finding and securing grants]
</p>
<h3 class="text-xl font-semibold mb-3">Building Community Support</h3>
<p class="mb-4">
[Placeholder text - Add your content here about building community-supported revenue]
</p>
</div>
</div>
</section>
<!-- Budget Categories -->
<section id="budget-categories" class="border-4 border-black bg-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
<div class="bg-green-500 text-white px-6 py-4">
<h2 class="text-2xl font-bold">Budget Categories</h2>
</div>
<div class="p-6">
<div class="prose max-w-none">
<h3 class="text-xl font-semibold mb-3">Revenue Categories</h3>
<ul class="mb-6 space-y-2">
<li><strong>Games & Products:</strong> [Add description]</li>
<li><strong>Services & Contracts:</strong> [Add description]</li>
<li><strong>Grants & Funding:</strong> [Add description]</li>
<li><strong>Community Support:</strong> [Add description]</li>
<li><strong>Partnerships:</strong> [Add description]</li>
<li><strong>Investment Income:</strong> [Add description]</li>
<li><strong>In-Kind Contributions:</strong> [Add description]</li>
</ul>
<h3 class="text-xl font-semibold mb-3">Expense Categories</h3>
<ul class="space-y-2">
<li><strong>Salaries & Benefits:</strong> [Add description]</li>
<li><strong>Development Costs:</strong> [Add description]</li>
<li><strong>Equipment & Technology:</strong> [Add description]</li>
<li><strong>Marketing & Outreach:</strong> [Add description]</li>
<li><strong>Office & Operations:</strong> [Add description]</li>
<li><strong>Legal & Professional:</strong> [Add description]</li>
<li><strong>Other Expenses:</strong> [Add description]</li>
</ul>
</div>
</div>
</section>
<!-- Planning Tips -->
<section id="planning-tips" class="border-4 border-black bg-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
<div class="bg-yellow-500 text-white px-6 py-4">
<h2 class="text-2xl font-bold">Planning Tips</h2>
</div>
<div class="p-6">
<div class="prose max-w-none">
<h3 class="text-xl font-semibold mb-3">Concentration Risk</h3>
<p class="mb-4">
[Add content about managing concentration risk and why diversification matters]
</p>
<h3 class="text-xl font-semibold mb-3">Monthly vs Annual Planning</h3>
<p class="mb-4">
[Add content about balancing monthly cash flow with annual strategic planning]
</p>
<h3 class="text-xl font-semibold mb-3">Setting Realistic Goals</h3>
<p class="mb-4">
[Add content about setting achievable revenue and expense targets]
</p>
</div>
</div>
</section>
<!-- Getting Started -->
<section id="getting-started" class="border-4 border-black bg-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
<div class="bg-purple-500 text-white px-6 py-4">
<h2 class="text-2xl font-bold">Getting Started</h2>
</div>
<div class="p-6">
<div class="prose max-w-none">
<h3 class="text-xl font-semibold mb-3">Step 1: Set Up Your Basic Budget</h3>
<p class="mb-4">
[Add step-by-step instructions for initial budget setup]
</p>
<h3 class="text-xl font-semibold mb-3">Step 2: Plan Your Revenue Streams</h3>
<p class="mb-4">
[Add guidance on planning initial revenue streams]
</p>
<h3 class="text-xl font-semibold mb-3">Step 3: Track and Adjust</h3>
<p class="mb-4">
[Add content about ongoing budget management]
</p>
</div>
</div>
</section>
</div>
<!-- Back to Budget -->
<div class="mt-8 text-center">
<NuxtLink
to="/budget"
class="inline-block px-6 py-3 bg-black text-white font-bold border-4 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] transition-all"
>
Back to Budget
</NuxtLink>
</div>
</div>
</div>
</template>
<script setup lang="ts">
// Page meta
useHead({
title: 'Budget Planning Help - Urgent Tools',
meta: [
{ name: 'description', content: 'Learn how to build sustainable financial plans and develop diverse revenue streams for your co-op or studio.' }
]
});
</script>
<style scoped>
/* Smooth scrolling for anchor links */
html {
scroll-behavior: smooth;
}
/* Ensure anchor links account for any fixed headers */
section[id] {
scroll-margin-top: 2rem;
}
</style>

205
pages/resources.vue Normal file
View file

@ -0,0 +1,205 @@
<template>
<div>
<div
class="template-container min-h-screen bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100 py-8"
>
<div class="max-w-6xl mx-auto px-4 relative">
<div class="mb-8">
<h1 class="text-3xl font-bold text-neutral-900 dark:text-white mb-2">
More Resources & Templates
</h1>
<p class="text-neutral-700 dark:text-neutral-200">
Additional tools, templates, and resources to support your cooperative journey.
</p>
</div>
<div class="space-y-8">
<!-- External Templates Section -->
<section>
<h2 class="text-2xl font-semibold text-neutral-900 dark:text-white mb-4">
External Templates
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Miro Template -->
<div class="template-card">
<div class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
<div
class="relative bg-white dark:bg-neutral-950 border border-black dark:border-white p-6"
>
<h3 class="text-xl font-semibold text-neutral-900 dark:text-white mb-2">
Goals & Values Exercise
</h3>
<p class="text-neutral-700 dark:text-neutral-200 mb-4">
A Miro template to help your team align on shared goals and values through collaborative exercises.
</p>
<a
href="https://miro.com/miroverse/goals-values-exercise/"
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center px-4 py-2 bg-black dark:bg-white text-white dark:text-black font-medium hover:opacity-90 transition-opacity"
>
Open in Miro
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
</svg>
</a>
</div>
</div>
<!-- CommunityRule Templates -->
<div class="template-card">
<div class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
<div
class="relative bg-white dark:bg-neutral-950 border border-black dark:border-white p-6"
>
<h3 class="text-xl font-semibold text-neutral-900 dark:text-white mb-2">
CommunityRule Governance Templates
</h3>
<p class="text-neutral-700 dark:text-neutral-200 mb-4">
A collection of governance templates and patterns for democratic organizations and communities.
</p>
<a
href="https://communityrule.info/"
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center px-4 py-2 bg-black dark:bg-white text-white dark:text-black font-medium hover:opacity-90 transition-opacity"
>
Browse Templates
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002 2v-4M14 4h6m0 0v6m0-6L10 14" />
</svg>
</a>
</div>
</div>
</div>
</section>
<!-- PDF Downloads Section -->
<section>
<h2 class="text-2xl font-semibold text-neutral-900 dark:text-white mb-4">
Wizard PDF Downloads
</h2>
<p class="text-neutral-700 dark:text-neutral-200 mb-4">
Download PDF versions of our wizards for offline use or printing.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div
v-for="pdf in pdfDownloads"
:key="pdf.id"
class="template-card"
>
<div class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
<div
class="relative bg-white dark:bg-neutral-950 border border-black dark:border-white p-6"
>
<div class="flex items-start justify-between mb-2">
<h3 class="text-lg font-semibold text-neutral-900 dark:text-white">
{{ pdf.name }}
</h3>
<span class="text-xs text-neutral-600 dark:text-neutral-400 bg-neutral-100 dark:bg-neutral-800 px-2 py-1 rounded">
PDF
</span>
</div>
<p class="text-sm text-neutral-700 dark:text-neutral-200 mb-4">
{{ pdf.description }}
</p>
<button
:disabled="!pdf.available"
:class="[
'inline-flex items-center px-4 py-2 font-medium transition-opacity',
pdf.available
? 'bg-black dark:bg-white text-white dark:text-black hover:opacity-90'
: 'bg-neutral-200 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-500 cursor-not-allowed'
]"
>
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
{{ pdf.available ? 'Download' : 'Coming Soon' }}
</button>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
// PDF downloads list with placeholder data
const pdfDownloads = [
{
id: 'bylaws',
name: 'Bylaws Wizard',
description: 'Create comprehensive bylaws for your cooperative',
available: false,
url: '#'
},
{
id: 'operating-agreement',
name: 'Operating Agreement Wizard',
description: 'Draft an operating agreement for your LLC cooperative',
available: false,
url: '#'
},
{
id: 'articles',
name: 'Articles of Incorporation',
description: 'Template for articles of incorporation',
available: false,
url: '#'
},
{
id: 'membership',
name: 'Membership Agreement',
description: 'Define membership terms and conditions',
available: false,
url: '#'
},
{
id: 'patronage',
name: 'Patronage Policy',
description: 'Structure your patronage distribution system',
available: false,
url: '#'
},
{
id: 'conflict',
name: 'Conflict Resolution Process',
description: 'Establish clear conflict resolution procedures',
available: false,
url: '#'
}
]
</script>
<style scoped>
.template-card {
position: relative;
}
.dither-shadow {
background-image: repeating-linear-gradient(
45deg,
transparent,
transparent 2px,
currentColor 2px,
currentColor 4px
);
opacity: 0.1;
pointer-events: none;
}
.dither-tag {
background-image: repeating-linear-gradient(
135deg,
transparent,
transparent 1px,
currentColor 1px,
currentColor 2px
);
background-size: 4px 4px;
}
</style>

23
pages/runway-lite.vue Normal file
View file

@ -0,0 +1,23 @@
<template>
<div class="max-w-4xl mx-auto">
<div class="mb-8">
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
Runway Lite
</h1>
<p class="text-gray-600 dark:text-gray-400">
Quick runway assessment with revenue scenarios
</p>
</div>
<RunwayLite
:starting-cash="budgetData.startingCash.value"
:revenue-planned="budgetData.revenuePlanned.value"
:expense-planned="budgetData.expensePlanned.value"
:diversification-guidance="budgetData.diversification.value.guidance"
/>
</div>
</template>
<script setup lang="ts">
const budgetData = useBudget('default', new Date().getFullYear())
</script>