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> </Card.Root>
{:else if activeTab === 'history'} {:else if activeTab === 'history'}
<!-- Upcoming Bookings --> <!-- Upcoming Bookings -->
<Card.Root class="mb-6"> {#if upcomingBookings.length > 0}
<Card.Header> <Card.Root class="mb-6">
<Card.Title>Upcoming Appointments</Card.Title> <Card.Header>
<Card.Description>Next 3 upcoming bookings</Card.Description> <Card.Title>Upcoming Appointments</Card.Title>
</Card.Header> <Card.Description
<Card.Content class="space-y-2"> >Next {upcomingBookings.length < 3 ? upcomingBookings.length : 3} upcoming bookings</Card.Description
{#if loadingUpcoming} >
{#each Array(3) as _, i (i)} </Card.Header>
<Skeleton class="h-16 w-full" /> <Card.Content class="space-y-2">
{/each} {#if loadingUpcoming}
{:else if upcomingBookings.length === 0} {#each Array(3) as _, i (i)}
<div class="py-4 text-center text-gray-500">No upcoming bookings</div> <Skeleton class="h-16 w-full" />
{:else} {/each}
{#each upcomingBookings as b (b.id)} {:else if upcomingBookings.length === 0}
<div class="flex items-center justify-between rounded bg-gray-50 p-2"> <div class="py-4 text-center text-gray-500">No upcoming bookings</div>
<div class="flex-1"> {:else}
<div class="font-medium">{formatDateTime(b.start_time)}</div> {#each upcomingBookings as b (b.id)}
<div class="mt-1 flex items-center gap-2 text-xs text-gray-500"> <div class="flex items-center justify-between rounded bg-gray-50 p-2">
<span <div class="flex-1">
class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium {b.status === <div class="font-medium">{formatDateTime(b.start_time)}</div>
'confirmed' <div class="mt-1 flex items-center gap-2 text-xs text-gray-500">
? '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'}"
>
<span <span
class="mr-1 h-1.5 w-1.5 rounded-full {b.status === 'confirmed' class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium {b.status ===
? 'bg-emerald-600' 'confirmed'
? 'bg-emerald-100 text-emerald-800'
: b.status === 'pending' : b.status === 'pending'
? 'bg-amber-600' ? 'bg-amber-100 text-amber-800'
: b.status === 'in_progress' : b.status === 'in_progress'
? 'bg-blue-600' ? 'bg-blue-100 text-blue-800'
: b.status === 'completed' : b.status === 'completed'
? 'bg-green-600' ? 'bg-green-100 text-green-800'
: 'bg-gray-600'}" : 'bg-gray-100 text-gray-800'}"
></span> >
{b.status} <span
</span> class="mr-1 h-1.5 w-1.5 rounded-full {b.status === 'confirmed'
<span> ? 'bg-emerald-600'
- {(() => { : b.status === 'pending'
const services = (b.services || []).map( ? 'bg-amber-600'
(s) => s.service_name || 'Unknown Service' : b.status === 'in_progress'
); ? 'bg-blue-600'
if (services.length === 0) return 'No services'; : b.status === 'completed'
if (services.length === 1) return services[0]; ? 'bg-green-600'
if (services.length === 2) return services.join(' and '); : 'bg-gray-600'}"
return `${services[0]} and ${services.length - 1} other${services.length - 1 > 1 ? 's' : ''}`; ></span>
})()} {b.status}
</span> </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> </div>
<Button variant="outline" onclick={() => goto(`/bookings/${b.id}`)}>View</Button
>
</div> </div>
<Button variant="outline" onclick={() => goto(`/bookings/${b.id}`)}>View</Button> {/each}
</div> {/if}
{/each} </Card.Content>
{/if} </Card.Root>
</Card.Content> {/if}
</Card.Root>
<!-- Past Bookings --> <!-- Past Bookings -->
<Card.Root> <Card.Root>