chore: update application configuration and UI components for improved styling and functionality
This commit is contained in:
parent
0af6b17792
commit
37ab8d7bab
54 changed files with 23293 additions and 1666 deletions
|
|
@ -2,7 +2,10 @@
|
|||
<div class="space-y-6">
|
||||
<div>
|
||||
<h3 class="text-lg font-medium mb-4">Review & Complete</h3>
|
||||
<p class="text-gray-600 mb-6">Review your setup and complete the wizard to start using your co-op tool.</p>
|
||||
<p class="text-neutral-600 mb-6">
|
||||
Review your setup and complete the wizard to start using your co-op
|
||||
tool.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
|
|
@ -12,31 +15,38 @@
|
|||
<div class="flex items-center justify-between">
|
||||
<h4 class="font-medium">Members ({{ members.length }})</h4>
|
||||
<UBadge :color="membersValid ? 'green' : 'red'" variant="subtle">
|
||||
{{ membersValid ? 'Valid' : 'Incomplete' }}
|
||||
{{ membersValid ? "Valid" : "Incomplete" }}
|
||||
</UBadge>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<div class="space-y-3">
|
||||
<div v-for="member in members" :key="member.id" class="flex items-center justify-between text-sm">
|
||||
<div
|
||||
v-for="member in members"
|
||||
:key="member.id"
|
||||
class="flex items-center justify-between text-sm">
|
||||
<div>
|
||||
<span class="font-medium">{{ member.displayName || 'Unnamed Member' }}</span>
|
||||
<span v-if="member.roleFocus" class="text-gray-500 ml-1">({{ member.roleFocus }})</span>
|
||||
<span class="font-medium">{{
|
||||
member.displayName || "Unnamed Member"
|
||||
}}</span>
|
||||
<span v-if="member.roleFocus" class="text-neutral-500 ml-1"
|
||||
>({{ member.roleFocus }})</span
|
||||
>
|
||||
</div>
|
||||
<div class="text-right text-xs text-gray-500">
|
||||
<div>{{ member.payRelationship || 'No relationship set' }}</div>
|
||||
<div class="text-right text-xs text-neutral-500">
|
||||
<div>{{ member.payRelationship || "No relationship set" }}</div>
|
||||
<div>{{ member.capacity?.targetHours || 0 }}h/month</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-3 border-t border-gray-100">
|
||||
|
||||
<div class="pt-3 border-t border-neutral-100">
|
||||
<div class="grid grid-cols-2 gap-4 text-xs">
|
||||
<div>
|
||||
<span class="text-gray-600">Total capacity:</span>
|
||||
<span class="text-neutral-600">Total capacity:</span>
|
||||
<span class="font-medium ml-1">{{ totalCapacity }}h</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-gray-600">Avg external:</span>
|
||||
<span class="text-neutral-600">Avg external:</span>
|
||||
<span class="font-medium ml-1">{{ avgExternal }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -50,35 +60,47 @@
|
|||
<div class="flex items-center justify-between">
|
||||
<h4 class="font-medium">Policies</h4>
|
||||
<UBadge :color="policiesValid ? 'green' : 'red'" variant="subtle">
|
||||
{{ policiesValid ? 'Valid' : 'Incomplete' }}
|
||||
{{ policiesValid ? "Valid" : "Incomplete" }}
|
||||
</UBadge>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<div class="space-y-3 text-sm">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-600">Equal hourly wage:</span>
|
||||
<span class="font-medium">€{{ policies.equalHourlyWage || 0 }}</span>
|
||||
<span class="text-neutral-600">Equal hourly wage:</span>
|
||||
<span class="font-medium"
|
||||
>€{{ policies.equalHourlyWage || 0 }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-600">Payroll on-costs:</span>
|
||||
<span class="font-medium">{{ policies.payrollOncostPct || 0 }}%</span>
|
||||
<span class="text-neutral-600">Payroll on-costs:</span>
|
||||
<span class="font-medium"
|
||||
>{{ policies.payrollOncostPct || 0 }}%</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-600">Savings target:</span>
|
||||
<span class="font-medium">{{ policies.savingsTargetMonths || 0 }} months</span>
|
||||
<span class="text-neutral-600">Savings target:</span>
|
||||
<span class="font-medium"
|
||||
>{{ policies.savingsTargetMonths || 0 }} months</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-600">Cash cushion:</span>
|
||||
<span class="font-medium">€{{ policies.minCashCushionAmount || 0 }}</span>
|
||||
<span class="text-neutral-600">Cash cushion:</span>
|
||||
<span class="font-medium"
|
||||
>€{{ policies.minCashCushionAmount || 0 }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-600">Deferred cap:</span>
|
||||
<span class="font-medium">{{ policies.deferredCapHoursPerQtr || 0 }}h/qtr</span>
|
||||
<span class="text-neutral-600">Deferred cap:</span>
|
||||
<span class="font-medium"
|
||||
>{{ policies.deferredCapHoursPerQtr || 0 }}h/qtr</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-600">Volunteer flows:</span>
|
||||
<span class="font-medium">{{ policies.volunteerScope.allowedFlows.length }} types</span>
|
||||
<span class="text-neutral-600">Volunteer flows:</span>
|
||||
<span class="font-medium"
|
||||
>{{ policies.volunteerScope.allowedFlows.length }} types</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
|
|
@ -87,25 +109,33 @@
|
|||
<UCard>
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<h4 class="font-medium">Overhead Costs ({{ overheadCosts.length }})</h4>
|
||||
<h4 class="font-medium">
|
||||
Overhead Costs ({{ overheadCosts.length }})
|
||||
</h4>
|
||||
<UBadge color="blue" variant="subtle">Optional</UBadge>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="overheadCosts.length === 0" class="text-sm text-gray-500 text-center py-4">
|
||||
No overhead costs added
|
||||
|
||||
<div v-if="overheadCosts.length === 0" class="text-center py-8">
|
||||
<h4 class="font-medium text-neutral-900 mb-1">
|
||||
No overhead costs yet
|
||||
</h4>
|
||||
<p class="text-sm text-neutral-500">Optional - add costs in step 3</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div v-else class="space-y-2">
|
||||
<div v-for="cost in overheadCosts.slice(0, 3)" :key="cost.id" class="flex justify-between text-sm">
|
||||
<span class="text-gray-700">{{ cost.name }}</span>
|
||||
<div
|
||||
v-for="cost in overheadCosts.slice(0, 3)"
|
||||
:key="cost.id"
|
||||
class="flex justify-between text-sm">
|
||||
<span class="text-neutral-700">{{ cost.name }}</span>
|
||||
<span class="font-medium">€{{ cost.amount || 0 }}</span>
|
||||
</div>
|
||||
<div v-if="overheadCosts.length > 3" class="text-xs text-gray-500">
|
||||
<div v-if="overheadCosts.length > 3" class="text-xs text-neutral-500">
|
||||
+{{ overheadCosts.length - 3 }} more items
|
||||
</div>
|
||||
|
||||
<div class="pt-2 border-t border-gray-100">
|
||||
|
||||
<div class="pt-2 border-t border-neutral-100">
|
||||
<div class="flex justify-between text-sm font-medium">
|
||||
<span>Monthly total:</span>
|
||||
<span>€{{ totalMonthlyCosts }}</span>
|
||||
|
|
@ -120,41 +150,55 @@
|
|||
<div class="flex items-center justify-between">
|
||||
<h4 class="font-medium">Revenue Streams ({{ streams.length }})</h4>
|
||||
<UBadge :color="streamsValid ? 'green' : 'red'" variant="subtle">
|
||||
{{ streamsValid ? 'Valid' : 'Incomplete' }}
|
||||
{{ streamsValid ? "Valid" : "Incomplete" }}
|
||||
</UBadge>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="streams.length === 0" class="text-sm text-gray-500 text-center py-4">
|
||||
No revenue streams added
|
||||
|
||||
<div v-if="streams.length === 0" class="text-center py-8">
|
||||
<h4 class="font-medium text-neutral-900 mb-1">
|
||||
No revenue streams yet
|
||||
</h4>
|
||||
<p class="text-sm text-neutral-500">
|
||||
Required - add streams in step 4
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div v-else class="space-y-3">
|
||||
<div v-for="stream in streams.slice(0, 3)" :key="stream.id" class="space-y-1">
|
||||
<div
|
||||
v-for="stream in streams.slice(0, 3)"
|
||||
:key="stream.id"
|
||||
class="space-y-1">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="font-medium">{{ stream.name || 'Unnamed Stream' }}</span>
|
||||
<span class="text-gray-600">{{ stream.targetPct || 0 }}%</span>
|
||||
<span class="font-medium">{{
|
||||
stream.name || "Unnamed Stream"
|
||||
}}</span>
|
||||
<span class="text-neutral-600">{{ stream.targetPct || 0 }}%</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-xs text-gray-500">
|
||||
<div class="flex justify-between text-xs text-neutral-500">
|
||||
<span>{{ stream.category }} • {{ stream.certainty }}</span>
|
||||
<span>€{{ stream.targetMonthlyAmount || 0 }}/mo</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="streams.length > 3" class="text-xs text-gray-500">
|
||||
|
||||
<div v-if="streams.length > 3" class="text-xs text-neutral-500">
|
||||
+{{ streams.length - 3 }} more streams
|
||||
</div>
|
||||
|
||||
<div class="pt-3 border-t border-gray-100">
|
||||
|
||||
<div class="pt-3 border-t border-neutral-100">
|
||||
<div class="grid grid-cols-2 gap-4 text-xs">
|
||||
<div>
|
||||
<span class="text-gray-600">Target % total:</span>
|
||||
<span class="font-medium ml-1" :class="totalTargetPct === 100 ? 'text-green-600' : 'text-red-600'">
|
||||
<span class="text-neutral-600">Target % total:</span>
|
||||
<span
|
||||
class="font-medium ml-1"
|
||||
:class="
|
||||
totalTargetPct === 100 ? 'text-green-600' : 'text-red-600'
|
||||
">
|
||||
{{ totalTargetPct }}%
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-gray-600">Monthly target:</span>
|
||||
<span class="text-neutral-600">Monthly target:</span>
|
||||
<span class="font-medium ml-1">€{{ totalMonthlyTarget }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -164,71 +208,91 @@
|
|||
</div>
|
||||
|
||||
<!-- Overall Status -->
|
||||
<div class="bg-gray-50 rounded-lg p-4">
|
||||
<div class="bg-neutral-50 rounded-lg p-4">
|
||||
<h4 class="font-medium text-sm mb-3">Setup Status</h4>
|
||||
|
||||
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon
|
||||
:name="membersValid ? 'i-heroicons-check-circle' : 'i-heroicons-x-circle'"
|
||||
<UIcon
|
||||
:name="
|
||||
membersValid ? 'i-heroicons-check-circle' : 'i-heroicons-x-circle'
|
||||
"
|
||||
:class="membersValid ? 'text-green-500' : 'text-red-500'"
|
||||
class="w-4 h-4"
|
||||
/>
|
||||
class="w-4 h-4" />
|
||||
<span class="text-sm">Members</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon
|
||||
:name="policiesValid ? 'i-heroicons-check-circle' : 'i-heroicons-x-circle'"
|
||||
<UIcon
|
||||
:name="
|
||||
policiesValid
|
||||
? 'i-heroicons-check-circle'
|
||||
: 'i-heroicons-x-circle'
|
||||
"
|
||||
:class="policiesValid ? 'text-green-500' : 'text-red-500'"
|
||||
class="w-4 h-4"
|
||||
/>
|
||||
class="w-4 h-4" />
|
||||
<span class="text-sm">Policies</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-heroicons-check-circle" class="text-blue-500 w-4 h-4" />
|
||||
<UIcon
|
||||
name="i-heroicons-check-circle"
|
||||
class="text-blue-500 w-4 h-4" />
|
||||
<span class="text-sm">Costs (Optional)</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon
|
||||
:name="streamsValid ? 'i-heroicons-check-circle' : 'i-heroicons-x-circle'"
|
||||
<UIcon
|
||||
:name="
|
||||
streamsValid ? 'i-heroicons-check-circle' : 'i-heroicons-x-circle'
|
||||
"
|
||||
:class="streamsValid ? 'text-green-500' : 'text-red-500'"
|
||||
class="w-4 h-4"
|
||||
/>
|
||||
class="w-4 h-4" />
|
||||
<span class="text-sm">Revenue</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!canComplete" class="bg-yellow-100 border border-yellow-200 rounded-md p-3 mb-4">
|
||||
<div
|
||||
v-if="!canComplete"
|
||||
class="bg-yellow-100 border border-yellow-200 rounded-md p-3 mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-heroicons-exclamation-triangle" class="text-yellow-600 w-4 h-4" />
|
||||
<span class="text-sm font-medium text-yellow-800">Complete required sections to finish setup</span>
|
||||
<UIcon
|
||||
name="i-heroicons-exclamation-triangle"
|
||||
class="text-yellow-600 w-4 h-4" />
|
||||
<span class="text-sm font-medium text-yellow-800"
|
||||
>Complete required sections to finish setup</span
|
||||
>
|
||||
</div>
|
||||
<ul class="list-disc list-inside text-xs text-yellow-700 mt-2">
|
||||
<li v-if="!membersValid">Add at least one member with valid details</li>
|
||||
<li v-if="!policiesValid">Set a valid hourly wage and complete policy fields</li>
|
||||
<li v-if="!streamsValid">Add at least one revenue stream with valid details</li>
|
||||
<li v-if="!membersValid">
|
||||
Add at least one member with valid details
|
||||
</li>
|
||||
<li v-if="!policiesValid">
|
||||
Set a valid hourly wage and complete policy fields
|
||||
</li>
|
||||
<li v-if="!streamsValid">
|
||||
Add at least one revenue stream with valid details
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex justify-between items-center pt-6 border-t">
|
||||
<UButton variant="ghost" @click="$emit('reset')" color="red">
|
||||
<UButton variant="ghost" color="red" @click="$emit('reset')">
|
||||
Reset All Data
|
||||
</UButton>
|
||||
|
||||
|
||||
<div class="flex gap-3">
|
||||
<UButton variant="outline" @click="exportSetup">
|
||||
<UButton variant="outline" color="gray" @click="exportSetup">
|
||||
Export Setup
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="completeSetup"
|
||||
<UButton
|
||||
@click="completeSetup"
|
||||
:disabled="!canComplete"
|
||||
size="lg"
|
||||
>
|
||||
variant="solid"
|
||||
color="primary">
|
||||
Complete Setup
|
||||
</UButton>
|
||||
</div>
|
||||
|
|
@ -238,59 +302,66 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
const emit = defineEmits<{
|
||||
'complete': []
|
||||
'reset': []
|
||||
}>()
|
||||
complete: [];
|
||||
reset: [];
|
||||
}>();
|
||||
|
||||
// Stores
|
||||
const membersStore = useMembersStore()
|
||||
const policiesStore = usePoliciesStore()
|
||||
const budgetStore = useBudgetStore()
|
||||
const streamsStore = useStreamsStore()
|
||||
const membersStore = useMembersStore();
|
||||
const policiesStore = usePoliciesStore();
|
||||
const budgetStore = useBudgetStore();
|
||||
const streamsStore = useStreamsStore();
|
||||
|
||||
// Computed data
|
||||
const members = computed(() => membersStore.members)
|
||||
const members = computed(() => membersStore.members);
|
||||
const policies = computed(() => ({
|
||||
equalHourlyWage: policiesStore.equalHourlyWage,
|
||||
payrollOncostPct: policiesStore.payrollOncostPct,
|
||||
savingsTargetMonths: policiesStore.savingsTargetMonths,
|
||||
minCashCushionAmount: policiesStore.minCashCushionAmount,
|
||||
deferredCapHoursPerQtr: policiesStore.deferredCapHoursPerQtr,
|
||||
volunteerScope: policiesStore.volunteerScope
|
||||
}))
|
||||
const overheadCosts = computed(() => budgetStore.overheadCosts)
|
||||
const streams = computed(() => streamsStore.streams)
|
||||
volunteerScope: policiesStore.volunteerScope,
|
||||
}));
|
||||
const overheadCosts = computed(() => budgetStore.overheadCosts);
|
||||
const streams = computed(() => streamsStore.streams);
|
||||
|
||||
// Validation
|
||||
const membersValid = computed(() => membersStore.isValid)
|
||||
const policiesValid = computed(() => policiesStore.isValid)
|
||||
const streamsValid = computed(() => streamsStore.hasValidStreams)
|
||||
const canComplete = computed(() => membersValid.value && policiesValid.value && streamsValid.value)
|
||||
const membersValid = computed(() => membersStore.isValid);
|
||||
const policiesValid = computed(() => policiesStore.isValid);
|
||||
const streamsValid = computed(() => streamsStore.hasValidStreams);
|
||||
const canComplete = computed(
|
||||
() => membersValid.value && policiesValid.value && streamsValid.value
|
||||
);
|
||||
|
||||
// Summary calculations
|
||||
const totalCapacity = computed(() =>
|
||||
const totalCapacity = computed(() =>
|
||||
members.value.reduce((sum, m) => sum + (m.capacity?.targetHours || 0), 0)
|
||||
)
|
||||
);
|
||||
|
||||
const avgExternal = computed(() => {
|
||||
if (members.value.length === 0) return 0
|
||||
const total = members.value.reduce((sum, m) => sum + (m.externalCoveragePct || 0), 0)
|
||||
return Math.round(total / members.value.length)
|
||||
})
|
||||
if (members.value.length === 0) return 0;
|
||||
const total = members.value.reduce(
|
||||
(sum, m) => sum + (m.externalCoveragePct || 0),
|
||||
0
|
||||
);
|
||||
return Math.round(total / members.value.length);
|
||||
});
|
||||
|
||||
const totalMonthlyCosts = computed(() =>
|
||||
const totalMonthlyCosts = computed(() =>
|
||||
overheadCosts.value.reduce((sum, c) => sum + (c.amount || 0), 0)
|
||||
)
|
||||
);
|
||||
|
||||
const totalTargetPct = computed(() => streamsStore.totalTargetPct)
|
||||
const totalMonthlyTarget = computed(() =>
|
||||
Math.round(streams.value.reduce((sum, s) => sum + (s.targetMonthlyAmount || 0), 0))
|
||||
)
|
||||
const totalTargetPct = computed(() => streamsStore.totalTargetPct);
|
||||
const totalMonthlyTarget = computed(() =>
|
||||
Math.round(
|
||||
streams.value.reduce((sum, s) => sum + (s.targetMonthlyAmount || 0), 0)
|
||||
)
|
||||
);
|
||||
|
||||
function completeSetup() {
|
||||
if (canComplete.value) {
|
||||
// Mark setup as complete in some way (could be a store flag)
|
||||
emit('complete')
|
||||
emit("complete");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -302,18 +373,20 @@ function exportSetup() {
|
|||
overheadCosts: overheadCosts.value,
|
||||
streams: streams.value,
|
||||
exportedAt: new Date().toISOString(),
|
||||
version: '1.0'
|
||||
}
|
||||
version: "1.0",
|
||||
};
|
||||
|
||||
// Download as JSON
|
||||
const blob = new Blob([JSON.stringify(setupData, null, 2)], { type: 'application/json' })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = `coop-setup-${new Date().toISOString().split('T')[0]}.json`
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
document.body.removeChild(a)
|
||||
URL.revokeObjectURL(url)
|
||||
const blob = new Blob([JSON.stringify(setupData, null, 2)], {
|
||||
type: "application/json",
|
||||
});
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `coop-setup-${new Date().toISOString().split("T")[0]}.json`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue