From b2f9a14b8730889789a492fcc60ccb6e541b3f41 Mon Sep 17 00:00:00 2001
From: Jose Selesan <jose.selesan@solotechnologies.us>
Date: Mon, 8 Jun 2026 15:28:49 -0300
Subject: [PATCH] refactor(booking): remove maintenance-related metrics and UI
 components

---
 apps/frontend/src/components/ui/select.tsx    |  2 +-
 .../src/features/booking/booking-provider.tsx | 11 ++-----
 .../src/features/booking/booking.types.ts     |  7 ++--
 .../components/booking-day-summary.tsx        | 21 ++----------
 .../booking/components/booking-mobile.tsx     | 32 ++++---------------
 .../components/booking-status-legend.tsx      |  1 -
 .../booking/components/booking-timeline.tsx   |  9 ++----
 .../booking/components/booking-toolbar.tsx    | 10 ++----
 .../public-booking/public-booking-page.tsx    | 12 ++-----
 apps/frontend/src/index.css                   |  9 ------
 10 files changed, 19 insertions(+), 95 deletions(-)

diff --git a/apps/frontend/src/components/ui/select.tsx b/apps/frontend/src/components/ui/select.tsx
index 41f8c37..a911e86 100644
--- a/apps/frontend/src/components/ui/select.tsx
+++ b/apps/frontend/src/components/ui/select.tsx
@@ -35,7 +35,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex w-full items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
diff --git a/apps/frontend/src/features/booking/booking-provider.tsx b/apps/frontend/src/features/booking/booking-provider.tsx
index dd725a6..1b34655 100644
--- a/apps/frontend/src/features/booking/booking-provider.tsx
+++ b/apps/frontend/src/features/booking/booking-provider.tsx
@@ -210,20 +210,14 @@ function buildSegmentsForCourt(
 function getSummary(schedules: BookingCourtSchedule[]): BookingSummary {
   const freeSlots = schedules.reduce((total, schedule) => total + schedule.metrics.free, 0);
   const reservedSlots = schedules.reduce((total, schedule) => total + schedule.metrics.reserved, 0);
-  const maintenanceSlots = schedules.reduce(
-    (total, schedule) => total + schedule.metrics.maintenance,
-    0
-  );
-  const totalSegments = freeSlots + reservedSlots + maintenanceSlots || 1;
+  const totalSegments = freeSlots + reservedSlots || 1;
 
   return {
-    totalReservations: reservedSlots + maintenanceSlots + freeSlots,
+    totalReservations: freeSlots + reservedSlots,
     freeSlots,
     reservedSlots,
-    maintenanceSlots,
     freePercent: Math.round((freeSlots / totalSegments) * 100),
     reservedPercent: Math.round((reservedSlots / totalSegments) * 100),
-    maintenancePercent: Math.round((maintenanceSlots / totalSegments) * 100),
   };
 }
 
@@ -275,7 +269,6 @@ export function BookingProvider({ children, complex }: BookingProviderProps) {
         const metrics = {
           free: segments.filter((segment) => segment.status === 'free').length,
           reserved: segments.filter((segment) => segment.status === 'reserved').length,
-          maintenance: segments.filter((segment) => segment.status === 'maintenance').length,
         };
 
         return { court, segments, metrics };
diff --git a/apps/frontend/src/features/booking/booking.types.ts b/apps/frontend/src/features/booking/booking.types.ts
index a933d99..9942861 100644
--- a/apps/frontend/src/features/booking/booking.types.ts
+++ b/apps/frontend/src/features/booking/booking.types.ts
@@ -1,8 +1,8 @@
 import type { AdminBooking, Court } from '@repo/api-contract';
 
 export type BookingViewMode = 'panel' | 'status';
-export type BookingStatusFilter = 'all' | 'free' | 'reserved' | 'maintenance';
-export type BookingSegmentStatus = 'free' | 'reserved' | 'maintenance';
+export type BookingStatusFilter = 'all' | 'free' | 'reserved';
+export type BookingSegmentStatus = 'free' | 'reserved';
 
 export interface BookingTimeRange {
   start: string;
@@ -13,16 +13,13 @@ export interface BookingSummary {
   totalReservations: number;
   freeSlots: number;
   reservedSlots: number;
-  maintenanceSlots: number;
   freePercent: number;
   reservedPercent: number;
-  maintenancePercent: number;
 }
 
 export interface BookingCourtMetrics {
   free: number;
   reserved: number;
-  maintenance: number;
 }
 
 export interface BookingTimelineSegment {
diff --git a/apps/frontend/src/features/booking/components/booking-day-summary.tsx b/apps/frontend/src/features/booking/components/booking-day-summary.tsx
index 939446b..b153a6e 100644
--- a/apps/frontend/src/features/booking/components/booking-day-summary.tsx
+++ b/apps/frontend/src/features/booking/components/booking-day-summary.tsx
@@ -1,4 +1,4 @@
-import { CalendarDays, Download, Drill, ShieldCheck, UsersRound } from 'lucide-react';
+import { CalendarDays, Download, ShieldCheck, UsersRound } from 'lucide-react';
 import { useBooking } from '../booking-provider';
 import { formatBookingDate, toIsoDateLocal } from '../lib/booking-time';
 
@@ -14,7 +14,7 @@ export function BookingDaySummary() {
         </p>
       </div>
 
-      <div className="grid gap-3 md:grid-cols-4">
+      <div className="grid gap-3 md:grid-cols-3">
         <SummaryCard
           label="Total de bloques"
           value={summary.totalReservations}
@@ -35,13 +35,6 @@ export function BookingDaySummary() {
           icon={ShieldCheck}
           className="border-reserved/35 bg-reserved/10 text-reserved"
         />
-        <SummaryCard
-          label="Mantenimiento"
-          value={summary.maintenanceSlots}
-          detail={`${summary.maintenancePercent}% del total`}
-          icon={Drill}
-          className="border-maintenance/35 bg-maintenance/10 text-maintenance"
-        />
       </div>
     </section>
   );
@@ -77,7 +70,6 @@ export function BookingQuickActions() {
     useBooking();
   const todayIso = toIsoDateLocal(new Date());
   const isViewingTodayReservations = selectedDate === todayIso && selectedStatus === 'reserved';
-  const isViewingMaintenance = selectedStatus === 'maintenance';
 
   return (
     <section className="rounded-lg border bg-card/85 p-5 shadow-sm">
@@ -95,15 +87,6 @@ export function BookingQuickActions() {
           <CalendarDays className="size-4 text-muted-foreground" />
           {isViewingTodayReservations ? 'Ver todos los estados' : 'Ver reservas de hoy'}
         </button>
-        <button
-          type="button"
-          onClick={() => setSelectedStatus(isViewingMaintenance ? 'all' : 'maintenance')}
-          aria-pressed={isViewingMaintenance}
-          className="flex h-10 items-center gap-3 rounded-md border bg-background/45 px-3 text-left text-sm transition-colors hover:bg-muted aria-pressed:border-maintenance/50 aria-pressed:bg-maintenance/10"
-        >
-          <Drill className="size-4 text-maintenance" />
-          {isViewingMaintenance ? 'Ver todos los estados' : 'Ver mantenimiento'}
-        </button>
         <button
           type="button"
           onClick={exportDayReport}
diff --git a/apps/frontend/src/features/booking/components/booking-mobile.tsx b/apps/frontend/src/features/booking/components/booking-mobile.tsx
index c9afb08..c8f7a84 100644
--- a/apps/frontend/src/features/booking/components/booking-mobile.tsx
+++ b/apps/frontend/src/features/booking/components/booking-mobile.tsx
@@ -31,7 +31,6 @@ import {
   Sun,
   User,
   Users,
-  Wrench,
 } from 'lucide-react';
 import type React from 'react';
 import { useMemo, useState } from 'react';
@@ -400,11 +399,6 @@ function MobileSummary() {
           label="Reservados"
           className="bg-reserved/15 text-reserved"
         />
-        <SummaryPill
-          value={summary.maintenanceSlots}
-          label="Mantenim."
-          className="bg-maintenance/15 text-maintenance"
-        />
       </div>
     </section>
   );
@@ -426,7 +420,6 @@ function MobileStatusTab() {
     { value: 'all', label: 'Todos' },
     { value: 'free', label: 'Libres' },
     { value: 'reserved', label: 'Reservados' },
-    { value: 'maintenance', label: 'Mantenimiento' },
   ] as const;
   const timeRangeOptions = [
     { label: '08:00 - 22:00', start: '08:00', end: '22:00' },
@@ -850,14 +843,10 @@ function MobileSegmentRow({
       ) : (
         <div className="max-w-[132px] text-right">
           <p className="truncate text-sm font-medium">
-            {segment.booking?.customerName ?? 'Mantenimiento'}
+            {segment.booking?.customerName ?? 'Sin información'}
           </p>
           <p className="mt-2 inline-flex items-center gap-1 text-sm text-muted-foreground">
-            {segment.status === 'maintenance' ? (
-              <Wrench className="size-4" />
-            ) : (
-              <Users className="size-4" />
-            )}
+            <Users className="size-4" />
             {segment.booking?.customerPhone ?? 'Personal'}
           </p>
         </div>
@@ -868,23 +857,21 @@ function MobileSegmentRow({
 
 function SegmentStatusLine({ segment }: { segment: BookingTimelineSegment }) {
   const status = segment.status;
-  const label = status === 'free' ? 'Libre' : status === 'reserved' ? 'Reservado' : 'Mantenimiento';
+  const label = status === 'free' ? 'Libre' : 'Reservado';
 
   return (
     <p
       className={cn(
         'mt-2 inline-flex items-center gap-2 text-sm',
         status === 'free' && 'text-primary',
-        status === 'reserved' && 'text-reserved',
-        status === 'maintenance' && 'text-maintenance'
+        status === 'reserved' && 'text-reserved'
       )}
     >
       <span
         className={cn(
           'size-3 rounded-full',
           status === 'free' && 'bg-primary',
-          status === 'reserved' && 'bg-reserved',
-          status === 'maintenance' && 'bg-maintenance'
+          status === 'reserved' && 'bg-reserved'
         )}
       />
       {label}
@@ -897,7 +884,6 @@ function StatusLegend() {
     <div className="flex items-center justify-between gap-3 text-sm">
       <LegendItem label="Libre" className="bg-primary" />
       <LegendItem label="Reservado" className="bg-reserved" />
-      <LegendItem label="Mantenimiento" className="bg-maintenance" />
     </div>
   );
 }
@@ -929,9 +915,7 @@ function MiniSlot({
       className={cn(
         'min-w-0 rounded-lg border px-1.5 py-2 text-center transition active:scale-[0.98] disabled:opacity-60',
         segment.status === 'free' && 'border-primary/50 bg-primary/15 text-primary',
-        segment.status === 'reserved' && 'border-reserved/50 bg-reserved/15 text-reserved',
-        segment.status === 'maintenance' &&
-          'border-maintenance/50 bg-maintenance/15 text-maintenance'
+        segment.status === 'reserved' && 'border-reserved/50 bg-reserved/15 text-reserved'
       )}
       disabled={!isActionable}
       onClick={() => {
@@ -981,10 +965,6 @@ function MetricDots({ schedule }: { schedule: BookingCourtSchedule }) {
         <span className="size-3 rounded-full bg-reserved" />
         {schedule.metrics.reserved}
       </span>
-      <span className="inline-flex items-center gap-1 text-maintenance">
-        <span className="size-3 rounded-full bg-maintenance" />
-        {schedule.metrics.maintenance}
-      </span>
     </div>
   );
 }
diff --git a/apps/frontend/src/features/booking/components/booking-status-legend.tsx b/apps/frontend/src/features/booking/components/booking-status-legend.tsx
index 889e512..a3e396f 100644
--- a/apps/frontend/src/features/booking/components/booking-status-legend.tsx
+++ b/apps/frontend/src/features/booking/components/booking-status-legend.tsx
@@ -1,7 +1,6 @@
 const items = [
   { label: 'Libre', className: 'bg-primary' },
   { label: 'Reservado', className: 'bg-reserved' },
-  { label: 'Mantenimiento', className: 'bg-maintenance' },
 ];
 
 export function BookingStatusLegend() {
diff --git a/apps/frontend/src/features/booking/components/booking-timeline.tsx b/apps/frontend/src/features/booking/components/booking-timeline.tsx
index 23cd311..e9ff8eb 100644
--- a/apps/frontend/src/features/booking/components/booking-timeline.tsx
+++ b/apps/frontend/src/features/booking/components/booking-timeline.tsx
@@ -215,10 +215,6 @@ function BookingCourtInfo({ schedule }: { schedule: BookingCourtSchedule }) {
             <span className="size-2 rounded-full bg-reserved" />
             {schedule.metrics.reserved}
           </span>
-          <span className="inline-flex items-center gap-1">
-            <span className="size-2 rounded-full bg-maintenance" />
-            {schedule.metrics.maintenance}
-          </span>
         </div>
       </div>
     </div>
@@ -247,8 +243,7 @@ function BookingSlotBlock({ segment, schedule, rangeStart, totalMinutes }: Booki
           'border-primary/70 bg-primary/20 text-primary hover:bg-primary/25',
         segment.status === 'reserved' &&
           'border-reserved/70 bg-reserved/80 text-reserved-foreground',
-        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',
         segment.booking?.status === 'NOSHOW' &&
@@ -300,7 +295,7 @@ function BookingSlotBlock({ segment, schedule, rangeStart, totalMinutes }: Booki
           </div>
           <span className="mt-1 flex items-center gap-1 truncate opacity-90">
             <Users className="size-3" />
-            {segment.booking?.customerName ?? 'Mantenimiento'}
+            {segment.booking?.customerName ?? 'Sin información'}
           </span>
         </>
       )}
diff --git a/apps/frontend/src/features/booking/components/booking-toolbar.tsx b/apps/frontend/src/features/booking/components/booking-toolbar.tsx
index 8569554..b3d1c00 100644
--- a/apps/frontend/src/features/booking/components/booking-toolbar.tsx
+++ b/apps/frontend/src/features/booking/components/booking-toolbar.tsx
@@ -8,7 +8,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { ChevronLeft, ChevronRight, Clock, SlidersHorizontal } from 'lucide-react';
+import { ChevronLeft, ChevronRight, Clock } from 'lucide-react';
 import { useBooking } from '../booking-provider';
 import type { BookingStatusFilter } from '../booking.types';
 import { fromIsoDateLocal, toIsoDateLocal } from '../lib/booking-time';
@@ -24,7 +24,6 @@ const statusOptions: Array<{ value: BookingStatusFilter; label: string }> = [
   { value: 'all', label: 'Todos' },
   { value: 'free', label: 'Libre' },
   { value: 'reserved', label: 'Reservado' },
-  { value: 'maintenance', label: 'Mantenimiento' },
 ];
 
 export function BookingToolbar() {
@@ -46,7 +45,7 @@ export function BookingToolbar() {
 
   return (
     <section className="rounded-lg border bg-card/85 p-4 shadow-sm">
-      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-[1fr_1fr_1.6fr_1.1fr_auto] xl:items-end">
+      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-[1fr_1fr_1.6fr_1.1fr] xl:items-end">
         <Field>
           <FieldLabel>Deporte</FieldLabel>
           <Select value={selectedSportId} onValueChange={setSelectedSportId}>
@@ -133,11 +132,6 @@ export function BookingToolbar() {
             </SelectContent>
           </Select>
         </Field>
-
-        <Button variant="outline" className="xl:self-end">
-          <SlidersHorizontal className="size-4" />
-          Filtros avanzados
-        </Button>
       </div>
     </section>
   );
diff --git a/apps/frontend/src/features/public-booking/public-booking-page.tsx b/apps/frontend/src/features/public-booking/public-booking-page.tsx
index 5903b76..e1bce59 100644
--- a/apps/frontend/src/features/public-booking/public-booking-page.tsx
+++ b/apps/frontend/src/features/public-booking/public-booking-page.tsx
@@ -39,7 +39,6 @@ import {
   Sun,
   Trophy,
   Users,
-  Wrench,
   Zap,
 } from 'lucide-react';
 import { useEffect, useMemo, useRef, useState } from 'react';
@@ -376,7 +375,6 @@ function Legend() {
     <div className="flex flex-wrap gap-4 text-xs text-white/70">
       <LegendDot color="bg-emerald-500" label="Libre" />
       <LegendDot color="bg-blue-500" label="Reservado" />
-      <LegendDot color="bg-red-500" label="Mantenimiento" />
     </div>
   );
 }
@@ -1134,19 +1132,13 @@ function BookingTimeline({
 
             const left = ((end - range.start) / total) * 100;
             const width = ((Math.min(nextStart, range.end) - end) / total) * 100;
-            const maintenance = index % 2 === 1;
-
             return (
               <div
                 key={`${court?.courtId}-blocked-${slot.startTime}`}
-                className={`absolute top-7 flex h-12 min-w-[44px] items-center justify-center rounded border ${
-                  maintenance
-                    ? 'border-red-500/80 bg-red-500/28 text-red-100'
-                    : 'border-blue-500/70 bg-blue-500/24 text-blue-100'
-                }`}
+                className="absolute top-7 flex h-12 min-w-[44px] items-center justify-center rounded border border-blue-500/70 bg-blue-500/24 text-blue-100"
                 style={{ left: `${left}%`, width: `${Math.max(width - 0.8, 4.5)}%` }}
               >
-                {maintenance ? <Wrench className="size-4" /> : <Lock className="size-4" />}
+                <Lock className="size-4" />
               </div>
             );
           })}
diff --git a/apps/frontend/src/index.css b/apps/frontend/src/index.css
index 369493e..5389b39 100644
--- a/apps/frontend/src/index.css
+++ b/apps/frontend/src/index.css
@@ -54,9 +54,6 @@ body,
   --color-reserved: var(--reserved);
   --color-reserved-foreground: var(--reserved-foreground);
 
-  --color-maintenance: var(--maintenance);
-  --color-maintenance-foreground: var(--maintenance-foreground);
-
   --color-warning: var(--warning);
   --color-warning-foreground: var(--warning-foreground);
 
@@ -117,9 +114,6 @@ body,
   --reserved: oklch(0.58 0.19 255);
   --reserved-foreground: oklch(0.985 0.01 255);
 
-  --maintenance: oklch(0.64 0.22 25);
-  --maintenance-foreground: oklch(0.985 0.01 25);
-
   --warning: oklch(0.78 0.16 75);
   --warning-foreground: oklch(0.18 0.04 75);
 
@@ -176,9 +170,6 @@ body,
   --reserved: oklch(0.61 0.2 255);
   --reserved-foreground: oklch(0.97 0.012 255);
 
-  --maintenance: oklch(0.66 0.23 25);
-  --maintenance-foreground: oklch(0.98 0.01 25);
-
   --warning: oklch(0.78 0.17 75);
   --warning-foreground: oklch(0.18 0.04 75);