popertots
50746595e7
Backend: - Enriched GetAllUserBookings response with calculated total_amount, amount_paid, and duration_minutes. - Refactored GetBookingHandler to return a flat booking object matching frontend expectations. - Added account_role to admin user list response and sorted users by booking activity. - Corrected function name oo to AdminCreateBookingForUserHandler. Frontend: - Rebuilt BookingCreateModal into a 4-step wizard supporting guest bookings, service overrides, and real-time availability checks. - Fixed account dashboard logic to correctly identify upcoming vs past bookings and sort unpaid items to the top. - Extracted booking flow into a shared BookingFlow component. - Redirected admin users from home page to /today.
40 lines
1.1 KiB
Svelte
40 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
export let currentStep: number;
|
|
export let steps: string[] = ['Service', 'Date & Time', 'Details', 'Payment'];
|
|
|
|
const totalSteps = steps.length;
|
|
</script>
|
|
|
|
<div class="mb-8 grid grid-cols-2 gap-4 md:flex md:items-center md:justify-center md:space-x-4">
|
|
{#each steps as step, index (step)}
|
|
{@const stepNumber = index + 1}
|
|
{@const isActive = stepNumber <= currentStep}
|
|
{@const isLastStep = index === totalSteps - 1}
|
|
|
|
<div class="flex items-center justify-start md:justify-center">
|
|
<!-- Step circle -->
|
|
<div
|
|
class="flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium {isActive
|
|
? 'bg-primary text-primary-foreground'
|
|
: 'bg-gray-200 text-gray-600'}"
|
|
>
|
|
{stepNumber}
|
|
</div>
|
|
|
|
<!-- Step label -->
|
|
<span class="ml-2 text-sm font-medium {isActive ? 'text-primary' : 'text-gray-600'}">
|
|
{step}
|
|
</span>
|
|
|
|
<!-- Connector line (desktop only, not after last step) -->
|
|
{#if !isLastStep}
|
|
<div
|
|
class="mx-4 hidden h-0.5 w-8 md:block {stepNumber < currentStep
|
|
? 'bg-primary'
|
|
: 'bg-gray-200'}"
|
|
></div>
|
|
{/if}
|
|
</div>
|
|
{/each}
|
|
</div>
|