148 lines
4.2 KiB
Vue
148 lines
4.2 KiB
Vue
<template>
|
|
<section class="py-8 space-y-6">
|
|
<div class="flex items-center justify-between">
|
|
<h2 class="text-2xl font-semibold">Policies & Privacy</h2>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<UCard>
|
|
<template #header>
|
|
<h3 class="text-lg font-medium">Wage & Costs</h3>
|
|
</template>
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2"
|
|
>Equal Hourly Wage</label
|
|
>
|
|
<UInput
|
|
v-model="policies.hourlyWage"
|
|
type="number"
|
|
:ui="{ wrapper: 'relative' }">
|
|
<template #leading>
|
|
<span class="text-neutral-500">€</span>
|
|
</template>
|
|
</UInput>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2"
|
|
>Payroll On-costs (%)</label
|
|
>
|
|
<UInput
|
|
v-model="policies.payrollOncost"
|
|
type="number"
|
|
:ui="{ wrapper: 'relative' }">
|
|
<template #trailing>
|
|
<span class="text-neutral-500">%</span>
|
|
</template>
|
|
</UInput>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
|
|
<UCard>
|
|
<template #header>
|
|
<h3 class="text-lg font-medium">Cash Management</h3>
|
|
</template>
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2"
|
|
>Savings Target (months)</label
|
|
>
|
|
<UInput
|
|
v-model="policies.savingsTargetMonths"
|
|
type="number"
|
|
step="0.1" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2"
|
|
>Minimum Cash Cushion</label
|
|
>
|
|
<UInput
|
|
v-model="policies.minCashCushion"
|
|
type="number"
|
|
:ui="{ wrapper: 'relative' }">
|
|
<template #leading>
|
|
<span class="text-neutral-500">€</span>
|
|
</template>
|
|
</UInput>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
|
|
<UCard>
|
|
<template #header>
|
|
<h3 class="text-lg font-medium">Deferred Pay Limits</h3>
|
|
</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" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2"
|
|
>Sunset (months)</label
|
|
>
|
|
<UInput v-model="policies.deferredSunsetMonths" type="number" />
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
|
|
<UCard>
|
|
<template #header>
|
|
<h3 class="text-lg font-medium">Distribution Order</h3>
|
|
</template>
|
|
<div class="space-y-4">
|
|
<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-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" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
</div>
|
|
|
|
<div class="flex justify-end">
|
|
<UButton color="primary"> Save Policies </UButton>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const policies = ref({
|
|
hourlyWage: 20,
|
|
payrollOncost: 25,
|
|
savingsTargetMonths: 3,
|
|
minCashCushion: 3000,
|
|
deferredCapHours: 240,
|
|
deferredSunsetMonths: 12,
|
|
});
|
|
|
|
const distributionOrder = ref([
|
|
"Deferred",
|
|
"Savings",
|
|
"Hardship",
|
|
"Training",
|
|
"Patronage",
|
|
"Retained",
|
|
]);
|
|
</script>
|