138 lines
4 KiB
Vue
138 lines
4 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-gray-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-gray-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-gray-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-gray-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 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>
|