refactor: replace Wizard with CoopBuilder in navigation, enhance budget store structure, and streamline template components for improved user experience
This commit is contained in:
parent
eede87a273
commit
f67b138d95
33 changed files with 4970 additions and 2451 deletions
|
|
@ -1,18 +1,13 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- Wizard Subnav -->
|
||||
<WizardSubnav />
|
||||
|
||||
<!-- Export Options - Top -->
|
||||
<ExportOptions
|
||||
:export-data="exportData"
|
||||
filename="membership-agreement"
|
||||
title="Membership Agreement"
|
||||
/>
|
||||
title="Membership Agreement" />
|
||||
|
||||
<div
|
||||
class="template-wrapper bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100"
|
||||
>
|
||||
class="template-wrapper bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100">
|
||||
<!-- Document Container -->
|
||||
<div class="document-page">
|
||||
<div class="template-content">
|
||||
|
|
@ -20,8 +15,9 @@
|
|||
<div class="text-center mb-8">
|
||||
<h1
|
||||
class="text-3xl md:text-5xl font-bold uppercase text-neutral-900 dark:text-white m-0 py-4 border-t-2 border-b-2 border-neutral-900 dark:border-neutral-100"
|
||||
:data-coop-name="formData.cooperativeName || 'Worker Cooperative'"
|
||||
>
|
||||
:data-coop-name="
|
||||
formData.cooperativeName || 'Worker Cooperative'
|
||||
">
|
||||
MEMBERSHIP AGREEMENT
|
||||
</h1>
|
||||
</div>
|
||||
|
|
@ -29,8 +25,7 @@
|
|||
<!-- Section 1: Who We Are -->
|
||||
<div class="section-card">
|
||||
<h2
|
||||
class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4"
|
||||
>
|
||||
class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
|
||||
1. Who We Are
|
||||
</h2>
|
||||
|
||||
|
|
@ -42,8 +37,7 @@
|
|||
size="xl"
|
||||
class="w-full"
|
||||
@input="debouncedAutoSave"
|
||||
@change="autoSave"
|
||||
/>
|
||||
@change="autoSave" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Date Established" class="form-group-large">
|
||||
|
|
@ -52,8 +46,7 @@
|
|||
type="date"
|
||||
size="xl"
|
||||
class="large-field"
|
||||
@change="autoSave"
|
||||
/>
|
||||
@change="autoSave" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Our Purpose" class="form-group-large">
|
||||
|
|
@ -64,8 +57,7 @@
|
|||
size="xl"
|
||||
class="large-field"
|
||||
@input="debouncedAutoSave"
|
||||
@change="autoSave"
|
||||
/>
|
||||
@change="autoSave" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Our Core Values" class="form-group-large">
|
||||
|
|
@ -76,8 +68,7 @@
|
|||
size="xl"
|
||||
class="large-field"
|
||||
@input="debouncedAutoSave"
|
||||
@change="autoSave"
|
||||
/>
|
||||
@change="autoSave" />
|
||||
</UFormField>
|
||||
|
||||
<div class="form-group-large">
|
||||
|
|
@ -91,8 +82,7 @@
|
|||
size="sm"
|
||||
color="primary"
|
||||
variant="outline"
|
||||
icon="i-heroicons-plus"
|
||||
>
|
||||
icon="i-heroicons-plus">
|
||||
Add Member
|
||||
</UButton>
|
||||
</div>
|
||||
|
|
@ -101,10 +91,10 @@
|
|||
<div
|
||||
v-for="(member, index) in formData.members"
|
||||
:key="index"
|
||||
class="border border-neutral-600 rounded-lg p-4"
|
||||
>
|
||||
class="border border-neutral-600 rounded-lg p-4">
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<h4 class="font-medium text-neutral-900 dark:text-neutral-100">
|
||||
<h4
|
||||
class="font-medium text-neutral-900 dark:text-neutral-100">
|
||||
Member {{ index + 1 }}
|
||||
</h4>
|
||||
<UButton
|
||||
|
|
@ -113,8 +103,7 @@
|
|||
size="sm"
|
||||
color="red"
|
||||
variant="ghost"
|
||||
icon="i-heroicons-trash"
|
||||
>
|
||||
icon="i-heroicons-trash">
|
||||
</UButton>
|
||||
</div>
|
||||
|
||||
|
|
@ -126,8 +115,7 @@
|
|||
size="xl"
|
||||
class="large-field"
|
||||
@input="debouncedAutoSave"
|
||||
@change="autoSave"
|
||||
/>
|
||||
@change="autoSave" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Email" class="form-group-large">
|
||||
|
|
@ -138,8 +126,7 @@
|
|||
size="xl"
|
||||
class="large-field"
|
||||
@input="debouncedAutoSave"
|
||||
@change="autoSave"
|
||||
/>
|
||||
@change="autoSave" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Join Date" class="form-group-large">
|
||||
|
|
@ -148,22 +135,19 @@
|
|||
type="date"
|
||||
size="xl"
|
||||
class="large-field"
|
||||
@change="autoSave"
|
||||
/>
|
||||
@change="autoSave" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField
|
||||
label="Current Role (Optional)"
|
||||
class="form-group-large"
|
||||
>
|
||||
class="form-group-large">
|
||||
<UInput
|
||||
v-model="member.role"
|
||||
placeholder="e.g., Coordinator, Developer, etc."
|
||||
size="xl"
|
||||
class="large-field"
|
||||
@input="debouncedAutoSave"
|
||||
@change="autoSave"
|
||||
/>
|
||||
@change="autoSave" />
|
||||
</UFormField>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -175,16 +159,14 @@
|
|||
<!-- Section 2: Membership -->
|
||||
<div class="section-card">
|
||||
<h2
|
||||
class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4"
|
||||
>
|
||||
class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
|
||||
2. Membership
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<h3
|
||||
class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
|
||||
>
|
||||
class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
|
||||
Who Can Be a Member
|
||||
</h3>
|
||||
<p class="content-paragraph mb-3 leading-relaxed text-left">
|
||||
|
|
@ -193,8 +175,8 @@
|
|||
<ul class="content-list my-2 pl-6 list-disc">
|
||||
<li>Shares our values and purpose</li>
|
||||
<li>
|
||||
Contributes labour to the cooperative (by doing actual work, not just
|
||||
investing money)
|
||||
Contributes labour to the cooperative (by doing actual work,
|
||||
not just investing money)
|
||||
</li>
|
||||
<li>Commits to collective decision-making</li>
|
||||
<li>Participates in governance responsibilities</li>
|
||||
|
|
@ -203,14 +185,14 @@
|
|||
|
||||
<div>
|
||||
<h3
|
||||
class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
|
||||
>
|
||||
class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
|
||||
Becoming a Member
|
||||
</h3>
|
||||
|
||||
<p class="content-paragraph">
|
||||
New members join through a consent process, which means existing members
|
||||
must agree that adding this person won't harm the cooperative.
|
||||
New members join through a consent process, which means
|
||||
existing members must agree that adding this person won't harm
|
||||
the cooperative.
|
||||
</p>
|
||||
|
||||
<ol class="content-list numbered my-2 pl-6 list-decimal">
|
||||
|
|
@ -221,8 +203,7 @@
|
|||
type="number"
|
||||
placeholder="3"
|
||||
class="inline-field number-field"
|
||||
@change="autoSave"
|
||||
/>
|
||||
@change="autoSave" />
|
||||
months working together
|
||||
</li>
|
||||
<li>Values alignment conversation</li>
|
||||
|
|
@ -233,8 +214,7 @@
|
|||
type="number"
|
||||
placeholder="1000"
|
||||
class="inline-field number-field"
|
||||
@change="autoSave"
|
||||
/>
|
||||
@change="autoSave" />
|
||||
(can be paid over time or waived based on need)
|
||||
</li>
|
||||
</ol>
|
||||
|
|
@ -242,20 +222,19 @@
|
|||
|
||||
<div>
|
||||
<h3
|
||||
class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
|
||||
>
|
||||
class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
|
||||
Leaving the Cooperative
|
||||
</h3>
|
||||
|
||||
<p class="content-paragraph flex items-baseline gap-2 flex-wrap">
|
||||
<p
|
||||
class="content-paragraph flex items-baseline gap-2 flex-wrap">
|
||||
Members can leave anytime with
|
||||
<UInput
|
||||
v-model="formData.noticeDays"
|
||||
type="number"
|
||||
placeholder="30"
|
||||
class="inline-field number-field"
|
||||
@change="autoSave"
|
||||
/>
|
||||
@change="autoSave" />
|
||||
days notice. The cooperative will:
|
||||
</p>
|
||||
|
||||
|
|
@ -267,8 +246,7 @@
|
|||
type="number"
|
||||
placeholder="30"
|
||||
class="inline-field number-field"
|
||||
@change="autoSave"
|
||||
/>
|
||||
@change="autoSave" />
|
||||
days
|
||||
</li>
|
||||
<li class="flex items-baseline gap-2 flex-wrap">
|
||||
|
|
@ -278,11 +256,12 @@
|
|||
type="number"
|
||||
placeholder="90"
|
||||
class="inline-field number-field"
|
||||
@change="autoSave"
|
||||
/>
|
||||
@change="autoSave" />
|
||||
days
|
||||
</li>
|
||||
<li>Maintain respectful ongoing relationships when possible</li>
|
||||
<li>
|
||||
Maintain respectful ongoing relationships when possible
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -291,80 +270,71 @@
|
|||
<!-- Section 3: How We Make Decisions -->
|
||||
<div class="section-card">
|
||||
<h2
|
||||
class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4"
|
||||
>
|
||||
class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
|
||||
3. How We Make Decisions
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<h3
|
||||
class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
|
||||
>
|
||||
class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
|
||||
Consent-Based Decisions
|
||||
</h3>
|
||||
<p class="content-paragraph mb-3 leading-relaxed text-left">
|
||||
We use consent, not consensus. This means we move forward when no one
|
||||
has a principled objection that would harm the cooperative. An objection
|
||||
must explain how the proposal would contradict our values or threaten
|
||||
our sustainability.
|
||||
We use consent, not consensus. This means we move forward when
|
||||
no one has a principled objection that would harm the
|
||||
cooperative. An objection must explain how the proposal would
|
||||
contradict our values or threaten our sustainability.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h3
|
||||
class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
|
||||
>
|
||||
class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
|
||||
Day-to-Day Decisions
|
||||
</h3>
|
||||
<p
|
||||
class="content-paragraph mb-3 leading-relaxed text-left flex items-baseline gap-2 flex-wrap"
|
||||
>
|
||||
class="content-paragraph mb-3 leading-relaxed text-left flex items-baseline gap-2 flex-wrap">
|
||||
Decisions under $<UInput
|
||||
v-model="formData.dayToDayLimit"
|
||||
type="number"
|
||||
placeholder="100"
|
||||
class="inline-field number-field"
|
||||
@change="autoSave"
|
||||
/>
|
||||
can be made by any member. Just tell others what you did at the next
|
||||
meeting.
|
||||
@change="autoSave" />
|
||||
can be made by any member. Just tell others what you did at
|
||||
the next meeting.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3
|
||||
class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
|
||||
>
|
||||
class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
|
||||
Regular Decisions
|
||||
</h3>
|
||||
<p
|
||||
class="content-paragraph mb-3 leading-relaxed text-left flex items-baseline gap-2 flex-wrap"
|
||||
>
|
||||
class="content-paragraph mb-3 leading-relaxed text-left flex items-baseline gap-2 flex-wrap">
|
||||
Decisions between $<UInput
|
||||
v-model="formData.regularDecisionMin"
|
||||
type="number"
|
||||
placeholder="100"
|
||||
class="inline-field number-field"
|
||||
@change="autoSave"
|
||||
/>
|
||||
@change="autoSave" />
|
||||
and $<UInput
|
||||
v-model="formData.regularDecisionMax"
|
||||
type="number"
|
||||
placeholder="1000"
|
||||
class="inline-field number-field"
|
||||
@change="autoSave"
|
||||
/>
|
||||
need consent from members present at a meeting (minimum 2 members).
|
||||
@change="autoSave" />
|
||||
need consent from members present at a meeting (minimum 2
|
||||
members).
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3
|
||||
class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
|
||||
>
|
||||
class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
|
||||
Major Decisions
|
||||
</h3>
|
||||
<p class="content-paragraph mb-3 leading-relaxed text-left">
|
||||
|
|
@ -379,8 +349,7 @@
|
|||
type="number"
|
||||
placeholder="5000"
|
||||
class="inline-field number-field"
|
||||
@change="autoSave"
|
||||
/>
|
||||
@change="autoSave" />
|
||||
</li>
|
||||
<li>Fundamental changes to our purpose or structure</li>
|
||||
<li>Dissolution of the cooperative</li>
|
||||
|
|
@ -389,8 +358,7 @@
|
|||
|
||||
<div>
|
||||
<h3
|
||||
class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
|
||||
>
|
||||
class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
|
||||
Meeting Structure
|
||||
</h3>
|
||||
<ul class="content-list my-2 pl-6 list-disc">
|
||||
|
|
@ -400,8 +368,7 @@
|
|||
v-model="formData.meetingFrequency"
|
||||
placeholder="weekly"
|
||||
class="inline-field"
|
||||
@change="autoSave"
|
||||
/>
|
||||
@change="autoSave" />
|
||||
</li>
|
||||
<li class="flex items-baseline gap-2 flex-wrap">
|
||||
Emergency meetings need
|
||||
|
|
@ -410,12 +377,13 @@
|
|||
type="number"
|
||||
placeholder="24"
|
||||
class="inline-field number-field"
|
||||
@change="autoSave"
|
||||
/>
|
||||
@change="autoSave" />
|
||||
hours notice
|
||||
</li>
|
||||
<li>We rotate who facilitates meetings</li>
|
||||
<li>Decisions and reasoning get documented in shared notes</li>
|
||||
<li>
|
||||
Decisions and reasoning get documented in shared notes
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -424,28 +392,25 @@
|
|||
<!-- Section 4: Money and Labour -->
|
||||
<div class="section-card">
|
||||
<h2
|
||||
class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4"
|
||||
>
|
||||
class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
|
||||
4. Money and Labour
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<h3
|
||||
class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
|
||||
>
|
||||
class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
|
||||
Equal Ownership
|
||||
</h3>
|
||||
<p class="content-paragraph mb-3 leading-relaxed text-left">
|
||||
Each member owns an equal share of the cooperative, regardless of hours
|
||||
worked or tenure.
|
||||
Each member owns an equal share of the cooperative, regardless
|
||||
of hours worked or tenure.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3
|
||||
class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
|
||||
>
|
||||
class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
|
||||
Paying Ourselves
|
||||
</h3>
|
||||
<ul class="content-list my-2 pl-6 list-disc">
|
||||
|
|
@ -455,8 +420,7 @@
|
|||
type="number"
|
||||
placeholder="25"
|
||||
class="inline-field number-field"
|
||||
@change="autoSave"
|
||||
/>/hour for all members
|
||||
@change="autoSave" />/hour for all members
|
||||
</li>
|
||||
<li class="flex items-baseline gap-2 flex-wrap">
|
||||
Or: Equal monthly draw of $<UInput
|
||||
|
|
@ -464,8 +428,7 @@
|
|||
type="number"
|
||||
placeholder="2000"
|
||||
class="inline-field number-field"
|
||||
@change="autoSave"
|
||||
/>
|
||||
@change="autoSave" />
|
||||
per member
|
||||
</li>
|
||||
<li class="flex items-baseline gap-2 flex-wrap">
|
||||
|
|
@ -475,8 +438,7 @@
|
|||
:items="dayOptions"
|
||||
placeholder="15"
|
||||
class="inline-field"
|
||||
@change="autoSave"
|
||||
/>
|
||||
@change="autoSave" />
|
||||
of each month
|
||||
</li>
|
||||
<li class="flex items-baseline gap-2 flex-wrap">
|
||||
|
|
@ -485,8 +447,7 @@
|
|||
v-model="formData.surplusFrequency"
|
||||
placeholder="quarter"
|
||||
class="inline-field"
|
||||
@change="autoSave"
|
||||
/>
|
||||
@change="autoSave" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -494,8 +455,7 @@
|
|||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h3
|
||||
class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
|
||||
>
|
||||
class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
|
||||
Work Expectations
|
||||
</h3>
|
||||
<ul class="content-list my-2 pl-6 list-disc">
|
||||
|
|
@ -506,29 +466,31 @@
|
|||
type="number"
|
||||
placeholder="40"
|
||||
class="inline-field number-field"
|
||||
@change="autoSave"
|
||||
/>
|
||||
@change="autoSave" />
|
||||
(flexible based on capacity)
|
||||
</li>
|
||||
<li>We explicitly reject crunch culture</li>
|
||||
<li>Members communicate their capacity openly</li>
|
||||
<li>
|
||||
We adjust workload collectively when someone needs reduced hours
|
||||
We adjust workload collectively when someone needs reduced
|
||||
hours
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3
|
||||
class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
|
||||
>
|
||||
class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
|
||||
Financial Transparency
|
||||
</h3>
|
||||
<ul class="content-list my-2 pl-6 list-disc">
|
||||
<li>All members can access all financial records anytime</li>
|
||||
<li>
|
||||
All members can access all financial records anytime
|
||||
</li>
|
||||
<li>Monthly financial check-ins at meetings</li>
|
||||
<li>
|
||||
Quarterly reviews of our runway (how many months we can operate)
|
||||
Quarterly reviews of our runway (how many months we can
|
||||
operate)
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -539,34 +501,31 @@
|
|||
<!-- Section 5: Roles and Responsibilities -->
|
||||
<div class="section-card">
|
||||
<h2
|
||||
class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4"
|
||||
>
|
||||
class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
|
||||
5. Roles and Responsibilities
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<h3
|
||||
class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
|
||||
>
|
||||
class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
|
||||
Rotating Roles
|
||||
</h3>
|
||||
<p
|
||||
class="content-paragraph mb-3 leading-relaxed text-left flex items-baseline gap-2 flex-wrap"
|
||||
>
|
||||
class="content-paragraph mb-3 leading-relaxed text-left flex items-baseline gap-2 flex-wrap">
|
||||
We rotate operational roles every
|
||||
<UInput
|
||||
v-model="formData.roleRotationMonths"
|
||||
type="number"
|
||||
placeholder="6"
|
||||
class="inline-field number-field"
|
||||
@change="autoSave"
|
||||
/>
|
||||
@change="autoSave" />
|
||||
months. Current roles include:
|
||||
</p>
|
||||
<ul class="content-list">
|
||||
<li>
|
||||
Financial coordinator (handles bookkeeping, not financial decisions)
|
||||
Financial coordinator (handles bookkeeping, not financial
|
||||
decisions)
|
||||
</li>
|
||||
<li>Meeting facilitator</li>
|
||||
<li>External communications</li>
|
||||
|
|
@ -576,8 +535,7 @@
|
|||
|
||||
<div>
|
||||
<h3
|
||||
class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
|
||||
>
|
||||
class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
|
||||
Shared Responsibilities
|
||||
</h3>
|
||||
<p class="content-paragraph mb-3 leading-relaxed text-left">
|
||||
|
|
@ -595,16 +553,14 @@
|
|||
<!-- Section 6: Conflict and Care -->
|
||||
<div class="section-card">
|
||||
<h2
|
||||
class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4"
|
||||
>
|
||||
class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
|
||||
6. Conflict and Care
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<h3
|
||||
class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
|
||||
>
|
||||
class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
|
||||
When Conflict Happens
|
||||
</h3>
|
||||
<ol class="content-list numbered my-2 pl-6 list-decimal">
|
||||
|
|
@ -617,15 +573,16 @@
|
|||
|
||||
<div>
|
||||
<h3
|
||||
class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
|
||||
>
|
||||
class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
|
||||
Care Commitments
|
||||
</h3>
|
||||
<ul class="content-list my-2 pl-6 list-disc">
|
||||
<li>We check in about capacity and wellbeing regularly</li>
|
||||
<li>We honour diverse access needs</li>
|
||||
<li>We maintain flexibility for life circumstances</li>
|
||||
<li>We contribute to mutual aid when members face hardship</li>
|
||||
<li>
|
||||
We contribute to mutual aid when members face hardship
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -634,31 +591,27 @@
|
|||
<!-- Section 7: Changing This Agreement -->
|
||||
<div class="section-card">
|
||||
<h2
|
||||
class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4"
|
||||
>
|
||||
class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
|
||||
7. Changing This Agreement
|
||||
</h2>
|
||||
|
||||
<p
|
||||
class="content-paragraph mb-3 leading-relaxed text-left flex items-baseline gap-2 flex-wrap"
|
||||
>
|
||||
class="content-paragraph mb-3 leading-relaxed text-left flex items-baseline gap-2 flex-wrap">
|
||||
This is a living document. We review it every
|
||||
<UInput
|
||||
v-model="formData.reviewFrequency"
|
||||
placeholder="year"
|
||||
class="inline-field"
|
||||
@change="autoSave"
|
||||
/>
|
||||
and update it through our consent process. Small clarifications can happen
|
||||
anytime; structural changes need full member consent.
|
||||
@change="autoSave" />
|
||||
and update it through our consent process. Small clarifications
|
||||
can happen anytime; structural changes need full member consent.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Section 8: If We Need to Close -->
|
||||
<div class="section-card">
|
||||
<h2
|
||||
class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4"
|
||||
>
|
||||
class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
|
||||
8. If We Need to Close
|
||||
</h2>
|
||||
|
||||
|
|
@ -675,8 +628,7 @@
|
|||
<UInput
|
||||
v-model="formData.assetDonationTarget"
|
||||
placeholder="Enter organization name"
|
||||
class="inline-field wide-field"
|
||||
/>
|
||||
class="inline-field wide-field" />
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
|
@ -685,8 +637,7 @@
|
|||
<!-- Section 9: Legal Bits -->
|
||||
<div class="section-card">
|
||||
<h2
|
||||
class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4"
|
||||
>
|
||||
class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
|
||||
9. Legal Bits
|
||||
</h2>
|
||||
|
||||
|
|
@ -697,8 +648,7 @@
|
|||
v-model="formData.legalStructure"
|
||||
size="xl"
|
||||
class="w-full"
|
||||
placeholder="Cooperative corporation, LLC, partnership, etc."
|
||||
/>
|
||||
placeholder="Cooperative corporation, LLC, partnership, etc." />
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Registered in" class="form-group-inline">
|
||||
|
|
@ -707,8 +657,7 @@
|
|||
placeholder="State/Province"
|
||||
size="xl"
|
||||
class="inline-field w-full"
|
||||
@change="autoSave"
|
||||
/>
|
||||
@change="autoSave" />
|
||||
</UFormField>
|
||||
|
||||
<div class="fiscal-year-group">
|
||||
|
|
@ -720,25 +669,23 @@
|
|||
placeholder="Month"
|
||||
size="xl"
|
||||
class="w-60"
|
||||
@change="autoSave"
|
||||
/>
|
||||
@change="autoSave" />
|
||||
<USelect
|
||||
v-model="formData.fiscalYearEndDay"
|
||||
:items="dayOptions"
|
||||
placeholder="Day"
|
||||
size="xl"
|
||||
class="w-40"
|
||||
@change="autoSave"
|
||||
/>
|
||||
@change="autoSave" />
|
||||
</div>
|
||||
</UFormField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="content-paragraph mb-3 leading-relaxed text-left">
|
||||
This agreement works alongside but doesn't replace our legal incorporation
|
||||
documents. Where they conflict, we follow the law but work to align our
|
||||
legal structure with our values.
|
||||
This agreement works alongside but doesn't replace our legal
|
||||
incorporation documents. Where they conflict, we follow the law
|
||||
but work to align our legal structure with our values.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -746,46 +693,39 @@
|
|||
<!-- Section 10: Agreement Review -->
|
||||
<div class="section-card">
|
||||
<h2
|
||||
class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4"
|
||||
>
|
||||
class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
|
||||
10. Agreement Review
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<p class="content-paragraph mb-3 leading-relaxed text-left">
|
||||
By using this agreement, we commit to these principles and to showing up
|
||||
for each other.
|
||||
By using this agreement, we commit to these principles and to
|
||||
showing up for each other.
|
||||
</p>
|
||||
|
||||
<div
|
||||
class="bg-neutral-50 dark:bg-neutral-900 p-4 rounded-md border-l-4 border-emerald-300"
|
||||
>
|
||||
class="bg-neutral-50 dark:bg-neutral-900 p-4 rounded-md border-l-4 border-emerald-300">
|
||||
<p
|
||||
class="content-paragraph mb-3 leading-relaxed text-left flex items-baseline gap-2 flex-wrap"
|
||||
>
|
||||
class="content-paragraph mb-3 leading-relaxed text-left flex items-baseline gap-2 flex-wrap">
|
||||
This agreement was last updated on
|
||||
<UInput
|
||||
v-model="formData.lastUpdated"
|
||||
type="date"
|
||||
class="inline-field"
|
||||
@change="autoSave"
|
||||
/>. We commit to reviewing it on
|
||||
@change="autoSave" />. We commit to reviewing it on
|
||||
<UInput
|
||||
v-model="formData.nextReview"
|
||||
type="date"
|
||||
class="inline-field"
|
||||
@change="autoSave"
|
||||
/>
|
||||
@change="autoSave" />
|
||||
or sooner if circumstances require.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="signature-space mt-8 p-8 border border-dashed border-neutral-300 rounded-md bg-neutral-50 dark:bg-neutral-950"
|
||||
>
|
||||
class="signature-space mt-8 p-8 border border-dashed border-neutral-300 rounded-md bg-neutral-50 dark:bg-neutral-950">
|
||||
<p
|
||||
class="content-paragraph mb-3 leading-relaxed text-center text-neutral-600 italic"
|
||||
>
|
||||
class="content-paragraph mb-3 leading-relaxed text-center text-neutral-600 italic">
|
||||
[Space for member signatures when printed]
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -799,8 +739,7 @@
|
|||
<ExportOptions
|
||||
:export-data="exportData"
|
||||
filename="membership-agreement"
|
||||
title="Membership Agreement"
|
||||
/>
|
||||
title="Membership Agreement" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -898,7 +837,10 @@ onMounted(() => {
|
|||
|
||||
// Auto-save individual field changes immediately
|
||||
const autoSave = () => {
|
||||
localStorage.setItem("membership-agreement-data", JSON.stringify(formData.value));
|
||||
localStorage.setItem(
|
||||
"membership-agreement-data",
|
||||
JSON.stringify(formData.value)
|
||||
);
|
||||
console.log("Manual auto-save triggered:", formData.value);
|
||||
};
|
||||
|
||||
|
|
@ -950,8 +892,12 @@ const handlePrint = () => {
|
|||
`;
|
||||
|
||||
// Add signature lines for each member
|
||||
const membersWithNames = formData.value.members?.filter((m) => m.name) || [];
|
||||
const numSignatures = Math.max(2, Math.min(8, membersWithNames.length || 4));
|
||||
const membersWithNames =
|
||||
formData.value.members?.filter((m) => m.name) || [];
|
||||
const numSignatures = Math.max(
|
||||
2,
|
||||
Math.min(8, membersWithNames.length || 4)
|
||||
);
|
||||
|
||||
for (let i = 0; i < numSignatures; i++) {
|
||||
const memberName = membersWithNames[i]?.name || "";
|
||||
|
|
@ -981,7 +927,8 @@ const handlePrint = () => {
|
|||
value = formData.value.cooperativeName;
|
||||
else if (input.closest('[label="Date Established"]'))
|
||||
value = formData.value.dateEstablished;
|
||||
else if (input.closest('[label="Our Purpose"]')) value = formData.value.purpose;
|
||||
else if (input.closest('[label="Our Purpose"]'))
|
||||
value = formData.value.purpose;
|
||||
else if (input.closest('[label="Our Core Values"]'))
|
||||
value = formData.value.coreValues;
|
||||
else if (input.closest('[label="Legal Structure"]'))
|
||||
|
|
@ -998,13 +945,16 @@ const handlePrint = () => {
|
|||
// Handle member fields
|
||||
else if (input.closest(".border-neutral-200")) {
|
||||
const memberCard = input.closest(".border-neutral-200");
|
||||
const memberIndex = Array.from(memberCard.parentNode.children).indexOf(memberCard);
|
||||
const memberIndex = Array.from(memberCard.parentNode.children).indexOf(
|
||||
memberCard
|
||||
);
|
||||
const member = formData.value.members?.[memberIndex];
|
||||
if (member) {
|
||||
if (input.closest('[label="Full Name"]')) value = member.name;
|
||||
else if (input.closest('[label="Email"]')) value = member.email;
|
||||
else if (input.closest('[label="Join Date"]')) value = member.joinDate;
|
||||
else if (input.closest('[label="Current Role (Optional)"]')) value = member.role;
|
||||
else if (input.closest('[label="Current Role (Optional)"]'))
|
||||
value = member.role;
|
||||
}
|
||||
}
|
||||
// Fallback to input.value
|
||||
|
|
@ -1143,11 +1093,13 @@ const exportData = computed(() => ({
|
|||
|
||||
.template-content.font-ubuntu,
|
||||
.template-content.font-ubuntu * {
|
||||
font-family: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
|
||||
font-family: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
sans-serif !important;
|
||||
}
|
||||
|
||||
.template-content.font-inter,
|
||||
.template-content.font-inter * {
|
||||
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
|
||||
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
sans-serif !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue