fix: restore ServicesManagement.svelte component

This commit is contained in:
2026-05-29 18:09:06 +01:00
parent 7d1266707c
commit 94f3f77985
@@ -70,10 +70,6 @@
return 'Duration must be greater than 0'; return 'Duration must be greater than 0';
} }
if (field === 'patch_test_duration_hours' && value < 0) {
return 'Cannot be negative';
}
if (field === 'minimum_age_required' && (value < 0 || value > 100)) { if (field === 'minimum_age_required' && (value < 0 || value > 100)) {
return 'Must be between 0 and 100'; return 'Must be between 0 and 100';
} }
@@ -321,7 +317,6 @@
</Card.Header> </Card.Header>
<Card.Content class="space-y-4"> <Card.Content class="space-y-4">
<!-- Desktop Table -->
<div class="hidden w-full overflow-x-auto md:block"> <div class="hidden w-full overflow-x-auto md:block">
<table class="w-full table-auto border-collapse text-sm"> <table class="w-full table-auto border-collapse text-sm">
<thead> <thead>
@@ -406,7 +401,6 @@
</table> </table>
</div> </div>
<!-- Mobile Cards -->
<div class="space-y-4 md:hidden"> <div class="space-y-4 md:hidden">
{#if servicesLoading} {#if servicesLoading}
{#each Array(3) as _, i (i)} {#each Array(3) as _, i (i)}
@@ -492,7 +486,6 @@
</Card.Content> </Card.Content>
</Card.Root> </Card.Root>
<!-- Add Service Modal -->
<Modal.Root bind:open={showServiceModal}> <Modal.Root bind:open={showServiceModal}>
<Modal.Content class="max-h-[90vh] max-w-sm overflow-y-auto md:max-w-lg"> <Modal.Content class="max-h-[90vh] max-w-sm overflow-y-auto md:max-w-lg">
<Modal.Header> <Modal.Header>
@@ -501,7 +494,6 @@
</Modal.Header> </Modal.Header>
<div class="space-y-4 px-4 pb-4"> <div class="space-y-4 px-4 pb-4">
<!-- Service Name -->
<div class="space-y-2"> <div class="space-y-2">
<label for="service-name" class="text-sm font-medium">Service Name *</label> <label for="service-name" class="text-sm font-medium">Service Name *</label>
<Input <Input
@@ -511,14 +503,13 @@
placeholder="e.g., Haircut, Color, Blowdry" placeholder="e.g., Haircut, Color, Blowdry"
bind:value={newService.name} bind:value={newService.name}
onblur={validateNameField} onblur={validateNameField}
class="w-full border-red-500={serviceErrors.name}" class="w-full {serviceErrors.name ? 'border-red-500' : ''}"
/> />
{#if serviceErrors.name} {#if serviceErrors.name}
<p class="text-sm text-red-600">{serviceErrors.name}</p> <p class="text-sm text-red-600">{serviceErrors.name}</p>
{/if} {/if}
</div> </div>
<!-- Description -->
<div class="space-y-2"> <div class="space-y-2">
<label for="service-description" class="text-sm font-medium">Description</label> <label for="service-description" class="text-sm font-medium">Description</label>
<Input <Input
@@ -530,9 +521,7 @@
/> />
</div> </div>
<!-- Price and Duration - Side by side on desktop -->
<div class="grid grid-cols-1 gap-4 md:grid-cols-2"> <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
<!-- Price -->
<div class="space-y-2"> <div class="space-y-2">
<label for="service-price" class="text-sm font-medium">Price (£) *</label> <label for="service-price" class="text-sm font-medium">Price (£) *</label>
<div class="relative"> <div class="relative">
@@ -545,7 +534,7 @@
placeholder="0.00" placeholder="0.00"
bind:value={newService.price} bind:value={newService.price}
onblur={validatePriceField} onblur={validatePriceField}
class="w-full pl-8 border-red-500={serviceErrors.price}" class="w-full pl-8 {serviceErrors.price ? 'border-red-500' : ''}"
/> />
</div> </div>
{#if serviceErrors.price} {#if serviceErrors.price}
@@ -553,7 +542,6 @@
{/if} {/if}
</div> </div>
<!-- Duration -->
<div class="space-y-2"> <div class="space-y-2">
<label for="service-duration" class="text-sm font-medium">Duration (minutes) *</label> <label for="service-duration" class="text-sm font-medium">Duration (minutes) *</label>
<Input <Input
@@ -564,7 +552,7 @@
placeholder="60" placeholder="60"
bind:value={newService.duration_minutes} bind:value={newService.duration_minutes}
onblur={validateDurationField} onblur={validateDurationField}
class="w-full border-red-500={serviceErrors.duration_minutes}" class="w-full {serviceErrors.duration_minutes ? 'border-red-500' : ''}"
/> />
{#if serviceErrors.duration_minutes} {#if serviceErrors.duration_minutes}
<p class="text-sm text-red-600">{serviceErrors.duration_minutes}</p> <p class="text-sm text-red-600">{serviceErrors.duration_minutes}</p>
@@ -572,9 +560,7 @@
</div> </div>
</div> </div>
<!-- Patch Test and Minimum Age - Side by side on desktop -->
<div class="grid grid-cols-1 gap-4 md:grid-cols-2"> <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
<!-- Minimum Age -->
<div class="space-y-2"> <div class="space-y-2">
<label for="minimum-age" class="text-sm font-medium">Minimum Age</label> <label for="minimum-age" class="text-sm font-medium">Minimum Age</label>
<Input <Input
@@ -586,7 +572,7 @@
placeholder="0" placeholder="0"
bind:value={newService.minimum_age_required} bind:value={newService.minimum_age_required}
onblur={validateMinimumAgeField} onblur={validateMinimumAgeField}
class="w-full border-red-500={serviceErrors.minimum_age_required}" class="w-full {serviceErrors.minimum_age_required ? 'border-red-500' : ''}"
/> />
{#if serviceErrors.minimum_age_required} {#if serviceErrors.minimum_age_required}
<p class="text-sm text-red-600">{serviceErrors.minimum_age_required}</p> <p class="text-sm text-red-600">{serviceErrors.minimum_age_required}</p>