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:
parent
983aeca2dc
commit
09d8794d72
42 changed files with 2166 additions and 2974 deletions
|
|
@ -1,36 +1,16 @@
|
|||
<template>
|
||||
<div class="max-w-4xl mx-auto space-y-6">
|
||||
<!-- Section Header with Export Controls -->
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h3 class="text-2xl font-black text-black mb-2">Who's on your team?</h3>
|
||||
<p class="text-neutral-600">
|
||||
Add everyone who'll be working in the co-op, even if they're not ready
|
||||
to be paid yet.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<UButton
|
||||
variant="outline"
|
||||
color="gray"
|
||||
size="sm"
|
||||
@click="exportMembers">
|
||||
<UIcon name="i-heroicons-arrow-down-tray" class="mr-1" />
|
||||
Export
|
||||
</UButton>
|
||||
<UButton
|
||||
v-if="members.length > 0"
|
||||
@click="addMember"
|
||||
size="sm"
|
||||
variant="solid"
|
||||
color="success"
|
||||
:ui="{
|
||||
base: 'cursor-pointer hover:scale-105 transition-transform',
|
||||
leadingIcon: 'hover:rotate-90 transition-transform',
|
||||
}">
|
||||
<UIcon name="i-heroicons-plus" class="mr-1" />
|
||||
Add member
|
||||
</UButton>
|
||||
<!-- Section Header -->
|
||||
<div class="mb-8">
|
||||
<h3 class="text-2xl font-black text-black mb-2">Who's on your team?</h3>
|
||||
<p class="text-neutral-600">
|
||||
Add everyone who'll be working in the co-op. Based on your pay approach,
|
||||
we'll collect the right information for each person.
|
||||
</p>
|
||||
<!-- Debug info -->
|
||||
<div class="mt-2 p-2 bg-gray-100 rounded text-xs">
|
||||
Debug: Policy = {{ currentPolicy }}, Needs field shown =
|
||||
{{ isNeedsWeighted }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -38,7 +18,7 @@
|
|||
<div class="space-y-3">
|
||||
<div
|
||||
v-if="members.length === 0"
|
||||
class="text-center py-12 border-4 border-dashed border-black rounded-xl bg-white shadow-lg">
|
||||
class="text-center py-12 border-2 border-dashed border-neutral-300 rounded-xl bg-white shadow-sm">
|
||||
<h4 class="font-medium text-neutral-900 mb-2">No team members yet</h4>
|
||||
<p class="text-sm text-neutral-500 mb-4">
|
||||
Get started by adding your first team member.
|
||||
|
|
@ -52,27 +32,23 @@
|
|||
<div
|
||||
v-for="(member, index) in members"
|
||||
:key="member.id"
|
||||
class="p-6 border-3 border-black rounded-xl bg-white shadow-md">
|
||||
<!-- Header row with name and coverage chip -->
|
||||
class="p-6 border-2 border-black rounded-xl bg-white shadow-md">
|
||||
<!-- Header row with name and optional coverage chip -->
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center gap-4 flex-1">
|
||||
<UInput
|
||||
v-model="member.displayName"
|
||||
placeholder="Member name"
|
||||
size="lg"
|
||||
class="text-lg font-bold w-48"
|
||||
size="xl"
|
||||
class="text-xl w-full font-bold flex-1"
|
||||
@update:model-value="saveMember(member)"
|
||||
@blur="saveMember(member)" />
|
||||
<CoverageChip
|
||||
:coverage-min-pct="memberCoverage(member).minPct"
|
||||
:coverage-target-pct="memberCoverage(member).targetPct"
|
||||
:member-name="member.displayName || 'This member'"
|
||||
/>
|
||||
</div>
|
||||
<UButton
|
||||
size="xs"
|
||||
variant="solid"
|
||||
color="error"
|
||||
class="ml-4"
|
||||
@click="removeMember(member.id)"
|
||||
:ui="{
|
||||
base: 'cursor-pointer hover:opacity-90 transition-opacity',
|
||||
|
|
@ -80,77 +56,36 @@
|
|||
<UIcon name="i-heroicons-trash" class="w-4 h-4" />
|
||||
</UButton>
|
||||
</div>
|
||||
|
||||
<!-- Compact grid for pay and hours -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-3 mb-3">
|
||||
<UFormField label="Pay relationship" required>
|
||||
<USelect
|
||||
v-model="member.payRelationship"
|
||||
:items="payRelationshipOptions"
|
||||
|
||||
<!-- Essential fields based on policy -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<UFormField label="Hours per month" required>
|
||||
<UInputNumber
|
||||
v-model="member.capacity.targetHours"
|
||||
:min="0"
|
||||
:max="500"
|
||||
:step="1"
|
||||
placeholder="160"
|
||||
size="md"
|
||||
class="text-sm font-medium w-full"
|
||||
@update:model-value="saveMember(member)" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Hours/month" required>
|
||||
<UInput
|
||||
v-model="member.capacity.targetHours"
|
||||
type="text"
|
||||
placeholder="120"
|
||||
size="md"
|
||||
class="text-sm font-medium w-full"
|
||||
@update:model-value="validateAndSaveHours($event, member)"
|
||||
@blur="saveMember(member)" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Role (optional)">
|
||||
<UInput
|
||||
v-model="member.role"
|
||||
placeholder="Developer"
|
||||
size="md"
|
||||
class="text-sm font-medium w-full"
|
||||
@update:model-value="saveMember(member)"
|
||||
@blur="saveMember(member)" />
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<!-- Compact needs section -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-3 p-3 bg-gray-50 rounded-lg">
|
||||
<div>
|
||||
<label class="text-xs font-medium text-gray-600 mb-1 block">Minimum needs (€/mo)</label>
|
||||
<UInput
|
||||
<!-- Show minimum needs field when needs-weighted policy is selected -->
|
||||
<UFormField
|
||||
v-if="isNeedsWeighted"
|
||||
:label="`Minimum needs (${getCurrencySymbol(coop.currency.value)}/month)`"
|
||||
required>
|
||||
<UInputNumber
|
||||
v-model="member.minMonthlyNeeds"
|
||||
type="text"
|
||||
placeholder="2000"
|
||||
size="sm"
|
||||
:min="0"
|
||||
:max="50000"
|
||||
:step="10"
|
||||
placeholder="2500"
|
||||
size="md"
|
||||
class="text-sm font-medium w-full"
|
||||
@update:model-value="validateAndSaveAmount($event, member, 'minMonthlyNeeds')"
|
||||
@blur="saveMember(member)" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-xs font-medium text-gray-600 mb-1 block">Target pay (€/mo)</label>
|
||||
<UInput
|
||||
v-model="member.targetMonthlyPay"
|
||||
type="text"
|
||||
placeholder="3500"
|
||||
size="sm"
|
||||
class="text-sm font-medium w-full"
|
||||
@update:model-value="validateAndSaveAmount($event, member, 'targetMonthlyPay')"
|
||||
@blur="saveMember(member)" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-xs font-medium text-gray-600 mb-1 block">External income (€/mo)</label>
|
||||
<UInput
|
||||
v-model="member.externalMonthlyIncome"
|
||||
type="text"
|
||||
placeholder="1500"
|
||||
size="sm"
|
||||
class="text-sm font-medium w-full"
|
||||
@update:model-value="validateAndSaveAmount($event, member, 'externalMonthlyIncome')"
|
||||
@blur="saveMember(member)" />
|
||||
</div>
|
||||
@update:model-value="saveMember(member)" />
|
||||
</UFormField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -176,6 +111,7 @@
|
|||
<script setup lang="ts">
|
||||
import { useDebounceFn } from "@vueuse/core";
|
||||
import { coverage } from "~/types/members";
|
||||
import { getCurrencySymbol } from "~/utils/currency";
|
||||
|
||||
const emit = defineEmits<{
|
||||
"save-status": [status: "saving" | "saved" | "error"];
|
||||
|
|
@ -183,24 +119,30 @@ const emit = defineEmits<{
|
|||
|
||||
// Store
|
||||
const coop = useCoopBuilder();
|
||||
const members = computed(() =>
|
||||
coop.members.value.map(m => ({
|
||||
const members = computed(() =>
|
||||
coop.members.value.map((m) => ({
|
||||
// Map store fields to component expectations
|
||||
id: m.id,
|
||||
displayName: m.name,
|
||||
role: m.role || '',
|
||||
capacity: {
|
||||
targetHours: m.hoursPerMonth || 0
|
||||
targetHours: Number(m.hoursPerMonth) || 0,
|
||||
},
|
||||
payRelationship: 'FullyPaid', // Default since not in store yet
|
||||
minMonthlyNeeds: m.minMonthlyNeeds || 0,
|
||||
targetMonthlyPay: m.targetMonthlyPay || 0,
|
||||
externalMonthlyIncome: m.externalMonthlyIncome || 0,
|
||||
monthlyPayPlanned: m.monthlyPayPlanned || 0
|
||||
payRelationship: "FullyPaid", // Default since not in store yet
|
||||
minMonthlyNeeds: Number(m.minMonthlyNeeds) || 0,
|
||||
monthlyPayPlanned: Number(m.monthlyPayPlanned) || 0,
|
||||
}))
|
||||
);
|
||||
|
||||
// Options
|
||||
// Get current policy to determine which fields to show
|
||||
const isNeedsWeighted = computed(() => {
|
||||
const policy = coop.policy.value?.relationship;
|
||||
return policy === "needs-weighted";
|
||||
});
|
||||
|
||||
// Also expose policy for debugging in template
|
||||
const currentPolicy = computed(() => coop.policy.value?.relationship || "none");
|
||||
|
||||
// Simplified options - removed pay relationship as it's now in the policies step
|
||||
const payRelationshipOptions = [
|
||||
{ label: "Fully Paid", value: "FullyPaid" },
|
||||
{ label: "Hybrid", value: "Hybrid" },
|
||||
|
|
@ -236,15 +178,12 @@ const debouncedSave = useDebounceFn((member: any) => {
|
|||
// Convert component format back to store format
|
||||
const memberData = {
|
||||
id: member.id,
|
||||
name: member.displayName || '',
|
||||
role: member.role || '',
|
||||
hoursPerMonth: member.capacity?.targetHours || 0,
|
||||
minMonthlyNeeds: member.minMonthlyNeeds || 0,
|
||||
targetMonthlyPay: member.targetMonthlyPay || 0,
|
||||
externalMonthlyIncome: member.externalMonthlyIncome || 0,
|
||||
monthlyPayPlanned: member.monthlyPayPlanned || 0,
|
||||
name: member.displayName || "",
|
||||
hoursPerMonth: Number(member.capacity?.targetHours) || 0,
|
||||
minMonthlyNeeds: Number(member.minMonthlyNeeds) || 0,
|
||||
monthlyPayPlanned: Number(member.monthlyPayPlanned) || 0,
|
||||
};
|
||||
|
||||
|
||||
coop.upsertMember(memberData);
|
||||
emit("save-status", "saved");
|
||||
} catch (error) {
|
||||
|
|
@ -257,13 +196,7 @@ function saveMember(member: any) {
|
|||
debouncedSave(member);
|
||||
}
|
||||
|
||||
// Validation functions
|
||||
function validateAndSaveHours(value: string, member: any) {
|
||||
const numValue = parseFloat(value.replace(/[^\d.]/g, ""));
|
||||
member.capacity.targetHours = isNaN(numValue) ? 0 : Math.max(0, numValue);
|
||||
saveMember(member);
|
||||
}
|
||||
|
||||
// Validation functions (simplified since UInputNumber handles numeric validation)
|
||||
function validateAndSavePercentage(value: string, member: any) {
|
||||
const numValue = parseFloat(value.replace(/[^\d.]/g, ""));
|
||||
member.externalCoveragePct = isNaN(numValue)
|
||||
|
|
@ -272,30 +205,16 @@ function validateAndSavePercentage(value: string, member: any) {
|
|||
saveMember(member);
|
||||
}
|
||||
|
||||
function validateAndSaveAmount(value: string, member: any, field: string) {
|
||||
const numValue = parseFloat(value.replace(/[^\d.]/g, ""));
|
||||
member[field] = isNaN(numValue) ? 0 : Math.max(0, numValue);
|
||||
saveMember(member);
|
||||
}
|
||||
|
||||
function memberCoverage(member: any) {
|
||||
return coverage(
|
||||
member.minMonthlyNeeds || 0,
|
||||
member.targetMonthlyPay || 0,
|
||||
member.monthlyPayPlanned || 0,
|
||||
member.externalMonthlyIncome || 0
|
||||
);
|
||||
return coverage(member.minMonthlyNeeds || 0, member.monthlyPayPlanned || 0);
|
||||
}
|
||||
|
||||
function addMember() {
|
||||
const newMember = {
|
||||
id: Date.now().toString(),
|
||||
name: "",
|
||||
role: "",
|
||||
hoursPerMonth: 0,
|
||||
minMonthlyNeeds: 0,
|
||||
targetMonthlyPay: 0,
|
||||
externalMonthlyIncome: 0,
|
||||
monthlyPayPlanned: 0,
|
||||
};
|
||||
|
||||
|
|
@ -305,24 +224,4 @@ function addMember() {
|
|||
function removeMember(id: string) {
|
||||
coop.removeMember(id);
|
||||
}
|
||||
|
||||
function exportMembers() {
|
||||
const exportData = {
|
||||
members: members.value,
|
||||
exportedAt: new Date().toISOString(),
|
||||
section: "members",
|
||||
};
|
||||
|
||||
const blob = new Blob([JSON.stringify(exportData, null, 2)], {
|
||||
type: "application/json",
|
||||
});
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `coop-members-${new Date().toISOString().split("T")[0]}.json`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue