1864 lines
63 KiB
Vue
1864 lines
63 KiB
Vue
<template>
|
|
<div>
|
|
<!-- Export Options - Top -->
|
|
|
|
<ExportOptions
|
|
:export-data="exportData"
|
|
filename="conflict-resolution-framework"
|
|
title="Conflict Resolution" />
|
|
|
|
<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 Header -->
|
|
<div class="text-center mb-8">
|
|
<h1
|
|
class="text-3xl md:text-5xl font-bold uppercase m-0 py-4 border-t-2 border-b-2 text-black dark:text-white border-black dark:border-white"
|
|
:data-org-name="getOrgName()">
|
|
CONFLICT RESOLUTION
|
|
</h1>
|
|
</div>
|
|
|
|
<!-- Section 1: Cooperative Information -->
|
|
<div class="section-card">
|
|
<div class="space-y-6">
|
|
<UFormField label="Cooperative Name" class="form-group-large">
|
|
<UInput
|
|
v-model="formData.orgName"
|
|
placeholder="Enter your cooperative name"
|
|
size="xl"
|
|
class="w-full"
|
|
:error="validationErrors.orgName"
|
|
@input="debouncedAutoSave" />
|
|
</UFormField>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 2: Core Values -->
|
|
<div class="section-card">
|
|
<div class="flex flex-row justify-between items-center">
|
|
<h2 class="section-title">2. Values</h2>
|
|
<div class="flex flex-row gap-2 items-center no-print no-pdf">
|
|
<USwitch
|
|
v-model="sectionsEnabled.values"
|
|
size="sm"
|
|
label="Include this section"
|
|
:ui="{
|
|
label: 'text-xs text-neutral-700 dark:text-neutral-300',
|
|
}" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-6" v-show="sectionsEnabled.values">
|
|
<UFormField
|
|
label="Select core values (check all that apply)"
|
|
class="form-group-large">
|
|
<div class="values-grid">
|
|
<div
|
|
v-for="(value, index) in coreValues"
|
|
:key="index"
|
|
class="relative">
|
|
<!-- Dithered shadow for selected items -->
|
|
<div
|
|
v-if="value.checked"
|
|
class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
|
|
|
|
<div
|
|
:class="[
|
|
'checkbox-item p-3 border border-black dark:border-white transition-all',
|
|
value.checked
|
|
? 'item-selected bg-white dark:bg-neutral-950'
|
|
: 'bg-transparent',
|
|
]">
|
|
<UCheckbox
|
|
v-model="value.checked"
|
|
:id="`core-value-${index}`"
|
|
:label="value.label"
|
|
@change="autoSave" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</UFormField>
|
|
|
|
<UFormField
|
|
label="Additional values or principles"
|
|
class="form-group-large">
|
|
<UTextarea
|
|
v-model="formData.customValues"
|
|
:rows="3"
|
|
placeholder="Add any additional values specific to your cooperative..."
|
|
size="xl"
|
|
class="w-full"
|
|
@input="debouncedAutoSave" />
|
|
</UFormField>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 3: Conflict Types -->
|
|
<div class="section-card">
|
|
<h2 class="section-title">3. Types of Conflicts Covered</h2>
|
|
<p class="mb-4">
|
|
Select which types of conflicts this framework will address:
|
|
</p>
|
|
|
|
<div class="checkbox-group space-y-3">
|
|
<div
|
|
v-for="(conflict, index) in conflictTypes"
|
|
:key="index"
|
|
class="relative">
|
|
<!-- Dithered shadow for selected items -->
|
|
<div
|
|
v-if="conflict.checked"
|
|
class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
|
|
|
|
<div
|
|
:class="[
|
|
'checkbox-item p-3 border border-black dark:border-white transition-all',
|
|
conflict.checked
|
|
? 'item-selected bg-white dark:bg-neutral-950'
|
|
: 'bg-transparent',
|
|
]">
|
|
<UCheckbox
|
|
v-model="conflict.checked"
|
|
:id="`conflict-type-${index}`"
|
|
:label="conflict.label"
|
|
@change="autoSave" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="validationErrors.conflictTypes" class="validation-error">
|
|
{{ validationErrors.conflictTypes }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 4: Resolution Approach -->
|
|
<div class="section-card">
|
|
<h2 class="section-title">4. Primary Resolution Approach</h2>
|
|
|
|
<div class="space-y-6">
|
|
<UFormField
|
|
label="Choose your primary conflict resolution philosophy:">
|
|
<URadioGroup
|
|
v-model="formData.approach"
|
|
:items="approachOptions"
|
|
variant="card"
|
|
size="lg"
|
|
class="mt-2" />
|
|
<div v-if="validationErrors.approach" class="validation-error">
|
|
{{ validationErrors.approach }}
|
|
</div>
|
|
</UFormField>
|
|
|
|
<UFormField class="form-group-large">
|
|
<UCheckbox
|
|
v-model="formData.anonymousReporting"
|
|
id="anonymous-reporting"
|
|
label="Allow anonymous reporting"
|
|
help="Members can report issues without revealing their identity"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 5: Roles & Responsibilities -->
|
|
<div class="section-card">
|
|
<h2 class="section-title">5. Roles & Responsibilities</h2>
|
|
|
|
<div class="space-y-6">
|
|
<UFormField
|
|
label="Who can receive initial conflict reports? (check all that apply)"
|
|
class="form-group-large">
|
|
<div class="checkbox-group space-y-2 mt-4">
|
|
<div
|
|
v-for="(receiver, index) in reportReceivers"
|
|
:key="index"
|
|
class="relative">
|
|
<!-- Dithered shadow for selected items -->
|
|
<div
|
|
v-if="receiver.checked"
|
|
class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
|
|
|
|
<div
|
|
:class="[
|
|
'checkbox-item p-3 border border-black dark:border-white transition-all',
|
|
receiver.checked
|
|
? 'item-selected bg-white dark:bg-neutral-950'
|
|
: 'bg-transparent',
|
|
]">
|
|
<UCheckbox
|
|
v-model="receiver.checked"
|
|
:id="`report-receiver-${index}`"
|
|
:label="receiver.label"
|
|
@change="autoSave" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="validationErrors.reportReceivers"
|
|
class="validation-error">
|
|
{{ validationErrors.reportReceivers }}
|
|
</div>
|
|
</UFormField>
|
|
|
|
<UFormField
|
|
label="Mediator/facilitator structure"
|
|
class="form-group-large">
|
|
<USelect
|
|
v-model="formData.mediatorType"
|
|
:items="mediatorTypeOptions"
|
|
placeholder="Select mediator structure..."
|
|
size="xl"
|
|
class="w-full"
|
|
:error="validationErrors.mediatorType"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
|
|
<UFormField class="form-group-large">
|
|
<UCheckbox
|
|
v-model="formData.supportPeople"
|
|
id="support-people"
|
|
label="Allow support people in mediation sessions"
|
|
help="Parties can bring a trusted person for emotional support"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 6: Timeline & Process -->
|
|
<div class="section-card">
|
|
<h2 class="section-title">6. Timeline & Process Steps</h2>
|
|
|
|
<div class="space-y-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<UFormField
|
|
label="Initial Response Time"
|
|
class="form-group-large">
|
|
<USelect
|
|
v-model="formData.initialResponse"
|
|
:items="responseTimeOptions"
|
|
placeholder="Select response time..."
|
|
size="xl"
|
|
class="w-full"
|
|
:error="validationErrors.initialResponse"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
|
|
<UFormField
|
|
label="Target Resolution Time"
|
|
class="form-group-large">
|
|
<USelect
|
|
v-model="formData.resolutionTarget"
|
|
:items="resolutionTimeOptions"
|
|
placeholder="Select target time..."
|
|
size="xl"
|
|
class="w-full"
|
|
:error="validationErrors.resolutionTarget"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
</div>
|
|
|
|
<UFormField
|
|
label="Process Steps (select applicable steps)"
|
|
class="form-group-large">
|
|
<div class="checkbox-group mt-4 space-y-3">
|
|
<div
|
|
v-for="(step, index) in processSteps"
|
|
:key="index"
|
|
class="relative">
|
|
<!-- Dithered shadow for selected items -->
|
|
<div
|
|
v-if="step.checked"
|
|
class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
|
|
|
|
<div
|
|
:class="[
|
|
'checkbox-item p-3 border border-black dark:border-white transition-all',
|
|
step.checked
|
|
? 'item-selected bg-white dark:bg-neutral-950'
|
|
: 'bg-transparent',
|
|
]">
|
|
<UCheckbox
|
|
v-model="step.checked"
|
|
:id="`process-step-${index}`"
|
|
:label="`${index + 1}. ${step.label}`"
|
|
@change="autoSave" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="validationErrors.processSteps"
|
|
class="validation-error">
|
|
{{ validationErrors.processSteps }}
|
|
</div>
|
|
</UFormField>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 7: Documentation & Privacy -->
|
|
<div class="section-card">
|
|
<div
|
|
class="section-header flex flex-row justify-between items-center">
|
|
<h2 class="section-title">7. Documentation & Privacy</h2>
|
|
<div class="flex flex-row gap-2 items-center no-print no-pdf">
|
|
<USwitch
|
|
v-model="sectionsEnabled.documentation"
|
|
size="sm"
|
|
label="Include this section"
|
|
:ui="{
|
|
label: 'text-xs text-neutral-700 dark:text-neutral-300',
|
|
}" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-6" v-show="sectionsEnabled.documentation">
|
|
<UFormField label="Documentation Level" class="form-group-large">
|
|
<USelect
|
|
v-model="formData.docLevel"
|
|
:items="docLevelOptions"
|
|
placeholder="Select documentation level..."
|
|
size="xl"
|
|
class="w-full"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
|
|
<UFormField
|
|
label="Confidentiality Level"
|
|
class="form-group-large">
|
|
<USelect
|
|
v-model="formData.confidentiality"
|
|
:items="confidentialityOptions"
|
|
placeholder="Select confidentiality level..."
|
|
size="xl"
|
|
class="w-full"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
|
|
<UFormField
|
|
label="Record Retention Period"
|
|
class="form-group-large">
|
|
<USelect
|
|
v-model="formData.retention"
|
|
:items="retentionOptions"
|
|
placeholder="Select retention period..."
|
|
size="xl"
|
|
class="w-full"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 8: Consequences & Actions -->
|
|
<div class="section-card">
|
|
<h2 class="section-title">8. Consequences & Remedial Actions</h2>
|
|
|
|
<div class="space-y-6">
|
|
<UFormField
|
|
label="Available actions (check all that apply)"
|
|
class="form-group-large">
|
|
<div class="checkbox-group mt-4 space-y-3">
|
|
<div
|
|
v-for="(action, index) in availableActions"
|
|
:key="index"
|
|
class="relative">
|
|
<!-- Dithered shadow for selected items -->
|
|
<div
|
|
v-if="action.checked"
|
|
class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
|
|
|
|
<div
|
|
:class="[
|
|
'checkbox-item p-3 border border-black dark:border-white transition-all',
|
|
action.checked
|
|
? 'item-selected bg-white dark:bg-neutral-950'
|
|
: 'bg-transparent',
|
|
]">
|
|
<UCheckbox
|
|
v-model="action.checked"
|
|
:id="`available-action-${index}`"
|
|
:label="action.label"
|
|
@change="autoSave" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="validationErrors.availableActions"
|
|
class="validation-error">
|
|
{{ validationErrors.availableActions }}
|
|
</div>
|
|
</UFormField>
|
|
|
|
<UFormField
|
|
class="form-group-large border-t border-neutral-200 dark:border-neutral-800 pt-4">
|
|
<UCheckbox
|
|
v-model="formData.appealProcess"
|
|
id="appeal-process"
|
|
label="Include appeals process"
|
|
help="Parties can request review of decisions"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 9: Special Circumstances -->
|
|
<div class="section-card">
|
|
<div
|
|
class="section-header flex flex-row justify-between items-center">
|
|
<h2 class="section-title">9. Special Circumstances</h2>
|
|
<div class="flex flex-row gap-2 items-center no-print no-pdf">
|
|
<USwitch
|
|
v-model="sectionsEnabled.special"
|
|
size="sm"
|
|
label="Include this section"
|
|
:ui="{
|
|
label: 'text-xs text-neutral-700 dark:text-neutral-300',
|
|
}" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-6" v-show="sectionsEnabled.special">
|
|
<div class="checkbox-group space-y-3">
|
|
<div
|
|
v-for="(circumstance, index) in specialCircumstances"
|
|
:key="index"
|
|
class="relative">
|
|
<!-- Dithered shadow for selected items -->
|
|
<div
|
|
v-if="circumstance.checked"
|
|
class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
|
|
|
|
<div
|
|
:class="[
|
|
'checkbox-item p-3 border border-black dark:border-white transition-all',
|
|
circumstance.checked
|
|
? 'item-selected bg-white dark:bg-neutral-950'
|
|
: 'bg-transparent',
|
|
]">
|
|
<UCheckbox
|
|
v-model="circumstance.checked"
|
|
:id="`special-circumstance-${index}`"
|
|
:label="circumstance.label"
|
|
@change="autoSave" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 10: Implementation -->
|
|
<div class="section-card">
|
|
<h2 class="section-title">10. Implementation Details</h2>
|
|
|
|
<div class="space-y-6">
|
|
<UFormField
|
|
label="Training Requirements"
|
|
class="form-group-large">
|
|
<UTextarea
|
|
v-model="formData.training"
|
|
:rows="3"
|
|
class="w-full"
|
|
placeholder="Describe any training needed for member-workers, facilitators, or committee members..."
|
|
size="xl"
|
|
@input="debouncedAutoSave" />
|
|
</UFormField>
|
|
|
|
<div class="flex flex-row space-x-4">
|
|
<UFormField
|
|
label="Policy Review Schedule"
|
|
class="form-group-large">
|
|
<USelect
|
|
v-model="formData.reviewSchedule"
|
|
:items="reviewScheduleOptions"
|
|
placeholder="Select review schedule..."
|
|
size="xl"
|
|
class="w-full"
|
|
:error="validationErrors.reviewSchedule"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
<UFormField
|
|
label="How can this policy be amended?"
|
|
class="form-group-large">
|
|
<USelect
|
|
v-model="formData.amendments"
|
|
:items="amendmentOptions"
|
|
placeholder="Select amendment process..."
|
|
size="xl"
|
|
class="w-full"
|
|
:error="validationErrors.amendments"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
</div>
|
|
|
|
<div class="p-6 bg-neutral-50 dark:bg-neutral-900 rounded-lg">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<UFormField label="Framework Created Date">
|
|
<UInput
|
|
v-model="formData.createdDate"
|
|
type="date"
|
|
size="xl"
|
|
class="w-full mb-0"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
|
|
<UFormField label="Next Review Date">
|
|
<UInput
|
|
v-model="formData.reviewDate"
|
|
type="date"
|
|
size="xl"
|
|
class="w-full mb-0"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 11: Reflection Process -->
|
|
<div class="section-card">
|
|
<div
|
|
class="section-header flex flex-row justify-between items-center">
|
|
<h2 class="section-title">11. Reflection Process</h2>
|
|
<div class="flex flex-row gap-2 items-center no-print no-pdf">
|
|
<USwitch
|
|
v-model="sectionsEnabled.reflection"
|
|
size="sm"
|
|
label="Include detailed reflection guidance"
|
|
:ui="{
|
|
label: 'text-xs text-neutral-700 dark:text-neutral-300',
|
|
}" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-6" v-show="sectionsEnabled.reflection">
|
|
<UFormField
|
|
label="Reflection Period Timeframe"
|
|
class="form-group-large">
|
|
<USelect
|
|
v-model="formData.reflectionPeriod"
|
|
:items="reflectionPeriodOptions"
|
|
placeholder="Select reflection timeframe..."
|
|
size="xl"
|
|
class="w-full md:w-1/2 mt-2"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
|
|
<UFormField
|
|
label="Additional Reflection Prompts"
|
|
class="form-group-large">
|
|
<UTextarea
|
|
v-model="formData.customReflectionPrompts"
|
|
:rows="4"
|
|
placeholder="Add any organization-specific reflection questions or prompts..."
|
|
size="xl"
|
|
class="w-full mt-2"
|
|
@input="debouncedAutoSave" />
|
|
</UFormField>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 12: Direct Resolution Guidelines -->
|
|
<div class="section-card">
|
|
<div
|
|
class="section-header flex flex-row justify-between items-center">
|
|
<h2 class="section-title">12. Direct Resolution Guidelines</h2>
|
|
<div class="flex flex-row gap-2 items-center no-print no-pdf">
|
|
<USwitch
|
|
v-model="sectionsEnabled.directResolution"
|
|
size="sm"
|
|
label="Include detailed conversation guidance"
|
|
:ui="{
|
|
label: 'text-xs text-neutral-700 dark:text-neutral-300',
|
|
}" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-6" v-show="sectionsEnabled.directResolution">
|
|
<UFormField
|
|
label="Communication Channels (select preferred escalation order)"
|
|
class="form-group-large">
|
|
<div class="checkbox-group space-y-3 mt-4">
|
|
<div
|
|
v-for="(channel, index) in communicationChannels"
|
|
:key="index"
|
|
class="relative">
|
|
<!-- Dithered shadow for selected items -->
|
|
<div
|
|
v-if="channel.checked"
|
|
class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
|
|
|
|
<div
|
|
:class="[
|
|
'checkbox-item p-3 border border-black dark:border-white transition-all',
|
|
channel.checked
|
|
? 'item-selected bg-white dark:bg-neutral-950'
|
|
: 'bg-transparent',
|
|
]">
|
|
<UCheckbox
|
|
v-model="channel.checked"
|
|
:id="`comm-channel-${index}`"
|
|
:label="channel.label"
|
|
@change="autoSave" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</UFormField>
|
|
|
|
<UFormField
|
|
class="form-group-large border-t border-neutral-200 dark:border-neutral-800 pt-4">
|
|
<UCheckbox
|
|
v-model="formData.requireDirectAttempt"
|
|
id="require-direct-attempt"
|
|
label="Require direct resolution attempt before escalation"
|
|
help="Parties must try to resolve directly before filing complaints"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
|
|
<UFormField
|
|
class="form-group-large border-t border-neutral-200 dark:border-neutral-800 pt-4">
|
|
<UCheckbox
|
|
v-model="formData.documentDirectResolution"
|
|
id="document-direct-resolution"
|
|
label="Require written record of direct resolution attempts"
|
|
help="Parties should document outcomes of direct conversations"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 13: Responsible Contact People -->
|
|
<div class="section-card">
|
|
<h2 class="section-title">
|
|
13. Responsible Contact People Structure
|
|
</h2>
|
|
|
|
<div class="space-y-6">
|
|
<UFormField
|
|
label="Internal Advisor Designation"
|
|
class="form-group-large">
|
|
<USelect
|
|
v-model="formData.internalAdvisorType"
|
|
:items="internalAdvisorOptions"
|
|
placeholder="Select internal advisor structure..."
|
|
class="w-full md:w-1/2"
|
|
size="xl"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
|
|
<UFormField
|
|
label="Member Liaison for Conflict Resolution Committee"
|
|
class="form-group-large">
|
|
<UInput
|
|
v-model="formData.staffLiaison"
|
|
placeholder="Title/role of designated member liaison"
|
|
size="xl"
|
|
class="w-full md:w-1/2"
|
|
@input="debouncedAutoSave" />
|
|
</UFormField>
|
|
|
|
<UFormField
|
|
label="Elected Board Chair Role in Conflict Resolution"
|
|
class="form-group-large">
|
|
<USelect
|
|
v-model="formData.boardChairRole"
|
|
:items="boardChairRoleOptions"
|
|
placeholder="Select board chair involvement..."
|
|
size="xl"
|
|
class="w-full md:w-1/2"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 14: Formal Complaint Process -->
|
|
<div class="section-card">
|
|
<h2 class="section-title">14. Formal Complaint Requirements</h2>
|
|
|
|
<div class="space-y-6">
|
|
<UFormField
|
|
label="Required Complaint Elements"
|
|
class="form-group-large">
|
|
<div class="checkbox-group space-y-3 mt-4">
|
|
<div
|
|
v-for="(element, index) in formalComplaintElements"
|
|
:key="index"
|
|
class="relative">
|
|
<!-- Dithered shadow for selected items -->
|
|
<div
|
|
v-if="element.checked"
|
|
class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
|
|
|
|
<div
|
|
:class="[
|
|
'checkbox-item p-3 border border-black dark:border-white transition-all',
|
|
element.checked
|
|
? 'item-selected bg-white dark:bg-neutral-950'
|
|
: 'bg-transparent',
|
|
]">
|
|
<UCheckbox
|
|
v-model="element.checked"
|
|
:id="`complaint-element-${index}`"
|
|
:label="element.label"
|
|
@change="autoSave" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</UFormField>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<UFormField
|
|
label="Formal Complaint Acknowledgment Time"
|
|
class="form-group-large">
|
|
<USelect
|
|
v-model="formData.formalAcknowledgmentTime"
|
|
:items="acknowledgmentTimeOptions"
|
|
placeholder="Select acknowledgment timeframe..."
|
|
class="w-full"
|
|
size="xl"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
|
|
<UFormField
|
|
label="Formal Review Completion Time"
|
|
class="form-group-large">
|
|
<USelect
|
|
v-model="formData.formalReviewTime"
|
|
:items="reviewTimeOptions"
|
|
placeholder="Select review timeframe..."
|
|
size="xl"
|
|
class="w-full"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
</div>
|
|
|
|
<UFormField class="form-group-large">
|
|
<UCheckbox
|
|
v-model="formData.requireExternalAdvice"
|
|
id="require-external-advice"
|
|
label="Require external legal advice for complex complaints"
|
|
help="Seek external expertise for multi-party or member-coordinator complaints"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 15: Settlement & Documentation -->
|
|
<div class="section-card">
|
|
<h2 class="section-title">15. Settlement & Documentation</h2>
|
|
|
|
<div class="space-y-6">
|
|
<UFormField class="form-group-large">
|
|
<UCheckbox
|
|
v-model="formData.requireMinutesOfSettlement"
|
|
id="minutes-of-settlement"
|
|
label="Require 'Minutes of Settlement' for resolved complaints"
|
|
help="Agreements must be documented in writing and signed by both parties"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
|
|
<div class="flex flex-row space-x-4">
|
|
<UFormField
|
|
label="Settlement Confidentiality Level"
|
|
class="form-group-large">
|
|
<USelect
|
|
v-model="formData.settlementConfidentiality"
|
|
:items="confidentialityOptions"
|
|
placeholder="Select confidentiality level..."
|
|
size="xl"
|
|
class="w-full"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
<UFormField
|
|
label="Conflict Resolution File Retention"
|
|
class="form-group-large">
|
|
<USelect
|
|
v-model="formData.conflictFileRetention"
|
|
:items="retentionOptions"
|
|
placeholder="Select retention period..."
|
|
size="xl"
|
|
class="w-full"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 16: External Resources -->
|
|
<div class="section-card">
|
|
<div
|
|
class="section-header flex flex-row justify-between items-center">
|
|
<h2 class="section-title">16. External Resources & Redress</h2>
|
|
<div class="flex flex-row gap-2 items-center no-print no-pdf">
|
|
<USwitch
|
|
v-model="sectionsEnabled.externalResources"
|
|
size="sm"
|
|
label="Include external resource information"
|
|
:ui="{
|
|
label: 'text-xs text-neutral-700 dark:text-neutral-300',
|
|
}" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-6" v-show="sectionsEnabled.externalResources">
|
|
<UFormField class="form-group-large">
|
|
<UCheckbox
|
|
v-model="formData.includeHumanRights"
|
|
id="include-human-rights"
|
|
label="Include Human Rights Commission information"
|
|
help="Reference external discrimination complaint options"
|
|
@change="autoSave" />
|
|
</UFormField>
|
|
|
|
<UFormField
|
|
label="Additional External Resources"
|
|
class="form-group-large">
|
|
<UTextarea
|
|
v-model="formData.additionalResources"
|
|
:rows="3"
|
|
class="w-full"
|
|
placeholder="List any other external resources, legal aid contacts, or specialized support services..."
|
|
size="xl"
|
|
@input="debouncedAutoSave" />
|
|
</UFormField>
|
|
|
|
<UFormField
|
|
label="Acknowledgment/Attribution"
|
|
class="form-group-large">
|
|
<UTextarea
|
|
v-model="formData.acknowledgments"
|
|
:rows="2"
|
|
placeholder="Credit any sources used in developing this policy..."
|
|
class="w-full"
|
|
size="xl"
|
|
@input="debouncedAutoSave" />
|
|
</UFormField>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Document Preview Section -->
|
|
<div class="no-print" v-if="showPreview">
|
|
<div
|
|
class="border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-950 p-5 rounded-lg shadow-sm">
|
|
<div class="flex flex-row justify-between items-center mb-4">
|
|
<h2 class="section-title m-0">📄 Policy Document Preview</h2>
|
|
<UButton
|
|
size="sm"
|
|
variant="ghost"
|
|
@click="showPreview = false"
|
|
title="Hide preview">
|
|
✕
|
|
</UButton>
|
|
</div>
|
|
<div
|
|
class="policy-preview prose prose-neutral dark:prose-invert max-w-none px-6 py-5 bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-900 rounded-md max-h-[600px] overflow-y-auto text-left"
|
|
v-html="markdownToHtml(generatePolicyDocument())"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Export Options - Bottom -->
|
|
<ExportOptions
|
|
:export-data="exportData"
|
|
filename="conflict-resolution-framework"
|
|
title="Conflict Resolution Framework" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch, computed } from "vue";
|
|
|
|
// Import centralized coop info
|
|
const { coopInfo, updateCoopInfo, getOrgName } = useCoopInfo();
|
|
|
|
definePageMeta({
|
|
layout: false,
|
|
});
|
|
|
|
useHead({
|
|
title: "Conflict Resolution Framework - Co-op Pay & Value Tool",
|
|
meta: [
|
|
{
|
|
name: "description",
|
|
content:
|
|
"Create a customized conflict resolution framework for your cooperative or organization with restorative justice principles.",
|
|
},
|
|
],
|
|
});
|
|
|
|
const showPreview = ref(false);
|
|
|
|
const approachOptions = [
|
|
{
|
|
value: "restorative",
|
|
label: "Restorative/Loving Justice",
|
|
description:
|
|
"Focus on healing, understanding root causes, and repairing relationships",
|
|
},
|
|
{
|
|
value: "mediation",
|
|
label: "Mediation-First",
|
|
description: "Neutral third-party facilitates dialogue between parties",
|
|
},
|
|
{
|
|
value: "progressive",
|
|
label: "Progressive Discipline",
|
|
description: "Clear escalation steps with defined consequences",
|
|
},
|
|
{
|
|
value: "hybrid",
|
|
label: "Hybrid Approach",
|
|
description: "Combines multiple approaches based on conflict type",
|
|
},
|
|
];
|
|
|
|
const mediatorTypeOptions = [
|
|
"Internal trained mediators",
|
|
"External professional mediators",
|
|
"Rotating member facilitators",
|
|
"Standing committee",
|
|
"Decided case-by-case",
|
|
];
|
|
|
|
const responseTimeOptions = [
|
|
"Within 24 hours",
|
|
"Within 48 hours",
|
|
"Within 72 hours",
|
|
"Within 1 week",
|
|
"Within 2 weeks",
|
|
];
|
|
|
|
const resolutionTimeOptions = [
|
|
"1 week",
|
|
"2 weeks",
|
|
"30 days",
|
|
"60 days",
|
|
"90 days",
|
|
];
|
|
|
|
const docLevelOptions = [
|
|
"Minimal - outcomes only",
|
|
"Standard - key points and decisions",
|
|
"Comprehensive - detailed records",
|
|
];
|
|
|
|
const confidentialityOptions = [
|
|
"Strict - only parties and facilitators",
|
|
"Need-to-know basis",
|
|
"Transparent to membership",
|
|
];
|
|
|
|
const retentionOptions = ["1 year", "3 years", "5 years", "Permanent"];
|
|
|
|
const reviewScheduleOptions = [
|
|
"Every 6 months",
|
|
"Annually",
|
|
"Every 2 years",
|
|
"As needed",
|
|
];
|
|
|
|
const amendmentOptions = [
|
|
"Full consensus required",
|
|
"Consent process (no objections)",
|
|
"2/3 majority vote",
|
|
"Simple majority vote",
|
|
];
|
|
|
|
const reflectionPeriodOptions = [
|
|
"Before any escalation",
|
|
"24-48 hours before complaint",
|
|
"1 week before formal process",
|
|
"Optional but encouraged",
|
|
"Not required",
|
|
];
|
|
|
|
const internalAdvisorOptions = [
|
|
"Single elected advisor",
|
|
"Rotating member representatives",
|
|
"External neutral advisor",
|
|
"Committee-designated advisor",
|
|
"Trained member facilitator",
|
|
];
|
|
|
|
const boardChairRoleOptions = [
|
|
"First contact for coordinator complaints",
|
|
"Appeals reviewer",
|
|
"Participates in collective decision",
|
|
"Advisory role only",
|
|
"Not involved in conflicts",
|
|
];
|
|
|
|
const acknowledgmentTimeOptions = [
|
|
"Within 24 hours",
|
|
"Within 48 hours",
|
|
"Within 1 week",
|
|
"Within 2 weeks",
|
|
];
|
|
|
|
const reviewTimeOptions = [
|
|
"2 weeks",
|
|
"1 month",
|
|
"6 weeks",
|
|
"2 months",
|
|
"3 months",
|
|
];
|
|
|
|
const sectionsEnabled = ref({
|
|
values: true,
|
|
documentation: true,
|
|
special: true,
|
|
reflection: true,
|
|
directResolution: true,
|
|
externalResources: true,
|
|
});
|
|
|
|
const communicationChannels = ref([
|
|
{ label: "Asynchronous text (Slack, email)", checked: true },
|
|
{ label: "Synchronous text (planned chat session)", checked: true },
|
|
{ label: "Audio call or huddle", checked: true },
|
|
{ label: "Video conference", checked: true },
|
|
{ label: "In-person meeting", checked: false },
|
|
]);
|
|
|
|
const formalComplaintElements = ref([
|
|
{ label: "The complainant's name", checked: true },
|
|
{ label: "The respondent's name", checked: true },
|
|
{
|
|
label: "Detailed information about the issue (what, where, when)",
|
|
checked: true,
|
|
},
|
|
{ label: "Details of all prior resolution attempts", checked: true },
|
|
{
|
|
label: "The specific outcome(s) the complainant is seeking",
|
|
checked: true,
|
|
},
|
|
{ label: "Supporting documentation or evidence", checked: false },
|
|
{ label: "Names of potential witnesses", checked: false },
|
|
]);
|
|
|
|
const coreValues = ref([
|
|
{ label: "Mutual Care", checked: true },
|
|
{ label: "Transparency", checked: true },
|
|
{ label: "Accountability", checked: false },
|
|
{ label: "Consent-Based", checked: false },
|
|
{ label: "Anti-Oppression", checked: false },
|
|
{ label: "Restorative Justice", checked: false },
|
|
{ label: "Collective Liberation", checked: false },
|
|
{ label: "Accessibility", checked: false },
|
|
]);
|
|
|
|
const conflictTypes = ref([
|
|
{ label: "Interpersonal disputes between member-workers", checked: true },
|
|
{ label: "Code of Conduct violations", checked: true },
|
|
{ label: "Work allocation and responsibility disagreements", checked: true },
|
|
{ label: "Decision-making process conflicts", checked: true },
|
|
{ label: "Harassment or discrimination", checked: false },
|
|
{ label: "Member-owner responsibility disputes", checked: false },
|
|
{ label: "Collective ownership tensions", checked: false },
|
|
{ label: "External organization disputes", checked: false },
|
|
{ label: "Financial disagreements", checked: false },
|
|
]);
|
|
|
|
const reportReceivers = ref([
|
|
{ label: "Designated conflict resolution committee", checked: true },
|
|
{ label: "Any elected board member", checked: false },
|
|
{ label: "Administrative Coordinator(s)", checked: false },
|
|
{ label: "Designated member liaison", checked: false },
|
|
{ label: "Any member-worker", checked: false },
|
|
]);
|
|
|
|
const processSteps = ref([
|
|
{ label: "Initial report/complaint received", checked: true },
|
|
{ label: "Acknowledgment sent to complainant", checked: true },
|
|
{ label: "Initial assessment by designated party", checked: true },
|
|
{ label: "Informal resolution attempted", checked: true },
|
|
{ label: "Formal investigation if needed", checked: false },
|
|
{ label: "Mediation/facilitated dialogue", checked: true },
|
|
{ label: "Agreement/resolution documented", checked: true },
|
|
{ label: "Follow-up check-in", checked: false },
|
|
]);
|
|
|
|
const availableActions = ref([
|
|
{ label: "Verbal warning", checked: true },
|
|
{ label: "Written warning", checked: true },
|
|
{ label: "Required training/education", checked: true },
|
|
{ label: "Temporary suspension", checked: true },
|
|
{ label: "Role/responsibility changes", checked: false },
|
|
{ label: "Mediated agreement", checked: false },
|
|
{ label: "Removal from the cooperative", checked: true },
|
|
{ label: "Restorative circle/process", checked: false },
|
|
]);
|
|
|
|
const specialCircumstances = ref([
|
|
{
|
|
label: "Include immediate removal protocol for safety threats",
|
|
checked: true,
|
|
},
|
|
{
|
|
label: "Reference external reporting options (Human Rights Tribunal, etc.)",
|
|
checked: true,
|
|
},
|
|
{ label: "Include anti-retaliation provisions", checked: true },
|
|
{ label: "Include trauma-informed approach language", checked: false },
|
|
]);
|
|
|
|
const formData = ref({
|
|
orgName: "",
|
|
orgType: "",
|
|
memberCount: "",
|
|
customValues: "",
|
|
approach: "restorative",
|
|
anonymousReporting: true,
|
|
mediatorType: "Internal trained mediators",
|
|
supportPeople: true,
|
|
initialResponse: "Within 1 week",
|
|
resolutionTarget: "30 days",
|
|
docLevel: "Standard - key points and decisions",
|
|
confidentiality: "Need-to-know basis",
|
|
retention: "5 years",
|
|
appealProcess: true,
|
|
training: "",
|
|
reviewSchedule: "Annually",
|
|
amendments: "Consent process (no objections)",
|
|
createdDate: new Date().toISOString().split("T")[0],
|
|
reviewDate: "",
|
|
// New fields for enhanced sections
|
|
reflectionPeriod: "Before any escalation",
|
|
customReflectionPrompts: "",
|
|
requireDirectAttempt: true,
|
|
documentDirectResolution: true,
|
|
internalAdvisorType: "Single Board-appointed advisor",
|
|
staffLiaison: "",
|
|
boardChairRole: "First contact for coordinator complaints",
|
|
formalAcknowledgmentTime: "Within 1 week",
|
|
formalReviewTime: "1 month",
|
|
requireExternalAdvice: true,
|
|
requireMinutesOfSettlement: true,
|
|
settlementConfidentiality: "Need-to-know basis",
|
|
conflictFileRetention: "5 years",
|
|
includeHumanRights: true,
|
|
additionalResources: "",
|
|
acknowledgments: "",
|
|
});
|
|
|
|
// Validation logic
|
|
const validationErrors = ref({});
|
|
|
|
// Auto-save functionality
|
|
const autoSave = () => {
|
|
// Clear validation errors when users start correcting fields
|
|
clearValidationErrors();
|
|
|
|
if (typeof window !== "undefined") {
|
|
const dataToSave = {
|
|
formData: formData.value,
|
|
coreValues: coreValues.value,
|
|
conflictTypes: conflictTypes.value,
|
|
reportReceivers: reportReceivers.value,
|
|
processSteps: processSteps.value,
|
|
availableActions: availableActions.value,
|
|
specialCircumstances: specialCircumstances.value,
|
|
communicationChannels: communicationChannels.value,
|
|
formalComplaintElements: formalComplaintElements.value,
|
|
sectionsEnabled: sectionsEnabled.value,
|
|
};
|
|
localStorage.setItem(
|
|
"conflict-resolution-framework-data",
|
|
JSON.stringify(dataToSave)
|
|
);
|
|
}
|
|
};
|
|
|
|
const clearValidationErrors = () => {
|
|
validationErrors.value = {};
|
|
};
|
|
|
|
// Simple Markdown to HTML converter for preview
|
|
const markdownToHtml = (markdown) => {
|
|
return (
|
|
markdown
|
|
// Headers
|
|
.replace(/^### (.*$)/gm, "<h3>$1</h3>")
|
|
.replace(/^## (.*$)/gm, "<h2>$1</h2>")
|
|
.replace(/^# (.*$)/gm, "<h1>$1</h1>")
|
|
// Bold and italic
|
|
.replace(/\*\*\*(.*?)\*\*\*/g, "<strong><em>$1</em></strong>")
|
|
.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
|
|
.replace(/\*(.*?)\*/g, "<em>$1</em>")
|
|
// Lists
|
|
.replace(/^- (.*$)/gm, "<li>$1</li>")
|
|
.replace(/(<li>.*<\/li>)/s, "<ul>$1</ul>")
|
|
.replace(/<\/li>\s*<ul>/g, "</li>")
|
|
.replace(/<\/ul>\s*<li>/g, "<li>")
|
|
// Tables (basic support)
|
|
.replace(/^\|(.+)\|$/gm, (_, content) => {
|
|
const cells = content.split("|").map((cell) => cell.trim());
|
|
if (cells.every((cell) => cell.match(/^-+$/))) {
|
|
return ""; // Skip separator rows
|
|
}
|
|
const cellTags = cells
|
|
.map((cell) =>
|
|
cell.startsWith("**") && cell.endsWith("**")
|
|
? `<th>${cell.slice(2, -2)}</th>`
|
|
: `<td>${cell}</td>`
|
|
)
|
|
.join("");
|
|
return `<tr>${cellTags}</tr>`;
|
|
})
|
|
.replace(/(<tr>.*<\/tr>)/s, "<table>$1</table>")
|
|
.replace(/<\/tr>\s*<table>/g, "</tr>")
|
|
.replace(/<\/table>\s*<tr>/g, "<tr>")
|
|
// Line breaks
|
|
.replace(/\n\n/g, "</p><p>")
|
|
.replace(/^(.+)$/gm, "<p>$1</p>")
|
|
// Horizontal rules
|
|
.replace(/^---$/gm, "<hr>")
|
|
// Clean up extra paragraphs around headers and lists
|
|
.replace(/<p><h([1-6])>/g, "<h$1>")
|
|
.replace(/<\/h([1-6])><\/p>/g, "</h$1>")
|
|
.replace(/<p><ul>/g, "<ul>")
|
|
.replace(/<\/ul><\/p>/g, "</ul>")
|
|
.replace(/<p><table>/g, "<table>")
|
|
.replace(/<\/table><\/p>/g, "</table>")
|
|
.replace(/<p><hr><\/p>/g, "<hr>")
|
|
.replace(/<p><\/p>/g, "")
|
|
);
|
|
};
|
|
|
|
// Debounced auto-save
|
|
const debouncedAutoSave = debounce(autoSave, 300);
|
|
|
|
function debounce(func, wait) {
|
|
let timeout;
|
|
return function executedFunction(...args) {
|
|
const later = () => {
|
|
clearTimeout(timeout);
|
|
func(...args);
|
|
};
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(later, wait);
|
|
};
|
|
}
|
|
|
|
// Sync with centralized coop info
|
|
watch(
|
|
() => coopInfo.value,
|
|
(newCoopInfo) => {
|
|
if (newCoopInfo.cooperativeName) {
|
|
formData.value.orgName = newCoopInfo.cooperativeName;
|
|
}
|
|
},
|
|
{ deep: true, immediate: true }
|
|
);
|
|
|
|
// Update centralized store when org name changes
|
|
watch(
|
|
() => formData.value.orgName,
|
|
(newOrgName) => {
|
|
if (newOrgName && newOrgName !== coopInfo.value.cooperativeName) {
|
|
updateCoopInfo({ cooperativeName: newOrgName });
|
|
}
|
|
}
|
|
);
|
|
|
|
// Watch for changes and auto-save
|
|
watch(
|
|
[
|
|
formData,
|
|
coreValues,
|
|
conflictTypes,
|
|
reportReceivers,
|
|
processSteps,
|
|
availableActions,
|
|
specialCircumstances,
|
|
communicationChannels,
|
|
formalComplaintElements,
|
|
sectionsEnabled,
|
|
],
|
|
autoSave,
|
|
{ deep: true }
|
|
);
|
|
|
|
// Generate the complete policy document for preview and export
|
|
const generatePolicyDocument = () => {
|
|
const cooperativeName = formData.value.orgName || "[Cooperative Name]";
|
|
let content = `# ${cooperativeName} Conflict Resolution Policy\n\n`;
|
|
|
|
content += `*Framework Created: ${
|
|
formData.value.createdDate || new Date().toISOString().split("T")[0]
|
|
}*\n`;
|
|
if (formData.value.reviewDate) {
|
|
content += `*Next Review: ${formData.value.reviewDate}*\n`;
|
|
}
|
|
content += `\n---\n\n`;
|
|
|
|
// Core Values section (if enabled)
|
|
if (sectionsEnabled.value.values) {
|
|
content += `## Our Values\n\n`;
|
|
content += `This conflict resolution framework is guided by our core values:\n\n`;
|
|
|
|
const selectedValues = coreValues.value.filter((v) => v.checked);
|
|
if (selectedValues.length > 0) {
|
|
selectedValues.forEach((value) => {
|
|
content += `- **${value.label}**\n`;
|
|
});
|
|
content += `\n`;
|
|
}
|
|
|
|
if (formData.value.customValues) {
|
|
content += `${formData.value.customValues}\n\n`;
|
|
}
|
|
}
|
|
|
|
// Resolution Philosophy
|
|
const approachDescriptions = {
|
|
restorative:
|
|
"We use a **restorative/loving justice** approach that focuses on healing, understanding root causes, and repairing relationships rather than punishment.",
|
|
mediation:
|
|
"We use a **mediation-first** approach where neutral third-party facilitators help parties dialogue and find solutions.",
|
|
progressive:
|
|
"We use **progressive discipline** with clear escalation steps and defined consequences for violations.",
|
|
hybrid:
|
|
"We use a **hybrid approach** that combines multiple methods based on the type and severity of conflict.",
|
|
};
|
|
|
|
if (
|
|
formData.value.approach &&
|
|
approachDescriptions[formData.value.approach]
|
|
) {
|
|
content += `## Our Approach\n\n`;
|
|
content += `${approachDescriptions[formData.value.approach]}\n\n`;
|
|
content += `We do our best to resolve conflicts at the lowest possible escalation step (direct resolution), but agree to escalate conflicts (to assisted resolution) if they are not resolved.\n\n`;
|
|
}
|
|
|
|
// Reflection Process (if enabled)
|
|
if (sectionsEnabled.value.reflection) {
|
|
content += `## Reflection\n\n`;
|
|
content += `Before engaging in direct resolution, we encourage taking time for reflection:\n\n`;
|
|
content += `1. **Set aside time to think** through what happened. What was the other person's behaviour? How did it affect you? *Distinguish other people's **actions** from your **feelings** about them.*\n`;
|
|
content += `2. **Consider uncertainties** or misunderstandings that may have occurred.\n`;
|
|
content += `3. **Distinguish disagreement from personal hostility.** Disagreement and dissent are part of healthy discussion. Hostility is not.\n`;
|
|
content += `4. **Use your personal support system** (friends, family, therapist, etc.) to work through and clarify your perspective.\n`;
|
|
content += `5. **Ask yourself** what part you played, how you could have behaved differently, and what your needs are.\n\n`;
|
|
|
|
if (formData.value.customReflectionPrompts) {
|
|
content += `### Additional Reflection Prompts\n\n`;
|
|
content += `${formData.value.customReflectionPrompts}\n\n`;
|
|
}
|
|
|
|
const reflectionTiming =
|
|
formData.value.reflectionPeriod || "Before any escalation";
|
|
content += `**Reflection Timing:** ${reflectionTiming}\n\n`;
|
|
}
|
|
|
|
// Direct Resolution (if enabled)
|
|
if (sectionsEnabled.value.directResolution) {
|
|
content += `## Direct Resolution\n\n`;
|
|
content += `A *direct resolution* process occurs when individuals communicate their concerns and work together to resolve disputes without filing an informal or formal complaint.\n\n`;
|
|
|
|
content += `### Have a Conversation\n\n`;
|
|
content += `When there is a disagreement, the involved people should first **communicate with each other** about their concerns.\n\n`;
|
|
|
|
content += `1. **Choose a time and place** to meet that is private and agreeable to both.\n`;
|
|
content += `2. **Allow reasonable time** for the conversation.\n`;
|
|
content += `3. **The point is mutual understanding**, not determining who is right or wrong. This requires patience and willingness to listen without immediately dismissing the other person's perspective.\n`;
|
|
content += `4. **Express thoughts and feelings directly** without belittling or dismissing. Use "I" statements and active listening techniques.\n`;
|
|
content += `5. **Communicate your wants and needs** and make offers and requests.\n`;
|
|
content += `6. **Learn for the future.** Ask questions like, "If what I/you said or did came across that way, what can we do to prevent this from happening in the future?"\n`;
|
|
|
|
if (formData.value.documentDirectResolution) {
|
|
content += `7. **Keep a written record** of the resolution agreed to by both parties.\n\n`;
|
|
} else {
|
|
content += `\n`;
|
|
}
|
|
|
|
// Communication Channels
|
|
const selectedChannels = communicationChannels.value.filter(
|
|
(c) => c.checked
|
|
);
|
|
if (selectedChannels.length > 0) {
|
|
content += `### Escalating Communication Bandwidth\n\n`;
|
|
content += `Whenever a misunderstanding or conflict arises, **escalate the bandwidth of the channel**:\n\n`;
|
|
selectedChannels.forEach((channel, index) => {
|
|
content += `${index + 1}. ${channel.label}\n`;
|
|
});
|
|
content += `\n`;
|
|
}
|
|
|
|
if (formData.value.requireDirectAttempt) {
|
|
content += `> **Note:** Direct resolution must be attempted before escalating to assisted resolution, unless safety concerns prevent this.\n\n`;
|
|
}
|
|
}
|
|
|
|
// Assisted Resolution
|
|
content += `## Assisted Resolution\n\n`;
|
|
content += `If talking things out doesn't work, you can ask a responsible contact person for help in writing.\n\n`;
|
|
|
|
// Responsible Contact People
|
|
const selectedReceivers = reportReceivers.value.filter((r) => r.checked);
|
|
if (selectedReceivers.length > 0) {
|
|
content += `### Initial Contact Options\n\n`;
|
|
content += `You can report conflicts to any of the following:\n\n`;
|
|
selectedReceivers.forEach((receiver) => {
|
|
content += `- ${receiver.label}\n`;
|
|
});
|
|
content += `\n`;
|
|
}
|
|
|
|
// Mediator Structure
|
|
if (formData.value.mediatorType) {
|
|
content += `### Mediation/Facilitation\n\n`;
|
|
content += `**Structure:** ${formData.value.mediatorType}\n\n`;
|
|
|
|
if (formData.value.supportPeople) {
|
|
content += `**Support People:** Parties may bring a trusted person for emotional support during mediation sessions.\n\n`;
|
|
}
|
|
}
|
|
|
|
// Timeline
|
|
content += `### Response Times\n\n`;
|
|
if (formData.value.initialResponse) {
|
|
content += `- **Initial Response:** ${formData.value.initialResponse}\n`;
|
|
}
|
|
if (formData.value.resolutionTarget) {
|
|
content += `- **Target Resolution:** ${formData.value.resolutionTarget}\n\n`;
|
|
}
|
|
|
|
// Formal Complaints
|
|
content += `## Formal Complaints\n\n`;
|
|
content += `If assisted resolution efforts do not result in an acceptable outcome within a reasonable timeframe, a *formal complaint* may be filed in writing.\n\n`;
|
|
|
|
// Required Elements
|
|
const selectedElements = formalComplaintElements.value.filter(
|
|
(e) => e.checked
|
|
);
|
|
if (selectedElements.length > 0) {
|
|
content += `### Written Complaint Requirements\n\n`;
|
|
content += `The formal complaint must include:\n\n`;
|
|
selectedElements.forEach((element, index) => {
|
|
content += `${index + 1}. ${element.label}\n`;
|
|
});
|
|
content += `\n`;
|
|
}
|
|
|
|
// Formal Process Timeline
|
|
content += `### Formal Process Timeline\n\n`;
|
|
if (formData.value.formalAcknowledgmentTime) {
|
|
content += `- **Acknowledgment:** ${formData.value.formalAcknowledgmentTime}\n`;
|
|
}
|
|
if (formData.value.formalReviewTime) {
|
|
content += `- **Review Completion:** ${formData.value.formalReviewTime}\n\n`;
|
|
}
|
|
|
|
if (formData.value.requireExternalAdvice) {
|
|
content += `> **External Expertise:** For complex complaints involving multiple parties or organizational leaders, external legal advice will be sought.\n\n`;
|
|
}
|
|
|
|
// Settlement Documentation
|
|
if (formData.value.requireMinutesOfSettlement) {
|
|
content += `### Reaching Agreement\n\n`;
|
|
content += `Any resolution agreed upon must be documented in "Minutes of Settlement" signed by both parties. These agreements will be kept confidential according to our privacy standards.\n\n`;
|
|
}
|
|
|
|
// Consequences and Actions
|
|
const selectedActions = availableActions.value.filter((a) => a.checked);
|
|
if (selectedActions.length > 0) {
|
|
content += `## Possible Outcomes\n\n`;
|
|
content += `Depending on the situation, resolution may include:\n\n`;
|
|
selectedActions.forEach((action) => {
|
|
content += `- ${action.label}\n`;
|
|
});
|
|
content += `\n`;
|
|
}
|
|
|
|
if (formData.value.appealProcess) {
|
|
content += `### Appeals Process\n\n`;
|
|
content += `Parties may request review of decisions through our appeals process.\n\n`;
|
|
}
|
|
|
|
// Documentation and Privacy
|
|
if (sectionsEnabled.value.documentation) {
|
|
content += `## Documentation & Privacy\n\n`;
|
|
if (formData.value.docLevel) {
|
|
content += `**Documentation Level:** ${formData.value.docLevel}\n\n`;
|
|
}
|
|
if (formData.value.confidentiality) {
|
|
content += `**Confidentiality:** ${formData.value.confidentiality}\n\n`;
|
|
}
|
|
if (formData.value.retention) {
|
|
content += `**Record Retention:** ${formData.value.retention}\n\n`;
|
|
}
|
|
}
|
|
|
|
// External Resources (if enabled)
|
|
if (sectionsEnabled.value.externalResources) {
|
|
content += `## External Resources\n\n`;
|
|
if (formData.value.includeHumanRights) {
|
|
content += `Individuals who are not satisfied with the outcome of a harassment or discrimination complaint may file a complaint with the [Canadian Human Rights Commission](https://www.chrc-ccdp.gc.ca/eng) or their provincial human rights tribunal.\n\n`;
|
|
}
|
|
|
|
if (formData.value.additionalResources) {
|
|
content += `### Additional Resources\n\n`;
|
|
content += `${formData.value.additionalResources}\n\n`;
|
|
}
|
|
}
|
|
|
|
// Implementation
|
|
content += `## Policy Management\n\n`;
|
|
if (formData.value.training) {
|
|
content += `### Training Requirements\n\n`;
|
|
content += `${formData.value.training}\n\n`;
|
|
}
|
|
|
|
content += `### Review and Updates\n\n`;
|
|
if (formData.value.reviewSchedule) {
|
|
content += `This policy will be reviewed ${formData.value.reviewSchedule.toLowerCase()}.\n\n`;
|
|
}
|
|
if (formData.value.amendments) {
|
|
content += `**Amendment Process:** ${formData.value.amendments}\n\n`;
|
|
}
|
|
|
|
// Acknowledgments
|
|
if (formData.value.acknowledgments) {
|
|
content += `### Acknowledgments\n\n`;
|
|
content += `${formData.value.acknowledgments}\n\n`;
|
|
}
|
|
|
|
return content;
|
|
};
|
|
|
|
// Export data for the ExportOptions component - structured to match ExportOptions expectations
|
|
const exportData = computed(() => {
|
|
// Get selected values for arrays
|
|
const selectedCoreValues = coreValues.value
|
|
.filter((v) => v.checked)
|
|
.map((v) => v.label);
|
|
const selectedConflictTypes = conflictTypes.value
|
|
.filter((c) => c.checked)
|
|
.map((c) => c.label);
|
|
const selectedProcessSteps = processSteps.value
|
|
.filter((s) => s.checked)
|
|
.map((s) => s.label);
|
|
const selectedActions = availableActions.value
|
|
.filter((a) => a.checked)
|
|
.map((a) => a.label);
|
|
const selectedReceivers = reportReceivers.value
|
|
.filter((r) => r.checked)
|
|
.map((r) => r.label);
|
|
const selectedChannels = communicationChannels.value
|
|
.filter((c) => c.checked)
|
|
.map((c) => c.label);
|
|
const selectedComplaintElements = formalComplaintElements.value
|
|
.filter((e) => e.checked)
|
|
.map((e) => e.label);
|
|
const selectedCircumstances = specialCircumstances.value
|
|
.filter((c) => c.checked)
|
|
.map((c) => c.label);
|
|
|
|
return {
|
|
section: "conflict-resolution-framework",
|
|
// Enhanced formData with processed arrays
|
|
formData: {
|
|
...formData.value,
|
|
// Add processed arrays as lists for the formatter
|
|
coreValuesList: selectedCoreValues,
|
|
conflictTypesList: selectedConflictTypes,
|
|
processStepsList: selectedProcessSteps,
|
|
actionsList: selectedActions,
|
|
receiversList: selectedReceivers,
|
|
channelsList: selectedChannels,
|
|
complaintElementsList: selectedComplaintElements,
|
|
circumstancesList: selectedCircumstances,
|
|
},
|
|
sectionsEnabled: sectionsEnabled.value,
|
|
reportReceivers: reportReceivers.value,
|
|
coreValues: coreValues.value,
|
|
conflictTypes: conflictTypes.value,
|
|
processSteps: processSteps.value,
|
|
availableActions: availableActions.value,
|
|
specialCircumstances: specialCircumstances.value,
|
|
communicationChannels: communicationChannels.value,
|
|
formalComplaintElements: formalComplaintElements.value,
|
|
exportedAt: new Date().toISOString(),
|
|
};
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
@reference "tailwindcss";
|
|
|
|
/* Template-specific styles that aren't in main.css */
|
|
|
|
/* Progress bar */
|
|
.progress-bar {
|
|
width: 100%;
|
|
height: 6px;
|
|
background: #e0e0e0;
|
|
border-radius: 3px;
|
|
margin-bottom: 30px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #4caf50, #66bb6a);
|
|
border-radius: 3px;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
/* Quick start section */
|
|
.quick-start {
|
|
background: #f0f7ff;
|
|
border: 1px solid #d0e3ff;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.quick-start h3 {
|
|
margin: 0 0 10px 0;
|
|
font-size: 1.2rem;
|
|
color: #333;
|
|
}
|
|
|
|
.preset-buttons {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.preset-btn {
|
|
padding: 8px 16px;
|
|
border: 2px solid #0066cc;
|
|
background: white;
|
|
color: #0066cc;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.preset-btn:hover {
|
|
background: #0066cc;
|
|
color: white;
|
|
}
|
|
|
|
.preset-btn.selected {
|
|
background: #0066cc;
|
|
color: white;
|
|
}
|
|
|
|
/* Styling for sections when toggled off */
|
|
.section-card:has(.space-y-6[style*="display: none"]) {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.section-card:has(.space-y-6[style*="display: none"]) .section-title {
|
|
color: #666;
|
|
}
|
|
|
|
/* Toggle styling */
|
|
.toggle-section {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.toggle {
|
|
position: relative;
|
|
width: 48px;
|
|
height: 24px;
|
|
background: #ccc;
|
|
border-radius: 24px;
|
|
cursor: pointer;
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
.toggle.active {
|
|
background: #4caf50;
|
|
}
|
|
|
|
.toggle-slider {
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 2px;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: white;
|
|
border-radius: 50%;
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.toggle.active .toggle-slider {
|
|
transform: translateX(24px);
|
|
}
|
|
|
|
/* Moved validation-error to main.css for consistency */
|
|
|
|
/* Preview styling - template-specific */
|
|
.preview-controls {
|
|
text-align: center;
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
.preview-btn {
|
|
background: #6366f1;
|
|
color: white;
|
|
border: none;
|
|
padding: 0.75rem 1.5rem;
|
|
border-radius: 8px;
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.preview-btn:hover {
|
|
background: #5856eb;
|
|
}
|
|
|
|
.close-preview-btn {
|
|
background: #ef4444;
|
|
color: white;
|
|
border: none;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 1.2rem;
|
|
line-height: 1;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.close-preview-btn:hover {
|
|
background: #dc2626;
|
|
}
|
|
|
|
.policy-preview {
|
|
line-height: 1.6;
|
|
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
|
|
"Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji" !important;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.policy-preview h1 {
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
color: #111827;
|
|
margin-bottom: 1.5rem;
|
|
border-bottom: 2px solid #e5e7eb;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
.policy-preview h2 {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
color: #374151;
|
|
margin-top: 2rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.policy-preview h3 {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
color: #4b5563;
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.policy-preview p {
|
|
margin-bottom: 1.25rem;
|
|
color: #374151;
|
|
}
|
|
|
|
.policy-preview p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.policy-preview :is(p, span, div, li, ol, ul, table, th, td, blockquote) {
|
|
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
|
|
"Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji" !important;
|
|
}
|
|
|
|
.policy-preview a {
|
|
color: #2563eb;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
html.dark .policy-preview a {
|
|
color: #93c5fd;
|
|
}
|
|
|
|
.policy-preview blockquote {
|
|
border-left: 4px solid #e5e7eb;
|
|
margin: 1rem 0;
|
|
padding: 0.5rem 1rem;
|
|
color: #4b5563;
|
|
background: #f9fafb;
|
|
}
|
|
|
|
html.dark .policy-preview blockquote {
|
|
border-left-color: #374151;
|
|
background: #0f1115;
|
|
color: #9ca3af;
|
|
}
|
|
|
|
.policy-preview code {
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
|
"Liberation Mono", "Courier New", monospace !important;
|
|
background: #f3f4f6;
|
|
padding: 0.1rem 0.35rem;
|
|
}
|
|
|
|
html.dark .policy-preview code {
|
|
background: #111827;
|
|
}
|
|
|
|
.policy-preview ul {
|
|
margin: 1rem 0;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
.policy-preview li {
|
|
margin-bottom: 0.5rem;
|
|
color: #374151;
|
|
}
|
|
|
|
.policy-preview table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 1.5rem 0;
|
|
background: white;
|
|
}
|
|
|
|
.policy-preview th,
|
|
.policy-preview td {
|
|
border: 1px solid #d1d5db;
|
|
padding: 0.75rem;
|
|
text-align: left;
|
|
}
|
|
|
|
.policy-preview th {
|
|
background: #f3f4f6;
|
|
font-weight: 600;
|
|
color: #374151;
|
|
}
|
|
|
|
.policy-preview hr {
|
|
border: none;
|
|
border-top: 1px solid #e5e7eb;
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
.policy-preview strong {
|
|
font-weight: 600;
|
|
color: #111827;
|
|
}
|
|
|
|
.policy-preview em {
|
|
font-style: italic;
|
|
}
|
|
</style>
|