chore: update application configuration and UI components for improved styling and functionality

This commit is contained in:
Jennie Robinson Faber 2025-08-16 08:13:35 +01:00
parent 0af6b17792
commit 37ab8d7bab
54 changed files with 23293 additions and 1666 deletions

View file

@ -11,26 +11,28 @@
</template>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium mb-2">Equal Hourly Wage</label>
<label class="block text-sm font-medium mb-2"
>Equal Hourly Wage</label
>
<UInput
v-model="policies.hourlyWage"
type="number"
:ui="{ wrapper: 'relative' }"
>
:ui="{ wrapper: 'relative' }">
<template #leading>
<span class="text-gray-500"></span>
<span class="text-neutral-500"></span>
</template>
</UInput>
</div>
<div>
<label class="block text-sm font-medium mb-2">Payroll On-costs (%)</label>
<label class="block text-sm font-medium mb-2"
>Payroll On-costs (%)</label
>
<UInput
v-model="policies.payrollOncost"
type="number"
:ui="{ wrapper: 'relative' }"
>
:ui="{ wrapper: 'relative' }">
<template #trailing>
<span class="text-gray-500">%</span>
<span class="text-neutral-500">%</span>
</template>
</UInput>
</div>
@ -43,22 +45,24 @@
</template>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium mb-2">Savings Target (months)</label>
<label class="block text-sm font-medium mb-2"
>Savings Target (months)</label
>
<UInput
v-model="policies.savingsTargetMonths"
type="number"
step="0.1"
/>
step="0.1" />
</div>
<div>
<label class="block text-sm font-medium mb-2">Minimum Cash Cushion</label>
<label class="block text-sm font-medium mb-2"
>Minimum Cash Cushion</label
>
<UInput
v-model="policies.minCashCushion"
type="number"
:ui="{ wrapper: 'relative' }"
>
:ui="{ wrapper: 'relative' }">
<template #leading>
<span class="text-gray-500"></span>
<span class="text-neutral-500"></span>
</template>
</UInput>
</div>
@ -71,18 +75,16 @@
</template>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium mb-2">Cap (hours per quarter)</label>
<UInput
v-model="policies.deferredCapHours"
type="number"
/>
<label class="block text-sm font-medium mb-2"
>Cap (hours per quarter)</label
>
<UInput v-model="policies.deferredCapHours" type="number" />
</div>
<div>
<label class="block text-sm font-medium mb-2">Sunset (months)</label>
<UInput
v-model="policies.deferredSunsetMonths"
type="number"
/>
<label class="block text-sm font-medium mb-2"
>Sunset (months)</label
>
<UInput v-model="policies.deferredSunsetMonths" type="number" />
</div>
</div>
</UCard>
@ -92,16 +94,26 @@
<h3 class="text-lg font-medium">Distribution Order</h3>
</template>
<div class="space-y-4">
<p class="text-sm text-gray-600">
<p class="text-sm text-neutral-600">
Order of surplus distribution priorities.
</p>
<div class="space-y-2">
<div v-for="(item, index) in distributionOrder" :key="item"
class="flex items-center justify-between p-2 bg-gray-50 rounded">
<span class="text-sm font-medium">{{ index + 1 }}. {{ item }}</span>
<div
v-for="(item, index) in distributionOrder"
:key="item"
class="flex items-center justify-between p-2 bg-neutral-50 rounded">
<span class="text-sm font-medium"
>{{ index + 1 }}. {{ item }}</span
>
<div class="flex gap-1">
<UButton size="xs" variant="ghost" icon="i-heroicons-chevron-up" />
<UButton size="xs" variant="ghost" icon="i-heroicons-chevron-down" />
<UButton
size="xs"
variant="ghost"
icon="i-heroicons-chevron-up" />
<UButton
size="xs"
variant="ghost"
icon="i-heroicons-chevron-down" />
</div>
</div>
</div>
@ -110,9 +122,7 @@
</div>
<div class="flex justify-end">
<UButton color="primary">
Save Policies
</UButton>
<UButton color="primary"> Save Policies </UButton>
</div>
</section>
</template>
@ -124,15 +134,15 @@ const policies = ref({
savingsTargetMonths: 3,
minCashCushion: 3000,
deferredCapHours: 240,
deferredSunsetMonths: 12
})
deferredSunsetMonths: 12,
});
const distributionOrder = ref([
'Deferred',
'Savings',
'Hardship',
'Training',
'Patronage',
'Retained'
])
"Deferred",
"Savings",
"Hardship",
"Training",
"Patronage",
"Retained",
]);
</script>