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
|
|
@ -1,113 +1,123 @@
|
|||
<template>
|
||||
<div class="space-y-6">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<h3 class="text-lg font-medium mb-4">Members</h3>
|
||||
<p class="text-gray-600 mb-6">Add co-op members and their capacity.</p>
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="text-2xl font-black text-black">Who's on your team?</h3>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Members List -->
|
||||
<div class="space-y-4">
|
||||
<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">
|
||||
<h4 class="font-medium text-neutral-900 mb-2">No team members yet</h4>
|
||||
<p class="text-sm text-neutral-500 mb-4">
|
||||
Add everyone who'll be working in the co-op, even if they're not ready
|
||||
to be paid yet.
|
||||
</p>
|
||||
<UButton @click="addMember" size="lg" variant="solid" color="primary">
|
||||
<UIcon name="i-heroicons-plus" class="mr-2" />
|
||||
Add your first member
|
||||
</UButton>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="(member, index) in members"
|
||||
:key="member.id"
|
||||
class="p-4 border border-gray-200 rounded-lg">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<!-- Basic Info -->
|
||||
<div class="space-y-4">
|
||||
<UFormField label="Display Name" required>
|
||||
<UInput
|
||||
v-model="member.displayName"
|
||||
placeholder="Alex Chen"
|
||||
@update:model-value="saveMember(member)"
|
||||
@blur="saveMember(member)" />
|
||||
</UFormField>
|
||||
class="p-6 border-3 border-black rounded-xl bg-white shadow-md">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<UFormField label="Name" required class="md:col-span-2">
|
||||
<UInput
|
||||
v-model="member.displayName"
|
||||
placeholder="Alex Chen"
|
||||
size="xl"
|
||||
class="text-lg font-medium w-full"
|
||||
@update:model-value="saveMember(member)"
|
||||
@blur="saveMember(member)" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Role Focus">
|
||||
<UInput
|
||||
v-model="member.roleFocus"
|
||||
placeholder="Technical Lead"
|
||||
@update:model-value="saveMember(member)"
|
||||
@blur="saveMember(member)" />
|
||||
</UFormField>
|
||||
<UFormField label="Pay relationship" required>
|
||||
<USelect
|
||||
v-model="member.payRelationship"
|
||||
:items="payRelationshipOptions"
|
||||
size="xl"
|
||||
class="text-lg font-medium w-full"
|
||||
@update:model-value="saveMember(member)" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Pay Relationship" required>
|
||||
<USelect
|
||||
v-model="member.payRelationship"
|
||||
:items="payRelationshipOptions"
|
||||
@update:model-value="saveMember(member)" />
|
||||
</UFormField>
|
||||
</div>
|
||||
<UFormField label="Hours/month" required>
|
||||
<UInput
|
||||
v-model="member.capacity.targetHours"
|
||||
type="text"
|
||||
placeholder="120"
|
||||
size="xl"
|
||||
class="text-xl font-bold w-full"
|
||||
@update:model-value="validateAndSaveHours($event, member)"
|
||||
@blur="saveMember(member)" />
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<!-- Capacity & Settings -->
|
||||
<div class="space-y-4">
|
||||
<UFormField label="Target Hours/Month" required>
|
||||
<UInput
|
||||
v-model.number="member.capacity.targetHours"
|
||||
type="number"
|
||||
min="0"
|
||||
placeholder="120"
|
||||
@update:model-value="saveMember(member)"
|
||||
@blur="saveMember(member)" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="External Coverage %">
|
||||
<UInput
|
||||
v-model.number="member.externalCoveragePct"
|
||||
type="number"
|
||||
min="0"
|
||||
max="100"
|
||||
placeholder="60"
|
||||
@update:model-value="saveMember(member)"
|
||||
@blur="saveMember(member)" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Risk Band">
|
||||
<USelect
|
||||
v-model="member.riskBand"
|
||||
:items="riskBandOptions"
|
||||
@update:model-value="saveMember(member)" />
|
||||
</UFormField>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-3">
|
||||
<UFormField label="External income coverage %" class="md:col-span-1">
|
||||
<UInput
|
||||
v-model="member.externalCoveragePct"
|
||||
type="text"
|
||||
placeholder="50"
|
||||
size="xl"
|
||||
class="text-lg font-medium w-full"
|
||||
@update:model-value="validateAndSavePercentage($event, member)"
|
||||
@blur="saveMember(member)" />
|
||||
<template #help>
|
||||
<span class="text-xs text-neutral-500"
|
||||
>% of needs covered by other income</span
|
||||
>
|
||||
</template>
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex justify-end mt-4 pt-4 border-t border-gray-100">
|
||||
<div class="flex justify-end mt-6 pt-6 border-t-3 border-black">
|
||||
<UButton
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
color="red"
|
||||
@click="removeMember(member.id)">
|
||||
Remove
|
||||
size="xs"
|
||||
variant="solid"
|
||||
color="error"
|
||||
@click="removeMember(member.id)"
|
||||
:ui="{
|
||||
base: 'cursor-pointer hover:opacity-90 transition-opacity',
|
||||
}">
|
||||
<UIcon name="i-heroicons-trash" class="w-4 h-4" />
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Member -->
|
||||
<UButton
|
||||
variant="outline"
|
||||
@click="addMember"
|
||||
class="w-full"
|
||||
icon="i-heroicons-plus">
|
||||
Add Member
|
||||
</UButton>
|
||||
</div>
|
||||
|
||||
<!-- Summary -->
|
||||
<div class="bg-gray-50 rounded-lg p-4">
|
||||
<h4 class="font-medium text-sm mb-2">Capacity Summary</h4>
|
||||
<div class="grid grid-cols-3 gap-4 text-sm">
|
||||
<div>
|
||||
<span class="text-gray-600">Members:</span>
|
||||
<span class="font-medium ml-1">{{ members.length }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-gray-600">Total Hours:</span>
|
||||
<span class="font-medium ml-1">{{ totalTargetHours }}h</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-gray-600">Avg External:</span>
|
||||
<span class="font-medium ml-1">{{ avgExternalCoverage }}%</span>
|
||||
</div>
|
||||
<div v-if="members.length > 0" class="flex justify-center">
|
||||
<UButton
|
||||
@click="addMember"
|
||||
size="lg"
|
||||
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-2" />
|
||||
Add another member
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -169,19 +179,34 @@ 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);
|
||||
}
|
||||
|
||||
function validateAndSavePercentage(value: string, member: any) {
|
||||
const numValue = parseFloat(value.replace(/[^\d.]/g, ""));
|
||||
member.externalCoveragePct = isNaN(numValue)
|
||||
? 0
|
||||
: Math.min(100, Math.max(0, numValue));
|
||||
saveMember(member);
|
||||
}
|
||||
|
||||
function addMember() {
|
||||
const newMember = {
|
||||
id: Date.now().toString(),
|
||||
displayName: "",
|
||||
roleFocus: "",
|
||||
roleFocus: "", // Hidden but kept for compatibility
|
||||
payRelationship: "FullyPaid",
|
||||
capacity: {
|
||||
minHours: 0,
|
||||
targetHours: 0,
|
||||
maxHours: 0,
|
||||
},
|
||||
riskBand: "Medium",
|
||||
externalCoveragePct: 0,
|
||||
riskBand: "Medium", // Hidden but kept with default
|
||||
externalCoveragePct: 50,
|
||||
privacyNeeds: "aggregate_ok",
|
||||
deferredHours: 0,
|
||||
quarterlyDeferredCap: 240,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue