chore: apply project-wide formatting and UI library updates
Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
Sisyphus
@@ -230,7 +230,9 @@
|
||||
</script>
|
||||
|
||||
<Modal.Root bind:open>
|
||||
<Modal.Content class="max-h-[90vh] max-w-[calc(100%-2rem)] overflow-y-auto sm:max-w-md md:max-w-3xl">
|
||||
<Modal.Content
|
||||
class="max-h-[90vh] max-w-[calc(100%-2rem)] overflow-y-auto sm:max-w-md md:max-w-3xl"
|
||||
>
|
||||
<Modal.Header>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
@@ -270,7 +272,9 @@
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-xs text-gray-500">Email</div>
|
||||
<div class="font-medium break-words" title={selectedUser.email}>{selectedUser.email || '—'}</div>
|
||||
<div class="font-medium break-words" title={selectedUser.email}>
|
||||
{selectedUser.email || '—'}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-xs text-gray-500">Phone</div>
|
||||
@@ -334,7 +338,7 @@
|
||||
<img
|
||||
src={selectedUser.profilePicUrl}
|
||||
alt="Profile"
|
||||
class="mt-2 h-20 w-20 md:h-24 md:w-24 rounded-lg object-cover"
|
||||
class="mt-2 h-20 w-20 rounded-lg object-cover md:h-24 md:w-24"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -381,50 +385,50 @@
|
||||
return `${dateStr} at ${timeStr}`;
|
||||
})()}
|
||||
</div>
|
||||
<div class="mt-1 flex flex-wrap items-center gap-2 text-xs">
|
||||
<span
|
||||
class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium
|
||||
<div class="mt-1 flex flex-wrap items-center gap-2 text-xs">
|
||||
<span
|
||||
class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium
|
||||
{booking.status === 'confirmed' || booking.status === 'in_progress'
|
||||
? 'bg-emerald-100 text-emerald-800'
|
||||
: booking.status === 'pending'
|
||||
? 'bg-yellow-100 text-yellow-800'
|
||||
: booking.status === 'completed'
|
||||
? 'bg-green-100 text-green-800'
|
||||
: booking.status === 'client_cancelled' ||
|
||||
booking.status === 'we_cancelled' ||
|
||||
booking.status === 'no_deposit'
|
||||
? 'bg-red-100 text-red-800'
|
||||
: 'bg-gray-100 text-gray-800'}"
|
||||
>
|
||||
{booking.status.replace('_', ' ')}
|
||||
</span>
|
||||
? 'bg-emerald-100 text-emerald-800'
|
||||
: booking.status === 'pending'
|
||||
? 'bg-yellow-100 text-yellow-800'
|
||||
: booking.status === 'completed'
|
||||
? 'bg-green-100 text-green-800'
|
||||
: booking.status === 'client_cancelled' ||
|
||||
booking.status === 'we_cancelled' ||
|
||||
booking.status === 'no_deposit'
|
||||
? 'bg-red-100 text-red-800'
|
||||
: 'bg-gray-100 text-gray-800'}"
|
||||
>
|
||||
{booking.status.replace('_', ' ')}
|
||||
</span>
|
||||
|
||||
{#if booking.deposit_required}
|
||||
{#if booking.status === 'pending'}
|
||||
<span
|
||||
class="inline-flex items-center rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-800"
|
||||
>
|
||||
Will Require Deposit
|
||||
</span>
|
||||
{:else if (booking.status === 'confirmed' || booking.status === 'in_progress') && !booking.deposit_paid}
|
||||
<span
|
||||
class="inline-flex items-center rounded-full bg-orange-100 px-2 py-0.5 text-xs font-medium text-orange-800"
|
||||
>
|
||||
Deposit Due
|
||||
</span>
|
||||
{:else if booking.deposit_paid}
|
||||
<span
|
||||
class="inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800"
|
||||
>
|
||||
Deposit Paid
|
||||
</span>
|
||||
{#if booking.deposit_required}
|
||||
{#if booking.status === 'pending'}
|
||||
<span
|
||||
class="inline-flex items-center rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-800"
|
||||
>
|
||||
Will Require Deposit
|
||||
</span>
|
||||
{:else if (booking.status === 'confirmed' || booking.status === 'in_progress') && !booking.deposit_paid}
|
||||
<span
|
||||
class="inline-flex items-center rounded-full bg-orange-100 px-2 py-0.5 text-xs font-medium text-orange-800"
|
||||
>
|
||||
Deposit Due
|
||||
</span>
|
||||
{:else if booking.deposit_paid}
|
||||
<span
|
||||
class="inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800"
|
||||
>
|
||||
Deposit Paid
|
||||
</span>
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<span class="text-gray-500">
|
||||
{booking.services.map((s) => s.service_name).join(', ')}
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-gray-500">
|
||||
{booking.services.map((s) => s.service_name).join(', ')}
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-1 text-sm font-semibold text-gray-900">
|
||||
£{booking.total_amount.toFixed(2)}
|
||||
</div>
|
||||
@@ -484,19 +488,27 @@
|
||||
<div class="grid gap-3 md:grid-cols-3">
|
||||
<div>
|
||||
<div class="text-xs text-gray-500">Total Spend</div>
|
||||
<div class="text-2xl font-bold text-emerald-600">£{customerRelationship.totalSpend.toFixed(2)}</div>
|
||||
<div class="text-2xl font-bold text-emerald-600">
|
||||
£{customerRelationship.totalSpend.toFixed(2)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-xs text-gray-500">Total Tips</div>
|
||||
<div class="text-2xl font-bold text-amber-600">£{customerRelationship.totalTips.toFixed(2)}</div>
|
||||
<div class="text-2xl font-bold text-amber-600">
|
||||
£{customerRelationship.totalTips.toFixed(2)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-xs text-gray-500">Total Visits</div>
|
||||
<div class="text-2xl font-bold text-blue-600">{customerRelationship.totalVisits}</div>
|
||||
<div class="text-2xl font-bold text-blue-600">
|
||||
{customerRelationship.totalVisits}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-xs text-gray-500">Customer For</div>
|
||||
<div class="text-2xl font-bold text-purple-600">{customerRelationship.customerFor || '—'}</div>
|
||||
<div class="text-2xl font-bold text-purple-600">
|
||||
{customerRelationship.customerFor || '—'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -505,7 +517,9 @@
|
||||
<div class="mb-2 text-xs font-semibold text-gray-600">Most Booked Services</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
{#each customerRelationship.topServices as service (service.name)}
|
||||
<span class="inline-flex items-center rounded-full bg-blue-100 px-3 py-1 text-sm font-medium text-blue-800">
|
||||
<span
|
||||
class="inline-flex items-center rounded-full bg-blue-100 px-3 py-1 text-sm font-medium text-blue-800"
|
||||
>
|
||||
{service.name}
|
||||
<span class="ml-1 text-xs text-blue-600">({service.count})</span>
|
||||
</span>
|
||||
@@ -538,21 +552,28 @@
|
||||
</div>
|
||||
|
||||
{#if hasEligiblePatchTests}
|
||||
<!-- Patch Test Actions -->
|
||||
<div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
|
||||
<h3 class="mb-3 text-sm font-semibold tracking-wide text-gray-600 uppercase">
|
||||
Patch Tests
|
||||
</h3>
|
||||
<p class="mb-3 text-sm text-gray-600">
|
||||
Record patch test completion to allow this user to book services requiring one.
|
||||
</p>
|
||||
<Button variant="outline" onclick={() => (showPatchTestModal = true)}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="mr-2 h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||||
</svg>
|
||||
Record Patch Test
|
||||
</Button>
|
||||
</div>
|
||||
<!-- Patch Test Actions -->
|
||||
<div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
|
||||
<h3 class="mb-3 text-sm font-semibold tracking-wide text-gray-600 uppercase">
|
||||
Patch Tests
|
||||
</h3>
|
||||
<p class="mb-3 text-sm text-gray-600">
|
||||
Record patch test completion to allow this user to book services requiring one.
|
||||
</p>
|
||||
<Button variant="outline" onclick={() => (showPatchTestModal = true)}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="mr-2 h-4 w-4"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
|
||||
</svg>
|
||||
Record Patch Test
|
||||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user