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
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue