From ec097af0f6d0caa2b675d5e1ba85227478f71004 Mon Sep 17 00:00:00 2001 From: Stephen Adamson Date: Fri, 29 May 2026 16:10:29 +0100 Subject: [PATCH] refactor: route pages with shared formatting and layout updates Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus --- frontend/src/routes/+page.svelte | 8 + frontend/src/routes/account/+page.svelte | 34 +- frontend/src/routes/admin/+page.svelte | 10 +- frontend/src/routes/login/+page.svelte | 353 ++++++++++++------ .../src/routes/notifications/+page.svelte | 25 +- frontend/src/routes/prices/+page.svelte | 259 +++++++------ frontend/src/routes/schedule/+page.svelte | 10 +- frontend/src/routes/tip/+page.svelte | 8 +- frontend/src/routes/today/+page.svelte | 36 +- 9 files changed, 432 insertions(+), 311 deletions(-) diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte index c363be9..9ff928b 100644 --- a/frontend/src/routes/+page.svelte +++ b/frontend/src/routes/+page.svelte @@ -1,9 +1,17 @@ -
-
-

Our Prices

+
+
+

Our Prices

Professional beauty treatments with transparent pricing

{#if servicesLoading} -
-
-
Loading services...
-
-
-
- {:else if services.length === 0} -
-
No services available at the moment.
- -
- {:else}
- {#each services as service, index} - -
-
-
-

{service.name}

-

{service.description}

- -

- - - - - {formatDuration(service.duration_minutes)} - -

- {#if service.patch_test_duration_hours > 0} -

- Patch test required {service.patch_test_duration_hours}h before appointment -

- {/if} - {#if service.minimum_age_required > 0} -

- Minimum age: {service.minimum_age_required} years -

- {/if} -
-
- -
{formatPrice(service.price)}
- - -
- - - {#if index < services.length - 1} - - {/if} + + {/each}
- - - - -
-

Important Information:

-
    -
  • - • Prices and durations are estimates and may vary based on individual requirements -
    • -
  • • Patch tests are required 24-48 hours before certain treatments
    • -
  • • 24 hours notice required for cancellations
    • -
  • • Payment is due at the time of service
    • -
  • • Deposit required for new and guest accounts
    • -
+ {:else if services.length === 0} + + +
+
No services available at the moment.
+
+ {:else} +
+ {#each services as service (service.id)} + + +
+
+

{service.name}

+

{service.description}

- -
-

Ready to Book?

-
- - -
+
+ {#if service.patch_test_duration_hours > 0} + + + + + Patch test required {service.patch_test_duration_hours}h before + + {/if} + {#if service.minimum_age_required > 0} + + + + + Minimum age: {service.minimum_age_required} years + + {/if} +
+
+ +
+
{formatPrice(service.price)}
+
+ {formatDuration(service.duration_minutes)} +
+
+
+ + + {/each}
+ + + + + + + + Important Information + + + +
    +
  • + Prices and durations are estimates and may vary based on + individual requirements +
    • +
  • + Patch tests are required 24–48 hours before certain treatments + — look for the amber badge above +
    • +
  • + 24 hours notice required for cancellations but do get in + contact with us directly for exceptional circumstances +
    • +
  • + Payment is due at the time of service +
    • +
  • + Deposit may be required for frequent no-shows +
    • +
+ + + + + +

Ready to Book?

+
+ + +
+ + {/if}
diff --git a/frontend/src/routes/schedule/+page.svelte b/frontend/src/routes/schedule/+page.svelte index d531499..0678516 100644 --- a/frontend/src/routes/schedule/+page.svelte +++ b/frontend/src/routes/schedule/+page.svelte @@ -36,7 +36,7 @@ async function fetchBookings() { loading = true; try { - const today = new Date().toISOString().split('T')[0]; + const today = new SvelteDate().toISOString().split('T')[0]; const response = await fetch(`/api/bookings?start_date=${today}&per_page=50&page=1`, { headers: { 'Content-Type': 'application/json', @@ -50,16 +50,16 @@ } const data = await response.json(); - const now = new Date(); + const now = new SvelteDate(); bookings = (data.bookings || []) .filter((b: any) => { - const startTime = new Date(b.start_time); - const endTime = new Date(startTime.getTime() + (b.duration_minutes || 0) * 60000); + const startTime = new SvelteDate(b.start_time); + const endTime = new SvelteDate(startTime.getTime() + (b.duration_minutes || 0) * 60000); return endTime > now; }) .sort( - (a: any, b: any) => new Date(a.start_time).getTime() - new Date(b.start_time).getTime() + (a: any, b: any) => new SvelteDate(a.start_time).getTime() - new SvelteDate(b.start_time).getTime() ); } catch (err) { console.error('Error fetching bookings:', err); diff --git a/frontend/src/routes/tip/+page.svelte b/frontend/src/routes/tip/+page.svelte index 4d2d917..0618864 100644 --- a/frontend/src/routes/tip/+page.svelte +++ b/frontend/src/routes/tip/+page.svelte @@ -206,16 +206,16 @@ return; } - const now = new Date(); + const now = new SvelteDate(); const sorted = bookings.sort((a, b) => { - const dateA = new Date(a.start_time).getTime(); - const dateB = new Date(b.start_time).getTime(); + const dateA = new SvelteDate(a.start_time).getTime(); + const dateB = new SvelteDate(b.start_time).getTime(); return dateB - dateA; }); // Find most recent past booking (start_time <= now) const pastBooking = sorted.find((b) => { - const startTime = new Date(b.start_time); + const startTime = new SvelteDate(b.start_time); return startTime <= now; }); diff --git a/frontend/src/routes/today/+page.svelte b/frontend/src/routes/today/+page.svelte index c809106..11844c3 100644 --- a/frontend/src/routes/today/+page.svelte +++ b/frontend/src/routes/today/+page.svelte @@ -119,13 +119,13 @@
- -
+ +
- -
+ +
@@ -161,23 +161,17 @@
- {#if showBookingModal && selectedBookingId} - - {/if} + - {#if showEditBookingModal && selectedBookingId} - { - // Refresh the page data after save - showBookingModal = false; - }} - /> - {/if} + { + // Refresh the page data after save + showBookingModal = false; + }} + /> - {#if showUserModal && selectedUserId} - - {/if} + {/if}