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,162 +1,28 @@
|
|||
<template>
|
||||
<div class="space-y-6">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<h3 class="text-lg font-medium mb-4">Wage & Policies</h3>
|
||||
<p class="text-gray-600 mb-6">
|
||||
Set your equal hourly wage and key policies.
|
||||
</p>
|
||||
<h3 class="text-2xl font-black text-black mb-6">
|
||||
What's your equal hourly wage?
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Core Wage Settings -->
|
||||
<UCard title="Equal Wage">
|
||||
<div class="space-y-4">
|
||||
<UFormField label="Hourly Wage" required>
|
||||
<UInput
|
||||
v-model.number="wageModel"
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.01"
|
||||
placeholder="25.00">
|
||||
<template #leading>
|
||||
<span class="text-gray-500">€</span>
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormField>
|
||||
|
||||
<UFormField
|
||||
label="On-costs %"
|
||||
hint="Employer taxes, benefits, payroll fees">
|
||||
<UInput
|
||||
v-model.number="oncostModel"
|
||||
type="number"
|
||||
min="0"
|
||||
max="100"
|
||||
placeholder="25">
|
||||
<template #trailing>
|
||||
<span class="text-gray-500">%</span>
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormField>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- Cash Management -->
|
||||
<UCard title="Cash Management">
|
||||
<div class="space-y-4">
|
||||
<UFormField
|
||||
label="Savings Target"
|
||||
hint="Months of burn to keep as reserves">
|
||||
<UInput
|
||||
v-model.number="savingsMonthsModel"
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.5"
|
||||
placeholder="3">
|
||||
<template #trailing>
|
||||
<span class="text-gray-500">months</span>
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormField>
|
||||
|
||||
<UFormField
|
||||
label="Minimum Cash Cushion"
|
||||
hint="Weekly floor we won't breach">
|
||||
<UInput
|
||||
v-model.number="minCushionModel"
|
||||
type="number"
|
||||
min="0"
|
||||
placeholder="3000">
|
||||
<template #leading>
|
||||
<span class="text-gray-500">€</span>
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormField>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- Deferred Pay Policy -->
|
||||
<UCard title="Deferred Pay">
|
||||
<div class="space-y-4">
|
||||
<UFormField
|
||||
label="Quarterly Cap"
|
||||
hint="Max deferred hours per member per quarter">
|
||||
<UInput
|
||||
v-model.number="deferredCapModel"
|
||||
type="number"
|
||||
min="0"
|
||||
placeholder="240">
|
||||
<template #trailing>
|
||||
<span class="text-gray-500">hours</span>
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormField>
|
||||
|
||||
<UFormField
|
||||
label="Sunset Period"
|
||||
hint="Months after which deferred pay expires">
|
||||
<UInput
|
||||
v-model.number="deferredSunsetModel"
|
||||
type="number"
|
||||
min="0"
|
||||
placeholder="12">
|
||||
<template #trailing>
|
||||
<span class="text-gray-500">months</span>
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormField>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- Volunteer Scope -->
|
||||
<UCard title="Volunteer Scope">
|
||||
<div class="space-y-4">
|
||||
<UFormField label="Allowed Flows" hint="What work can be done unpaid">
|
||||
<div class="space-y-2">
|
||||
<UCheckbox
|
||||
v-for="flow in availableFlows"
|
||||
:key="flow.value"
|
||||
:id="'volunteer-flow-' + flow.value"
|
||||
:name="flow.value"
|
||||
:value="flow.value"
|
||||
:checked="selectedVolunteerFlows.includes(flow.value)"
|
||||
:label="flow.label"
|
||||
@change="toggleFlow(flow.value, $event)" />
|
||||
</div>
|
||||
</UFormField>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
|
||||
<!-- Summary -->
|
||||
<div class="bg-gray-50 rounded-lg p-4">
|
||||
<h4 class="font-medium text-sm mb-2">Policy Summary</h4>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
|
||||
<div>
|
||||
<span class="text-gray-600">Hourly wage:</span>
|
||||
<span class="font-medium ml-1">€{{ wageModel || 0 }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-gray-600">On-costs:</span>
|
||||
<span class="font-medium ml-1">{{ oncostModel || 0 }}%</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-gray-600">Savings target:</span>
|
||||
<span class="font-medium ml-1"
|
||||
>{{ savingsMonthsModel || 0 }} months</span
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-gray-600">Cash cushion:</span>
|
||||
<span class="font-medium ml-1">€{{ minCushionModel || 0 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-md">
|
||||
<UInput
|
||||
v-model="wageText"
|
||||
type="text"
|
||||
placeholder="0.00"
|
||||
size="xl"
|
||||
class="text-4xl font-black w-full h-20"
|
||||
@update:model-value="validateAndSaveWage">
|
||||
<template #leading>
|
||||
<span class="text-neutral-500 text-3xl">$</span>
|
||||
</template>
|
||||
</UInput>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useDebounceFn } from "@vueuse/core";
|
||||
const emit = defineEmits<{
|
||||
"save-status": [status: "saving" | "saved" | "error"];
|
||||
}>();
|
||||
|
|
@ -174,91 +40,65 @@ function parseNumberInput(val: unknown): number {
|
|||
return 0;
|
||||
}
|
||||
|
||||
// Two-way computed models bound directly to the store
|
||||
const wageModel = computed({
|
||||
get: () => unref(policiesStore.equalHourlyWage) as number,
|
||||
set: (val: number | string) =>
|
||||
policiesStore.setEqualWage(parseNumberInput(val)),
|
||||
});
|
||||
const oncostModel = computed({
|
||||
get: () => unref(policiesStore.payrollOncostPct) as number,
|
||||
set: (val: number | string) =>
|
||||
policiesStore.setOncostPct(parseNumberInput(val)),
|
||||
});
|
||||
const savingsMonthsModel = computed({
|
||||
get: () => unref(policiesStore.savingsTargetMonths) as number,
|
||||
set: (val: number | string) =>
|
||||
policiesStore.setSavingsTargetMonths(parseNumberInput(val)),
|
||||
});
|
||||
const minCushionModel = computed({
|
||||
get: () => unref(policiesStore.minCashCushionAmount) as number,
|
||||
set: (val: number | string) =>
|
||||
policiesStore.setMinCashCushion(parseNumberInput(val)),
|
||||
});
|
||||
const deferredCapModel = computed({
|
||||
get: () => unref(policiesStore.deferredCapHoursPerQtr) as number,
|
||||
set: (val: number | string) =>
|
||||
policiesStore.setDeferredCap(parseNumberInput(val)),
|
||||
});
|
||||
const deferredSunsetModel = computed({
|
||||
get: () => unref(policiesStore.deferredSunsetMonths) as number,
|
||||
set: (val: number | string) =>
|
||||
policiesStore.setDeferredSunset(parseNumberInput(val)),
|
||||
});
|
||||
// Text input for wage with validation
|
||||
const wageText = ref(
|
||||
policiesStore.equalHourlyWage > 0
|
||||
? policiesStore.equalHourlyWage.toString()
|
||||
: ""
|
||||
);
|
||||
|
||||
// Remove old local sync and debounce saving; direct v-model handles persistence
|
||||
// Watch for store changes to update text field
|
||||
watch(
|
||||
() => policiesStore.equalHourlyWage,
|
||||
(newWage) => {
|
||||
wageText.value = newWage > 0 ? newWage.toString() : "";
|
||||
}
|
||||
);
|
||||
|
||||
// Volunteer flows
|
||||
const availableFlows = [
|
||||
{ label: "Care Work", value: "Care" },
|
||||
{ label: "Shared Learning", value: "SharedLearning" },
|
||||
{ label: "Community Building", value: "Community" },
|
||||
{ label: "Outreach", value: "Outreach" },
|
||||
];
|
||||
function validateAndSaveWage(value: string) {
|
||||
const cleanValue = value.replace(/[^\d.]/g, "");
|
||||
const numValue = parseFloat(cleanValue);
|
||||
|
||||
const selectedVolunteerFlows = ref([
|
||||
...policiesStore.volunteerScope.allowedFlows,
|
||||
]);
|
||||
wageText.value = cleanValue;
|
||||
|
||||
// Minimal save-status feedback on changes
|
||||
function notifySaved() {
|
||||
emit("save-status", "saved");
|
||||
}
|
||||
if (!isNaN(numValue) && numValue >= 0) {
|
||||
policiesStore.setEqualWage(numValue);
|
||||
|
||||
function toggleFlow(flowValue: string, event: any) {
|
||||
const checked = event.target ? event.target.checked : event;
|
||||
console.log(
|
||||
"toggleFlow called:",
|
||||
flowValue,
|
||||
checked,
|
||||
"current array:",
|
||||
selectedVolunteerFlows.value
|
||||
);
|
||||
|
||||
if (checked) {
|
||||
if (!selectedVolunteerFlows.value.includes(flowValue)) {
|
||||
selectedVolunteerFlows.value.push(flowValue);
|
||||
}
|
||||
} else {
|
||||
const index = selectedVolunteerFlows.value.indexOf(flowValue);
|
||||
if (index > -1) {
|
||||
selectedVolunteerFlows.value.splice(index, 1);
|
||||
// Set sensible defaults when wage is set
|
||||
if (numValue > 0) {
|
||||
setDefaults();
|
||||
emit("save-status", "saved");
|
||||
}
|
||||
}
|
||||
|
||||
console.log("after toggle:", selectedVolunteerFlows.value);
|
||||
saveVolunteerScope();
|
||||
}
|
||||
|
||||
function saveVolunteerScope() {
|
||||
emit("save-status", "saving");
|
||||
|
||||
try {
|
||||
policiesStore.setVolunteerScope(selectedVolunteerFlows.value);
|
||||
emit("save-status", "saved");
|
||||
} catch (error) {
|
||||
console.error("Failed to save volunteer scope:", error);
|
||||
emit("save-status", "error");
|
||||
// Set reasonable defaults for hidden fields
|
||||
function setDefaults() {
|
||||
if (policiesStore.payrollOncostPct === 0) {
|
||||
policiesStore.setOncostPct(25); // 25% on-costs
|
||||
}
|
||||
if (policiesStore.savingsTargetMonths === 0) {
|
||||
policiesStore.setSavingsTargetMonths(3); // 3 months savings
|
||||
}
|
||||
if (policiesStore.minCashCushionAmount === 0) {
|
||||
policiesStore.setMinCashCushion(3000); // €3k cushion
|
||||
}
|
||||
if (policiesStore.deferredCapHoursPerQtr === 0) {
|
||||
policiesStore.setDeferredCap(240); // 240 hours quarterly cap
|
||||
}
|
||||
if (policiesStore.deferredSunsetMonths === 0) {
|
||||
policiesStore.setDeferredSunset(12); // 12 month sunset
|
||||
}
|
||||
// Set default volunteer flows
|
||||
if (policiesStore.volunteerScope.allowedFlows.length === 0) {
|
||||
policiesStore.setVolunteerScope(["Care", "SharedLearning"]);
|
||||
}
|
||||
}
|
||||
|
||||
// Set defaults on mount if needed
|
||||
onMounted(() => {
|
||||
if (policiesStore.equalHourlyWage > 0) {
|
||||
setDefaults();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue