refactor: remove deprecated components and streamline member coverage calculations, enhance budget management with improved payroll handling, and update UI elements for better clarity

This commit is contained in:
Jennie Robinson Faber 2025-09-06 09:48:57 +01:00
parent 983aeca2dc
commit 09d8794d72
42 changed files with 2166 additions and 2974 deletions

View file

@ -121,6 +121,53 @@
</UCard>
</div>
<!-- Member Management Section -->
<UCard id="members">
<template #header>
<div class="flex items-center justify-between">
<h3 class="text-lg font-medium">Team Members</h3>
<div class="flex items-center gap-2">
<UBadge v-if="isSetupComplete" color="green" variant="subtle" size="xs">
Synchronized with Setup
</UBadge>
<UButton variant="ghost" size="xs" @click="goToSetup">
Edit in Setup
</UButton>
</div>
</div>
</template>
<div class="space-y-4">
<div v-if="members.length === 0" class="text-center py-8 text-neutral-500">
<p class="mb-4">No team members found.</p>
<UButton @click="goToSetup" variant="outline">
Add Members in Setup
</UButton>
</div>
<div v-else class="space-y-3">
<div
v-for="member in members"
:key="member.id"
class="p-4 border border-neutral-200 rounded-lg bg-neutral-50">
<div class="flex items-center justify-between">
<div>
<h4 class="font-medium">{{ member.displayName || member.name }}</h4>
<div class="text-sm text-neutral-600 space-y-1">
<div v-if="member.role">Role: {{ member.role }}</div>
<div>Monthly Target: {{ $format.currency(member.monthlyPayPlanned || 0) }}</div>
<div v-if="member.minMonthlyNeeds">Min Needs: {{ $format.currency(member.minMonthlyNeeds) }}</div>
</div>
</div>
<div class="text-right text-sm text-neutral-600">
<div>{{ Math.round((member.hoursPerMonth || member.hoursPerWeek * 4.33)) }} hrs/month</div>
</div>
</div>
</div>
</div>
</div>
</UCard>
<div class="flex justify-end">
<UButton color="primary"> Save Policies </UButton>
</div>
@ -128,13 +175,37 @@
</template>
<script setup lang="ts">
const policies = ref({
hourlyWage: 20,
payrollOncost: 25,
savingsTargetMonths: 3,
minCashCushion: 3000,
deferredCapHours: 240,
deferredSunsetMonths: 12,
// Store sync and setup state
const { initSync, getMembers, unifiedMembers } = useStoreSync();
const { isSetupComplete, goToSetup } = useSetupState();
const coopStore = useCoopBuilderStore();
const { $format } = useNuxtApp();
// Initialize synchronization on mount
onMounted(async () => {
await initSync();
});
// Get reactive synchronized member data
const members = unifiedMembers;
// Get synchronized policy data from setup
const policies = computed({
get: () => ({
hourlyWage: coopStore.equalHourlyWage,
payrollOncost: coopStore.payrollOncostPct,
savingsTargetMonths: coopStore.savingsTargetMonths,
minCashCushion: coopStore.minCashCushion,
deferredCapHours: 240, // These fields might not be in coop store yet
deferredSunsetMonths: 12,
}),
set: (newPolicies) => {
// Update the CoopBuilder store when policies change
coopStore.setEqualWage(newPolicies.hourlyWage);
coopStore.setOncostPct(newPolicies.payrollOncost);
coopStore.savingsTargetMonths = newPolicies.savingsTargetMonths;
coopStore.minCashCushion = newPolicies.minCashCushion;
}
});
const distributionOrder = ref([