From 1059d767d5b17f4ad2ab9394337dd1af0451a161 Mon Sep 17 00:00:00 2001
From: Jose Selesan <jose.selesan@solotechnologies.us>
Date: Wed, 6 May 2026 17:10:23 -0300
Subject: [PATCH] View no shows in booking panel

---
 .../src/features/booking/booking-provider.tsx |  4 +++-
 .../booking/components/booking-timeline.tsx   | 21 ++++++++++++++-----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/apps/frontend/src/features/booking/booking-provider.tsx b/apps/frontend/src/features/booking/booking-provider.tsx
index 4b4121b..919976e 100644
--- a/apps/frontend/src/features/booking/booking-provider.tsx
+++ b/apps/frontend/src/features/booking/booking-provider.tsx
@@ -112,7 +112,9 @@ function makeTimelineHours(range: BookingTimeRange) {
 }
 
 function isActiveBooking(booking: AdminBooking) {
-  return booking.status === 'CONFIRMED' || booking.status === 'COMPLETED';
+  return (
+    booking.status === 'CONFIRMED' || booking.status === 'COMPLETED' || booking.status === 'NOSHOW'
+  );
 }
 
 function getCourtBookings(court: Court, bookings: AdminBooking[], selectedDate: string) {
diff --git a/apps/frontend/src/features/booking/components/booking-timeline.tsx b/apps/frontend/src/features/booking/components/booking-timeline.tsx
index f594e31..c25192a 100644
--- a/apps/frontend/src/features/booking/components/booking-timeline.tsx
+++ b/apps/frontend/src/features/booking/components/booking-timeline.tsx
@@ -1,6 +1,6 @@
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
-import { ChevronLeft, ChevronRight, Dumbbell, Plus, Users } from 'lucide-react';
+import { ChevronLeft, ChevronRight, Dumbbell, Plus, UserX, Users } from 'lucide-react';
 import { useBooking } from '../booking-provider';
 import type { BookingCourtSchedule, BookingTimelineSegment } from '../booking.types';
 import { timeToMinutes } from '../lib/booking-time';
@@ -227,7 +227,9 @@ function BookingSlotBlock({ segment, schedule, rangeStart, totalMinutes }: Booki
         segment.status === 'maintenance' &&
           'border-maintenance/80 bg-maintenance/75 text-maintenance-foreground',
         segment.booking?.status === 'COMPLETED' &&
-          'border-reserved/70 bg-reserved/25 dark:text-reserved-foreground text-gray-600 line-through'
+          'border-reserved/70 bg-reserved/25 dark:text-reserved-foreground text-gray-600 line-through',
+        segment.booking?.status === 'NOSHOW' &&
+          'border-amber-500/60 bg-amber-500/50 text-amber-950 dark:text-amber-200'
       )}
       style={{
         left: `calc(${left}% + 4px)`,
@@ -240,6 +242,8 @@ function BookingSlotBlock({ segment, schedule, rangeStart, totalMinutes }: Booki
             startTime: segment.startTime,
             sportId: schedule.court.sportId,
           });
+        } else if (segment.booking?.status === 'NOSHOW') {
+          return;
         } else {
           if (event.shiftKey && segment.booking?.status === 'CONFIRMED') {
             updateBookingStatus(segment.booking.id, 'COMPLETED');
@@ -261,9 +265,16 @@ function BookingSlotBlock({ segment, schedule, rangeStart, totalMinutes }: Booki
         </span>
       ) : (
         <>
-          <span className="truncate text-sm font-medium">
-            {segment.startTime} - {segment.endTime}
-          </span>
+          <div className="flex items-center justify-between">
+            <span className="truncate text-sm font-medium">
+              {segment.startTime} - {segment.endTime}
+            </span>
+            {segment.booking?.status === 'NOSHOW' && (
+              <span title="No Show - El cliente no se presentó">
+                <UserX className="size-3 shrink-0" />
+              </span>
+            )}
+          </div>
           <span className="mt-1 flex items-center gap-1 truncate opacity-90">
             <Users className="size-3" />
             {segment.booking?.customerName ?? 'Mantenimiento'}