1415 lines
53 KiB
Vue
1415 lines
53 KiB
Vue
<template>
|
|
<div>
|
|
<!-- Export Options - Top -->
|
|
<ExportOptions
|
|
:export-data="exportData"
|
|
filename="membership-agreement"
|
|
title="Membership Agreement" />
|
|
|
|
<div
|
|
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">
|
|
<!-- Document Title -->
|
|
<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="getDisplayName()">
|
|
MEMBERSHIP AGREEMENT
|
|
</h1>
|
|
</div>
|
|
|
|
<!-- 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">
|
|
1. Who We Are
|
|
</h2>
|
|
|
|
<div class="space-y-8">
|
|
<UFormField label="Cooperative Name" class="form-group-large">
|
|
<UInput
|
|
v-model="formData.cooperativeName"
|
|
placeholder="Enter cooperative name"
|
|
size="xl"
|
|
class="w-full"
|
|
@input="debouncedAutoSave"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
|
|
<UFormField label="Date Established" class="form-group-large">
|
|
<UInput
|
|
v-model="formData.dateEstablished"
|
|
type="date"
|
|
size="xl"
|
|
class="large-field"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
|
|
<UFormField label="Our Purpose" class="form-group-large">
|
|
<UTextarea
|
|
v-model="formData.purpose"
|
|
:rows="3"
|
|
placeholder="Write 1-2 sentences about what your cooperative does and why it exists"
|
|
size="xl"
|
|
class="large-field"
|
|
@input="debouncedAutoSave"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
|
|
<UFormField label="Our Core Values" class="form-group-large">
|
|
<UTextarea
|
|
v-model="formData.coreValues"
|
|
:rows="4"
|
|
placeholder="List 3-5 values that guide everything you do. Examples: mutual care, creative sustainability, economic justice, collective liberation"
|
|
size="xl"
|
|
class="large-field"
|
|
@input="debouncedAutoSave"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
|
|
<div class="form-group-large">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<label
|
|
class="text-lg font-semibold text-neutral-900 dark:text-neutral-100"
|
|
>Current Members</label
|
|
>
|
|
<UButton
|
|
@click="addMember"
|
|
size="sm"
|
|
color="primary"
|
|
variant="outline"
|
|
icon="i-heroicons-plus">
|
|
Add Member
|
|
</UButton>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<div
|
|
v-for="(member, index) in formData.members"
|
|
:key="index"
|
|
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">
|
|
Member {{ index + 1 }}
|
|
</h4>
|
|
<UButton
|
|
v-if="formData.members.length > 1"
|
|
@click="removeMember(index)"
|
|
size="sm"
|
|
color="red"
|
|
variant="ghost"
|
|
icon="i-heroicons-trash">
|
|
</UButton>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<UFormField label="Full Name" class="form-group-large">
|
|
<UInput
|
|
v-model="member.name"
|
|
placeholder="Enter full name"
|
|
size="xl"
|
|
class="large-field"
|
|
@input="debouncedAutoSave"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
|
|
<UFormField label="Email" class="form-group-large">
|
|
<UInput
|
|
v-model="member.email"
|
|
type="email"
|
|
placeholder="Enter email address"
|
|
size="xl"
|
|
class="large-field"
|
|
@input="debouncedAutoSave"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
|
|
<UFormField label="Join Date" class="form-group-large">
|
|
<UInput
|
|
v-model="member.joinDate"
|
|
type="date"
|
|
size="xl"
|
|
class="large-field"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
|
|
<UFormField
|
|
label="Current Role (Optional)"
|
|
class="form-group-large">
|
|
<UInput
|
|
v-model="member.role"
|
|
placeholder="e.g., Coordinator, Developer, etc."
|
|
size="xl"
|
|
class="large-field"
|
|
@input="debouncedAutoSave"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 2: Membership -->
|
|
<div class="section-card">
|
|
<h2
|
|
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">
|
|
Who Can Be a Member
|
|
</h3>
|
|
<p class="content-paragraph mb-3 leading-relaxed text-left">
|
|
Any person who:
|
|
</p>
|
|
<UFormField class="form-group-large">
|
|
<UTextarea
|
|
v-model="formData.memberRequirements"
|
|
:rows="4"
|
|
placeholder="Enter member requirements"
|
|
size="xl"
|
|
class="large-field"
|
|
@input="debouncedAutoSave"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
</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">
|
|
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
|
|
{{ getDisplayName().toLowerCase() }}.
|
|
</p>
|
|
|
|
<ol class="content-list numbered my-2 pl-6 list-decimal">
|
|
<li class="flex items-baseline gap-2 flex-wrap">
|
|
Trial period of
|
|
<UInput
|
|
v-model="formData.trialPeriodMonths"
|
|
type="number"
|
|
placeholder="3"
|
|
class="inline-field number-field w-10"
|
|
@change="autoSave" />
|
|
months working together
|
|
</li>
|
|
<li>Values alignment conversation</li>
|
|
<li class="flex items-baseline gap-2 flex-wrap">
|
|
Optional - Equal buy-in contribution of {{ currencySymbol
|
|
}}<UInput
|
|
v-model="formData.buyInAmount"
|
|
type="number"
|
|
placeholder="1000"
|
|
class="inline-field number-field w-10"
|
|
@change="autoSave" />
|
|
(can be paid over time or waived based on need)
|
|
</li>
|
|
</ol>
|
|
</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">
|
|
Leaving the Cooperative
|
|
</h3>
|
|
|
|
<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 w-10"
|
|
@change="autoSave" />
|
|
days notice. The cooperative will:
|
|
</p>
|
|
|
|
<ul class="content-list my-2 pl-6 list-disc">
|
|
<li class="flex items-baseline gap-2 flex-wrap">
|
|
Pay out their share of any surplus within
|
|
<UInput
|
|
v-model="formData.surplusPayoutDays"
|
|
type="number"
|
|
placeholder="30"
|
|
class="inline-field number-field w-10"
|
|
@change="autoSave" />
|
|
days
|
|
</li>
|
|
<li class="flex items-baseline gap-2 flex-wrap">
|
|
Return their buy-in contribution within
|
|
<UInput
|
|
v-model="formData.buyInReturnDays"
|
|
type="number"
|
|
placeholder="90"
|
|
class="inline-field number-field w-10"
|
|
@change="autoSave" />
|
|
days
|
|
</li>
|
|
<li>
|
|
Maintain respectful ongoing relationships when possible
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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">
|
|
3. How We Make Decisions
|
|
</h2>
|
|
|
|
<div class="space-y-4">
|
|
<!-- Decision Framework Selection -->
|
|
<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">
|
|
Primary Decision Framework
|
|
</h3>
|
|
<UFormField class="form-group-large mb-4">
|
|
<USelect
|
|
v-model="formData.decisionFramework"
|
|
:items="decisionFrameworkOptions"
|
|
placeholder="Select decision framework"
|
|
size="xl"
|
|
class="w-full"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
</div>
|
|
|
|
<div>
|
|
<p class="content-paragraph mb-3 leading-relaxed text-left">
|
|
{{
|
|
getFrameworkDetails(formData.decisionFramework)
|
|
.practicalDescription
|
|
}}
|
|
</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">
|
|
Day-to-Day Decisions
|
|
</h3>
|
|
<p
|
|
class="content-paragraph mb-3 leading-relaxed text-left flex items-baseline gap-2 flex-wrap">
|
|
Decisions under {{ currencySymbol
|
|
}}<UInput
|
|
v-model="formData.dayToDayLimit"
|
|
type="number"
|
|
placeholder="100"
|
|
class="inline-field number-field w-10"
|
|
@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">
|
|
Regular Decisions
|
|
</h3>
|
|
<p
|
|
class="content-paragraph mb-3 leading-relaxed text-left flex items-baseline gap-2 flex-wrap">
|
|
Decisions between {{ currencySymbol
|
|
}}<UInput
|
|
v-model="formData.regularDecisionMin"
|
|
type="number"
|
|
placeholder="100"
|
|
class="inline-field number-field w-10"
|
|
@change="autoSave" />
|
|
and {{ currencySymbol
|
|
}}<UInput
|
|
v-model="formData.regularDecisionMax"
|
|
type="number"
|
|
placeholder="1000"
|
|
class="inline-field number-field w-10"
|
|
@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">
|
|
Major Decisions
|
|
</h3>
|
|
<p class="content-paragraph mb-3 leading-relaxed text-left">
|
|
These require consent from all members:
|
|
</p>
|
|
<ul class="content-list my-2 pl-6 list-disc">
|
|
<li>Adding or removing members</li>
|
|
<li>Changing this agreement</li>
|
|
<li class="flex items-baseline gap-2 flex-wrap">
|
|
Taking on debt over {{ currencySymbol
|
|
}}<UInput
|
|
v-model="formData.majorDebtThreshold"
|
|
type="number"
|
|
placeholder="5000"
|
|
class="inline-field number-field w-10"
|
|
@change="autoSave" />
|
|
</li>
|
|
<li>Fundamental changes to our purpose or structure</li>
|
|
<li>
|
|
Dissolution of
|
|
{{ getDisplayName().toLowerCase() }}
|
|
</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">
|
|
Meeting Structure
|
|
</h3>
|
|
<ul class="content-list my-2 pl-6 list-disc">
|
|
<li class="flex items-baseline gap-2 flex-wrap">
|
|
Regular meetings happen
|
|
<UInput
|
|
v-model="formData.meetingFrequency"
|
|
placeholder="weekly"
|
|
class="inline-field"
|
|
@change="autoSave" />
|
|
</li>
|
|
<li class="flex items-baseline gap-2 flex-wrap">
|
|
Emergency meetings need
|
|
<UInput
|
|
v-model="formData.emergencyNoticeHours"
|
|
type="number"
|
|
placeholder="24"
|
|
class="inline-field number-field w-10"
|
|
@change="autoSave" />
|
|
hours notice
|
|
</li>
|
|
<li>We rotate who facilitates meetings</li>
|
|
<li>
|
|
Decisions and reasoning get documented in shared notes
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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">
|
|
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">
|
|
Equal Ownership
|
|
</h3>
|
|
<p class="content-paragraph mb-3 leading-relaxed text-left">
|
|
Each member owns an equal share of
|
|
{{ getDisplayName().toLowerCase() }}, 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">
|
|
Paying Ourselves
|
|
</h3>
|
|
|
|
<!-- Pay Policy Selection -->
|
|
<UFormField label="Pay Policy" class="form-group-large mb-4">
|
|
<USelect
|
|
v-model="formData.payPolicy"
|
|
:items="payPolicyOptions"
|
|
placeholder="Select pay policy"
|
|
size="xl"
|
|
class="w-full"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
|
|
<!-- Equal Pay Policy -->
|
|
<div
|
|
v-if="formData.payPolicy === 'equal-pay'"
|
|
class="space-y-3">
|
|
<p class="content-paragraph">
|
|
All members receive equal compensation regardless of role or
|
|
hours worked.
|
|
</p>
|
|
<ul class="content-list my-2 pl-6 list-disc">
|
|
<li class="flex items-baseline gap-2 flex-wrap">
|
|
Base rate: {{ currencySymbol
|
|
}}<UInput
|
|
v-model="formData.baseRate"
|
|
type="number"
|
|
placeholder="25"
|
|
class="inline-field number-field w-10"
|
|
@change="autoSave" />/hour for all members
|
|
</li>
|
|
<li class="flex items-baseline gap-2 flex-wrap">
|
|
Or: Equal monthly draw of {{ currencySymbol
|
|
}}<UInput
|
|
v-model="formData.monthlyDraw"
|
|
type="number"
|
|
placeholder="2000"
|
|
class="inline-field number-field w-10"
|
|
@change="autoSave" />
|
|
per member
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Hours-Weighted Policy -->
|
|
<div
|
|
v-if="formData.payPolicy === 'hours-weighted'"
|
|
class="space-y-3">
|
|
<p class="content-paragraph">
|
|
Compensation is proportional to hours worked by each member.
|
|
</p>
|
|
<ul class="content-list my-2 pl-6 list-disc">
|
|
<li class="flex items-baseline gap-2 flex-wrap">
|
|
Hourly rate: {{ currencySymbol
|
|
}}<UInput
|
|
v-model="formData.hourlyRate"
|
|
type="number"
|
|
placeholder="25"
|
|
class="inline-field number-field w-10"
|
|
@change="autoSave" />/hour
|
|
</li>
|
|
<li>Members track their hours and are paid accordingly</li>
|
|
<li>Minimum hours commitment may apply</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Needs-Weighted Policy -->
|
|
<div
|
|
v-if="formData.payPolicy === 'needs-weighted'"
|
|
class="space-y-3">
|
|
<p class="content-paragraph">
|
|
Compensation is allocated based on each member's individual
|
|
financial needs.
|
|
</p>
|
|
<ul class="content-list my-2 pl-6 list-disc">
|
|
<li>Members declare their minimum monthly needs</li>
|
|
<li>
|
|
Available payroll is distributed proportionally to cover
|
|
needs
|
|
</li>
|
|
<li>Regular needs assessment and adjustment process</li>
|
|
<li class="flex items-baseline gap-2 flex-wrap">
|
|
Minimum guaranteed amount: {{ currencySymbol
|
|
}}<UInput
|
|
v-model="formData.minGuaranteedPay"
|
|
type="number"
|
|
placeholder="1000"
|
|
class="inline-field number-field w-10"
|
|
@change="autoSave" />/month
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Common payment details -->
|
|
<div class="mt-4 space-y-2">
|
|
<p class="content-paragraph font-semibold">
|
|
Payment Schedule:
|
|
</p>
|
|
<p class="">
|
|
Paid on the
|
|
<USelectMenu
|
|
v-model="formData.paymentDay"
|
|
:items="dayOptions"
|
|
placeholder="15th"
|
|
size="lg"
|
|
class="w-48"
|
|
@change="autoSave" />
|
|
|
|
of each month and the surplus (profit) distributed equally
|
|
every
|
|
<UInput
|
|
v-model="formData.surplusFrequency"
|
|
placeholder="quarter"
|
|
class="inline-field"
|
|
@change="autoSave" />.
|
|
</p>
|
|
</div>
|
|
</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">
|
|
Work Expectations
|
|
</h3>
|
|
<ul class="content-list my-2 pl-6 list-disc">
|
|
<li class="flex items-baseline gap-2 flex-wrap">
|
|
Target hours per week:
|
|
<UInput
|
|
v-model="formData.targetHours"
|
|
type="number"
|
|
placeholder="40"
|
|
class="inline-field number-field w-10"
|
|
@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
|
|
</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">
|
|
Financial Transparency
|
|
</h3>
|
|
<ul class="content-list my-2 pl-6 list-disc">
|
|
<li>
|
|
All members can access all financial records anytime
|
|
</li>
|
|
<li>Monthly financial check-ins at meetings</li>
|
|
<li>Quarterly reviews of our runway</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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">
|
|
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">
|
|
Rotating Roles
|
|
</h3>
|
|
<p
|
|
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 w-10"
|
|
@change="autoSave" />
|
|
months. Current roles include:
|
|
</p>
|
|
<UFormField class="form-group-large">
|
|
<UTextarea
|
|
v-model="formData.rotatingRoles"
|
|
:rows="4"
|
|
placeholder="List rotating operational roles"
|
|
size="xl"
|
|
class="large-field"
|
|
@input="debouncedAutoSave"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
</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">
|
|
Shared Responsibilities
|
|
</h3>
|
|
<p class="content-paragraph mb-3 leading-relaxed text-left">
|
|
All members participate in:
|
|
</p>
|
|
<UFormField class="form-group-large">
|
|
<UTextarea
|
|
v-model="formData.sharedResponsibilities"
|
|
:rows="3"
|
|
placeholder="List shared responsibilities for all members"
|
|
size="xl"
|
|
class="large-field"
|
|
@input="debouncedAutoSave"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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">
|
|
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">
|
|
When Conflict Happens
|
|
</h3>
|
|
<ol class="content-list numbered my-2 pl-6 list-decimal">
|
|
<li>Direct conversation between parties (if comfortable)</li>
|
|
<li>Mediation with another member</li>
|
|
<li>Full group discussion with structured process</li>
|
|
<li>External mediation if needed</li>
|
|
</ol>
|
|
</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">
|
|
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>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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">
|
|
7. Changing This Agreement
|
|
</h2>
|
|
|
|
<p
|
|
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
|
|
<span class="font-semibold">{{
|
|
getFrameworkLabel(formData.decisionFramework)
|
|
}}</span>
|
|
process. Small clarifications can happen anytime; structural
|
|
changes need
|
|
{{ getStructuralChangeRequirement(formData.decisionFramework) }}.
|
|
</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">
|
|
8. If We Need to Close
|
|
</h2>
|
|
|
|
<div class="space-y-4">
|
|
<p class="content-paragraph mb-3 leading-relaxed text-left">
|
|
If
|
|
{{ getDisplayName().toLowerCase() }} dissolves:
|
|
</p>
|
|
<ol class="content-list numbered my-2 pl-6 list-decimal">
|
|
<li>Pay all debts and obligations</li>
|
|
<li>Return member contributions</li>
|
|
<li>Distribute remaining assets equally among members</li>
|
|
<li class="flex items-baseline gap-2 flex-wrap">
|
|
Or donate remaining assets to
|
|
<UInput
|
|
v-model="formData.assetDonationTarget"
|
|
placeholder="Enter organization name"
|
|
class="inline-field wide-field" />
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 9: Legal Registration (Optional) -->
|
|
<div class="section-card">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h2
|
|
class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-0">
|
|
9. Legal Registration
|
|
</h2>
|
|
<div class="flex items-center gap-2">
|
|
<label
|
|
class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
|
|
Legally registered?
|
|
</label>
|
|
<USwitch
|
|
v-model="formData.isLegallyRegistered"
|
|
@change="autoSave" />
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="formData.isLegallyRegistered" class="space-y-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<UFormField label="Legal Structure" class="form-group-block">
|
|
<UInput
|
|
v-model="formData.legalStructure"
|
|
size="xl"
|
|
class="w-full"
|
|
placeholder="Cooperative corporation, LLC, partnership, etc."
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
|
|
<UFormField label="Registered in" class="form-group-inline">
|
|
<UInput
|
|
v-model="formData.registeredLocation"
|
|
placeholder="State/Province"
|
|
size="xl"
|
|
class="inline-field w-full"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
|
|
<div class="fiscal-year-group">
|
|
<UFormField label="Fiscal Year-End" class="form-group-inline">
|
|
<div class="flex gap-2 items-center">
|
|
<USelect
|
|
v-model="formData.fiscalYearEndMonth"
|
|
:items="monthOptions"
|
|
placeholder="Month"
|
|
size="xl"
|
|
class="w-60"
|
|
@change="autoSave" />
|
|
<USelect
|
|
v-model="formData.fiscalYearEndDay"
|
|
:items="dayOptions"
|
|
placeholder="Day"
|
|
size="xl"
|
|
class="w-40"
|
|
@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.
|
|
</p>
|
|
</div>
|
|
|
|
<div v-else class="text-neutral-600 dark:text-neutral-400 italic">
|
|
<p class="content-paragraph">
|
|
{{ getDisplayName() || "This cooperative" }} operates as an
|
|
informal collective. If we decide to register legally in the
|
|
future, we'll update this section with our legal structure
|
|
details.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Export Options - Bottom -->
|
|
<ExportOptions
|
|
:export-data="exportData"
|
|
filename="membership-agreement"
|
|
title="Membership Agreement" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch } from "vue";
|
|
import { getCurrencySymbol } from "~/utils/currency";
|
|
|
|
// Import centralized coop info
|
|
const { coopInfo, updateCoopInfo, getDisplayName } = useCoopInfo();
|
|
|
|
// Get currency symbol from global coop builder
|
|
const coop = useCoopBuilder();
|
|
const currencySymbol = computed(() => getCurrencySymbol(coop.currency.value));
|
|
|
|
definePageMeta({
|
|
layout: false,
|
|
});
|
|
|
|
// Import PDF export composable
|
|
const { exportToPDF } = usePdfExportBasic();
|
|
|
|
const monthOptions = [
|
|
"January",
|
|
"February",
|
|
"March",
|
|
"April",
|
|
"May",
|
|
"June",
|
|
"July",
|
|
"August",
|
|
"September",
|
|
"October",
|
|
"November",
|
|
"December",
|
|
];
|
|
|
|
const dayOptions = Array.from({ length: 31 }, (_, i) => ({
|
|
value: i + 1,
|
|
label: `${i + 1}${getOrdinalSuffix(i + 1)}`,
|
|
}));
|
|
|
|
// Helper function to get ordinal suffix (1st, 2nd, 3rd, etc.)
|
|
function getOrdinalSuffix(num) {
|
|
if (num >= 11 && num <= 13) {
|
|
return "th";
|
|
}
|
|
switch (num % 10) {
|
|
case 1:
|
|
return "st";
|
|
case 2:
|
|
return "nd";
|
|
case 3:
|
|
return "rd";
|
|
default:
|
|
return "th";
|
|
}
|
|
}
|
|
|
|
const payPolicyOptions = [
|
|
{
|
|
value: "equal-pay",
|
|
label: "Equal Pay - All members receive equal compensation",
|
|
},
|
|
{
|
|
value: "hours-weighted",
|
|
label: "Hours-Weighted - Pay proportional to hours worked",
|
|
},
|
|
{
|
|
value: "needs-weighted",
|
|
label: "Needs-Weighted - Pay proportional to individual needs",
|
|
},
|
|
];
|
|
|
|
const decisionFrameworkOptions = [
|
|
{
|
|
value: "consent-based",
|
|
label: "Consent-Based - No one objects strongly enough to block",
|
|
},
|
|
{
|
|
value: "consensus",
|
|
label: "Full Consensus - Everyone agrees to support",
|
|
},
|
|
{
|
|
value: "consultative",
|
|
label: "Consultative - Gather input, then designated person decides",
|
|
},
|
|
{
|
|
value: "democratic-vote",
|
|
label: "Democratic Vote - Majority decides",
|
|
},
|
|
{
|
|
value: "advice-process",
|
|
label: "Advice Process - Decision-maker seeks input, then decides",
|
|
},
|
|
{
|
|
value: "delegation",
|
|
label: "Delegation - Empower responsible party to decide",
|
|
},
|
|
{
|
|
value: "defer-to-expert",
|
|
label: "Defer to Expert - Trust the person who knows best",
|
|
},
|
|
{
|
|
value: "facilitated-discussion",
|
|
label: "Facilitated Discussion - Talk it through with structure",
|
|
},
|
|
];
|
|
|
|
// Helper function to get framework label
|
|
function getFrameworkLabel(framework) {
|
|
const labels = {
|
|
"consent-based": "consent-based decision",
|
|
consensus: "consensus",
|
|
consultative: "consultative",
|
|
"democratic-vote": "democratic voting",
|
|
"advice-process": "advice",
|
|
delegation: "delegation",
|
|
"defer-to-expert": "expert-led",
|
|
"facilitated-discussion": "facilitated discussion",
|
|
};
|
|
return labels[framework] || "decision-making";
|
|
}
|
|
|
|
// Helper function to get structural change requirement text
|
|
function getStructuralChangeRequirement(framework) {
|
|
const requirements = {
|
|
"consent-based": "no blocking objections from any member",
|
|
consensus: "full consensus from all members",
|
|
consultative: "consultation with all members before the decision",
|
|
"democratic-vote": "a majority vote of all members",
|
|
"advice-process": "advice from all members before the decision",
|
|
delegation: "approval from the delegated authority",
|
|
"defer-to-expert":
|
|
"approval from the designated expert after member consultation",
|
|
"facilitated-discussion": "a facilitated discussion with all members",
|
|
};
|
|
return (
|
|
requirements[framework] || "approval through our chosen decision process"
|
|
);
|
|
}
|
|
|
|
// Helper function to get framework details
|
|
function getFrameworkDetails(framework) {
|
|
const details = {
|
|
"consent-based": {
|
|
tagline: "No one objects strongly enough to block",
|
|
description:
|
|
"Not everyone needs to love it, but no one sees it as harmful to our organization. Focus on addressing objections rather than optimizing preferences.",
|
|
practicalDescription:
|
|
"We use consent, not consensus. This means we move forward when no one has a principled objection that would harm our organization. An objection must explain how the proposal would contradict our values or threaten our sustainability.",
|
|
},
|
|
consensus: {
|
|
tagline: "Everyone agrees to support the decision",
|
|
description:
|
|
"Take the time to get real alignment on high-stakes decisions. Everyone can live with it, even if it's not their favorite option.",
|
|
practicalDescription:
|
|
"For major decisions, we work together until everyone can support the outcome. This doesn't mean it's everyone's first choice, but that everyone understands and commits to the decision.",
|
|
},
|
|
consultative: {
|
|
tagline: "Gather input, then designated person decides",
|
|
description:
|
|
"When no one has clear expertise but we need various perspectives, one person gathers input and makes the final call.",
|
|
practicalDescription:
|
|
"A designated decision owner seeks input from all stakeholders, researches options, and makes the decision with clear reasoning. They explain how input influenced the final decision.",
|
|
},
|
|
"democratic-vote": {
|
|
tagline: "Majority decides, move forward together",
|
|
description:
|
|
"For larger groups or time-sensitive decisions, voting provides clear resolution while respecting everyone's input.",
|
|
practicalDescription:
|
|
"After discussion, we vote and move forward with the majority decision. We document minority concerns and revisit them if needed. Anonymous voting reduces peer pressure.",
|
|
},
|
|
"advice-process": {
|
|
tagline: "Decision-maker seeks input, then decides",
|
|
description:
|
|
"Balances inclusion with efficiency. The decision owner genuinely considers input but isn't bound by it.",
|
|
practicalDescription:
|
|
"The person most affected or willing becomes the decision owner. They seek advice from those with expertise and those affected, then make the decision and explain their reasoning.",
|
|
},
|
|
delegation: {
|
|
tagline: "Empower the responsible party to decide",
|
|
description:
|
|
"Trust those closest to the work to make decisions within clear scope and constraints.",
|
|
practicalDescription:
|
|
"We delegate decisions to the people most affected or with the most expertise. They have authority within defined boundaries and report back on outcomes.",
|
|
},
|
|
"defer-to-expert": {
|
|
tagline: "Trust the person who knows this best",
|
|
description:
|
|
"When someone has clear expertise, let them lead while keeping everyone informed.",
|
|
practicalDescription:
|
|
"The expert proposes solutions with reasoning, answers clarifying questions, and makes the final call. They explain their thinking, not just the outcome.",
|
|
},
|
|
"facilitated-discussion": {
|
|
tagline: "Talk it through with structure",
|
|
description:
|
|
"Use structured discussion to find clarity before choosing a specific decision method.",
|
|
practicalDescription:
|
|
"We clarify what we're deciding, share all relevant information, and each person shares their perspective with time limits. We identify alignment and differences, then choose the appropriate method.",
|
|
},
|
|
};
|
|
|
|
return (
|
|
details[framework] || {
|
|
tagline: "Select a framework to see details",
|
|
description: "",
|
|
practicalDescription:
|
|
"Choose a decision-making framework above to see how it works in practice.",
|
|
}
|
|
);
|
|
}
|
|
|
|
const formData = ref({
|
|
cooperativeName: "",
|
|
dateEstablished: "",
|
|
purpose: "",
|
|
coreValues: "",
|
|
memberRequirements:
|
|
"Shares our values and purpose\nContributes labour to our organization (by doing actual work, not just investing money)\nCommits to collective decision-making\nParticipates in governance responsibilities",
|
|
members: [{ name: "", email: "", joinDate: "", role: "" }],
|
|
trialPeriodMonths: 3,
|
|
buyInAmount: "",
|
|
noticeDays: 30,
|
|
surplusPayoutDays: 30,
|
|
buyInReturnDays: 90,
|
|
decisionFramework: "consent-based", // Default to consent-based
|
|
dayToDayLimit: 100,
|
|
regularDecisionMin: 100,
|
|
regularDecisionMax: 1000,
|
|
majorDebtThreshold: 5000,
|
|
meetingFrequency: "weekly",
|
|
emergencyNoticeHours: 24,
|
|
// Pay policy settings
|
|
payPolicy: "equal-pay",
|
|
baseRate: 25,
|
|
monthlyDraw: "",
|
|
hourlyRate: 25,
|
|
minGuaranteedPay: 1000,
|
|
paymentDay: 15,
|
|
surplusFrequency: "quarter",
|
|
targetHours: 40,
|
|
roleRotationMonths: 6,
|
|
rotatingRoles:
|
|
"Financial coordinator (handles bookkeeping, not financial decisions)\nMeeting facilitator\nExternal communications\nOthers",
|
|
sharedResponsibilities:
|
|
"Governance and decision-making\nStrategic planning\nMutual support and care",
|
|
reviewFrequency: "year",
|
|
assetDonationTarget: "",
|
|
isLegallyRegistered: false,
|
|
legalStructure: "",
|
|
registeredLocation: "",
|
|
fiscalYearEndMonth: "December",
|
|
fiscalYearEndDay: 31,
|
|
});
|
|
|
|
// Load saved data immediately (before watchers)
|
|
const loadSavedData = () => {
|
|
const saved = localStorage.getItem("membership-agreement-data");
|
|
if (saved) {
|
|
try {
|
|
const parsedData = JSON.parse(saved);
|
|
formData.value = { ...formData.value, ...parsedData };
|
|
console.log("Loaded saved data:", parsedData);
|
|
} catch (error) {
|
|
console.error("Error loading saved data:", error);
|
|
}
|
|
}
|
|
};
|
|
|
|
// Load data immediately
|
|
loadSavedData();
|
|
|
|
// Sync with centralized coop info
|
|
watch(
|
|
() => coopInfo.value,
|
|
(newCoopInfo) => {
|
|
formData.value.cooperativeName =
|
|
newCoopInfo.cooperativeName || formData.value.cooperativeName;
|
|
formData.value.dateEstablished =
|
|
newCoopInfo.dateEstablished || formData.value.dateEstablished;
|
|
formData.value.purpose = newCoopInfo.purpose || formData.value.purpose;
|
|
formData.value.coreValues =
|
|
newCoopInfo.coreValues || formData.value.coreValues;
|
|
},
|
|
{ deep: true, immediate: true }
|
|
);
|
|
|
|
// Update centralized store when key fields change
|
|
watch(
|
|
() => ({
|
|
cooperativeName: formData.value.cooperativeName,
|
|
dateEstablished: formData.value.dateEstablished,
|
|
purpose: formData.value.purpose,
|
|
coreValues: formData.value.coreValues,
|
|
legalStructure: formData.value.legalStructure,
|
|
registeredLocation: formData.value.registeredLocation,
|
|
isLegallyRegistered: formData.value.isLegallyRegistered,
|
|
}),
|
|
(newData) => {
|
|
updateCoopInfo(newData);
|
|
},
|
|
{ deep: true }
|
|
);
|
|
|
|
// Auto-save to localStorage (removed immediate to prevent overwriting)
|
|
watch(
|
|
formData,
|
|
(newData) => {
|
|
localStorage.setItem("membership-agreement-data", JSON.stringify(newData));
|
|
console.log("Auto-saved data");
|
|
},
|
|
{ deep: true }
|
|
);
|
|
|
|
// Also ensure data is loaded on mount as backup
|
|
onMounted(() => {
|
|
loadSavedData();
|
|
});
|
|
|
|
// Auto-save individual field changes immediately
|
|
const autoSave = () => {
|
|
localStorage.setItem(
|
|
"membership-agreement-data",
|
|
JSON.stringify(formData.value)
|
|
);
|
|
console.log("Manual auto-save triggered:", formData.value);
|
|
};
|
|
|
|
// Debounced auto-save for better performance
|
|
const debouncedAutoSave = debounce(autoSave, 300);
|
|
|
|
// Helper function for debouncing
|
|
function debounce(func, wait) {
|
|
let timeout;
|
|
return function executedFunction(...args) {
|
|
const later = () => {
|
|
clearTimeout(timeout);
|
|
func(...args);
|
|
};
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(later, wait);
|
|
};
|
|
}
|
|
|
|
// Member management functions
|
|
const addMember = () => {
|
|
formData.value.members.push({ name: "", email: "", joinDate: "", role: "" });
|
|
debouncedAutoSave();
|
|
};
|
|
|
|
const removeMember = (index) => {
|
|
if (formData.value.members.length > 1) {
|
|
formData.value.members.splice(index, 1);
|
|
debouncedAutoSave();
|
|
}
|
|
};
|
|
|
|
// Print function with proper form value handling
|
|
const handlePrint = () => {
|
|
// Create print-friendly version by replacing inputs with their values from formData
|
|
const inputs = document.querySelectorAll("input, textarea, select");
|
|
const printValues = [];
|
|
|
|
// Also create signature section replacement
|
|
const signatureSpace = document.querySelector(".signature-space");
|
|
let signatureReplacement = null;
|
|
|
|
if (signatureSpace) {
|
|
const signatureDiv = document.createElement("div");
|
|
signatureDiv.className = "print-signatures";
|
|
signatureDiv.innerHTML = `
|
|
<p style="font-weight: bold; margin-bottom: 12pt; color: #000;">Member Signatures</p>
|
|
<p style="margin-bottom: 16pt; color: #000;">By signing below, we agree to these terms and commit to working together as equals in this cooperative.</p>
|
|
`;
|
|
|
|
// 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)
|
|
);
|
|
|
|
for (let i = 0; i < numSignatures; i++) {
|
|
const memberName = membersWithNames[i]?.name || "";
|
|
const sigDiv = document.createElement("div");
|
|
sigDiv.style.marginBottom = "24pt";
|
|
sigDiv.innerHTML = `
|
|
<p style="margin-bottom: 8pt; font-weight: bold; color: #000;">${
|
|
memberName || `Member ${i + 1}:`
|
|
}</p>
|
|
<div style="border-bottom: 1pt solid #000; width: 300pt; height: 16pt; margin-bottom: 4pt;"></div>
|
|
<p style="font-size: 9pt; color: #666;">Signature Date: ___________</p>
|
|
`;
|
|
signatureDiv.appendChild(sigDiv);
|
|
}
|
|
|
|
signatureReplacement = signatureDiv;
|
|
signatureSpace.style.display = "none";
|
|
signatureSpace.parentNode.insertBefore(signatureDiv, signatureSpace);
|
|
}
|
|
|
|
inputs.forEach((input, index) => {
|
|
// Get value from the actual formData reactive object instead of DOM
|
|
let value = "";
|
|
|
|
// Try to match the input to formData properties
|
|
if (input.closest('[label="Cooperative Name"]'))
|
|
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 Core Values"]'))
|
|
value = formData.value.coreValues;
|
|
else if (input.closest('[label="Legal Structure"]'))
|
|
value = formData.value.legalStructure;
|
|
else if (input.closest('[label="Registered in"]'))
|
|
value = formData.value.registeredLocation;
|
|
else if (input.closest('[label="Fiscal Year-End"]')) {
|
|
if (input.tagName === "SELECT" || input.type === "select-one") {
|
|
value = formData.value.fiscalYearEndMonth;
|
|
} else {
|
|
value = formData.value.fiscalYearEndDay;
|
|
}
|
|
}
|
|
// 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 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;
|
|
}
|
|
}
|
|
// Fallback to input.value
|
|
else {
|
|
value = input.value?.trim() || "";
|
|
}
|
|
|
|
// Create a span element to replace the input for print
|
|
const printSpan = document.createElement("span");
|
|
printSpan.className = "print-value";
|
|
|
|
if (value) {
|
|
// Has a value - show it in bold
|
|
printSpan.textContent = value;
|
|
printSpan.style.fontWeight = "bold";
|
|
} else {
|
|
// Empty field - show as blank line
|
|
printSpan.innerHTML = " ";
|
|
printSpan.setAttribute("data-empty", "true");
|
|
}
|
|
|
|
printSpan.setAttribute("data-original-index", index);
|
|
|
|
// Store original element info for restoration
|
|
printValues.push({
|
|
element: input,
|
|
parent: input.parentNode,
|
|
nextSibling: input.nextSibling,
|
|
replacement: printSpan,
|
|
});
|
|
|
|
// Replace input with span for print
|
|
input.style.display = "none";
|
|
input.parentNode.insertBefore(printSpan, input);
|
|
});
|
|
|
|
// Trigger print
|
|
setTimeout(() => {
|
|
window.print();
|
|
|
|
// Restore original inputs after print dialog
|
|
setTimeout(() => {
|
|
printValues.forEach((item) => {
|
|
item.element.style.display = "";
|
|
if (item.replacement.parentNode) {
|
|
item.replacement.parentNode.removeChild(item.replacement);
|
|
}
|
|
});
|
|
|
|
// Restore signature section
|
|
if (signatureReplacement && signatureSpace) {
|
|
signatureSpace.style.display = "";
|
|
if (signatureReplacement.parentNode) {
|
|
signatureReplacement.parentNode.removeChild(signatureReplacement);
|
|
}
|
|
}
|
|
}, 100);
|
|
}, 100);
|
|
};
|
|
|
|
// Export data for the ExportOptions component
|
|
const exportData = computed(() => ({
|
|
// Pass the complete formData object - this is what the export functions use
|
|
formData: formData.value,
|
|
// Also provide direct access to key fields for backward compatibility
|
|
cooperativeName: getDisplayName(),
|
|
section: "membership-agreement",
|
|
exportedAt: new Date().toISOString(),
|
|
// Include computed/dynamic values for complete export
|
|
decisionFrameworkDetails: getFrameworkDetails(
|
|
formData.value.decisionFramework
|
|
),
|
|
decisionFrameworkLabel: getFrameworkLabel(formData.value.decisionFramework),
|
|
structuralChangeRequirement: getStructuralChangeRequirement(
|
|
formData.value.decisionFramework
|
|
),
|
|
paymentDayLabel: formData.value.paymentDay
|
|
? `${formData.value.paymentDay}${getOrdinalSuffix(
|
|
formData.value.paymentDay
|
|
)}`
|
|
: "15th",
|
|
// Include selected dropdown labels for readability
|
|
decisionFrameworkName:
|
|
decisionFrameworkOptions.find(
|
|
(opt) => opt.value === formData.value.decisionFramework
|
|
)?.label || "Consent-Based - No one objects strongly enough to block",
|
|
payPolicyName:
|
|
payPolicyOptions.find((opt) => opt.value === formData.value.payPolicy)
|
|
?.label || "Equal Pay - All members receive equal compensation",
|
|
}));
|
|
</script>
|
|
|
|
<style scoped>
|
|
@reference "tailwindcss";
|
|
|
|
/* Template-specific styles not in main.css */
|
|
|
|
/* Fiscal year group styling */
|
|
.fiscal-year-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.fiscal-year-group .flex {
|
|
align-items: center;
|
|
}
|
|
|
|
/* Signature space styling */
|
|
.signature-space {
|
|
margin-top: 2rem;
|
|
padding: 2rem 1rem;
|
|
border: 1px dashed #d1d5db;
|
|
border-radius: 0.375rem;
|
|
background: #f9fafb;
|
|
min-height: 4rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Review dates styling */
|
|
.review-dates {
|
|
background: #f9fafb;
|
|
padding: 1rem;
|
|
border-radius: 0.375rem;
|
|
border-left: 3px solid #3b82f6;
|
|
}
|
|
|
|
/* Font families */
|
|
.template-content.font-source-serif,
|
|
.template-content.font-source-serif * {
|
|
font-family: "Source Serif 4", "Source Serif Pro", Georgia, serif !important;
|
|
}
|
|
|
|
.template-content.font-ubuntu,
|
|
.template-content.font-ubuntu * {
|
|
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;
|
|
}
|
|
</style>
|