popertots/Crussell
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

responsive

Browse Source
This commit is contained in:
popertots
2026-01-06 16:55:26 +00:00
parent 67d812a9be
commit 1e8995f577
1 changed files with 61 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/account/+page.svelte
+61 -56
View File
@@ -491,68 +491,73 @@
</Card.Root>
{:else if activeTab === 'history'}
<!-- Upcoming Bookings -->
<Card.Root class="mb-6">
<Card.Header>
<Card.Title>Upcoming Appointments</Card.Title>
<Card.Description>Next 3 upcoming bookings</Card.Description>
</Card.Header>
<Card.Content class="space-y-2">
{#if loadingUpcoming}
{#each Array(3) as _, i (i)}
<Skeleton class="h-16 w-full" />
{/each}
{:else if upcomingBookings.length === 0}
<div class="py-4 text-center text-gray-500">No upcoming bookings</div>
{:else}
{#each upcomingBookings as b (b.id)}
<div class="flex items-center justify-between rounded bg-gray-50 p-2">
<div class="flex-1">
<div class="font-medium">{formatDateTime(b.start_time)}</div>
<div class="mt-1 flex items-center gap-2 text-xs text-gray-500">
<span
class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium {b.status ===
'confirmed'
? 'bg-emerald-100 text-emerald-800'
: b.status === 'pending'
? 'bg-amber-100 text-amber-800'
: b.status === 'in_progress'
? 'bg-blue-100 text-blue-800'
: b.status === 'completed'
? 'bg-green-100 text-green-800'
: 'bg-gray-100 text-gray-800'}"
>
{#if upcomingBookings.length > 0}
<Card.Root class="mb-6">
<Card.Header>
<Card.Title>Upcoming Appointments</Card.Title>
<Card.Description
>Next {upcomingBookings.length < 3 ? upcomingBookings.length : 3} upcoming bookings</Card.Description
>
</Card.Header>
<Card.Content class="space-y-2">
{#if loadingUpcoming}
{#each Array(3) as _, i (i)}
<Skeleton class="h-16 w-full" />
{/each}
{:else if upcomingBookings.length === 0}
<div class="py-4 text-center text-gray-500">No upcoming bookings</div>
{:else}
{#each upcomingBookings as b (b.id)}
<div class="flex items-center justify-between rounded bg-gray-50 p-2">
<div class="flex-1">
<div class="font-medium">{formatDateTime(b.start_time)}</div>
<div class="mt-1 flex items-center gap-2 text-xs text-gray-500">
<span
class="mr-1 h-1.5 w-1.5 rounded-full {b.status === 'confirmed'
? 'bg-emerald-600'
class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium {b.status ===
'confirmed'
? 'bg-emerald-100 text-emerald-800'
: b.status === 'pending'
? 'bg-amber-600'
? 'bg-amber-100 text-amber-800'
: b.status === 'in_progress'
? 'bg-blue-600'
? 'bg-blue-100 text-blue-800'
: b.status === 'completed'
? 'bg-green-600'
: 'bg-gray-600'}"
></span>
{b.status}
</span>
<span>
- {(() => {
const services = (b.services || []).map(
(s) => s.service_name || 'Unknown Service'
);
if (services.length === 0) return 'No services';
if (services.length === 1) return services[0];
if (services.length === 2) return services.join(' and ');
return `${services[0]} and ${services.length - 1} other${services.length - 1 > 1 ? 's' : ''}`;
})()}
</span>
? 'bg-green-100 text-green-800'
: 'bg-gray-100 text-gray-800'}"
>
<span
class="mr-1 h-1.5 w-1.5 rounded-full {b.status === 'confirmed'
? 'bg-emerald-600'
: b.status === 'pending'
? 'bg-amber-600'
: b.status === 'in_progress'
? 'bg-blue-600'
: b.status === 'completed'
? 'bg-green-600'
: 'bg-gray-600'}"
></span>
{b.status}
</span>
<span>
- {(() => {
const services = (b.services || []).map(
(s) => s.service_name || 'Unknown Service'
);
if (services.length === 0) return 'No services';
if (services.length === 1) return services[0];
if (services.length === 2) return services.join(' and ');
return `${services[0]} and ${services.length - 1} other${services.length - 1 > 1 ? 's' : ''}`;
})()}
</span>
</div>
</div>
<Button variant="outline" onclick={() => goto(`/bookings/${b.id}`)}>View</Button
>
</div>
<Button variant="outline" onclick={() => goto(`/bookings/${b.id}`)}>View</Button>
</div>
{/each}
{/if}
</Card.Content>
</Card.Root>
{/each}
{/if}
</Card.Content>
</Card.Root>
{/if}
<!-- Past Bookings -->
<Card.Root>