feat: add initial application structure with configuration, UI components, and state management
This commit is contained in:
parent
fadf94002c
commit
0af6b17792
56 changed files with 6137 additions and 129 deletions
264
components/WizardPoliciesStep.vue
Normal file
264
components/WizardPoliciesStep.vue
Normal file
|
|
@ -0,0 +1,264 @@
|
|||
<template>
|
||||
<div class="space-y-6">
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useDebounceFn } from "@vueuse/core";
|
||||
const emit = defineEmits<{
|
||||
"save-status": [status: "saving" | "saved" | "error"];
|
||||
}>();
|
||||
|
||||
// Store
|
||||
const policiesStore = usePoliciesStore();
|
||||
|
||||
function parseNumberInput(val: unknown): number {
|
||||
if (typeof val === "number") return val;
|
||||
if (typeof val === "string") {
|
||||
const cleaned = val.replace(/,/g, ".").replace(/[^0-9.\-]/g, "");
|
||||
const parsed = parseFloat(cleaned);
|
||||
return Number.isFinite(parsed) ? parsed : 0;
|
||||
}
|
||||
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)),
|
||||
});
|
||||
|
||||
// Remove old local sync and debounce saving; direct v-model handles persistence
|
||||
|
||||
// Volunteer flows
|
||||
const availableFlows = [
|
||||
{ label: "Care Work", value: "Care" },
|
||||
{ label: "Shared Learning", value: "SharedLearning" },
|
||||
{ label: "Community Building", value: "Community" },
|
||||
{ label: "Outreach", value: "Outreach" },
|
||||
];
|
||||
|
||||
const selectedVolunteerFlows = ref([
|
||||
...policiesStore.volunteerScope.allowedFlows,
|
||||
]);
|
||||
|
||||
// Minimal save-status feedback on changes
|
||||
function notifySaved() {
|
||||
emit("save-status", "saved");
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
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");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue