duration formatting

frontend/src/routes/book/+page.svelte

@@ -628,6 +628,22 @@
 		return allSlots;
 	}
 
+	function formatDuration(minutes: number): string {
+		const hours = Math.floor(minutes / 60);
+		const remainingMinutes = minutes % 60;
+
+		if (hours === 0) {
+			return `${remainingMinutes} minutes`;
+		} else if (remainingMinutes === 0) {
+			return `${hours} ${hours === 1 ? 'hour' : 'hours'}`;
+		} else {
+			return `${hours} ${hours === 1 ? 'hour' : 'hours'} ${remainingMinutes} minutes`;
+		}
+	}
+
+	// Use the formatted duration everywhere
+	const formattedTotalDuration = $derived(formatDuration(getTotalDuration()));
+
 	function nextStep() {
 		if (currentStep < 4) {
 			currentStep++;
@@ -764,8 +780,8 @@
 							{/each}
 							<Separator class="my-2" />
 							<div class="flex justify-between text-sm font-semibold">
-								<span>Total Duration:</span>
-								<span>{getTotalDuration()} minutes</span>
+								<span>Estimated Duration:</span>
+								<span>{formattedTotalDuration}</span>
 							</div>
 							<div class="flex justify-between text-sm font-semibold">
 								<span>Total Cost:</span>
@@ -787,7 +803,7 @@
 			<Card.Header>
 				<Card.Title>Choose Date & Time</Card.Title>
 				<Card.Description>
-					{selectedServices.map((s) => s.name).join(', ')} • {getTotalDuration()} minutes total • £{getTotalPrice()}
+					{selectedServices.map((s) => s.name).join(', ')} • {formattedTotalDuration} total • £{getTotalPrice()}
 				</Card.Description>
 			</Card.Header>
 			<Card.Content class="p-0">
@@ -934,8 +950,8 @@
 							<span class="font-medium">{selectedTime}</span>
 						</div>
 						<div class="flex justify-between">
-							<span>Total Duration:</span>
-							<span class="font-medium">{getTotalDuration()} minutes</span>
+							<span>Estimated Duration:</span>
+							<span class="font-medium">{formattedTotalDuration}</span>
 						</div>
 						<Separator class="my-2" />
 						<div class="flex justify-between font-semibold">