refactor: remove deprecated components and streamline member coverage calculations, enhance budget management with improved payroll handling, and update UI elements for better clarity
This commit is contained in:
parent
983aeca2dc
commit
09d8794d72
42 changed files with 2166 additions and 2974 deletions
|
|
@ -48,7 +48,7 @@
|
|||
|
||||
<!-- Vertical Steps Layout -->
|
||||
<div v-else class="space-y-4">
|
||||
<!-- Step 1: Members -->
|
||||
<!-- Step 1: Pay Policy -->
|
||||
<div class="relative">
|
||||
<!-- Dithered shadow for selected state -->
|
||||
<div
|
||||
|
|
@ -68,12 +68,12 @@
|
|||
<div
|
||||
class="w-8 h-8 flex items-center justify-center text-sm font-bold border-2"
|
||||
:class="
|
||||
membersValid
|
||||
policiesValid
|
||||
? 'bg-black dark:bg-white text-white dark:text-black border-black dark:border-white'
|
||||
: 'bg-white dark:bg-neutral-950 text-black dark:text-white border-black dark:border-white'
|
||||
">
|
||||
<UIcon
|
||||
v-if="membersValid"
|
||||
v-if="policiesValid"
|
||||
name="i-heroicons-check"
|
||||
class="w-4 h-4" />
|
||||
<span v-else>1</span>
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
<div>
|
||||
<h3
|
||||
class="text-2xl font-black text-black dark:text-white uppercase tracking-wide">
|
||||
Add your team
|
||||
Choose pay approach
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -95,12 +95,12 @@
|
|||
<div
|
||||
v-if="focusedStep === 1"
|
||||
class="p-8 bg-neutral-50 dark:bg-neutral-900 border-t-2 border-black dark:border-white">
|
||||
<WizardMembersStep @save-status="handleSaveStatus" />
|
||||
<WizardPoliciesStep @save-status="handleSaveStatus" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 2: Wage -->
|
||||
<!-- Step 2: Members -->
|
||||
<div class="relative">
|
||||
<!-- Dithered shadow for selected state -->
|
||||
<div
|
||||
|
|
@ -120,12 +120,12 @@
|
|||
<div
|
||||
class="w-8 h-8 flex items-center justify-center text-sm font-bold border-2"
|
||||
:class="
|
||||
policiesValid
|
||||
membersValid
|
||||
? 'bg-black dark:bg-white text-white dark:text-black border-black dark:border-white'
|
||||
: 'bg-white dark:bg-neutral-950 text-black dark:text-white border-black dark:border-white'
|
||||
">
|
||||
<UIcon
|
||||
v-if="policiesValid"
|
||||
v-if="membersValid"
|
||||
name="i-heroicons-check"
|
||||
class="w-4 h-4" />
|
||||
<span v-else>2</span>
|
||||
|
|
@ -133,7 +133,7 @@
|
|||
<div>
|
||||
<h3
|
||||
class="text-2xl font-black text-black dark:text-white uppercase tracking-wide">
|
||||
Set your wage
|
||||
Add your team
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -147,7 +147,7 @@
|
|||
<div
|
||||
v-if="focusedStep === 2"
|
||||
class="p-8 bg-neutral-50 dark:bg-neutral-900 border-t-2 border-black dark:border-white">
|
||||
<WizardPoliciesStep @save-status="handleSaveStatus" />
|
||||
<WizardMembersStep @save-status="handleSaveStatus" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -170,13 +170,22 @@
|
|||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="w-8 h-8 flex items-center justify-center text-sm font-bold border-2 bg-black dark:bg-white text-white dark:text-black border-black dark:border-white">
|
||||
<UIcon name="i-heroicons-check" class="w-4 h-4" />
|
||||
class="w-8 h-8 flex items-center justify-center text-sm font-bold border-2"
|
||||
:class="
|
||||
costsValid
|
||||
? 'bg-black dark:bg-white text-white dark:text-black border-black dark:border-white'
|
||||
: 'bg-white dark:bg-neutral-950 text-black dark:text-white border-black dark:border-white'
|
||||
">
|
||||
<UIcon
|
||||
v-if="costsValid"
|
||||
name="i-heroicons-check"
|
||||
class="w-4 h-4" />
|
||||
<span v-else>3</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3
|
||||
class="text-2xl font-black text-black dark:text-white uppercase tracking-wide">
|
||||
Monthly costs
|
||||
Expenses
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -247,60 +256,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 5: Review -->
|
||||
<div class="relative">
|
||||
<!-- Dithered shadow for selected state -->
|
||||
<div
|
||||
v-if="focusedStep === 5"
|
||||
class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
|
||||
|
||||
<div
|
||||
:class="[
|
||||
'relative bg-white dark:bg-neutral-950 border-2 border-black dark:border-white overflow-hidden',
|
||||
focusedStep === 5 ? 'item-selected' : '',
|
||||
]">
|
||||
<div
|
||||
class="p-8 cursor-pointer hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
|
||||
@click="setFocusedStep(5)">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="w-8 h-8 flex items-center justify-center text-sm font-bold border-2"
|
||||
:class="
|
||||
canComplete
|
||||
? 'bg-black dark:bg-white text-white dark:text-black border-black dark:border-white'
|
||||
: 'bg-white dark:bg-neutral-950 text-black dark:text-white border-black dark:border-white'
|
||||
">
|
||||
<UIcon
|
||||
v-if="canComplete"
|
||||
name="i-heroicons-check"
|
||||
class="w-4 h-4" />
|
||||
<span v-else>5</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3
|
||||
class="text-2xl font-black text-black dark:text-white uppercase tracking-wide">
|
||||
Review & finish
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<UIcon
|
||||
name="i-heroicons-chevron-down"
|
||||
class="w-6 h-6 text-black dark:text-white transition-transform font-bold"
|
||||
:class="{ 'rotate-180': focusedStep === 5 }" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="focusedStep === 5"
|
||||
class="p-8 bg-neutral-50 dark:bg-neutral-900 border-t-2 border-black dark:border-white">
|
||||
<WizardReviewStep
|
||||
@complete="completeWizard"
|
||||
@reset="resetWizard" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Progress Actions -->
|
||||
<div class="flex justify-between items-center pt-8">
|
||||
<button
|
||||
|
|
@ -334,12 +289,15 @@
|
|||
>
|
||||
</div>
|
||||
|
||||
<button
|
||||
v-if="canComplete"
|
||||
class="export-btn primary"
|
||||
@click="completeWizard">
|
||||
Complete Setup
|
||||
</button>
|
||||
<UTooltip :text="incompleteSectionsText" :prevent="canComplete">
|
||||
<button
|
||||
class="export-btn primary"
|
||||
:class="{ 'opacity-50 cursor-not-allowed': !canComplete }"
|
||||
:disabled="!canComplete"
|
||||
@click="canComplete ? completeWizard() : null">
|
||||
Complete Setup
|
||||
</button>
|
||||
</UTooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -357,11 +315,6 @@ const saveStatus = ref("");
|
|||
const isResetting = ref(false);
|
||||
const isCompleted = ref(false);
|
||||
|
||||
// Computed validation
|
||||
const canComplete = computed(() => {
|
||||
return coop.members.value.length > 0 && coop.streams.value.length > 0;
|
||||
});
|
||||
|
||||
// Local validity flags for step headers
|
||||
const membersValid = computed(() => {
|
||||
// Valid if at least one member with a name and positive hours
|
||||
|
|
@ -375,7 +328,12 @@ const membersValid = computed(() => {
|
|||
const policiesValid = computed(() => {
|
||||
// Placeholder policy validity; mark true when wage text or policy set exists
|
||||
// Since policy not persisted yet in this store, consider valid when any member exists
|
||||
return membersValid.value;
|
||||
return coop.members.value.length > 0;
|
||||
});
|
||||
|
||||
const costsValid = computed(() => {
|
||||
// Costs are optional, so always mark as valid for now
|
||||
return true;
|
||||
});
|
||||
|
||||
const streamsValid = computed(() => {
|
||||
|
|
@ -389,6 +347,29 @@ const streamsValid = computed(() => {
|
|||
);
|
||||
});
|
||||
|
||||
// Computed validation - all 4 steps must be valid
|
||||
const canComplete = computed(() => {
|
||||
return (
|
||||
policiesValid.value &&
|
||||
membersValid.value &&
|
||||
costsValid.value &&
|
||||
streamsValid.value
|
||||
);
|
||||
});
|
||||
|
||||
// Generate tooltip text for incomplete sections
|
||||
const incompleteSectionsText = computed(() => {
|
||||
if (canComplete.value) return "";
|
||||
|
||||
const incomplete = [];
|
||||
if (!policiesValid.value) incomplete.push("Choose pay approach");
|
||||
if (!membersValid.value) incomplete.push("Add team members");
|
||||
if (!costsValid.value) incomplete.push("Add monthly costs");
|
||||
if (!streamsValid.value) incomplete.push("Add revenue streams");
|
||||
|
||||
return `Complete these sections: ${incomplete.join(", ")}`;
|
||||
});
|
||||
|
||||
// Save status handler
|
||||
function handleSaveStatus(status: "saving" | "saved" | "error") {
|
||||
saveStatus.value = status;
|
||||
|
|
@ -404,12 +385,14 @@ function handleSaveStatus(status: "saving" | "saved" | "error") {
|
|||
|
||||
// Step management
|
||||
function setFocusedStep(step: number) {
|
||||
console.log("Setting focused step to:", step, "Current:", focusedStep.value);
|
||||
// Toggle if clicking on already focused step
|
||||
if (focusedStep.value === step) {
|
||||
focusedStep.value = 0; // Close the section
|
||||
} else {
|
||||
focusedStep.value = step; // Open the section
|
||||
}
|
||||
console.log("Focused step is now:", focusedStep.value);
|
||||
}
|
||||
|
||||
function completeWizard() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue